Toggle

@props({'pressed': False, 'variant': 'default', 'size': 'default'})
<button type="button" data-slot="toggle" x-data="{ on: {{ str(bool(pressed)).lower() }} }" x-on:click="on = !on"
  x-bind:aria-pressed="on" x-bind:data-state="on ? 'on' : 'off'" {{ attributes.cn(
    "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_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'}[variant],
    {'default': 'h-9 min-w-9 px-2', 'sm': 'h-8 min-w-8 px-1.5', 'lg': 'h-10 min-w-10 px-2.5'}[size],
) }}>{{ slot }}</button>