banhaten 0.1.3 → 0.3.0

package/registry/components/expanded/steps.css

@@ -22,7 +22,7 @@
   box-sizing: border-box;
   color: var(--steps-content-default);
   font-family: var(--bh-font-family);
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
 }
 
 .ds-steps *,
@@ -70,7 +70,7 @@
   min-width: 0;
   color: var(--steps-content-default);
   font-family: var(--bh-font-family);
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
 }
 
 .ds-horizontal-step-item--middle {
@@ -169,7 +169,7 @@
   padding-bottom: var(--bh-space-xs-4);
   color: var(--steps-content-default);
   font-family: var(--bh-font-family);
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
 }
 
 .ds-steps--vertical > .ds-vertical-step-item {
@@ -197,7 +197,7 @@
   min-width: 0;
 }
 
-.ds-vertical-step-item--rtl .ds-vertical-step-item__content {
+.ds-vertical-step-item:dir(rtl) .ds-vertical-step-item__content {
   align-items: flex-end;
 }
 
@@ -214,7 +214,7 @@
   text-align: start;
 }
 
-.ds-vertical-step-item--rtl .ds-vertical-step-item__copy {
+.ds-vertical-step-item:dir(rtl) .ds-vertical-step-item__copy {
   text-align: right;
 }
 
@@ -225,10 +225,6 @@
   min-width: 0;
 }
 
-.ds-vertical-step-item--rtl .ds-vertical-step-item__header {
-  direction: ltr;
-}
-
 .ds-vertical-step-item__label {
   flex: 1 0 0;
   min-width: 0;
@@ -247,11 +243,6 @@
   white-space: nowrap;
 }
 
-.ds-vertical-step-item--rtl .ds-vertical-step-item__label,
-.ds-vertical-step-item--rtl .ds-vertical-step-item__support {
-  direction: rtl;
-}
-
 .ds-vertical-step-item__caption {
   width: 100%;
   color: var(--steps-content-subtle);
@@ -282,7 +273,7 @@
   gap: var(--steps-space-md);
 }
 
-.ds-vertical-step-item--rtl .ds-vertical-step-item__actions {
+.ds-vertical-step-item:dir(rtl) .ds-vertical-step-item__actions {
   align-self: flex-start;
 }
 
@@ -291,3 +282,75 @@
   height: var(--bh-space-5xl-24);
   flex: 0 0 auto;
 }
+
+.ds-progress-steps {
+  margin: 0;
+  padding: 0;
+  font-family: var(--bh-font-family);
+}
+
+.ds-progress-steps--markers {
+  display: flex;
+  align-items: flex-start;
+  list-style: none;
+}
+
+.ds-progress-steps__item {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--bh-space-md-8);
+}
+
+.ds-progress-steps__marker {
+  display: inline-grid;
+  width: var(--bh-space-5xl-24);
+  height: var(--bh-space-5xl-24);
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: var(--bh-radius-full);
+  background: var(--bh-interactive-secondary-default);
+  color: var(--bh-content-default);
+}
+
+.ds-progress-steps__item.is-complete .ds-progress-steps__marker,
+.ds-progress-steps__item.is-active .ds-progress-steps__marker {
+  background: var(--bh-interactive-brand-default);
+  color: var(--bh-content-on-brand);
+}
+
+.ds-progress-steps__connector {
+  display: block;
+  width: var(--bh-space-9xl-64);
+  height: var(--bh-space-xxxs-1);
+  flex: 0 0 auto;
+  background: var(--bh-border-default);
+}
+
+.ds-progress-steps__connector.is-complete {
+  background: var(--bh-border-accent-purple-strong);
+}
+
+.ds-progress-steps--bars {
+  display: grid;
+  gap: var(--bh-space-md-8);
+}
+
+.ds-progress-steps__track {
+  display: flex;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-progress-steps__segment {
+  display: block;
+  min-width: var(--bh-space-3xl-16);
+  height: var(--bh-space-xs-4);
+  flex: 1 1 0;
+  border-radius: var(--bh-radius-full);
+  background: var(--bh-interactive-secondary-default);
+}
+
+.ds-progress-steps__segment[data-active="true"] {
+  background: var(--bh-interactive-brand-default);
+}

package/registry/components/expanded/table.css

@@ -6,7 +6,7 @@
   gap: var(--bh-space-xl-12);
   color: var(--bh-content-default);
   font-family: var(--bh-font-family);
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
 }
 
 .ds-data-table *,
@@ -64,12 +64,15 @@
 }
 
 .ds-data-table__toolbar [data-slot="toolbar-section"] {
+  max-width: 100%;
   min-width: 0;
+  flex-wrap: wrap;
 }
 
 .ds-data-table__toolbar [data-slot="toolbar-search"] {
-  flex: 1 1 var(--bh-space-19xl-384);
-  min-width: var(--bh-space-16xl-256);
+  width: min(100%, var(--bh-input-width));
+  min-width: 0;
+  flex: 1 1 min(100%, var(--bh-space-16xl-256));
 }
 
 .ds-data-table__body {
@@ -135,14 +138,21 @@
 .ds-table-wrap {
   box-sizing: border-box;
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  contain: paint;
   overflow: auto;
-  scrollbar-gutter: stable;
   border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
   border-radius: var(--bh-radius-lg-8);
   background: var(--bh-bg-default);
   color: var(--bh-content-default);
   font-family: var(--bh-font-family);
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
+  outline: none;
+}
+
+.ds-table-wrap:focus-visible {
+  box-shadow: var(--shadow-component-focus-ring);
 }
 
 .ds-table-wrap *,
@@ -182,24 +192,26 @@
 
 .ds-table__cell {
   overflow: hidden;
-  padding: 0 var(--bh-space-md-8);
+  padding-block: 0;
+  padding-inline: var(--bh-space-xl-12);
   vertical-align: middle;
 }
 
-.ds-table__cell--fill {
-  width: auto;
+.ds-table__cell--actions {
+  padding-inline: var(--bh-space-md-8);
 }
 
-.ds-table__cell--selection,
-.ds-table__cell--actions {
-  text-align: center;
+.ds-table__cell--fill {
+  width: auto;
 }
 
-.ds-table__cell--center {
+.ds-table .ds-table__cell--selection,
+.ds-table .ds-table__cell--actions,
+.ds-table .ds-table__cell--center {
   text-align: center;
 }
 
-.ds-table__cell--end {
+.ds-table .ds-table__cell--end {
   text-align: end;
 }
 
@@ -212,8 +224,12 @@
 }
 
 .ds-table__row--disabled {
-  color: var(--bh-content-muted);
-  opacity: var(--bh-opacity-muted);
+  color: var(--bh-content-default);
+}
+
+.ds-table__row--disabled .ds-table-item-text,
+.ds-table__row--disabled .ds-table-avatar-text em {
+  color: var(--bh-content-default);
 }
 
 .ds-table__sort {
@@ -317,7 +333,7 @@
 }
 
 .ds-table-item-text {
-  font-weight: var(--bh-font-weight-semibold);
+  font-weight: var(--bh-text-body-sm-regular-font-weight);
 }
 
 .ds-table-item-text--subtle {
@@ -325,7 +341,7 @@
 }
 
 .ds-table-item-text--medium {
-  font-weight: var(--bh-font-weight-semibold);
+  font-weight: var(--bh-text-body-sm-medium-font-weight);
 }
 
 .ds-table-avatar-text,
@@ -352,7 +368,7 @@
 
 .ds-table-avatar-text em {
   overflow: hidden;
-  color: var(--bh-content-muted);
+  color: var(--bh-content-default);
   font-size: var(--bh-text-body-2xs-regular-font-size);
   font-style: normal;
   line-height: var(--bh-text-body-2xs-regular-line-height);
@@ -361,20 +377,7 @@
 }
 
 .ds-table-avatar {
-  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
-  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
   flex: 0 0 auto;
-  display: inline-grid;
-  place-items: center;
-  border-radius: var(--bh-radius-full);
-  background: var(--bh-bg-brand-soft);
-  color: var(--bh-content-brand-default);
-  font-size: var(--bh-text-body-3xs-regular-font-size);
-  font-weight: var(--bh-font-weight-bold);
-}
-
-img.ds-table-avatar {
-  object-fit: cover;
 }
 
 .ds-table-badges,
@@ -387,8 +390,7 @@ img.ds-table-avatar {
   max-width: 100%;
 }
 
-.ds-table-badge,
-.ds-table-tags span {
+.ds-table-badge {
   min-height: var(--bh-space-5xl-24);
   display: inline-flex;
   align-items: center;
@@ -447,37 +449,12 @@ img.ds-table-avatar {
 
 .ds-table-progress {
   min-width: var(--bh-table-selection-column-min-width);
-  display: inline-grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--bh-space-md-8);
-}
-
-.ds-table-progress > span {
-  height: var(--bh-space-md-8);
-  overflow: hidden;
-  border-radius: var(--bh-radius-full);
-  background: var(--bh-bg-muted);
 }
 
-.ds-table-progress i {
-  height: 100%;
-  display: block;
-  border-radius: inherit;
+.ds-table-progress--success [data-slot="progress-fill"] {
   background: var(--bh-content-success-default);
 }
 
-.ds-table-progress--brand i {
-  background: var(--bh-bg-brand-default);
-}
-
-.ds-table-progress em {
-  color: var(--bh-content-subtle);
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  font-style: normal;
-  font-weight: var(--bh-font-weight-semibold);
-}
-
 .ds-table-toggle {
   width: calc(var(--bh-space-6xl-32) + var(--bh-space-xxs-2));
   height: var(--bh-space-4xl-20);
@@ -574,12 +551,23 @@ img.ds-table-avatar {
 }
 
 .ds-table-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-xxxs-1);
   color: var(--bh-bg-neutral-medium);
-  letter-spacing: var(--bh-space-xxxs-1);
+  vertical-align: middle;
+}
+
+.ds-table-rating svg {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  flex: 0 0 auto;
+  fill: transparent;
 }
 
 .ds-table-rating .is-filled {
   color: var(--bh-bg-accent-golden-default);
+  fill: currentColor;
 }
 
 .ds-table-avatar-stack .ds-table-avatar {
@@ -589,24 +577,27 @@ img.ds-table-avatar {
 
 .ds-table-avatar--count,
 .ds-table-avatar-stack button {
-  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
-  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  width: var(--bh-avatar-size-xs);
+  height: var(--bh-avatar-size-xs);
   border: var(--bh-space-xxs-2) solid var(--bh-bg-raised);
   border-radius: var(--bh-radius-full);
   background: var(--bh-bg-muted);
   color: var(--bh-content-subtle);
-  font-size: var(--bh-text-body-3xs-regular-font-size);
-  font-weight: var(--bh-font-weight-bold);
+  font-size: var(--bh-avatar-fallback-font-size-xs);
+  font-weight: var(--bh-font-weight-semibold);
 }
 
-.ds-table-wrap[dir="rtl"] {
-  font-family: var(--bh-font-family);
+.ds-table-avatar-stack--lg .ds-table-avatar--count,
+.ds-table-avatar-stack--lg button {
+  width: var(--bh-avatar-size-md);
+  height: var(--bh-avatar-size-md);
+  font-size: var(--bh-avatar-fallback-font-size-md);
 }
 
-.ds-table-wrap[dir="rtl"] .ds-table-progress i {
-  margin-inline-start: auto;
+.ds-table-wrap:dir(rtl) {
+  font-family: var(--bh-font-family);
 }
 
-.ds-table-wrap[dir="rtl"] .ds-table-toggle[aria-pressed="true"] span {
+.ds-table-wrap:dir(rtl) .ds-table-toggle[aria-pressed="true"] span {
   transform: translateX(calc(-1 * var(--bh-space-2xl-14)));
 }

package/registry/components/expanded/timeline.css

@@ -20,7 +20,7 @@
   box-sizing: border-box;
   color: var(--timeline-content-default);
   font-family: inherit;
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
 }
 
 .ds-timeline {
@@ -49,10 +49,17 @@
   align-items: flex-start;
   width: min(var(--bh-timeline-grid-width), 100%);
   min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  outline: none;
 }
 
-.ds-timeline--rtl,
-.ds-timeline-item--rtl {
+.ds-timeline--horizontal:focus-visible {
+  box-shadow: var(--shadow-component-focus-ring);
+}
+
+.ds-timeline:dir(rtl),
+.ds-timeline-item:dir(rtl) {
   font-family: var(--bh-font-family);
 }
 
@@ -68,7 +75,7 @@
   min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
 }
 
-.ds-timeline-item--vertical.ds-timeline-item--rtl {
+.ds-timeline-item--vertical:dir(rtl) {
   justify-content: flex-end;
 }
 
@@ -82,7 +89,7 @@
   width: var(--bh-timeline-sidebar-width);
 }
 
-.ds-timeline-item--horizontal.ds-timeline-item--rtl {
+.ds-timeline-item--horizontal:dir(rtl) {
   align-items: flex-end;
 }
 
@@ -90,7 +97,6 @@
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  direction: ltr;
 }
 
 .ds-timeline__indicator--vertical {
@@ -190,7 +196,7 @@
   color: var(--timeline-content-default);
 }
 
-.ds-timeline-item--rtl .ds-timeline__body {
+.ds-timeline-item:dir(rtl) .ds-timeline__body {
   align-items: flex-end;
   text-align: right;
 }
@@ -198,12 +204,7 @@
 .ds-timeline-item--horizontal .ds-timeline__body {
   flex: 0 0 auto;
   width: 100%;
-  padding-right: var(--timeline-space-xl);
-}
-
-.ds-timeline-item--horizontal.ds-timeline-item--rtl .ds-timeline__body {
-  padding-right: 0;
-  padding-left: var(--timeline-space-xl);
+  padding-inline-end: var(--timeline-space-xl);
 }
 
 .ds-timeline__copy {
@@ -221,7 +222,7 @@
   min-width: 0;
   margin: 0;
   overflow-wrap: anywhere;
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
 }
 
 .ds-timeline__label {
@@ -251,7 +252,7 @@
   padding-top: var(--timeline-space-xs);
 }
 
-.ds-timeline-item--vertical.ds-timeline-item--ltr .ds-timeline__date--leading {
+.ds-timeline-item--vertical:dir(ltr) .ds-timeline__date--leading {
   text-align: right;
 }
 
@@ -261,9 +262,9 @@
   text-align: start;
 }
 
-.ds-timeline-item--rtl .ds-timeline__date--leading,
-.ds-timeline-item--rtl .ds-timeline__date--top,
-.ds-timeline-item--rtl .ds-timeline__date--bottom {
+.ds-timeline-item:dir(rtl) .ds-timeline__date--leading,
+.ds-timeline-item:dir(rtl) .ds-timeline__date--top,
+.ds-timeline-item:dir(rtl) .ds-timeline__date--bottom {
   text-align: right;
 }
 

package/registry/components/field.tsx

@@ -10,10 +10,14 @@ type FieldOrientation = "vertical" | "horizontal" | "responsive"
 
 type FieldContextValue = {
   controlId: string
-  descriptionId: string
+  defaultDescriptionId: string
+  defaultErrorId: string
+  descriptionIds: readonly string[]
   disabled?: boolean
-  errorId: string
+  errorIds: readonly string[]
   invalid?: boolean
+  registerDescription: (id: string) => () => void
+  registerError: (id: string) => () => void
 }
 
 type FieldProps = React.ComponentProps<"div"> & {
@@ -48,15 +52,38 @@ function Field({
 }: FieldProps) {
   const generatedId = React.useId()
   const resolvedControlId = controlId ?? `${generatedId}-control`
+  const [descriptionIds, setDescriptionIds] = React.useState<string[]>([])
+  const [errorIds, setErrorIds] = React.useState<string[]>([])
+  const registerDescription = React.useCallback(
+    (id: string) => registerFieldReference(setDescriptionIds, id),
+    []
+  )
+  const registerError = React.useCallback(
+    (id: string) => registerFieldReference(setErrorIds, id),
+    []
+  )
   const context = React.useMemo<FieldContextValue>(
     () => ({
       controlId: resolvedControlId,
-      descriptionId: `${generatedId}-description`,
+      defaultDescriptionId: `${generatedId}-description`,
+      defaultErrorId: `${generatedId}-error`,
+      descriptionIds,
       disabled,
-      errorId: `${generatedId}-error`,
+      errorIds,
       invalid,
+      registerDescription,
+      registerError,
     }),
-    [disabled, generatedId, invalid, resolvedControlId]
+    [
+      descriptionIds,
+      disabled,
+      errorIds,
+      generatedId,
+      invalid,
+      registerDescription,
+      registerError,
+      resolvedControlId,
+    ]
   )
 
   return (
@@ -86,7 +113,10 @@ function FieldControl({ className, ...props }: FieldControlProps) {
   const context = useFieldContext("FieldControl")
   const describedBy =
     props["aria-describedby"] ??
-    [context.descriptionId, context.invalid ? context.errorId : undefined]
+    [
+      ...context.descriptionIds,
+      ...(context.invalid ? context.errorIds : []),
+    ]
       .filter(Boolean)
       .join(" ")
 
@@ -117,12 +147,18 @@ function FieldLabel({ htmlFor, ...props }: FieldLabelProps) {
 
 function FieldDescription({ className, id, ...props }: FieldDescriptionProps) {
   const context = useFieldContext("FieldDescription")
+  const resolvedId = id ?? context.defaultDescriptionId
+
+  React.useEffect(
+    () => context.registerDescription(resolvedId),
+    [context.registerDescription, resolvedId]
+  )
 
   return (
     <p
       data-slot="field-description"
       dir="auto"
-      id={id ?? context.descriptionId}
+      id={resolvedId}
       className={cn(
         "m-0 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)]",
         className
@@ -134,12 +170,18 @@ function FieldDescription({ className, id, ...props }: FieldDescriptionProps) {
 
 function FieldError({ className, id, role = "alert", ...props }: FieldErrorProps) {
   const context = useFieldContext("FieldError")
+  const resolvedId = id ?? context.defaultErrorId
+
+  React.useEffect(
+    () => context.registerError(resolvedId),
+    [context.registerError, resolvedId]
+  )
 
   return (
     <p
       data-slot="field-error"
       dir="auto"
-      id={id ?? context.errorId}
+      id={resolvedId}
       role={role}
       className={cn(
         "m-0 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-danger-default)]",
@@ -150,6 +192,17 @@ function FieldError({ className, id, role = "alert", ...props }: FieldErrorProps
   )
 }
 
+function registerFieldReference(
+  setIds: React.Dispatch<React.SetStateAction<string[]>>,
+  id: string
+) {
+  setIds((current) => (current.includes(id) ? current : [...current, id]))
+
+  return () => {
+    setIds((current) => current.filter((candidate) => candidate !== id))
+  }
+}
+
 function FieldGroup({ className, ...props }: FieldGroupProps) {
   return (
     <div

package/registry/components/input-content.ts

@@ -22,6 +22,7 @@ type InputTag = {
 
 const inputCopy = {
   shortcut: "\u2318K",
+  shortcutKeys: ["Mod", "K"] as const,
 } as const
 
 function getInputPlaceholder({

package/registry/components/input-otp.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import { cva } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 import {
   inputControl,
   inputRoot,
@@ -71,6 +72,7 @@ const inputOtpSlotGroup = cva(
 const inputOtpSlot = cva("shrink-0", {
   variants: {
     size: {
+      comfortable: "w-[var(--bh-input-otp-slot-comfortable-width)]",
       md: "w-[var(--bh-input-otp-slot-md-width)]",
       lg: "w-[var(--bh-input-otp-slot-lg-width)]",
     },
@@ -154,6 +156,11 @@ const InputOTP = React.forwardRef<HTMLInputElement, InputOTPProps>(
       normalizeValue(defaultValue, slotCount)
     )
     const slotRefs = React.useRef<Array<HTMLInputElement | null>>([])
+    const rootRef = React.useRef<HTMLDivElement | null>(null)
+    const resolvedDirection = useResolvedDirection(
+      dir === "ltr" || dir === "rtl" ? dir : undefined,
+      rootRef
+    )
     const currentValue = normalizeValue(
       isControlled ? value : internalValue,
       slotCount
@@ -235,8 +242,10 @@ const InputOTP = React.forwardRef<HTMLInputElement, InputOTPProps>(
       onKeyDown?.(event)
       if (event.defaultPrevented) return
 
-      const previousKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft"
-      const nextKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight"
+      const previousKey =
+        resolvedDirection === "rtl" ? "ArrowRight" : "ArrowLeft"
+      const nextKey =
+        resolvedDirection === "rtl" ? "ArrowLeft" : "ArrowRight"
 
       if (event.key === previousKey) {
         event.preventDefault()
@@ -302,7 +311,8 @@ const InputOTP = React.forwardRef<HTMLInputElement, InputOTPProps>(
         data-slot="input-otp-root"
         data-state={visualState}
         data-variant={variant}
-        dir={dir}
+        dir={dir === "auto" ? "auto" : resolvedDirection}
+        ref={rootRef}
         role="group"
         className={cn(
           inputRoot(),