banhaten 0.1.2 → 0.2.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,
@@ -156,7 +150,6 @@ export function ActivityFeedItem({
 }: 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>,
@@ -172,10 +165,9 @@ export function ActivityFeedItem({
         rtl ? "ds-activity-feed-item--rtl" : "ds-activity-feed-item--ltr",
         className,
       )}
-      data-node-id={nodeId}
       dir={rtl ? "rtl" : "ltr"}
     >
-      <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,7 +207,7 @@ export function ActivityFeed({
   ariaLabel,
   avatarSrc = defaultAvatarSrc,
   className,
-  dir = "ltr",
+  dir,
   items = [],
 }: ActivityFeedProps) {
   const rtl = dir === "rtl";
@@ -224,7 +216,6 @@ export function ActivityFeed({
     <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"}
     >
       {items.map((item, index) => (

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,

package/registry/components/expanded/Breadcrumbs.tsx

@@ -49,7 +49,7 @@ function visibleItems(
 
 export function Breadcrumbs({
   "aria-label": ariaLabel,
-  dir = "ltr",
+  dir,
   iconOnly = false,
   items,
   maxItems,
@@ -112,17 +112,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 & {
@@ -99,8 +99,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"]);
@@ -136,7 +136,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 +144,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 +164,7 @@ export function CatalogComponentsShowcase() {
             showCloseButton
           >
             {"\u0645\u0644\u0635\u0642"}
-          </CatalogTag>
+          </Tag>
         </div>
       </ShowcaseCard>
 

package/registry/components/expanded/CatalogDivider.tsx

@@ -27,7 +27,7 @@ export function CatalogDivider({ borderStyle = "solid" }: CatalogDividerProps) {
 export function CatalogContentDivider({
   actionLabel,
   borderStyle = "solid",
-  dir = "ltr",
+  dir,
   disabled = false,
   label,
   onAction,

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 = [],
@@ -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>

package/registry/components/expanded/OnboardingStepListItem.tsx

@@ -15,7 +15,7 @@ export type OnboardingStepListItemProps = {
 
 export function OnboardingStepListItem({
   className = "",
-  dir = "ltr",
+  dir,
   label,
   showLeadingLine = true,
   showTrailingLine = true,
@@ -55,9 +55,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,6 +1,6 @@
 import type { ReactNode } from "react";
 import { HomeIcon as LucideHomeIcon } from "lucide-react";
-import { Tabs, type TabsProps } from "./Tabs";
+import { Tabs, type TabsProps } from "../tabs";
 import "./pageHeader.css";
 
 export type PageHeaderBreadcrumb = {
@@ -41,12 +41,12 @@ function classes(...names: Array<string | false | undefined>) {
 }
 
 function HomeIcon() {
-  return <LucideHomeIcon aria-hidden="true" className="ds-page-header__home-icon" strokeWidth={1.9} />;
+  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" data-node-id="1134:39921">
+    <nav aria-label={label} className="ds-page-header__breadcrumbs">
       <ol>
         {items.map((item, index) => {
           const isLast = index === items.length - 1;
@@ -111,7 +111,7 @@ export function PageHeader({
   breadcrumbs = [],
   className,
   description,
-  dir = "ltr",
+  dir,
   icon,
   metaInfo,
   tabs = {},
@@ -122,32 +122,32 @@ export function PageHeader({
   const showIcon = icon !== false;
 
   return (
-    <header className={classes("ds-page-header", className)} data-node-id="1154:2816" dir={dir}>
+    <header className={classes("ds-page-header", className)} 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">
+      <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 && <h1>{title}</h1>}
               </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}`} />
               ))}