banhaten 0.1.2 → 0.2.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/{expanded/tabs.css → tabs.css}

@@ -25,11 +25,11 @@
   --tabs-shadow-selected: var(--shadow-button-soft);
 
   box-sizing: border-box;
-  display: flex;
-  position: relative;
-  max-width: 100%;
-  min-width: 0;
-  overflow-x: auto;
+  display: flex;
+  position: relative;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
   overflow-y: visible;
   color: var(--tabs-content-subtle);
   font-family: var(--bh-font-family);
@@ -39,100 +39,109 @@
   line-height: var(--bh-text-body-md-regular-line-height);
   letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
 }
-
-.ds-tabs *,
-.ds-tabs *::before,
-.ds-tabs *::after {
-  box-sizing: border-box;
-}
-
-.ds-tabs--full {
-  width: 100%;
-}
-
-.ds-tabs--segment,
-.ds-tabs--rounded {
-  align-items: center;
-  gap: var(--tabs-space-xxs);
-  padding: var(--tabs-space-xxs);
-  background: var(--tabs-bg-neutral-subtle);
-}
-
-.ds-tabs--segment {
-  border-radius: var(--tabs-radius-full);
-}
-
-.ds-tabs--rounded {
-  border-radius: var(--tabs-radius-lg);
-}
-
+
+.ds-tabs *,
+.ds-tabs *::before,
+.ds-tabs *::after {
+  box-sizing: border-box;
+}
+
+.ds-tabs--full {
+  width: 100%;
+}
+
+.ds-tabs--segment,
+.ds-tabs--rounded {
+  align-items: center;
+  gap: var(--tabs-space-xxs);
+  padding: var(--tabs-space-xxs);
+  background: var(--tabs-bg-neutral-subtle);
+}
+
+.ds-tabs--segment {
+  border-radius: var(--tabs-radius-full);
+}
+
+.ds-tabs--rounded {
+  border-radius: var(--tabs-radius-lg);
+}
+
 .ds-tabs--underline {
   align-items: center;
   gap: var(--tabs-space-3xl);
   border-bottom: var(--bh-space-xxxs-1) solid var(--tabs-border-default);
 }
-
-.ds-tabs__tab {
-  appearance: none;
-  border: 0;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  color: var(--tabs-content-subtle);
-  background: transparent;
-  font: inherit;
-  text-align: start;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
+
+.ds-tabs__tab {
+  appearance: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  color: var(--tabs-content-subtle);
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.ds-tabs__tab:disabled,
+.ds-tabs__tab[data-disabled] {
+  cursor: not-allowed;
+  opacity: var(--bh-opacity-60);
+}
+
 .ds-tabs__tab:focus-visible {
   outline: var(--tabs-space-xxs) solid var(--tabs-content-brand);
   outline-offset: var(--tabs-space-xxs);
 }
-
-.ds-tabs__content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--tabs-space-xs);
-  min-width: 0;
-}
-
-.ds-tabs__label {
-  display: block;
-  flex: 0 0 auto;
-  padding-inline: var(--tabs-label-padding-x);
-  color: currentColor;
-  font: inherit;
-  white-space: nowrap;
-  word-break: break-word;
-}
-
-.ds-tabs__tab[aria-selected="true"] {
+
+.ds-tabs__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tabs-space-xs);
+  min-width: 0;
+}
+
+.ds-tabs__label {
+  display: block;
+  flex: 0 0 auto;
+  padding-inline: var(--tabs-label-padding-x);
+  color: currentColor;
+  font: inherit;
+  white-space: nowrap;
+  word-break: break-word;
+}
+
+.ds-tabs__tab[aria-selected="true"],
+.ds-tabs__tab[data-state="active"] {
   color: var(--tabs-content-default);
   font-weight: var(--bh-font-weight-medium);
 }
-
-.ds-tabs--segment .ds-tabs__tab,
-.ds-tabs--rounded .ds-tabs__tab {
-  gap: var(--tabs-space-xs);
-}
-
-.ds-tabs--segment .ds-tabs__tab {
-  border-radius: var(--tabs-radius-full);
-}
-
-.ds-tabs--rounded .ds-tabs__tab {
-  border-radius: var(--tabs-radius-md);
-}
-
+
+.ds-tabs--segment .ds-tabs__tab,
+.ds-tabs--rounded .ds-tabs__tab {
+  gap: var(--tabs-space-xs);
+}
+
+.ds-tabs--segment .ds-tabs__tab {
+  border-radius: var(--tabs-radius-full);
+}
+
+.ds-tabs--rounded .ds-tabs__tab {
+  border-radius: var(--tabs-radius-md);
+}
+
 .ds-tabs--segment .ds-tabs__tab[aria-selected="true"],
-.ds-tabs--rounded .ds-tabs__tab[aria-selected="true"] {
+.ds-tabs--segment .ds-tabs__tab[data-state="active"],
+.ds-tabs--rounded .ds-tabs__tab[aria-selected="true"],
+.ds-tabs--rounded .ds-tabs__tab[data-state="active"] {
   background: var(--tabs-bg-default);
   box-shadow: var(--tabs-shadow-selected);
 }
@@ -154,20 +163,21 @@
   min-height: var(--tabs-height-segment-xs);
   padding: var(--tabs-space-xs) var(--tabs-space-lg);
 }
-
-.ds-tabs--segment.ds-tabs--full .ds-tabs__tab,
-.ds-tabs--rounded.ds-tabs--full .ds-tabs__tab {
-  flex: 1 0 0;
-}
-
+
+.ds-tabs--segment.ds-tabs--full .ds-tabs__tab,
+.ds-tabs--rounded.ds-tabs--full .ds-tabs__tab {
+  flex: 1 0 0;
+}
+
 .ds-tabs--underline .ds-tabs__tab {
   border-bottom: var(--tabs-space-xxs) solid transparent;
 }
-
-.ds-tabs--underline .ds-tabs__tab[aria-selected="true"] {
-  border-bottom-color: var(--tabs-content-brand);
-}
-
+
+.ds-tabs--underline .ds-tabs__tab[aria-selected="true"],
+.ds-tabs--underline .ds-tabs__tab[data-state="active"] {
+  border-bottom-color: var(--tabs-content-brand);
+}
+
 .ds-tabs--underline.ds-tabs--md .ds-tabs__tab {
   min-height: var(--tabs-height-underline-md);
   padding-block: var(--tabs-space-md);
@@ -182,16 +192,27 @@
 .ds-tabs--underline.ds-tabs--xs .ds-tabs__content {
   height: var(--tabs-height-underline-content);
 }
-
-.ds-tabs--underline.ds-tabs--full .ds-tabs__tab {
-  flex: 1 0 0;
-}
-
-.ds-tabs--rtl .ds-tabs__tab {
-  text-align: right;
-}
-
+
+.ds-tabs--underline.ds-tabs--full .ds-tabs__tab {
+  flex: 1 0 0;
+}
+
+.ds-tabs--rtl .ds-tabs__tab {
+  text-align: start;
+}
+
 .ds-tabs--rtl {
   --tabs-label-padding-x: var(--tabs-space-xxs);
   font-family: var(--bh-font-family);
 }
+
+.ds-tabs__panel {
+  margin-top: var(--tabs-space-3xl);
+  color: var(--tabs-content-default);
+  outline: none;
+}
+
+.ds-tabs__panel:focus-visible {
+  outline: var(--tabs-space-xxs) solid var(--tabs-content-brand);
+  outline-offset: var(--tabs-space-xxs);
+}

package/registry/components/tabs.tsx

@@ -0,0 +1,246 @@
+"use client"
+
+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"
+
+export type TabsVariant = "underline" | "segment" | "rounded"
+export type TabsSize = "md" | "sm" | "xs"
+
+export type TabsItem = {
+  content?: React.ReactNode
+  disabled?: boolean
+  label: React.ReactNode
+  value?: string
+}
+
+type RadixTabsRootProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Root
+>
+
+type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root>
+type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+  fullWidth?: boolean
+  size?: TabsSize
+  variant?: TabsVariant
+}
+type TabsTriggerProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Trigger
+>
+type TabsContentProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Content
+>
+
+type TabsProps = Omit<
+  RadixTabsRootProps,
+  "defaultValue" | "dir" | "onValueChange" | "value"
+> & {
+  activeIndex?: number
+  ariaLabel?: string
+  className?: string
+  defaultActiveIndex?: number
+  defaultValue?: string
+  dir?: "ltr" | "rtl"
+  fullWidth?: boolean
+  items?: Array<string | TabsItem>
+  onActiveIndexChange?: (index: number) => void
+  onValueChange?: (value: string) => void
+  rootClassName?: string
+  size?: TabsSize
+  value?: string
+  variant?: TabsVariant
+}
+
+const TabsRoot = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(function TabsList(
+  {
+    className,
+    dir,
+    fullWidth = false,
+    size = "md",
+    variant = "underline",
+    ...props
+  },
+  ref
+) {
+  const isRtl = dir === "rtl"
+
+  return (
+    <TabsPrimitive.List
+      data-size={size}
+      data-slot="tabs-list"
+      data-variant={variant}
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "ds-tabs",
+        `ds-tabs--${variant}`,
+        `ds-tabs--${size}`,
+        fullWidth ? "ds-tabs--full" : "ds-tabs--hug",
+        isRtl ? "ds-tabs--rtl" : dir === "ltr" ? "ds-tabs--ltr" : undefined,
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(function TabsTrigger({ children, className, dir = "auto", ...props }, ref) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      ref={ref}
+      className={cn("ds-tabs__tab", className)}
+      {...props}
+    >
+      <span className="ds-tabs__content">
+        <span className="ds-tabs__label" dir={dir}>
+          {children}
+        </span>
+      </span>
+    </TabsPrimitive.Trigger>
+  )
+})
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  TabsContentProps
+>(function TabsContent({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      ref={ref}
+      className={cn("ds-tabs__panel", className)}
+      {...props}
+    />
+  )
+})
+
+function Tabs({
+  activeIndex,
+  ariaLabel,
+  children,
+  className = "",
+  defaultActiveIndex = 0,
+  defaultValue,
+  dir,
+  fullWidth = false,
+  items = [],
+  onActiveIndexChange,
+  onValueChange,
+  rootClassName,
+  size = "md",
+  value,
+  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)
+  const uncontrolledDefaultValue =
+    defaultValue ??
+    normalizedItems[defaultActiveIndex]?.value ??
+    normalizedItems[0]?.value
+  const hasPanels = normalizedItems.some((item) => item.content !== undefined)
+
+  function handleValueChange(nextValue: string) {
+    onValueChange?.(nextValue)
+
+    const nextIndex = normalizedItems.findIndex((item) => item.value === nextValue)
+    if (nextIndex >= 0) {
+      onActiveIndexChange?.(nextIndex)
+    }
+  }
+
+  return (
+    <TabsRoot
+      data-slot="tabs-root"
+      defaultValue={activeValue === undefined ? uncontrolledDefaultValue : undefined}
+      dir={resolvedDirection}
+      ref={rootRef}
+      value={activeValue}
+      onValueChange={handleValueChange}
+      className={rootClassName}
+      {...props}
+    >
+      <TabsList
+        aria-label={ariaLabel}
+        className={className}
+        dir={resolvedDirection}
+        fullWidth={fullWidth}
+        size={size}
+        variant={variant}
+      >
+        {normalizedItems.map((item) => (
+          <TabsTrigger
+            disabled={item.disabled}
+            key={item.value}
+            value={item.value}
+          >
+            {item.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {hasPanels
+        ? normalizedItems.map((item) =>
+            item.content === undefined ? null : (
+              <TabsContent key={`${item.value}-panel`} value={item.value}>
+                {item.content}
+              </TabsContent>
+            )
+          )
+        : null}
+      {children}
+    </TabsRoot>
+  )
+}
+
+function normalizeTabsItem(item: string | TabsItem, index: number): TabsItem & {
+  value: string
+} {
+  if (typeof item === "string") {
+    return {
+      label: item,
+      value: getTabsItemValue(item, index),
+    }
+  }
+
+  return {
+    ...item,
+    value: item.value ?? getTabsItemValue(item.label, index),
+  }
+}
+
+function getTabsItemValue(label: React.ReactNode, index: number) {
+  if (typeof label !== "string") return `tab-${index}`
+
+  const slug = label
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "")
+
+  return slug || `tab-${index}`
+}
+
+export { Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger }
+export type {
+  TabsContentProps,
+  TabsListProps,
+  TabsProps,
+  TabsRootProps,
+  TabsTriggerProps,
+}

package/registry/components/tag.tsx

@@ -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

@@ -54,7 +54,7 @@ const textareaSurface = cva(
     "min-h-[var(--bh-textarea-min-height)] p-[var(--bh-textarea-padding)]",
     "transition-[background-color,box-shadow]",
     "[--bh-textarea-border:var(--bh-border-input)] [--shadow-textarea:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-textarea-border,var(--bh-border-input)),var(--shadow-component-default)]",
-    "after:pointer-events-none after:absolute after:inset-[var(--bh-textarea-focus-ring-inset)] after:rounded-[var(--bh-textarea-radius)] after:border-[length:var(--bh-textarea-focus-ring-width)] after:border-[var(--bh-border-focus)] after:opacity-0 after:content-['']",
+    "after:pointer-events-none after:absolute after:inset-[var(--bh-textarea-focus-ring-inset)] after:rounded-[var(--bh-textarea-radius)] after:border-[length:var(--bh-textarea-focus-ring-width)] after:border-[var(--bh-border-focus)] after:opacity-[var(--bh-opacity-0)] after:content-['']",
     "focus-within:after:opacity-[var(--bh-opacity-30)]",
   ],
   {
@@ -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>
   )