banhaten 0.1.3 → 0.3.0

package/registry/components/progress-slider.tsx

@@ -12,7 +12,7 @@ type ProgressSliderSize = "default" | "lg"
 const progressSliderVariants = cva(
   [
     "group/progress-slider relative flex touch-none select-none items-center",
-    "w-[var(--bh-progress-slider-width-current)] max-w-full",
+    "w-full max-w-[var(--bh-progress-slider-width-current)] min-w-0",
     "data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--bh-opacity-60)]",
     "[--bh-progress-slider-width-current:var(--bh-progress-slider-width-md)]",
     "[--bh-progress-slider-height-current:var(--bh-progress-slider-height-md)]",

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/resizable.tsx

@@ -17,7 +17,9 @@ import { cn } from "@/lib/utils"
 type ResizablePanelGroupProps = Omit<GroupProps, "orientation"> & {
   direction?: Orientation
 }
-type ResizablePanelProps = PanelProps
+type ResizablePanelProps = PanelProps & {
+  contentTabIndex?: number
+}
 type ResizableHandleProps = SeparatorProps & {
   withHandle?: boolean
 }
@@ -41,7 +43,39 @@ function ResizablePanelGroup({
   )
 }
 
-const ResizablePanel = Panel
+function ResizablePanel({
+  className,
+  contentTabIndex = 0,
+  elementRef,
+  ...props
+}: ResizablePanelProps) {
+  const setElementRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      const content = node?.firstElementChild
+      if (content instanceof HTMLElement) {
+        content.tabIndex = contentTabIndex
+        content.setAttribute("data-slot", "resizable-panel-content")
+      }
+
+      if (typeof elementRef === "function") elementRef(node)
+      else if (elementRef) {
+        ;(elementRef as React.MutableRefObject<HTMLDivElement | null>).current = node
+      }
+    },
+    [contentTabIndex, elementRef]
+  )
+
+  return (
+    <Panel
+      className={cn(
+        "outline-none focus-visible:shadow-[var(--shadow-component-focus-ring)]",
+        className
+      )}
+      elementRef={setElementRef}
+      {...props}
+    />
+  )
+}
 
 function ResizableHandle({
   className,

package/registry/components/scroll-area.tsx

@@ -5,9 +5,15 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "@/lib/utils"
 
+type ScrollAreaOrientation = "vertical" | "horizontal" | "both"
 type ScrollAreaProps = React.ComponentPropsWithoutRef<
   typeof ScrollAreaPrimitive.Root
->
+> & {
+  orientation?: ScrollAreaOrientation
+  viewportProps?: React.ComponentPropsWithoutRef<
+    typeof ScrollAreaPrimitive.Viewport
+  >
+}
 type ScrollBarProps = React.ComponentPropsWithoutRef<
   typeof ScrollAreaPrimitive.ScrollAreaScrollbar
 >
@@ -15,9 +21,24 @@ type ScrollBarProps = React.ComponentPropsWithoutRef<
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   ScrollAreaProps
->(function ScrollArea({ children, className, ...props }, ref) {
+>(function ScrollArea(
+  {
+    children,
+    className,
+    orientation = "vertical",
+    viewportProps,
+    ...props
+  },
+  ref
+) {
+  const hasVerticalScrollbar =
+    orientation === "vertical" || orientation === "both"
+  const hasHorizontalScrollbar =
+    orientation === "horizontal" || orientation === "both"
+
   return (
     <ScrollAreaPrimitive.Root
+      data-orientation={orientation}
       data-slot="scroll-area"
       ref={ref}
       className={cn("relative overflow-hidden", className)}
@@ -25,12 +46,15 @@ const ScrollArea = React.forwardRef<
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit]"
+        {...viewportProps}
+        tabIndex={viewportProps?.tabIndex ?? 0}
+        className={cn("size-full rounded-[inherit] outline-none focus-visible:shadow-[var(--shadow-component-focus-ring)]", viewportProps?.className)}
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
+      {hasVerticalScrollbar ? <ScrollBar orientation="vertical" /> : null}
+      {hasHorizontalScrollbar ? <ScrollBar orientation="horizontal" /> : null}
+      {orientation === "both" ? <ScrollAreaPrimitive.Corner /> : null}
     </ScrollAreaPrimitive.Root>
   )
 })
@@ -64,4 +88,4 @@ const ScrollBar = React.forwardRef<
 })
 
 export { ScrollArea, ScrollBar }
-export type { ScrollAreaProps, ScrollBarProps }
+export type { ScrollAreaOrientation, ScrollAreaProps, ScrollBarProps }

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