{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "description": "Astro toggle buttons that share one selection or several selections.",
  "dependencies": [
    "@data-slot/toggle-group",
    "class-variance-authority",
    "cn"
  ],
  "registryDependencies": [
    "@gnostic/separator",
    "@gnostic/toggle"
  ],
  "files": [
    {
      "path": "packages/ui/src/components/ui/toggle-group/index.ts",
      "content": "export { default as ToggleGroup } from './toggle-group.astro'\nexport { default as ToggleGroupItem } from './toggle-group-item.astro'\nexport { default as ToggleGroupSeparator } from './toggle-group-separator.astro'\nexport {\n    toggleGroupItemVariants,\n    toggleGroupVariants,\n    type ToggleGroupItemVariantProps,\n    type ToggleGroupVariantProps,\n} from './toggle-group-variants.ts'\n\nexport type {\n    ToggleGroupItemProps,\n    ToggleGroupProps,\n    ToggleGroupSeparatorProps,\n} from './types.ts'\n",
      "type": "registry:file",
      "target": "~/src/components/ui/toggle-group/index.ts"
    },
    {
      "path": "packages/ui/src/components/ui/toggle-group/toggle-group-item.astro",
      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"cn\"\nimport { toggleGroupItemVariants } from \"./toggle-group-variants.ts\"\nimport type { ToggleGroupItemProps } from \"./types.ts\"\n\n/** Button attributes pass through. `value` is required by `ToggleGroupItemProps`. */\ntype Props = Omit<HTMLAttributes<\"button\">, \"value\"> & ToggleGroupItemProps\n\nconst {\n  class: className,\n  value,\n  variant,\n  size,\n  disabled,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<!--\n  This button is separate from Toggle.\n  The group controller selects data-slot=\"toggle-group-item\".\n  Null leaves variant or size to the group variants.\n-->\n<button\n  data-slot=\"toggle-group-item\"\n  data-value={value}\n  data-variant={variant}\n  data-size={size}\n  data-disabled={disabled}\n  type={type}\n  disabled={disabled}\n  aria-pressed=\"false\"\n  class={cn(\n    toggleGroupItemVariants({\n      size: size ?? null,\n      variant: variant ?? null,\n    }),\n    className,\n  )}\n  {...props}\n>\n  <slot />\n</button>\n",
      "type": "registry:file",
      "target": "~/src/components/ui/toggle-group/toggle-group-item.astro"
    },
    {
      "path": "packages/ui/src/components/ui/toggle-group/toggle-group-separator.astro",
      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"cn\"\nimport { Separator } from \"../separator/index.ts\"\nimport type { ToggleGroupSeparatorProps } from \"./types.ts\"\n\n/** Separator attributes pass through. */\ntype Props = HTMLAttributes<\"div\"> & ToggleGroupSeparatorProps\n\nconst { class: className, orientation = \"vertical\", ...props } = Astro.props\n---\n\n<Separator\n  orientation={orientation}\n  class={cn(\n    \"pointer-events-none relative z-2 bg-input before:absolute before:inset-0 dark:before:bg-input/32\",\n    className,\n  )}\n  {...props}\n/>\n",
      "type": "registry:file",
      "target": "~/src/components/ui/toggle-group/toggle-group-separator.astro"
    },
    {
      "path": "packages/ui/src/components/ui/toggle-group/toggle-group-variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nimport {\n    toggleBaseClass,\n    toggleSizeClass,\n    toggleVariantClass,\n} from '../toggle/toggle-variants.ts'\n\n/**\n * Layout for the group.\n * `outline` joins direct children and paints the Toggle outline treatment\n * on each item that does not set `data-variant`.\n * `size` paints the Toggle size on each item that does not set `data-size`.\n * The default variant keeps a small gap.\n * Separator rules follow the pressed and hover state of a neighboring item.\n * `disabled` blocks pointer events on each item.\n */\nexport const toggleGroupVariants = cva(\n    'group/toggle-group dark:*:[[data-slot=separator]:has(+[data-slot=toggle-group-item]:hover)]:before:bg-input/64 dark:*:[[data-slot=separator]:has(+[data-slot=toggle-group-item][aria-pressed=true])]:before:bg-input dark:*:[[data-slot=toggle-group-item]:hover+[data-slot=separator]]:before:bg-input/64 dark:*:[[data-slot=toggle-group-item][aria-pressed=true]+[data-slot=separator]]:before:bg-input flex w-fit *:focus-visible:z-10',\n    {\n        compoundVariants: [\n            {\n                class: '*:not-first:rounded-s-none *:not-first:border-s-0 *:not-last:rounded-e-none *:not-last:border-e-0 *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none *:not-first:not-data-[slot=separator]:before:inset-s-[-0.5px] *:not-last:not-data-[slot=separator]:before:inset-e-[-0.5px]',\n                orientation: 'horizontal',\n                variant: 'outline',\n            },\n            {\n                class: '*:not-first:rounded-t-none *:not-first:border-t-0 *:not-last:rounded-b-none *:not-last:border-b-0 *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:not-first:not-data-[slot=separator]:before:top-[-0.5px] *:not-last:not-data-[slot=separator]:before:bottom-[-0.5px] *:data-[slot=toggle-group-item]:not-last:before:hidden dark:*:first:before:block dark:*:last:before:hidden',\n                orientation: 'vertical',\n                variant: 'outline',\n            },\n        ],\n        defaultVariants: {\n            disabled: false,\n            orientation: 'horizontal',\n            size: 'default',\n            variant: 'default',\n        },\n        variants: {\n            disabled: {\n                false: '',\n                true: 'cursor-not-allowed *:data-[slot=toggle-group-item]:pointer-events-none *:data-[slot=toggle-group-item]:opacity-64',\n            },\n            orientation: {\n                horizontal: '*:pointer-coarse:after:min-w-auto',\n                vertical: 'flex-col *:pointer-coarse:after:min-h-auto',\n            },\n            size: {\n                default:\n                    '*:data-[slot=toggle-group-item]:not-data-size:h-9 *:data-[slot=toggle-group-item]:not-data-size:min-w-9 *:data-[slot=toggle-group-item]:not-data-size:px-[calc(--spacing(2)-1px)] *:data-[slot=toggle-group-item]:not-data-size:sm:h-8 *:data-[slot=toggle-group-item]:not-data-size:sm:min-w-8',\n                lg: '*:data-[slot=toggle-group-item]:not-data-size:h-10 *:data-[slot=toggle-group-item]:not-data-size:min-w-10 *:data-[slot=toggle-group-item]:not-data-size:px-[calc(--spacing(2.5)-1px)] *:data-[slot=toggle-group-item]:not-data-size:sm:h-9 *:data-[slot=toggle-group-item]:not-data-size:sm:min-w-9',\n                sm: '*:data-[slot=toggle-group-item]:not-data-size:h-8 *:data-[slot=toggle-group-item]:not-data-size:min-w-8 *:data-[slot=toggle-group-item]:not-data-size:px-[calc(--spacing(1.5)-1px)] *:data-[slot=toggle-group-item]:not-data-size:sm:h-7 *:data-[slot=toggle-group-item]:not-data-size:sm:min-w-7',\n            },\n            variant: {\n                default:\n                    'gap-0.5 *:data-[slot=toggle-group-item]:not-data-variant:border-transparent',\n                outline:\n                    '*:data-[slot=toggle-group-item]:not-data-variant:border-input *:data-[slot=toggle-group-item]:not-data-variant:bg-background *:data-[slot=toggle-group-item]:not-data-variant:dark:bg-input/32 *:data-[slot=toggle-group-item]:not-data-variant:dark:aria-pressed:bg-input *:data-[slot=toggle-group-item]:not-data-variant:dark:hover:bg-input/64 *:data-[slot=toggle-group-item]:not-data-variant:shadow-xs/5 *:data-[slot=toggle-group-item]:not-data-variant:not-dark:bg-clip-padding *:data-[slot=toggle-group-item]:not-data-variant:not-disabled:not-active:not-aria-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] *:data-[slot=toggle-group-item]:not-data-variant:dark:not-disabled:not-aria-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] *:data-[slot=toggle-group-item]:not-data-variant:dark:not-disabled:not-active:not-aria-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=toggle-group-item]:not-data-variant:[:disabled,:active,[aria-pressed=true]]:shadow-none',\n            },\n        },\n    },\n)\n\nexport type ToggleGroupVariantProps = VariantProps<typeof toggleGroupVariants>\n\n/**\n * Styles for one item.\n * `variant` and `size` use the Toggle classes.\n * Pass `null` for an omitted value. The group variant then owns that axis.\n */\nexport const toggleGroupItemVariants = cva(\n    `${toggleBaseClass} aria-pressed:z-10`,\n    {\n        variants: {\n            size: toggleSizeClass,\n            variant: toggleVariantClass,\n        },\n    },\n)\n\nexport type ToggleGroupItemVariantProps = VariantProps<\n    typeof toggleGroupItemVariants\n>\n",
      "type": "registry:file",
      "target": "~/src/components/ui/toggle-group/toggle-group-variants.ts"
    },
    {
      "path": "packages/ui/src/components/ui/toggle-group/toggle-group.astro",
      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"cn\"\nimport type { ToggleGroupProps } from \"./types.ts\"\nimport { toggleGroupVariants } from \"./toggle-group-variants.ts\"\n\n/** Div attributes pass through. Give the group an accessible name. */\ntype Props = HTMLAttributes<\"div\"> & ToggleGroupProps\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  orientation = \"horizontal\",\n  defaultValue,\n  multiple,\n  loop,\n  disabled,\n  ...props\n} = Astro.props\n\n/**\n * The controller reads a space-separated list.\n * An array and a string with spaces become that list.\n */\nconst defaultValueAttribute = Array.isArray(defaultValue)\n  ? defaultValue\n      .flatMap((value) => value.split(/\\s+/))\n      .filter((value) => value.length > 0)\n      .join(\" \")\n  : defaultValue\n---\n\n<div\n  data-slot=\"toggle-group\"\n  data-variant={variant}\n  data-size={size}\n  data-orientation={orientation}\n  data-default-value={defaultValueAttribute}\n  data-multiple={multiple ? \"\" : undefined}\n  data-loop={loop === false ? \"false\" : undefined}\n  data-disabled={disabled ? \"\" : undefined}\n  role=\"group\"\n  aria-disabled={disabled ? \"true\" : undefined}\n  aria-orientation={orientation === \"vertical\" ? \"vertical\" : undefined}\n  class={cn(\n    toggleGroupVariants({ disabled, orientation, size, variant }),\n    className,\n  )}\n  {...props}\n>\n  <slot />\n</div>\n\n<script is:inline>\n  // Paint the pressed items before the module controller binds.\n  // Skip a group that already has a live selection.\n  {\n    const script = document.currentScript\n    const root = script && script.previousElementSibling\n    if (\n      root instanceof HTMLElement &&\n      root.getAttribute(\"data-slot\") === \"toggle-group\" &&\n      !root.hasAttribute(\"data-value\")\n    ) {\n      const multiple = root.hasAttribute(\"data-multiple\")\n      const items = []\n      for (const item of root.querySelectorAll(\n        '[data-slot=\"toggle-group-item\"]',\n      )) {\n        const owner =\n          item.parentElement &&\n          item.parentElement.closest('[data-slot=\"toggle-group\"]')\n        if (owner === root) items.push(item)\n      }\n      const known = new Set()\n      for (const item of items) {\n        const value = (item.getAttribute(\"data-value\") || \"\").trim()\n        if (value) known.add(value)\n      }\n      const selected = new Set()\n      for (const value of (root.getAttribute(\"data-default-value\") || \"\").split(\n        /\\s+/,\n      )) {\n        if (!value || !known.has(value)) continue\n        selected.add(value)\n        if (!multiple) break\n      }\n      for (const item of items) {\n        const value = (item.getAttribute(\"data-value\") || \"\").trim()\n        const pressed = value !== \"\" && selected.has(value)\n        item.setAttribute(\"aria-pressed\", pressed ? \"true\" : \"false\")\n        item.setAttribute(\"data-state\", pressed ? \"on\" : \"off\")\n      }\n    }\n  }\n</script>\n\n<script>\n  import { create, type ToggleGroupController } from \"@data-slot/toggle-group\"\n\n  // Destroy bindings before a view transition so the next page-load binds once.\n  const controllers: ToggleGroupController[] = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
      "type": "registry:file",
      "target": "~/src/components/ui/toggle-group/toggle-group.astro"
    },
    {
      "path": "packages/ui/src/components/ui/toggle-group/types.ts",
      "content": "import type { ToggleVariantProps } from '../toggle/toggle-variants.ts'\n\n/**\n * Props for a set of toggle buttons that share a selection.\n * Div attributes such as `class`, `id`, and `aria-label` pass through.\n * Give the group an accessible name with `aria-label` or `aria-labelledby`.\n * Place each item directly inside the group. A separator may sit between items.\n */\nexport interface ToggleGroupProps {\n    /**\n     * Visual style for every item that does not set its own `variant`.\n     * `outline` joins the items into one control. The default style leaves a small gap.\n     *\n     * @default \"default\"\n     */\n    variant?: ToggleVariantProps['variant']\n    /**\n     * Height and padding for every item that does not set its own `size`.\n     *\n     * @default \"default\"\n     */\n    size?: ToggleVariantProps['size']\n    /**\n     * Direction of the items and of the arrow keys.\n     *\n     * @default \"horizontal\"\n     */\n    orientation?: 'horizontal' | 'vertical'\n    /**\n     * Value selected at first render.\n     * Pass one value, a space-separated list, or an array.\n     * A value matches an item `value`. Use a value with no spaces.\n     * In single selection, the first known value is selected.\n     */\n    defaultValue?: string | string[]\n    /**\n     * Allow more than one pressed item.\n     *\n     * @default false\n     */\n    multiple?: boolean\n    /**\n     * Move focus from the last item to the first item, and the reverse.\n     *\n     * @default true\n     */\n    loop?: boolean\n    /**\n     * Block changes to every item.\n     *\n     * @default false\n     */\n    disabled?: boolean\n}\n\n/**\n * Props for one toggle in the group.\n * Button attributes such as `class` and `aria-label` pass through.\n * The control is its own button. It uses the Toggle styles.\n */\nexport interface ToggleGroupItemProps {\n    /**\n     * Value stored for this item.\n     * The group matches this value against `defaultValue`.\n     * Use a value with no spaces.\n     */\n    value: string\n    /**\n     * Visual style for this item.\n     * When omitted, the item uses the group's `variant`.\n     */\n    variant?: ToggleVariantProps['variant']\n    /**\n     * Control size for this item.\n     * When omitted, the item uses the group's `size`.\n     */\n    size?: ToggleVariantProps['size']\n    /**\n     * Block changes to this item.\n     *\n     * @default false\n     */\n    disabled?: boolean\n}\n\n/**\n * Props for a divider between toggle group items.\n * Separator attributes such as `class` pass through.\n */\nexport interface ToggleGroupSeparatorProps {\n    /**\n     * Direction of the divider line.\n     * Use `vertical` between items in a horizontal group.\n     * Use `horizontal` between items in a vertical group.\n     *\n     * @default \"vertical\"\n     */\n    orientation?: 'horizontal' | 'vertical'\n}\n",
      "type": "registry:file",
      "target": "~/src/components/ui/toggle-group/types.ts"
    }
  ],
  "meta": {
    "framework": "astro",
    "source": "@gnostic/ui",
    "testedDependencies": {
      "@data-slot/toggle-group": "1.0.2",
      "class-variance-authority": "^0.7.1",
      "cn": "0.4.0"
    }
  },
  "docs": "https://ui.gnosticai.com/components/toggle-group",
  "categories": [
    "ui"
  ],
  "type": "registry:ui"
}