Switch

package switches

props {
  // Size sets the size of the track and the thumb: Md or Sm.
  Size     Size = Md
  // Name is the form field name.
  Name     string = ""
  // Label is the accessible name of the switch.
  Label    string = ""
  // Value is the value the form submits when the switch is on.
  Value    string = "on"
  // Checked sets the switch on for the first render.
  Checked  bool = false
  // Disabled disables the switch.
  Disabled bool = false
  // Class adds classes to the root element.
  Class    string = ""
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<label data-size={p.size()} class={gx.Cx("inline-flex shrink-0 items-center rounded-full border border-transparent bg-input shadow-xs transition-all outline-none has-[:checked]:bg-primary has-[:focus-visible]:border-ring has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/50 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 dark:bg-input/80 dark:has-[:checked]:bg-primary motion-reduce:transition-none", trackClass[p.size()], p.Class)} {...p.Attrs}>
  <input type="checkbox" role="switch" name={p.Name} aria-label={p.Label} value={p.Value} checked={p.Checked} disabled={p.Disabled} class="peer sr-only" />
  <span class={gx.Cx("pointer-events-none block translate-x-0 rounded-full bg-background ring-0 transition-transform peer-checked:translate-x-[calc(100%-2px)] dark:bg-foreground dark:peer-checked:bg-primary-foreground motion-reduce:transition-none", thumbClass[p.size()])}></span>
</label>

package switches

import "github.com/alternayte/gx"

var SwitchFixtures = gx.Fixtures[SwitchProps]{
	"Off":      {Name: "wifi", Label: "Wifi"},
	"On":       {Name: "wifi", Label: "Wifi", Checked: true},
	"Disabled": {Name: "wifi", Label: "Wifi", Disabled: true},
	"Small":    {Name: "wifi", Label: "Wifi", Size: Sm},
	"SmallOn":  {Name: "wifi", Label: "Wifi", Size: Sm, Checked: true},
}

package switches

import "github.com/alternayte/gx"

// Size is the size of a switch.
type Size string

// The sizes of switches.Switch.
const (
	Md Size = "default"
	Sm Size = "sm"
)

var trackClass = gx.Enum[Size]{
	Md: "h-[1.15rem] w-8",
	Sm: "h-3.5 w-6",
}

var thumbClass = gx.Enum[Size]{
	Md: "size-4",
	Sm: "size-3",
}

// size returns the size of one switch; a zero value is Md.
func (p SwitchProps) size() Size {
	if p.Size == "" {
		return Md
	}
	return p.Size
}