banhaten 0.1.2 → 0.2.0

package/registry/components/button-group.tsx

@@ -6,17 +6,31 @@ import { cn } from "@/lib/utils"
 
 type ButtonGroupSize = "md" | "sm" | "xs"
 type ButtonGroupMode = "default" | "iconOnly"
+type ButtonGroupItemWidth = "fixed" | "content"
+type ControlDensity = "compact" | "default" | "comfortable"
+type ToggleGroupType = "single" | "multiple"
+type ToggleGroupValue = string | string[]
 
 type ButtonGroupContextValue = {
+  itemWidth: ButtonGroupItemWidth
   size: ButtonGroupSize
   mode: ButtonGroupMode
 }
 
 const buttonGroupContext = React.createContext<ButtonGroupContextValue>({
+  itemWidth: "fixed",
   size: "md",
   mode: "default",
 })
 
+type ToggleGroupContextValue = {
+  disabled: boolean
+  isPressed: (value: string) => boolean
+  toggle: (value: string) => void
+}
+
+const toggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null)
+
 const buttonGroupVariants = cva(
   "inline-flex w-fit items-center overflow-hidden rounded-[var(--bh-button-group-radius)] bg-[var(--bh-button-group-bg)] text-[var(--bh-button-group-content)] shadow-[var(--shadow-button-group)] [--shadow-button-group:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-button-group-border),var(--shadow-component-default)]",
   {
@@ -46,26 +60,51 @@ const buttonGroupItemVariants = cva(
         default: "",
         iconOnly: "",
       },
+      itemWidth: {
+        fixed: "",
+        content: "",
+      },
     },
     compoundVariants: [
       {
         size: "md",
         mode: "default",
+        itemWidth: "fixed",
         class:
           "w-[var(--bh-button-group-md-item-width)] px-[var(--bh-button-group-md-padding-x)] rtl:w-[var(--bh-button-group-md-item-rtl-width)]",
       },
       {
         size: "sm",
         mode: "default",
+        itemWidth: "fixed",
         class:
           "w-[var(--bh-button-group-sm-item-width)] px-[var(--bh-button-group-sm-padding-x)] rtl:w-[var(--bh-button-group-sm-item-rtl-width)]",
       },
       {
         size: "xs",
         mode: "default",
+        itemWidth: "fixed",
         class:
           "w-[var(--bh-button-group-xs-item-width)] px-[var(--bh-button-group-xs-padding-x)] rtl:w-[var(--bh-button-group-xs-item-rtl-width)]",
       },
+      {
+        size: "md",
+        mode: "default",
+        itemWidth: "content",
+        class: "w-auto px-[var(--bh-button-group-md-padding-x)]",
+      },
+      {
+        size: "sm",
+        mode: "default",
+        itemWidth: "content",
+        class: "w-auto px-[var(--bh-button-group-sm-padding-x)]",
+      },
+      {
+        size: "xs",
+        mode: "default",
+        itemWidth: "content",
+        class: "w-auto px-[var(--bh-button-group-xs-padding-x)]",
+      },
       {
         size: "md",
         mode: "iconOnly",
@@ -88,35 +127,97 @@ const buttonGroupItemVariants = cva(
     defaultVariants: {
       size: "md",
       mode: "default",
+      itemWidth: "fixed",
+    },
+  }
+)
+
+const buttonGroupLabelVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center whitespace-nowrap bg-[var(--bh-button-group-item-bg)] 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)] text-[var(--bh-button-group-content)] before:absolute before:inset-y-0 before:start-0 before:w-[var(--bh-border-width-default)] before:bg-[var(--bh-button-group-divider)] before:content-[''] first:before:hidden",
+  {
+    variants: {
+      size: {
+        md: "h-[var(--bh-button-group-md-height)]",
+        sm: "h-[var(--bh-button-group-sm-height)]",
+        xs: "h-[var(--bh-button-group-xs-height)]",
+      },
+      itemWidth: {
+        fixed: "",
+        content: "",
+      },
+    },
+    compoundVariants: [
+      {
+        size: "md",
+        itemWidth: "fixed",
+        class: "w-[var(--bh-button-group-md-item-width)] px-[var(--bh-button-group-md-padding-x)] rtl:w-[var(--bh-button-group-md-item-rtl-width)]",
+      },
+      {
+        size: "sm",
+        itemWidth: "fixed",
+        class: "w-[var(--bh-button-group-sm-item-width)] px-[var(--bh-button-group-sm-padding-x)] rtl:w-[var(--bh-button-group-sm-item-rtl-width)]",
+      },
+      {
+        size: "xs",
+        itemWidth: "fixed",
+        class: "w-[var(--bh-button-group-xs-item-width)] px-[var(--bh-button-group-xs-padding-x)] rtl:w-[var(--bh-button-group-xs-item-rtl-width)]",
+      },
+      {
+        size: "md",
+        itemWidth: "content",
+        class: "w-auto px-[var(--bh-button-group-md-padding-x)]",
+      },
+      {
+        size: "sm",
+        itemWidth: "content",
+        class: "w-auto px-[var(--bh-button-group-sm-padding-x)]",
+      },
+      {
+        size: "xs",
+        itemWidth: "content",
+        class: "w-auto px-[var(--bh-button-group-xs-padding-x)]",
+      },
+    ],
+    defaultVariants: {
+      itemWidth: "content",
+      size: "sm",
     },
   }
 )
 
 type ButtonGroupProps = React.ComponentProps<"div"> &
   VariantProps<typeof buttonGroupVariants> & {
+    density?: ControlDensity
+    itemWidth?: ButtonGroupItemWidth
     mode?: ButtonGroupMode
   }
 
 const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(function ButtonGroup({
   className,
-  size = "md",
+  density,
+  itemWidth = "fixed",
+  size,
   mode = "default",
   children,
   role = "group",
   ...props
 }, ref) {
+  const resolvedSize = resolveButtonGroupSize(density, size)
   const contextValue = React.useMemo(
     () => ({
-      size: (size || "md") as ButtonGroupSize,
+      itemWidth,
+      size: resolvedSize,
       mode: mode || "default",
     }),
-    [size, mode]
+    [itemWidth, mode, resolvedSize]
   )
 
   return (
     <buttonGroupContext.Provider value={contextValue}>
       <div
         data-mode={contextValue.mode}
+        data-density={density}
+        data-item-width={contextValue.itemWidth}
         data-size={contextValue.size}
         data-slot="button-group"
         ref={ref}
@@ -138,6 +239,7 @@ type ButtonGroupItemProps = React.ComponentProps<"button"> &
 const ButtonGroupItem = React.forwardRef<HTMLButtonElement, ButtonGroupItemProps>(function ButtonGroupItem({
   className,
   size,
+  itemWidth,
   mode,
   asChild = false,
   children,
@@ -151,6 +253,7 @@ const ButtonGroupItem = React.forwardRef<HTMLButtonElement, ButtonGroupItemProps
   const context = React.useContext(buttonGroupContext)
   const selectedSize = (size || context.size) as ButtonGroupSize
   const selectedMode = mode || context.mode
+  const selectedItemWidth = itemWidth || context.itemWidth
   const Comp = asChild ? Slot : "button"
   const accessibleLabel =
     selectedMode === "iconOnly" ? ariaLabel || getTextAlternative(children) : ariaLabel
@@ -170,6 +273,7 @@ const ButtonGroupItem = React.forwardRef<HTMLButtonElement, ButtonGroupItemProps
       aria-label={accessibleLabel}
       aria-pressed={ariaPressed}
       data-mode={selectedMode}
+      data-item-width={selectedItemWidth}
       data-size={selectedSize}
       data-slot="button-group-item"
       ref={ref}
@@ -177,6 +281,7 @@ const ButtonGroupItem = React.forwardRef<HTMLButtonElement, ButtonGroupItemProps
         buttonGroupItemVariants({
           size: selectedSize,
           mode: selectedMode,
+          itemWidth: selectedItemWidth,
           className,
         })
       )}
@@ -192,6 +297,39 @@ const ButtonGroupItem = React.forwardRef<HTMLButtonElement, ButtonGroupItemProps
   )
 })
 
+type ButtonGroupLabelProps = React.ComponentProps<"span"> &
+  VariantProps<typeof buttonGroupLabelVariants>
+
+const ButtonGroupLabel = React.forwardRef<HTMLSpanElement, ButtonGroupLabelProps>(
+  function ButtonGroupLabel(
+    { "aria-hidden": ariaHidden = true, className, itemWidth, size, ...props },
+    ref
+  ) {
+    const context = React.useContext(buttonGroupContext)
+    const selectedSize = (size || context.size) as ButtonGroupSize
+    const selectedItemWidth = itemWidth || context.itemWidth
+
+    return (
+      <span
+        aria-hidden={ariaHidden}
+        className={cn(
+          buttonGroupLabelVariants({
+            itemWidth: selectedItemWidth,
+            size: selectedSize,
+          }),
+          className
+        )}
+        data-item-width={selectedItemWidth}
+        data-size={selectedSize}
+        data-slot="button-group-label"
+        dir="auto"
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+
 function ButtonGroupItemChildren({
   children,
   mode,
@@ -237,10 +375,189 @@ function getTextAlternative(children: React.ReactNode) {
   return text.trim() || undefined
 }
 
-export { ButtonGroup, ButtonGroupItem, buttonGroupVariants, buttonGroupItemVariants }
+function resolveButtonGroupSize(
+  density: ControlDensity | undefined,
+  size: ButtonGroupSize | null | undefined
+): ButtonGroupSize {
+  if (density === "compact") return "xs"
+  if (density === "default") return "sm"
+  if (density === "comfortable") return "md"
+  return size ?? "md"
+}
+
+type ToggleGroupProps = Omit<ButtonGroupProps, "onChange"> & {
+  defaultValue?: ToggleGroupValue
+  disabled?: boolean
+  onValueChange?: (value: ToggleGroupValue) => void
+  type?: ToggleGroupType
+  value?: ToggleGroupValue
+}
+
+const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(
+  function ToggleGroup(
+    {
+      children,
+      defaultValue,
+      disabled = false,
+      onKeyDown,
+      onValueChange,
+      type = "single",
+      value,
+      ...props
+    },
+    ref
+  ) {
+    const controlled = value !== undefined
+    const [internalValue, setInternalValue] = React.useState<ToggleGroupValue>(
+      defaultValue ?? (type === "multiple" ? [] : "")
+    )
+    const selectedValue = normalizeToggleGroupValue(
+      controlled ? value : internalValue,
+      type
+    )
+
+    const updateValue = React.useCallback(
+      (nextValue: ToggleGroupValue) => {
+        if (!controlled) setInternalValue(nextValue)
+        onValueChange?.(nextValue)
+      },
+      [controlled, onValueChange]
+    )
+
+    const context = React.useMemo<ToggleGroupContextValue>(
+      () => ({
+        disabled,
+        isPressed: (itemValue) =>
+          Array.isArray(selectedValue)
+            ? selectedValue.includes(itemValue)
+            : selectedValue === itemValue,
+        toggle: (itemValue) => {
+          if (disabled) return
+          if (type === "multiple") {
+            const values = Array.isArray(selectedValue) ? selectedValue : []
+            updateValue(
+              values.includes(itemValue)
+                ? values.filter((entry) => entry !== itemValue)
+                : [...values, itemValue]
+            )
+            return
+          }
+          updateValue(selectedValue === itemValue ? "" : itemValue)
+        },
+      }),
+      [disabled, selectedValue, type, updateValue]
+    )
+
+    return (
+      <toggleGroupContext.Provider value={context}>
+        <ButtonGroup
+          aria-disabled={disabled || undefined}
+          data-selection-type={type}
+          data-slot="toggle-group"
+          onKeyDown={(event) => {
+            onKeyDown?.(event)
+            if (!event.defaultPrevented) moveToggleGroupFocus(event)
+          }}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </ButtonGroup>
+      </toggleGroupContext.Provider>
+    )
+  }
+)
+
+type ToggleGroupItemProps = Omit<ButtonGroupItemProps, "aria-pressed"> & {
+  value: string
+}
+
+const ToggleGroupItem = React.forwardRef<
+  HTMLButtonElement,
+  ToggleGroupItemProps
+>(function ToggleGroupItem(
+  { disabled, onClick, value, ...props },
+  ref
+) {
+  const context = React.useContext(toggleGroupContext)
+  if (!context) {
+    throw new Error("ToggleGroupItem must be used within ToggleGroup")
+  }
+
+  const pressed = context.isPressed(value)
+  const isDisabled = disabled || context.disabled
+
+  return (
+    <ButtonGroupItem
+      aria-pressed={pressed}
+      data-slot="toggle-group-item"
+      data-value={value}
+      disabled={isDisabled}
+      onClick={(event) => {
+        onClick?.(event)
+        if (!event.defaultPrevented) context.toggle(value)
+      }}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+
+function normalizeToggleGroupValue(
+  value: ToggleGroupValue,
+  type: ToggleGroupType
+): ToggleGroupValue {
+  if (type === "multiple") return Array.isArray(value) ? value : value ? [value] : []
+  return Array.isArray(value) ? value[0] ?? "" : value
+}
+
+function moveToggleGroupFocus(event: React.KeyboardEvent<HTMLDivElement>) {
+  const horizontalKeys = ["ArrowLeft", "ArrowRight"]
+  const verticalKeys = ["ArrowUp", "ArrowDown"]
+  if (![...horizontalKeys, ...verticalKeys, "Home", "End"].includes(event.key)) {
+    return
+  }
+
+  const items = [...event.currentTarget.querySelectorAll<HTMLButtonElement>(
+    '[data-slot="toggle-group-item"]:not(:disabled)'
+  )]
+  if (!items.length) return
+
+  const currentIndex = Math.max(0, items.indexOf(document.activeElement as HTMLButtonElement))
+  const rtl = getComputedStyle(event.currentTarget).direction === "rtl"
+  let nextIndex = currentIndex
+
+  if (event.key === "Home") nextIndex = 0
+  else if (event.key === "End") nextIndex = items.length - 1
+  else if (event.key === "ArrowRight") nextIndex += rtl ? -1 : 1
+  else if (event.key === "ArrowLeft") nextIndex += rtl ? 1 : -1
+  else if (event.key === "ArrowDown") nextIndex += 1
+  else if (event.key === "ArrowUp") nextIndex -= 1
+
+  event.preventDefault()
+  items[(nextIndex + items.length) % items.length]?.focus()
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupItem,
+  ButtonGroupLabel,
+  ToggleGroup,
+  ToggleGroupItem,
+  buttonGroupVariants,
+  buttonGroupItemVariants,
+  buttonGroupLabelVariants,
+}
 export type {
+  ButtonGroupLabelProps,
+  ButtonGroupItemWidth,
   ButtonGroupItemProps,
   ButtonGroupMode,
   ButtonGroupProps,
   ButtonGroupSize,
+  ControlDensity,
+  ToggleGroupItemProps,
+  ToggleGroupProps,
+  ToggleGroupType,
+  ToggleGroupValue,
 }

package/registry/components/button.tsx

@@ -4,38 +4,40 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
+type ControlDensity = "compact" | "default" | "comfortable"
+
 const buttonVariants = cva(
-  "group/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/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)]",
+          "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)]",
         danger:
-          "bg-destructive text-destructive-foreground shadow-[var(--shadow-button-raised)] hover:bg-[var(--destructive-hover)] active:bg-[var(--destructive-pressed)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-interactive-danger-default)] text-[var(--bh-content-on-color)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-interactive-danger-hover)] active:bg-[var(--bh-interactive-danger-pressed)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-disabled)] disabled:text-[var(--bh-content-disabled)]",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-[var(--shadow-button-raised)] hover:bg-[var(--destructive-hover)] active:bg-[var(--destructive-pressed)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-interactive-danger-default)] text-[var(--bh-content-on-color)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-interactive-danger-hover)] active:bg-[var(--bh-interactive-danger-pressed)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-disabled)] disabled:text-[var(--bh-content-disabled)]",
         success:
-          "bg-success text-success-foreground shadow-[var(--shadow-button-raised)] hover:bg-[var(--success-hover)] active:bg-[var(--success-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-bg-success-default)] text-[var(--bh-content-on-color)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-bg-success-bold)] active:bg-[var(--bh-bg-success-strong)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
         warning:
-          "bg-warning text-warning-foreground shadow-[var(--shadow-button-raised)] hover:bg-[var(--warning-hover)] active:bg-[var(--warning-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-bg-warning-default)] text-[var(--bh-content-on-light)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-bg-warning-bold)] active:bg-[var(--bh-bg-warning-strong)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-[var(--shadow-button-secondary)] [--bh-button-secondary-border:var(--bh-border-default)] hover:bg-[var(--secondary-hover)] active:bg-[var(--secondary-pressed)] focus-visible:[--bh-button-secondary-focus-border:var(--bh-border-brand-strong)] focus-visible:shadow-[var(--shadow-button-secondary-focus)] disabled:border disabled:border-[var(--bh-border-disabled)] disabled:bg-[var(--bh-interactive-secondary-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-interactive-secondary-default)] text-[var(--bh-content-default)] shadow-[var(--shadow-button-secondary)] [--bh-button-secondary-border:var(--bh-border-default)] hover:bg-[var(--bh-interactive-secondary-hover)] active:bg-[var(--bh-interactive-secondary-pressed)] focus-visible:[--bh-button-secondary-focus-border:var(--bh-border-brand-strong)] focus-visible:shadow-[var(--shadow-button-secondary-focus)] disabled:border-[length:var(--bh-border-width-default)] disabled:border-[var(--bh-border-disabled)] disabled:bg-[var(--bh-interactive-secondary-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)]",
+          "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)]",
+          "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)]",
         "ghost-primary":
-          "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-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)]",
         white:
-          "border border-transparent bg-[var(--bh-bg-always-white)] text-[var(--bh-content-on-light)] focus-visible:border-[var(--bh-border-focus)] disabled:opacity-[var(--bh-opacity-30)]",
+          "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-bg-always-white)] text-[var(--bh-content-on-light)] focus-visible:border-[var(--bh-border-focus)] disabled:opacity-[var(--bh-opacity-30)]",
         "soft-danger":
-          "border border-transparent bg-[var(--destructive-soft)] text-[var(--destructive-soft-foreground)] hover:bg-[var(--destructive-soft-hover)] active:bg-[var(--destructive-soft-pressed)] focus-visible:border-[var(--destructive)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-soft-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-danger-soft-default)] text-[var(--bh-content-danger-default)] hover:bg-[var(--bh-interactive-danger-soft-hover)] active:bg-[var(--bh-interactive-danger-soft-pressed)] focus-visible:border-[var(--bh-interactive-danger-default)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-soft-disabled)] disabled:text-[var(--bh-content-disabled)]",
         "soft-destructive":
-          "border border-transparent bg-[var(--destructive-soft)] text-[var(--destructive-soft-foreground)] hover:bg-[var(--destructive-soft-hover)] active:bg-[var(--destructive-soft-pressed)] focus-visible:border-[var(--destructive)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-soft-disabled)] disabled:text-[var(--bh-content-disabled)]",
-        link: "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:text-[var(--bh-content-disabled)]",
+          "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-danger-soft-default)] text-[var(--bh-content-danger-default)] hover:bg-[var(--bh-interactive-danger-soft-hover)] active:bg-[var(--bh-interactive-danger-soft-pressed)] focus-visible:border-[var(--bh-interactive-danger-default)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-soft-disabled)] disabled:text-[var(--bh-content-disabled)]",
+        link: "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: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)]",
@@ -60,23 +62,30 @@ const buttonVariants = cva(
 type ButtonProps = React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
+    density?: ControlDensity
   }
 
+type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>
+
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button({
   className,
   variant,
   size,
+  density,
   asChild = false,
   children,
   ...props
 }, ref) {
   const Comp = asChild ? Slot : "button"
+  const resolvedSize = resolveButtonSize(density, size)
 
   return (
     <Comp
+      data-density={density}
+      data-size={resolvedSize}
       data-slot="button"
       ref={ref}
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(buttonVariants({ variant, size: resolvedSize, className }))}
       {...props}
     >
       {asChild ? children : <ButtonChildren>{children}</ButtonChildren>}
@@ -98,5 +107,17 @@ function ButtonChildren({ children }: { children: React.ReactNode }) {
   })
 }
 
+function resolveButtonSize(
+  density: ControlDensity | undefined,
+  size: ButtonSize | null | undefined
+): ButtonSize | 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 { Button, buttonVariants }
-export type { ButtonProps }
+export type { ButtonProps, ControlDensity }