{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "toggle",
  "title": "Toggle",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/toggle/Toggle.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLButtonAttributes } from 'svelte/elements'\n  import type { ToggleVariants } from './toggle.variants'\n\n  type ToggleClickEvent = Parameters<NonNullable<HTMLButtonAttributes['onclick']>>[0]\n\n  export interface ToggleProps extends HTMLButtonAttributes {\n    variant?: ToggleVariants['variant']\n    size?: ToggleVariants['size']\n    /** Controlled pressed state. Bind it for two-way updates. */\n    pressed?: boolean\n    /** Initial pressed state for uncontrolled use. */\n    defaultPressed?: boolean\n    /** Called with the new pressed state after every toggle. */\n    onPressedChange?: (pressed: boolean) => void\n    /** Render your own element with the toggle's props and styles instead of\n     *  emitting a <button> — the Svelte counterpart of React's `asChild`. */\n    child?: Snippet<[{ props: Record<string, unknown> }]>\n    ref?: HTMLButtonElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { toggleVariants } from './toggle.variants'\n\n  let {\n    class: className,\n    variant = 'default',\n    size = 'default',\n    defaultPressed = false,\n    pressed = $bindable(defaultPressed),\n    disabled = false,\n    child,\n    children,\n    ref = $bindable(null),\n    onPressedChange,\n    onclick,\n    ...restProps\n  }: ToggleProps = $props()\n\n  function handleClick(event: ToggleClickEvent) {\n    if (disabled) return\n    pressed = !pressed\n    onPressedChange?.(pressed)\n    onclick?.(event)\n  }\n\n  const mergedProps = $derived({\n    'data-uipkge': '',\n    'data-slot': 'toggle',\n    'data-variant': variant,\n    'data-size': size,\n    'data-state': pressed ? 'on' : 'off',\n    'aria-pressed': pressed,\n    disabled,\n    class: cn(toggleVariants({ variant, size }), className),\n    onclick: handleClick,\n    ...restProps,\n  })\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <button bind:this={ref} type=\"button\" {...mergedProps}>\n    {@render children?.()}\n  </button>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/toggle/Toggle.svelte"
    },
    {
      "path": "packages/registry-svelte/components/toggle/toggle.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const toggleVariants = cva(\n  // Focus ring intentionally subtle: 1px ring on :focus-visible only, no\n  // border swap. Keyboard users still get a clear focused state; mouse\n  // users don't see a loud 3px halo after click (which lingers because\n  // the button retains focus). Matches the segmented-control density.\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium 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 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:ring-ring/50 focus-visible:ring-1 outline-none transition-colors duration-200 whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-2 min-w-9',\n        sm: 'h-8 px-1.5 min-w-8',\n        lg: 'h-10 px-2.5 min-w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/toggle/toggle.variants.ts"
    },
    {
      "path": "packages/registry-svelte/components/toggle/index.ts",
      "content": "export { default as Toggle, type ToggleProps } from './Toggle.svelte'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// Component <-> index.ts circular import that broke dev SSR for Card).\nexport { toggleVariants, type ToggleVariants } from './toggle.variants'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/toggle/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "On/off button (different from Switch — this is shaped like a button and lives in toolbars). Three sizes, two variants. Use inside Toggle Group or standalone for \"press to enable\" buttons like bold / italic.",
  "categories": [
    "action"
  ]
}