banhaten 0.1.0

package/registry/index.json

@@ -0,0 +1,1213 @@
+{
+  "$schema": "https://banhaten.dev/registry.schema.json",
+  "name": "banhaten",
+  "base": {
+    "dependencies": {
+      "@fontsource/inter": "^5.2.8",
+      "class-variance-authority": "^0.7.1",
+      "clsx": "^2.1.1",
+      "tailwind-merge": "^3.3.1"
+    },
+    "files": [
+      {
+        "source": "utils/cn.ts",
+        "target": "{{utils}}.ts"
+      },
+      {
+        "source": "hooks/use-direction.ts",
+        "target": "{{hooks}}/use-direction.ts"
+      }
+    ]
+  },
+  "components": {
+    "accordion": {
+      "description": "Accessible disclosure primitive with single or multiple expansion, Banhaten variants, size scale, animation, and RTL-safe text alignment.",
+      "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.12",
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
+      },
+      "parts": [
+        "Accordion",
+        "AccordionItem",
+        "AccordionTrigger",
+        "AccordionContent"
+      ],
+      "variants": ["default", "bordered", "cards", "soft"],
+      "sizes": ["sm", "default", "lg"],
+      "rtl": {
+        "inheritsDirection": true,
+        "textAlignment": "Uses text-start and dir=\"auto\" so Arabic and English copy align and punctuate naturally.",
+        "spacing": "Uses gap and logical inherited direction rather than physical left/right spacing."
+      },
+      "files": [
+        {
+          "source": "components/accordion.tsx",
+          "target": "{{ui}}/accordion.tsx"
+        }
+      ],
+      "examples": ["examples/accordion-demo.tsx"]
+    },
+    "avatar": {
+      "description": "User avatar primitive with image, fallback, badge, group, group count, size scale, and RTL-safe overlap.",
+      "dependencies": {
+        "@radix-ui/react-avatar": "^1.1.10",
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": [
+        "Avatar",
+        "AvatarImage",
+        "AvatarFallback",
+        "AvatarBadge",
+        "AvatarGroup",
+        "AvatarGroupCount"
+      ],
+      "sizes": ["sm", "default", "lg", "xl"],
+      "rtl": {
+        "inheritsDirection": true,
+        "groupOverlap": "Uses logical -ms spacing so overlap reverses naturally in RTL.",
+        "badgePlacement": "Uses logical end/bottom positioning."
+      },
+      "files": [
+        {
+          "source": "components/avatar.tsx",
+          "target": "{{ui}}/avatar.tsx"
+        },
+        {
+          "source": "assets/avatars/avatar-01.jpg",
+          "target": "{{ui}}/assets/avatars/avatar-01.jpg"
+        }
+      ],
+      "examples": ["examples/avatar-demo.tsx"]
+    },
+    "badge": {
+      "description": "Figma Badge primitive with light, outline, and solid styles, semantic accent colors, dot, flag, icon, numeric, and RTL-safe composition.",
+      "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["Badge"],
+      "styles": ["light", "outline", "solid"],
+      "colors": [
+        "neutral",
+        "blue",
+        "green",
+        "amber",
+        "danger",
+        "purple",
+        "fuchsia",
+        "rose",
+        "sky",
+        "golden"
+      ],
+      "types": ["default", "leading-icon", "trailing-icon", "dot", "flag"],
+      "sizes": ["sm", "lg"],
+      "rtl": {
+        "inheritsDirection": true,
+        "iconPlacement": "Set type=\"leading-icon\" or type=\"trailing-icon\" and use data-icon=\"inline-start\" or data-icon=\"inline-end\".",
+        "directionalIconFlip": "Use data-rtl-flip=\"true\" on arrows that should mirror.",
+        "textDirection": "Uses dir=\"auto\" by default for short Arabic and English labels.",
+        "legacyVariants": "The previous variant prop is still accepted as a compatibility shim."
+      },
+      "files": [
+        {
+          "source": "components/badge.tsx",
+          "target": "{{ui}}/badge.tsx"
+        }
+      ],
+      "examples": ["examples/badge-demo.tsx"]
+    },
+    "tag": {
+      "description": "Figma Tag primitive with simple, dot, flag, avatar, and icon types, default/active/disabled states plus native hover and focus-visible styling, xs/md/lg sizes, optional close button, and RTL-safe composition.",
+      "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
+      },
+      "parts": [
+        "Tag",
+        "TagDot",
+        "TagFlag",
+        "TagAvatar",
+        "TagIcon",
+        "TagCloseButton"
+      ],
+      "types": ["simple", "dot", "flag", "avatar", "icon"],
+      "states": ["default", "active", "disabled"],
+      "sizes": ["xs", "md", "lg"],
+      "rtl": {
+        "inheritsDirection": true,
+        "spacing": "Uses logical inline padding and inherited flex direction so the leading media, label, and close button mirror naturally.",
+        "textDirection": "Text labels use dir=\"auto\" for short Arabic and English tag labels.",
+        "closeButton": "The close affordance is a 16px token-sized icon button using currentColor and the tag disabled state."
+      },
+      "files": [
+        {
+          "source": "components/tag.tsx",
+          "target": "{{ui}}/tag.tsx"
+        }
+      ],
+      "examples": ["examples/tag-demo.tsx"]
+    },
+    "attribute": {
+      "description": "Figma Attribute Card primitive for semantic description lists, key-value rows, detail cards, status values, copyable values, loading rows, two-column summaries, and RTL-safe layouts.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": [
+        "AttributeCard",
+        "AttributeHeader",
+        "AttributeList",
+        "AttributeItem",
+        "AttributeLabel",
+        "AttributeValue"
+      ],
+      "layouts": ["inline", "end", "stacked", "two-column"],
+      "densities": ["compact", "default", "comfortable"],
+      "rtl": {
+        "inheritsDirection": true,
+        "layout": "Uses logical text alignment and inherited direction so label and value columns mirror naturally.",
+        "textDirection": "String labels and values use dir=\"auto\" wrappers while custom slots can control their own direction.",
+        "composition": "Rows accept ReactNode values, so badges, buttons, links, progress bars, skeletons, files, and custom content can be composed from existing Banhaten primitives."
+      },
+      "files": [
+        {
+          "source": "components/attribute.tsx",
+          "target": "{{ui}}/attribute.tsx"
+        }
+      ],
+      "examples": ["examples/attribute-demo.tsx"]
+    },
+    "button": {
+      "description": "Accessible button primitive with semantic variants, size scale, loading composition, and RTL-safe icon behavior.",
+      "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
+        "class-variance-authority": "^0.7.1"
+      },
+      "variants": [
+        "default",
+        "secondary",
+        "soft",
+        "outline",
+        "ghost",
+        "ghost-primary",
+        "danger",
+        "soft-danger",
+        "white"
+      ],
+      "sizes": [
+        "xs",
+        "sm",
+        "default",
+        "lg",
+        "icon-xs",
+        "icon-sm",
+        "icon",
+        "icon-lg"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "iconPlacement": "Use data-icon=\"inline-start\" or data-icon=\"inline-end\".",
+        "directionalIconFlip": "Use data-rtl-flip=\"true\" on arrows and chevrons that should mirror in RTL."
+      },
+      "files": [
+        {
+          "source": "components/button.tsx",
+          "target": "{{ui}}/button.tsx"
+        },
+        {
+          "source": "components/spinner.tsx",
+          "target": "{{ui}}/spinner.tsx"
+        }
+      ],
+      "examples": ["examples/button-demo.tsx"]
+    },
+    "card": {
+      "description": "Token-built card primitive with vertical and horizontal image layouts, full-image treatment, desktop/mobile spacing, Button-composed footer actions, and RTL-safe copy.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": ["button"],
+      "parts": ["Card", "CardMedia", "CardFooter", "CardActions"],
+      "orientations": ["vertical", "horizontal"],
+      "types": ["leading-image", "trailing-image", "full-image"],
+      "breakpoints": ["desktop", "mobile"],
+      "rtl": {
+        "inheritsDirection": true,
+        "spacing": "Uses logical direction, text-start behavior, and dir=\"auto\" copy so title, subtitle, description, footer actions, and menu affordance mirror naturally.",
+        "actions": "The default footer composes the existing Button primitive and keeps action order logical in LTR and RTL."
+      },
+      "files": [
+        {
+          "source": "components/card.tsx",
+          "target": "{{ui}}/card.tsx"
+        },
+        {
+          "source": "assets/images/art-01.jpg",
+          "target": "{{ui}}/assets/images/art-01.jpg"
+        }
+      ],
+      "examples": ["examples/card-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": {
+        "@radix-ui/react-slot": "^1.2.3",
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["ButtonGroup", "ButtonGroupItem"],
+      "modes": ["default", "iconOnly"],
+      "sizes": ["md", "sm", "xs"],
+      "rtl": {
+        "inheritsDirection": true,
+        "itemSizing": "LTR and RTL default items keep their fixed Figma matrix widths. Icon-only groups keep the same square dimensions.",
+        "spacing": "Uses logical dividers and inherited flex direction so item order, icon order, padding, and separators follow LTR or RTL."
+      },
+      "files": [
+        {
+          "source": "components/button-group.tsx",
+          "target": "{{ui}}/button-group.tsx"
+        }
+      ],
+      "examples": ["examples/button-group-demo.tsx"]
+    },
+    "toggle": {
+      "description": "Radix Switch-backed toggle primitive and labeled field composition with sm/md geometry, active and disabled states, optional handle icons, tokenized focus ring, and RTL-safe label placement.",
+      "dependencies": {
+        "@radix-ui/react-switch": "^1.3.0",
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["Toggle", "ToggleField"],
+      "sizes": ["sm", "md"],
+      "states": ["unchecked", "checked", "hover", "focused", "disabled"],
+      "features": ["optional handle icons", "leading label", "trailing label", "supporting text"],
+      "rtl": {
+        "inheritsDirection": true,
+        "controlPlacement": "ToggleField uses start/end control placement so the switch and text order mirror in RTL.",
+        "handleMotion": "The thumb translates with logical direction, so checked state moves to the visual end edge in LTR and RTL.",
+        "textDirection": "Labels and descriptions use dir=\"auto\" with tokenized body-md/body-xs typography."
+      },
+      "files": [
+        {
+          "source": "components/toggle.tsx",
+          "target": "{{ui}}/toggle.tsx"
+        }
+      ],
+      "examples": ["examples/toggle-demo.tsx"]
+    },
+    "menu": {
+      "description": "Radix DropdownMenu-backed, Figma-matched menu surface and composable menu item slots for default, multiline, call-to-action, progress, divider, button, label, caption, badge, switch, avatar, meta text, and RTL layouts.",
+      "dependencies": {
+        "@radix-ui/react-dropdown-menu": "^2.1.17",
+        "@radix-ui/react-slot": "^1.2.3",
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": [
+        "Menu",
+        "MenuRoot",
+        "MenuTrigger",
+        "MenuContent",
+        "MenuPortal",
+        "MenuItem",
+        "MenuItemContent",
+        "MenuItemIcon",
+        "MenuItemAvatar",
+        "MenuItemText",
+        "MenuItemTitle",
+        "MenuItemDescription",
+        "MenuItemMeta",
+        "MenuItemBadge",
+        "MenuItemSwitch",
+        "MenuItemAction",
+        "MenuProgress",
+        "MenuSeparator",
+        "MenuLabel",
+        "MenuCaption"
+      ],
+      "widths": ["menu", "default", "multiline", "action", "auto"],
+      "itemKinds": ["default", "multiline", "action", "progress", "button"],
+      "states": ["default", "disabled"],
+      "rtl": {
+        "inheritsDirection": true,
+        "spacing": "Uses logical padding and flex direction so leading, trailing, badge, switch, right text, and action slots mirror naturally.",
+        "directionalIconFlip": "Use data-rtl-flip=\"true\" on chevrons and arrows that should mirror.",
+        "textDirection": "Text slots use dir=\"auto\" by default for Arabic and English labels."
+      },
+      "files": [
+        {
+          "source": "components/menu.tsx",
+          "target": "{{ui}}/menu.tsx"
+        }
+      ],
+      "examples": ["examples/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": {
+        "@radix-ui/react-tooltip": "^1.2.9",
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
+      },
+      "parts": [
+        "Tooltip",
+        "TooltipRoot",
+        "TooltipTrigger",
+        "TooltipContent",
+        "TooltipProvider",
+        "TooltipPortal",
+        "TooltipShortcut",
+        "TooltipCloseButton"
+      ],
+      "variants": ["dark", "default"],
+      "sizes": ["sm", "lg"],
+      "pointerPositions": [
+        "top-left",
+        "top-center",
+        "top-right",
+        "bottom-left",
+        "bottom-center",
+        "bottom-right",
+        "center-right",
+        "center-left",
+        "none"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "spacing": "Uses inherited direction with flex layout so label/shortcut and text/close order mirror naturally.",
+        "pointerPlacement": "Top and bottom left/right positions map to logical start/end in RTL. Center-left and center-right remain physical sides to match the Figma matrix.",
+        "textDirection": "Labels and support text use dir=\"auto\" for Arabic and English copy."
+      },
+      "files": [
+        {
+          "source": "components/tooltip.tsx",
+          "target": "{{ui}}/tooltip.tsx"
+        }
+      ],
+      "examples": ["examples/tooltip-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": {
+        "@radix-ui/react-dialog": "^1.1.16",
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": ["button", "checkbox", "spinner"],
+      "parts": [
+        "Modal",
+        "ConfirmModal",
+        "ModalRoot",
+        "ModalTrigger",
+        "ModalContent",
+        "ModalPortal",
+        "ModalOverlay",
+        "ModalHeader",
+        "ModalHeaderIcon",
+        "ModalTitle",
+        "ModalDescription",
+        "ModalBody",
+        "ModalDivider",
+        "ModalFooter",
+        "ModalFooterCheckbox",
+        "ModalActions",
+        "ModalActionButton",
+        "ModalClose",
+        "ModalCloseButton",
+        "ModalSurface"
+      ],
+      "intents": ["default", "warning", "danger"],
+      "sizes": ["sm", "default", "lg"],
+      "rtl": {
+        "inheritsDirection": true,
+        "closePlacement": "Close uses logical inline-end placement so it moves to the left side in RTL.",
+        "footerOrder": "The checkbox and action cluster use inherited direction and logical gaps so their order mirrors naturally.",
+        "textDirection": "Title, description, checkbox label, confirm labels, and actions use dir=\"auto\" for Arabic and English copy."
+      },
+      "files": [
+        {
+          "source": "components/modal.tsx",
+          "target": "{{ui}}/modal.tsx"
+        }
+      ],
+      "examples": ["examples/modal-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": {
+        "@radix-ui/react-checkbox": "^1.3.3",
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["Checkbox", "CheckboxCard"],
+      "states": ["unchecked", "checked", "indeterminate", "selected", "disabled"],
+      "cardPositions": ["start", "end"],
+      "rtl": {
+        "inheritsDirection": true,
+        "controlPlacement": "The card uses start/end control placement so the checkbox mirrors correctly in RTL.",
+        "textDirection": "Labels and descriptions use dir=\"auto\" and tokenized body-md/body-sm typography."
+      },
+      "files": [
+        {
+          "source": "components/checkbox.tsx",
+          "target": "{{ui}}/checkbox.tsx"
+        }
+      ],
+      "examples": ["examples/checkbox-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": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["Radio", "RadioField", "RadioGroup", "RadioGroupItem"],
+      "orientations": ["vertical", "horizontal"],
+      "states": ["default", "error", "disabled"],
+      "controlPositions": ["start", "end"],
+      "rtl": {
+        "inheritsDirection": true,
+        "controlPlacement": "RadioField and RadioGroupItem use start/end control placement so the radio mirrors correctly in RTL.",
+        "textDirection": "Group labels, item labels, descriptions, and error text use dir=\"auto\" with tokenized body typography.",
+        "semantics": "Uses native radio inputs with a shared group name, fieldset grouping, and label wrapping for platform keyboard and form behavior."
+      },
+      "files": [
+        {
+          "source": "components/radio-group.tsx",
+          "target": "{{ui}}/radio-group.tsx"
+        }
+      ],
+      "examples": ["examples/radio-group-demo.tsx"]
+    },
+    "radio-card": {
+      "description": "Figma Radio Card component with seven content types, default/active/disabled states, native hover styling, RTL variants, system radio indicator, and token-bound spacing, typography, border, and shadow.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["RadioCard"],
+      "types": [
+        "with-icon",
+        "icon-radio-right",
+        "payment",
+        "with-avatar",
+        "company-icon",
+        "icon-radio-left",
+        "radio-label"
+      ],
+      "states": ["default", "active", "disabled"],
+      "rtl": {
+        "inheritsDirection": false,
+        "layout": "Uses the explicit Figma RTL physical order while text nodes use RTL direction and right alignment.",
+        "spacing": "Company icon and icon-radio-left RTL variants use the Figma 12px card gap; other variants use the 10px card gap."
+      },
+      "files": [
+        {
+          "source": "components/radio-card.tsx",
+          "target": "{{ui}}/radio-card.tsx"
+        }
+      ],
+      "examples": ["examples/radio-card-demo.tsx"]
+    },
+    "divider": {
+      "description": "Figma-matched divider primitive with horizontal and vertical directions plus solid and dotted types.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["Divider"],
+      "directions": ["horizontal", "vertical"],
+      "types": ["solid", "dotted"],
+      "rtl": {
+        "inheritsDirection": false,
+        "geometry": "Direction maps to component orientation, not document text direction."
+      },
+      "files": [
+        {
+          "source": "components/divider.tsx",
+          "target": "{{ui}}/divider.tsx"
+        }
+      ],
+      "examples": ["examples/divider-demo.tsx"]
+    },
+    "pagination": {
+      "description": "Figma-matched pagination primitive with numeric, simple, and summary layouts, soft and ghost styles, exact 32px controls, caption variants, and RTL labels.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["Pagination"],
+      "types": ["numeric", "simple", "summary"],
+      "variants": ["soft", "ghost"],
+      "rtl": {
+        "inheritsDirection": true,
+        "labels": "Defaults to Arabic labels when dir=\"rtl\" is provided or the document direction is RTL.",
+        "directionalIconFlip": "Inline Figma arrow vectors use data-rtl-flip=\"true\" so previous and next controls mirror in RTL.",
+        "spacing": "Uses logical flex direction, gap, and text direction so English and Arabic captions align naturally."
+      },
+      "files": [
+        {
+          "source": "components/pagination.tsx",
+          "target": "{{ui}}/pagination.tsx"
+        }
+      ],
+      "examples": ["examples/pagination-demo.tsx"]
+    },
+    "toolbar": {
+      "description": "Figma Filter Toolbar primitive with eight filter/action styles, search fields, select triggers, icon actions, chips, selected-count badges, desktop/mobile wrapping, and RTL-safe composition.",
+      "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
+      },
+      "parts": [
+        "Toolbar",
+        "ToolbarSection",
+        "ToolbarSearch",
+        "ToolbarSelect",
+        "ToolbarButton",
+        "ToolbarIconButton",
+        "ToolbarFilterButton",
+        "ToolbarMoreButton",
+        "ToolbarBadge",
+        "ToolbarText",
+        "ToolbarSpacer"
+      ],
+      "styles": [
+        "filter-fields",
+        "filter-actions",
+        "selection-actions",
+        "grouped-fields",
+        "field-grid",
+        "inline-search",
+        "filter-chips",
+        "saved-segment"
+      ],
+      "layouts": ["inline", "split", "stack", "wrap"],
+      "breakpoints": ["desktop", "mobile"],
+      "rtl": {
+        "inheritsDirection": true,
+        "textAlignment": "Uses logical section layout and dir=\"auto\" labels so mixed English and Arabic filter text aligns naturally.",
+        "spacing": "Uses tokenized flex gaps and logical icon attributes so search, fields, chips, summaries, and actions mirror without alternate APIs."
+      },
+      "files": [
+        {
+          "source": "components/toolbar.tsx",
+          "target": "{{ui}}/toolbar.tsx"
+        }
+      ],
+      "examples": ["examples/toolbar-demo.tsx"]
+    },
+    "social-button": {
+      "description": "Social sign-in button primitive with Figma-matched platform styles, solid and outlined variants, icon-only mode, native focus-visible styling, and RTL labels.",
+      "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["SocialButton"],
+      "platforms": [
+        "apple",
+        "facebook",
+        "google",
+        "linkedin",
+        "twitter",
+        "whatsapp"
+      ],
+      "variants": ["solid", "outline"],
+      "sizes": ["default", "icon"],
+      "rtl": {
+        "inheritsDirection": true,
+        "labels": "Defaults to the Arabic platform label when the document direction is RTL, and accepts an explicit label for nested RTL surfaces.",
+        "spacing": "Uses logical label padding and flex gap so the icon/label order follows inherited direction."
+      },
+      "files": [
+        {
+          "source": "components/social-button.tsx",
+          "target": "{{ui}}/social-button.tsx"
+        }
+      ],
+      "examples": ["examples/social-button-demo.tsx"]
+    },
+    "input": {
+      "description": "Figma-matched input field with labels, helper and error text, add-ons, shortcuts, tags, dropdown/button/quantity adornments, default and soft styles, md/lg sizes, and RTL states.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["Input"],
+      "kinds": [
+        "default",
+        "shortcut",
+        "add-on",
+        "inline-add-on",
+        "tags",
+        "inline-tags",
+        "trailing-dropdown",
+        "leading-dropdown",
+        "quantity",
+        "quantity-2",
+        "trailing-button",
+        "leading-button"
+      ],
+      "variants": ["default", "soft"],
+      "sizes": ["md", "lg"],
+      "states": ["default", "filled", "error", "disabled"],
+      "rtl": {
+        "inheritsDirection": true,
+        "textAlignment": "Uses text-start and dir=\"auto\" so Arabic and English labels, values, add-ons, tags, and helper text align naturally.",
+        "spacing": "Uses logical start/end borders and inherited direction so leading and trailing segments mirror in RTL."
+      },
+      "files": [
+        {
+          "source": "components/input-content.ts",
+          "target": "{{ui}}/input-content.ts"
+        },
+        {
+          "source": "components/input.tsx",
+          "target": "{{ui}}/input.tsx"
+        }
+      ],
+      "examples": ["examples/input-demo.tsx"]
+    },
+    "select": {
+      "description": "Radix Select-backed, Figma-matched select field and menu item primitives with default and soft trigger styles, lg/md sizes, error/filled/disabled states, menu surface, checkbox and check selection, and item media for text, icons, avatars, flags, company, payment, and status dots.",
+      "dependencies": {
+        "@radix-ui/react-select": "^2.3.0",
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": [
+        "Select",
+        "SelectRoot",
+        "SelectLabel",
+        "SelectTrigger",
+        "SelectHelperText",
+        "SelectMenu",
+        "SelectMenuItem",
+        "SelectCheckboxIndicator",
+        "SelectItemAvatar",
+        "SelectItemFlag",
+        "SelectItemCompanyLogo",
+        "SelectItemPaymentIcon",
+        "SelectItemStatusDot"
+      ],
+      "variants": ["default", "soft"],
+      "sizes": ["lg", "md"],
+      "states": ["default", "filled", "error", "disabled"],
+      "itemTypes": [
+        "default",
+        "icon",
+        "avatar",
+        "flag",
+        "company",
+        "payment",
+        "dot"
+      ],
+      "selectionTypes": ["default", "checkbox"],
+      "rtl": {
+        "inheritsDirection": true,
+        "textAlignment": "Uses text-start and dir=\"auto\" for values, labels, helper text, and menu item text.",
+        "spacing": "Uses logical padding, start/end positioning, and inherited flex direction so trigger icons and selected checks mirror in RTL."
+      },
+      "files": [
+        {
+          "source": "components/select-content.tsx",
+          "target": "{{ui}}/select-content.tsx"
+        },
+        {
+          "source": "components/select.tsx",
+          "target": "{{ui}}/select.tsx"
+        }
+      ],
+      "examples": ["examples/select-demo.tsx"]
+    },
+    "date-picker": {
+      "description": "Figma-matched Calendar, Range Calendar, Date Picker, and Date Range Picker suite with single, month/year, double calendar, preset list, open/closed, time row, range selection, and RTL use cases.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
+      },
+      "parts": [
+        "Calendar",
+        "RangeCalendar",
+        "DatePicker",
+        "DateRangePicker",
+        "DatePickerTrigger"
+      ],
+      "modes": [
+        "single-calendar",
+        "single-month-year",
+        "double-calendar",
+        "double-calendar-with-presets",
+        "single-range-calendar",
+        "date-picker",
+        "date-range-picker"
+      ],
+      "states": ["open", "closed"],
+      "rtl": {
+        "inheritsDirection": true,
+        "triggerLayout": "The trigger uses inherited direction so the calendar icon and value mirror naturally.",
+        "calendarLayout": "Calendar headers, range presets, date cells, and time rows use logical borders, spacing, and text alignment for LTR and RTL surfaces.",
+        "rangeSelection": "Range fill uses logical start/end rounding for week edges and keeps selected endpoints tokenized with brand colors."
+      },
+      "files": [
+        {
+          "source": "components/date-picker.tsx",
+          "target": "{{ui}}/date-picker.tsx"
+        }
+      ],
+      "examples": ["examples/date-picker-demo.tsx"]
+    },
+    "slider": {
+      "description": "Figma-matched accessible range control built on Radix Slider with single and double-node values, text and tooltip indicators, RTL, vertical, disabled, ticked, tone, size, pill, and keyboard-ready states.",
+      "dependencies": {
+        "@radix-ui/react-slider": "^1.4.0",
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["Slider"],
+      "sizes": ["sm", "default", "lg"],
+      "tones": ["brand", "neutral", "success", "warning", "danger"],
+      "states": ["default", "disabled"],
+      "valueModes": ["single", "range", "multi-thumb"],
+      "indicators": [
+        "none",
+        "lower-text",
+        "upper-text",
+        "lower-tooltip",
+        "upper-tooltip"
+      ],
+      "features": [
+        "ticks",
+        "text indicators",
+        "tooltip indicators",
+        "thumb grip",
+        "pill variant",
+        "vertical orientation"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "valueDirection": "Radix Slider handles direction and keyboard behavior through the inherited dir attribute.",
+        "spacing": "Uses logical thumb content spacing and tokenized track/thumb geometry."
+      },
+      "files": [
+        {
+          "source": "components/slider.tsx",
+          "target": "{{ui}}/slider.tsx"
+        }
+      ],
+      "examples": ["examples/slider-demo.tsx"]
+    },
+    "progress": {
+      "description": "Read-only progress meter with Figma-matched value fill, sm/lg track sizes, top/bottom/helper/inline label compositions, tokenized indicator colors, helper text, info icon, spinner, and RTL-safe start anchoring.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
+      },
+      "parts": ["Progress"],
+      "sizes": ["sm", "lg"],
+      "labelPositions": ["top", "bottom", "none", "inline"],
+      "features": [
+        "progressbar semantics",
+        "helper text",
+        "optional label text",
+        "info icon",
+        "spinner indicator",
+        "logical start fill"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "valueDirection": "The fill is anchored with logical start positioning, so LTR fills from left and RTL fills from right.",
+        "spacing": "Label, optional text, indicator, and helper copy use inherited direction, logical text alignment, and tokenized gaps."
+      },
+      "files": [
+        {
+          "source": "components/progress.tsx",
+          "target": "{{ui}}/progress.tsx"
+        }
+      ],
+      "examples": ["examples/progress-demo.tsx"]
+    },
+    "progress-slider": {
+      "description": "Start-anchored progress slider built on Radix Slider where the filled surface grows from the start edge and the grip handle stays on the trailing edge.",
+      "dependencies": {
+        "@radix-ui/react-slider": "^1.4.0",
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["ProgressSlider"],
+      "sizes": ["default", "lg"],
+      "tones": ["brand", "neutral", "success", "warning", "danger"],
+      "states": ["default", "disabled"],
+      "features": ["start-anchored fill", "grip handle", "ticks"],
+      "rtl": {
+        "inheritsDirection": true,
+        "valueDirection": "Radix Slider handles direction and keyboard behavior through the inherited dir attribute; the fill stays anchored to the logical start edge.",
+        "spacing": "Uses tokenized pill geometry and logical direction through Radix."
+      },
+      "files": [
+        {
+          "source": "components/progress-slider.tsx",
+          "target": "{{ui}}/progress-slider.tsx"
+        }
+      ],
+      "examples": ["examples/progress-slider-demo.tsx"]
+    },
+    "textarea": {
+      "description": "Figma-matched textarea field with label, helper and error text, default and tags modes, placeholder, filled, disabled, and RTL states.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["Textarea"],
+      "modes": ["default", "tags"],
+      "states": ["placeholder", "filled", "disabled"],
+      "rtl": {
+        "inheritsDirection": true,
+        "textAlignment": "Uses text-start and dir=\"auto\" so Arabic and English content align naturally.",
+        "spacing": "Uses inherited direction and flex order so labels, helper icons, and tag chips mirror without physical left/right rules."
+      },
+      "files": [
+        {
+          "source": "components/textarea.tsx",
+          "target": "{{ui}}/textarea.tsx"
+        }
+      ],
+      "examples": ["examples/textarea-demo.tsx"]
+    },
+    "spinner": {
+      "description": "Small composable loading spinner for buttons and inline feedback.",
+      "dependencies": {},
+      "files": [
+        {
+          "source": "components/spinner.tsx",
+          "target": "{{ui}}/spinner.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",
+      "dependencies": {},
+      "parts": ["ActivityFeed", "ActivityFeedItem"],
+      "files": [
+        {
+          "source": "components/expanded/activityFeed.css",
+          "target": "{{ui}}/expanded/activityFeed.css"
+        },
+        {
+          "source": "components/expanded/ActivityFeed.tsx",
+          "target": "{{ui}}/expanded/ActivityFeed.tsx"
+        },
+        {
+          "source": "assets/activity-feed-avatar.png",
+          "target": "{{ui}}/assets/activity-feed-avatar.png"
+        }
+      ],
+      "examples": ["examples/expanded/activity-feed-demo.tsx"]
+    },
+    "alert": {
+      "description": "Contextual feedback primitive with danger, success, warning, info, neutral, compact, expandable, action, close, and RTL variants.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": ["Alert"],
+      "variants": ["danger", "success", "warning", "info", "neutral"],
+      "rtl": {
+        "inheritsDirection": false,
+        "textAlignment": "Uses dir=\"auto\" on title and description while the root dir prop mirrors icon, action, and close placement.",
+        "spacing": "Uses flexbox, gap, and logical direction so compact and expandable RTL layouts match the Figma matrix."
+      },
+      "files": [
+        {
+          "source": "components/alert.tsx",
+          "target": "{{ui}}/alert.tsx"
+        }
+      ],
+      "examples": ["examples/alert-demo.tsx"]
+    },
+    "banner": {
+      "description": "Expanded banner system with slim, inline action, single action, input, floating, full-width, brand, grey, brand-light, and RTL variants.",
+      "status": "expanded",
+      "dependencies": {},
+      "parts": ["Banner", "BannerBoard"],
+      "files": [
+        {
+          "source": "components/expanded/banner.css",
+          "target": "{{ui}}/expanded/banner.css"
+        },
+        {
+          "source": "components/expanded/Banner.tsx",
+          "target": "{{ui}}/expanded/Banner.tsx"
+        },
+        {
+          "source": "components/expanded/BannerBoard.tsx",
+          "target": "{{ui}}/expanded/BannerBoard.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/banner-demo.tsx"]
+    },
+    "catalog-components": {
+      "description": "Expanded catalog showcase with breadcrumbs, catalog-only content dividers, catalog tag previews, file upload states, and table previews.",
+      "status": "expanded",
+      "dependencies": {},
+      "parts": [
+        "Breadcrumbs",
+        "CatalogContentDivider",
+        "CatalogDivider",
+        "CatalogComponentsShowcase",
+        "CatalogTag",
+        "FileUpload",
+        "Table"
+      ],
+      "files": [
+        {
+          "source": "components/expanded/breadcrumbs.css",
+          "target": "{{ui}}/expanded/breadcrumbs.css"
+        },
+        {
+          "source": "components/expanded/Breadcrumbs.tsx",
+          "target": "{{ui}}/expanded/Breadcrumbs.tsx"
+        },
+        {
+          "source": "components/expanded/catalogComponentsShowcase.css",
+          "target": "{{ui}}/expanded/catalogComponentsShowcase.css"
+        },
+        {
+          "source": "components/expanded/CatalogComponentsShowcase.tsx",
+          "target": "{{ui}}/expanded/CatalogComponentsShowcase.tsx"
+        },
+        {
+          "source": "components/expanded/divider.css",
+          "target": "{{ui}}/expanded/divider.css"
+        },
+        {
+          "source": "components/expanded/CatalogDivider.tsx",
+          "target": "{{ui}}/expanded/CatalogDivider.tsx"
+        },
+        {
+          "source": "components/expanded/fileUpload.css",
+          "target": "{{ui}}/expanded/fileUpload.css"
+        },
+        {
+          "source": "components/expanded/FileUpload.tsx",
+          "target": "{{ui}}/expanded/FileUpload.tsx"
+        },
+        {
+          "source": "components/expanded/table.css",
+          "target": "{{ui}}/expanded/table.css"
+        },
+        {
+          "source": "components/expanded/Table.tsx",
+          "target": "{{ui}}/expanded/Table.tsx"
+        },
+        {
+          "source": "components/expanded/tag.css",
+          "target": "{{ui}}/expanded/tag.css"
+        },
+        {
+          "source": "components/expanded/CatalogTag.tsx",
+          "target": "{{ui}}/expanded/CatalogTag.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/catalog-components-demo.tsx"]
+    },
+    "breadcrumbs": {
+      "description": "Expanded breadcrumbs navigation with default, raised, icon, overflow, separator, and RTL variants.",
+      "status": "expanded",
+      "dependencies": {},
+      "parts": ["Breadcrumbs"],
+      "files": [
+        {
+          "source": "components/expanded/breadcrumbs.css",
+          "target": "{{ui}}/expanded/breadcrumbs.css"
+        },
+        {
+          "source": "components/expanded/Breadcrumbs.tsx",
+          "target": "{{ui}}/expanded/Breadcrumbs.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/catalog-components-demo.tsx"]
+    },
+    "file-upload": {
+      "description": "Expanded file upload composition with drag-and-drop zones, file rows, upload states, disabled behavior, and RTL direction.",
+      "status": "expanded",
+      "dependencies": {},
+      "parts": ["FileUpload"],
+      "files": [
+        {
+          "source": "components/expanded/fileUpload.css",
+          "target": "{{ui}}/expanded/fileUpload.css"
+        },
+        {
+          "source": "components/expanded/FileUpload.tsx",
+          "target": "{{ui}}/expanded/FileUpload.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/catalog-components-demo.tsx"]
+    },
+    "table": {
+      "description": "Expanded table and data table composition with selection, stateful sortable headers, search, filters, bulk actions, pagination, empty/loading/error states, status badges, progress cells, actions, row states, and RTL mirroring.",
+      "status": "expanded",
+      "dependencies": {},
+      "registryDependencies": ["toolbar", "pagination", "spinner"],
+      "parts": ["Table", "DataTable"],
+      "files": [
+        {
+          "source": "components/expanded/table.css",
+          "target": "{{ui}}/expanded/table.css"
+        },
+        {
+          "source": "components/expanded/Table.tsx",
+          "target": "{{ui}}/expanded/Table.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/catalog-components-demo.tsx"]
+    },
+    "command-bar": {
+      "description": "Expanded command bar composition for default, recent, results, and empty command-palette states across desktop, mobile, LTR, and RTL.",
+      "status": "expanded",
+      "dependencies": {},
+      "parts": ["CommandBar"],
+      "files": [
+        {
+          "source": "components/expanded/commandBar.css",
+          "target": "{{ui}}/expanded/commandBar.css"
+        },
+        {
+          "source": "components/expanded/CommandBar.tsx",
+          "target": "{{ui}}/expanded/CommandBar.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/command-bar-demo.tsx"]
+    },
+    "icons": {
+      "description": "Expanded icon explorer for open-source icon pack review, semantic mapping, shortlist comparison, and Iconify catalog inspection.",
+      "status": "expanded",
+      "dependencies": {},
+      "parts": ["IconExplorer"],
+      "runtime": {
+        "externalScripts": ["https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"],
+        "externalApis": ["https://api.iconify.design"]
+      },
+      "files": [
+        {
+          "source": "components/expanded/iconExplorer.css",
+          "target": "{{ui}}/expanded/iconExplorer.css"
+        },
+        {
+          "source": "components/expanded/iconPacks.ts",
+          "target": "{{ui}}/expanded/iconPacks.ts"
+        },
+        {
+          "source": "components/expanded/IconExplorer.tsx",
+          "target": "{{ui}}/expanded/IconExplorer.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/icons-demo.tsx"]
+    },
+    "onboarding-step": {
+      "description": "Expanded onboarding step list item with finished, active, and inactive progress states for compact setup flows in LTR and RTL.",
+      "status": "expanded",
+      "dependencies": {},
+      "parts": ["OnboardingStepListItem"],
+      "files": [
+        {
+          "source": "components/expanded/onboardingStepListItem.css",
+          "target": "{{ui}}/expanded/onboardingStepListItem.css"
+        },
+        {
+          "source": "components/expanded/OnboardingStepListItem.tsx",
+          "target": "{{ui}}/expanded/OnboardingStepListItem.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/onboarding-step-demo.tsx"]
+    },
+    "page-header": {
+      "description": "Expanded page header composition with breadcrumbs, metadata, description copy, action groups, responsive layout, and optional local tabs.",
+      "status": "expanded",
+      "dependencies": {},
+      "registryDependencies": ["tabs"],
+      "parts": ["PageHeader"],
+      "files": [
+        {
+          "source": "components/expanded/pageHeader.css",
+          "target": "{{ui}}/expanded/pageHeader.css"
+        },
+        {
+          "source": "components/expanded/PageHeader.tsx",
+          "target": "{{ui}}/expanded/PageHeader.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/page-header-demo.tsx"]
+    },
+    "slideout": {
+      "description": "Expanded slideout panel with desktop and mobile breakpoints, header and footer actions, slotted content, and RTL coverage.",
+      "status": "expanded",
+      "dependencies": {},
+      "parts": [
+        "Slideout",
+        "SlideoutFiltersExample",
+        "SlideoutPaymentDetailExample",
+        "SlideoutPaymentFormExample",
+        "SlideoutUserProfileExample"
+      ],
+      "files": [
+        {
+          "source": "components/expanded/slideout.css",
+          "target": "{{ui}}/expanded/slideout.css"
+        },
+        {
+          "source": "components/expanded/Slideout.tsx",
+          "target": "{{ui}}/expanded/Slideout.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/slideout-demo.tsx"]
+    },
+    "steps": {
+      "description": "Expanded steps composition with horizontal and vertical progress indicators, icon markers, number markers, item alignment, and RTL layouts.",
+      "status": "expanded",
+      "dependencies": {},
+      "parts": ["HorizontalStepItem", "Steps", "VerticalStepItem"],
+      "files": [
+        {
+          "source": "components/expanded/steps.css",
+          "target": "{{ui}}/expanded/steps.css"
+        },
+        {
+          "source": "components/expanded/Steps.tsx",
+          "target": "{{ui}}/expanded/Steps.tsx"
+        }
+      ],
+      "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"],
+      "files": [
+        {
+          "source": "components/expanded/tabs.css",
+          "target": "{{ui}}/expanded/tabs.css"
+        },
+        {
+          "source": "components/expanded/Tabs.tsx",
+          "target": "{{ui}}/expanded/Tabs.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/tabs-demo.tsx"]
+    },
+    "timeline": {
+      "description": "Expanded timeline composition with vertical and horizontal orientations, dates, captions, active states, finished states, item variants, and RTL layouts.",
+      "status": "expanded",
+      "dependencies": {},
+      "parts": ["Timeline", "TimelineItem", "TimelineShowcase"],
+      "files": [
+        {
+          "source": "components/expanded/timeline.css",
+          "target": "{{ui}}/expanded/timeline.css"
+        },
+        {
+          "source": "components/expanded/Timeline.tsx",
+          "target": "{{ui}}/expanded/Timeline.tsx"
+        },
+        {
+          "source": "components/expanded/TimelineShowcase.tsx",
+          "target": "{{ui}}/expanded/TimelineShowcase.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/timeline-demo.tsx"]
+    }
+  }
+}