banhaten 0.1.0 → 0.1.2

package/registry/components/spinner.tsx

@@ -2,16 +2,39 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+type SpinnerMotion = "dynamic" | "steady"
+
+type SpinnerProps = React.ComponentProps<"svg">
+
+type DynamicSpinnerProps = SpinnerProps
+
+type SpinnerBaseProps = SpinnerProps & {
+  motion: SpinnerMotion
+}
+
+function Spinner(props: SpinnerProps) {
+  return <SpinnerBase {...props} motion="steady" />
+}
+
+function DynamicSpinner(props: DynamicSpinnerProps) {
+  return <SpinnerBase {...props} motion="dynamic" />
+}
+
+function SpinnerBase({ className, motion, ...props }: SpinnerBaseProps) {
   return (
     <svg
       aria-hidden="true"
+      data-motion={motion}
       data-slot="spinner"
       viewBox="0 0 24 24"
-      className={cn("size-[var(--bh-spinner-size)] animate-spin text-current", className)}
+      className={cn(
+        "size-[var(--bh-spinner-size)] shrink-0 text-current",
+        className
+      )}
       {...props}
     >
       <circle
+        data-slot="spinner-track"
         cx="12"
         cy="12"
         r="10"
@@ -20,12 +43,73 @@ function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
         strokeWidth="4"
         opacity="var(--bh-opacity-25)"
       />
-      <path
-        fill="currentColor"
-        d="M22 12a10 10 0 0 1-10 10v-4a6 6 0 0 0 6-6z"
-      />
+      <circle
+        data-slot="spinner-arc"
+        cx="12"
+        cy="12"
+        r="10"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeLinecap="round"
+        pathLength="100"
+        strokeDasharray="30 70"
+      >
+        {motion === "dynamic" ? (
+          <DynamicSpinnerMotion />
+        ) : (
+          <SteadySpinnerMotion />
+        )}
+      </circle>
     </svg>
   )
 }
 
-export { Spinner }
+function DynamicSpinnerMotion() {
+  return (
+    <>
+      <animate
+        attributeName="stroke-dasharray"
+        calcMode="spline"
+        dur="6s"
+        keySplines="0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1"
+        keyTimes="0; 0.25; 0.5; 0.75; 1"
+        repeatCount="indefinite"
+        values="22 78; 38 62; 30 70; 42 58; 22 78"
+      />
+      <animate
+        attributeName="stroke-dashoffset"
+        calcMode="spline"
+        dur="6s"
+        keySplines="0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1"
+        keyTimes="0; 0.25; 0.5; 0.75; 1"
+        repeatCount="indefinite"
+        values="0; -16; -44; -72; -100"
+      />
+      <animateTransform
+        attributeName="transform"
+        dur="6s"
+        from="0 12 12"
+        repeatCount="indefinite"
+        to="1080 12 12"
+        type="rotate"
+      />
+    </>
+  )
+}
+
+function SteadySpinnerMotion() {
+  return (
+    <animateTransform
+      attributeName="transform"
+      dur="1.5s"
+      from="0 12 12"
+      repeatCount="indefinite"
+      to="360 12 12"
+      type="rotate"
+    />
+  )
+}
+
+export { DynamicSpinner, Spinner }
+export type { DynamicSpinnerProps, SpinnerProps }

package/registry/components/textarea.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { cva } from "class-variance-authority"
+import { CircleAlertIcon, InfoIcon, XIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -99,7 +100,7 @@ const textareaControl = cva(
     variants: {
       type: {
         default:
-          "min-h-[calc(var(--bh-textarea-min-height)_-_var(--bh-textarea-padding)_-_var(--bh-textarea-padding))]",
+          "min-h-[calc(var(--bh-textarea-min-height)_-_var(--bh-textarea-padding)_-_var(--bh-textarea-padding))] overflow-y-auto [scrollbar-gutter:stable]",
         tags:
           "h-[var(--bh-text-body-md-regular-line-height)] min-h-[var(--bh-text-body-md-regular-line-height)] overflow-hidden",
       },
@@ -533,53 +534,37 @@ function TextareaIcon({
         className
       )}
       >
-      <svg
-        className="size-[var(--bh-textarea-helper-icon-size)]"
-        fill="none"
-        focusable="false"
-        viewBox="0 0 13.3333 13.3333"
-      >
-        {type === "error" ? <ErrorIconPath /> : <InfoIconPath />}
-      </svg>
+      {type === "error" ? (
+        <CircleAlertIcon
+          aria-hidden="true"
+          className="size-[var(--bh-textarea-helper-icon-size)]"
+          focusable="false"
+          strokeWidth={2.25}
+        />
+      ) : (
+        <InfoIcon
+          aria-hidden="true"
+          className="size-[var(--bh-textarea-helper-icon-size)]"
+          focusable="false"
+          strokeWidth={2.25}
+        />
+      )}
     </span>
   )
 }
 
-function ErrorIconPath() {
-  return (
-    <path
-      d="M6.66667 13.3333C2.98477 13.3333 0 10.3485 0 6.66667C0 2.98477 2.98477 0 6.66667 0C10.3485 0 13.3333 2.98477 13.3333 6.66667C13.3333 10.3485 10.3485 13.3333 6.66667 13.3333ZM6 8.66667V10H7.33333V8.66667H6ZM6 3.33333V7.33333H7.33333V3.33333H6Z"
-      fill="currentColor"
-    />
-  )
-}
-
-function InfoIconPath() {
-  return (
-    <path
-      d="M6.66667 13.3333C2.98477 13.3333 0 10.3485 0 6.66667C0 2.98477 2.98477 0 6.66667 0C10.3485 0 13.3333 2.98477 13.3333 6.66667C13.3333 10.3485 10.3485 13.3333 6.66667 13.3333ZM6.66667 5C7.21893 5 7.66667 4.55229 7.66667 4C7.66667 3.44771 7.21893 3 6.66667 3C6.1144 3 5.66667 3.44771 5.66667 4C5.66667 4.55229 6.1144 5 6.66667 5ZM8 8.66667H7.33333V5.66667H5.33333V7H6V8.66667H5.33333V10H8V8.66667Z"
-      fill="currentColor"
-    />
-  )
-}
-
 function CloseIcon() {
   return (
     <span
       aria-hidden="true"
       className="flex size-[var(--bh-textarea-close-button-size)] items-center justify-center"
     >
-      <svg
+      <XIcon
+        aria-hidden="true"
         className="size-[var(--bh-textarea-close-icon-size)]"
-        fill="none"
         focusable="false"
-        viewBox="0 0 6.36398 6.36394"
-      >
-        <path
-          d="M3.18198 2.47489L5.65688 0L6.36398 0.707105L3.88908 3.18199L6.36398 5.65684L5.65688 6.36394L3.18198 3.88909L0.70711 6.36394L0 5.65684L2.47488 3.18199L0 0.707105L0.70711 0L3.18198 2.47489Z"
-          fill="currentColor"
-        />
-      </svg>
+        strokeWidth={2.5}
+      />
     </span>
   )
 }

package/registry/components/toggle.tsx

@@ -3,6 +3,7 @@
 import * as React from "react"
 import * as SwitchPrimitive from "@radix-ui/react-switch"
 import { cva, type VariantProps } from "class-variance-authority"
+import { CheckIcon, XIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -226,40 +227,23 @@ const ToggleField = React.forwardRef<HTMLDivElement, ToggleFieldProps>(
 
 function ToggleCheckIcon({ className }: { className?: string }) {
   return (
-    <svg
+    <CheckIcon
       aria-hidden="true"
       className={className}
-      fill="none"
       focusable="false"
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="M4 8.2 6.55 10.75 12 5.25"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.75"
-      />
-    </svg>
+      strokeWidth={2.5}
+    />
   )
 }
 
 function ToggleCloseIcon({ className }: { className?: string }) {
   return (
-    <svg
+    <XIcon
       aria-hidden="true"
       className={className}
-      fill="none"
       focusable="false"
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="m5 5 6 6m0-6-6 6"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeWidth="1.75"
-      />
-    </svg>
+      strokeWidth={2.5}
+    />
   )
 }
 

package/registry/components/tooltip.tsx

@@ -24,6 +24,8 @@ const defaultTooltipSupportText =
 // Radix sideOffset requires numbers; these mirror the tooltip spacing aliases.
 const TOOLTIP_POINTER_SIDE_OFFSET_PX = 7
 const TOOLTIP_POINTERLESS_SIDE_OFFSET_PX = 6
+// Radix collisionPadding requires a number; this mirrors --bh-space-md-8.
+const TOOLTIP_COLLISION_PADDING_PX = 8
 
 const tooltipContentVariants = cva(
   [
@@ -87,6 +89,7 @@ const TooltipContent = React.forwardRef<
     children,
     className,
     closeLabel,
+    collisionPadding = TOOLTIP_COLLISION_PADDING_PX,
     onCloseClick,
     pointerPosition = "top-left",
     shortcut,
@@ -127,6 +130,7 @@ const TooltipContent = React.forwardRef<
         ref={ref}
         side={side ?? placement.side}
         align={align ?? placement.align}
+        collisionPadding={collisionPadding}
         sideOffset={
           sideOffset ??
           (shouldShowPointer
@@ -386,13 +390,13 @@ const pointerPlacement: Record<Exclude<TooltipPointerPosition, "none">, string>
 
 const pointerFillShape = {
   top:
-    "left-0 top-0 border-x-[length:var(--bh-tooltip-pointer-half-width)] border-b-[length:var(--bh-tooltip-pointer-depth)] border-x-[color:transparent] border-b-[color:var(--bh-tooltip-bg)]",
+    "left-0 top-[var(--bh-space-xxxs-1)] border-x-[length:var(--bh-tooltip-pointer-half-width)] border-b-[length:var(--bh-tooltip-pointer-depth)] border-x-[color:transparent] border-b-[color:var(--bh-tooltip-bg)]",
   bottom:
-    "bottom-0 left-0 border-x-[length:var(--bh-tooltip-pointer-half-width)] border-t-[length:var(--bh-tooltip-pointer-depth)] border-x-[color:transparent] border-t-[color:var(--bh-tooltip-bg)]",
+    "bottom-[var(--bh-space-xxxs-1)] left-0 border-x-[length:var(--bh-tooltip-pointer-half-width)] border-t-[length:var(--bh-tooltip-pointer-depth)] border-x-[color:transparent] border-t-[color:var(--bh-tooltip-bg)]",
   right:
-    "left-0 top-0 border-y-[length:var(--bh-tooltip-pointer-half-width)] border-l-[length:var(--bh-tooltip-pointer-depth)] border-y-[color:transparent] border-l-[color:var(--bh-tooltip-bg)]",
+    "left-[calc(var(--bh-space-xxxs-1)*-1)] top-0 border-y-[length:var(--bh-tooltip-pointer-half-width)] border-l-[length:var(--bh-tooltip-pointer-depth)] border-y-[color:transparent] border-l-[color:var(--bh-tooltip-bg)]",
   left:
-    "right-0 top-0 border-y-[length:var(--bh-tooltip-pointer-half-width)] border-r-[length:var(--bh-tooltip-pointer-depth)] border-y-[color:transparent] border-r-[color:var(--bh-tooltip-bg)]",
+    "right-[calc(var(--bh-space-xxxs-1)*-1)] top-0 border-y-[length:var(--bh-tooltip-pointer-half-width)] border-r-[length:var(--bh-tooltip-pointer-depth)] border-y-[color:transparent] border-r-[color:var(--bh-tooltip-bg)]",
 } as const
 
 const pointerBorderShape = {

package/registry/examples/attribute-demo.tsx

@@ -38,9 +38,9 @@ export function AttributeDemo() {
       <AttributeCard>
         <AttributeHeader
           title="Order details"
-          description="End-aligned values, copy actions, files, and status chips."
+          description="Rich values with copy actions, files, and status chips."
         />
-        <AttributeList layout="end" dividers>
+        <AttributeList dividers>
           <AttributeItem label="Subscription">
             <Badge color="green" type="dot">
               Active

package/registry/examples/autocomplete-demo.tsx

@@ -0,0 +1,109 @@
+import { Autocomplete } from "@/components/ui/autocomplete"
+
+const peopleOptions = [
+  {
+    value: "ahmed",
+    label: "Ahmed Galal",
+    addonText: "Design system",
+    itemType: "avatar" as const,
+    keywords: ["foundations", "tokens"],
+  },
+  {
+    value: "nora",
+    label: "Nora Ali",
+    addonText: "Product",
+    itemType: "avatar" as const,
+    keywords: ["roadmap", "research"],
+  },
+  {
+    value: "layla",
+    label: "Layla Hassan",
+    addonText: "Engineering",
+    itemType: "avatar" as const,
+    keywords: ["frontend", "platform"],
+  },
+  {
+    value: "omar",
+    label: "Omar Saleh",
+    addonText: "Unavailable",
+    itemType: "avatar" as const,
+    disabled: true,
+  },
+]
+
+const projectOptions = [
+  { value: "tokens", label: "Token audit", addonText: "In review", itemType: "dot" as const },
+  { value: "inputs", label: "Input system", addonText: "Ready", itemType: "dot" as const },
+  { value: "tables", label: "Table promotion", addonText: "Planned", itemType: "dot" as const },
+  { value: "forms", label: "Form patterns", addonText: "Discovery", itemType: "dot" as const },
+]
+
+const rtlOptions = [
+  {
+    value: "ahmed",
+    label: "أحمد جلال",
+    addonText: "النظام",
+    itemType: "avatar" as const,
+  },
+  {
+    value: "nora",
+    label: "نورا علي",
+    addonText: "المنتج",
+    itemType: "avatar" as const,
+  },
+  {
+    value: "layla",
+    label: "ليلى حسن",
+    addonText: "الهندسة",
+    itemType: "avatar" as const,
+  },
+]
+
+export function AutocompleteDemo() {
+  return (
+    <div className="grid w-full gap-5 lg:grid-cols-2">
+      <div className="grid min-w-0 content-start gap-5">
+        <Autocomplete
+          className="mb-[var(--bh-space-13xl-160)]"
+          defaultOpen
+          defaultValue="ahmed"
+          helperText="Search by name, team, or keyword."
+          label="Owner"
+          options={peopleOptions}
+          placeholder="Search people"
+        />
+
+        <Autocomplete
+          defaultValue={["tokens", "inputs"]}
+          helperText="Selected values render with the Tag component."
+          label="Related work"
+          options={projectOptions}
+          placeholder="Add projects"
+          selectionMode="multiple"
+        />
+      </div>
+
+      <div className="grid min-w-0 content-start gap-5">
+        <Autocomplete
+          label="Project"
+          options={projectOptions}
+          placeholder="Search projects"
+          variant="soft"
+        />
+
+        <div dir="rtl" className="min-w-0">
+          <Autocomplete
+            className="pb-[var(--bh-space-13xl-160)] lg:pb-0"
+            defaultOpen
+            defaultValue="nora"
+            dir="rtl"
+            helperText="ابحث بالاسم أو الفريق."
+            label="المالك"
+            options={rtlOptions}
+            placeholder="ابحث عن شخص"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/registry/examples/avatar-demo.tsx

@@ -1,73 +1,128 @@
-import { PlusIcon } from "lucide-react"
-
 import {
   Avatar,
-  AvatarBadge,
+  AvatarAction,
   AvatarFallback,
   AvatarGroup,
   AvatarGroupCount,
+  AvatarIcon,
   AvatarImage,
+  AvatarStatus,
 } from "@/components/ui/avatar"
+import { PlusIcon } from "lucide-react"
 
 const avatarUrl = new URL("../assets/avatars/avatar-01.jpg", import.meta.url).href
 
+const statusColumns = [
+  "available",
+  "available",
+  "busy",
+  "away",
+  "blocked",
+] as const
+
+const secondaryStatusColumns = [
+  "offline",
+  "available",
+  "busy",
+  "away",
+  "blocked",
+] as const
+
 export function AvatarDemo() {
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-wrap items-center gap-4">
-        <Avatar>
+    <div className="flex flex-col gap-7">
+      <div className="grid w-fit grid-cols-5 gap-x-4 gap-y-4">
+        {statusColumns.map((status, index) => (
+          <Avatar key={`icon-${status}-${index}`} size="2xl">
+            <AvatarIcon />
+            {index === 0 ? <AvatarAction type="edit" size="medium" /> : null}
+            <AvatarStatus status={status} size="small" />
+          </Avatar>
+        ))}
+
+        {secondaryStatusColumns.map((status) => (
+          <Avatar key={`initials-${status}`} size="2xl">
+            <AvatarFallback>AG</AvatarFallback>
+            <AvatarStatus status={status} size="small" />
+          </Avatar>
+        ))}
+
+        {secondaryStatusColumns.map((status) => (
+          <Avatar key={`image-${status}`} size="2xl">
+            <AvatarImage src={avatarUrl} alt="Profile portrait" />
+            <AvatarFallback>AG</AvatarFallback>
+            <AvatarStatus status={status} size="small" />
+          </Avatar>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-5 ps-7">
+        <Avatar size="2xl">
           <AvatarImage src={avatarUrl} alt="Profile portrait" />
-          <AvatarFallback>CN</AvatarFallback>
+          <AvatarFallback>AG</AvatarFallback>
+          <AvatarAction type="edit" size="medium" />
         </Avatar>
-        <Avatar>
-          <AvatarFallback>ER</AvatarFallback>
+        <Avatar size="2xl">
+          <AvatarImage src={avatarUrl} alt="Profile portrait" />
+          <AvatarFallback>AG</AvatarFallback>
+          <AvatarAction type="remove" size="medium" />
         </Avatar>
-        <Avatar>
-          <AvatarImage src="/missing-avatar.png" alt="Missing image" />
-          <AvatarFallback>LR</AvatarFallback>
+        <Avatar size="2xl">
+          <AvatarImage src={avatarUrl} alt="Profile portrait" />
+          <AvatarFallback>AG</AvatarFallback>
+          <AvatarAction type="verified" size="medium" />
         </Avatar>
       </div>
 
-      <div className="flex flex-wrap items-center gap-4">
-        <Avatar>
-          <AvatarImage src={avatarUrl} alt="Profile portrait" />
-          <AvatarFallback>CN</AvatarFallback>
-          <AvatarBadge />
-        </Avatar>
-        <Avatar>
-          <AvatarFallback>PP</AvatarFallback>
-          <AvatarBadge className="size-5 bg-success">
-            <PlusIcon className="size-3" />
-          </AvatarBadge>
+      <div className="flex items-center gap-3">
+        <AvatarGroup>
+          {Array.from({ length: 7 }).map((_, index) => (
+            <Avatar key={index} size="md">
+              <AvatarImage src={avatarUrl} alt="" />
+              <AvatarFallback>AG</AvatarFallback>
+            </Avatar>
+          ))}
+          <AvatarGroupCount size="md">+10</AvatarGroupCount>
+        </AvatarGroup>
+        <Avatar
+          aria-label="Add member"
+          className="border border-dashed border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] text-[var(--bh-content-subtle)]"
+          size="md"
+        >
+          <PlusIcon aria-hidden="true" className="size-4" />
         </Avatar>
       </div>
 
-      <AvatarGroup>
-        <Avatar>
-          <AvatarFallback>CN</AvatarFallback>
+      <div className="flex items-center gap-3">
+        <Avatar size="xl">
+          <AvatarImage src={avatarUrl} alt="John Doe" />
+          <AvatarFallback>JD</AvatarFallback>
+          <AvatarStatus status="available" size="small" />
         </Avatar>
-        <Avatar>
-          <AvatarFallback>LR</AvatarFallback>
-        </Avatar>
-        <Avatar>
-          <AvatarFallback>ER</AvatarFallback>
-        </Avatar>
-        <AvatarGroupCount>+3</AvatarGroupCount>
-      </AvatarGroup>
+        <div className="min-w-0">
+          <p className="text-sm font-semibold text-[var(--bh-content-default)]">
+            John Doe
+          </p>
+          <p className="text-sm text-[var(--bh-content-subtle)]">
+            johndoe@example.com
+          </p>
+        </div>
+      </div>
 
-      <div dir="rtl">
-        <AvatarGroup>
-          <Avatar>
-            <AvatarFallback>ح</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>ن</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>م</AvatarFallback>
-          </Avatar>
-          <AvatarGroupCount>+٣</AvatarGroupCount>
-        </AvatarGroup>
+      <div className="flex items-center gap-3">
+        <Avatar size="md">
+          <AvatarImage src={avatarUrl} alt="John Doe" />
+          <AvatarFallback>JD</AvatarFallback>
+          <AvatarStatus status="available" size="tiny" />
+        </Avatar>
+        <div className="min-w-0">
+          <p className="text-sm font-semibold text-[var(--bh-content-default)]">
+            John Doe
+          </p>
+          <p className="text-xs text-[var(--bh-content-subtle)]">
+            johndoe@example.com
+          </p>
+        </div>
       </div>
     </div>
   )

package/registry/examples/badge-demo.tsx

@@ -2,6 +2,7 @@ import {
   ArrowUpRightIcon,
   BadgeCheckIcon,
   BookmarkIcon,
+  ChevronRightIcon,
 } from "lucide-react"
 
 import { Badge } from "@/components/ui/badge"
@@ -48,6 +49,21 @@ export function BadgeDemo() {
           <ArrowUpRightIcon data-icon="inline-end" data-rtl-flip="true" />
         </a>
       </Badge>
+      <Badge
+        asChild
+        color="blue"
+        splitAction
+        type="trailing-icon"
+      >
+        <a href="#badge">
+          In progress
+          <ChevronRightIcon
+            aria-hidden="true"
+            data-icon="inline-end"
+            data-rtl-flip="true"
+          />
+        </a>
+      </Badge>
     </div>
   )
 }

package/registry/examples/checkbox-demo.tsx

@@ -1,5 +1,7 @@
 import * as React from "react"
 
+import { UserIcon } from "lucide-react"
+
 import { Checkbox, CheckboxCard } from "@/components/ui/checkbox"
 
 export function CheckboxDemo() {
@@ -56,12 +58,5 @@ export function CheckboxDemo() {
 }
 
 function UserLineIcon() {
-  return (
-    <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
-      <path
-        fill="currentColor"
-        d="M4 22A8 8 0 0 1 20 22H18A6 6 0 0 0 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"
-      />
-    </svg>
-  )
+  return <UserIcon aria-hidden="true" focusable="false" strokeWidth={2.1} />
 }