banhaten 0.1.3 → 0.3.0

package/registry/components/spinner.tsx

@@ -40,7 +40,7 @@ function SpinnerBase({ className, motion, ...props }: SpinnerBaseProps) {
         r="10"
         fill="none"
         stroke="currentColor"
-        strokeWidth="4"
+        strokeWidth="var(--bh-spinner-stroke-width)"
         opacity="var(--bh-opacity-25)"
       />
       <circle
@@ -50,64 +50,27 @@ function SpinnerBase({ className, motion, ...props }: SpinnerBaseProps) {
         r="10"
         fill="none"
         stroke="currentColor"
-        strokeWidth="4"
+        strokeWidth="var(--bh-spinner-stroke-width)"
         strokeLinecap="round"
         pathLength="100"
         strokeDasharray="30 70"
-      >
-        {motion === "dynamic" ? (
-          <DynamicSpinnerMotion />
-        ) : (
-          <SteadySpinnerMotion />
-        )}
-      </circle>
-    </svg>
-  )
-}
-
-function DynamicSpinnerMotion() {
-  return (
-    <>
-      <animate
-        attributeName="stroke-dasharray"
-        calcMode="spline"
-        dur="6s"
-        keySplines="0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1"
-        keyTimes="0; 0.25; 0.5; 0.75; 1"
-        repeatCount="indefinite"
-        values="22 78; 38 62; 30 70; 42 58; 22 78"
-      />
-      <animate
-        attributeName="stroke-dashoffset"
-        calcMode="spline"
-        dur="6s"
-        keySplines="0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1"
-        keyTimes="0; 0.25; 0.5; 0.75; 1"
-        repeatCount="indefinite"
-        values="0; -16; -44; -72; -100"
+        style={{
+          animationDuration:
+            motion === "dynamic"
+              ? "var(--bh-spinner-duration-dynamic)"
+              : "var(--bh-spinner-duration-steady)",
+          animationIterationCount: "infinite",
+          animationName:
+            motion === "dynamic"
+              ? "bh-spinner-dynamic"
+              : "bh-spinner-steady",
+          animationTimingFunction:
+            motion === "dynamic" ? "var(--bh-spinner-easing)" : "linear",
+          transformBox: "fill-box",
+          transformOrigin: "center",
+        }}
       />
-      <animateTransform
-        attributeName="transform"
-        dur="6s"
-        from="0 12 12"
-        repeatCount="indefinite"
-        to="1080 12 12"
-        type="rotate"
-      />
-    </>
-  )
-}
-
-function SteadySpinnerMotion() {
-  return (
-    <animateTransform
-      attributeName="transform"
-      dur="1.5s"
-      from="0 12 12"
-      repeatCount="indefinite"
-      to="360 12 12"
-      type="rotate"
-    />
+    </svg>
   )
 }
 

package/registry/components/table-elements.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type TableRootProps = React.ComponentPropsWithoutRef<"table">
+type TableSectionProps = React.ComponentPropsWithoutRef<"thead">
+type TableBodyProps = React.ComponentPropsWithoutRef<"tbody">
+type TableRowElementProps = React.ComponentPropsWithoutRef<"tr">
+type TableHeadProps = React.ComponentPropsWithoutRef<"th">
+type TableCellProps = React.ComponentPropsWithoutRef<"td">
+type DataTableSurfaceProps = React.ComponentPropsWithoutRef<"div">
+
+const DataTableSurface = React.forwardRef<
+  HTMLDivElement,
+  DataTableSurfaceProps
+>(function DataTableSurface({ className, role = "table", ...props }, ref) {
+  return (
+    <div
+      data-slot="data-table-surface"
+      ref={ref}
+      role={role}
+      className={cn("min-w-0", className)}
+      {...props}
+    />
+  )
+})
+
+const TableRoot = React.forwardRef<HTMLTableElement, TableRootProps>(
+  function TableRoot({ className, ...props }, ref) {
+    return (
+      <table
+        data-slot="table-root"
+        ref={ref}
+        className={cn("w-full border-collapse text-start", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  TableSectionProps
+>(function TableHeader({ className, ...props }, ref) {
+  return (
+    <thead
+      data-slot="table-header"
+      ref={ref}
+      className={cn("text-start", className)}
+      {...props}
+    />
+  )
+})
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  function TableBody({ className, ...props }, ref) {
+    return (
+      <tbody
+        data-slot="table-body"
+        ref={ref}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableRowElement = React.forwardRef<
+  HTMLTableRowElement,
+  TableRowElementProps
+>(function TableRowElement({ className, ...props }, ref) {
+  return (
+    <tr
+      data-slot="table-row"
+      ref={ref}
+      className={className}
+      {...props}
+    />
+  )
+})
+
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+  function TableHead({ className, scope = "col", ...props }, ref) {
+    return (
+      <th
+        data-slot="table-head"
+        ref={ref}
+        className={cn("text-start", className)}
+        scope={scope}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
+  function TableCell({ className, ...props }, ref) {
+    return (
+      <td
+        data-slot="table-cell"
+        ref={ref}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+
+export {
+  DataTableSurface,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRoot,
+  TableRowElement,
+}
+export type {
+  DataTableSurfaceProps,
+  TableBodyProps,
+  TableCellProps,
+  TableHeadProps,
+  TableRootProps,
+  TableRowElementProps,
+  TableSectionProps,
+}

package/registry/components/tabs.css

@@ -93,7 +93,7 @@
 .ds-tabs__tab:disabled,
 .ds-tabs__tab[data-disabled] {
   cursor: not-allowed;
-  opacity: var(--bh-opacity-disabled);
+  opacity: var(--bh-opacity-60);
 }
 
 .ds-tabs__tab:focus-visible {

package/registry/components/tabs.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 
 import "./tabs.css"
 
@@ -84,7 +85,7 @@ const TabsList = React.forwardRef<
         `ds-tabs--${variant}`,
         `ds-tabs--${size}`,
         fullWidth ? "ds-tabs--full" : "ds-tabs--hug",
-        isRtl ? "ds-tabs--rtl" : "ds-tabs--ltr",
+        isRtl ? "ds-tabs--rtl" : dir === "ltr" ? "ds-tabs--ltr" : undefined,
         className
       )}
       {...props}
@@ -133,7 +134,7 @@ function Tabs({
   className = "",
   defaultActiveIndex = 0,
   defaultValue,
-  dir = "ltr",
+  dir,
   fullWidth = false,
   items = [],
   onActiveIndexChange,
@@ -144,6 +145,8 @@ function Tabs({
   variant = "underline",
   ...props
 }: TabsProps) {
+  const rootRef = React.useRef<React.ElementRef<typeof TabsPrimitive.Root>>(null)
+  const resolvedDirection = useResolvedDirection(dir, rootRef)
   const normalizedItems = items.map(normalizeTabsItem)
   const activeValue =
     value ?? (activeIndex === undefined ? undefined : normalizedItems[activeIndex]?.value)
@@ -151,7 +154,6 @@ function Tabs({
     defaultValue ??
     normalizedItems[defaultActiveIndex]?.value ??
     normalizedItems[0]?.value
-  const hasPanels = normalizedItems.some((item) => item.content !== undefined)
 
   function handleValueChange(nextValue: string) {
     onValueChange?.(nextValue)
@@ -166,7 +168,8 @@ function Tabs({
     <TabsRoot
       data-slot="tabs-root"
       defaultValue={activeValue === undefined ? uncontrolledDefaultValue : undefined}
-      dir={dir}
+      dir={resolvedDirection}
+      ref={rootRef}
       value={activeValue}
       onValueChange={handleValueChange}
       className={rootClassName}
@@ -175,7 +178,7 @@ function Tabs({
       <TabsList
         aria-label={ariaLabel}
         className={className}
-        dir={dir}
+        dir={resolvedDirection}
         fullWidth={fullWidth}
         size={size}
         variant={variant}
@@ -190,15 +193,11 @@ function Tabs({
           </TabsTrigger>
         ))}
       </TabsList>
-      {hasPanels
-        ? normalizedItems.map((item) =>
-            item.content === undefined ? null : (
-              <TabsContent key={`${item.value}-panel`} value={item.value}>
-                {item.content}
-              </TabsContent>
-            )
-          )
-        : null}
+      {normalizedItems.map((item) => (
+        <TabsContent key={`${item.value}-panel`} value={item.value}>
+          {item.content ?? null}
+        </TabsContent>
+      ))}
       {children}
     </TabsRoot>
   )

package/registry/components/tag.tsx

@@ -348,7 +348,7 @@ function TagAvatar({
     <span
       data-slot="tag-avatar"
       className={cn(
-        "flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-neutral-default)] text-[length:var(--bh-text-body-3xs-semibold-font-size)] font-[var(--bh-text-body-3xs-semibold-font-weight)] leading-[var(--bh-text-body-3xs-semibold-line-height)] text-[var(--bh-content-on-color)]",
+        "flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-neutral-bold)] text-[length:var(--bh-text-body-3xs-semibold-font-size)] font-[var(--bh-text-body-3xs-semibold-font-weight)] leading-[var(--bh-text-body-3xs-semibold-line-height)] text-[var(--bh-content-on-neutral)]",
         className
       )}
       {...props}
@@ -372,7 +372,7 @@ function TagIcon({
       )}
       {...props}
     >
-      {children ?? <PlusIcon aria-hidden="true" strokeWidth={2.25} />}
+      {children ?? <PlusIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-225)" />}
     </span>
   )
 }
@@ -405,7 +405,7 @@ function TagCloseButton({
       <XIcon
         aria-hidden="true"
         className="size-[var(--bh-space-xl-12)]"
-        strokeWidth={2}
+        strokeWidth="var(--bh-icon-stroke-200)"
       />
     </button>
   )

package/registry/components/textarea.tsx

@@ -539,14 +539,14 @@ function TextareaIcon({
           aria-hidden="true"
           className="size-[var(--bh-textarea-helper-icon-size)]"
           focusable="false"
-          strokeWidth={2.25}
+          strokeWidth="var(--bh-icon-stroke-225)"
         />
       ) : (
         <InfoIcon
           aria-hidden="true"
           className="size-[var(--bh-textarea-helper-icon-size)]"
           focusable="false"
-          strokeWidth={2.25}
+          strokeWidth="var(--bh-icon-stroke-225)"
         />
       )}
     </span>
@@ -563,7 +563,7 @@ function CloseIcon() {
         aria-hidden="true"
         className="size-[var(--bh-textarea-close-icon-size)]"
         focusable="false"
-        strokeWidth={2.5}
+        strokeWidth="var(--bh-icon-stroke-250)"
       />
     </span>
   )

package/registry/components/toast.tsx

@@ -9,6 +9,7 @@ import {
 } from "sonner"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 
 type ToastIntent = "default" | "success" | "danger" | "warning" | "info"
 type ToastSide = "start" | "end"
@@ -54,7 +55,9 @@ function Toaster({
   toastOptions,
   ...props
 }: ToasterProps) {
-  const resolvedPosition = position ?? getToastPosition(dir, side)
+  const directionBoundaryRef = React.useRef<HTMLSpanElement | null>(null)
+  const resolvedDirection = useResolvedDirection(dir, directionBoundaryRef)
+  const resolvedPosition = position ?? getToastPosition(resolvedDirection, side)
   const mergedToastOptions: ToasterProps["toastOptions"] = {
     ...toastOptions,
     classNames: {
@@ -69,7 +72,7 @@ function Toaster({
         toastOptions?.classNames?.description
       ),
       actionButton: cn(
-        "rounded-[var(--bh-control-default)] bg-[var(--bh-interactive-primary-default)] px-[var(--bh-space-lg-10)] py-[var(--bh-space-xs-4)] text-[var(--bh-content-on-color)]",
+        "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(
@@ -80,15 +83,17 @@ function Toaster({
   }
 
   return (
-    <SonnerToaster
-      className={cn("toaster group", className)}
-      closeButton={closeButton}
-      dir={dir}
-      position={resolvedPosition}
-      richColors={richColors}
-      toastOptions={mergedToastOptions}
-      {...props}
-    />
+    <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>
   )
 }
 

package/registry/components/toggle.tsx

@@ -78,7 +78,7 @@ const Toggle = React.forwardRef<
     >
       <SwitchPrimitive.Thumb
         data-slot="toggle-thumb"
-        className="pointer-events-none flex size-[var(--bh-toggle-handle-size)] translate-x-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-switch-handle)] text-[var(--bh-content-on-light)] shadow-[var(--shadow-component-default)] transition-[background-color,transform] group-data-[disabled]/toggle:bg-[var(--bh-interactive-switch-handle-disabled)] group-data-[state=checked]/toggle:translate-x-[var(--bh-toggle-offset)] rtl:group-data-[state=checked]/toggle:-translate-x-[var(--bh-toggle-offset)]"
+        className="pointer-events-none flex size-[var(--bh-toggle-handle-size)] translate-x-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-switch-handle)] text-[var(--bh-content-on-light)] shadow-[var(--shadow-md)] transition-[background-color,transform] group-data-[disabled]/toggle:bg-[var(--bh-interactive-switch-handle-disabled)] group-data-[state=checked]/toggle:translate-x-[var(--bh-toggle-offset)] rtl:group-data-[state=checked]/toggle:-translate-x-[var(--bh-toggle-offset)]"
       >
         {showIcon ? (
           <span
@@ -190,7 +190,7 @@ const ToggleField = React.forwardRef<HTMLDivElement, ToggleFieldProps>(
             data-slot="toggle-field-description"
             dir="auto"
             id={descriptionId}
-            className="w-full min-w-0 break-words 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)] group-data-[disabled=true]/toggle-field:text-[var(--bh-content-disabled)]"
+            className="w-full min-w-0 break-words 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)]"
           >
             {description}
           </span>
@@ -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)"
     />
   )
 }