{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "A segmented control and its panels. Arrow keys move between tabs.",
  "dependencies": [
    "@radix-ui/react-tabs@^1.1.22"
  ],
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "tabs/Tabs.css",
      "content": ".cr-tabs {\n  display: grid;\n  gap: var(--cr-space-4);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n}\n\n.cr-tabs__list {\n  display: inline-flex;\n  justify-self: start;\n  gap: var(--cr-space-1);\n  padding: var(--cr-space-1);\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-bg-subtle);\n}\n\n.cr-tabs__trigger {\n  min-height: 34px;\n  padding: 0 var(--cr-space-4);\n  border: 0;\n  border-radius: var(--cr-radius-full);\n  background: transparent;\n  color: var(--cr-color-text-secondary);\n  font: inherit;\n  font-size: var(--cr-font-size-sm);\n  font-weight: var(--cr-font-weight-semibold);\n  cursor: pointer;\n  transition: background-color var(--cr-motion-duration-base) var(--cr-motion-easing-standard),\n    box-shadow var(--cr-motion-duration-base) var(--cr-motion-easing-standard);\n}\n\n.cr-tabs__trigger:hover {\n  color: var(--cr-color-text-default);\n}\n\n.cr-tabs__trigger[data-state='active'] {\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-tabs__trigger:focus-visible,\n.cr-tabs__content:focus-visible {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n\n.cr-tabs__trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n",
      "type": "registry:file",
      "target": "@components/creance/tabs/Tabs.css"
    },
    {
      "path": "tabs/Tabs.tsx",
      "content": "'use client';\n\nimport * as RadixTabs from '@radix-ui/react-tabs';\nimport { forwardRef, type ComponentPropsWithoutRef } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport './Tabs.css';\n\n/** Radix Tabs: arrow keys move between tabs, Home and End jump to the ends. */\nexport const Tabs = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof RadixTabs.Root>>(function Tabs(\n  { className, ...props },\n  ref,\n) {\n  return <RadixTabs.Root ref={ref} className={cx('cr-tabs', className)} {...props} />;\n});\n\n/** The segmented control holding the tabs. Give it an `aria-label`. */\nexport const TabsList = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof RadixTabs.List>>(function TabsList(\n  { className, ...props },\n  ref,\n) {\n  return <RadixTabs.List ref={ref} className={cx('cr-tabs__list', className)} {...props} />;\n});\n\nexport const TabsTrigger = forwardRef<HTMLButtonElement, ComponentPropsWithoutRef<typeof RadixTabs.Trigger>>(\n  function TabsTrigger({ className, ...props }, ref) {\n    return <RadixTabs.Trigger ref={ref} className={cx('cr-tabs__trigger', className)} {...props} />;\n  },\n);\n\nexport const TabsContent = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof RadixTabs.Content>>(\n  function TabsContent({ className, ...props }, ref) {\n    return <RadixTabs.Content ref={ref} className={cx('cr-tabs__content', className)} {...props} />;\n  },\n);\n",
      "type": "registry:ui",
      "target": "@components/creance/tabs/Tabs.tsx"
    }
  ],
  "categories": [
    "molecule",
    "navigation"
  ],
  "type": "registry:ui"
}