banhaten 0.1.3 → 0.3.0

package/registry/components/expanded/ActivityFeed.tsx

@@ -54,8 +54,8 @@ function classes(...names: Array<string | false | undefined>) {
 
 function StatusDot() {
   return (
-    <span className="ds-activity-feed-item__status" aria-hidden="true" data-node-id="188:64134">
-      <span data-node-id="188:64135" />
+    <span className="ds-activity-feed-item__status" aria-hidden="true">
+      <span />
     </span>
   );
 }
@@ -63,21 +63,15 @@ function StatusDot() {
 function Indicator({
   avatarAlt,
   avatarSrc,
-  rtl,
   showLine,
-  type,
 }: {
   avatarAlt: string;
   avatarSrc: string;
-  rtl: boolean;
   showLine: boolean;
-  type: ActivityFeedItemType;
 }) {
-  const avatarNodeId = rtl ? (type === "caption" ? "587:18722" : "587:18703") : type === "caption" ? "584:18593" : "584:10955";
-
   return (
     <span className="ds-activity-feed-item__indicator" aria-hidden={avatarAlt ? undefined : "true"}>
-      <span className="ds-activity-feed-item__avatar" data-node-id={avatarNodeId}>
+      <span className="ds-activity-feed-item__avatar">
         <img alt={avatarAlt} src={avatarSrc} />
       </span>
       {showLine && <span className="ds-activity-feed-item__line" />}
@@ -146,7 +140,7 @@ export function ActivityFeedItem({
   hasTwoActionButtons = true,
   label,
   link,
-  dir = "ltr",
+  dir,
   showLine = true,
   showPaddingBottom = true,
   slotContent,
@@ -155,8 +149,6 @@ export function ActivityFeedItem({
   type = "caption",
 }: ActivityFeedItemProps) {
   const actionItems = actions === false || !hasActionButtons ? [] : (actions ?? []).slice(0, hasTwoActionButtons ? 2 : 1);
-  const rtl = dir === "rtl";
-  const nodeId = rtl ? (type === "caption" ? "587:18720" : "587:18701") : type === "caption" ? "584:18591" : "584:10411";
 
   const textParts = [
     label && <strong key="label">{label}</strong>,
@@ -169,13 +161,11 @@ export function ActivityFeedItem({
       className={classes(
         "ds-activity-feed-item",
         `ds-activity-feed-item--${type}`,
-        rtl ? "ds-activity-feed-item--rtl" : "ds-activity-feed-item--ltr",
         className,
       )}
-      data-node-id={nodeId}
-      dir={rtl ? "rtl" : "ltr"}
+      dir={dir}
     >
-      <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} rtl={rtl} showLine={showLine} type={type} />
+      <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} showLine={showLine} />
 
       <div className="ds-activity-feed-item__content">
         <div className="ds-activity-feed-item__container">
@@ -215,17 +205,14 @@ export function ActivityFeed({
   ariaLabel,
   avatarSrc = defaultAvatarSrc,
   className,
-  dir = "ltr",
+  dir,
   items = [],
 }: ActivityFeedProps) {
-  const rtl = dir === "rtl";
-
   return (
     <section
       aria-label={ariaLabel}
-      className={classes("ds-activity-feed", rtl ? "ds-activity-feed--rtl" : "ds-activity-feed--ltr", className)}
-      data-node-id={rtl ? "587:19711" : "587:19381"}
-      dir={rtl ? "rtl" : "ltr"}
+      className={classes("ds-activity-feed", className)}
+      dir={dir}
     >
       {items.map((item, index) => (
         <ActivityFeedItem

package/registry/components/expanded/ActivityHeatmap.tsx

@@ -0,0 +1,64 @@
+import type { ComponentPropsWithoutRef } from "react";
+import "./activityHeatmap.css";
+
+export type ActivityHeatmapLevel = 0 | 1 | 2 | 3 | 4;
+
+export type ActivityHeatmapItem = {
+  id?: string;
+  label?: string;
+  level: ActivityHeatmapLevel;
+};
+
+export type ActivityHeatmapProps = Omit<
+  ComponentPropsWithoutRef<"div">,
+  "children" | "dir"
+> & {
+  ariaLabel?: string;
+  dir?: "ltr" | "rtl";
+  items?: readonly ActivityHeatmapItem[];
+};
+
+function classes(...names: Array<string | false | undefined>) {
+  return names.filter(Boolean).join(" ");
+}
+
+function normalizeLevel(level: ActivityHeatmapLevel): ActivityHeatmapLevel {
+  return Math.max(0, Math.min(4, Math.round(level))) as ActivityHeatmapLevel;
+}
+
+export function ActivityHeatmap({
+  ariaLabel = "Activity heatmap",
+  className,
+  dir,
+  items = [],
+  tabIndex = 0,
+  ...props
+}: ActivityHeatmapProps) {
+  return (
+    <div
+      {...props}
+      aria-label={ariaLabel}
+      className={classes("ds-activity-heatmap", className)}
+      data-slot="activity-heatmap"
+      dir={dir}
+      role="img"
+      tabIndex={tabIndex}
+    >
+      <span
+        aria-hidden="true"
+        className="ds-activity-heatmap__grid"
+        data-slot="activity-heatmap-grid"
+      >
+        {items.map((item, index) => (
+          <span
+            className="ds-activity-heatmap__cell"
+            data-level={normalizeLevel(item.level)}
+            data-slot="activity-heatmap-cell"
+            key={item.id ?? index}
+            title={item.label}
+          />
+        ))}
+      </span>
+    </div>
+  );
+}

package/registry/components/expanded/Banner.tsx

@@ -35,11 +35,11 @@ export type BannerProps = {
 };
 
 function MegaphoneIcon() {
-  return <LucideMegaphoneIcon aria-hidden="true" className="ds-banner__icon" strokeWidth={2.1} />;
+  return <LucideMegaphoneIcon aria-hidden="true" className="ds-banner__icon" strokeWidth="var(--bh-icon-stroke-210)" />;
 }
 
 function CloseIcon() {
-  return <XIcon aria-hidden="true" className="ds-banner__close-icon" strokeWidth={2.25} />;
+  return <XIcon aria-hidden="true" className="ds-banner__close-icon" strokeWidth="var(--bh-icon-stroke-225)" />;
 }
 
 function getBannerActionVariant(color: BannerColor): ButtonProps["variant"] {
@@ -60,7 +60,7 @@ export function Banner({
   color = "brand",
   content = "title",
   description,
-  dir = "ltr",
+  dir,
   icon,
   inputAriaLabel,
   inputPlaceholder,
@@ -101,7 +101,6 @@ export function Banner({
         `ds-banner--${size}`,
         `ds-banner--${color}`,
         `ds-banner--${content}`,
-        dir === "rtl" && "ds-banner--rtl",
         className,
       )}
       dir={dir}

package/registry/components/expanded/Breadcrumbs.tsx

@@ -19,6 +19,7 @@ export type BreadcrumbItem = {
 
 export type BreadcrumbsProps = {
   "aria-label"?: string;
+  className?: string;
   dir?: "ltr" | "rtl" | "auto";
   iconOnly?: boolean;
   items: BreadcrumbItem[];
@@ -49,7 +50,8 @@ function visibleItems(
 
 export function Breadcrumbs({
   "aria-label": ariaLabel,
-  dir = "ltr",
+  className,
+  dir,
   iconOnly = false,
   items,
   maxItems,
@@ -67,6 +69,7 @@ export function Breadcrumbs({
         `ds-breadcrumbs--${surfaceStyle}`,
         `ds-breadcrumbs--${separator}`,
         iconOnly && "ds-breadcrumbs--icon-only",
+        className,
       )}
       dir={dir}
     >
@@ -112,17 +115,17 @@ function Separator({ separator }: { separator: BreadcrumbSeparator }) {
 }
 
 export function BreadcrumbHomeIcon() {
-  return <HomeIcon aria-hidden="true" strokeWidth={1.9} />;
+  return <HomeIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
 export function BreadcrumbFolderIcon() {
-  return <FolderIcon aria-hidden="true" strokeWidth={1.9} />;
+  return <FolderIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
 function ChevronIcon() {
-  return <ChevronRightIcon aria-hidden="true" strokeWidth={2} />;
+  return <ChevronRightIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-200)" />;
 }
 
 function OverflowIcon() {
-  return <EllipsisIcon aria-hidden="true" strokeWidth={2.25} />;
+  return <EllipsisIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-225)" />;
 }

package/registry/components/expanded/CatalogComponentsShowcase.tsx

@@ -8,7 +8,7 @@ import {
 import { CatalogContentDivider, CatalogDivider } from "./CatalogDivider";
 import { FileUpload, type FileUploadFile } from "./FileUpload";
 import { Table, type TableColumn, type TableRowBase } from "./Table";
-import { CatalogTag, type CatalogTagState, type CatalogTagType } from "./CatalogTag";
+import { Tag, type TagState, type TagType } from "@/components/ui/tag";
 import "./catalogComponentsShowcase.css";
 
 type ProjectRow = TableRowBase & {
@@ -32,7 +32,6 @@ const rtlBreadcrumbItems: BreadcrumbItem[] = [
   { label: "\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a", current: true },
 ];
 
-const breadcrumbAriaLabel = "Catalog breadcrumbs";
 const rtlBreadcrumbAriaLabel = "\u0627\u0644\u0645\u0633\u0627\u0631";
 
 const uploadFiles: FileUploadFile[] = [
@@ -99,8 +98,8 @@ const columns: TableColumn<ProjectRow>[] = [
   { id: "actions", width: 44, kind: "actions", item: () => ({ type: "action", icon: "more", label: "Open row actions" }) },
 ];
 
-const tagTypes: CatalogTagType[] = ["simple", "dot", "flag", "avatar", "icon"];
-const tagStates: CatalogTagState[] = ["default", "active", "disabled"];
+const tagTypes: TagType[] = ["simple", "dot", "flag", "avatar", "icon"];
+const tagStates: TagState[] = ["default", "active", "disabled"];
 
 export function CatalogComponentsShowcase() {
   const [selectedRows, setSelectedRows] = useState(["1", "2"]);
@@ -109,9 +108,9 @@ export function CatalogComponentsShowcase() {
     <div className="catalog-showcase">
       <ShowcaseCard title="Breadcrumbs" description="Default, raised, icon-only, separator, and RTL variants.">
         <div className="catalog-showcase__stack">
-          <Breadcrumbs aria-label={breadcrumbAriaLabel} items={breadcrumbItems} overflowLabel="More" />
-          <Breadcrumbs aria-label={breadcrumbAriaLabel} items={breadcrumbItems} overflowLabel="More" separator="chevron" style="raised" />
-          <Breadcrumbs aria-label={breadcrumbAriaLabel} iconOnly items={breadcrumbItems} overflowLabel="More" separator="chevron" style="raised" />
+          <Breadcrumbs aria-label="Default catalog breadcrumbs" items={breadcrumbItems} overflowLabel="More" />
+          <Breadcrumbs aria-label="Raised catalog breadcrumbs" items={breadcrumbItems} overflowLabel="More" separator="chevron" style="raised" />
+          <Breadcrumbs aria-label="Icon-only catalog breadcrumbs" iconOnly items={breadcrumbItems} overflowLabel="More" separator="chevron" style="raised" />
           <Breadcrumbs
             aria-label={rtlBreadcrumbAriaLabel}
             dir="rtl"
@@ -136,7 +135,7 @@ export function CatalogComponentsShowcase() {
       <ShowcaseCard title="Tags" description="Type, state, size, close button, and RTL coverage.">
         <div className="catalog-showcase__tag-grid">
           {tagTypes.map((type) => (
-            <CatalogTag
+            <Tag
               closeLabel="Remove tag"
               key={type}
               showCloseButton={type === "simple"}
@@ -144,19 +143,19 @@ export function CatalogComponentsShowcase() {
               avatar={type === "avatar" ? "A" : undefined}
             >
               {type}
-            </CatalogTag>
+            </Tag>
           ))}
           {tagStates.map((state) => (
-            <CatalogTag key={state} state={state} type="dot">
+            <Tag key={state} state={state} type="dot">
               {state}
-            </CatalogTag>
+            </Tag>
           ))}
-          <CatalogTag size="xs">xs</CatalogTag>
-          <CatalogTag size="md">md</CatalogTag>
-          <CatalogTag closeLabel="Remove tag" size="lg" showCloseButton>
+          <Tag size="xs">xs</Tag>
+          <Tag size="md">md</Tag>
+          <Tag closeLabel="Remove tag" size="lg" showCloseButton>
             large
-          </CatalogTag>
-          <CatalogTag
+          </Tag>
+          <Tag
             avatar={"\u0645"}
             closeLabel={"\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645"}
             dir="rtl"
@@ -164,7 +163,7 @@ export function CatalogComponentsShowcase() {
             showCloseButton
           >
             {"\u0645\u0644\u0635\u0642"}
-          </CatalogTag>
+          </Tag>
         </div>
       </ShowcaseCard>
 

package/registry/components/expanded/CatalogDivider.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@/components/ui/button";
 import "./divider.css";
 
 export type DividerBorderStyle = "solid" | "dotted";
@@ -27,7 +28,7 @@ export function CatalogDivider({ borderStyle = "solid" }: CatalogDividerProps) {
 export function CatalogContentDivider({
   actionLabel,
   borderStyle = "solid",
-  dir = "ltr",
+  dir,
   disabled = false,
   label,
   onAction,
@@ -36,9 +37,9 @@ export function CatalogContentDivider({
     <div className={`ds-content-divider ds-content-divider--${borderStyle}`} dir={dir}>
       <span aria-hidden="true" className="ds-content-divider__rule" />
       {actionLabel && onAction ? (
-        <button className="ds-content-divider__button" disabled={disabled} onClick={onAction} type="button">
+        <Button className="ds-content-divider__button" disabled={disabled} onClick={onAction} size="sm" type="button" variant="soft">
           {actionLabel}
-        </button>
+        </Button>
       ) : label ? (
         <span className="ds-content-divider__label">{label}</span>
       ) : null}

package/registry/components/expanded/EmptyState.tsx

@@ -38,7 +38,7 @@ export function EmptyState({
   align = "center",
   className,
   description,
-  dir = "ltr",
+  dir,
   icon,
   iconLabel,
   size = "default",

package/registry/components/expanded/FileUpload.tsx

@@ -52,7 +52,7 @@ export function FileUpload({
   accept,
   browseLabel,
   cancelLabel = "Cancel upload",
-  dir = "ltr",
+  dir,
   disabled = false,
   dropzoneState = "default",
   files = [],
@@ -154,9 +154,9 @@ export function FileUpload({
               <p className="ds-file-upload__title">
                 {resolvedPrompt}{" "}
                 {resolvedBrowseLabel && (
-                  <button className="ds-file-upload__browse" disabled={disabled} onClick={browse} type="button">
+                  <Button className="ds-file-upload__browse" disabled={disabled} onClick={browse} size="xs" type="button" variant="link">
                     {resolvedBrowseLabel}
-                  </button>
+                  </Button>
                 )}
               </p>
             )}
@@ -251,7 +251,14 @@ function FileUploadRow({
           )}
 
           {isProgress && (
-            <div className="ds-file-upload-row__progress" aria-label={`Upload progress ${progressLabel}`}>
+            <div
+              aria-label={`Upload progress ${progressLabel}`}
+              aria-valuemax={100}
+              aria-valuemin={0}
+              aria-valuenow={progressValue}
+              className="ds-file-upload-row__progress"
+              role="progressbar"
+            >
               <span className="ds-file-upload-row__progress-track">
                 <span className="ds-file-upload-row__progress-fill" style={{ width: `${progressValue}%` }} />
               </span>
@@ -260,9 +267,9 @@ function FileUploadRow({
           )}
 
           {!isSmall && file.status === "error" && (
-            <button className="ds-file-upload-row__retry" onClick={() => onRetry?.(file.id)} type="button">
+            <Button className="ds-file-upload-row__retry" onClick={() => onRetry?.(file.id)} size="xs" type="button" variant="link">
               {retryLabel}
-            </button>
+            </Button>
           )}
         </div>
       </div>
@@ -397,12 +404,14 @@ function StatusIcon({
 }) {
   return (
     <span
+      aria-hidden={standalone ? undefined : "true"}
+      aria-label={standalone ? getStatusLabel(status) : undefined}
       className={cx(
         "ds-file-upload-row__status",
         standalone && "ds-file-upload-row__status--standalone",
         `ds-file-upload-row__status--${status}`
       )}
-      aria-label={getStatusLabel(status)}
+      role={standalone ? "img" : undefined}
     >
       {status === "uploaded" && <CheckboxCircleFillIcon />}
       {status === "uploading" && <Loader2LineIcon />}

package/registry/components/expanded/OnboardingStepListItem.tsx

@@ -15,13 +15,12 @@ export type OnboardingStepListItemProps = {
 
 export function OnboardingStepListItem({
   className = "",
-  dir = "ltr",
+  dir,
   label,
   showLeadingLine = true,
   showTrailingLine = true,
   state = "finished",
 }: OnboardingStepListItemProps) {
-  const rtl = dir === "rtl";
   const isFinished = state === "finished";
   const isActive = state === "active";
   const isInactive = state === "inactive";
@@ -31,7 +30,6 @@ export function OnboardingStepListItem({
       className={[
         "ds-onboarding-step",
         `ds-onboarding-step--${state}`,
-        rtl ? "ds-onboarding-step--rtl" : "ds-onboarding-step--ltr",
         className,
       ]
         .filter(Boolean)
@@ -55,9 +53,7 @@ function CheckCircleIcon() {
     <CircleCheckIcon
       aria-hidden="true"
       className="ds-onboarding-step__check"
-      height="20"
-      strokeWidth={2.25}
-      width="20"
+      strokeWidth="var(--bh-icon-stroke-225)"
     />
   );
 }

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;
@@ -41,43 +44,7 @@ function classes(...names: Array<string | false | undefined>) {
 }
 
 function HomeIcon() {
-  return <LucideHomeIcon aria-hidden="true" className="ds-page-header__home-icon" strokeWidth={1.9} />;
-}
-
-function Breadcrumbs({ items, label }: { items: PageHeaderBreadcrumb[]; label?: string }) {
-  return (
-    <nav aria-label={label} className="ds-page-header__breadcrumbs" data-node-id="1134:39921">
-      <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>
-  );
+  return <LucideHomeIcon aria-hidden="true" className="ds-page-header__home-icon" strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
 function Action({ action }: { action: PageHeaderAction }) {
@@ -86,22 +53,37 @@ function Action({ action }: { action: PageHeaderAction }) {
 
   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>
   );
 }
 
@@ -111,7 +93,8 @@ export function PageHeader({
   breadcrumbs = [],
   className,
   description,
-  dir = "ltr",
+  dir,
+  headingLevel = 1,
   icon,
   metaInfo,
   tabs = {},
@@ -120,34 +103,42 @@ 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)} data-node-id="1154:2816" dir={dir}>
-      {breadcrumbItems.length > 0 && <Breadcrumbs items={breadcrumbItems} label={breadcrumbLabel} />}
-
-      <div className="ds-page-header__section" data-node-id="1134:40171">
-        <div className="ds-page-header__topline" data-node-id="1134:40048">
-          <div className="ds-page-header__copy" data-node-id="1134:40046">
-            <div className="ds-page-header__heading-row" data-node-id="1136:40843">
-              <div className="ds-page-header__heading-main" data-node-id="1157:13000">
+    <header className={classes("ds-page-header", className)} dir={dir}>
+      {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">
+          <div className="ds-page-header__copy">
+            <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 data-node-id="1134:39780">{title}</h1>}
+                {title && <Heading className="ds-page-header__title">{title}</Heading>}
               </div>
               {metaInfo && (
-                <span className="ds-page-header__meta" data-node-id="1134:40045">
+                <span className="ds-page-header__meta">
                   {metaInfo}
                 </span>
               )}
             </div>
             {description && (
-              <p className="ds-page-header__description" data-node-id="1136:40842">
+              <p className="ds-page-header__description">
                 {description}
               </p>
             )}
           </div>
 
           {actionItems.length > 0 && (
-            <div className="ds-page-header__actions" data-node-id="1156:2489">
+            <div className="ds-page-header__actions">
               {actionItems.map((action, index) => (
                 <Action action={action} key={`${action.label}-${index}`} />
               ))}