banhaten 0.1.0 → 0.1.1

package/registry/components/expanded/CatalogComponentsShowcase.tsx

@@ -36,17 +36,12 @@ const breadcrumbAriaLabel = "Catalog breadcrumbs";
 const rtlBreadcrumbAriaLabel = "\u0627\u0644\u0645\u0633\u0627\u0631";
 
 const uploadFiles: FileUploadFile[] = [
-  { id: "tokens", name: "semantic-tokens.json", sizeLabel: "4 MB", versionLabel: "v3.0", status: "uploaded" },
-  { id: "components", name: "component-inventory.csv", sizeLabel: "18 MB", versionLabel: "v2.4", status: "uploading" },
-  { id: "icons", name: "icons-shortlist.pdf", sizeLabel: "7 MB", status: "error", errorLabel: "Needs retry" },
+  { id: "uploaded", name: "file-name.pdf", sizeLabel: "32mb", versionLabel: "v1.2.2", status: "uploaded" },
+  { id: "uploading", name: "file-name.pdf", sizeLabel: "32mb", versionLabel: "v1.2.2", status: "uploading" },
+  { id: "progress", name: "file-name.pdf", sizeLabel: "32 KB", progress: 40, status: "uploading-progress" },
+  { id: "error", name: "file-name.pdf", sizeLabel: "32mb", versionLabel: "v1.2.2", status: "error", errorLabel: "Upload failed" },
 ];
 
-const fileUploadCopy = {
-  browseLabel: "Browse",
-  helperText: "SVG, PNG, PDF, or CSV up to 50 MB",
-  prompt: "Drag and drop files here, or",
-};
-
 const projectRows: ProjectRow[] = [
   { id: "1", name: "Component audit", leader: "Maya Chen", progress: 84, status: "On track", deadline: "Jun 12" },
   { id: "2", name: "Icon decision", leader: "Ahmed Galal", progress: 64, status: "Review", deadline: "Jun 18" },
@@ -121,7 +116,7 @@ export function CatalogComponentsShowcase() {
             aria-label={rtlBreadcrumbAriaLabel}
             dir="rtl"
             items={rtlBreadcrumbItems}
-            overflowLabel="\u0627\u0644\u0645\u0632\u064a\u062f"
+            overflowLabel={"\u0627\u0644\u0645\u0632\u064a\u062f"}
             separator="chevron"
             style="raised"
           />
@@ -134,7 +129,7 @@ export function CatalogComponentsShowcase() {
           <CatalogDivider borderStyle="dotted" />
           <CatalogContentDivider label="Text" />
           <CatalogContentDivider actionLabel="Button" onAction={() => undefined} />
-          <CatalogContentDivider dir="rtl" label="\u0646\u0635" borderStyle="dotted" />
+          <CatalogContentDivider dir="rtl" label={"\u0646\u0635"} borderStyle="dotted" />
         </div>
       </ShowcaseCard>
 
@@ -162,21 +157,21 @@ export function CatalogComponentsShowcase() {
             large
           </CatalogTag>
           <CatalogTag
-            avatar="\u0645"
-            closeLabel="\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645"
+            avatar={"\u0645"}
+            closeLabel={"\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645"}
             dir="rtl"
             type="avatar"
             showCloseButton
           >
-            \u0645\u0644\u0635\u0642
+            {"\u0645\u0644\u0635\u0642"}
           </CatalogTag>
         </div>
       </ShowcaseCard>
 
       <ShowcaseCard title="File Upload" description="Large and small queued-file upload states.">
         <div className="catalog-showcase__upload-grid">
-          <FileUpload {...fileUploadCopy} files={uploadFiles} multiple />
-          <FileUpload {...fileUploadCopy} files={uploadFiles.slice(0, 1)} size="sm" />
+          <FileUpload files={uploadFiles} multiple />
+          <FileUpload files={uploadFiles.slice(0, 4)} size="sm" />
         </div>
       </ShowcaseCard>
 

package/registry/components/expanded/CatalogTag.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { PlusIcon as LucidePlusIcon, XIcon } from "lucide-react";
 import "./tag.css";
 
 export type TagType = "simple" | "dot" | "flag" | "avatar" | "icon";
@@ -61,7 +62,7 @@ export function CatalogTag({
         <span aria-hidden="true" className="ds-tag__leading">
           {type === "dot" && <span className="ds-tag__dot" />}
           {type === "flag" && (flag ?? <span className="ds-tag__flag" />)}
-          {type === "avatar" && avatar}
+          {type === "avatar" && <span className="ds-tag__avatar">{avatar}</span>}
           {type === "icon" && (icon ?? <PlusIcon />)}
         </span>
       )}
@@ -76,17 +77,9 @@ export function CatalogTag({
 }
 
 function PlusIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 16 16">
-      <path d="M8 3.5v9M3.5 8h9" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.7" />
-    </svg>
-  );
+  return <LucidePlusIcon aria-hidden="true" strokeWidth={2.25} />;
 }
 
 function CloseIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 16 16">
-      <path d="m4.5 4.5 7 7M11.5 4.5l-7 7" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.6" />
-    </svg>
-  );
+  return <XIcon aria-hidden="true" strokeWidth={2.25} />;
 }

package/registry/components/expanded/CommandBar.tsx

@@ -1,5 +1,16 @@
 import "./commandBar.css";
 
+import {
+  ArrowUpDownIcon as LucideArrowUpDownIcon,
+  BookOpenIcon,
+  CommandIcon,
+  CornerDownLeftIcon,
+  SearchIcon as LucideSearchIcon,
+  XIcon,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
 export type CommandBarType = "default" | "recent" | "results" | "no-result";
 export type CommandBarBreakpoint = "desktop" | "mobile";
 
@@ -34,7 +45,7 @@ type CommandRow = {
   readonly visual: "avatar" | "icon";
 };
 
-const shortcutText = "\u2318K";
+const shortcutLabel = "Command K";
 
 const ltrCopy: CommandBarCopy = {
   clear: "Clear search",
@@ -248,9 +259,15 @@ function FilterSection({ copy }: { copy: CommandBarCopy }) {
       <SectionHeading>{copy.searchFor}</SectionHeading>
       <div className="ds-command-bar__tags" aria-label={copy.searchFor}>
         {copy.tags.map((tag) => (
-          <button className="ds-command-bar__tag" key={tag} type="button">
+          <Button
+            className="ds-command-bar__tag"
+            key={tag}
+            size="sm"
+            type="button"
+            variant="secondary"
+          >
             {tag}
-          </button>
+          </Button>
         ))}
       </div>
     </div>
@@ -326,7 +343,14 @@ function CommandFooter({ copy }: { copy: CommandBarCopy }) {
 }
 
 function Shortcut() {
-  return <kbd className="ds-command-bar__shortcut">{shortcutText}</kbd>;
+  return (
+    <kbd aria-label={shortcutLabel} className="ds-command-bar__shortcut">
+      <CommandIcon aria-hidden="true" className="ds-command-bar__shortcut-icon" />
+      <span aria-hidden="true" className="ds-command-bar__shortcut-key">
+        K
+      </span>
+    </kbd>
+  );
 }
 
 function IconWrap() {
@@ -342,65 +366,21 @@ function Avatar() {
 }
 
 function SearchIcon({ size = 24 }: { size?: number }) {
-  return (
-    <svg aria-hidden="true" fill="none" height={size} viewBox="0 0 24 24" width={size}>
-      <path
-        d="M10.75 18.5a7.75 7.75 0 1 1 5.48-2.27l3.02 3.02"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-      />
-    </svg>
-  );
+  return <LucideSearchIcon aria-hidden="true" height={size} strokeWidth={2} width={size} />;
 }
 
 function CloseIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 20 20" width="20">
-      <path d="m5 5 10 10M15 5 5 15" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
-    </svg>
-  );
+  return <XIcon aria-hidden="true" height="20" strokeWidth={2.2} width="20" />;
 }
 
 function BookIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 20 20" width="20">
-      <path
-        d="M5.5 3.5h8.2c.9 0 1.6.7 1.6 1.6v10.4H6.2a1.5 1.5 0 0 0 0 3h9.1M5.5 3.5a2 2 0 0 0-2 2v11a2 2 0 0 1 2-2m0-11v11m2.4-7.8h4.8"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.6"
-      />
-    </svg>
-  );
+  return <BookOpenIcon aria-hidden="true" height="20" strokeWidth={1.8} width="20" />;
 }
 
 function ArrowUpDownIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" height="16" viewBox="0 0 16 16" width="16">
-      <path
-        d="M5 2v12m0 0 2.5-2.5M5 14l-2.5-2.5M11 14V2m0 0 2.5 2.5M11 2 8.5 4.5"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.45"
-      />
-    </svg>
-  );
+  return <LucideArrowUpDownIcon aria-hidden="true" height="16" strokeWidth={1.9} width="16" />;
 }
 
 function EnterIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" height="16" viewBox="0 0 16 16" width="16">
-      <path
-        d="M12.5 3.5v3.25a3 3 0 0 1-3 3H3.75m0 0L6.2 7.3M3.75 9.75 6.2 12.2"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.45"
-      />
-    </svg>
-  );
+  return <CornerDownLeftIcon aria-hidden="true" height="16" strokeWidth={1.9} width="16" />;
 }