banhaten 0.1.1 → 0.1.3

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-disabled);
+}
+
 .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,242 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+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" : "ds-tabs--ltr",
+        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 = "ltr",
+  fullWidth = false,
+  items = [],
+  onActiveIndexChange,
+  onValueChange,
+  rootClassName,
+  size = "md",
+  value,
+  variant = "underline",
+  ...props
+}: TabsProps) {
+  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={dir}
+      value={activeValue}
+      onValueChange={handleValueChange}
+      className={rootClassName}
+      {...props}
+    >
+      <TabsList
+        aria-label={ariaLabel}
+        className={className}
+        dir={dir}
+        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/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)]",
   ],
   {
@@ -100,7 +100,7 @@ const textareaControl = cva(
     variants: {
       type: {
         default:
-          "min-h-[calc(var(--bh-textarea-min-height)_-_var(--bh-textarea-padding)_-_var(--bh-textarea-padding))]",
+          "min-h-[calc(var(--bh-textarea-min-height)_-_var(--bh-textarea-padding)_-_var(--bh-textarea-padding))] overflow-y-auto [scrollbar-gutter:stable]",
         tags:
           "h-[var(--bh-text-body-md-regular-line-height)] min-h-[var(--bh-text-body-md-regular-line-height)] overflow-hidden",
       },

package/registry/components/toast.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import {
+  Toaster as SonnerToaster,
+  toast as sonnerToast,
+  type ExternalToast,
+  type ToasterProps as SonnerToasterProps,
+} from "sonner"
+
+import { cn } from "@/lib/utils"
+
+type ToastIntent = "default" | "success" | "danger" | "warning" | "info"
+type ToastSide = "start" | "end"
+type ToastOptions = ExternalToast & {
+  intent?: ToastIntent
+}
+type ToasterProps = Omit<SonnerToasterProps, "position"> & {
+  dir?: "ltr" | "rtl"
+  position?: SonnerToasterProps["position"]
+  side?: ToastSide
+}
+
+const intentClassNames: Record<ToastIntent, string> = {
+  danger:
+    "[--bh-toast-accent:var(--bh-content-danger-default)] [--bh-toast-accent-bg:var(--bh-bg-danger-subtle)]",
+  default:
+    "[--bh-toast-accent:var(--bh-content-brand-default)] [--bh-toast-accent-bg:var(--bh-bg-brand-subtle)]",
+  info:
+    "[--bh-toast-accent:var(--bh-content-brand-default)] [--bh-toast-accent-bg:var(--bh-bg-info-subtle)]",
+  success:
+    "[--bh-toast-accent:var(--bh-content-success-default)] [--bh-toast-accent-bg:var(--bh-bg-success-subtle)]",
+  warning:
+    "[--bh-toast-accent:var(--bh-content-warning-default)] [--bh-toast-accent-bg:var(--bh-bg-warning-subtle)]",
+}
+
+const toastClassName = [
+  "border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-component-default)]",
+  "rounded-[var(--bh-radius-xl-10)] font-[var(--bh-font-family)]",
+  "[--normal-bg:var(--bh-bg-raised)] [--normal-border:var(--bh-border-subtle)] [--normal-text:var(--bh-content-default)]",
+  "[--success-bg:var(--bh-bg-raised)] [--success-border:var(--bh-border-success-subtle)] [--success-text:var(--bh-content-default)]",
+  "[--error-bg:var(--bh-bg-raised)] [--error-border:var(--bh-border-danger-subtle)] [--error-text:var(--bh-content-default)]",
+  "[--warning-bg:var(--bh-bg-raised)] [--warning-border:var(--bh-border-warning-subtle)] [--warning-text:var(--bh-content-default)]",
+  "[--info-bg:var(--bh-bg-raised)] [--info-border:var(--bh-border-info-subtle)] [--info-text:var(--bh-content-default)]",
+].join(" ")
+
+function Toaster({
+  className,
+  closeButton = true,
+  dir,
+  position,
+  richColors = false,
+  side = "end",
+  toastOptions,
+  ...props
+}: ToasterProps) {
+  const resolvedPosition = position ?? getToastPosition(dir, side)
+  const mergedToastOptions: ToasterProps["toastOptions"] = {
+    ...toastOptions,
+    classNames: {
+      ...toastOptions?.classNames,
+      toast: cn(toastClassName, toastOptions?.classNames?.toast),
+      title: cn(
+        "text-[length:var(--bh-text-body-sm-semibold-font-size)] font-[var(--bh-text-body-sm-semibold-font-weight)] leading-[var(--bh-text-body-sm-semibold-line-height)] tracking-[var(--bh-text-body-sm-semibold-letter-spacing)]",
+        toastOptions?.classNames?.title
+      ),
+      description: cn(
+        "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)]",
+        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)]",
+        toastOptions?.classNames?.actionButton
+      ),
+      cancelButton: cn(
+        "rounded-[var(--bh-control-default)] bg-[var(--bh-bg-neutral-soft)] px-[var(--bh-space-lg-10)] py-[var(--bh-space-xs-4)] text-[var(--bh-content-default)]",
+        toastOptions?.classNames?.cancelButton
+      ),
+    },
+  }
+
+  return (
+    <SonnerToaster
+      className={cn("toaster group", className)}
+      closeButton={closeButton}
+      dir={dir}
+      position={resolvedPosition}
+      richColors={richColors}
+      toastOptions={mergedToastOptions}
+      {...props}
+    />
+  )
+}
+
+function showToast(message: React.ReactNode, options: ToastOptions = {}) {
+  const { intent = "default", className, ...rest } = options
+  return sonnerToast(message, {
+    className: cn(intentClassNames[intent], className),
+    ...rest,
+  })
+}
+
+const toast = Object.assign(showToast, {
+  danger: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "danger" }),
+  dismiss: sonnerToast.dismiss,
+  error: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "danger" }),
+  info: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "info" }),
+  loading: sonnerToast.loading,
+  promise: sonnerToast.promise,
+  success: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "success" }),
+  warning: (message: React.ReactNode, options?: Omit<ToastOptions, "intent">) =>
+    showToast(message, { ...options, intent: "warning" }),
+})
+
+function getToastPosition(
+  dir: ToasterProps["dir"],
+  side: ToastSide
+): SonnerToasterProps["position"] {
+  if (side === "start") {
+    return dir === "rtl" ? "top-right" : "top-left"
+  }
+
+  return dir === "rtl" ? "top-left" : "top-right"
+}
+
+export { Toaster, toast }
+export type { ToastIntent, ToastOptions, ToasterProps }

package/registry/components/tooltip.tsx

@@ -24,6 +24,8 @@ const defaultTooltipSupportText =
 // Radix sideOffset requires numbers; these mirror the tooltip spacing aliases.
 const TOOLTIP_POINTER_SIDE_OFFSET_PX = 7
 const TOOLTIP_POINTERLESS_SIDE_OFFSET_PX = 6
+// Radix collisionPadding requires a number; this mirrors --bh-space-md-8.
+const TOOLTIP_COLLISION_PADDING_PX = 8
 
 const tooltipContentVariants = cva(
   [
@@ -87,6 +89,7 @@ const TooltipContent = React.forwardRef<
     children,
     className,
     closeLabel,
+    collisionPadding = TOOLTIP_COLLISION_PADDING_PX,
     onCloseClick,
     pointerPosition = "top-left",
     shortcut,
@@ -127,6 +130,7 @@ const TooltipContent = React.forwardRef<
         ref={ref}
         side={side ?? placement.side}
         align={align ?? placement.align}
+        collisionPadding={collisionPadding}
         sideOffset={
           sideOffset ??
           (shouldShowPointer