banhaten 0.3.0 → 0.5.0

package/registry/components/expanded/CatalogComponentsShowcase.tsx

@@ -1,205 +1,205 @@
-import { useState } from "react";
-import {
-  BreadcrumbFolderIcon,
-  BreadcrumbHomeIcon,
-  Breadcrumbs,
-  type BreadcrumbItem,
-} from "./Breadcrumbs";
-import { CatalogContentDivider, CatalogDivider } from "./CatalogDivider";
-import { FileUpload, type FileUploadFile } from "./FileUpload";
-import { Table, type TableColumn, type TableRowBase } from "./Table";
-import { Tag, type TagState, type TagType } from "@/components/ui/tag";
-import "./catalogComponentsShowcase.css";
-
-type ProjectRow = TableRowBase & {
-  deadline: string;
-  leader: string;
-  name: string;
-  progress: number;
-  status: "On track" | "Review" | "Blocked";
-};
-
-const breadcrumbItems: BreadcrumbItem[] = [
-  { label: "Home", href: "#", icon: <BreadcrumbHomeIcon /> },
-  { label: "Design system", href: "#", icon: <BreadcrumbFolderIcon /> },
-  { label: "Components", href: "#" },
-  { label: "Playground", current: true },
-];
-
-const rtlBreadcrumbItems: BreadcrumbItem[] = [
-  { label: "\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629", href: "#", icon: <BreadcrumbHomeIcon /> },
-  { label: "\u0627\u0644\u0646\u0638\u0627\u0645", href: "#", icon: <BreadcrumbFolderIcon /> },
-  { label: "\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a", current: true },
-];
-
-const rtlBreadcrumbAriaLabel = "\u0627\u0644\u0645\u0633\u0627\u0631";
-
-const uploadFiles: FileUploadFile[] = [
-  { 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 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" },
-  { id: "3", name: "RTL matrix", leader: "Nora Ali", progress: 38, status: "Blocked", deadline: "Jun 20" },
-  { id: "4", name: "Preset QA", leader: "Sam Rivera", progress: 92, status: "On track", deadline: "Jun 24", state: "disabled" },
-];
-
-const columns: TableColumn<ProjectRow>[] = [
-  { id: "select", width: 42, kind: "selection" },
-  {
-    id: "project",
-    header: "Project Name",
-    width: "fill",
-    minWidth: 230,
-    sortable: true,
-    item: (row) => ({ type: "text", value: row.name, weight: "medium" }),
-  },
-  {
-    id: "leader",
-    header: "Project Leader",
-    width: 190,
-    sortable: true,
-    item: (row) => ({ type: "avatarText", name: row.leader, caption: "Design ops" }),
-  },
-  {
-    id: "status",
-    header: "Status",
-    width: 138,
-    sortable: true,
-    item: (row) => ({
-      type: "badges",
-      items: [
-        {
-          dot: true,
-          label: row.status,
-          tone: row.status === "On track" ? "success" : row.status === "Review" ? "amber" : "danger",
-        },
-      ],
-    }),
-  },
-  {
-    id: "progress",
-    header: "Progress",
-    width: 160,
-    sortable: true,
-    item: (row) => ({ type: "progress", value: row.progress, label: `${row.progress}%` }),
-  },
-  {
-    id: "deadline",
-    header: "Deadline",
-    width: 120,
-    sortable: true,
-    item: (row) => ({ type: "text", value: row.deadline, tone: "subtle" }),
-  },
-  { id: "actions", width: 44, kind: "actions", item: () => ({ type: "action", icon: "more", label: "Open row actions" }) },
-];
-
-const tagTypes: TagType[] = ["simple", "dot", "flag", "avatar", "icon"];
-const tagStates: TagState[] = ["default", "active", "disabled"];
-
-export function CatalogComponentsShowcase() {
-  const [selectedRows, setSelectedRows] = useState(["1", "2"]);
-
-  return (
-    <div className="catalog-showcase">
-      <ShowcaseCard title="Breadcrumbs" description="Default, raised, icon-only, separator, and RTL variants.">
-        <div className="catalog-showcase__stack">
-          <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"
-            items={rtlBreadcrumbItems}
-            overflowLabel={"\u0627\u0644\u0645\u0632\u064a\u062f"}
-            separator="chevron"
-            style="raised"
-          />
-        </div>
-      </ShowcaseCard>
-
-      <ShowcaseCard title="Dividers" description="Plain separators plus content dividers with label or action content.">
-        <div className="catalog-showcase__stack">
-          <CatalogDivider />
-          <CatalogDivider borderStyle="dotted" />
-          <CatalogContentDivider label="Text" />
-          <CatalogContentDivider actionLabel="Button" onAction={() => undefined} />
-          <CatalogContentDivider dir="rtl" label={"\u0646\u0635"} borderStyle="dotted" />
-        </div>
-      </ShowcaseCard>
-
-      <ShowcaseCard title="Tags" description="Type, state, size, close button, and RTL coverage.">
-        <div className="catalog-showcase__tag-grid">
-          {tagTypes.map((type) => (
-            <Tag
-              closeLabel="Remove tag"
-              key={type}
-              showCloseButton={type === "simple"}
-              type={type}
-              avatar={type === "avatar" ? "A" : undefined}
-            >
-              {type}
-            </Tag>
-          ))}
-          {tagStates.map((state) => (
-            <Tag key={state} state={state} type="dot">
-              {state}
-            </Tag>
-          ))}
-          <Tag size="xs">xs</Tag>
-          <Tag size="md">md</Tag>
-          <Tag closeLabel="Remove tag" size="lg" showCloseButton>
-            large
-          </Tag>
-          <Tag
-            avatar={"\u0645"}
-            closeLabel={"\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645"}
-            dir="rtl"
-            type="avatar"
-            showCloseButton
-          >
-            {"\u0645\u0644\u0635\u0642"}
-          </Tag>
-        </div>
-      </ShowcaseCard>
-
-      <ShowcaseCard title="File Upload" description="Large and small queued-file upload states.">
-        <div className="catalog-showcase__upload-grid">
-          <FileUpload files={uploadFiles} multiple />
-          <FileUpload files={uploadFiles.slice(0, 4)} size="sm" />
-        </div>
-      </ShowcaseCard>
-
-      <ShowcaseCard title="Table" description="Selection, sort headers, status badges, progress, row states, and RTL mirroring.">
-        <div className="catalog-showcase__stack">
-          <Table columns={columns} rows={projectRows} selectedRowIds={selectedRows} onSelectedRowIdsChange={setSelectedRows} />
-          <Table columns={columns} dir="rtl" rows={projectRows.slice(0, 3)} selectedRowIds={selectedRows} onSelectedRowIdsChange={setSelectedRows} />
-        </div>
-      </ShowcaseCard>
-    </div>
-  );
-}
-
-function ShowcaseCard({
-  children,
-  description,
-  title,
-}: {
-  children: React.ReactNode;
-  description: string;
-  title: string;
-}) {
-  return (
-    <article className="catalog-showcase__card">
-      <header className="catalog-showcase__card-header">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </header>
-      {children}
-    </article>
-  );
-}
+import { useState } from "react";
+import {
+  BreadcrumbFolderIcon,
+  BreadcrumbHomeIcon,
+  Breadcrumbs,
+  type BreadcrumbItem,
+} from "./Breadcrumbs";
+import { CatalogContentDivider, CatalogDivider } from "./CatalogDivider";
+import { FileUpload, type FileUploadFile } from "./FileUpload";
+import { Table, type TableColumn, type TableRowBase } from "./Table";
+import { Tag, type TagState, type TagType } from "@/components/ui/tag";
+import "./catalogComponentsShowcase.css";
+
+type ProjectRow = TableRowBase & {
+  deadline: string;
+  leader: string;
+  name: string;
+  progress: number;
+  status: "On track" | "Review" | "Blocked";
+};
+
+const breadcrumbItems: BreadcrumbItem[] = [
+  { label: "Home", href: "#", icon: <BreadcrumbHomeIcon /> },
+  { label: "Design system", href: "#", icon: <BreadcrumbFolderIcon /> },
+  { label: "Components", href: "#" },
+  { label: "Playground", current: true },
+];
+
+const rtlBreadcrumbItems: BreadcrumbItem[] = [
+  { label: "\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629", href: "#", icon: <BreadcrumbHomeIcon /> },
+  { label: "\u0627\u0644\u0646\u0638\u0627\u0645", href: "#", icon: <BreadcrumbFolderIcon /> },
+  { label: "\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a", current: true },
+];
+
+const rtlBreadcrumbAriaLabel = "\u0627\u0644\u0645\u0633\u0627\u0631";
+
+const uploadFiles: FileUploadFile[] = [
+  { 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 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" },
+  { id: "3", name: "RTL matrix", leader: "Nora Ali", progress: 38, status: "Blocked", deadline: "Jun 20" },
+  { id: "4", name: "Preset QA", leader: "Sam Rivera", progress: 92, status: "On track", deadline: "Jun 24", state: "disabled" },
+];
+
+const columns: TableColumn<ProjectRow>[] = [
+  { id: "select", width: 42, kind: "selection" },
+  {
+    id: "project",
+    header: "Project Name",
+    width: "fill",
+    minWidth: 230,
+    sortable: true,
+    item: (row) => ({ type: "text", value: row.name, weight: "medium" }),
+  },
+  {
+    id: "leader",
+    header: "Project Leader",
+    width: 190,
+    sortable: true,
+    item: (row) => ({ type: "avatarText", name: row.leader, caption: "Design ops" }),
+  },
+  {
+    id: "status",
+    header: "Status",
+    width: 138,
+    sortable: true,
+    item: (row) => ({
+      type: "badges",
+      items: [
+        {
+          dot: true,
+          label: row.status,
+          tone: row.status === "On track" ? "success" : row.status === "Review" ? "amber" : "danger",
+        },
+      ],
+    }),
+  },
+  {
+    id: "progress",
+    header: "Progress",
+    width: 160,
+    sortable: true,
+    item: (row) => ({ type: "progress", value: row.progress, label: `${row.progress}%` }),
+  },
+  {
+    id: "deadline",
+    header: "Deadline",
+    width: 120,
+    sortable: true,
+    item: (row) => ({ type: "text", value: row.deadline, tone: "subtle" }),
+  },
+  { id: "actions", width: 44, kind: "actions", item: () => ({ type: "action", icon: "more", label: "Open row actions" }) },
+];
+
+const tagTypes: TagType[] = ["simple", "dot", "flag", "avatar", "icon"];
+const tagStates: TagState[] = ["default", "active", "disabled"];
+
+export function CatalogComponentsShowcase() {
+  const [selectedRows, setSelectedRows] = useState(["1", "2"]);
+
+  return (
+    <div className="catalog-showcase">
+      <ShowcaseCard title="Breadcrumbs" description="Default, raised, icon-only, separator, and RTL variants.">
+        <div className="catalog-showcase__stack">
+          <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"
+            items={rtlBreadcrumbItems}
+            overflowLabel={"\u0627\u0644\u0645\u0632\u064a\u062f"}
+            separator="chevron"
+            style="raised"
+          />
+        </div>
+      </ShowcaseCard>
+
+      <ShowcaseCard title="Dividers" description="Plain separators plus content dividers with label or action content.">
+        <div className="catalog-showcase__stack">
+          <CatalogDivider />
+          <CatalogDivider borderStyle="dotted" />
+          <CatalogContentDivider label="Text" />
+          <CatalogContentDivider actionLabel="Button" onAction={() => undefined} />
+          <CatalogContentDivider dir="rtl" label={"\u0646\u0635"} borderStyle="dotted" />
+        </div>
+      </ShowcaseCard>
+
+      <ShowcaseCard title="Tags" description="Type, state, size, close button, and RTL coverage.">
+        <div className="catalog-showcase__tag-grid">
+          {tagTypes.map((type) => (
+            <Tag
+              closeLabel="Remove tag"
+              key={type}
+              showCloseButton={type === "simple"}
+              type={type}
+              avatar={type === "avatar" ? "A" : undefined}
+            >
+              {type}
+            </Tag>
+          ))}
+          {tagStates.map((state) => (
+            <Tag key={state} state={state} type="dot">
+              {state}
+            </Tag>
+          ))}
+          <Tag size="xs">xs</Tag>
+          <Tag size="md">md</Tag>
+          <Tag closeLabel="Remove tag" size="lg" showCloseButton>
+            large
+          </Tag>
+          <Tag
+            avatar={"\u0645"}
+            closeLabel={"\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645"}
+            dir="rtl"
+            type="avatar"
+            showCloseButton
+          >
+            {"\u0645\u0644\u0635\u0642"}
+          </Tag>
+        </div>
+      </ShowcaseCard>
+
+      <ShowcaseCard title="File Upload" description="Large and small queued-file upload states.">
+        <div className="catalog-showcase__upload-grid">
+          <FileUpload files={uploadFiles} multiple />
+          <FileUpload files={uploadFiles.slice(0, 4)} size="sm" />
+        </div>
+      </ShowcaseCard>
+
+      <ShowcaseCard title="Table" description="Selection, sort headers, status badges, progress, row states, and RTL mirroring.">
+        <div className="catalog-showcase__stack">
+          <Table columns={columns} rows={projectRows} selectedRowIds={selectedRows} onSelectedRowIdsChange={setSelectedRows} />
+          <Table columns={columns} dir="rtl" rows={projectRows.slice(0, 3)} selectedRowIds={selectedRows} onSelectedRowIdsChange={setSelectedRows} />
+        </div>
+      </ShowcaseCard>
+    </div>
+  );
+}
+
+function ShowcaseCard({
+  children,
+  description,
+  title,
+}: {
+  children: React.ReactNode;
+  description: string;
+  title: string;
+}) {
+  return (
+    <article className="catalog-showcase__card">
+      <header className="catalog-showcase__card-header">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </header>
+      {children}
+    </article>
+  );
+}

package/registry/components/expanded/CatalogDivider.tsx

@@ -1,49 +1,49 @@
-import { Button } from "@/components/ui/button";
-import "./divider.css";
-
-export type DividerBorderStyle = "solid" | "dotted";
-export type DividerDirection = "horizontal";
-
-export type CatalogDividerBorderStyle = DividerBorderStyle;
-export type CatalogDividerDirection = DividerDirection;
-
-export type CatalogDividerProps = {
-  borderStyle?: DividerBorderStyle;
-  direction?: DividerDirection;
-};
-
-export type CatalogContentDividerProps = {
-  actionLabel?: string;
-  borderStyle?: DividerBorderStyle;
-  dir?: "ltr" | "rtl" | "auto";
-  disabled?: boolean;
-  label?: string;
-  onAction?: () => void;
-};
-
-export function CatalogDivider({ borderStyle = "solid" }: CatalogDividerProps) {
-  return <hr className={`ds-divider ds-divider--${borderStyle}`} />;
-}
-
-export function CatalogContentDivider({
-  actionLabel,
-  borderStyle = "solid",
-  dir,
-  disabled = false,
-  label,
-  onAction,
-}: CatalogContentDividerProps) {
-  return (
-    <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} size="sm" type="button" variant="soft">
-          {actionLabel}
-        </Button>
-      ) : label ? (
-        <span className="ds-content-divider__label">{label}</span>
-      ) : null}
-      <span aria-hidden="true" className="ds-content-divider__rule" />
-    </div>
-  );
-}
+import { Button } from "@/components/ui/button";
+import "./divider.css";
+
+export type DividerBorderStyle = "solid" | "dotted";
+export type DividerDirection = "horizontal";
+
+export type CatalogDividerBorderStyle = DividerBorderStyle;
+export type CatalogDividerDirection = DividerDirection;
+
+export type CatalogDividerProps = {
+  borderStyle?: DividerBorderStyle;
+  direction?: DividerDirection;
+};
+
+export type CatalogContentDividerProps = {
+  actionLabel?: string;
+  borderStyle?: DividerBorderStyle;
+  dir?: "ltr" | "rtl" | "auto";
+  disabled?: boolean;
+  label?: string;
+  onAction?: () => void;
+};
+
+export function CatalogDivider({ borderStyle = "solid" }: CatalogDividerProps) {
+  return <hr className={`ds-divider ds-divider--${borderStyle}`} />;
+}
+
+export function CatalogContentDivider({
+  actionLabel,
+  borderStyle = "solid",
+  dir,
+  disabled = false,
+  label,
+  onAction,
+}: CatalogContentDividerProps) {
+  return (
+    <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} size="sm" type="button" variant="soft">
+          {actionLabel}
+        </Button>
+      ) : label ? (
+        <span className="ds-content-divider__label">{label}</span>
+      ) : null}
+      <span aria-hidden="true" className="ds-content-divider__rule" />
+    </div>
+  );
+}