{"name":"tabs","title":"Tabs","description":"A set of layered sections of content—known as tab panels—that are displayed one at a time.","installCommand":"bunx marko-ui add tabs -y","usageTags":"<Tabs>","importSnippet":"import Tabs from \"@/components/ui/tabs/tabs.marko\";","usageSnippet":"<Tabs|value| items=[{ value: \"account\", label: \"Account\" }, { value: \"password\", label: \"Password\" }]>\n  <p>Content of the ${value} panel.</p>\n</Tabs>","tags":["Tabs"],"parts":[{"name":"panel","attributes":[{"name":"value","type":"string","required":true}],"repeatable":true},{"name":"trigger","attributes":[{"name":"value","type":"string","required":true},{"name":"disabled","type":"boolean","required":false}],"repeatable":true}],"props":[{"name":"activationMode","type":"'manual' | 'automatic' | undefined","required":false,"default":"automatic","description":"The activation mode of the tabs. Can be `manual` or `automatic`\n- `manual`: Tabs are activated when clicked or press `enter` key.\n- `automatic`: Tabs are activated when receiving focus"},{"name":"composite","type":"boolean | undefined","required":false,"description":"Whether the tab is composite"},{"name":"defaultValue","type":"string | null | undefined","required":false,"description":"The initial selected tab value when rendered.\nUse when you don't need to control the selected tab value."},{"name":"deselectable","type":"boolean | undefined","required":false,"description":"Whether the active tab can be deselected when clicking on it."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the tabs. Useful for composition."},{"name":"items","type":"TabItem[]","required":false},{"name":"loopFocus","type":"boolean | undefined","required":false,"default":"true","description":"Whether the keyboard navigation will loop from last tab to first, and vice versa."},{"name":"navigate","type":"((details: NavigateDetails) => void) | null | undefined","required":false,"description":"Function to navigate to the selected tab when clicking on it.\nUseful if tab triggers are anchor elements."},{"name":"orientation","type":"'horizontal' | 'vertical' | undefined","required":false,"default":"horizontal","description":"The orientation of the tabs. Can be `horizontal` or `vertical`\n- `horizontal`: only left and right arrow key navigation will work.\n- `vertical`: only up and down arrow key navigation will work."},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"Specifies the localized strings that identifies the accessibility elements and their states"},{"name":"value","type":"string | null | undefined","required":false,"description":"The controlled selected tab value"},{"name":"variant","type":"'line' | 'default' | null | undefined","required":false,"default":"default"}],"events":[{"name":"onFocusChange","arg":"FocusChangeDetails","description":"Callback to be called when the focused tab changes"},{"name":"onValueChange","arg":"ValueChangeDetails","description":"Callback to be called when the selected/active tab changes"},{"name":"valueChange","arg":"string"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"tabs-demo","title":"Default","source":"import Tabs from \"@marko-ui/shadcn/ui/tabs/tabs.marko\";\n\nstatic const ACCOUNT_TABS = [\n  { value: \"account\", label: \"Account\" },\n  { value: \"password\", label: \"Password\" },\n];\n\n<Tabs|value| items=ACCOUNT_TABS class=\"w-[400px]\">\n  <if=(value === \"account\")>\n    <p class=\"text-muted-foreground text-sm\">\n      Make changes to your account here. Click save when you're done.\n    </p>\n  </if>\n  <if=(value === \"password\")>\n    <p class=\"text-muted-foreground text-sm\">\n      Change your password here. After saving, you'll be logged out.\n    </p>\n  </if>\n</Tabs>","description":"Pass `items` and branch on the body's parameter, each panel's own `value`; Zag shows the active panel."},{"id":"tabs-line","title":"Line","source":"import Tabs from \"@marko-ui/shadcn/ui/tabs/tabs.marko\";\n\n<Tabs variant=\"line\" class=\"w-[400px]\">\n  <@trigger value=\"overview\">Overview</@trigger>\n  <@trigger value=\"analytics\">Analytics</@trigger>\n  <@trigger value=\"reports\">Reports</@trigger>\n  <@panel value=\"overview\">Overview panel content.</@panel>\n  <@panel value=\"analytics\">Analytics panel content.</@panel>\n  <@panel value=\"reports\">Reports panel content.</@panel>\n</Tabs>","description":"Pass `variant=\"line\"` for an underline-style tab list."},{"id":"tabs-vertical","title":"Vertical","source":"import Tabs from \"@marko-ui/shadcn/ui/tabs/tabs.marko\";\n\n<Tabs orientation=\"vertical\">\n  <@trigger value=\"account\">Account</@trigger>\n  <@trigger value=\"password\">Password</@trigger>\n  <@trigger value=\"notifications\">Notifications</@trigger>\n  <@panel value=\"account\">Account panel content.</@panel>\n  <@panel value=\"password\">Password panel content.</@panel>\n  <@panel value=\"notifications\">Notifications panel content.</@panel>\n</Tabs>","description":"Pass `orientation=\"vertical\"` for a vertical tab list."},{"id":"tabs-disabled","title":"Disabled tab","source":"import Tabs from \"@marko-ui/shadcn/ui/tabs/tabs.marko\";\n\nstatic const STATUS_TABS = [\n  { value: \"active\", label: \"Active\" },\n  { value: \"pending\", label: \"Pending\" },\n  { value: \"archived\", label: \"Archived\", disabled: true },\n];\n\n<Tabs|value| items=STATUS_TABS class=\"w-[400px]\">\n  <p class=\"text-muted-foreground text-sm\">Showing ${value} items.</p>\n</Tabs>","description":"Set `disabled: true` on an item to skip it in the tab order and block selection."},{"id":"tabs-icons","title":"Icons","source":"import Tabs from \"@marko-ui/shadcn/ui/tabs/tabs.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<Tabs class=\"w-fit\">\n  <@trigger value=\"preview\">\n    <Icon name=\"AppWindowIcon\"/>\n    Preview\n  </@trigger>\n  <@trigger value=\"code\">\n    <Icon name=\"CodeIcon\"/>\n    Code\n  </@trigger>\n  <@panel value=\"preview\">Preview panel content.</@panel>\n  <@panel value=\"code\">Code panel content.</@panel>\n</Tabs>","description":"Compose an `Icon` alongside the label inside a `<@trigger>` attribute tag."},{"id":"tabs-rtl","title":"RTL","source":"import Tabs from \"@marko-ui/shadcn/ui/tabs/tabs.marko\";\nimport Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\n\n<Tabs class=\"w-full max-w-sm\" dir=\"rtl\">\n  <@trigger value=\"overview\">نظرة عامة</@trigger>\n  <@trigger value=\"analytics\">التحليلات</@trigger>\n  <@trigger value=\"reports\">التقارير</@trigger>\n  <@trigger value=\"settings\">الإعدادات</@trigger>\n  <@panel value=\"overview\">\n    <Card dir=\"rtl\">\n      <CardHeader>\n        <CardTitle>نظرة عامة</CardTitle>\n        <CardDescription>\n          عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"text-muted-foreground text-sm\">\n        لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.\n      </CardContent>\n    </Card>\n  </@panel>\n  <@panel value=\"analytics\">\n    <Card dir=\"rtl\">\n      <CardHeader>\n        <CardTitle>التحليلات</CardTitle>\n        <CardDescription>\n          تتبع مقاييس الأداء ومشاركة المستخدمين. راقب الاتجاهات وحدد فرص النمو.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"text-muted-foreground text-sm\">\n        زادت مشاهدات الصفحة بنسبة ٢٥٪ مقارنة بالشهر الماضي.\n      </CardContent>\n    </Card>\n  </@panel>\n  <@panel value=\"reports\">\n    <Card dir=\"rtl\">\n      <CardHeader>\n        <CardTitle>التقارير</CardTitle>\n        <CardDescription>\n          إنشاء وتنزيل تقاريرك التفصيلية. تصدير البيانات بتنسيقات متعددة للتحليل.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"text-muted-foreground text-sm\">\n        لديك ٥ تقارير جاهزة ومتاحة للتصدير.\n      </CardContent>\n    </Card>\n  </@panel>\n  <@panel value=\"settings\">\n    <Card dir=\"rtl\">\n      <CardHeader>\n        <CardTitle>الإعدادات</CardTitle>\n        <CardDescription>\n          إدارة تفضيلات حسابك وخياراته. تخصيص تجربتك لتناسب احتياجاتك.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"text-muted-foreground text-sm\">\n        تكوين الإشعارات والأمان والسمات.\n      </CardContent>\n    </Card>\n  </@panel>\n</Tabs>","description":"Tabs restyles correctly under `dir=\"rtl\"` with no component changes."},{"id":"tabs-controlled","title":"Controlled","source":"import Tabs from \"@marko-ui/shadcn/ui/tabs/tabs.marko\";\n\nstatic const STATUS_TABS = [\n  { value: \"active\", label: \"Active\" },\n  { value: \"pending\", label: \"Pending\" },\n  { value: \"archived\", label: \"Archived\", disabled: true },\n];\n\n<let/value=\"active\"/>\n\n<p class=\"text-muted-foreground mb-4 text-sm\">Selected: ${value}</p>\n<Tabs|itemValue|\n  items=STATUS_TABS\n  value=value\n  valueChange(next) { value = next; }\n  class=\"w-[400px]\"\n>\n  <p class=\"text-muted-foreground text-sm\">Showing ${itemValue} items.</p>\n</Tabs>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`, or use Marko's bind shorthand `value:=state`.","essential":true},{"id":"tabs-compound","title":"Compound (attr tags)","source":"import Tabs from \"@marko-ui/shadcn/ui/tabs/tabs.marko\";\n\n<Tabs class=\"w-[400px]\">\n  <@trigger value=\"account\">Account</@trigger>\n  <@trigger value=\"password\">Password</@trigger>\n  <@panel value=\"account\">\n    <p class=\"text-muted-foreground text-sm\">\n      Make changes to your account here. Click save when you're done.\n    </p>\n  </@panel>\n  <@panel value=\"password\">\n    <p class=\"text-muted-foreground text-sm\">\n      Change your password here. After saving, you'll be logged out.\n    </p>\n  </@panel>\n</Tabs>","description":"Use `<@trigger>` and `<@panel>` attribute tags instead of `items=` to compose each tab's label and panel content directly in markup.","essential":true},{"id":"tabs-precedence","title":"Precedence","source":"import Tabs from \"@marko-ui/shadcn/ui/tabs/tabs.marko\";\n\n<Tabs items=[{ value: \"ignored\", label: \"Ignored\" }]>\n  <@trigger value=\"wins\">Wins</@trigger>\n  <@panel value=\"wins\">Attr panel wins</@panel>\n</Tabs>","description":"When both `items=` and attribute tags are supplied, the attribute tags win — the `items=` entry here is replaced entirely."},{"id":"tabs-hybrid","title":"Hybrid","source":"import Tabs from \"@marko-ui/shadcn/ui/tabs/tabs.marko\";\n\n<Tabs|value| items=[{ value: \"one\", label: \"Items One\" }, { value: \"two\", label: \"Items Two\" }]>\n  <@trigger value=\"one\">Tag One</@trigger>\n  <@trigger value=\"two\">Tag Two</@trigger>\n  Panel for ${value}\n</Tabs>","description":"`<@trigger>` and `<@panel>` normalize independently: mixing `<@trigger>` tags with `items=` (and no `<@panel>` tags) pairs attr-tag triggers with items=-derived panels. Supply both tag names (or neither) to stay on one source."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{"param":"string","description":"The fallback panel content: for every panel without its own `<@panel>`\nbody, it is rendered once with THAT panel's `value` as its parameter\n(`<Tabs|value|>…</Tabs>`), and Zag shows only the active panel, so branch\non the parameter to render each panel's content. It is not the currently\nactive value."},"nativeAttributes":"div","itemTypes":[{"prop":"items","typeName":"TabItem","fields":[{"name":"value","type":"string","required":true},{"name":"label","type":"string","required":true},{"name":"disabled","type":"boolean","required":false}]}],"composition":"Tabs renders its own list/trigger/panel anatomy internally — there are no\nseparate TabsList/TabsTrigger/TabsContent tags to compose. Choose one of two\nequivalent forms:\n\n```text\nTabs (items=)\n├── list\n│   ├── item 1 { value, label, disabled? }\n│   └── item 2 { value, label, disabled? }\n└── content(value) — rendered once per panel, with that panel's value\n```\n\n```text\nTabs\n├── <@trigger value>label</@trigger>\n├── <@trigger value>label</@trigger>\n├── <@panel value>content</@panel>\n└── <@panel value>content</@panel>\n```\n\n`trigger` and `panel` normalize INDEPENDENTLY: attr tags win over `items=`\nper tag name, not for the component as a whole. Mixing `<@trigger>` tags\nwith `items=` (and no `<@panel>` tags) pairs attr-tag-derived triggers with\nitems=-derived panels — see the Hybrid example below."}