{
  "name": "tabs-trigger",
  "type": "registry:component",
  "description": "Trigger button for selecting a tab",
  "files": [
    {
      "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"
}