banhaten 0.2.0 → 0.4.0

package/registry/components/expanded/steps.css

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

@@ -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: 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,
@@ -333,6 +349,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--bh-space-md-8);
+  max-width: 100%;
 }
 
 .ds-table-avatar-text > span:last-child {
@@ -352,7 +369,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 +378,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 +391,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 +450,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);
@@ -532,14 +510,16 @@ img.ds-table-avatar {
 
 .ds-table-icon-button svg,
 .ds-table-icon-label svg {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
+  width: var(--bh-icon-size-default);
+  height: var(--bh-icon-size-default);
 }
 
 .ds-table-icon-label > span:first-child {
   flex: 0 0 auto;
   display: inline-grid;
   place-items: center;
+  width: var(--bh-icon-slot-size-default);
+  height: var(--bh-icon-slot-size-default);
 }
 
 .ds-table-icon-label > span:last-child {
@@ -574,12 +554,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 +580,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

@@ -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 {
@@ -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.tsx

@@ -9,7 +9,7 @@ import {
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Kbd, KbdShortcut } from "@/components/ui/kbd"
+import { Shortcut } from "@/components/ui/kbd"
 import {
   getInputDefaultValue,
   getInputHelperText,
@@ -419,7 +419,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
             <span
               data-slot="input-content"
-              className={cn(inputContent({ size: resolvedSize }))}
+              className={cn(
+                inputContent({ size: resolvedSize }),
+                kind === "shortcut" &&
+                  resolvedSize === "lg" &&
+                  "px-[var(--bh-input-md-padding-x)]"
+              )}
             >
               {shouldShowLeadingIcon ? (
                 <InputLeadingIcon disabled={isDisabled} icon={leadingIcon} />
@@ -470,9 +475,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
               {kind === "shortcut" ? (
                 hasRenderableContent(shortcut) ? (
-                  <Kbd disabled={isDisabled}>{shortcut}</Kbd>
+                  <Shortcut disabled={isDisabled}>{shortcut}</Shortcut>
                 ) : (
-                  <KbdShortcut disabled={isDisabled} keys={shortcutKeys} />
+                  <Shortcut disabled={isDisabled} keys={shortcutKeys} />
                 )
               ) : null}
             </span>
@@ -618,7 +623,9 @@ function InputLeadingIcon({
       aria-hidden="true"
       data-slot="input-leading-icon"
       className={cn(
-        "flex size-[var(--bh-input-icon-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)]",
+        "flex size-[var(--bh-input-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)]",
+        "[&>img]:size-[var(--bh-input-icon-size)] [&>img]:shrink-0 [&>img]:object-contain",
+        "[&>svg]:size-[var(--bh-input-icon-size)] [&>svg]:shrink-0",
         disabled && "text-[var(--bh-content-disabled)]"
       )}
     >

package/registry/components/item.tsx

@@ -99,7 +99,7 @@ const ItemMedia = React.forwardRef<HTMLDivElement, ItemMediaProps>(
         ref={ref}
         className={cn(
           "flex size-[var(--bh-item-media-size)] shrink-0 items-center justify-center overflow-hidden",
-          "[&_svg]:size-[var(--bh-item-icon-size)] [&_img]:size-full [&_img]:object-cover",
+          "[&_svg]:size-[var(--bh-item-icon-size)] [&_svg]:m-[calc((var(--bh-item-icon-slot-size)-var(--bh-item-icon-size))/2)] [&_img]:size-full [&_img]:object-cover",
           variant === "icon" &&
             "rounded-[var(--bh-item-media-radius)] bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]",
           variant === "avatar" &&