banhaten 0.1.1 → 0.1.2

package/registry/index.json

@@ -49,24 +49,31 @@
       "examples": ["examples/accordion-demo.tsx"]
     },
     "avatar": {
-      "description": "User avatar primitive with image, fallback, badge, group, group count, size scale, and RTL-safe overlap.",
+      "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": {
         "@radix-ui/react-avatar": "^1.1.10",
-        "class-variance-authority": "^0.7.1"
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
       },
       "parts": [
         "Avatar",
         "AvatarImage",
         "AvatarFallback",
+        "AvatarIcon",
         "AvatarBadge",
+        "AvatarStatus",
+        "AvatarAction",
         "AvatarGroup",
         "AvatarGroupCount"
       ],
-      "sizes": ["sm", "default", "lg", "xl"],
+      "sizes": ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"],
+      "forms": ["circular", "rounded"],
+      "statusColors": ["offline", "busy", "blocked", "available", "away"],
+      "actions": ["custom", "edit", "verified", "remove"],
       "rtl": {
         "inheritsDirection": true,
         "groupOverlap": "Uses logical -ms spacing so overlap reverses naturally in RTL.",
-        "badgePlacement": "Uses logical end/bottom positioning."
+        "badgePlacement": "Status dots use logical end/bottom positioning; avatar actions use logical end/top positioning."
       },
       "files": [
         {
@@ -81,7 +88,7 @@
       "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.",
+      "description": "Figma Badge primitive with light, outline, and solid styles, semantic accent colors, dot, flag, icon, numeric, optional split trailing actions, and RTL-safe composition.",
       "dependencies": {
         "@radix-ui/react-slot": "^1.2.3",
         "class-variance-authority": "^0.7.1"
@@ -101,10 +108,11 @@
         "golden"
       ],
       "types": ["default", "leading-icon", "trailing-icon", "dot", "flag"],
+      "options": ["splitAction"],
       "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\".",
+        "iconPlacement": "Set type=\"leading-icon\" or type=\"trailing-icon\" and use data-icon=\"inline-start\" or data-icon=\"inline-end\". Add splitAction to give a trailing icon its own token-sized compartment.",
         "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."
@@ -299,7 +307,7 @@
       "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.",
+      "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, submenus, and RTL layouts.",
       "dependencies": {
         "@radix-ui/react-dropdown-menu": "^2.1.17",
         "@radix-ui/react-slot": "^1.2.3",
@@ -311,6 +319,9 @@
         "MenuTrigger",
         "MenuContent",
         "MenuPortal",
+        "MenuSub",
+        "MenuSubTrigger",
+        "MenuSubContent",
         "MenuItem",
         "MenuItemContent",
         "MenuItemIcon",
@@ -388,6 +399,63 @@
       ],
       "examples": ["examples/tooltip-demo.tsx"]
     },
+    "popover": {
+      "description": "Token-built popover primitive with click, focus, and hover-capable triggers, positioned content, optional arrow, alignment and offset controls, close affordance, small to large surfaces, and RTL-safe composition.",
+      "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
+        "class-variance-authority": "^0.7.1",
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": [
+        "badge",
+        "button",
+        "checkbox",
+        "input",
+        "menu",
+        "select",
+        "toggle"
+      ],
+      "parts": [
+        "Popover",
+        "PopoverRoot",
+        "PopoverAnchor",
+        "PopoverTrigger",
+        "PopoverContent",
+        "PopoverHeader",
+        "PopoverTitle",
+        "PopoverDescription",
+        "PopoverBody",
+        "PopoverFooter",
+        "PopoverClose"
+      ],
+      "sides": ["top", "right", "bottom", "left"],
+      "alignments": ["start", "center", "end"],
+      "sizes": ["sm", "md", "lg", "auto"],
+      "offsets": ["tight", "default", "loose"],
+      "features": [
+        "filter popover",
+        "settings popover",
+        "actions popover",
+        "focus trigger",
+        "text link trigger",
+        "icon button trigger",
+        "optional arrow",
+        "RTL"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "alignment": "Top and bottom alignments use logical start/end so the panel edge and arrow align correctly in LTR and RTL.",
+        "spacing": "Uses logical layout and Banhaten spacing tokens for headers, bodies, footers, arrows, and trigger gaps.",
+        "textDirection": "Title and description slots use dir=\"auto\" while product content can inherit the nearest direction."
+      },
+      "files": [
+        {
+          "source": "components/popover.tsx",
+          "target": "{{ui}}/popover.tsx"
+        }
+      ],
+      "examples": ["examples/popover-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": {
@@ -665,6 +733,39 @@
       ],
       "examples": ["examples/input-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": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "registryDependencies": ["input"],
+      "parts": ["InputOTP", "InputOTPSeparator"],
+      "variants": ["default", "soft"],
+      "sizes": ["md", "lg"],
+      "states": ["default", "filled", "error", "disabled"],
+      "features": [
+        "controlled value",
+        "uncontrolled value",
+        "paste distribution",
+        "hidden form value",
+        "masked slots",
+        "custom length",
+        "custom grouping"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "keyboard": "Arrow navigation mirrors for RTL: visual previous and next follow the inherited direction.",
+        "spacing": "Slot groups, separators, labels, and helper text use inherited direction plus Input spacing tokens.",
+        "composition": "Each slot reuses the Banhaten Input surface and control typography instead of a separate field style."
+      },
+      "files": [
+        {
+          "source": "components/input-otp.tsx",
+          "target": "{{ui}}/input-otp.tsx"
+        }
+      ],
+      "examples": ["examples/input-otp-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, company, payment, and status dots.",
       "dependencies": {
@@ -715,6 +816,40 @@
       ],
       "examples": ["examples/select-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": {
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": ["input", "select", "tag"],
+      "parts": ["Autocomplete"],
+      "modes": ["single", "multiple"],
+      "states": ["default", "filled", "error", "disabled"],
+      "variants": ["default", "soft"],
+      "sizes": ["md", "lg"],
+      "features": [
+        "filtering",
+        "keyboard navigation",
+        "controlled value",
+        "controlled input value",
+        "controlled open state",
+        "selected tags",
+        "empty state"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "composition": "Uses the existing Input field, Select menu and menu item rows, and Tag chips instead of introducing new visual primitives.",
+        "spacing": "Uses logical positioning, logical gaps, and inherited direction so the input, menu rows, checks, helper text, and selected tags mirror naturally.",
+        "textDirection": "Labels, option text, helper text, and tag labels use dir=\"auto\" through the composed primitives."
+      },
+      "files": [
+        {
+          "source": "components/autocomplete.tsx",
+          "target": "{{ui}}/autocomplete.tsx"
+        }
+      ],
+      "examples": ["examples/autocomplete-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": {
@@ -748,6 +883,10 @@
         {
           "source": "components/date-picker.tsx",
           "target": "{{ui}}/date-picker.tsx"
+        },
+        {
+          "source": "components/date-picker-state.ts",
+          "target": "{{ui}}/date-picker-state.ts"
         }
       ],
       "examples": ["examples/date-picker-demo.tsx"]
@@ -866,9 +1005,67 @@
       ],
       "examples": ["examples/textarea-demo.tsx"]
     },
+    "skeleton": {
+      "description": "Token-built loading placeholder primitive with text, avatar, button, input, card, list, table, and form compositions, shimmer motion, reduced-motion fallback, and RTL-safe direction.",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1"
+      },
+      "parts": [
+        "Skeleton",
+        "SkeletonText",
+        "SkeletonAvatar",
+        "SkeletonButton",
+        "SkeletonInput",
+        "SkeletonCard",
+        "SkeletonList",
+        "SkeletonTable",
+        "SkeletonForm"
+      ],
+      "shapes": ["block", "text", "circle"],
+      "sizes": ["xs", "sm", "md", "lg", "xl"],
+      "tones": ["default", "subtle", "surface", "brand"],
+      "features": [
+        "shimmer animation",
+        "reduced motion",
+        "text lines",
+        "avatar placeholders",
+        "button placeholders",
+        "input placeholders",
+        "card placeholders",
+        "list placeholders",
+        "table placeholders",
+        "form placeholders"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "motion": "The shimmer direction mirrors inside RTL containers while preserving logical layout.",
+        "composition": "Composed card, list, table, and form placeholders use logical gaps, inherited direction, and token-sized rows.",
+        "accessibility": "Skeletons are decorative by default; set aria-busy on the loading region and pair with a status label when loading progress needs to be announced."
+      },
+      "files": [
+        {
+          "source": "components/skeleton.css",
+          "target": "{{ui}}/skeleton.css"
+        },
+        {
+          "source": "components/skeleton.tsx",
+          "target": "{{ui}}/skeleton.tsx"
+        }
+      ],
+      "examples": ["examples/skeleton-demo.tsx"]
+    },
     "spinner": {
-      "description": "Small composable loading spinner for buttons and inline feedback.",
+      "description": "Small composable loading indicators with a steady Spinner and a smoother variable-arc DynamicSpinner, both inheriting text color and CSS variable sizing.",
       "dependencies": {},
+      "parts": ["Spinner", "DynamicSpinner"],
+      "modes": ["steady", "dynamic"],
+      "features": [
+        "steady arc rotation",
+        "dynamic arc length",
+        "slower continuous rotation",
+        "text color inheritance",
+        "CSS variable sizing"
+      ],
       "files": [
         {
           "source": "components/spinner.tsx",
@@ -1084,6 +1281,41 @@
       ],
       "examples": ["examples/expanded/command-bar-demo.tsx"]
     },
+    "empty-state": {
+      "description": "Expanded empty and result state composition with neutral icon halo, title, supporting copy, optional Button actions, alignment, compact density, custom icons, and RTL-safe text.",
+      "status": "expanded",
+      "dependencies": {
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": ["button"],
+      "parts": ["EmptyState"],
+      "sizes": ["default", "compact"],
+      "alignments": ["center", "start"],
+      "features": [
+        "neutral icon halo",
+        "title and description copy",
+        "primary and secondary actions",
+        "custom icon",
+        "RTL"
+      ],
+      "rtl": {
+        "inheritsDirection": false,
+        "textAlignment": "The root dir prop mirrors logical alignment and action flow while title and description use dir=\"auto\".",
+        "spacing": "Uses grid, flex-wrap, gap, and logical margins so centered and start-aligned layouts work in LTR and RTL.",
+        "actions": "Action buttons are rendered through the Banhaten Button primitive and preserve logical order."
+      },
+      "files": [
+        {
+          "source": "components/expanded/emptyState.css",
+          "target": "{{ui}}/expanded/emptyState.css"
+        },
+        {
+          "source": "components/expanded/EmptyState.tsx",
+          "target": "{{ui}}/expanded/EmptyState.tsx"
+        }
+      ],
+      "examples": ["examples/expanded/empty-state-demo.tsx"]
+    },
     "icons": {
       "description": "Expanded icon explorer for open-source icon pack review, semantic mapping, shortlist comparison, and Iconify catalog inspection.",
       "status": "expanded",

package/registry/styles/globals.css

@@ -479,6 +479,59 @@
   --shadow-button-hover: var(--shadow-button-raised);
   --shadow-button-active: var(--shadow-button-raised);
   --shadow-avatar-badge: none;
+  --bh-avatar-size-2xs: var(--bh-space-3xl-16);
+  --bh-avatar-size-xs: var(--bh-space-4xl-20);
+  --bh-avatar-size-sm: var(--bh-space-5xl-24);
+  --bh-avatar-size-md: var(--bh-space-6xl-32);
+  --bh-avatar-size-lg: 36px;
+  --bh-avatar-size-xl: var(--bh-space-7xl-40);
+  --bh-avatar-size-2xl: var(--bh-space-8xl-48);
+  --bh-avatar-size-3xl: 56px;
+  --bh-avatar-size-4xl: var(--bh-space-9xl-64);
+  --bh-avatar-fallback-font-size-2xs: 9px;
+  --bh-avatar-fallback-font-size-xs: var(--bh-space-lg-10);
+  --bh-avatar-fallback-font-size-sm: var(--bh-text-body-2xs-semibold-font-size);
+  --bh-avatar-fallback-font-size-md: var(--bh-text-body-2xs-semibold-font-size);
+  --bh-avatar-fallback-font-size-lg: var(--bh-text-body-sm-semibold-font-size);
+  --bh-avatar-fallback-font-size-xl: var(--bh-text-body-sm-semibold-font-size);
+  --bh-avatar-fallback-font-size-2xl: var(--bh-text-body-sm-semibold-font-size);
+  --bh-avatar-fallback-font-size-3xl: var(--bh-text-body-md-semibold-font-size);
+  --bh-avatar-fallback-font-size-4xl: var(--bh-text-body-md-semibold-font-size);
+  --bh-avatar-icon-size-2xs: var(--bh-space-lg-10);
+  --bh-avatar-icon-size-xs: var(--bh-space-xl-12);
+  --bh-avatar-icon-size-sm: var(--bh-space-3xl-16);
+  --bh-avatar-icon-size-md: var(--bh-space-4xl-20);
+  --bh-avatar-icon-size-lg: var(--bh-space-4xl-20);
+  --bh-avatar-icon-size-xl: var(--bh-space-5xl-24);
+  --bh-avatar-icon-size-2xl: var(--bh-radius-6xl-28);
+  --bh-avatar-icon-size-3xl: var(--bh-space-6xl-32);
+  --bh-avatar-icon-size-4xl: 36px;
+  --bh-avatar-status-size-tiny: var(--bh-space-sm-6);
+  --bh-avatar-status-size-xsmall: var(--bh-space-md-8);
+  --bh-avatar-status-size-small: var(--bh-space-lg-10);
+  --bh-avatar-status-size-medium: var(--bh-space-2xl-14);
+  --bh-avatar-status-size-large: var(--bh-space-3xl-16);
+  --bh-avatar-status-size-xlarge: var(--bh-space-4xl-20);
+  --bh-avatar-status-ring-thin: var(--bh-space-xxxs-1);
+  --bh-avatar-status-ring-default: var(--bh-space-xxs-2);
+  --bh-avatar-action-size-tiny: var(--bh-space-lg-10);
+  --bh-avatar-action-size-xsmall: var(--bh-space-xl-12);
+  --bh-avatar-action-size-small: var(--bh-space-2xl-14);
+  --bh-avatar-action-size-medium: var(--bh-space-3xl-16);
+  --bh-avatar-action-size-large: 18px;
+  --bh-avatar-action-size-xlarge: var(--bh-space-4xl-20);
+  --bh-avatar-action-size-2xl: var(--bh-space-5xl-24);
+  --bh-avatar-action-size-3xl: var(--bh-space-6xl-32);
+  --bh-avatar-action-size-4xl: var(--bh-space-7xl-40);
+  --bh-avatar-action-icon-size-tiny: var(--bh-space-sm-6);
+  --bh-avatar-action-icon-size-xsmall: 7px;
+  --bh-avatar-action-icon-size-small: var(--bh-space-md-8);
+  --bh-avatar-action-icon-size-medium: 9px;
+  --bh-avatar-action-icon-size-large: var(--bh-space-lg-10);
+  --bh-avatar-action-icon-size-xlarge: var(--bh-space-xl-12);
+  --bh-avatar-action-icon-size-2xl: var(--bh-space-2xl-14);
+  --bh-avatar-action-icon-size-3xl: 18px;
+  --bh-avatar-action-icon-size-4xl: 22px;
   --shadow-accordion-item: none;
   --shadow-badge: none;
   --shadow-social-button: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-social-button-border, transparent), var(--shadow-component-default);
@@ -1066,6 +1119,39 @@
   --bh-slider-pill-track-bg: color-mix(in srgb, var(--bh-slider-range-bg) 12%, var(--bh-bg-default));
   --bh-slider-tick-bg: color-mix(in srgb, var(--bh-slider-range-bg) 45%, transparent);
   --shadow-xs: 0px 1px 2px 0px rgb(15 17 20 / 0.06);
+  --bh-input-otp-group-gap: var(--bh-space-md-8);
+  --bh-input-otp-separator-height: var(--bh-border-width-strong);
+  --bh-input-otp-separator-width: var(--bh-space-md-8);
+  --bh-input-otp-slot-gap: var(--bh-space-xs-4);
+  --bh-input-otp-slot-lg-width: var(--bh-input-lg-height);
+  --bh-input-otp-slot-md-width: var(--bh-input-md-height);
+  --bh-input-otp-width: max-content;
+  --bh-popover-arrow-depth: var(--bh-space-md-8);
+  --bh-popover-arrow-inline-offset: var(--bh-space-xl-12);
+  --bh-popover-arrow-offset: calc(var(--bh-popover-arrow-depth) * -1);
+  --bh-popover-arrow-overlap: var(--bh-border-width-default);
+  --bh-popover-arrow-width: var(--bh-space-xl-12);
+  --bh-popover-bg: var(--bh-bg-raised);
+  --bh-popover-body-gap: var(--bh-space-md-8);
+  --bh-popover-border: var(--bh-border-subtle);
+  --bh-popover-close-icon-size: var(--bh-space-3xl-16);
+  --bh-popover-close-size: var(--bh-space-5xl-24);
+  --bh-popover-content-gap: var(--bh-space-lg-10);
+  --bh-popover-footer-gap: var(--bh-space-md-8);
+  --bh-popover-header-gap: var(--bh-space-md-8);
+  --bh-popover-lg-width: var(--bh-space-19xl-384);
+  --bh-popover-max-width: calc(100vw - var(--bh-space-6xl-32));
+  --bh-popover-md-width: var(--bh-space-17xl-288);
+  --bh-popover-offset: var(--bh-popover-offset-default);
+  --bh-popover-offset-default: var(--bh-space-md-8);
+  --bh-popover-offset-loose: var(--bh-space-3xl-16);
+  --bh-popover-offset-tight: var(--bh-space-xs-4);
+  --bh-popover-padding: var(--bh-space-xl-12);
+  --bh-popover-radius: var(--bh-radius-xl-10);
+  --bh-popover-sm-width: var(--bh-space-15xl-224);
+  --bh-popover-trigger-gap: var(--bh-space-xs-4);
+  --shadow-popover: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-popover-border), var(--shadow-component-default);
+  --bh-empty-state-icon-stroke-width: 2;
 
 }
 
@@ -4216,8 +4302,10 @@
     font-family: var(--bh-font-family);
     font-size: var(--bh-text-base-font-size);
     font-weight: var(--bh-text-base-font-weight);
+    -webkit-font-smoothing: antialiased;
     letter-spacing: var(--bh-text-base-letter-spacing);
     line-height: var(--bh-text-base-line-height);
+    -moz-osx-font-smoothing: grayscale;
   }
 }