banhaten 0.1.3 → 0.2.0

package/registry/components/toolbar.tsx

@@ -9,6 +9,12 @@ import {
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import {
+  KbdShortcut,
+  type ShortcutPlatform,
+} from "@/components/ui/kbd"
+
+type ControlDensity = "compact" | "default" | "comfortable"
 
 const toolbarVariants = cva(
   "flex w-full max-w-full min-w-0 gap-[var(--bh-space-3xl-16)] text-[var(--bh-content-default)]",
@@ -65,37 +71,44 @@ const toolbarSectionVariants = cva(
 )
 
 const toolbarButtonVariants = cva(
-  "group/toolbar-button inline-flex min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-control-default)] text-[length:var(--bh-text-button-font-size)] font-[var(--bh-text-button-font-weight)] leading-[var(--bh-text-button-line-height)] tracking-[var(--bh-text-button-letter-spacing)] outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none disabled:shadow-none aria-invalid:border aria-invalid:border-destructive aria-invalid:shadow-[var(--shadow-button-danger-focus)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[var(--bh-button-icon-size)] [&_svg[data-icon='inline-start']]:ms-[var(--bh-button-icon-offset)] [&_svg[data-icon='inline-end']]:me-[var(--bh-button-icon-offset)] rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
+  "group/toolbar-button inline-flex min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-control-default)] text-[length:var(--bh-text-button-font-size)] font-[var(--bh-text-button-font-weight)] leading-[var(--bh-text-button-line-height)] tracking-[var(--bh-text-button-letter-spacing)] outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none disabled:shadow-none aria-invalid:border-[length:var(--bh-border-width-default)] aria-invalid:border-[var(--bh-border-danger-strong)] aria-invalid:shadow-[var(--shadow-button-danger-focus)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[var(--bh-button-icon-size)] [&_svg[data-icon='inline-start']]:ms-[var(--bh-button-icon-offset)] [&_svg[data-icon='inline-end']]:me-[var(--bh-button-icon-offset)] rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-[var(--shadow-button-raised)] hover:bg-[var(--primary-hover)] active:bg-[var(--primary-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
-        soft: "border border-transparent bg-[var(--soft)] text-foreground shadow-[var(--shadow-button-soft)] hover:bg-[var(--soft-hover)] active:bg-[var(--soft-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:bg-[var(--bh-interactive-soft-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-interactive-brand-default)] text-[var(--bh-content-on-brand)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-interactive-brand-hover)] active:bg-[var(--bh-interactive-brand-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
+        soft: "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-default)] shadow-[var(--shadow-button-soft)] hover:bg-[var(--bh-interactive-soft-hover)] active:bg-[var(--bh-interactive-soft-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:bg-[var(--bh-interactive-soft-disabled)] disabled:text-[var(--bh-content-disabled)]",
         outline:
-          "border border-[var(--bh-border-default)] bg-[var(--outline)] text-foreground hover:bg-[var(--outline-hover)] active:bg-[var(--outline-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:border-[var(--bh-border-disabled)] disabled:bg-[var(--bh-interactive-outlined-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "border-[length:var(--bh-border-width-default)] border-[var(--bh-border-default)] bg-[var(--bh-interactive-outlined-default)] text-[var(--bh-content-default)] hover:bg-[var(--bh-interactive-outlined-hover)] active:bg-[var(--bh-interactive-outlined-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:border-[var(--bh-border-disabled)] disabled:bg-[var(--bh-interactive-outlined-disabled)] disabled:text-[var(--bh-content-disabled)]",
         ghost:
-          "border border-transparent bg-[var(--ghost)] text-foreground hover:bg-[var(--ghost-hover)] active:bg-[var(--ghost-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:bg-[var(--bh-interactive-ghost-disabled)] disabled:text-[var(--bh-content-disabled)]",
-        link: "border border-transparent bg-[var(--ghost)] text-[var(--bh-content-brand-default)] hover:bg-[var(--ghost-hover)] active:bg-[var(--ghost-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:bg-[var(--bh-interactive-ghost-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-default)] hover:bg-[var(--bh-interactive-ghost-hover)] active:bg-[var(--bh-interactive-ghost-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:bg-[var(--bh-interactive-ghost-disabled)] disabled:text-[var(--bh-content-disabled)]",
+        link: "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-brand-default)] hover:bg-[var(--bh-interactive-ghost-hover)] active:bg-[var(--bh-interactive-ghost-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:bg-[var(--bh-interactive-ghost-disabled)] disabled:text-[var(--bh-content-disabled)]",
       },
       size: {
+        xs: "h-[var(--bh-button-xs-height)] gap-[var(--bh-button-gap-xs)] px-[var(--bh-button-xs-padding-x)] py-[var(--bh-button-sm-padding-y)] has-[>svg]:px-[var(--bh-button-xs-padding-x)]",
         sm: "h-[var(--bh-button-sm-height)] gap-[var(--bh-button-gap)] px-[var(--bh-button-sm-padding-x)] py-[var(--bh-button-sm-padding-y)] has-[>svg]:px-[var(--bh-button-sm-padding-x)]",
         default: "h-[var(--bh-button-md-height)] gap-[var(--bh-button-gap)] px-[var(--bh-button-md-padding-x)] py-[var(--bh-button-sm-padding-y)] has-[>svg]:px-[var(--bh-button-md-padding-x)]",
+        "icon-xs": "size-[var(--bh-button-xs-height)] gap-[var(--bh-space-none)] p-[var(--bh-space-none)]",
         "icon-sm": "size-[var(--bh-button-sm-height)] gap-[var(--bh-space-none)] p-[var(--bh-space-none)]",
         icon: "size-[var(--bh-button-md-height)] gap-[var(--bh-space-none)] p-[var(--bh-space-none)]",
       },
     },
     defaultVariants: {
       variant: "soft",
-      size: "default",
+      size: "sm",
     },
   }
 )
 
 const toolbarSearchVariants = cva(
-  "flex h-[var(--bh-input-lg-height)] max-w-full min-w-0 items-center gap-[var(--bh-input-content-gap)] rounded-[var(--bh-input-radius)] bg-[var(--bh-interactive-input-default)] px-[var(--bh-input-lg-padding-x)] text-[var(--bh-content-default)] shadow-[var(--shadow-input)] transition-[background-color,box-shadow] focus-within:shadow-[var(--shadow-input-focus-ring)] data-[disabled=true]:pointer-events-none data-[disabled=true]:bg-[var(--bh-interactive-input-disabled)] data-[disabled=true]:text-[var(--bh-content-disabled)]",
+  "flex max-w-full min-w-0 items-center gap-[var(--bh-input-content-gap)] rounded-[var(--bh-input-radius)] bg-[var(--bh-interactive-input-default)] text-[var(--bh-content-default)] shadow-[var(--shadow-input)] transition-[background-color,box-shadow] focus-within:shadow-[var(--shadow-input-focus-ring)] data-[disabled=true]:pointer-events-none data-[disabled=true]:bg-[var(--bh-interactive-input-disabled)] data-[disabled=true]:text-[var(--bh-content-disabled)]",
   {
     variants: {
+      density: {
+        compact: "h-[var(--bh-input-md-height)] px-[var(--bh-input-md-padding-x)]",
+        default: "h-[var(--bh-input-lg-height)] px-[var(--bh-input-lg-padding-x)]",
+        comfortable: "h-[var(--bh-input-comfortable-height)] px-[var(--bh-input-comfortable-padding-x)]",
+      },
       width: {
         compact: "w-[calc(var(--bh-input-width)/2)]",
         default: "w-[var(--bh-input-width)]",
@@ -104,15 +117,21 @@ const toolbarSearchVariants = cva(
       },
     },
     defaultVariants: {
+      density: "default",
       width: "default",
     },
   }
 )
 
 const toolbarSelectVariants = cva(
-  "inline-flex h-[var(--bh-input-lg-height)] max-w-full min-w-0 items-center justify-between gap-[var(--bh-space-md-8)] rounded-[var(--bh-input-radius)] bg-[var(--bh-interactive-input-default)] px-[var(--bh-select-trigger-padding-x)] text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)] shadow-[var(--shadow-select-trigger)] outline-none transition-[background-color,box-shadow] hover:bg-[var(--bh-interactive-input-hover)] focus-visible:shadow-[var(--shadow-input-focus-ring)] disabled:pointer-events-none disabled:bg-[var(--bh-interactive-input-disabled)] disabled:text-[var(--bh-content-disabled)]",
+  "inline-flex max-w-full min-w-0 items-center justify-between gap-[var(--bh-space-md-8)] rounded-[var(--bh-input-radius)] bg-[var(--bh-interactive-input-default)] px-[var(--bh-select-trigger-padding-x)] text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)] shadow-[var(--shadow-select-trigger)] outline-none transition-[background-color,box-shadow] hover:bg-[var(--bh-bg-default-hover)] focus-visible:shadow-[var(--shadow-input-focus-ring)] disabled:pointer-events-none disabled:bg-[var(--bh-interactive-input-disabled)] disabled:text-[var(--bh-content-disabled)]",
   {
     variants: {
+      density: {
+        compact: "h-[var(--bh-input-md-height)]",
+        default: "h-[var(--bh-input-lg-height)]",
+        comfortable: "h-[var(--bh-input-comfortable-height)]",
+      },
       width: {
         compact: "w-[calc(var(--bh-select-width)/2)]",
         default: "w-[var(--bh-select-width)]",
@@ -121,6 +140,7 @@ const toolbarSelectVariants = cva(
       },
     },
     defaultVariants: {
+      density: "default",
       width: "compact",
     },
   }
@@ -201,20 +221,39 @@ const ToolbarSpacer = React.forwardRef<HTMLDivElement, ToolbarSpacerProps>(
 type ToolbarButtonProps = React.ComponentProps<"button"> &
   VariantProps<typeof toolbarButtonVariants> & {
     asChild?: boolean
+    density?: ControlDensity
   }
 
+type ToolbarButtonSize = NonNullable<
+  VariantProps<typeof toolbarButtonVariants>["size"]
+>
+
 const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
   function ToolbarButton(
-    { className, variant, size, asChild = false, children, type = "button", ...props },
+    {
+      asChild = false,
+      children,
+      className,
+      density,
+      size,
+      type = "button",
+      variant,
+      ...props
+    },
     ref
   ) {
     const Comp = asChild ? Slot : "button"
+    const resolvedSize = resolveToolbarButtonSize(density, size)
 
     return (
       <Comp
+        data-density={density}
+        data-size={resolvedSize}
         data-slot="toolbar-button"
         ref={ref}
-        className={cn(toolbarButtonVariants({ variant, size, className }))}
+        className={cn(
+          toolbarButtonVariants({ variant, size: resolvedSize, className })
+        )}
         {...(!asChild ? { type } : {})}
         {...props}
       >
@@ -271,7 +310,7 @@ const ToolbarMoreButton = React.forwardRef<
   HTMLButtonElement,
   ToolbarMoreButtonProps
 >(function ToolbarMoreButton(
-  { label = "More actions", size = "icon", ...props },
+  { label = "More actions", size = "icon-sm", ...props },
   ref
 ) {
   return (
@@ -289,6 +328,8 @@ type ToolbarSearchProps = Omit<
     className?: string
     inputClassName?: string
     icon?: React.ReactNode
+    shortcutKeys?: readonly string[]
+    shortcutPlatform?: ShortcutPlatform
   }
 
 const ToolbarSearch = React.forwardRef<HTMLInputElement, ToolbarSearchProps>(
@@ -299,7 +340,10 @@ const ToolbarSearch = React.forwardRef<HTMLInputElement, ToolbarSearchProps>(
       icon,
       inputClassName,
       placeholder = "Search...",
+      shortcutKeys,
+      shortcutPlatform,
       type = "search",
+      density,
       width,
       ...props
     },
@@ -308,8 +352,9 @@ const ToolbarSearch = React.forwardRef<HTMLInputElement, ToolbarSearchProps>(
     return (
       <div
         data-disabled={disabled ? "true" : undefined}
+        data-density={density ?? "default"}
         data-slot="toolbar-search"
-        className={cn(toolbarSearchVariants({ width, className }))}
+        className={cn(toolbarSearchVariants({ density, width, className }))}
       >
         <span
           aria-hidden="true"
@@ -329,6 +374,13 @@ const ToolbarSearch = React.forwardRef<HTMLInputElement, ToolbarSearchProps>(
           type={type}
           {...props}
         />
+        {shortcutKeys?.length ? (
+          <KbdShortcut
+            disabled={disabled}
+            keys={shortcutKeys}
+            platform={shortcutPlatform}
+          />
+        ) : null}
       </div>
     )
   }
@@ -349,6 +401,7 @@ const ToolbarSelect = React.forwardRef<HTMLButtonElement, ToolbarSelectProps>(
       placeholder = "Select",
       type = "button",
       value,
+      density,
       width,
       ...props
     },
@@ -357,10 +410,11 @@ const ToolbarSelect = React.forwardRef<HTMLButtonElement, ToolbarSelectProps>(
     return (
       <button
         aria-haspopup="listbox"
+        data-density={density ?? "default"}
         data-slot="toolbar-select"
         ref={ref}
         type={type}
-        className={cn(toolbarSelectVariants({ width, className }))}
+        className={cn(toolbarSelectVariants({ density, width, className }))}
         {...props}
       >
         <span
@@ -415,16 +469,22 @@ const ToolbarBadge = React.forwardRef<HTMLSpanElement, ToolbarBadgeProps>(
   }
 )
 
-type ToolbarTextProps = React.ComponentProps<"span">
+type ToolbarTextProps = React.ComponentProps<"span"> & {
+  density?: ControlDensity
+}
 
 const ToolbarText = React.forwardRef<HTMLSpanElement, ToolbarTextProps>(
-  function ToolbarText({ className, ...props }, ref) {
+  function ToolbarText({ className, density = "default", ...props }, ref) {
     return (
       <span
         data-slot="toolbar-text"
+        data-density={density}
         ref={ref}
         className={cn(
-          "inline-flex h-[var(--bh-input-lg-height)] min-w-0 items-center text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+          "inline-flex min-w-0 items-center text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+          density === "compact" && "h-[var(--bh-input-md-height)]",
+          density === "default" && "h-[var(--bh-input-lg-height)]",
+          density === "comfortable" && "h-[var(--bh-input-comfortable-height)]",
           className
         )}
         {...props}
@@ -433,6 +493,17 @@ const ToolbarText = React.forwardRef<HTMLSpanElement, ToolbarTextProps>(
   }
 )
 
+function resolveToolbarButtonSize(
+  density: ControlDensity | undefined,
+  size: ToolbarButtonSize | null | undefined
+): ToolbarButtonSize | null | undefined {
+  if (!density) return size
+  const iconOnly = size?.startsWith("icon") ?? false
+  if (density === "compact") return iconOnly ? "icon-xs" : "xs"
+  if (density === "default") return iconOnly ? "icon-sm" : "sm"
+  return iconOnly ? "icon" : "default"
+}
+
 export {
   Toolbar,
   ToolbarBadge,
@@ -453,6 +524,7 @@ export {
   toolbarVariants,
 }
 export type {
+  ControlDensity,
   ToolbarBadgeProps,
   ToolbarButtonProps,
   ToolbarFilterButtonProps,

package/registry/components/tooltip.tsx

@@ -280,7 +280,7 @@ function TooltipCloseButton({
       <XIcon
         aria-hidden="true"
         className="size-[var(--bh-tooltip-close-icon-size)]"
-        strokeWidth={2}
+        strokeWidth="var(--bh-icon-stroke-200)"
       />
     </button>
   )

package/registry/examples/alert-demo.tsx

@@ -2,13 +2,33 @@ import { Alert } from "@/components/ui/alert"
 
 export function AlertDemo() {
   return (
-    <div className="grid gap-4">
-      <Alert status="danger" />
-      <Alert status="success" />
-      <Alert isExpandable status="warning" />
+    <div className="grid gap-[var(--bh-space-3xl-16)]">
+      <Alert status="danger" title="Payment failed" />
+      <Alert status="success" title="Changes saved" />
+      <Alert
+        actions={[
+          { label: "Review details", onClick: noop },
+          { label: "Dismiss", onClick: noop },
+        ]}
+        description="Update the payment method before the next billing attempt."
+        isExpandable
+        status="warning"
+        title="Payment method expires soon"
+      />
       <div dir="rtl">
-        <Alert dir="rtl" isExpandable status="info" />
+        <Alert
+          actions={[
+            { label: "عرض التفاصيل", onClick: noop },
+            { label: "متابعة", onClick: noop },
+          ]}
+          description="يمكنك مراجعة التفاصيل أو المتابعة من لوحة التحكم."
+          isExpandable
+          status="info"
+          title="تم تحديث حسابك"
+        />
       </div>
     </div>
   )
 }
+
+function noop() {}

package/registry/examples/attribute-demo.tsx

@@ -11,7 +11,7 @@ import { Button } from "@/components/ui/button"
 
 export function AttributeDemo() {
   return (
-    <div className="grid max-w-5xl gap-4 lg:grid-cols-2">
+    <div className="grid max-w-5xl gap-[var(--bh-space-3xl-16)] lg:grid-cols-2">
       <AttributeCard>
         <AttributeHeader
           title="Company profile"

package/registry/examples/autocomplete-demo.tsx

@@ -61,8 +61,8 @@ const rtlOptions = [
 
 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">
+    <div className="grid w-full gap-[var(--bh-space-4xl-20)] lg:grid-cols-2">
+      <div className="grid min-w-0 content-start gap-[var(--bh-space-4xl-20)]">
         <Autocomplete
           className="mb-[var(--bh-space-13xl-160)]"
           defaultOpen
@@ -83,7 +83,7 @@ export function AutocompleteDemo() {
         />
       </div>
 
-      <div className="grid min-w-0 content-start gap-5">
+      <div className="grid min-w-0 content-start gap-[var(--bh-space-4xl-20)]">
         <Autocomplete
           label="Project"
           options={projectOptions}

package/registry/examples/avatar-demo.tsx

@@ -30,8 +30,8 @@ const secondaryStatusColumns = [
 
 export function AvatarDemo() {
   return (
-    <div className="flex flex-col gap-7">
-      <div className="grid w-fit grid-cols-5 gap-x-4 gap-y-4">
+    <div className="flex flex-col gap-[calc(var(--bh-space-5xl-24)_+_var(--bh-space-xs-4))]">
+      <div className="grid w-fit grid-cols-5 gap-x-[var(--bh-space-3xl-16)] gap-y-[var(--bh-space-3xl-16)]">
         {statusColumns.map((status, index) => (
           <Avatar key={`icon-${status}-${index}`} size="2xl">
             <AvatarIcon />
@@ -56,7 +56,7 @@ export function AvatarDemo() {
         ))}
       </div>
 
-      <div className="flex flex-wrap items-center gap-5 ps-7">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-4xl-20)] ps-[calc(var(--bh-space-5xl-24)_+_var(--bh-space-xs-4))]">
         <Avatar size="2xl">
           <AvatarImage src={avatarUrl} alt="Profile portrait" />
           <AvatarFallback>AG</AvatarFallback>
@@ -74,7 +74,7 @@ export function AvatarDemo() {
         </Avatar>
       </div>
 
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-[var(--bh-space-xl-12)]">
         <AvatarGroup>
           {Array.from({ length: 7 }).map((_, index) => (
             <Avatar key={index} size="md">
@@ -89,11 +89,11 @@ export function AvatarDemo() {
           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" />
+          <PlusIcon aria-hidden="true" className="size-[var(--bh-space-3xl-16)]" />
         </Avatar>
       </div>
 
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-[var(--bh-space-xl-12)]">
         <Avatar size="xl">
           <AvatarImage src={avatarUrl} alt="John Doe" />
           <AvatarFallback>JD</AvatarFallback>
@@ -109,7 +109,7 @@ export function AvatarDemo() {
         </div>
       </div>
 
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-[var(--bh-space-xl-12)]">
         <Avatar size="md">
           <AvatarImage src={avatarUrl} alt="John Doe" />
           <AvatarFallback>JD</AvatarFallback>

package/registry/examples/badge-demo.tsx

@@ -10,7 +10,7 @@ import { Spinner } from "@/components/ui/spinner"
 
 export function BadgeDemo() {
   return (
-    <div className="flex flex-wrap items-center gap-2">
+    <div className="flex flex-wrap items-center gap-[var(--bh-space-md-8)]">
       <Badge>Badge</Badge>
       <Badge badgeStyle="outline">Outline</Badge>
       <Badge badgeStyle="solid" color="blue">

package/registry/examples/button-demo.tsx

@@ -5,8 +5,8 @@ import { Spinner } from "@/components/ui/spinner"
 
 export function ButtonDemo() {
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-wrap items-center gap-3">
+    <div className="flex flex-col gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         <Button>Primary</Button>
         <Button variant="secondary">Secondary</Button>
         <Button variant="soft">Soft</Button>
@@ -18,7 +18,7 @@ export function ButtonDemo() {
         <Button variant="white">White</Button>
       </div>
 
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         <Button size="xs">XS</Button>
         <Button size="sm">Small</Button>
         <Button>Medium</Button>
@@ -26,7 +26,7 @@ export function ButtonDemo() {
         <Button size="xl">XL</Button>
       </div>
 
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         <Button size="icon-xs" aria-label="Add item">
           <PlusIcon />
         </Button>
@@ -44,7 +44,7 @@ export function ButtonDemo() {
         </Button>
       </div>
 
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         <Button>
           <PlusIcon data-icon="inline-start" />
           New item
@@ -63,7 +63,7 @@ export function ButtonDemo() {
         </Button>
       </div>
 
-      <div dir="rtl" className="flex flex-wrap items-center gap-3">
+      <div dir="rtl" className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         <Button>إرسال</Button>
         <Button variant="outline">
           متابعة

package/registry/examples/button-group-demo.tsx

@@ -1,10 +1,15 @@
 import { PlusIcon } from "lucide-react"
 
-import { ButtonGroup, ButtonGroupItem } from "@/components/ui/button-group"
+import {
+  ButtonGroup,
+  ButtonGroupItem,
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/components/ui/button-group"
 
 export function ButtonGroupDemo() {
   return (
-    <div className="grid gap-6">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
       <ButtonGroup aria-label="Button group">
         {Array.from({ length: 7 }).map((_, index) => (
           <ButtonGroupItem
@@ -37,6 +42,22 @@ export function ButtonGroupDemo() {
           ))}
         </ButtonGroup>
       </div>
+
+      <ToggleGroup aria-label="Text alignment" defaultValue="start">
+        <ToggleGroupItem value="start">Start</ToggleGroupItem>
+        <ToggleGroupItem value="center">Center</ToggleGroupItem>
+        <ToggleGroupItem value="end">End</ToggleGroupItem>
+      </ToggleGroup>
+
+      <ToggleGroup
+        aria-label="Text styles"
+        defaultValue={["bold"]}
+        type="multiple"
+      >
+        <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+        <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+        <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
+      </ToggleGroup>
     </div>
   )
 }

package/registry/examples/card-demo.tsx

@@ -4,28 +4,65 @@ const cardImage = new URL("../assets/images/art-01.jpg", import.meta.url).href
 
 const rtlCardCopy = {
   action: "\u0627\u0646\u0642\u0631 \u0647\u0646\u0627",
+  description:
+    "\u0627\u0646\u0637\u0644\u0642 \u0641\u064a \u0631\u062d\u0644\u0629 \u0639\u0628\u0631 \u0627\u0644\u0632\u0645\u0646 \u0644\u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0623\u0633\u0631\u0627\u0631 \u0627\u0644\u0623\u0647\u0631\u0627\u0645\u0627\u062a \u0627\u0644\u0643\u0628\u0631\u0649.",
   subtitle:
     "\u0639\u0646\u0648\u0627\u0646 \u0641\u0631\u0639\u064a \u0644\u0644\u0628\u0637\u0627\u0642\u0629",
   title:
     "\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0628\u0637\u0627\u0642\u0629",
 }
 
+const ltrCardCopy = {
+  action: "Explore",
+  description:
+    "Journey through time as we explore the mysteries of the Great Pyramids and the Sphinx.",
+  subtitle: "Ancient Egypt",
+  title: "The Great Pyramids",
+}
+
 export function CardDemo() {
   return (
-    <div className="grid gap-6">
-      <div className="flex flex-wrap items-start gap-4">
-        <Card imageSrc={cardImage} />
-        <Card imageSrc={cardImage} type="full-image" />
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-3xl-16)]">
+        <Card
+          description={ltrCardCopy.description}
+          imageSrc={cardImage}
+          primaryActionLabel={ltrCardCopy.action}
+          subtitle={ltrCardCopy.subtitle}
+          title={ltrCardCopy.title}
+        />
+        <Card
+          imageSrc={cardImage}
+          subtitle={ltrCardCopy.subtitle}
+          title={ltrCardCopy.title}
+          type="full-image"
+        />
       </div>
 
-      <div className="grid gap-4">
-        <Card imageSrc={cardImage} orientation="horizontal" />
-        <Card imageSrc={cardImage} orientation="horizontal" type="trailing-image" />
+      <div className="grid gap-[var(--bh-space-3xl-16)]">
+        <Card
+          description={ltrCardCopy.description}
+          imageSrc={cardImage}
+          orientation="horizontal"
+          primaryActionLabel={ltrCardCopy.action}
+          subtitle={ltrCardCopy.subtitle}
+          title={ltrCardCopy.title}
+        />
+        <Card
+          description={ltrCardCopy.description}
+          imageSrc={cardImage}
+          orientation="horizontal"
+          primaryActionLabel={ltrCardCopy.action}
+          subtitle={ltrCardCopy.subtitle}
+          title={ltrCardCopy.title}
+          type="trailing-image"
+        />
       </div>
 
-      <div dir="rtl" className="flex flex-wrap items-start gap-4">
+      <div dir="rtl" className="flex flex-wrap items-start gap-[var(--bh-space-3xl-16)]">
         <Card
           dir="rtl"
+          description={rtlCardCopy.description}
           primaryActionLabel={rtlCardCopy.action}
           secondaryActionLabel={rtlCardCopy.action}
           imageSrc={cardImage}
@@ -35,6 +72,7 @@ export function CardDemo() {
         <Card
           breakpoint="mobile"
           dir="rtl"
+          description={rtlCardCopy.description}
           orientation="horizontal"
           primaryActionLabel={rtlCardCopy.action}
           secondaryActionLabel={rtlCardCopy.action}

package/registry/examples/carousel-demo.tsx

@@ -1,4 +1,5 @@
 import {
+  arabicCarouselMessages,
   Carousel,
   CarouselContent,
   CarouselItem,
@@ -8,7 +9,24 @@ import {
 
 export function CarouselDemo() {
   return (
-    <Carousel className="w-full max-w-sm">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <Carousel className="w-full max-w-sm">
+        <CarouselSlides />
+      </Carousel>
+      <Carousel
+        className="w-full max-w-sm"
+        dir="rtl"
+        messages={arabicCarouselMessages}
+      >
+        <CarouselSlides />
+      </Carousel>
+    </div>
+  )
+}
+
+function CarouselSlides() {
+  return (
+    <>
       <CarouselContent>
         {[1, 2, 3].map((item) => (
           <CarouselItem key={item}>
@@ -20,6 +38,6 @@ export function CarouselDemo() {
       </CarouselContent>
       <CarouselPrevious />
       <CarouselNext />
-    </Carousel>
+    </>
   )
 }

package/registry/examples/chart-demo.tsx

@@ -24,7 +24,7 @@ export function ChartDemo() {
           dataKey="revenue"
           type="monotone"
           stroke="var(--color-revenue)"
-          strokeWidth={2}
+          strokeWidth="var(--bh-icon-stroke-200)"
           dot={false}
         />
       </LineChart>