banhaten 0.1.2 → 0.2.0

package/registry/components/toast.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import {
+  Toaster as SonnerToaster,
+  toast as sonnerToast,
+  type ExternalToast,
+  type ToasterProps as SonnerToasterProps,
+} from "sonner"
+
+import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
+
+type ToastIntent = "default" | "success" | "danger" | "warning" | "info"
+type ToastSide = "start" | "end"
+type ToastOptions = ExternalToast & {
+  intent?: ToastIntent
+}
+type ToasterProps = Omit<SonnerToasterProps, "position"> & {
+  dir?: "ltr" | "rtl"
+  position?: SonnerToasterProps["position"]
+  side?: ToastSide
+}
+
+const intentClassNames: Record<ToastIntent, string> = {
+  danger:
+    "[--bh-toast-accent:var(--bh-content-danger-default)] [--bh-toast-accent-bg:var(--bh-bg-danger-subtle)]",
+  default:
+    "[--bh-toast-accent:var(--bh-content-brand-default)] [--bh-toast-accent-bg:var(--bh-bg-brand-subtle)]",
+  info:
+    "[--bh-toast-accent:var(--bh-content-brand-default)] [--bh-toast-accent-bg:var(--bh-bg-info-subtle)]",
+  success:
+    "[--bh-toast-accent:var(--bh-content-success-default)] [--bh-toast-accent-bg:var(--bh-bg-success-subtle)]",
+  warning:
+    "[--bh-toast-accent:var(--bh-content-warning-default)] [--bh-toast-accent-bg:var(--bh-bg-warning-subtle)]",
+}
+
+const toastClassName = [
+  "border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-component-default)]",
+  "rounded-[var(--bh-radius-xl-10)] font-[var(--bh-font-family)]",
+  "[--normal-bg:var(--bh-bg-raised)] [--normal-border:var(--bh-border-subtle)] [--normal-text:var(--bh-content-default)]",
+  "[--success-bg:var(--bh-bg-raised)] [--success-border:var(--bh-border-success-subtle)] [--success-text:var(--bh-content-default)]",
+  "[--error-bg:var(--bh-bg-raised)] [--error-border:var(--bh-border-danger-subtle)] [--error-text:var(--bh-content-default)]",
+  "[--warning-bg:var(--bh-bg-raised)] [--warning-border:var(--bh-border-warning-subtle)] [--warning-text:var(--bh-content-default)]",
+  "[--info-bg:var(--bh-bg-raised)] [--info-border:var(--bh-border-info-subtle)] [--info-text:var(--bh-content-default)]",
+].join(" ")
+
+function Toaster({
+  className,
+  closeButton = true,
+  dir,
+  position,
+  richColors = false,
+  side = "end",
+  toastOptions,
+  ...props
+}: ToasterProps) {
+  const directionBoundaryRef = React.useRef<HTMLSpanElement | null>(null)
+  const resolvedDirection = useResolvedDirection(dir, directionBoundaryRef)
+  const resolvedPosition = position ?? getToastPosition(resolvedDirection, side)
+  const mergedToastOptions: ToasterProps["toastOptions"] = {
+    ...toastOptions,
+    classNames: {
+      ...toastOptions?.classNames,
+      toast: cn(toastClassName, toastOptions?.classNames?.toast),
+      title: cn(
+        "text-[length:var(--bh-text-body-sm-semibold-font-size)] font-[var(--bh-text-body-sm-semibold-font-weight)] leading-[var(--bh-text-body-sm-semibold-line-height)] tracking-[var(--bh-text-body-sm-semibold-letter-spacing)]",
+        toastOptions?.classNames?.title
+      ),
+      description: cn(
+        "text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+        toastOptions?.classNames?.description
+      ),
+      actionButton: cn(
+        "rounded-[var(--bh-control-default)] bg-[var(--bh-interactive-brand-default)] px-[var(--bh-space-lg-10)] py-[var(--bh-space-xs-4)] text-[var(--bh-content-on-brand)]",
+        toastOptions?.classNames?.actionButton
+      ),
+      cancelButton: cn(
+        "rounded-[var(--bh-control-default)] bg-[var(--bh-bg-neutral-soft)] px-[var(--bh-space-lg-10)] py-[var(--bh-space-xs-4)] text-[var(--bh-content-default)]",
+        toastOptions?.classNames?.cancelButton
+      ),
+    },
+  }
+
+  return (
+    <span className="contents" data-slot="toaster-direction-boundary" ref={directionBoundaryRef}>
+      <SonnerToaster
+        className={cn("toaster group", className)}
+        closeButton={closeButton}
+        dir={resolvedDirection}
+        position={resolvedPosition}
+        richColors={richColors}
+        toastOptions={mergedToastOptions}
+        {...props}
+      />
+    </span>
+  )
+}
+
+function showToast(message: React.ReactNode, options: ToastOptions = {}) {
+  const { intent = "default", className, ...rest } = options
+  return sonnerToast(message, {
+    className: cn(intentClassNames[intent], className),
+    ...rest,
+  })
+}
+
+const toast = Object.assign(showToast, {
+  danger: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "danger" }),
+  dismiss: sonnerToast.dismiss,
+  error: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "danger" }),
+  info: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "info" }),
+  loading: sonnerToast.loading,
+  promise: sonnerToast.promise,
+  success: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "success" }),
+  warning: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "warning" }),
+})
+
+function getToastPosition(
+  dir: ToasterProps["dir"],
+  side: ToastSide
+): SonnerToasterProps["position"] {
+  if (side === "start") {
+    return dir === "rtl" ? "top-right" : "top-left"
+  }
+
+  return dir === "rtl" ? "top-left" : "top-right"
+}
+
+export { Toaster, toast }
+export type { ToastIntent, ToastOptions, ToasterProps }

package/registry/components/toggle.tsx

@@ -231,7 +231,7 @@ function ToggleCheckIcon({ className }: { className?: string }) {
       aria-hidden="true"
       className={className}
       focusable="false"
-      strokeWidth={2.5}
+      strokeWidth="var(--bh-icon-stroke-250)"
     />
   )
 }
@@ -242,7 +242,7 @@ function ToggleCloseIcon({ className }: { className?: string }) {
       aria-hidden="true"
       className={className}
       focusable="false"
-      strokeWidth={2.5}
+      strokeWidth="var(--bh-icon-stroke-250)"
     />
   )
 }

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/alert-dialog-demo.tsx

@@ -0,0 +1,42 @@
+import { Button } from "@/components/ui/button"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+
+export function AlertDialogDemo() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button size="sm" variant="danger">
+          Delete project
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogIcon intent="danger" />
+          <AlertDialogTitle>Delete project?</AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogBody>
+          <AlertDialogDescription>
+            This action cannot be undone. All environments, deployments, and
+            saved settings will be permanently removed.
+          </AlertDialogDescription>
+        </AlertDialogBody>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Delete project</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/registry/examples/aspect-ratio-demo.tsx

@@ -0,0 +1,11 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio"
+
+export function AspectRatioDemo() {
+  return (
+    <AspectRatio ratio={16 / 9} className="max-w-xl">
+      <div className="flex size-full items-center justify-center bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]">
+        16:9
+      </div>
+    </AspectRatio>
+  )
+}

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">