Radio Group

package radiogroup

props {
  // Orientation sets the layout direction: Vertical or Horizontal.
  Orientation Orientation = Vertical
  // Label is the accessible name of the group.
  Label       string = ""
  // Class adds classes to the root element.
  Class       string = ""
  // Children is the radio items.
  Children    gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs       gx.Attrs = nil
}

<div role="radiogroup" aria-label={p.Label} aria-orientation={p.orientation()} class={gx.Cx("grid gap-3", orientationClass[p.orientation()], p.Class)} {...p.Attrs}>{p.Children}</div>

package radiogroup

import "github.com/alternayte/gx/registry/icons"

props {
  // Name is the form field name. Every item of one group has the same name.
  Name     string = ""
  // Value is the value the form submits when the item is checked.
  Value    string = ""
  // Checked selects the item for the first render.
  Checked  bool = false
  // Disabled disables the item.
  Disabled bool = false
  // Invalid sets aria-invalid on the input and shows the error style.
  Invalid  bool = false
  // Label is the text beside the radio. An empty value renders no text.
  Label    string = ""
  // Class adds classes to the root element.
  Class    string = ""
  // Children is content beside the radio, after the label text.
  Children gx.Node = nil
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<label class={gx.Cx("flex items-center gap-2 text-sm leading-none font-medium select-none", p.Class)} {...p.Attrs}>
  <input type="radio" name={p.Name} value={p.Value} checked={p.Checked} disabled={p.Disabled} aria-invalid={p.invalid()} class="peer sr-only" />
  <span aria-hidden="true" class="relative aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none peer-focus-visible:border-ring peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-aria-invalid:border-destructive peer-aria-invalid:ring-destructive/20 dark:bg-input/30 dark:peer-aria-invalid:ring-destructive/40 motion-reduce:transition-none [&>svg]:opacity-0 peer-checked:[&>svg]:opacity-100">
    <icons.Circle class="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 [&>circle]:fill-primary" />
  </span>
  if p.Label != "" {
    <span class="peer-disabled:cursor-not-allowed peer-disabled:opacity-50">{p.Label}</span>
  }
  if p.Children != nil {
    <span class="peer-disabled:cursor-not-allowed peer-disabled:opacity-50">{p.Children}</span>
  }
</label>

package radiogroup

import "github.com/alternayte/gx"

// Each fixture has its own name: radios that share a name form one group
// across the whole gallery page, and only one of them stays checked.
var RadioGroupFixtures = gx.Fixtures[RadioGroupProps]{
	"Vertical": {
		Label: "Plan",
		Children: gx.Frag(
			RadioGroupItem(RadioGroupItemProps{Name: "plan", Value: "free", Checked: true, Label: "Free"}),
			RadioGroupItem(RadioGroupItemProps{Name: "plan", Value: "pro", Label: "Pro"}),
		),
	},
	"Horizontal": {
		Label:       "Size",
		Orientation: Horizontal,
		Children: gx.Frag(
			RadioGroupItem(RadioGroupItemProps{Name: "size", Value: "s", Checked: true, Label: "Small"}),
			RadioGroupItem(RadioGroupItemProps{Name: "size", Value: "m", Label: "Medium"}),
		),
	},
}

package radiogroup

import "github.com/alternayte/gx"

// Orientation is the layout direction of a radio group.
type Orientation string

// The orientations of radiogroup.RadioGroup.
const (
	Vertical   Orientation = "vertical"
	Horizontal Orientation = "horizontal"
)

var orientationClass = gx.Enum[Orientation]{
	Vertical:   "grid-cols-1",
	Horizontal: "grid-flow-col auto-cols-max gap-4",
}

// orientation returns the orientation of one group; a zero value is
// Vertical.
func (p RadioGroupProps) orientation() Orientation {
	if p.Orientation == "" {
		return Vertical
	}
	return p.Orientation
}

// invalid returns the aria-invalid value of the input.
func (p RadioGroupItemProps) invalid() string {
	if p.Invalid {
		return "true"
	}
	return "false"
}

package radiogroup

import "github.com/alternayte/gx"

var RadioGroupItemFixtures = gx.Fixtures[RadioGroupItemProps]{
	"Unchecked": {Name: "item-unchecked", Value: "free", Label: "Free"},
	"Checked":   {Name: "item-checked", Value: "pro", Checked: true, Label: "Pro"},
	"Disabled":  {Name: "item-disabled", Value: "pro", Checked: true, Disabled: true, Label: "Pro"},
	"Invalid":   {Name: "item-invalid", Value: "pro", Invalid: true, Label: "Pro"},
}