{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle",
  "dependencies": [
    "@data-slot/toggle"
  ],
  "files": [
    {
      "path": "ui/toggle/Toggle.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/toggle/Toggle.astro directly.\n/**\n * @component Toggle\n * @title Toggle\n * @description A two-state button that can be either on or off.\n *\n * @preview\n *\n * <Toggle aria-label=\"Toggle bookmark\" variant=\"outline\">\n *   <BookmarkIcon class=\"group-aria-pressed/toggle:fill-foreground\" />\n *   Bookmark\n * </Toggle>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Toggle } from '@bejamas/ui/components/toggle';\n * import { BoldIcon } from '@lucide/astro';\n * ---\n *\n * <Toggle aria-label=\"Toggle bold\">\n *   <BoldIcon />\n * </Toggle>\n * ```\n *\n * @api\n *\n * ### Events\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `toggle:change` | `{ pressed: boolean }` | Fired when the toggle state changes |\n *\n * ### Programmatic Control\n *\n * ```js nocollapse\n * // Set toggle state programmatically\n * element.dispatchEvent(new CustomEvent('toggle:set', { detail: { value: true } }));\n * ```\n *\n * ### Data Attributes\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-state` | toggle | Current state: `on` or `off` |\n * | `data-disabled` | toggle | Present when toggle is disabled |\n *\n * @examples\n *\n * ### Outline\n *\n * <div class=\"flex items-center gap-2\">\n *   <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n *     <BoldIcon />\n *     Bold\n *   </Toggle>\n *   <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n *     <ItalicIcon />\n *     Italic\n *   </Toggle>\n * </div>\n *\n * ### With Text\n *\n * <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n *   <ItalicIcon />\n *   Italic\n * </Toggle>\n *\n * ### Sizes\n *\n * <div class=\"flex items-center gap-2\">\n *   <Toggle size=\"sm\" variant=\"outline\" aria-label=\"Toggle small\">\n *     Small\n *   </Toggle>\n *   <Toggle size=\"default\" variant=\"outline\" aria-label=\"Toggle default\">\n *     Default\n *   </Toggle>\n *   <Toggle size=\"lg\" variant=\"outline\" aria-label=\"Toggle large\">\n *     Large\n *   </Toggle>\n * </div>\n *\n * ### Disabled\n *\n * <div class=\"flex items-center gap-2\">\n *   <Toggle disabled aria-label=\"Toggle bold\">\n *     Disabled\n *   </Toggle>\n *   <Toggle disabled variant=\"outline\" aria-label=\"Toggle italic\">\n *     Disabled\n *   </Toggle>\n * </div>\n *\n */\n\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  toggleVariants,\n  type ToggleVariantProps,\n} from \"@bejamas/ui/lib/toggle-shared\";\n\ninterface Props extends ToggleVariantProps, Omit<HTMLAttributes<\"button\">, \"class\"> {\n  defaultPressed?: boolean;\n  disabled?: boolean;\n  class?: string;\n}\n\nconst {\n  variant = \"default\",\n  size = \"default\",\n  defaultPressed,\n  disabled,\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<button\n  type=\"button\"\n  data-slot=\"toggle\"\n  data-default-pressed={defaultPressed ? \"\" : undefined}\n  data-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(toggleVariants({ variant, size }), className)}\n  {...rest}\n>\n  <slot />\n</button>\n\n<script>\n  import { createToggle } from \"@data-slot/toggle\";\n  document\n    .querySelectorAll<HTMLElement>('[data-slot=\"toggle\"]')\n    .forEach((el) => createToggle(el));\n</script>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/toggle/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/toggle/index.ts directly.\nexport { default as Toggle } from \"./Toggle.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}