banhaten 0.1.0 → 0.1.2

package/README.md

@@ -2,7 +2,7 @@
 
 Banhaten design system is an Arabic and English-first React design system. It installs source components into a project, shadcn-style:
 
-```bash
+```text
 npx banhaten init
 npx banhaten add button
 npx banhaten add button-group
@@ -16,8 +16,10 @@ npx banhaten add toolbar
 npx banhaten add social-button
 npx banhaten add input
 npx banhaten add select
+npx banhaten add autocomplete
 npx banhaten add date-picker
 npx banhaten add slider
+npx banhaten add skeleton
 npx banhaten add progress
 npx banhaten add progress-slider
 npx banhaten add textarea
@@ -53,11 +55,14 @@ The current scaffold includes:
 - A Figma-matched `tag` registry item with simple, dot, flag, avatar, and icon types, default/active/disabled states, native hover/focus-visible styling, xs/md/lg sizes, optional close button, and RTL-safe composition.
 - A Radix Switch-backed `toggle` registry item with sm/md geometry, active/disabled states, optional handle icons, labeled fields, supporting text, and RTL-safe label placement.
 - A Figma-matched `textarea` registry item with label, helper text, error, default and tags modes, placeholder, filled, disabled, and RTL states.
-- A Radix Select-backed, Figma-matched `select` registry item with default and soft triggers, error/filled/disabled states, menu surface, checkbox and check selection, and item media for text, users, flags, companies, payment methods, and status dots.
+- A Radix Select-backed, Figma-matched `select` registry item with default and soft triggers, error/filled/disabled states, menu surface, checkbox and check selection, and item media for text, icons, users, companies, payment methods, and status dots.
+- A composed `autocomplete` registry item with Input field anatomy, Select menu rows, Tag selections, filtering, keyboard navigation, controlled state, and RTL layout.
 - A Figma-matched `date-picker` registry item with Calendar, Range Calendar, Date Picker, Date Range Picker, presets, time rows, open states, month/year view, and RTL.
 - A Radix Slider-backed `slider` registry item with single, range, multi-thumb, text/tooltip indicators, ticks, vertical layout, pill treatment, tones, and RTL behavior.
+- A token-built `skeleton` registry item with primitive, text, avatar, button, input, card, list, table, form, shimmer, reduced-motion, and RTL loading compositions.
 - A read-only `progress` registry item with value meters, label placements, helper text, indicators, spinner, and RTL fill direction.
 - A Radix-based `progress-slider` registry item with semantic tones, ticks, focus treatment, and RTL-aware keyboard behavior.
+- A `spinner` registry item with steady `Spinner`, variable-arc `DynamicSpinner`, inherited text color, and CSS variable sizing.
 - A Radix Tooltip-backed `tooltip` registry item with dark/default variants, small/large sizes, pointer positions, shortcut and close slots, and RTL-safe layout.
 - Token CSS generated from the local token exports in `tokens`, with the Banhaten alias layer kept in the same generated stylesheet.
 - Inter as the single font family, loaded through `@fontsource/inter` weights 400, 500, 600, and 700.
@@ -67,7 +72,7 @@ The current scaffold includes:
 
 From this repository:
 
-```bash
+```text
 node src/cli/index.js init --cwd ./playground
 node src/cli/index.js add button --cwd ./playground
 node src/cli/index.js add button-group --cwd ./playground
@@ -81,8 +86,11 @@ node src/cli/index.js add toolbar --cwd ./playground
 node src/cli/index.js add social-button --cwd ./playground
 node src/cli/index.js add input --cwd ./playground
 node src/cli/index.js add select --cwd ./playground
+node src/cli/index.js add autocomplete --cwd ./playground
 node src/cli/index.js add date-picker --cwd ./playground
 node src/cli/index.js add slider --cwd ./playground
+node src/cli/index.js add skeleton --cwd ./playground
+node src/cli/index.js add spinner --cwd ./playground
 node src/cli/index.js add progress --cwd ./playground
 node src/cli/index.js add progress-slider --cwd ./playground
 node src/cli/index.js add textarea --cwd ./playground
@@ -98,14 +106,14 @@ node src/cli/index.js add tooltip --cwd ./playground
 
 Run the local component playground:
 
-```bash
+```text
 npm --prefix playground install
 npm run playground:dev
 ```
 
 In a published package:
 
-```bash
+```text
 npx banhaten init
 npx banhaten add button
 npx banhaten add button-group
@@ -119,8 +127,11 @@ npx banhaten add toolbar
 npx banhaten add social-button
 npx banhaten add input
 npx banhaten add select
+npx banhaten add autocomplete
 npx banhaten add date-picker
 npx banhaten add slider
+npx banhaten add skeleton
+npx banhaten add spinner
 npx banhaten add progress
 npx banhaten add progress-slider
 npx banhaten add textarea
@@ -136,7 +147,7 @@ npx banhaten add tooltip
 
 After `init` or `add`, run your package manager install command when the CLI reports new dependencies:
 
-```bash
+```text
 npm install
 ```
 
@@ -144,7 +155,7 @@ npm install
 
 Use the CLI from the root of a React app:
 
-```bash
+```text
 npx banhaten init
 npx banhaten add button input select
 npm install
@@ -219,6 +230,7 @@ Banhaten themes are controlled by attributes on the document element:
 | `Modal` | `size`, `dir`, `title`, `description`, `showIcon`, `showCloseButton`, `showDivider`, `showFooter`, `showCheckbox`, `footer`; `ConfirmModal` adds `intent`, `confirmLabel`, `confirmLoading`, `preventOutsideDismiss` |
 | `Pagination` | `type`, `variant`, `dir`, `page`, `totalPages`, `labels` |
 | `Progress` | `value`, `min`, `max`, `size`, `labelPosition`, `helperText`, `showIndicator`, `showSpinner` |
+| `Spinner` | `Spinner`, `DynamicSpinner`, inherited text color, `--bh-spinner-size` CSS variable |
 | `Slider` | `value`, `defaultValue`, `tone`, `size`, `variant`, `orientation`, `showTicks` |
 | `ProgressSlider` | `value`, `defaultValue`, `tone`, `size`, `showTicks`, `ariaValueText` |
 | `Toggle` | `size`, `showIcon`, `disabled`; `ToggleField` supports `controlPosition`, `label`, `description` |
@@ -231,14 +243,14 @@ Banhaten themes are controlled by attributes on the document element:
 
 Check for local drift without writing files:
 
-```bash
+```text
 npx banhaten diff
 npx banhaten diff button
 ```
 
 Refresh all detected installed components, or target a specific component:
 
-```bash
+```text
 npx banhaten update
 npx banhaten update button
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "banhaten",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Banhaten design system: an Arabic and English-first React design system with shadcn-style component installation.",
   "type": "module",
   "bin": {
@@ -55,5 +55,11 @@
   "bugs": {
     "url": "https://github.com/AhmadGalal85/Banhaten-design-system/issues"
   },
-  "homepage": "https://github.com/AhmadGalal85/Banhaten-design-system#readme"
+  "homepage": "https://github.com/AhmadGalal85/Banhaten-design-system#readme",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "devDependencies": {},
+  "author": ""
 }

package/registry/components/accordion.tsx

@@ -67,11 +67,15 @@ function AccordionItem({
 function AccordionTrigger({
   className,
   children,
+  dir,
   ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  const triggerDirection = dir ?? getTextDirection(children)
+
   return (
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
+        dir={triggerDirection}
         data-slot="accordion-trigger"
         className={cn(
           "flex flex-1 items-start justify-between gap-[var(--bh-space-3xl-16)] rounded-[var(--bh-radius-md-6)] py-[var(--bh-space-3xl-16)] text-start text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none transition-[background-color,color,box-shadow] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--bh-opacity-50)] [&[data-state=open]>svg]:rotate-180 [&_svg]:size-[var(--bh-space-3xl-16)]",
@@ -79,7 +83,7 @@ function AccordionTrigger({
         )}
         {...props}
       >
-        <span dir="auto" className="min-w-0">
+        <span dir="auto" className="min-w-0 flex-1 text-start">
           {children}
         </span>
         <ChevronDownIcon
@@ -110,6 +114,38 @@ function AccordionContent({
   )
 }
 
+function getTextDirection(children: React.ReactNode) {
+  const text = getNodeText(children)
+
+  for (const character of text) {
+    if (/[\u0590-\u08ff]/.test(character)) {
+      return "rtl"
+    }
+
+    if (/[A-Za-z]/.test(character)) {
+      return "ltr"
+    }
+  }
+
+  return undefined
+}
+
+function getNodeText(node: React.ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node)
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(getNodeText).join("")
+  }
+
+  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {
+    return getNodeText(node.props.children)
+  }
+
+  return ""
+}
+
 export {
   Accordion,
   AccordionItem,

package/registry/components/alert.tsx

@@ -1,5 +1,13 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import {
+  CircleAlertIcon,
+  CircleCheckIcon,
+  InfoIcon,
+  StarIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -226,49 +234,27 @@ function AlertActions({ actions }: { actions: AlertAction[] }) {
 
 function AlertStatusIcon({ status }: { status: AlertStatus }) {
   if (status === "success") {
-    return (
-      <svg aria-hidden="true" className="size-[var(--bh-alert-icon-size)] fill-current" viewBox="0 0 16.6667 16.6667">
-        <path d="M8.33333 16.6667C12.9357 16.6667 16.6667 12.9357 16.6667 8.33333C16.6667 3.73096 12.9357 0 8.33333 0C3.73096 0 0 3.73096 0 8.33333C0 12.9357 3.73096 16.6667 8.33333 16.6667ZM12.8809 6.21426L7.5 11.5952L3.99407 8.08925L5.17259 6.91075L7.5 9.23817L11.7024 5.03574L12.8809 6.21426Z" />
-      </svg>
-    )
+    return <CircleCheckIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
   }
 
   if (status === "warning") {
-    return (
-      <svg aria-hidden="true" className="size-[var(--bh-alert-icon-size)] fill-current" viewBox="0 0 17.544 15.4168">
-        <path d="M9.49356 0.416809L17.4321 14.1668C17.6623 14.5654 17.5257 15.0751 17.1271 15.3052C17.0005 15.3783 16.8567 15.4168 16.7105 15.4168H0.833333C0.3731 15.4168 0 15.0438 0 14.5835C0 14.4372 0.0385084 14.2935 0.11165 14.1668L8.05022 0.416809C8.28031 0.0182258 8.78997 -0.118333 9.18856 0.111784C9.31522 0.184926 9.42047 0.290126 9.49356 0.416809ZM7.93856 11.2502V12.9168H9.60522V11.2502H7.93856ZM7.93856 5.41681V9.5835H9.60522V5.41681H7.93856Z" />
-      </svg>
-    )
+    return <TriangleAlertIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
   }
 
   if (status === "info") {
-    return (
-      <svg aria-hidden="true" className="size-[var(--bh-alert-icon-size)] fill-current" viewBox="0 0 16.6667 16.6667">
-        <path d="M8.33333 16.6667C3.73096 16.6667 0 12.9357 0 8.33333C0 3.73096 3.73096 0 8.33333 0C12.9357 0 16.6667 3.73096 16.6667 8.33333C16.6667 12.9357 12.9357 16.6667 8.33333 16.6667ZM8.33333 6.25C9.02367 6.25 9.58333 5.69036 9.58333 5C9.58333 4.30964 9.02367 3.75 8.33333 3.75C7.643 3.75 7.08333 4.30964 7.08333 5C7.08333 5.69036 7.643 6.25 8.33333 6.25ZM10 10.8333H9.16667V7.08333H6.66667V8.75H7.5V10.8333H6.66667V12.5H10V10.8333Z" />
-      </svg>
-    )
+    return <InfoIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
   }
 
   if (status === "neutral") {
-    return (
-      <svg aria-hidden="true" className="size-[var(--bh-alert-icon-size)] fill-current" viewBox="0 0 15.851 15.0752">
-        <path d="M7.92545 12.0833L3.02726 15.0752L4.35901 9.49217L0 5.75819L5.72128 5.29952L7.92545 0L10.1297 5.29952L15.851 5.75819L11.492 9.49217L12.8237 15.0752L7.92545 12.0833Z" />
-      </svg>
-    )
+    return <StarIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
   }
 
-  return (
-    <svg aria-hidden="true" className="size-[var(--bh-alert-icon-size)] fill-current" viewBox="0 0 16.6667 16.6667">
-      <path d="M8.33333 16.6667C3.73096 16.6667 0 12.9357 0 8.33333C0 3.73096 3.73096 0 8.33333 0C12.9357 0 16.6667 3.73096 16.6667 8.33333C16.6667 12.9357 12.9357 16.6667 8.33333 16.6667ZM7.5 10.8333V12.5H9.16667V10.8333H7.5ZM7.5 4.16667V9.16667H9.16667V4.16667H7.5Z" />
-    </svg>
-  )
+  return <CircleAlertIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
 }
 
 function CloseIcon() {
   return (
-    <svg aria-hidden="true" className="size-[var(--bh-alert-icon-size)] fill-current" viewBox="0 0 16 16">
-      <path d="M8.00004 7.05723L11.2999 3.75739L12.2427 4.7002L8.94284 8.00003L12.2427 11.2998L11.2999 12.2427L8.00004 8.94283L4.70021 12.2427L3.75739 11.2998L7.05723 8.00003L3.75739 4.7002L4.70021 3.75739L8.00004 7.05723Z" />
-    </svg>
+    <XIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
   )
 }
 

package/registry/components/attribute.tsx

@@ -3,9 +3,9 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-type AttributeLayout = "inline" | "end" | "stacked" | "two-column"
+type AttributeLayout = "inline" | "stacked" | "two-column"
 type AttributeDensity = "compact" | "default" | "comfortable"
-type AttributeAlign = "start" | "end" | "stretch"
+type AttributeAlign = "start" | "stretch"
 type AttributeValueDir = "auto" | "ltr" | "rtl"
 
 type AttributeContextValue = {
@@ -70,13 +70,13 @@ const attributeListVariants = cva("grid min-w-0", {
   variants: {
     layout: {
       inline: "grid-cols-1",
-      end: "grid-cols-1",
       stacked: "grid-cols-1",
       "two-column":
         "grid-cols-1 gap-x-[var(--bh-space-6xl-32)] sm:grid-cols-2",
     },
     bordered: {
-      true: "overflow-hidden rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)]",
+      true:
+        "overflow-hidden rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)] [&>[data-slot='attribute-item']]:px-[var(--bh-space-3xl-16)] sm:[&>[data-slot='attribute-item']]:px-[var(--bh-space-4xl-20)]",
       false: "",
     },
   },
@@ -91,8 +91,6 @@ const attributeItemVariants = cva("min-w-0", {
     layout: {
       inline:
         "grid grid-cols-1 items-center gap-x-[var(--bh-space-xs-4)] sm:grid-cols-[var(--bh-attribute-label-width)_minmax(0,1fr)]",
-      end:
-        "grid grid-cols-1 items-center gap-x-[var(--bh-space-xs-4)] sm:grid-cols-[var(--bh-attribute-label-width)_minmax(0,1fr)]",
       stacked:
         "flex flex-col items-start justify-center gap-[var(--bh-space-xs-4)]",
       "two-column":
@@ -100,7 +98,7 @@ const attributeItemVariants = cva("min-w-0", {
     },
     density: {
       compact: "py-[var(--bh-space-md-8)]",
-      default: "py-[var(--bh-space-xl-12)] sm:py-[var(--bh-space-3xl-16)]",
+      default: "py-[var(--bh-space-3xl-16)]",
       comfortable: "py-[var(--bh-space-3xl-16)]",
     },
     divided: {
@@ -154,7 +152,6 @@ const attributeValueVariants = cva(
     variants: {
       align: {
         start: "justify-self-start text-start",
-        end: "justify-self-end justify-end text-end rtl:justify-self-start rtl:justify-start rtl:text-right",
         stretch: "w-full justify-self-stretch text-start",
       },
       truncate: {
@@ -323,8 +320,7 @@ const AttributeItem = React.forwardRef<HTMLDivElement, AttributeItemProps>(
     const selectedLayout = layout || context.layout
     const selectedDensity = density || context.density
     const selectedDivided = divided ?? context.dividers
-    const selectedAlign =
-      valueAlign || (selectedLayout === "end" ? "end" : "start")
+    const selectedAlign = valueAlign || "start"
 
     return (
       <div