Toggle group

@props({'type': 'single', 'value': ''})
<div role="group" data-slot="toggle-group"
  x-data="{
    type: '{{ type }}',
    value: '{{ value }}'.split(',').filter(Boolean),
    has(v) { return this.value.includes(v) },
    toggle(v) {
      if (this.type === 'single') { this.value = this.has(v) ? [] : [v]; return }
      this.value = this.has(v) ? this.value.filter(x => x !== v) : [...this.value, v];
    },
  }"
  {{ attributes.cn("flex w-fit items-center rounded-md [&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md") }}>{{ slot }}</div>

@props({'value': '', 'variant': 'default'})
<button type="button" data-slot="toggle-group-item" x-on:click="toggle('{{ value }}')"
  x-bind:aria-pressed="has('{{ value }}')" x-bind:data-state="has('{{ value }}') ? 'on' : 'off'" {{ attributes.cn(
    "inline-flex h-9 min-w-9 flex-1 shrink-0 cursor-pointer items-center justify-center gap-2 px-2 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus:z-10 focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
    {'default': 'bg-transparent', 'outline': 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground [&:not(:first-child)]:border-l-0'}[variant],
) }}>{{ slot }}</button>