banhaten 0.2.0 → 0.4.0

package/registry/components/expanded/PageHeader.tsx

@@ -1,5 +1,7 @@
-import type { ReactNode } from "react";
+import type { ElementType, ReactNode } from "react";
 import { HomeIcon as LucideHomeIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Breadcrumbs as OwnedBreadcrumbs } from "./Breadcrumbs";
 import { Tabs, type TabsProps } from "../tabs";
 import "./pageHeader.css";
 
@@ -31,6 +33,7 @@ export type PageHeaderProps = {
   description?: string;
   dir?: "ltr" | "rtl";
   icon?: ReactNode | false;
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
   metaInfo?: string;
   tabs?: PageHeaderTabs | false;
   title?: string;
@@ -44,64 +47,43 @@ function HomeIcon() {
   return <LucideHomeIcon aria-hidden="true" className="ds-page-header__home-icon" strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
-function Breadcrumbs({ items, label }: { items: PageHeaderBreadcrumb[]; label?: string }) {
-  return (
-    <nav aria-label={label} className="ds-page-header__breadcrumbs">
-      <ol>
-        {items.map((item, index) => {
-          const isLast = index === items.length - 1;
-          const isCurrent = item.current === true;
-          const content = (
-            <>
-              {item.icon && <span className="ds-page-header__breadcrumb-icon">{item.icon}</span>}
-              <span className="ds-page-header__breadcrumb-label">{item.label}</span>
-            </>
-          );
-
-          return (
-            <li key={`${item.label}-${index}`}>
-              {item.href && !isCurrent ? (
-                <a href={item.href}>{content}</a>
-              ) : (
-                <span aria-current={isCurrent ? "page" : undefined} className={isCurrent ? "is-current" : undefined}>
-                  {content}
-                </span>
-              )}
-              {!isLast && (
-                <span aria-hidden="true" className="ds-page-header__breadcrumb-separator">
-                  /
-                </span>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-}
-
 function Action({ action }: { action: PageHeaderAction }) {
   const className = "ds-page-header__action";
   const label = <span>{action.label}</span>;
 
   if (action.href) {
     return (
-      <a aria-label={action.ariaLabel} className={className} href={action.href}>
-        {label}
-      </a>
+      <Button asChild className={className} variant="secondary">
+        <a
+          aria-disabled={action.disabled || undefined}
+          aria-label={action.ariaLabel}
+          href={action.disabled ? undefined : action.href}
+          onClick={(event) => {
+            if (action.disabled) {
+              event.preventDefault();
+              return;
+            }
+            action.onClick?.();
+          }}
+          tabIndex={action.disabled ? -1 : undefined}
+        >
+          {label}
+        </a>
+      </Button>
     );
   }
 
   return (
-    <button
+    <Button
       aria-label={action.ariaLabel}
       className={className}
       disabled={action.disabled}
       onClick={action.onClick}
       type="button"
+      variant="secondary"
     >
       {label}
-    </button>
+    </Button>
   );
 }
 
@@ -112,6 +94,7 @@ export function PageHeader({
   className,
   description,
   dir,
+  headingLevel = 1,
   icon,
   metaInfo,
   tabs = {},
@@ -120,10 +103,18 @@ export function PageHeader({
   const breadcrumbItems = breadcrumbs === false ? [] : breadcrumbs;
   const actionItems = actions === false ? [] : actions;
   const showIcon = icon !== false;
+  const Heading = `h${headingLevel}` as ElementType;
 
   return (
     <header className={classes("ds-page-header", className)} dir={dir}>
-      {breadcrumbItems.length > 0 && <Breadcrumbs items={breadcrumbItems} label={breadcrumbLabel} />}
+      {breadcrumbItems.length > 0 && (
+        <OwnedBreadcrumbs
+          aria-label={breadcrumbLabel ?? "Breadcrumb"}
+          className="ds-page-header__breadcrumbs"
+          dir={dir}
+          items={breadcrumbItems}
+        />
+      )}
 
       <div className="ds-page-header__section">
         <div className="ds-page-header__topline">
@@ -131,7 +122,7 @@ export function PageHeader({
             <div className="ds-page-header__heading-row">
               <div className="ds-page-header__heading-main">
                 {showIcon && <span className="ds-page-header__icon">{icon ?? <HomeIcon />}</span>}
-                {title && <h1>{title}</h1>}
+                {title && <Heading className="ds-page-header__title">{title}</Heading>}
               </div>
               {metaInfo && (
                 <span className="ds-page-header__meta">

package/registry/components/expanded/Slideout.tsx

@@ -1,5 +1,6 @@
-import type { ReactNode } from "react";
+import { useId, type ReactNode } from "react";
 import { XIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import "./slideout.css";
 
 export type SlideoutSize = "small" | "medium" | "large";
@@ -48,7 +49,7 @@ export function Slideout({
   size = "small",
   title,
 }: SlideoutProps) {
-  const rtl = dir === "rtl";
+  const titleId = useId();
   const hasFooterActions = Boolean(primaryActionLabel || (secondaryAction && secondaryActionLabel));
 
   return (
@@ -57,39 +58,43 @@ export function Slideout({
         "ds-slideout",
         `ds-slideout--${size}`,
         `ds-slideout--${breakpoint}`,
-        rtl && "ds-slideout--rtl",
         className,
       )}
       dir={dir}
     >
-      <section aria-label={title} className="ds-slideout__panel" role="dialog">
+      <section
+        aria-labelledby={title ? titleId : undefined}
+        className="ds-slideout__panel"
+        data-slot="slideout-panel"
+        role={title ? "region" : undefined}
+      >
         <header className="ds-slideout__header">
           <div className="ds-slideout__heading-wrap">
-            <h2 className="ds-slideout__title">{title}</h2>
+            {title ? <h2 className="ds-slideout__title" id={titleId}>{title}</h2> : null}
             {headerAction && actionLabel && (
-              <button className="ds-slideout__text-button" type="button" onClick={onAction}>
+              <Button className="ds-slideout__text-button" size="sm" type="button" variant="link" onClick={onAction}>
                 {actionLabel}
-              </button>
+              </Button>
             )}
           </div>
           {closeLabel && (
-            <button aria-label={closeLabel} className="ds-slideout__close" type="button" onClick={onClose}>
+            <Button aria-label={closeLabel} className="ds-slideout__close" size="icon-sm" type="button" variant="ghost" onClick={onClose}>
               <CloseIcon />
-            </button>
+            </Button>
           )}
         </header>
         <div className="ds-slideout__body">{children}</div>
         {footer && hasFooterActions && (
           <footer className="ds-slideout__footer">
             {primaryActionLabel && (
-              <button className="ds-slideout__button ds-slideout__button--primary" type="button" onClick={onPrimaryAction}>
+              <Button className="ds-slideout__button ds-slideout__button--primary" size="sm" type="button" onClick={onPrimaryAction}>
                 {primaryActionLabel}
-              </button>
+              </Button>
             )}
             {secondaryAction && secondaryActionLabel && (
-              <button className="ds-slideout__button ds-slideout__button--secondary" type="button" onClick={onSecondaryAction}>
+              <Button className="ds-slideout__button ds-slideout__button--secondary" size="sm" type="button" variant="secondary" onClick={onSecondaryAction}>
                 {secondaryActionLabel}
-              </button>
+              </Button>
             )}
           </footer>
         )}

package/registry/components/expanded/Steps.tsx

@@ -25,6 +25,34 @@ export type StepsProps = {
   items?: StepItem[];
 };
 
+export type ProgressStepState = "complete" | "active" | "todo";
+
+export type ProgressStep = {
+  label?: ReactNode;
+  marker?: ReactNode;
+  state?: ProgressStepState;
+};
+
+export type ProgressStepsClassNames = {
+  connector?: string;
+  item?: string;
+  label?: string;
+  marker?: string;
+  segment?: string;
+  track?: string;
+};
+
+export type ProgressStepsProps = {
+  activeIndex?: number;
+  ariaLabel: string;
+  className?: string;
+  classNames?: ProgressStepsClassNames;
+  dir?: "ltr" | "rtl";
+  items: ProgressStep[];
+  label?: ReactNode;
+  variant?: "bars" | "markers";
+};
+
 export type HorizontalStepItemProps = {
   alignment?: StepAlignment;
   caption?: ReactNode;
@@ -66,13 +94,12 @@ export function Steps({
   indicator = "icon",
   items,
 }: StepsProps) {
-  const rtl = dir === "rtl";
   const stepItems = items ?? [];
 
   if (direction === "vertical") {
     return (
       <div
-        className={["ds-steps", "ds-steps--vertical", rtl ? "ds-steps--rtl" : "ds-steps--ltr", className]
+        className={["ds-steps", "ds-steps--vertical", className]
           .filter(Boolean)
           .join(" ")}
         dir={dir}
@@ -102,7 +129,7 @@ export function Steps({
 
   return (
     <div
-      className={["ds-steps", "ds-steps--horizontal", rtl ? "ds-steps--rtl" : "ds-steps--ltr", className]
+      className={["ds-steps", "ds-steps--horizontal", className]
         .filter(Boolean)
         .join(" ")}
       dir={dir}
@@ -122,6 +149,122 @@ export function Steps({
   );
 }
 
+export function ProgressSteps({
+  activeIndex = 0,
+  ariaLabel,
+  className = "",
+  classNames = {},
+  dir,
+  items,
+  label,
+  variant = "markers",
+}: ProgressStepsProps) {
+  const rootClassName = [
+    "ds-progress-steps",
+    `ds-progress-steps--${variant}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  if (variant === "bars") {
+    return (
+      <div
+        aria-label={ariaLabel}
+        aria-valuemax={items.length}
+        aria-valuemin={1}
+        aria-valuenow={Math.min(activeIndex + 1, items.length)}
+        className={rootClassName}
+        dir={dir}
+        role="progressbar"
+      >
+        {label ? <span data-slot="progress-steps-label">{label}</span> : null}
+        <div
+          aria-hidden="true"
+          className={["ds-progress-steps__track", classNames.track]
+            .filter(Boolean)
+            .join(" ")}
+          data-slot="progress-steps-track"
+        >
+          {items.map((item, index) => (
+            <span
+              className={["ds-progress-steps__segment", classNames.segment]
+                .filter(Boolean)
+                .join(" ")}
+              data-active={index <= activeIndex ? "true" : "false"}
+              data-slot="progress-steps-segment"
+              data-state={item.state ?? (index < activeIndex ? "complete" : index === activeIndex ? "active" : "todo")}
+              key={index}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ol aria-label={ariaLabel} className={rootClassName} dir={dir}>
+      {items.map((item, index) => {
+        const state =
+          item.state ??
+          (index < activeIndex
+            ? "complete"
+            : index === activeIndex
+              ? "active"
+              : "todo");
+
+        return (
+          <li
+            className={[
+              "ds-progress-steps__item",
+              `is-${state}`,
+              classNames.item,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            data-slot="progress-steps-item"
+            data-state={state}
+            key={index}
+          >
+            <span
+              aria-hidden="true"
+              className={["ds-progress-steps__marker", classNames.marker]
+                .filter(Boolean)
+                .join(" ")}
+              data-slot="progress-steps-marker"
+            >
+              {item.marker ?? index + 1}
+            </span>
+            {item.label ? (
+              <span
+                className={["ds-progress-steps__label", classNames.label]
+                  .filter(Boolean)
+                  .join(" ")}
+                data-slot="progress-steps-item-label"
+              >
+                {item.label}
+              </span>
+            ) : null}
+            {index < items.length - 1 ? (
+              <span
+                aria-hidden="true"
+                className={[
+                  "ds-progress-steps__connector",
+                  state === "complete" && "is-complete",
+                  classNames.connector,
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
+                data-slot="progress-steps-connector"
+              />
+            ) : null}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
 export function HorizontalStepItem({
   alignment = "leading",
   caption,
@@ -135,7 +278,6 @@ export function HorizontalStepItem({
   showLeadingLine = true,
   showTrailingLine = true,
 }: HorizontalStepItemProps) {
-  const rtl = dir === "rtl";
   const linePlacement = getHorizontalLinePlacement(alignment, showLeadingLine, showTrailingLine);
   const text = (
     <div className="ds-horizontal-step-item__text">
@@ -157,7 +299,6 @@ export function HorizontalStepItem({
         "ds-horizontal-step-item",
         `ds-horizontal-step-item--${alignment}`,
         `ds-horizontal-step-item--${position}`,
-        rtl ? "ds-horizontal-step-item--rtl" : "ds-horizontal-step-item--ltr",
         className,
       ]
         .filter(Boolean)
@@ -189,7 +330,6 @@ export function VerticalStepItem({
   slotContent,
   supportText,
 }: VerticalStepItemProps & { children?: ReactNode }) {
-  const rtl = dir === "rtl";
   const marker = (
     <div className="ds-vertical-step-item__rail" aria-hidden="true">
       <StepMarker indicator={indicator} number={number} />
@@ -205,7 +345,6 @@ export function VerticalStepItem({
       className={[
         "ds-vertical-step-item",
         `ds-vertical-step-item--${alignment}`,
-        rtl ? "ds-vertical-step-item--rtl" : "ds-vertical-step-item--ltr",
         className,
       ]
         .filter(Boolean)
@@ -216,9 +355,8 @@ export function VerticalStepItem({
       <div className="ds-vertical-step-item__content">
         <div className="ds-vertical-step-item__copy">
           <div className="ds-vertical-step-item__header">
-            {rtl && hasSupportText && supportText && <div className="ds-vertical-step-item__support">{supportText}</div>}
             {label && <div className="ds-vertical-step-item__label">{label}</div>}
-            {!rtl && hasSupportText && supportText && <div className="ds-vertical-step-item__support">{supportText}</div>}
+            {hasSupportText && supportText && <div className="ds-vertical-step-item__support">{supportText}</div>}
           </div>
           {hasCaption && caption && <div className="ds-vertical-step-item__caption">{caption}</div>}
         </div>

package/registry/components/expanded/Table.tsx

@@ -5,6 +5,7 @@ import {
   EllipsisIcon,
   EyeIcon,
   FileIcon as LucideFileIcon,
+  StarIcon,
   Trash2Icon,
 } from "lucide-react";
 import { Pagination, type PaginationPage, type PaginationProps } from "@/components/ui/pagination";
@@ -135,6 +136,7 @@ export type DataTableSearch<Row extends TableRowBase> =
     };
 
 export type DataTablePagination = {
+  ariaLabel?: string;
   defaultPage?: number;
   manual?: boolean;
   onPageChange?: (page: number) => void;
@@ -216,7 +218,12 @@ export function Table<Row extends TableRowBase>({
   }
 
   return (
-    <div className={`ds-table-wrap ds-table-wrap--${size}`} dir={dir}>
+    <div
+      aria-label="Scrollable table"
+      className={`ds-table-wrap ds-table-wrap--${size}`}
+      dir={dir}
+      tabIndex={0}
+    >
       <table className="ds-table">
         <thead>
           <tr>
@@ -238,18 +245,20 @@ export function Table<Row extends TableRowBase>({
                 ) : column.header ? (
                   column.sortable ? (
                     onSortChange ? (
-                      <button
+                      <Button
                         aria-label={`Sort by ${column.header}`}
                         className={cx(
                           "ds-table__sort",
                           sort?.columnId === column.id && `ds-table__sort--${sort.direction}`,
                         )}
                         onClick={() => onSortChange(getNextSort(sort, column.id))}
+                        size="xs"
                         type="button"
+                        variant="ghost"
                       >
                         <span>{column.header}</span>
                         <SortIcon direction={sort?.columnId === column.id ? sort.direction : undefined} />
-                      </button>
+                      </Button>
                     ) : (
                       <span className="ds-table__sort ds-table__sort--static">
                         <span>{column.header}</span>
@@ -259,7 +268,11 @@ export function Table<Row extends TableRowBase>({
                   ) : (
                     column.header
                   )
-                ) : null}
+                ) : (
+                  <span className="sr-only">
+                    {column.kind === "actions" ? "Actions" : column.id}
+                  </span>
+                )}
               </th>
             ))}
           </tr>
@@ -283,7 +296,7 @@ export function Table<Row extends TableRowBase>({
                     ) : column.renderCell ? (
                       column.renderCell(row)
                     ) : column.item ? (
-                      renderTableItem(column.item(row))
+                      renderTableItem(column.item(row), size)
                     ) : null}
                   </td>
                 ))}
@@ -492,6 +505,10 @@ export function DataTable<Row extends TableRowBase>({
         <footer className="ds-data-table__footer">
           <ToolbarText>{labels.resultsSummary({ from: visibleFrom, to: visibleTo, total: totalRows })}</ToolbarText>
           <Pagination
+            aria-label={
+              paginationConfig.ariaLabel ??
+              (typeof title === "string" ? `${title} pagination` : "Table pagination")
+            }
             dir={dir}
             nextDisabled={currentPage >= pageCount}
             onPageChange={setDataTablePage}
@@ -755,7 +772,7 @@ function clampNumber(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, Math.floor(value)));
 }
 
-function renderTableItem(item: TableItem) {
+function renderTableItem(item: TableItem, tableSize: TableSize) {
   switch (item.type) {
     case "checkbox":
       return (
@@ -772,7 +789,7 @@ function renderTableItem(item: TableItem) {
     case "avatarText":
       return (
         <span className="ds-table-avatar-text">
-          <Avatar name={item.name} src={item.src} />
+          <Avatar name={item.name} size={tableSize === "lg" ? "md" : "sm"} src={item.src} />
           <span>
             <strong>{item.name}</strong>
             {item.caption && <em>{item.caption}</em>}
@@ -796,7 +813,7 @@ function renderTableItem(item: TableItem) {
     case "badges":
       return <BadgeList items={item.items} maxVisible={item.maxVisible} />;
     case "onlyAvatar":
-      return <Avatar name={item.alt} src={item.src} />;
+      return <Avatar name={item.alt} size={tableSize === "lg" ? "md" : "xs"} src={item.src} />;
     case "avatarStack":
       return (
         <AvatarStack
@@ -805,6 +822,7 @@ function renderTableItem(item: TableItem) {
           canAdd={item.canAdd}
           count={item.count}
           onAdd={item.onAdd}
+          size={tableSize}
         />
       );
     case "tags":
@@ -855,7 +873,9 @@ function SelectionCheckbox({
   );
 }
 
-function Avatar({ name, src }: { name: string; src?: string }) {
+type TableAvatarSize = "xs" | "sm" | "md";
+
+function Avatar({ name, size, src }: { name: string; size: TableAvatarSize; src?: string }) {
   const initials = name
     .split(" ")
     .map((part) => part[0])
@@ -864,9 +884,9 @@ function Avatar({ name, src }: { name: string; src?: string }) {
     .toUpperCase();
 
   return (
-    <AvatarPrimitive className="ds-table-avatar" size="sm">
+    <AvatarPrimitive className="ds-table-avatar" size={size}>
       {src ? <AvatarImage alt="" src={src} /> : null}
-      <AvatarFallback>{initials}</AvatarFallback>
+      <AvatarFallback size={size}>{initials}</AvatarFallback>
     </AvatarPrimitive>
   );
 }
@@ -877,23 +897,25 @@ function AvatarStack({
   canAdd,
   count,
   onAdd,
+  size,
 }: {
   addLabel?: string;
   avatars: AvatarItem[];
   canAdd?: boolean;
   count?: number;
   onAdd?: () => void;
+  size: TableSize;
 }) {
   return (
-    <span className="ds-table-avatar-stack">
+    <span className={`ds-table-avatar-stack ds-table-avatar-stack--${size}`}>
       {avatars.slice(0, 3).map((avatar) => (
-        <Avatar key={avatar.alt} name={avatar.alt} src={avatar.src} />
+        <Avatar key={avatar.alt} name={avatar.alt} size={size === "lg" ? "md" : "xs"} src={avatar.src} />
       ))}
       {count ? <span className="ds-table-avatar ds-table-avatar--count">+{count}</span> : null}
       {canAdd ? (
-        <button aria-label={addLabel} disabled={!onAdd} onClick={onAdd} type="button">
+        <Button aria-label={addLabel} disabled={!onAdd} onClick={onAdd} size="icon-xs" type="button" variant="ghost">
           +
-        </button>
+        </Button>
       ) : null}
     </span>
   );
@@ -938,10 +960,11 @@ function TagList({ items, maxVisible = items.length }: { items: string[]; maxVis
 function Progress({ label, tone, value }: { label?: string; tone: "success" | "brand"; value: number }) {
   return (
     <ProgressPrimitive
+      aria-label={label ?? "Progress"}
       className={`ds-table-progress ds-table-progress--${tone}`}
       indicator={label}
       labelPosition="inline"
-      size="sm"
+      size="lg"
       value={value}
     />
   );
@@ -949,9 +972,18 @@ function Progress({ label, tone, value }: { label?: string; tone: "success" | "b
 
 function Rating({ max, value }: { max: number; value: number }) {
   return (
-    <span className="ds-table-rating" aria-label={`${value} out of ${max}`}>
+    <span
+      aria-label={`${value} out of ${max}`}
+      className="ds-table-rating"
+      role="img"
+    >
       {Array.from({ length: max }, (_, index) => (
-        <span className={index < value ? "is-filled" : undefined} key={index}>*</span>
+        <StarIcon
+          aria-hidden="true"
+          className={index < value ? "is-filled" : undefined}
+          key={index}
+          strokeWidth="var(--bh-icon-stroke-190)"
+        />
       ))}
     </span>
   );