{
  "name": "tabs",
  "type": "registry:component",
  "description": "Tabs primitive composed of list, trigger and content components",
  "files": [
    {
      "path": "ui/Tabs.astro",
      "type": "registry:component",
      "content": "---\nexport type Orientation = 'horizontal' | 'vertical';\n\nexport interface Props {\n  defaultValue?: string;\n  class?: string;\n  orientation?: Orientation;\n}\n\nconst { defaultValue, class: className = '', orientation = 'vertical' } = Astro.props;\n\nconst tabsId = `tabs-${Math.random().toString(36).substr(2, 9)}`;\n\nconst rootClasses =\n  orientation === 'vertical'\n    ? 'grid grid-cols-[minmax(180px,240px)_1fr] items-start gap-4'\n    : 'flex flex-col gap-4';\n---\n\n<div\n  data-tabs\n  data-tabs-id={tabsId}\n  data-default-value={defaultValue}\n  data-orientation={orientation}\n  class={`${rootClasses} ${className}`}\n>\n  <slot />\n</div>\n\n<script>\n  document.addEventListener('DOMContentLoaded', () => {\n    const tabsContainers = document.querySelectorAll('[data-tabs]');\n    \n    tabsContainers.forEach(container => {\n      const tabsId = container.getAttribute('data-tabs-id');\n      const defaultValue = container.getAttribute('data-default-value');\n      \n      // Initialize with default value\n      if (defaultValue) {\n        const defaultTrigger = container.querySelector(`[data-value=\"${defaultValue}\"]`);\n        const defaultContent = container.querySelector(`[data-tabs-content=\"${defaultValue}\"]`);\n        \n        if (defaultTrigger && defaultContent) {\n          defaultTrigger.setAttribute('aria-selected', 'true');\n          defaultTrigger.setAttribute('data-state', 'active');\n          defaultTrigger.setAttribute('tabindex', '0');\n          defaultContent.setAttribute('data-state', 'active');\n          defaultContent.removeAttribute('hidden');\n        }\n      }\n      \n      // Handle tab clicks\n      const triggers = container.querySelectorAll('[data-tabs-trigger]');\n      const contents = container.querySelectorAll('[data-tabs-content]');\n      \n      triggers.forEach(trigger => {\n        trigger.addEventListener('click', () => {\n          const value = trigger.getAttribute('data-value');\n          \n          // Update all triggers\n          triggers.forEach(t => {\n            const isActive = t.getAttribute('data-value') === value;\n            t.setAttribute('aria-selected', isActive ? 'true' : 'false');\n            t.setAttribute('data-state', isActive ? 'active' : 'inactive');\n            t.setAttribute('tabindex', isActive ? '0' : '-1');\n          });\n          \n          // Update all contents\n          contents.forEach(c => {\n            const isActive = c.getAttribute('data-tabs-content') === value;\n            c.setAttribute('data-state', isActive ? 'active' : 'inactive');\n            if (isActive) {\n              c.removeAttribute('hidden');\n            } else {\n              c.setAttribute('hidden', '');\n            }\n          });\n        });\n      });\n    });\n  });\n</script>\n"
    },
    {
      "path": "ui/TabsList.astro",
      "type": "registry:component",
      "content": "---\nimport type { Orientation } from './Tabs.astro';\n\nexport interface Props {\n  class?: string;\n  orientation?: Orientation;\n}\n\nconst { class: className = '', orientation = 'vertical' } = Astro.props;\n\nconst orientationClasses =\n  orientation === 'vertical'\n    ? 'col-start-1 col-end-2 flex max-h-full flex-col gap-1 rounded-[var(--sp-radius-card)] bg-[var(--sp-bg)] p-1 shadow-sm'\n    : 'flex w-full items-center gap-1';\n---\n\n<div\n  role=\"tablist\"\n  aria-orientation={orientation}\n  data-tabs-list\n  data-orientation={orientation}\n  class={`${orientationClasses} ${className}`}\n>\n  <slot />\n</div>\n"
    },
    {
      "path": "ui/TabsContent.astro",
      "type": "registry:component",
      "content": "---\nimport type { Orientation } from './Tabs.astro';\n\nexport interface Props {\n  value: string;\n  class?: string;\n  orientation?: Orientation;\n}\n\nconst { value, class: className = '', orientation = 'vertical' } = Astro.props;\nconst panelId = `panel-${value}`;\nconst tabId = `tab-${value}`;\n\nconst orientationClasses = orientation === 'vertical' ? 'col-start-2 col-end-3' : 'w-full';\n---\n\n<div\n  role=\"tabpanel\"\n  id={panelId}\n  aria-labelledby={tabId}\n  hidden\n  data-state=\"inactive\"\n  data-tabs-content={value}\n  data-orientation={orientation}\n  class={`${orientationClasses} min-h-[3rem] rounded-[var(--sp-radius-card)] p-3 text-[color:var(--sp-fg-sub)] md:p-4 ${className}`}\n>\n  <div class=\"font-base text-[1.0625rem] leading-[1.65]\">\n    <slot />\n  </div>\n</div>\n"
    },
    {
      "path": "ui/TabsTrigger.astro",
      "type": "registry:component",
      "content": "---\nimport type { Orientation } from './Tabs.astro';\n\nexport interface Props {\n  value: string;\n  class?: string;\n  disabled?: boolean;\n  orientation?: Orientation;\n}\n\nconst { value, class: className = '', disabled = false, orientation = 'vertical' } = Astro.props;\nconst tabId = `tab-${value}`;\nconst panelId = `panel-${value}`;\n\nconst orientationClasses = orientation === 'vertical' ? 'w-full justify-between' : 'justify-start';\n---\n\n<button\n  type=\"button\"\n  role=\"tab\"\n  id={tabId}\n  aria-selected=\"false\"\n  aria-controls={panelId}\n  tabindex=\"-1\"\n  disabled={disabled}\n  data-state=\"inactive\"\n  data-value={value}\n  data-tabs-trigger\n  data-orientation={orientation}\n  class={`relative flex items-center gap-2 rounded-[calc(var(--sp-radius-card)-2px)] border border-transparent px-3 py-2 text-left text-fg-sub transition-all hover:text-[color:var(--sp-fg)] focus-visible:border-[var(--sp-accent)] focus-visible:outline-none focus-visible:[box-shadow:0_0_0_2px_color-mix(in_srgb,_var(--sp-accent)_35%,_transparent)_inset] aria-selected:text-[color:var(--sp-accent)] ${orientationClasses} ${className}`}\n>\n  <span class=\"font-medium\">\n    <slot />\n  </span>\n</button>\n"
    }
  ],
  "category": "ui",
  "registryDependencies": [
    "tabs-list",
    "tabs-content",
    "tabs-trigger"
  ]
}