banhaten 0.1.2 → 0.2.0

package/registry/components/expanded/Table.tsx

@@ -1,16 +1,21 @@
-import { useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { useMemo, useState, type CSSProperties, type ReactNode } from "react";
 import {
   ArrowUpDownIcon,
-  CheckIcon as LucideCheckIcon,
   EditIcon as LucideEditIcon,
   EllipsisIcon,
   EyeIcon,
   FileIcon as LucideFileIcon,
-  MinusIcon,
   Trash2Icon,
 } from "lucide-react";
 import { Pagination, type PaginationPage, type PaginationProps } from "@/components/ui/pagination";
 import { Spinner } from "@/components/ui/spinner";
+import { Avatar as AvatarPrimitive, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Progress as ProgressPrimitive } from "@/components/ui/progress";
+import { Tag } from "@/components/ui/tag";
+import { Toggle } from "@/components/ui/toggle";
 import {
   Toolbar,
   ToolbarBadge,
@@ -65,21 +70,22 @@ export type AvatarItem = {
 };
 
 export type TableAction = {
+  disabled?: boolean;
   icon: "view" | "edit" | "delete" | "more";
   label: string;
   onAction?: () => void;
 };
 
 export type TableItem =
-  | { type: "checkbox"; checked: boolean; indeterminate?: boolean }
+  | { type: "checkbox"; ariaLabel?: string; checked: boolean; disabled?: boolean; indeterminate?: boolean; onCheckedChange?: (checked: boolean) => void }
   | { type: "text"; tone?: "default" | "subtle"; value: string; weight?: "regular" | "medium" }
   | { type: "avatarText"; caption?: string; name: string; src?: string; status?: "top" | "bottom" }
   | { type: "rating"; max?: 5; value: number }
   | { type: "progress"; label?: string; tone?: "success" | "brand"; value: number }
-  | { type: "toggle"; checked: boolean; disabled?: boolean }
+  | { type: "toggle"; ariaLabel?: string; checked: boolean; disabled?: boolean; onCheckedChange?: (checked: boolean) => void }
   | { type: "badges"; items: BadgeItem[]; maxVisible?: number }
   | { type: "onlyAvatar"; alt: string; src?: string }
-  | { type: "avatarStack"; avatars: AvatarItem[]; canAdd?: boolean; count?: number }
+  | { type: "avatarStack"; addLabel?: string; avatars: AvatarItem[]; canAdd?: boolean; count?: number; onAdd?: () => void }
   | { type: "tags"; items: string[]; maxVisible?: number }
   | { type: "file"; label?: string }
   | { type: "brandLogoText"; label: string; logoSrc?: string }
@@ -185,7 +191,7 @@ function cx(...classes: Array<string | false | undefined>) {
 
 export function Table<Row extends TableRowBase>({
   columns,
-  dir = "ltr",
+  dir,
   onSelectedRowIdsChange,
   onSortChange,
   rows,
@@ -311,7 +317,7 @@ export function DataTable<Row extends TableRowBase>({
   columns,
   defaultSort = null,
   description,
-  dir = "ltr",
+  dir,
   emptyState,
   error = false,
   filters = [],
@@ -752,7 +758,15 @@ function clampNumber(value: number, min: number, max: number) {
 function renderTableItem(item: TableItem) {
   switch (item.type) {
     case "checkbox":
-      return <SelectionCheckbox checked={item.checked} indeterminate={item.indeterminate} label="Select row" onChange={() => undefined} />;
+      return (
+        <SelectionCheckbox
+          checked={item.checked}
+          disabled={item.disabled ?? !item.onCheckedChange}
+          indeterminate={item.indeterminate}
+          label={item.ariaLabel ?? "Select row"}
+          onChange={item.onCheckedChange}
+        />
+      );
     case "text":
       return <span className={`ds-table-item-text ds-table-item-text--${item.tone ?? "default"} ds-table-item-text--${item.weight ?? "regular"}`}>{item.value}</span>;
     case "avatarText":
@@ -770,13 +784,29 @@ function renderTableItem(item: TableItem) {
     case "progress":
       return <Progress value={item.value} label={item.label} tone={item.tone ?? "success"} />;
     case "toggle":
-      return <button aria-pressed={item.checked} className="ds-table-toggle" disabled={item.disabled} type="button"><span /></button>;
+      return (
+        <Toggle
+          aria-label={item.ariaLabel ?? "Toggle row value"}
+          checked={item.checked}
+          disabled={item.disabled ?? !item.onCheckedChange}
+          onCheckedChange={item.onCheckedChange}
+          size="sm"
+        />
+      );
     case "badges":
       return <BadgeList items={item.items} maxVisible={item.maxVisible} />;
     case "onlyAvatar":
       return <Avatar name={item.alt} src={item.src} />;
     case "avatarStack":
-      return <AvatarStack avatars={item.avatars} count={item.count} canAdd={item.canAdd} />;
+      return (
+        <AvatarStack
+          addLabel={item.addLabel}
+          avatars={item.avatars}
+          canAdd={item.canAdd}
+          count={item.count}
+          onAdd={item.onAdd}
+        />
+      );
     case "tags":
       return <TagList items={item.items} maxVisible={item.maxVisible} />;
     case "file":
@@ -793,7 +823,7 @@ function renderTableItem(item: TableItem) {
       return (
         <span className="ds-table-action-group">
           {item.actions.map((action) => (
-            <IconButton key={action.label} icon={action.icon} label={action.label} onClick={action.onAction} />
+            <IconButton disabled={action.disabled} key={action.label} icon={action.icon} label={action.label} onClick={action.onAction} />
           ))}
         </span>
       );
@@ -813,31 +843,15 @@ function SelectionCheckbox({
   disabled?: boolean;
   indeterminate?: boolean;
   label: string;
-  onChange: (checked: boolean) => void;
+  onChange?: (checked: boolean) => void;
 }) {
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
-
   return (
-    <label className="ds-table-checkbox">
-      <input
-        aria-checked={indeterminate ? "mixed" : checked}
-        aria-label={label}
-        checked={checked}
-        disabled={disabled}
-        onChange={(event) => onChange(event.currentTarget.checked)}
-        ref={inputRef}
-        type="checkbox"
-      />
-      <span aria-hidden="true">
-        {indeterminate ? <IndeterminateIcon /> : <CheckIcon />}
-      </span>
-    </label>
+    <Checkbox
+      aria-label={label}
+      checked={indeterminate ? "indeterminate" : checked}
+      disabled={disabled}
+      onCheckedChange={(nextChecked) => onChange?.(nextChecked === true)}
+    />
   );
 }
 
@@ -849,17 +863,38 @@ function Avatar({ name, src }: { name: string; src?: string }) {
     .join("")
     .toUpperCase();
 
-  return src ? <img alt="" className="ds-table-avatar" src={src} /> : <span className="ds-table-avatar">{initials}</span>;
+  return (
+    <AvatarPrimitive className="ds-table-avatar" size="sm">
+      {src ? <AvatarImage alt="" src={src} /> : null}
+      <AvatarFallback>{initials}</AvatarFallback>
+    </AvatarPrimitive>
+  );
 }
 
-function AvatarStack({ avatars, canAdd, count }: { avatars: AvatarItem[]; canAdd?: boolean; count?: number }) {
+function AvatarStack({
+  addLabel = "Add person",
+  avatars,
+  canAdd,
+  count,
+  onAdd,
+}: {
+  addLabel?: string;
+  avatars: AvatarItem[];
+  canAdd?: boolean;
+  count?: number;
+  onAdd?: () => void;
+}) {
   return (
     <span className="ds-table-avatar-stack">
       {avatars.slice(0, 3).map((avatar) => (
         <Avatar key={avatar.alt} name={avatar.alt} src={avatar.src} />
       ))}
       {count ? <span className="ds-table-avatar ds-table-avatar--count">+{count}</span> : null}
-      {canAdd ? <button aria-label="Add person" type="button">+</button> : null}
+      {canAdd ? (
+        <button aria-label={addLabel} disabled={!onAdd} onClick={onAdd} type="button">
+          +
+        </button>
+      ) : null}
     </span>
   );
 }
@@ -871,12 +906,17 @@ function BadgeList({ items, maxVisible = items.length }: { items: BadgeItem[]; m
   return (
     <span className="ds-table-badges">
       {visible.map((item, index) => (
-        <span className={`ds-table-badge ds-table-badge--${item.tone ?? "neutral"}`} key={`${item.label}-${index}`}>
-          {item.dot && <i />}
+        <Badge
+          badgeStyle="light"
+          color={badgeColor(item.tone)}
+          key={`${item.label}-${index}`}
+          size="xs"
+          type={item.dot ? "dot" : "default"}
+        >
           {item.label}
-        </span>
+        </Badge>
       ))}
-      {overflow > 0 && <span className="ds-table-badge">+{overflow}</span>}
+      {overflow > 0 && <Badge size="xs">+{overflow}</Badge>}
     </span>
   );
 }
@@ -888,23 +928,22 @@ function TagList({ items, maxVisible = items.length }: { items: string[]; maxVis
   return (
     <span className="ds-table-tags">
       {visible.map((item, index) => (
-        <span key={`${item}-${index}`}>{item}</span>
+        <Tag key={`${item}-${index}`} size="xs">{item}</Tag>
       ))}
-      {overflow > 0 && <span>+{overflow}</span>}
+      {overflow > 0 && <Tag size="xs">+{overflow}</Tag>}
     </span>
   );
 }
 
 function Progress({ label, tone, value }: { label?: string; tone: "success" | "brand"; value: number }) {
-  const safeValue = Math.max(0, Math.min(100, value));
-
   return (
-    <span className={`ds-table-progress ds-table-progress--${tone}`}>
-      <span aria-hidden="true">
-        <i style={{ width: `${safeValue}%` }} />
-      </span>
-      <em>{label ?? `${safeValue}%`}</em>
-    </span>
+    <ProgressPrimitive
+      className={`ds-table-progress ds-table-progress--${tone}`}
+      indicator={label}
+      labelPosition="inline"
+      size="sm"
+      value={value}
+    />
   );
 }
 
@@ -927,14 +966,30 @@ function IconLabel({ icon, label }: { icon: ReactNode; label: string }) {
   );
 }
 
-function IconButton({ icon, label, onClick }: { icon: TableAction["icon"]; label: string; onClick?: () => void }) {
+function IconButton({
+  disabled,
+  icon,
+  label,
+  onClick,
+}: {
+  disabled?: boolean;
+  icon: TableAction["icon"];
+  label: string;
+  onClick?: () => void;
+}) {
   return (
-    <button aria-label={label} className="ds-table-icon-button" onClick={onClick} type="button">
+    <Button aria-label={label} className="ds-table-icon-button" disabled={disabled ?? !onClick} onClick={onClick} size="icon-xs" type="button" variant="ghost">
       {renderActionIcon(icon)}
-    </button>
+    </Button>
   );
 }
 
+function badgeColor(tone: BadgeItem["tone"]) {
+  if (tone === "success") return "green" as const;
+  if (tone === "warning") return "amber" as const;
+  return tone ?? "neutral";
+}
+
 function renderActionIcon(icon: TableAction["icon"]) {
   switch (icon) {
     case "view":
@@ -949,38 +1004,30 @@ function renderActionIcon(icon: TableAction["icon"]) {
   }
 }
 
-function CheckIcon() {
-  return <LucideCheckIcon strokeWidth={2.6} />;
-}
-
-function IndeterminateIcon() {
-  return <MinusIcon strokeWidth={2.6} />;
-}
-
 function SortIcon({ direction }: { direction?: TableSortDirection }) {
   return (
-    <ArrowUpDownIcon aria-hidden="true" data-direction={direction ?? "none"} strokeWidth={1.9} />
+    <ArrowUpDownIcon aria-hidden="true" data-direction={direction ?? "none"} strokeWidth="var(--bh-icon-stroke-190)" />
   );
 }
 
 function MoreIcon() {
-  return <EllipsisIcon aria-hidden="true" strokeWidth={2.25} />;
+  return <EllipsisIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-225)" />;
 }
 
 function ViewIcon() {
-  return <EyeIcon aria-hidden="true" strokeWidth={1.9} />;
+  return <EyeIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
 function EditIcon() {
-  return <LucideEditIcon aria-hidden="true" strokeWidth={1.9} />;
+  return <LucideEditIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
 function DeleteIcon() {
-  return <Trash2Icon aria-hidden="true" strokeWidth={1.9} />;
+  return <Trash2Icon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
 function FileIcon() {
-  return <LucideFileIcon strokeWidth={1.9} />;
+  return <LucideFileIcon strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
 function BrandIcon() {

package/registry/components/expanded/Timeline.tsx

@@ -103,7 +103,7 @@ export function TimelineItem({
   caption,
   className,
   date,
-  dir = "ltr",
+  dir,
   icon,
   label,
   orientation = "vertical",
@@ -175,7 +175,7 @@ export function TimelineItem({
 export function Timeline({
   ariaLabel,
   className,
-  dir = "ltr",
+  dir,
   orientation = "vertical",
   steps = [],
   variant = "default",
@@ -212,5 +212,5 @@ export function Timeline({
 }
 
 function CheckIcon() {
-  return <LucideCheckIcon aria-hidden="true" className="ds-timeline__check" strokeWidth={3} />;
+  return <LucideCheckIcon aria-hidden="true" className="ds-timeline__check" strokeWidth="var(--bh-icon-stroke-300)" />;
 }

package/registry/components/expanded/activityFeed.css

@@ -30,7 +30,7 @@
   align-items: flex-start;
   color: var(--activity-feed-content-default);
   font-family: var(--bh-font-family);
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
 }
 
 .ds-activity-feed *,

package/registry/components/expanded/breadcrumbs.css

@@ -1,140 +1,140 @@
-.ds-breadcrumbs {
-  --breadcrumbs-color: var(--bh-content-subtle);
-  --breadcrumbs-current: var(--bh-content-default);
-  --breadcrumbs-border: var(--bh-border-subtle);
-  --breadcrumbs-surface: var(--bh-bg-raised);
-  --breadcrumbs-radius: var(--bh-radius-lg-8);
-
-  box-sizing: border-box;
-  display: block;
-  max-width: 100%;
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  color: var(--breadcrumbs-color);
-  font-family: var(--bh-font-family);
-  font-size: var(--bh-text-body-md-font-size);
-  font-weight: var(--bh-font-weight-medium);
-  letter-spacing: 0;
-  line-height: var(--bh-text-body-md-line-height);
-}
-
-.ds-breadcrumbs *,
-.ds-breadcrumbs *::before,
-.ds-breadcrumbs *::after {
-  box-sizing: border-box;
-}
-
-.ds-breadcrumbs ol {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--bh-space-xs-4);
-  max-width: 100%;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.ds-breadcrumbs--raised ol {
-  gap: var(--bh-space-md-8);
-  padding: var(--bh-space-xl-12);
-  border: var(--bh-space-xxxs-1) solid var(--breadcrumbs-border);
-  border-radius: var(--breadcrumbs-radius);
-  background: var(--breadcrumbs-surface);
-}
-
-.ds-breadcrumbs li,
-.ds-breadcrumbs a,
-.ds-breadcrumbs li > span {
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--bh-space-xs-4);
-}
-
-.ds-breadcrumbs a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.ds-breadcrumbs a:hover {
-  color: var(--breadcrumbs-current);
-}
-
-.ds-breadcrumbs a:focus-visible {
-  border-radius: var(--bh-radius-sm-4);
+.ds-breadcrumbs {
+  --breadcrumbs-color: var(--bh-content-subtle);
+  --breadcrumbs-current: var(--bh-content-default);
+  --breadcrumbs-border: var(--bh-border-subtle);
+  --breadcrumbs-surface: var(--bh-bg-raised);
+  --breadcrumbs-radius: var(--bh-radius-lg-8);
+
+  box-sizing: border-box;
+  display: block;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  color: var(--breadcrumbs-color);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  letter-spacing: var(--bh-text-base-letter-spacing);
+  line-height: var(--bh-text-body-md-line-height);
+}
+
+.ds-breadcrumbs *,
+.ds-breadcrumbs *::before,
+.ds-breadcrumbs *::after {
+  box-sizing: border-box;
+}
+
+.ds-breadcrumbs ol {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+  max-width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ds-breadcrumbs--raised ol {
+  gap: var(--bh-space-md-8);
+  padding: var(--bh-space-xl-12);
+  border: var(--bh-space-xxxs-1) solid var(--breadcrumbs-border);
+  border-radius: var(--breadcrumbs-radius);
+  background: var(--breadcrumbs-surface);
+}
+
+.ds-breadcrumbs li,
+.ds-breadcrumbs a,
+.ds-breadcrumbs li > span {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-breadcrumbs a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ds-breadcrumbs a:hover {
+  color: var(--breadcrumbs-current);
+}
+
+.ds-breadcrumbs a:focus-visible {
+  border-radius: var(--bh-radius-sm-4);
   outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
-  outline-offset: var(--bh-space-xxs-2);
-}
-
-.ds-breadcrumbs .is-current {
-  color: var(--breadcrumbs-current);
-}
-
-.ds-breadcrumbs__icon {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
-  flex: 0 0 auto;
-  display: inline-grid;
-  place-items: center;
-  color: currentColor;
-}
-
-.ds-breadcrumbs__icon:empty {
-  display: none;
-}
-
-.ds-breadcrumbs__icon svg {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
-  display: block;
-}
-
-.ds-breadcrumbs__label {
-  max-width: 20ch;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ds-breadcrumbs__label--hidden {
-  position: absolute;
-  width: var(--bh-space-xxxs-1);
-  height: var(--bh-space-xxxs-1);
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-}
-
-.ds-breadcrumbs__separator {
-  width: var(--bh-space-3xl-16);
-  height: var(--bh-space-3xl-16);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--breadcrumbs-color);
-  line-height: var(--bh-text-body-2xs-regular-line-height);
-}
-
-.ds-breadcrumbs__separator svg {
-  width: var(--bh-space-3xl-16);
-  height: var(--bh-space-3xl-16);
-  display: block;
-}
-
-.ds-breadcrumbs[dir="rtl"] .ds-breadcrumbs__separator svg {
-  transform: scaleX(-1);
-}
-
-.ds-breadcrumbs--icon-only a,
-.ds-breadcrumbs--icon-only li > span:not(.ds-breadcrumbs__separator) {
-  width: var(--bh-space-6xl-32);
-  height: var(--bh-space-6xl-32);
-  justify-content: center;
-  border-radius: var(--breadcrumbs-radius);
-}
-
-.ds-breadcrumbs--icon-only a:hover {
-  background: var(--bh-interactive-ghost-hover);
-}
+  outline-offset: var(--bh-space-xxs-2);
+}
+
+.ds-breadcrumbs .is-current {
+  color: var(--breadcrumbs-current);
+}
+
+.ds-breadcrumbs__icon {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-items: center;
+  color: currentColor;
+}
+
+.ds-breadcrumbs__icon:empty {
+  display: none;
+}
+
+.ds-breadcrumbs__icon svg {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
+  display: block;
+}
+
+.ds-breadcrumbs__label {
+  max-width: 20ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-breadcrumbs__label--hidden {
+  position: absolute;
+  width: var(--bh-space-xxxs-1);
+  height: var(--bh-space-xxxs-1);
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.ds-breadcrumbs__separator {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--breadcrumbs-color);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+}
+
+.ds-breadcrumbs__separator svg {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  display: block;
+}
+
+.ds-breadcrumbs[dir="rtl"] .ds-breadcrumbs__separator svg {
+  transform: scaleX(-1);
+}
+
+.ds-breadcrumbs--icon-only a,
+.ds-breadcrumbs--icon-only li > span:not(.ds-breadcrumbs__separator) {
+  width: var(--bh-space-6xl-32);
+  height: var(--bh-space-6xl-32);
+  justify-content: center;
+  border-radius: var(--breadcrumbs-radius);
+}
+
+.ds-breadcrumbs--icon-only a:hover {
+  background: var(--bh-interactive-ghost-hover);
+}