{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "ToggleGroup",
  "description": "A segmented control: pick one, or any.",
  "dependencies": [
    "@radix-ui/react-toggle-group@^1.1.20"
  ],
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json",
    "https://creance.pages.dev/r/toggle.json"
  ],
  "files": [
    {
      "path": "toggle-group/ToggleGroup.css",
      "content": ".cr-toggle-group {\n  display: inline-flex;\n  gap: 2px;\n  padding: 3px;\n  border-radius: var(--cr-radius-md);\n  background: var(--cr-color-bg-subtle);\n}\n\n.cr-toggle-group__item {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-width: var(--cr-control-height-sm);\n  min-height: var(--cr-control-height-sm);\n  padding: 0 var(--cr-space-3);\n  border: 0;\n  border-radius: 10px;\n  background: transparent;\n  color: var(--cr-color-text-secondary);\n  font: inherit;\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-sm);\n  font-weight: var(--cr-font-weight-semibold);\n  cursor: pointer;\n}\n\n.cr-toggle-group__item:hover:not(:disabled) {\n  color: var(--cr-color-text-default);\n}\n\n.cr-toggle-group__item[data-state='on'] {\n  background: var(--cr-color-glass-popover);\n  box-shadow: var(--cr-shadow-sm);\n  color: var(--cr-color-text-default);\n}\n\n.cr-toggle-group__item:focus-visible {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n\n.cr-toggle-group__item:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n",
      "type": "registry:file",
      "target": "@components/creance/toggle-group/ToggleGroup.css"
    },
    {
      "path": "toggle-group/ToggleGroup.tsx",
      "content": "'use client';\n\nimport * as RadixToggleGroup from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ComponentPropsWithoutRef } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport '@/components/creance/toggle/Toggle.css';\nimport './ToggleGroup.css';\n\n/**\n * Radix ToggleGroup as a segmented control. `type=\"single\"` picks one (Unified or Split);\n * `type=\"multiple\"` picks any (Bold, Italic). Arrow keys move between items. Give it an `aria-label`.\n */\nexport const ToggleGroup = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof RadixToggleGroup.Root>>(\n  function ToggleGroup({ className, ...props }, ref) {\n    return <RadixToggleGroup.Root ref={ref} className={cx('cr-toggle-group', className)} {...props} />;\n  },\n);\n\n/** Icon-only items need an `aria-label`. */\nexport const ToggleGroupItem = forwardRef<HTMLButtonElement, ComponentPropsWithoutRef<typeof RadixToggleGroup.Item>>(\n  function ToggleGroupItem({ className, ...props }, ref) {\n    return <RadixToggleGroup.Item ref={ref} className={cx('cr-toggle-group__item', className)} {...props} />;\n  },\n);\n",
      "type": "registry:ui",
      "target": "@components/creance/toggle-group/ToggleGroup.tsx"
    }
  ],
  "categories": [
    "molecule",
    "actions"
  ],
  "type": "registry:ui"
}