{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "tabs",
"dependencies": [
"@data-slot/tabs"
],
"files": [
{
"path": "ui/tabs/Tabs.astro",
"content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/tabs/Tabs.astro directly.\n/**\n * @component Tabs\n * @title Tabs\n * @description Organize content into tabbed panels, rendering one panel at a time.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2523-6067&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * \n * \n * Overview\n * Analytics\n * Reports\n * Settings\n * \n * \n * \n * \n * Overview\n * \n * View key metrics and recent activity across active projects.\n * \n * \n * \n * You have 12 active projects and 3 pending tasks.\n * \n * \n * \n * \n * \n * \n * Analytics\n * \n * Track engagement trends and performance over time.\n * \n * \n * \n * Page views are up 25% compared to last month.\n * \n * \n * \n * \n * \n * \n * Reports\n * \n * Generate detailed exports for sharing and analysis.\n * \n * \n * \n * You have 5 reports ready to export.\n * \n * \n * \n * \n * \n * \n * Settings\n * \n * Manage account preferences and personalization options.\n * \n * \n * \n * Configure notifications, security, and themes.\n * \n * \n * \n * \n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@bejamas/ui/components/tabs';\n * ---\n *\n * \n * \n * Overview\n * Analytics\n * \n * Overview content...\n * Analytics content...\n * \n *\n * ```\n *\n * @examples\n *\n * ### Line Animated\n *\n * \n * \n * Overview\n * Analytics\n * Reports\n * \n * Line variant content.\n * Analytics content.\n * Reports content.\n * \n *\n * ### Vertical\n *\n * \n * \n * Profile\n * Billing\n * Notifications\n * \n * \n * Profile settings content.\n * \n * \n * Billing settings content.\n * \n * \n * Notifications settings content.\n * \n * \n *\n * ### Disabled\n *\n * \n * \n * Active\n * Disabled\n * Secondary\n * \n * Active tab content.\n * Disabled tab content.\n * Secondary tab content.\n * \n *\n * ### Overflow\n *\n * \n * \n * Monday\n * Tuesday\n * Wednesday\n * Thursday\n * Friday\n * Saturday\n * Sunday\n * \n * Monday content.\n * Tuesday content.\n * Wednesday content.\n * Thursday content.\n * Friday content.\n * Saturday content.\n * Sunday content.\n * \n *\n * ### Direction Animation\n *\n * \n * \n * Overview\n * Analytics\n * Reports\n * \n * Direction-aware overview.\n * Direction-aware analytics.\n * Direction-aware reports.\n * \n *\n * ### Sizes\n *\n * \n * \n * \n * Account\n * Password\n * \n * \n *\n * \n * \n * Account\n * Password\n * \n * \n *\n * \n * \n * Account\n * Password\n * \n * \n *
\n *\n * @api\n *\n * ### Events\n *\n * The tabs component emits custom events that you can listen to:\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `tabs:change` | `{ value: string }` | Fired when the selected tab changes |\n *\n * ```astro nocollapse console\n * \n * \n * Tab 1\n * Tab 2\n * \n * Content 1\n * Content 2\n * \n * ```\n *\n * ```js nocollapse\n * const tabs = document.getElementById('my-tabs');\n *\n * tabs.addEventListener('tabs:change', (e) => {\n * console.log('Selected tab:', e.detail.value);\n * });\n * ```\n *\n * ### Programmatic Control\n *\n * You can control the tabs programmatically by dispatching a `tabs:set` event:\n *\n * ```js nocollapse\n * const tabs = document.getElementById('my-tabs');\n *\n * // Select a tab\n * tabs.dispatchEvent(new CustomEvent('tabs:set', {\n * detail: { value: 'tab2' }\n * }));\n * ```\n *\n * ### Variants\n *\n * | Prop | Element | Values | Default |\n * |------|---------|--------|---------|\n * | `variant` | tabs-list | `indicator`, `default`, `line`, `line-animated` | `indicator` |\n * | `size` | tabs-list | `sm`, `default`, `lg` | `default` |\n * | `animation` | tabs-content | `none`, `fade`, `slide`, `direction` | `none` |\n *\n * ### Data Attributes\n *\n * The tabs component sets these data attributes that you can use for styling or querying state:\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-orientation` | tabs | Current orientation (`horizontal` or `vertical`) |\n * | `data-variant` | tabs-list | Current list variant (`indicator`, `default`, `line`, or `line-animated`) |\n * | `data-activation-direction` | tabs-content | Last activation direction after tab change (`left`, `right`, `up`, or `down`, not set on initial mount) |\n * | `data-state` | tabs-trigger | Current state (`active` or `inactive`) |\n *\n * ### CSS Variables\n *\n * The tabs indicator exposes CSS variables for animation:\n *\n * | Variable | Element | Description |\n * |----------|---------|-------------|\n * | `--active-tab-left` | tabs-indicator | Left position of active tab |\n * | `--active-tab-width` | tabs-indicator | Width of active tab |\n * | `--active-tab-top` | tabs-indicator | Top position of active tab |\n * | `--active-tab-height` | tabs-indicator | Height of active tab |\n */\n\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n class?: string;\n orientation?: \"horizontal\" | \"vertical\";\n defaultValue?: string;\n}\n\nconst {\n class: className = \"\",\n orientation = \"horizontal\",\n defaultValue,\n ...rest\n} = Astro.props as Props;\n---\n\n\n \n\n\n\n",
"type": "registry:ui"
},
{
"path": "ui/tabs/TabsContent.astro",
"content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/tabs/TabsContent.astro directly.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\nexport const tabsContentVariants = cva(\n \"flex-1 outline-none hidden data-[state=active]:block\",\n {\n variants: {\n animation: {\n none: \"\",\n fade: \"data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:duration-200\",\n slide:\n \"data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-2 data-[state=active]:duration-200\",\n direction:\n \"data-[state=active]:animate-in data-[state=active]:duration-200 data-[activation-direction=left]:slide-in-from-left-2 data-[activation-direction=right]:slide-in-from-right-2 data-[activation-direction=up]:slide-in-from-top-2 data-[activation-direction=down]:slide-in-from-bottom-2 data-[activation-direction=left]:fade-in-0 data-[activation-direction=right]:fade-in-0 data-[activation-direction=up]:fade-in-0 data-[activation-direction=down]:fade-in-0\",\n },\n },\n defaultVariants: {\n animation: \"none\",\n },\n },\n);\n\ninterface Props extends VariantProps, HTMLAttributes<\"div\"> {\n value: string;\n class?: string;\n}\n\nconst {\n value,\n animation = \"none\",\n class: className = \"\",\n ...rest\n} = Astro.props as Props;\n---\n\n\n \n\n",
"type": "registry:ui"
},
{
"path": "ui/tabs/TabsList.astro",
"content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/tabs/TabsList.astro directly.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\nexport const tabsListVariants = cva(\n \"group/tabs-list text-muted-foreground relative inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n {\n variants: {\n variant: {\n indicator: \"rounded-lg bg-muted p-[2px] [--tabs-indicator-radius:calc(var(--radius)_-_2px)]\",\n default: \"rounded-lg bg-muted p-[3px]\",\n line: \"rounded-none gap-1 bg-transparent p-0\",\n \"line-animated\":\n \"rounded-none gap-1 bg-transparent p-0\",\n },\n size: {\n default: \"group-data-horizontal/tabs:h-9\",\n sm: \"group-data-horizontal/tabs:h-8\",\n lg: \"group-data-horizontal/tabs:h-10\",\n },\n },\n defaultVariants: {\n variant: \"indicator\",\n size: \"default\",\n },\n },\n);\n\ninterface Props\n extends VariantProps, HTMLAttributes<\"div\"> {\n class?: string;\n}\n\nconst {\n variant = \"indicator\",\n size = \"default\",\n class: className = \"\",\n ...rest\n} = Astro.props as Props;\n---\n\n\n {\n variant === \"indicator\" && (\n \n )\n }\n {\n variant === \"line-animated\" && (\n \n )\n }\n \n\n",
"type": "registry:ui"
},
{
"path": "ui/tabs/TabsTrigger.astro",
"content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/tabs/TabsTrigger.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"button\"> {\n value: string;\n disabled?: boolean;\n class?: string;\n}\n\nconst {\n value,\n disabled = false,\n class: className = \"\",\n ...rest\n} = Astro.props as Props;\n---\n\n\n \n\n",
"type": "registry:ui"
},
{
"path": "ui/tabs/index.ts",
"content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/tabs/index.ts directly.\nexport { default as Tabs } from \"./Tabs.astro\";\nexport { default as TabsList } from \"./TabsList.astro\";\nexport { default as TabsTrigger } from \"./TabsTrigger.astro\";\nexport { default as TabsContent } from \"./TabsContent.astro\";\nexport { tabsListVariants } from \"./TabsList.astro\";\nexport { tabsContentVariants } from \"./TabsContent.astro\";\n",
"type": "registry:ui"
}
],
"type": "registry:ui"
}