banhaten 0.1.3 → 0.2.0

package/registry/components/radio-card.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Building2Icon, CreditCardIcon, UserIcon } from "lucide-react"
 
+import { useResolvedDirection, type Direction } from "@/hooks/use-direction"
 import { cn } from "@/lib/utils"
 
 type RadioCardType =
@@ -14,7 +15,7 @@ type RadioCardType =
   | "radio-label"
 
 type RadioCardState = "default" | "active" | "disabled"
-type RadioCardDirection = "ltr" | "rtl"
+type RadioCardDirection = Direction
 
 const radioCardVariants = cva(
   [
@@ -69,91 +70,119 @@ type RadioCardProps = Omit<
     inputProps?: Omit<React.ComponentProps<"input">, "type">
   }
 
-function RadioCard({
-  className,
-  type = "with-icon",
-  state = "default",
-  direction = "ltr",
-  checked,
-  disabled,
-  label,
-  description,
-  supportLabel,
-  supportDescription,
-  showDescription = true,
-  showSupportItems = true,
-  showSupportDescription = true,
-  icon,
-  media,
-  inputProps,
-  ...props
-}: RadioCardProps) {
-  const hasControlledChecked =
-    checked !== undefined || inputProps?.checked !== undefined
-  const controlledChecked = checked ?? inputProps?.checked
-  const inputChecked =
-    controlledChecked ?? Boolean(inputProps?.defaultChecked)
-  const inputReadOnly =
-    inputProps?.readOnly ??
-    (hasControlledChecked && inputProps?.onChange === undefined
-      ? true
-      : undefined)
-  const isDisabled = disabled ?? inputProps?.disabled ?? state === "disabled"
-  const visualState: RadioCardState = isDisabled
-    ? "disabled"
-    : inputChecked || state === "active"
-      ? "active"
-      : state ?? "default"
-  const isRtl = direction === "rtl"
-  const textLabel = label
-  const textDescription = description
+const RadioCard = React.forwardRef<HTMLLabelElement, RadioCardProps>(
+  function RadioCard(
+    {
+      className,
+      type = "with-icon",
+      state = "default",
+      direction,
+      dir,
+      checked,
+      disabled,
+      label,
+      description,
+      supportLabel,
+      supportDescription,
+      showDescription = true,
+      showSupportItems = true,
+      showSupportDescription = true,
+      icon,
+      media,
+      inputProps,
+      ...props
+    },
+    forwardedRef
+  ) {
+    const directionBoundaryRef = React.useRef<HTMLLabelElement | null>(null)
+    const explicitDirection =
+      direction ?? (dir === "ltr" || dir === "rtl" ? dir : undefined)
+    const resolvedDirection = useResolvedDirection(
+      explicitDirection,
+      directionBoundaryRef
+    )
+    const setDirectionBoundaryRef = React.useCallback(
+      (node: HTMLLabelElement | null) => {
+        directionBoundaryRef.current = node
+
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node)
+        } else if (forwardedRef) {
+          forwardedRef.current = node
+        }
+      },
+      [forwardedRef]
+    )
+    const hasControlledChecked =
+      checked !== undefined || inputProps?.checked !== undefined
+    const controlledChecked = checked ?? inputProps?.checked
+    const inputChecked =
+      controlledChecked ?? Boolean(inputProps?.defaultChecked)
+    const inputReadOnly =
+      inputProps?.readOnly ??
+      (hasControlledChecked && inputProps?.onChange === undefined
+        ? true
+        : undefined)
+    const isDisabled = disabled ?? inputProps?.disabled ?? state === "disabled"
+    const visualState: RadioCardState = isDisabled
+      ? "disabled"
+      : inputChecked || state === "active"
+        ? "active"
+        : state ?? "default"
+    const isRtl = resolvedDirection === "rtl"
+    const textLabel = label
+    const textDescription = description
 
-  return (
-    <label
-      data-slot="radio-card"
-      data-state={visualState}
-      data-type={type}
-      data-direction={direction}
-      {...props}
-      dir="ltr"
-      className={cn(radioCardVariants({ state: visualState }), className)}
-    >
-      <input
-        aria-label={typeof textLabel === "string" ? textLabel : undefined}
-        {...inputProps}
-        checked={hasControlledChecked ? controlledChecked : undefined}
-        className={cn("sr-only", inputProps?.className)}
-        defaultChecked={hasControlledChecked ? undefined : inputProps?.defaultChecked}
-        disabled={isDisabled}
-        readOnly={inputReadOnly}
-        type="radio"
-      />
-      <span
-        data-slot="radio-card-layout"
-        className={cn(
-          "flex min-w-0 items-start [direction:ltr]",
-          type === "radio-label" && "items-center",
-          getCardGapClass(type, isRtl)
-        )}
+    return (
+      <label
+        data-slot="radio-card"
+        data-state={visualState}
+        data-type={type}
+        {...props}
+        ref={setDirectionBoundaryRef}
+        data-direction={resolvedDirection}
+        dir={resolvedDirection}
+        className={cn(radioCardVariants({ state: visualState }), className)}
       >
-        {renderRadioCardContent({
-          type,
-          direction,
-          state: visualState,
-          label: textLabel,
-          description: textDescription,
-          supportLabel,
-          supportDescription,
-          showDescription,
-          showSupportItems,
-          showSupportDescription,
-          icon,
-          media,
-        })}
-      </span>
-    </label>
-  )
-}
+        <input
+          aria-label={typeof textLabel === "string" ? textLabel : undefined}
+          {...inputProps}
+          checked={hasControlledChecked ? controlledChecked : undefined}
+          className={cn("sr-only", inputProps?.className)}
+          defaultChecked={
+            hasControlledChecked ? undefined : inputProps?.defaultChecked
+          }
+          disabled={isDisabled}
+          readOnly={inputReadOnly}
+          type="radio"
+        />
+        <span
+          data-slot="radio-card-layout"
+          className={cn(
+            "flex min-w-0 items-start [direction:ltr]",
+            type === "radio-label" && "items-center",
+            getCardGapClass(type, isRtl)
+          )}
+        >
+          {renderRadioCardContent({
+            type,
+            direction: resolvedDirection,
+            state: visualState,
+            label: textLabel,
+            description: textDescription,
+            supportLabel,
+            supportDescription,
+            showDescription,
+            showSupportItems,
+            showSupportDescription,
+            icon,
+            media,
+          })}
+        </span>
+      </label>
+    )
+  }
+)
 
 function renderRadioCardContent({
   type,
@@ -564,7 +593,7 @@ function RadioCardUserIcon() {
     <UserIcon
       aria-hidden="true"
       className="size-[var(--bh-space-4xl-20)]"
-      strokeWidth={2}
+      strokeWidth="var(--bh-icon-stroke-200)"
     />
   )
 }
@@ -578,7 +607,7 @@ function RadioCardPaymentIcon() {
       <CreditCardIcon
         aria-hidden="true"
         className="h-[var(--bh-radio-card-payment-logo-height)] w-[var(--bh-radio-card-payment-logo-width)]"
-        strokeWidth={2}
+        strokeWidth="var(--bh-icon-stroke-200)"
       />
     </span>
   )
@@ -610,7 +639,7 @@ function RadioCardCompanyIcon({ disabled }: { disabled: boolean }) {
       <Building2Icon
         aria-hidden="true"
         className="size-[var(--bh-space-5xl-24)] text-[var(--bh-radio-card-company-mark-color)]"
-        strokeWidth={1.8}
+        strokeWidth="var(--bh-icon-stroke-180)"
       />
     </span>
   )

package/registry/components/segmented-control.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  ButtonGroupLabel,
+  ToggleGroup,
+  ToggleGroupItem,
+  type ButtonGroupLabelProps,
+  type ControlDensity,
+  type ToggleGroupItemProps,
+  type ToggleGroupProps,
+} from "@/components/ui/button-group"
+
+type SegmentedControlProps = Omit<
+  ToggleGroupProps,
+  "itemWidth" | "mode"
+> & {
+  "aria-label": string
+  density?: ControlDensity
+}
+
+const SegmentedControl = React.forwardRef<
+  HTMLDivElement,
+  SegmentedControlProps
+>(function SegmentedControl(
+  { density = "default", type = "single", ...props },
+  ref
+) {
+  return (
+    <ToggleGroup
+      data-slot="segmented-control"
+      density={density}
+      itemWidth="content"
+      mode="default"
+      ref={ref}
+      type={type}
+      {...props}
+    />
+  )
+})
+
+type SegmentedControlItemProps = ToggleGroupItemProps
+
+const SegmentedControlItem = React.forwardRef<
+  HTMLButtonElement,
+  SegmentedControlItemProps
+>(function SegmentedControlItem(props, ref) {
+  return (
+    <ToggleGroupItem
+      data-slot="segmented-control-item"
+      itemWidth="content"
+      ref={ref}
+      {...props}
+    />
+  )
+})
+
+type SegmentedControlLabelProps = Omit<
+  ButtonGroupLabelProps,
+  "itemWidth"
+>
+
+const SegmentedControlLabel = React.forwardRef<
+  HTMLSpanElement,
+  SegmentedControlLabelProps
+>(function SegmentedControlLabel(props, ref) {
+  return (
+    <ButtonGroupLabel
+      data-slot="segmented-control-label"
+      itemWidth="content"
+      ref={ref}
+      {...props}
+    />
+  )
+})
+
+export {
+  SegmentedControl,
+  SegmentedControlItem,
+  SegmentedControlLabel,
+}
+export type {
+  SegmentedControlItemProps,
+  SegmentedControlLabelProps,
+  SegmentedControlProps,
+}

package/registry/components/select-content.tsx

@@ -104,7 +104,7 @@ function SelectItemCompanyLogo({
         aria-hidden="true"
         className="size-[var(--bh-select-company-icon-size)]"
         focusable="false"
-        strokeWidth={2.2}
+        strokeWidth="var(--bh-icon-stroke-220)"
       />
     </span>
   )
@@ -177,7 +177,7 @@ function SelectIcon({
     "aria-hidden": true,
     className: iconClassName,
     focusable: false,
-    strokeWidth: 2,
+    strokeWidth: "var(--bh-icon-stroke-200)",
   } as const
 
   if (name === "user") {

package/registry/components/select.tsx

@@ -16,7 +16,8 @@ import {
   type SelectStatusTone,
 } from "./select-content"
 
-type SelectSize = "lg" | "md"
+type ControlDensity = "compact" | "default" | "comfortable"
+type SelectSize = "lg" | "md" | "comfortable"
 type SelectVisualState = "default" | "filled" | "error" | "disabled"
 type SelectVariant = "default" | "soft"
 type SelectSelectionType = "default" | "checkbox"
@@ -39,6 +40,7 @@ const selectTrigger = cva(
   {
     variants: {
       size: {
+        comfortable: "py-[var(--bh-select-trigger-padding-y-comfortable)]",
         lg: "py-[var(--bh-select-trigger-padding-y-lg)]",
         md: "py-[var(--bh-select-trigger-padding-y-md)]",
       },
@@ -120,6 +122,7 @@ const SelectRadixItemContext = React.createContext(false)
 type SelectProps = Omit<React.ComponentProps<"div">, "children" | "dir"> & {
   children?: React.ReactNode
   defaultSelectValue?: string
+  density?: ControlDensity
   dir?: "ltr" | "rtl" | "auto"
   errorMessage?: React.ReactNode
   expandIcon?: React.ReactNode | false
@@ -133,7 +136,7 @@ type SelectProps = Omit<React.ComponentProps<"div">, "children" | "dir"> & {
   isOptional?: boolean
   isRequired?: boolean
   label?: React.ReactNode
-  leadingIcon?: React.ReactNode
+  leadingIcon?: React.ReactNode | false
   onOpenChange?: (open: boolean) => void
   onTriggerClick?: React.MouseEventHandler<HTMLButtonElement>
   onValueChange?: (value: string) => void
@@ -158,7 +161,7 @@ type SelectProps = Omit<React.ComponentProps<"div">, "children" | "dir"> & {
     | "value"
     | "variant"
   >
-  trailingIcon?: React.ReactNode
+  trailingIcon?: React.ReactNode | false
   value?: React.ReactNode
   variant?: SelectVariant
 }
@@ -167,6 +170,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   children,
   className,
   defaultSelectValue,
+  density,
   dir,
   errorMessage,
   expandIcon,
@@ -174,8 +178,8 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   hasHelperText,
   hasInformationIcon = false,
   hasLabel,
-  hasLeadingIcon = true,
-  hasTrailingIcon = true,
+  hasLeadingIcon,
+  hasTrailingIcon,
   helperText,
   isOptional = false,
   isRequired = false,
@@ -188,7 +192,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   optionalText,
   placeholder,
   selectValue,
-  size = "lg",
+  size,
   state = "default",
   triggerClassName,
   triggerId,
@@ -199,6 +203,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   ...props
 }, ref) {
   const generatedId = React.useId()
+  const resolvedSize = resolveSelectSize(density, size)
   const resolvedDir = dir
   const triggerVisualState = triggerProps?.disabled ? "disabled" : state
   const isError = triggerVisualState === "error"
@@ -210,6 +215,12 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   const shouldRenderLabel = hasLabel ?? hasRenderableContent(selectedLabel)
   const shouldRenderHelperText =
     hasHelperText ?? hasRenderableContent(selectedHelper)
+  const shouldShowLeadingIcon =
+    leadingIcon !== false &&
+    (hasLeadingIcon ?? hasRenderableContent(leadingIcon))
+  const shouldShowTrailingIcon =
+    trailingIcon !== false &&
+    (hasTrailingIcon ?? hasRenderableContent(trailingIcon))
   const shouldRenderMenu = React.Children.count(children) > 0
   const selectId = triggerId || generatedId
   const helperId = `${selectId}-helper`
@@ -226,6 +237,8 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
       {...rootOpenProps}
     >
       <SelectRoot
+        data-density={density}
+        data-size={resolvedSize}
         data-state={triggerVisualState}
         data-variant={variant}
         dir={resolvedDir}
@@ -254,12 +267,20 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
               aria-invalid={isError || undefined}
               expandIcon={expandIcon}
               id={selectId}
-              leadingIcon={hasLeadingIcon ? leadingIcon : false}
+              leadingIcon={
+                shouldShowLeadingIcon
+                  ? (leadingIcon ?? <SelectIcon name="user" />)
+                  : false
+              }
               onClick={onTriggerClick}
               placeholder={selectedPlaceholder}
-              size={size}
+              size={resolvedSize}
               state={triggerVisualState}
-              trailingIcon={hasTrailingIcon ? trailingIcon : false}
+              trailingIcon={
+                shouldShowTrailingIcon
+                  ? (trailingIcon ?? <SelectIcon name="info" />)
+                  : false
+              }
               value={selectedValue}
               variant={variant}
               className={triggerClassName}
@@ -464,6 +485,7 @@ type SelectTriggerProps = Omit<
   "children" | "value"
 > &
   VariantProps<typeof selectTrigger> & {
+    density?: ControlDensity
     expandIcon?: React.ReactNode | false
     leadingIcon?: React.ReactNode | false
     placeholder?: React.ReactNode
@@ -475,11 +497,12 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
   (
     {
       className,
+      density,
       disabled,
       expandIcon,
       leadingIcon,
       placeholder,
-      size = "lg",
+      size,
       state,
       trailingIcon,
       type = "button",
@@ -489,13 +512,15 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
     },
     ref
   ) => {
+    const resolvedSize = resolveSelectSize(density, size)
     const hasValue = value !== undefined && value !== null && value !== ""
     const visualState = disabled ? "disabled" : state ?? (hasValue ? "filled" : "default")
     const isDisabled = visualState === "disabled"
 
     return (
       <button
-        data-size={size}
+        data-density={density}
+        data-size={resolvedSize}
         data-slot="select-trigger"
         data-state={visualState}
         data-variant={variant}
@@ -503,7 +528,7 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
         ref={ref}
         type={type}
         className={cn(
-          selectTrigger({ size, state: visualState, variant }),
+          selectTrigger({ size: resolvedSize, state: visualState, variant }),
           className
         )}
         {...props}
@@ -512,12 +537,12 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
           data-slot="select-trigger-main"
           className="flex min-w-0 flex-1 items-center gap-[var(--bh-select-content-gap)]"
         >
-          {leadingIcon !== false ? (
+          {hasRenderableContent(leadingIcon) ? (
             <span
               data-slot="select-leading-icon"
               className="flex size-[var(--bh-select-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-select-trigger-icon-color)] group-data-[state=disabled]/select-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-select-icon-size)]"
             >
-              {leadingIcon ?? <SelectIcon name="user" />}
+              {leadingIcon}
             </span>
           ) : null}
 
@@ -541,12 +566,12 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
           </span>
         </span>
 
-        {trailingIcon !== false ? (
+        {hasRenderableContent(trailingIcon) ? (
           <span
             data-slot="select-trailing-icon"
             className="flex size-[var(--bh-select-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-select-trigger-icon-color)] group-data-[state=disabled]/select-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-select-icon-size)]"
           >
-            {trailingIcon ?? <SelectIcon name="info" />}
+            {trailingIcon}
           </span>
         ) : null}
 
@@ -799,6 +824,16 @@ function getFocusableSelectItems(root: HTMLElement) {
   ).filter((item) => !item.hasAttribute("disabled"))
 }
 
+function resolveSelectSize(
+  density: ControlDensity | undefined,
+  size: SelectSize | null | undefined
+): SelectSize {
+  if (density === "compact") return "md"
+  if (density === "default") return "lg"
+  if (density === "comfortable") return "comfortable"
+  return size ?? "lg"
+}
+
 type SelectCheckboxIndicatorProps = {
   checked?: boolean
   className?: string
@@ -860,6 +895,7 @@ export {
   selectTrigger,
 }
 export type {
+  ControlDensity,
   SelectItemType,
   SelectMenuItemProps,
   SelectProps,

package/registry/components/sheet.tsx

@@ -264,7 +264,7 @@ const SheetCloseButton = React.forwardRef<
           <XIcon
             aria-hidden="true"
             className="size-[var(--bh-space-5xl-24)]"
-            strokeWidth={2}
+            strokeWidth="var(--bh-icon-stroke-200)"
           />
         )}
       </button>

package/registry/components/sidebar.tsx

@@ -265,7 +265,7 @@ const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
           <PanelLeftIcon
             aria-hidden="true"
             className="size-[var(--bh-space-5xl-24)] rtl:-scale-x-100"
-            strokeWidth={2}
+            strokeWidth="var(--bh-icon-stroke-200)"
           />
         )}
       </button>

package/registry/components/skeleton.css

@@ -1,10 +1,7 @@
 [data-slot="skeleton"] {
   --bh-skeleton-bg: var(--bh-bg-muted);
   --bh-skeleton-highlight: var(--bh-bg-raised-subtle);
-  --bh-skeleton-duration: 1.4s;
   --bh-skeleton-radius: var(--bh-radius-md-6);
-  --bh-skeleton-shimmer-width: 62%;
-  --bh-skeleton-width: 100%;
   --bh-skeleton-height: var(--bh-space-4xl-20);
 }