banhaten 0.2.0 → 0.3.0

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>
   );

package/registry/components/expanded/Timeline.tsx

@@ -8,11 +8,12 @@ export type TimelineItemState = "finished" | "active" | "inactive";
 
 export type TimelineStep = {
   bottomDate?: string;
-  caption?: string;
+  caption?: ReactNode;
+  className?: string;
   date?: string;
   icon?: ReactNode;
   id?: string;
-  label?: string;
+  label?: ReactNode;
   showBottomDate?: boolean;
   showCaption?: boolean;
   showLeadingDate?: boolean;
@@ -27,6 +28,7 @@ export type TimelineItemProps = TimelineStep & {
   className?: string;
   dir?: "ltr" | "rtl";
   orientation?: TimelineOrientation;
+  role?: "listitem" | "none" | "presentation";
   variant?: TimelineVariant;
 };
 
@@ -46,14 +48,12 @@ function classes(...names: Array<string | false | undefined>) {
 function Indicator({
   icon,
   orientation,
-  rtl,
   showLine,
   state,
   variant,
 }: {
   icon?: ReactNode;
   orientation: TimelineOrientation;
-  rtl: boolean;
   showLine: boolean;
   state: TimelineItemState;
   variant: TimelineVariant;
@@ -79,21 +79,11 @@ function Indicator({
       className={classes(
         "ds-timeline__indicator",
         `ds-timeline__indicator--${orientation}`,
-        rtl && "ds-timeline__indicator--rtl",
       )}
       aria-hidden="true"
     >
-      {orientation === "horizontal" && rtl ? (
-        <>
-          {line}
-          {marker}
-        </>
-      ) : (
-        <>
-          {marker}
-          {line}
-        </>
-      )}
+      {marker}
+      {line}
     </span>
   );
 }
@@ -107,6 +97,7 @@ export function TimelineItem({
   icon,
   label,
   orientation = "vertical",
+  role,
   showBottomDate = false,
   showCaption = true,
   showLeadingDate = true,
@@ -117,7 +108,6 @@ export function TimelineItem({
   topDate,
   variant = "default",
 }: TimelineItemProps) {
-  const rtl = dir === "rtl";
   const displayDate = date;
   const displayLabel = label;
   const displayCaption = caption;
@@ -141,7 +131,6 @@ export function TimelineItem({
     <Indicator
       icon={icon}
       orientation={orientation}
-      rtl={rtl}
       showLine={showLine}
       state={state}
       variant={variant}
@@ -159,11 +148,10 @@ export function TimelineItem({
         `ds-timeline-item--${orientation}`,
         `ds-timeline-item--${variant}`,
         `ds-timeline-item--${state}`,
-        rtl ? "ds-timeline-item--rtl" : "ds-timeline-item--ltr",
         className,
       )}
       dir={dir}
-      role="listitem"
+      role={role}
     >
       {leadingDate}
       {indicator}
@@ -173,15 +161,13 @@ export function TimelineItem({
 }
 
 export function Timeline({
-  ariaLabel,
+  ariaLabel = "Timeline",
   className,
   dir,
   orientation = "vertical",
   steps = [],
   variant = "default",
 }: TimelineProps) {
-  const rtl = dir === "rtl";
-
   return (
     <div
       aria-label={ariaLabel}
@@ -189,11 +175,11 @@ export function Timeline({
         "ds-timeline",
         `ds-timeline--${orientation}`,
         `ds-timeline--${variant}`,
-        rtl ? "ds-timeline--rtl" : "ds-timeline--ltr",
         className,
       )}
       dir={dir}
       role="list"
+      tabIndex={orientation === "horizontal" ? 0 : undefined}
     >
       {steps.map((step, index) => (
         <TimelineItem
@@ -201,6 +187,7 @@ export function Timeline({
           key={step.id ?? index}
           dir={dir}
           orientation={orientation}
+          role="listitem"
           showTopDate={step.showTopDate ?? orientation === "horizontal"}
           showBottomDate={step.showBottomDate ?? false}
           showPaddingBottom={step.showPaddingBottom ?? orientation === "vertical"}

package/registry/components/expanded/activityFeed.css

@@ -43,7 +43,7 @@
   text-decoration: none;
 }
 
-.ds-activity-feed--rtl {
+.ds-activity-feed:dir(rtl) {
   font-family: var(--bh-font-family);
   margin-inline-end: auto;
 }
@@ -102,7 +102,7 @@
   gap: var(--activity-feed-space-lg);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__content {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__content {
   align-items: flex-start;
 }
 
@@ -121,7 +121,7 @@
   gap: var(--bh-space-sm-6);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__topline {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__topline {
   justify-content: flex-start;
 }
 
@@ -139,7 +139,7 @@
   word-break: break-word;
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__text {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__text {
   justify-content: flex-start;
   text-align: right;
 }
@@ -149,7 +149,7 @@
   font-weight: var(--bh-font-weight-medium);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__text strong {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__text strong {
   font-weight: var(--bh-font-weight-semibold);
 }
 
@@ -199,7 +199,7 @@
   padding: var(--activity-feed-space-xl);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__caption {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__caption {
   justify-content: flex-start;
   text-align: right;
 }
@@ -216,7 +216,7 @@
   line-height: var(--bh-text-body-sm-regular-line-height);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__slot {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__slot {
   place-items: center start;
   text-align: right;
 }
@@ -230,7 +230,7 @@
   line-height: var(--bh-text-body-sm-regular-line-height);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__timestamp {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__timestamp {
   text-align: right;
 }
 

package/registry/components/expanded/activityHeatmap.css

@@ -0,0 +1,66 @@
+.ds-activity-heatmap {
+  --activity-heatmap-cell-size: var(--bh-space-3xl-16);
+  --activity-heatmap-gap: var(--bh-space-xs-4);
+  --activity-heatmap-radius: var(--bh-radius-sm-4);
+  --activity-heatmap-level-0: var(--bh-bg-neutral-medium);
+  --activity-heatmap-level-1: var(--bh-bg-accent-purple-subtle);
+  --activity-heatmap-level-2: var(--bh-bg-accent-purple-soft);
+  --activity-heatmap-level-3: var(--bh-bg-accent-purple-default);
+  --activity-heatmap-level-4: var(--bh-content-accent-purple-strong);
+
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  outline: none;
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+}
+
+.ds-activity-heatmap:focus-visible {
+  box-shadow: var(--shadow-component-focus-ring);
+}
+
+.ds-activity-heatmap *,
+.ds-activity-heatmap *::before,
+.ds-activity-heatmap *::after {
+  box-sizing: border-box;
+}
+
+.ds-activity-heatmap__grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: var(--activity-heatmap-cell-size);
+  grid-template-rows: repeat(7, var(--activity-heatmap-cell-size));
+  justify-content: start;
+  gap: var(--activity-heatmap-gap);
+  width: max-content;
+  min-width: 100%;
+}
+
+.ds-activity-heatmap__cell {
+  display: block;
+  inline-size: var(--activity-heatmap-cell-size);
+  block-size: var(--activity-heatmap-cell-size);
+  aspect-ratio: 1;
+  border-radius: var(--activity-heatmap-radius);
+  background: var(--activity-heatmap-level-0);
+}
+
+.ds-activity-heatmap__cell[data-level="1"] {
+  background: var(--activity-heatmap-level-1);
+}
+
+.ds-activity-heatmap__cell[data-level="2"] {
+  background: var(--activity-heatmap-level-2);
+}
+
+.ds-activity-heatmap__cell[data-level="3"] {
+  background: var(--activity-heatmap-level-3);
+}
+
+.ds-activity-heatmap__cell[data-level="4"] {
+  background: var(--activity-heatmap-level-4);
+}