banhaten 0.1.2 → 0.1.3

package/registry/index.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://banhaten.dev/registry.schema.json",
+  "$schema": "../schema/registry.schema.json",
   "name": "banhaten",
   "base": {
     "dependencies": {
@@ -48,6 +48,25 @@
       ],
       "examples": ["examples/accordion-demo.tsx"]
     },
+    "aspect-ratio": {
+      "description": "Radix AspectRatio wrapper for fixed-format media, screenshots, previews, and product surfaces with Banhaten radius and neutral background tokens.",
+      "dependencies": {
+        "@radix-ui/react-aspect-ratio": "^1.1.11"
+      },
+      "parts": ["AspectRatio"],
+      "features": ["fixed media ratios", "preview surfaces", "responsive sizing"],
+      "rtl": {
+        "inheritsDirection": false,
+        "geometry": "Aspect Ratio controls media geometry and does not alter text direction."
+      },
+      "files": [
+        {
+          "source": "components/aspect-ratio.tsx",
+          "target": "{{ui}}/aspect-ratio.tsx"
+        }
+      ],
+      "examples": ["examples/aspect-ratio-demo.tsx"]
+    },
     "avatar": {
       "description": "Figma-matched user avatar primitive with image, initials, icon fallback, circular and rounded forms, status dots, call-to-action overlays, stacked group count, size scale, and RTL-safe overlap.",
       "dependencies": {
@@ -260,6 +279,71 @@
       ],
       "examples": ["examples/card-demo.tsx"]
     },
+    "chart": {
+      "description": "Recharts wrapper with Banhaten chart color tokens, responsive container, tooltip content, legend content, and config-driven color variables.",
+      "dependencies": {
+        "recharts": "^3.9.2"
+      },
+      "parts": [
+        "ChartContainer",
+        "ChartTooltip",
+        "ChartTooltipContent",
+        "ChartLegend",
+        "ChartLegendContent"
+      ],
+      "tokens": [
+        "--bh-chart-1",
+        "--bh-chart-2",
+        "--bh-chart-3",
+        "--bh-chart-4",
+        "--bh-chart-5"
+      ],
+      "features": [
+        "responsive container",
+        "tooltip content",
+        "legend content",
+        "config colors"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "layout": "Chart labels and legends should use logical layout; chart geometry is controlled by Recharts."
+      },
+      "files": [
+        {
+          "source": "components/chart.tsx",
+          "target": "{{ui}}/chart.tsx"
+        }
+      ],
+      "examples": ["examples/chart-demo.tsx"]
+    },
+    "carousel": {
+      "description": "Embla-backed carousel with content, item, previous, and next controls, horizontal or vertical orientation, and RTL-safe directional icons.",
+      "dependencies": {
+        "embla-carousel-react": "^8.6.0",
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": ["button"],
+      "parts": [
+        "Carousel",
+        "CarouselContent",
+        "CarouselItem",
+        "CarouselPrevious",
+        "CarouselNext"
+      ],
+      "orientations": ["horizontal", "vertical"],
+      "features": ["Embla API", "previous and next controls", "plugin support"],
+      "rtl": {
+        "inheritsDirection": true,
+        "directionalIconFlip": "Previous and next arrow icons flip in RTL."
+      },
+      "files": [
+        {
+          "source": "components/carousel.tsx",
+          "target": "{{ui}}/carousel.tsx"
+        }
+      ],
+      "examples": ["examples/carousel-demo.tsx"]
+    },
     "button-group": {
       "description": "Connected Button Group primitive with seven-item default and icon-only layouts, md/sm/xs size scale, reusable surface shadow, dividers, RTL-safe content spacing, native hover/focus/pressed styling, and active/disabled states.",
       "dependencies": {
@@ -355,6 +439,113 @@
       ],
       "examples": ["examples/menu-demo.tsx"]
     },
+    "menubar": {
+      "description": "Radix Menubar-backed application menu with trigger, content, item, checkbox, radio, label, separator, shortcut, and keyboard navigation parts.",
+      "dependencies": {
+        "@radix-ui/react-menubar": "^1.1.19",
+        "lucide-react": "^1.17.0"
+      },
+      "parts": [
+        "Menubar",
+        "MenubarMenu",
+        "MenubarTrigger",
+        "MenubarContent",
+        "MenubarItem",
+        "MenubarCheckboxItem",
+        "MenubarRadioItem",
+        "MenubarLabel",
+        "MenubarSeparator",
+        "MenubarShortcut"
+      ],
+      "features": ["top menu", "keyboard navigation", "checkbox items", "radio items", "shortcuts"],
+      "rtl": {
+        "inheritsDirection": true,
+        "spacing": "Triggers, items, and shortcuts use logical spacing."
+      },
+      "files": [
+        {
+          "source": "components/menubar.tsx",
+          "target": "{{ui}}/menubar.tsx"
+        }
+      ],
+      "examples": ["examples/menubar-demo.tsx"]
+    },
+    "command": {
+      "description": "cmdk-backed command menu with search input, grouped results, keyboard navigation, shortcuts, separators, and empty state.",
+      "dependencies": {
+        "cmdk": "^1.1.1",
+        "lucide-react": "^1.17.0"
+      },
+      "parts": [
+        "Command",
+        "CommandInput",
+        "CommandList",
+        "CommandEmpty",
+        "CommandGroup",
+        "CommandItem",
+        "CommandSeparator",
+        "CommandShortcut"
+      ],
+      "features": [
+        "search filtering",
+        "keyboard navigation",
+        "grouped results",
+        "shortcut slot",
+        "empty state"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "spacing": "Command rows and shortcuts use logical spacing so shortcut placement mirrors naturally.",
+        "textDirection": "Command copy inherits document direction; individual row labels can use dir=\"auto\" when needed."
+      },
+      "files": [
+        {
+          "source": "components/command.tsx",
+          "target": "{{ui}}/command.tsx"
+        }
+      ],
+      "examples": ["examples/command-demo.tsx"]
+    },
+    "context-menu": {
+      "description": "Radix ContextMenu-backed right-click menu with item, checkbox, radio, label, separator, shortcut, and submenu parts.",
+      "dependencies": {
+        "@radix-ui/react-context-menu": "^2.3.2",
+        "lucide-react": "^1.17.0"
+      },
+      "parts": [
+        "ContextMenu",
+        "ContextMenuTrigger",
+        "ContextMenuContent",
+        "ContextMenuItem",
+        "ContextMenuCheckboxItem",
+        "ContextMenuRadioItem",
+        "ContextMenuLabel",
+        "ContextMenuSeparator",
+        "ContextMenuShortcut",
+        "ContextMenuSub",
+        "ContextMenuSubTrigger",
+        "ContextMenuSubContent"
+      ],
+      "features": [
+        "right click trigger",
+        "submenus",
+        "checkbox items",
+        "radio items",
+        "shortcuts"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "directionalIconFlip": "Submenu chevrons flip in RTL.",
+        "spacing": "Items and shortcuts use logical spacing."
+      },
+      "files": [
+        {
+          "source": "components/context-menu.tsx",
+          "target": "{{ui}}/context-menu.tsx"
+        }
+      ],
+      "examples": ["examples/context-menu-demo.tsx"]
+    },
     "tooltip": {
       "description": "Radix Tooltip-backed primitive with Figma-matched dark and default surfaces, small and large sizes, shortcut and close slots, logical pointer positions, tokenized shadows, and RTL-safe layout.",
       "dependencies": {
@@ -456,6 +647,30 @@
       ],
       "examples": ["examples/popover-demo.tsx"]
     },
+    "hover-card": {
+      "description": "Radix HoverCard-backed preview surface for rich hover and focus context with tokenized raised content.",
+      "dependencies": {
+        "@radix-ui/react-hover-card": "^1.1.18"
+      },
+      "parts": [
+        "HoverCard",
+        "HoverCardTrigger",
+        "HoverCardContent",
+        "HoverCardPortal"
+      ],
+      "features": ["hover preview", "focus preview", "open delay", "close delay"],
+      "rtl": {
+        "inheritsDirection": true,
+        "textDirection": "Content inherits direction and uses logical text alignment."
+      },
+      "files": [
+        {
+          "source": "components/hover-card.tsx",
+          "target": "{{ui}}/hover-card.tsx"
+        }
+      ],
+      "examples": ["examples/hover-card-demo.tsx"]
+    },
     "modal": {
       "description": "Radix Dialog-backed modal primitive with Figma Small, Default, and Large sizes, tokenized raised surface, header/body/footer slots, ConfirmModal guardrails, Button actions, Checkbox opt-out, and RTL-safe layout.",
       "dependencies": {
@@ -463,7 +678,7 @@
         "class-variance-authority": "^0.7.1",
         "lucide-react": "^1.17.0"
       },
-      "registryDependencies": ["button", "checkbox", "spinner"],
+      "registryDependencies": ["alert-dialog", "button", "checkbox", "spinner"],
       "parts": [
         "Modal",
         "ConfirmModal",
@@ -502,6 +717,52 @@
       ],
       "examples": ["examples/modal-demo.tsx"]
     },
+    "alert-dialog": {
+      "description": "Radix AlertDialog-backed confirmation primitive for destructive or consequential actions with tokenized alert surface, semantic intent icon, safe cancel/action buttons, focus management, and RTL-safe layout.",
+      "dependencies": {
+        "@radix-ui/react-alert-dialog": "^1.1.18",
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": ["button"],
+      "parts": [
+        "AlertDialog",
+        "AlertDialogTrigger",
+        "AlertDialogContent",
+        "AlertDialogPortal",
+        "AlertDialogOverlay",
+        "AlertDialogHeader",
+        "AlertDialogIcon",
+        "AlertDialogTitle",
+        "AlertDialogDescription",
+        "AlertDialogBody",
+        "AlertDialogFooter",
+        "AlertDialogCancel",
+        "AlertDialogAction"
+      ],
+      "intents": ["default", "warning", "danger"],
+      "sizes": ["sm", "default", "lg"],
+      "features": [
+        "alert-dialog semantics",
+        "cancel focus pattern",
+        "safe cancel action",
+        "destructive action",
+        "semantic intent icon"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "textDirection": "Title and description use dir=\"auto\" for Arabic and English copy.",
+        "spacing": "Header, body, and footer use logical layout and Banhaten spacing tokens so action order and copy mirror naturally.",
+        "semantics": "Radix AlertDialog provides the modal alert role, focus trap, and safe cancellation behavior."
+      },
+      "files": [
+        {
+          "source": "components/alert-dialog.tsx",
+          "target": "{{ui}}/alert-dialog.tsx"
+        }
+      ],
+      "examples": ["examples/alert-dialog-demo.tsx"]
+    },
     "checkbox": {
       "description": "Figma-matched checkbox primitive and checkbox card composition with 20px root, 16px control, selected and disabled states, native hover styling, component shadow, body text styles, and RTL-safe layout.",
       "dependencies": {
@@ -524,6 +785,32 @@
       ],
       "examples": ["examples/checkbox-demo.tsx"]
     },
+    "collapsible": {
+      "description": "Radix Collapsible wrapper for disclosure sections with tokenized trigger, icon rotation, and content slots.",
+      "dependencies": {
+        "@radix-ui/react-collapsible": "^1.1.15",
+        "lucide-react": "^1.17.0"
+      },
+      "parts": ["Collapsible", "CollapsibleTrigger", "CollapsibleContent"],
+      "features": [
+        "controlled state",
+        "uncontrolled state",
+        "keyboard trigger",
+        "RTL"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "textAlignment": "Trigger and content use logical text alignment and inherit direction.",
+        "spacing": "Icon and label spacing uses flex gap so it mirrors with document direction."
+      },
+      "files": [
+        {
+          "source": "components/collapsible.tsx",
+          "target": "{{ui}}/collapsible.tsx"
+        }
+      ],
+      "examples": ["examples/collapsible-demo.tsx"]
+    },
     "radio-group": {
       "description": "Native-input radio primitive and group composition with field rows, group label, description, error and disabled states, horizontal and vertical layouts, controlled or uncontrolled value, and RTL-safe tokenized copy.",
       "dependencies": {
@@ -733,6 +1020,117 @@
       ],
       "examples": ["examples/input-demo.tsx"]
     },
+    "input-group": {
+      "description": "Grouped input shell for protocol add-ons, inline actions, prefixes, suffixes, compact field rows, and RTL-safe native input composition.",
+      "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
+        "class-variance-authority": "^0.7.1"
+      },
+      "registryDependencies": ["button"],
+      "parts": [
+        "InputGroup",
+        "InputGroupInput",
+        "InputGroupAddon",
+        "InputGroupButton"
+      ],
+      "sizes": ["md", "lg"],
+      "variants": ["default", "soft"],
+      "states": ["default", "error"],
+      "rtl": {
+        "inheritsDirection": true,
+        "spacing": "Add-ons and input segments use logical borders and inherited direction.",
+        "textDirection": "Input text uses text-start so mixed Arabic and English values align naturally."
+      },
+      "files": [
+        {
+          "source": "components/input-group.tsx",
+          "target": "{{ui}}/input-group.tsx"
+        }
+      ],
+      "examples": ["examples/input-group-demo.tsx"]
+    },
+    "label": {
+      "description": "Radix Label-backed accessible label primitive with required markers, optional text, tone variants, disabled state styling, and RTL-safe copy.",
+      "dependencies": {
+        "@radix-ui/react-label": "^2.1.11",
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["Label"],
+      "tones": ["default", "subtle", "danger"],
+      "features": ["required marker", "optional text", "disabled styling"],
+      "rtl": {
+        "inheritsDirection": true,
+        "textDirection": "Label and optional text use dir=\"auto\" so Arabic and English labels resolve naturally.",
+        "spacing": "Uses logical inline spacing between label text, required marker, and optional text."
+      },
+      "files": [
+        {
+          "source": "components/label.tsx",
+          "target": "{{ui}}/label.tsx"
+        }
+      ],
+      "examples": ["examples/label-demo.tsx"]
+    },
+    "kbd": {
+      "description": "Keyboard hint primitive for shortcuts, command rows, and form help text with tokenized border, soft surface, and body-xs typography.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["Kbd"],
+      "sizes": ["sm", "md"],
+      "rtl": {
+        "inheritsDirection": false,
+        "semantics": "Kbd is direction-neutral and should be paired with surrounding text labels."
+      },
+      "files": [
+        {
+          "source": "components/kbd.tsx",
+          "target": "{{ui}}/kbd.tsx"
+        }
+      ],
+      "examples": ["examples/kbd-demo.tsx"]
+    },
+    "field": {
+      "description": "Accessible form field composition with label, control slot, description, error message, grouped fields, fieldsets, validation state, and responsive or horizontal layout.",
+      "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3"
+      },
+      "registryDependencies": ["label"],
+      "parts": [
+        "Field",
+        "FieldLabel",
+        "FieldControl",
+        "FieldDescription",
+        "FieldError",
+        "FieldGroup",
+        "FieldSet",
+        "FieldLegend",
+        "FieldContent"
+      ],
+      "orientations": ["vertical", "horizontal", "responsive"],
+      "states": ["default", "invalid", "disabled"],
+      "features": [
+        "generated ids",
+        "control slot",
+        "description text",
+        "error text",
+        "field groups",
+        "validation mapping"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "layout": "Vertical, horizontal, and responsive layouts use CSS grid and logical text alignment so field rows mirror naturally.",
+        "textDirection": "Labels, descriptions, and errors use dir=\"auto\" through Label and field text parts.",
+        "semantics": "FieldControl wires the generated control id, invalid state, disabled announcement, and description/error ids into the child control."
+      },
+      "files": [
+        {
+          "source": "components/field.tsx",
+          "target": "{{ui}}/field.tsx"
+        }
+      ],
+      "examples": ["examples/field-demo.tsx"]
+    },
     "input-otp": {
       "description": "One-time passcode input composed from the Banhaten Input surface, control typography, labels, helper text, tokenized slot gaps, paste handling, grouped slots, masked values, and RTL-aware keyboard navigation.",
       "dependencies": {
@@ -816,6 +1214,202 @@
       ],
       "examples": ["examples/select-demo.tsx"]
     },
+    "native-select": {
+      "description": "Tokenized native select field for platform forms, mobile fallback, lightweight option sets, validation state, helper text, and RTL layout.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": ["label"],
+      "parts": ["NativeSelect"],
+      "sizes": ["md", "lg"],
+      "variants": ["default", "soft"],
+      "states": ["default", "filled", "error", "disabled"],
+      "features": [
+        "options array",
+        "native children",
+        "label",
+        "helper text",
+        "error text"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "spacing": "Uses logical padding and inline-end chevron placement.",
+        "textDirection": "Label and helper copy use dir=\"auto\" through Label and helper text."
+      },
+      "files": [
+        {
+          "source": "components/native-select.tsx",
+          "target": "{{ui}}/native-select.tsx"
+        }
+      ],
+      "examples": ["examples/native-select-demo.tsx"]
+    },
+    "sheet": {
+      "description": "Radix Dialog-based edge panel with logical start/end placement, top and bottom placement, size variants, overlay, close control, header, body, footer, and RTL-safe layout.",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.16",
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": [],
+      "parts": [
+        "Sheet",
+        "SheetTrigger",
+        "SheetContent",
+        "SheetHeader",
+        "SheetTitle",
+        "SheetDescription",
+        "SheetBody",
+        "SheetFooter",
+        "SheetClose",
+        "SheetCloseButton",
+        "SheetOverlay",
+        "SheetPortal"
+      ],
+      "sides": ["start", "end", "top", "bottom"],
+      "sizes": ["sm", "default", "lg"],
+      "features": [
+        "focus trap",
+        "outside dismissal",
+        "Escape dismissal",
+        "logical sides",
+        "scrollable body",
+        "footer actions"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "placement": "Use side=\"start\" and side=\"end\" for logical placement; CSS start/end edges mirror under RTL.",
+        "textDirection": "Title and description use dir=\"auto\" for Arabic and English copy.",
+        "semantics": "Radix Dialog handles modal semantics, focus trapping, and dismissal."
+      },
+      "files": [
+        {
+          "source": "components/sheet.tsx",
+          "target": "{{ui}}/sheet.tsx"
+        }
+      ],
+      "examples": ["examples/sheet-demo.tsx"]
+    },
+    "sidebar": {
+      "description": "Composable app sidebar with controlled or uncontrolled collapse state, grouped menu items, logical start/end placement, RTL mirroring, and generated sidebar tokens.",
+      "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
+        "lucide-react": "^1.17.0"
+      },
+      "parts": [
+        "SidebarProvider",
+        "Sidebar",
+        "SidebarHeader",
+        "SidebarBody",
+        "SidebarFooter",
+        "SidebarGroup",
+        "SidebarGroupLabel",
+        "SidebarMenu",
+        "SidebarMenuItem",
+        "SidebarMenuButton",
+        "SidebarToggle",
+        "SidebarTrigger",
+        "SidebarInset",
+        "SidebarRail"
+      ],
+      "features": [
+        "controlled collapse",
+        "uncontrolled collapse",
+        "group labels",
+        "icon-only collapsed state",
+        "logical side placement"
+      ],
+      "tokens": [
+        "--bh-sidebar-width",
+        "--bh-sidebar-width-collapsed",
+        "--bh-sidebar-item-height",
+        "--bh-sidebar-padding",
+        "--bh-sidebar-bg",
+        "--bh-sidebar-border",
+        "--shadow-sidebar"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "placement": "Use side=\"start\" or side=\"end\" with dir on SidebarProvider for logical placement.",
+        "spacing": "Menu item icon and label spacing uses flex gaps and logical text alignment."
+      },
+      "files": [
+        {
+          "source": "components/sidebar.tsx",
+          "target": "{{ui}}/sidebar.tsx"
+        }
+      ],
+      "examples": ["examples/sidebar-demo.tsx"]
+    },
+    "navigation-menu": {
+      "description": "Radix NavigationMenu-backed top navigation with trigger, content, link, viewport, and indicator parts.",
+      "dependencies": {
+        "@radix-ui/react-navigation-menu": "^1.2.17",
+        "lucide-react": "^1.17.0"
+      },
+      "parts": [
+        "NavigationMenu",
+        "NavigationMenuList",
+        "NavigationMenuItem",
+        "NavigationMenuTrigger",
+        "NavigationMenuContent",
+        "NavigationMenuLink",
+        "NavigationMenuViewport",
+        "NavigationMenuIndicator"
+      ],
+      "features": ["top navigation", "viewport", "indicator", "dropdown content"],
+      "rtl": {
+        "inheritsDirection": true,
+        "spacing": "Triggers, links, and content use logical layout and inherited direction."
+      },
+      "files": [
+        {
+          "source": "components/navigation-menu.tsx",
+          "target": "{{ui}}/navigation-menu.tsx"
+        }
+      ],
+      "examples": ["examples/navigation-menu-demo.tsx"]
+    },
+    "scroll-area": {
+      "description": "Radix ScrollArea wrapper with tokenized viewport, scrollbar, thumb, and corner styling for bounded panels and menus.",
+      "dependencies": {
+        "@radix-ui/react-scroll-area": "^1.2.13"
+      },
+      "parts": ["ScrollArea", "ScrollBar"],
+      "features": ["vertical scrollbar", "horizontal scrollbar", "viewport clipping"],
+      "rtl": {
+        "inheritsDirection": true,
+        "spacing": "Viewport content should use logical padding so scrollable regions mirror with document direction."
+      },
+      "files": [
+        {
+          "source": "components/scroll-area.tsx",
+          "target": "{{ui}}/scroll-area.tsx"
+        }
+      ],
+      "examples": ["examples/scroll-area-demo.tsx"]
+    },
+    "resizable": {
+      "description": "react-resizable-panels-backed split pane primitive with horizontal and vertical panel groups plus tokenized resize handle.",
+      "dependencies": {
+        "lucide-react": "^1.17.0",
+        "react-resizable-panels": "^4.12.1"
+      },
+      "parts": ["ResizablePanelGroup", "ResizablePanel", "ResizableHandle"],
+      "features": ["horizontal panels", "vertical panels", "keyboard resize handle"],
+      "rtl": {
+        "inheritsDirection": true,
+        "layout": "Panel order follows DOM order; use logical shell layout for RTL workspaces."
+      },
+      "files": [
+        {
+          "source": "components/resizable.tsx",
+          "target": "{{ui}}/resizable.tsx"
+        }
+      ],
+      "examples": ["examples/resizable-demo.tsx"]
+    },
     "autocomplete": {
       "description": "Composable autocomplete and combobox field built from Banhaten Input, Select menu items, and Tag selections with filtering, single or multiple selection, keyboard navigation, error/disabled states, and RTL-safe layout.",
       "dependencies": {
@@ -1074,6 +1668,34 @@
       ],
       "examples": ["examples/spinner-demo.tsx"]
     },
+    "toast": {
+      "description": "Sonner-style transient feedback primitive with Banhaten token styling, success, danger, warning, info, and default intents, action slot support, and logical RTL placement.",
+      "dependencies": {
+        "sonner": "^2.0.7"
+      },
+      "parts": ["Toaster", "toast"],
+      "intents": ["default", "success", "danger", "warning", "info"],
+      "sides": ["start", "end"],
+      "features": [
+        "semantic shortcuts",
+        "action slot",
+        "close button",
+        "logical placement",
+        "toast promise support"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "placement": "side=\"end\" resolves to top-right in LTR and top-left in RTL; side=\"start\" resolves to the opposite edge.",
+        "textDirection": "Toast content inherits the Toaster direction and uses tokenized typography classes."
+      },
+      "files": [
+        {
+          "source": "components/toast.tsx",
+          "target": "{{ui}}/toast.tsx"
+        }
+      ],
+      "examples": ["examples/toast-demo.tsx"]
+    },
     "activity-feed": {
       "description": "Expanded activity feed composition with avatar indicators, status dots, captions, action buttons, slot rows, timestamps, links, and RTL copy.",
       "status": "expanded",
@@ -1418,21 +2040,43 @@
       "examples": ["examples/expanded/steps-demo.tsx"]
     },
     "tabs": {
-      "description": "Expanded tabs composition with underline, segmented, and rounded treatments across size, width behavior, controlled state, LTR, and RTL.",
-      "status": "expanded",
-      "dependencies": {},
-      "parts": ["Tabs"],
+      "description": "Radix Tabs-backed local navigation primitive with underline, segmented, and rounded treatments across size, width behavior, controlled state, LTR, and RTL.",
+      "dependencies": {
+        "@radix-ui/react-tabs": "^1.1.16"
+      },
+      "parts": [
+        "Tabs",
+        "TabsRoot",
+        "TabsList",
+        "TabsTrigger",
+        "TabsContent"
+      ],
+      "variants": ["underline", "segment", "rounded"],
+      "sizes": ["md", "sm", "xs"],
+      "features": [
+        "Radix keyboard behavior",
+        "controlled active index",
+        "controlled value",
+        "optional panels",
+        "full-width tabs"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "keyboard": "Radix receives dir so arrow-key navigation follows the document direction.",
+        "textDirection": "Trigger labels use dir=\"auto\" by default for Arabic and English tab labels.",
+        "spacing": "Uses inherited direction and logical inline spacing so underline, segmented, and rounded treatments mirror naturally."
+      },
       "files": [
         {
-          "source": "components/expanded/tabs.css",
-          "target": "{{ui}}/expanded/tabs.css"
+          "source": "components/tabs.css",
+          "target": "{{ui}}/tabs.css"
         },
         {
-          "source": "components/expanded/Tabs.tsx",
-          "target": "{{ui}}/expanded/Tabs.tsx"
+          "source": "components/tabs.tsx",
+          "target": "{{ui}}/tabs.tsx"
         }
       ],
-      "examples": ["examples/expanded/tabs-demo.tsx"]
+      "examples": ["examples/tabs-demo.tsx"]
     },
     "timeline": {
       "description": "Expanded timeline composition with vertical and horizontal orientations, dates, captions, active states, finished states, item variants, and RTL layouts.",