{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "dependencies": [
    "@data-slot/toggle-group"
  ],
  "files": [
    {
      "path": "ui/toggle-group/ToggleGroup.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/toggle-group/ToggleGroup.astro directly.\n/**\n * @component ToggleGroup\n * @title Toggle Group\n * @description A set of two-state buttons that can be toggled on or off. Supports single or multiple selection.\n *\n * @preview\n *\n * <ToggleGroup defaultValue=\"center\" variant=\"outline\">\n *   <ToggleGroupItem value=\"left\" aria-label=\"Align left\">\n *     <AlignLeftIcon />\n *   </ToggleGroupItem>\n *   <ToggleGroupItem value=\"center\" aria-label=\"Align center\">\n *     <AlignCenterIcon />\n *   </ToggleGroupItem>\n *   <ToggleGroupItem value=\"right\" aria-label=\"Align right\">\n *     <AlignRightIcon />\n *   </ToggleGroupItem>\n * </ToggleGroup>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { ToggleGroup, ToggleGroupItem } from '@bejamas/ui/components/toggle-group';\n * import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/astro';\n * ---\n *\n * <ToggleGroup defaultValue=\"bold\" variant=\"outline\">\n *   <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n *     <BoldIcon />\n *   </ToggleGroupItem>\n *   <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n *     <ItalicIcon />\n *   </ToggleGroupItem>\n *   <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n *     <UnderlineIcon />\n *   </ToggleGroupItem>\n * </ToggleGroup>\n * ```\n *\n * @api\n *\n * ### Events\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `toggle-group:change` | `{ value: string[] }` | Fired when the selection changes |\n *\n * ### Programmatic Control\n *\n * ```js nocollapse\n * // Set selected values programmatically\n * element.dispatchEvent(new CustomEvent('toggle-group:set', {\n *   detail: { value: ['bold', 'italic'] }\n * }));\n * ```\n *\n * ### Data Attributes\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-state` | toggle-group-item | Current state: `on` or `off` |\n * | `data-disabled` | toggle-group | Present when group is disabled |\n * | `data-orientation` | toggle-group | Orientation: `horizontal` or `vertical` |\n * | `data-spacing` | toggle-group | Gap value used by style packs |\n * | `data-variant` | toggle-group | Visual variant: `default` or `outline` |\n * | `data-size` | toggle-group | Size: `sm`, `default`, or `lg` |\n *\n * @examples\n *\n * ### Multiple Selection\n *\n * <ToggleGroup multiple defaultValue={[\"bold\", \"italic\"]} variant=\"outline\">\n *   <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n *     <BoldIcon />\n *   </ToggleGroupItem>\n *   <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n *     <ItalicIcon />\n *   </ToggleGroupItem>\n *   <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n *     <UnderlineIcon />\n *   </ToggleGroupItem>\n * </ToggleGroup>\n *\n * ### Outline Variant\n *\n * <ToggleGroup variant=\"outline\" defaultValue=\"center\">\n *   <ToggleGroupItem value=\"left\" aria-label=\"Align left\">\n *     <AlignLeftIcon />\n *   </ToggleGroupItem>\n *   <ToggleGroupItem value=\"center\" aria-label=\"Align center\">\n *     <AlignCenterIcon />\n *   </ToggleGroupItem>\n *   <ToggleGroupItem value=\"right\" aria-label=\"Align right\">\n *     <AlignRightIcon />\n *   </ToggleGroupItem>\n * </ToggleGroup>\n *\n * ### Sizes\n *\n * <div class=\"flex flex-col gap-4\">\n *   <ToggleGroup size=\"sm\" variant=\"outline\" defaultValue=\"center\">\n *     <ToggleGroupItem value=\"left\" aria-label=\"Align left\">\n *       <AlignLeftIcon />\n *     </ToggleGroupItem>\n *     <ToggleGroupItem value=\"center\" aria-label=\"Align center\">\n *       <AlignCenterIcon />\n *     </ToggleGroupItem>\n *     <ToggleGroupItem value=\"right\" aria-label=\"Align right\">\n *       <AlignRightIcon />\n *     </ToggleGroupItem>\n *   </ToggleGroup>\n *   <ToggleGroup size=\"default\" variant=\"outline\" defaultValue=\"center\">\n *     <ToggleGroupItem value=\"left\" aria-label=\"Align left\">\n *       <AlignLeftIcon />\n *     </ToggleGroupItem>\n *     <ToggleGroupItem value=\"center\" aria-label=\"Align center\">\n *       <AlignCenterIcon />\n *     </ToggleGroupItem>\n *     <ToggleGroupItem value=\"right\" aria-label=\"Align right\">\n *       <AlignRightIcon />\n *     </ToggleGroupItem>\n *   </ToggleGroup>\n *   <ToggleGroup size=\"lg\" variant=\"outline\" defaultValue=\"center\">\n *     <ToggleGroupItem value=\"left\" aria-label=\"Align left\">\n *       <AlignLeftIcon />\n *     </ToggleGroupItem>\n *     <ToggleGroupItem value=\"center\" aria-label=\"Align center\">\n *       <AlignCenterIcon />\n *     </ToggleGroupItem>\n *     <ToggleGroupItem value=\"right\" aria-label=\"Align right\">\n *       <AlignRightIcon />\n *     </ToggleGroupItem>\n *   </ToggleGroup>\n * </div>\n *\n * ### Vertical Orientation\n *\n * <ToggleGroup orientation=\"vertical\" variant=\"outline\" defaultValue=\"middle\">\n *   <ToggleGroupItem value=\"top\" aria-label=\"Align top\">\n *     <AlignVerticalJustifyStartIcon />\n *   </ToggleGroupItem>\n *   <ToggleGroupItem value=\"middle\" aria-label=\"Align middle\">\n *     <AlignVerticalJustifyCenterIcon />\n *   </ToggleGroupItem>\n *   <ToggleGroupItem value=\"bottom\" aria-label=\"Align bottom\">\n *     <AlignVerticalJustifyEndIcon />\n *   </ToggleGroupItem>\n * </ToggleGroup>\n *\n * ### Disabled\n *\n * <ToggleGroup disabled variant=\"outline\" defaultValue=\"center\">\n *   <ToggleGroupItem value=\"left\" aria-label=\"Align left\">\n *     <AlignLeftIcon />\n *   </ToggleGroupItem>\n *   <ToggleGroupItem value=\"center\" aria-label=\"Align center\">\n *     <AlignCenterIcon />\n *   </ToggleGroupItem>\n *   <ToggleGroupItem value=\"right\" aria-label=\"Align right\">\n *     <AlignRightIcon />\n *   </ToggleGroupItem>\n * </ToggleGroup>\n *\n */\n\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends Omit<HTMLAttributes<\"div\">, \"class\"> {\n  variant?: \"default\" | \"outline\";\n  size?: \"default\" | \"sm\" | \"lg\";\n  spacing?: number;\n  defaultValue?: string | string[];\n  multiple?: boolean;\n  orientation?: \"horizontal\" | \"vertical\";\n  disabled?: boolean;\n  class?: string;\n  style?: string;\n}\n\nconst {\n  variant = \"default\",\n  size = \"default\",\n  spacing = 0,\n  defaultValue,\n  multiple = false,\n  orientation = \"horizontal\",\n  disabled = false,\n  class: className = \"\",\n  style = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<div\n  data-slot=\"toggle-group\"\n  data-horizontal={orientation === \"horizontal\" ? \"\" : undefined}\n  data-variant={variant}\n  data-spacing={String(spacing)}\n  data-size={size}\n  data-orientation={orientation}\n  data-vertical={orientation === \"vertical\" ? \"\" : undefined}\n  data-disabled={disabled ? \"true\" : undefined}\n  data-default-value={Array.isArray(defaultValue) ? defaultValue.join(\",\") : defaultValue}\n  data-multiple={multiple ? \"true\" : undefined}\n  class={cn(\n    \"rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs\",\n    \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch\",\n    className\n  )}\n  style={`--gap:${spacing};${style}`}\n  {...rest}\n>\n  <slot />\n</div>\n\n<script>\n  import { createToggleGroup } from \"@bejamas/ui/lib/toggle-group-controller\";\n  document.querySelectorAll<HTMLElement>('[data-slot=\"toggle-group\"]').forEach((el) => {\n    createToggleGroup(el);\n  });\n</script>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/toggle-group/ToggleGroupItem.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/toggle-group/ToggleGroupItem.astro directly.\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  value: string;\n  disabled?: boolean;\n  class?: string;\n}\n\nconst {\n  value,\n  variant,\n  size,\n  disabled,\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<button\n  type=\"button\"\n  data-slot=\"toggle-group-item\"\n  data-size={size ?? undefined}\n  data-value={value}\n  data-variant={variant ?? undefined}\n  disabled={disabled}\n  class={cn(\n    \"data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md rounded-none group-data-[orientation=horizontal]/toggle-group:first:rounded-s-md group-data-[orientation=horizontal]/toggle-group:last:rounded-e-md group-data-[orientation=vertical]/toggle-group:first:rounded-t-md group-data-[orientation=vertical]/toggle-group:last:rounded-b-md\",\n    toggleVariants({\n      variant: variant ?? \"default\",\n      size: size ?? \"default\",\n    }),\n    \"shrink-0 focus:z-10 focus-visible:z-10\",\n    \"group-data-horizontal/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:border-s-0\",\n    \"group-data-vertical/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:border-t-0\",\n    \"group-data-horizontal/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:first:border-s\",\n    \"group-data-vertical/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:first:border-t\",\n    className\n  )}\n  {...rest}\n>\n  <slot />\n</button>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/toggle-group/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/toggle-group/index.ts directly.\nexport { default as ToggleGroup } from \"./ToggleGroup.astro\";\nexport { default as ToggleGroupItem } from \"./ToggleGroupItem.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}