banhaten 0.1.2 → 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/radio-group.tsx

@@ -100,7 +100,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(function Radio({
         ref={ref}
         type="radio"
         className={cn(
-          "peer absolute inset-0 z-[var(--bh-z-raised)] m-0 size-full cursor-pointer appearance-none rounded-[var(--bh-radius-full)] opacity-0 outline-none disabled:cursor-not-allowed",
+          "peer absolute inset-0 z-[var(--bh-z-raised)] m-0 size-full cursor-pointer appearance-none rounded-[var(--bh-radius-full)] opacity-[var(--bh-opacity-0)] outline-none disabled:cursor-not-allowed",
           inputClassName
         )}
         {...props}

package/registry/components/resizable.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import {
+  Group,
+  Panel,
+  Separator,
+  type GroupProps,
+  type Orientation,
+  type PanelProps,
+  type SeparatorProps,
+} from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+type ResizablePanelGroupProps = Omit<GroupProps, "orientation"> & {
+  direction?: Orientation
+}
+type ResizablePanelProps = PanelProps
+type ResizableHandleProps = SeparatorProps & {
+  withHandle?: boolean
+}
+
+function ResizablePanelGroup({
+  className,
+  direction = "horizontal",
+  ...props
+}: ResizablePanelGroupProps) {
+  return (
+    <Group
+      data-panel-group-direction={direction}
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      orientation={direction}
+      {...props}
+    />
+  )
+}
+
+const ResizablePanel = Panel
+
+function ResizableHandle({
+  className,
+  withHandle = false,
+  ...props
+}: ResizableHandleProps) {
+  return (
+    <Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-[var(--bh-border-width-default)] items-center justify-center bg-[var(--bh-border-subtle)] outline-none transition-[background-color,box-shadow] after:absolute after:inset-y-0 after:start-1/2 after:w-[var(--bh-space-5xl-24)] after:-translate-x-1/2 focus-visible:shadow-[var(--shadow-button-focus)] aria-[orientation=horizontal]:h-[var(--bh-border-width-default)] aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-[var(--bh-space-5xl-24)] aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0",
+        className
+      )}
+      {...props}
+    >
+      {withHandle ? (
+        <div className="z-[var(--bh-z-raised)] flex h-[var(--bh-space-6xl-32)] w-[var(--bh-space-4xl-20)] items-center justify-center rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)]">
+          <GripVerticalIcon className="size-[var(--bh-space-3xl-16)] text-[var(--bh-content-muted)]" />
+        </div>
+      ) : null}
+    </Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
+export type {
+  ResizableHandleProps,
+  ResizablePanelGroupProps,
+  ResizablePanelProps,
+}

package/registry/components/scroll-area.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+type ScrollAreaProps = React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.Root
+>
+type ScrollBarProps = React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+>
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  ScrollAreaProps
+>(function ScrollArea({ children, className, ...props }, ref) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      ref={ref}
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit]"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+})
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  ScrollBarProps
+>(function ScrollBar({ className, orientation = "vertical", ...props }, ref) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-orientation={orientation}
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      ref={ref}
+      className={cn(
+        "flex touch-none select-none bg-transparent p-[var(--bh-space-xxs-2)] transition-colors",
+        orientation === "vertical" &&
+          "h-full w-[var(--bh-space-lg-10)] border-s border-s-transparent",
+        orientation === "horizontal" &&
+          "h-[var(--bh-space-lg-10)] flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-[var(--bh-radius-full)] bg-[var(--bh-border-default)]"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+})
+
+export { ScrollArea, ScrollBar }
+export type { 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") {