gsxui

Toggle-group

Basic

// Package togglegroup holds the site's example gsx components for
// ui/toggle-group. "toggle-group" can't be a Go package name (hyphen), so
// the directory drops it — same selectbox/switchctl-style workaround as
// select/switch, not a Go-keyword issue this time. The registered example
// key stays the hyphenated "toggle-group" (see togglegroup.go).
package togglegroup

import (
	"github.com/gsxhq/gsxui/ui"
	"github.com/gsxhq/gsxui/ui/icon"
)

// Basic mirrors shadcn's own toggle-group-demo.tsx: type="multiple",
// variant="outline", 3 icon-only items, none pressed at first paint —
// every ToggleGroupItem repeats the group's groupType/variant/size/spacing
// explicitly (see ui/toggle-group.gsx's own GAP doc comment on why: no
// context, the caller resolves and passes down). groupType, not type — see
// ToggleGroup's own doc comment on the Go-keyword param rename.
component Basic() {
	<ui.ToggleGroup groupType="multiple" variant="outline" size="lg" aria-label="Text formatting">
		<ui.ToggleGroupItem groupType="multiple" variant="outline" size="lg" value="bold" aria-label="Toggle bold">
			<icon.Bold/>
		</ui.ToggleGroupItem>
		<ui.ToggleGroupItem groupType="multiple" variant="outline" size="lg" value="italic" aria-label="Toggle italic">
			<icon.Italic/>
		</ui.ToggleGroupItem>
		<ui.ToggleGroupItem
			groupType="multiple"
			variant="outline"
			size="lg"
			value="underline"
			aria-label="Toggle underline"
			aria-invalid="true"
		>
			<icon.Underline/>
		</ui.ToggleGroupItem>
	</ui.ToggleGroup>
}

Single

// Package togglegroup — see basic.gsx's own package doc comment.
package togglegroup

import "github.com/gsxhq/gsxui/ui"

// Single mirrors shadcn's toggle-group-single.tsx: groupType="single",
// default variant — the role="radio"/aria-checked branch (see
// ui/toggle-group.gsx's own doc comment) left untested by Basic's
// type="multiple" demo. "left" is server-rendered already pressed
// (pressed, aria-checked="true", data-state="on"); clicking "center" or
// "right" replaces it via toggle-group.js's single-type
// replace-on-activate mechanic.
component Single() {
	<ui.ToggleGroup groupType="single" aria-label="Text alignment">
		<ui.ToggleGroupItem groupType="single" value="left" pressed aria-label="Align left">
			Left
		</ui.ToggleGroupItem>
		<ui.ToggleGroupItem groupType="single" value="center" aria-label="Align center">
			Center
		</ui.ToggleGroupItem>
		<ui.ToggleGroupItem groupType="single" value="right" aria-label="Align right">
			Right
		</ui.ToggleGroupItem>
	</ui.ToggleGroup>
}

Spacing

// Package togglegroup — see basic.gsx's own package doc comment.
package togglegroup

import (
	"github.com/gsxhq/gsxui/ui"
	"github.com/gsxhq/gsxui/ui/icon"
)

// Spacing mirrors shadcn's toggle-group-spacing.tsx: type="multiple",
// variant="outline", spacing="2", size="sm" — the spacing/rounding/size
// stress case (spacing != "0" means the data-[spacing=0]: squared-off/
// joined-pill selectors on ToggleGroupItem never fire, so items render as
// separate rounded buttons with a real gap between them, sized by the
// root's style="--gap: 2").
component Spacing() {
	<ui.ToggleGroup groupType="multiple" variant="outline" spacing="2" size="sm" aria-label="Text formatting">
		<ui.ToggleGroupItem
			groupType="multiple"
			variant="outline"
			spacing="2"
			size="sm"
			value="bold"
			aria-label="Toggle bold"
		>
			<icon.Bold/>
		</ui.ToggleGroupItem>
		<ui.ToggleGroupItem
			groupType="multiple"
			variant="outline"
			spacing="2"
			size="sm"
			value="italic"
			aria-label="Toggle italic"
		>
			<icon.Italic/>
		</ui.ToggleGroupItem>
		<ui.ToggleGroupItem
			groupType="multiple"
			variant="outline"
			spacing="2"
			size="sm"
			value="underline"
			aria-label="Toggle underline"
		>
			<icon.Underline/>
		</ui.ToggleGroupItem>
	</ui.ToggleGroup>
}

RTL

package togglegroup

import "github.com/gsxhq/gsxui/ui"

// Rtl mirrors shadcn's own toggle-group-rtl demo: an outline single-select
// group of three text items ("list" selected), translated to Arabic and
// wrapped in dir="rtl".
component Rtl() {
	<div dir="rtl" lang="ar">
		<ui.ToggleGroup groupType="single" variant="outline" aria-label="View mode">
			<ui.ToggleGroupItem groupType="single" variant="outline" value="list" pressed aria-label="قائمة">
				قائمة
			</ui.ToggleGroupItem>
			<ui.ToggleGroupItem groupType="single" variant="outline" value="grid" aria-label="شبكة">شبكة</ui.ToggleGroupItem>
			<ui.ToggleGroupItem groupType="single" variant="outline" value="cards" aria-label="بطاقات">
				بطاقات
			</ui.ToggleGroupItem>
		</ui.ToggleGroup>
	</div>
}