banhaten 0.1.0

package/registry/components/expanded/BannerBoard.tsx

@@ -0,0 +1,225 @@
+import {
+  Banner,
+  type BannerColor,
+  type BannerContent,
+  type BannerDirection,
+  type BannerSize,
+  type BannerType,
+} from "./Banner";
+
+type BannerSpec = {
+  id: string;
+  name: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+type ParsedBannerSpec = BannerSpec & {
+  color: BannerColor;
+  content: BannerContent;
+  dir: BannerDirection;
+  size: BannerSize;
+  type: BannerType;
+};
+
+const figmaTypeToProp: Record<string, BannerType> = {
+  Slim: "slim",
+  "Single action inline": "single-action-inline",
+  "Single action": "single-action",
+  Input: "input",
+};
+
+const figmaSizeToProp: Record<string, BannerSize> = {
+  Floating: "floating",
+  "Full width": "full-width",
+};
+
+const figmaContentToProp: Record<string, BannerContent> = {
+  Title: "title",
+  "Title + Description": "title-description",
+};
+
+const figmaColorToProp: Record<string, BannerColor> = {
+  Brand: "brand",
+  Grey: "grey",
+  "Brand Light": "brand-light",
+};
+
+const bannerSpecs: BannerSpec[] = [
+  { id: "237:39514", name: "type=Single action, Size=Full width, Content=Title, color=Brand, RTL=False", x: 1475, y: 377, width: 1440, height: 60 },
+  { id: "237:39521", name: "type=Single action, Size=Full width, Content=Title, color=Grey, RTL=False", x: 1475, y: 1144.8330078125, width: 1440, height: 60 },
+  { id: "237:39528", name: "type=Single action, Size=Full width, Content=Title, color=Brand Light, RTL=False", x: 1475, y: 1964.8330078125, width: 1440, height: 60 },
+  { id: "237:39543", name: "type=Single action, Size=Full width, Content=Title + Description, color=Grey, RTL=False", x: 1475, y: 1228.8330078125, width: 1440, height: 60 },
+  { id: "237:39553", name: "type=Single action, Size=Full width, Content=Title + Description, color=Brand Light, RTL=False", x: 1475, y: 2048.8330078125, width: 1440, height: 60 },
+  { id: "237:39574", name: "type=Input, Size=Full width, Content=Title, color=Brand, RTL=False", x: 1475, y: 566, width: 1440, height: 60 },
+  { id: "237:39583", name: "type=Input, Size=Full width, Content=Title + Description, color=Brand, RTL=False", x: 1475, y: 644, width: 1440, height: 60 },
+  { id: "237:39595", name: "type=Input, Size=Full width, Content=Title, color=Grey, RTL=False", x: 1475, y: 1341.8330078125, width: 1440, height: 60 },
+  { id: "237:39604", name: "type=Input, Size=Full width, Content=Title, color=Brand Light, RTL=False", x: 1475, y: 2161.8330078125, width: 1440, height: 60 },
+  { id: "237:39623", name: "type=Input, Size=Full width, Content=Title + Description, color=Grey, RTL=False", x: 1475, y: 1416.999755859375, width: 1440, height: 60 },
+  { id: "237:39635", name: "type=Input, Size=Full width, Content=Title + Description, color=Brand Light, RTL=False", x: 1475, y: 2236.999755859375, width: 1440, height: 60 },
+  { id: "237:39660", name: "type=Slim, Size=Full width, Content=Title, color=Brand, RTL=False", x: 1475, y: 63, width: 1440, height: 48 },
+  { id: "237:39666", name: "type=Slim, Size=Full width, Content=Title, color=Grey, RTL=False", x: 1475, y: 806.5, width: 1440, height: 48 },
+  { id: "237:39672", name: "type=Slim, Size=Full width, Content=Title, color=Brand Light, RTL=False", x: 1475, y: 1617.3330078125, width: 1440, height: 48 },
+  { id: "237:39685", name: "type=Slim, Size=Full width, Content=Title + Description, color=Grey, RTL=False", x: 1475, y: 884.5, width: 1440, height: 52 },
+  { id: "237:39694", name: "type=Slim, Size=Full width, Content=Title + Description, color=Brand Light, RTL=False", x: 1475, y: 1695.3330078125, width: 1440, height: 52 },
+  { id: "237:39713", name: "type=Single action, Size=Floating, Content=Title, color=Brand, RTL=False", x: 69, y: 377, width: 1217, height: 60 },
+  { id: "237:39720", name: "type=Single action, Size=Floating, Content=Title + Description, color=Brand, RTL=False", x: 69, y: 458, width: 1217, height: 60 },
+  { id: "237:39730", name: "type=Single action, Size=Full width, Content=Title + Description, color=Brand, RTL=False", x: 1475, y: 458, width: 1440, height: 60 },
+  { id: "237:39740", name: "type=Single action, Size=Floating, Content=Title, color=Grey, RTL=False", x: 69, y: 1144.8330078125, width: 1217, height: 64 },
+  { id: "237:39747", name: "type=Single action, Size=Floating, Content=Title, color=Brand Light, RTL=False", x: 69, y: 1964.8330078125, width: 1217, height: 60 },
+  { id: "237:39762", name: "type=Single action, Size=Floating, Content=Title + Description, color=Grey, RTL=False", x: 69, y: 1228.8330078125, width: 1217, height: 64 },
+  { id: "237:39772", name: "type=Single action, Size=Floating, Content=Title + Description, color=Brand Light, RTL=False", x: 69, y: 2048.8330078125, width: 1217, height: 60 },
+  { id: "237:39793", name: "type=Slim, Size=Floating, Content=Title, color=Brand, RTL=False", x: 69, y: 63, width: 1217, height: 48 },
+  { id: "237:39799", name: "type=Single action inline, Size=Floating, Content=Title, color=Brand, RTL=False", x: 69, y: 210, width: 1217, height: 60 },
+  { id: "237:39805", name: "type=Single action inline, Size=Floating, Content=Title, color=Grey, RTL=False", x: 69, y: 973.41650390625, width: 1217, height: 60 },
+  { id: "237:39811", name: "type=Single action inline, Size=Floating, Content=Title, color=Brand Light, RTL=False", x: 69, y: 1784.25, width: 1217, height: 60 },
+  { id: "237:39824", name: "type=Single action inline, Size=Full width, Content=Title, color=Brand, RTL=False", x: 1475, y: 210, width: 1440, height: 60 },
+  { id: "237:39830", name: "type=Single action inline, Size=Full width, Content=Title, color=Grey, RTL=False", x: 1475, y: 973.41650390625, width: 1440, height: 60 },
+  { id: "237:39836", name: "type=Single action inline, Size=Full width, Content=Title, color=Brand Light, RTL=False", x: 1475, y: 1784.25, width: 1440, height: 60 },
+  { id: "237:39849", name: "type=Single action inline, Size=Floating, Content=Title, color=Brand, RTL=True", x: 3119, y: 210, width: 1217, height: 60 },
+  { id: "237:39855", name: "type=Single action inline, Size=Floating, Content=Title, color=Grey, RTL=True", x: 3119, y: 972.249755859375, width: 1217, height: 60 },
+  { id: "237:39861", name: "type=Single action inline, Size=Floating, Content=Title, color=Brand Light, RTL=True", x: 3119, y: 1784.25, width: 1217, height: 60 },
+  { id: "237:39874", name: "type=Single action inline, Size=Full width, Content=Title, color=Brand, RTL=True", x: 4525, y: 210, width: 1440, height: 60 },
+  { id: "237:39880", name: "type=Single action inline, Size=Full width, Content=Title, color=Grey, RTL=True", x: 4525, y: 972.249755859375, width: 1440, height: 60 },
+  { id: "237:39886", name: "type=Single action inline, Size=Full width, Content=Title, color=Brand Light, RTL=True", x: 4525, y: 1784.25, width: 1440, height: 60 },
+  { id: "237:39899", name: "type=Slim, Size=Floating, Content=Title + Description, color=Brand, RTL=False", x: 69, y: 134, width: 1217, height: 52 },
+  { id: "237:39908", name: "type=Single action inline, Size=Floating, Content=Title + Description, color=Brand, RTL=False", x: 69, y: 291, width: 1217, height: 60 },
+  { id: "237:39917", name: "type=Single action inline, Size=Floating, Content=Title + Description, color=Grey, RTL=False", x: 69, y: 1054.41650390625, width: 1217, height: 60 },
+  { id: "237:39926", name: "type=Single action inline, Size=Floating, Content=Title + Description, color=Brand Light, RTL=False", x: 69, y: 1865.25, width: 1217, height: 60 },
+  { id: "237:39945", name: "type=Single action inline, Size=Full width, Content=Title + Description, color=Brand, RTL=False", x: 1475, y: 291, width: 1440, height: 60 },
+  { id: "237:39954", name: "type=Single action inline, Size=Full width, Content=Title + Description, color=Grey, RTL=False", x: 1475, y: 1054.41650390625, width: 1440, height: 60 },
+  { id: "237:39963", name: "type=Single action inline, Size=Full width, Content=Title + Description, color=Brand Light, RTL=False", x: 1475, y: 1865.25, width: 1440, height: 60 },
+  { id: "237:39982", name: "type=Single action inline, Size=Floating, Content=Title + Description, color=Brand, RTL=True", x: 3119, y: 291, width: 1217, height: 60 },
+  { id: "237:39991", name: "type=Single action inline, Size=Floating, Content=Title + Description, color=Grey, RTL=True", x: 3119, y: 1053.249755859375, width: 1217, height: 60 },
+  { id: "237:40000", name: "type=Single action inline, Size=Floating, Content=Title + Description, color=Brand Light, RTL=True", x: 3119, y: 1865.25, width: 1217, height: 60 },
+  { id: "237:40019", name: "type=Single action inline, Size=Full width, Content=Title + Description, color=Brand, RTL=True", x: 4525, y: 291, width: 1440, height: 60 },
+  { id: "237:40028", name: "type=Single action inline, Size=Full width, Content=Title + Description, color=Grey, RTL=True", x: 4525, y: 1053.249755859375, width: 1440, height: 60 },
+  { id: "237:40037", name: "type=Single action inline, Size=Full width, Content=Title + Description, color=Brand Light, RTL=True", x: 4525, y: 1865.25, width: 1440, height: 60 },
+  { id: "237:40056", name: "type=Slim, Size=Floating, Content=Title + Description, color=Brand, RTL=True", x: 3119, y: 134, width: 1217, height: 52 },
+  { id: "237:40065", name: "type=Slim, Size=Full width, Content=Title + Description, color=Brand, RTL=False", x: 1475, y: 134, width: 1440, height: 52 },
+  { id: "237:40074", name: "type=Slim, Size=Full width, Content=Title + Description, color=Brand, RTL=True", x: 4525, y: 134, width: 1440, height: 52 },
+  { id: "237:40083", name: "type=Slim, Size=Floating, Content=Title, color=Grey, RTL=False", x: 69, y: 820.5, width: 1217, height: 48 },
+  { id: "237:40089", name: "type=Slim, Size=Floating, Content=Title, color=Brand Light, RTL=False", x: 69, y: 1631.3330078125, width: 1217, height: 48 },
+  { id: "237:40103", name: "type=Slim, Size=Floating, Content=Title + Description, color=Grey, RTL=False", x: 69, y: 892.5, width: 1217, height: 52 },
+  { id: "237:40112", name: "type=Slim, Size=Floating, Content=Title + Description, color=Brand Light, RTL=False", x: 69, y: 1703.3330078125, width: 1217, height: 52 },
+  { id: "237:40132", name: "type=Input, Size=Floating, Content=Title, color=Brand, RTL=False", x: 69, y: 558, width: 1217, height: 60 },
+  { id: "237:40141", name: "type=Input, Size=Floating, Content=Title + Description, color=Brand, RTL=False", x: 69, y: 639, width: 1217, height: 60 },
+  { id: "237:40153", name: "type=Input, Size=Floating, Content=Title, color=Grey, RTL=False", x: 69, y: 1341.8330078125, width: 1217, height: 60 },
+  { id: "237:40162", name: "type=Input, Size=Floating, Content=Title, color=Brand Light, RTL=False", x: 69, y: 2161.8330078125, width: 1217, height: 60 },
+  { id: "237:40181", name: "type=Input, Size=Floating, Content=Title + Description, color=Grey, RTL=False", x: 69, y: 1422.8330078125, width: 1217, height: 60 },
+  { id: "237:40193", name: "type=Input, Size=Floating, Content=Title + Description, color=Brand Light, RTL=False", x: 69, y: 2242.8330078125, width: 1217, height: 60 },
+  { id: "237:40218", name: "type=Single action, Size=Full width, Content=Title, color=Brand, RTL=True", x: 4525, y: 369.1666259765625, width: 1440, height: 60 },
+  { id: "237:40225", name: "type=Single action, Size=Full width, Content=Title + Description, color=Brand, RTL=True", x: 4525, y: 450.1666259765625, width: 1440, height: 60 },
+  { id: "237:40235", name: "type=Single action, Size=Full width, Content=Title, color=Grey, RTL=True", x: 4525, y: 1141.8330078125, width: 1440, height: 60 },
+  { id: "237:40242", name: "type=Single action, Size=Full width, Content=Title, color=Brand Light, RTL=True", x: 4525, y: 1961.8330078125, width: 1440, height: 60 },
+  { id: "237:40257", name: "type=Single action, Size=Full width, Content=Title + Description, color=Grey, RTL=True", x: 4525, y: 1217.8330078125, width: 1440, height: 60 },
+  { id: "237:40267", name: "type=Single action, Size=Full width, Content=Title + Description, color=Brand Light, RTL=True", x: 4525, y: 2037.8330078125, width: 1440, height: 60 },
+  { id: "237:40288", name: "type=Input, Size=Full width, Content=Title, color=Brand, RTL=True", x: 4525, y: 550, width: 1440, height: 60 },
+  { id: "237:40297", name: "type=Input, Size=Full width, Content=Title + Description, color=Brand, RTL=True", x: 4525, y: 628, width: 1440, height: 60 },
+  { id: "237:40309", name: "type=Input, Size=Full width, Content=Title, color=Grey, RTL=True", x: 4525, y: 1340.8330078125, width: 1440, height: 60 },
+  { id: "237:40318", name: "type=Input, Size=Full width, Content=Title, color=Brand Light, RTL=True", x: 4525, y: 2160.8330078125, width: 1440, height: 60 },
+  { id: "237:40337", name: "type=Input, Size=Full width, Content=Title + Description, color=Grey, RTL=True", x: 4525, y: 1422.8330078125, width: 1440, height: 60 },
+  { id: "237:40349", name: "type=Input, Size=Full width, Content=Title + Description, color=Brand Light, RTL=True", x: 4525, y: 2242.8330078125, width: 1440, height: 60 },
+  { id: "237:40374", name: "type=Slim, Size=Full width, Content=Title, color=Brand, RTL=True", x: 4525, y: 63, width: 1440, height: 48 },
+  { id: "237:40380", name: "type=Slim, Size=Full width, Content=Title, color=Grey, RTL=True", x: 4525, y: 786.5, width: 1440, height: 48 },
+  { id: "237:40386", name: "type=Slim, Size=Full width, Content=Title, color=Brand Light, RTL=True", x: 4525, y: 1597.3330078125, width: 1440, height: 48 },
+  { id: "237:40399", name: "type=Slim, Size=Full width, Content=Title + Description, color=Grey, RTL=True", x: 4525, y: 874.3330078125, width: 1440, height: 52 },
+  { id: "237:40408", name: "type=Slim, Size=Full width, Content=Title + Description, color=Brand Light, RTL=True", x: 4525, y: 1685.166015625, width: 1440, height: 52 },
+  { id: "237:40427", name: "type=Single action, Size=Floating, Content=Title, color=Brand, RTL=True", x: 3119, y: 369.1666259765625, width: 1217, height: 60 },
+  { id: "237:40434", name: "type=Single action, Size=Floating, Content=Title + Description, color=Brand, RTL=True", x: 3119, y: 450.1666259765625, width: 1217, height: 60 },
+  { id: "237:40444", name: "type=Single action, Size=Floating, Content=Title, color=Grey, RTL=True", x: 3119, y: 1142.8330078125, width: 1217, height: 60 },
+  { id: "237:40451", name: "type=Single action, Size=Floating, Content=Title, color=Brand Light, RTL=True", x: 3119, y: 1962.8330078125, width: 1217, height: 60 },
+  { id: "237:40466", name: "type=Single action, Size=Floating, Content=Title + Description, color=Grey, RTL=True", x: 3119, y: 1225.8330078125, width: 1217, height: 60 },
+  { id: "237:40476", name: "type=Single action, Size=Floating, Content=Title + Description, color=Brand Light, RTL=True", x: 3119, y: 2045.8330078125, width: 1217, height: 60 },
+  { id: "237:40497", name: "type=Slim, Size=Floating, Content=Title, color=Brand, RTL=True", x: 3119, y: 63, width: 1217, height: 48 },
+  { id: "237:40503", name: "type=Slim, Size=Floating, Content=Title, color=Grey, RTL=True", x: 3119, y: 798.5, width: 1217, height: 48 },
+  { id: "237:40509", name: "type=Slim, Size=Floating, Content=Title, color=Brand Light, RTL=True", x: 3119, y: 1609.3330078125, width: 1217, height: 48 },
+  { id: "237:40523", name: "type=Slim, Size=Floating, Content=Title + Description, color=Grey, RTL=True", x: 3119, y: 874.5, width: 1217, height: 52 },
+  { id: "237:40532", name: "type=Slim, Size=Floating, Content=Title + Description, color=Brand Light, RTL=True", x: 3119, y: 1685.3330078125, width: 1217, height: 52 },
+  { id: "237:40552", name: "type=Input, Size=Floating, Content=Title, color=Brand, RTL=True", x: 3119, y: 560, width: 1217, height: 60 },
+  { id: "237:40561", name: "type=Input, Size=Floating, Content=Title + Description, color=Brand, RTL=True", x: 3119, y: 636, width: 1217, height: 60 },
+  { id: "237:40573", name: "type=Input, Size=Floating, Content=Title, color=Grey, RTL=True", x: 3119, y: 1337.8330078125, width: 1217, height: 60 },
+  { id: "237:40582", name: "type=Input, Size=Floating, Content=Title, color=Brand Light, RTL=True", x: 3119, y: 2157.8330078125, width: 1217, height: 60 },
+  { id: "237:40601", name: "type=Input, Size=Floating, Content=Title + Description, color=Grey, RTL=True", x: 3119, y: 1417, width: 1217, height: 60 },
+  { id: "237:40613", name: "type=Input, Size=Floating, Content=Title + Description, color=Brand Light, RTL=True", x: 3119, y: 2237, width: 1217, height: 60 },
+];
+
+function getField(name: string, field: string) {
+  const match = name.match(new RegExp(`${field}=([^,]+)`));
+  if (!match) throw new Error(`Missing ${field} in ${name}`);
+  return match[1];
+}
+
+function parseBannerSpec(spec: BannerSpec): ParsedBannerSpec {
+  const type = figmaTypeToProp[getField(spec.name, "type")];
+  const size = figmaSizeToProp[getField(spec.name, "Size")];
+  const content = figmaContentToProp[getField(spec.name, "Content")];
+  const color = figmaColorToProp[getField(spec.name, "color")];
+
+  if (!type || !size || !content || !color) {
+    throw new Error(`Unsupported Banner variant: ${spec.name}`);
+  }
+
+  return {
+    ...spec,
+    color,
+    content,
+    dir: getField(spec.name, "RTL") === "True" ? "rtl" : "ltr",
+    size,
+    type,
+  };
+}
+
+const parsedBannerSpecs = bannerSpecs.map(parseBannerSpec);
+
+function getBannerDemoCopy(dir: BannerDirection) {
+  const rtl = dir === "rtl";
+
+  return {
+    actionLabel: rtl ? "\u062a\u0637\u0628\u064a\u0642" : "Button",
+    closeLabel: rtl ? "\u0625\u063a\u0644\u0627\u0642" : "Dismiss banner",
+    description: rtl
+      ? "\u0627\u0643\u062a\u0634\u0641 \u0622\u062e\u0631 \u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0641\u064a \u0625\u0635\u062f\u0627\u0631\u0646\u0627 \u0627\u0644\u062c\u062f\u064a\u062f"
+      : "Discover the Latest Updates in Our New Release",
+    inputAriaLabel: rtl ? "\u062d\u0642\u0644 \u0627\u0644\u0628\u0627\u0646\u0631" : "Banner input",
+    inputPlaceholder: rtl ? "\u0627\u0644\u0646\u0635" : "Placeholder",
+    linkLabel: rtl ? "\u0627\u0644\u0631\u0627\u0628\u0637" : "Link button",
+    title: rtl ? "\u0623\u062e\u0628\u0627\u0631 \u0645\u0647\u0645\u0629!" : "Big news!",
+  };
+}
+
+export function BannerBoard() {
+  return (
+    <section className="banner-page" aria-label="Design system banner implementation">
+      <div className="figma-banner-board" aria-label="Figma Banner component matrix">
+        {parsedBannerSpecs.map((spec) => (
+          <div
+            className="figma-board__item figma-board__item--banner"
+            data-figma-name={spec.name}
+            data-node-id={spec.id}
+            key={spec.id}
+            style={{
+              left: spec.x,
+              top: spec.y,
+              width: spec.width,
+              height: spec.height,
+            }}
+          >
+            <Banner
+              {...getBannerDemoCopy(spec.dir)}
+              ariaLabel={`${spec.dir.toUpperCase()} ${spec.color} ${spec.type} banner`}
+              color={spec.color}
+              content={spec.content}
+              dir={spec.dir}
+              showInlineAction={!(spec.type === "slim" && spec.color === "brand-light")}
+              size={spec.size}
+              type={spec.type}
+            />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/registry/components/expanded/Breadcrumbs.tsx

@@ -0,0 +1,156 @@
+import type { ReactNode } from "react";
+import "./breadcrumbs.css";
+
+export type BreadcrumbSeparator = "slash" | "chevron";
+export type BreadcrumbStyle = "default" | "raised";
+
+export type BreadcrumbItem = {
+  label: string;
+  href?: string;
+  icon?: ReactNode;
+  current?: boolean;
+};
+
+export type BreadcrumbsProps = {
+  "aria-label"?: string;
+  dir?: "ltr" | "rtl" | "auto";
+  iconOnly?: boolean;
+  items: BreadcrumbItem[];
+  maxItems?: number;
+  overflowLabel?: string;
+  separator?: BreadcrumbSeparator;
+  style?: BreadcrumbStyle;
+};
+
+type VisibleBreadcrumbItem = BreadcrumbItem & { overflow?: boolean };
+
+function cx(...classes: Array<string | false | undefined>) {
+  return classes.filter(Boolean).join(" ");
+}
+
+function visibleItems(
+  items: BreadcrumbItem[],
+  maxItems?: number,
+  overflowLabel?: string,
+): VisibleBreadcrumbItem[] {
+  if (!maxItems || maxItems < 3 || items.length <= maxItems) {
+    return items;
+  }
+
+  const tailCount = maxItems - 2;
+  return [items[0], { label: overflowLabel ?? "", overflow: true }, ...items.slice(-tailCount)];
+}
+
+export function Breadcrumbs({
+  "aria-label": ariaLabel,
+  dir = "ltr",
+  iconOnly = false,
+  items,
+  maxItems,
+  overflowLabel,
+  separator = "slash",
+  style: surfaceStyle = "default",
+}: BreadcrumbsProps) {
+  const renderedItems = visibleItems(items, maxItems, overflowLabel);
+
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className={cx(
+        "ds-breadcrumbs",
+        `ds-breadcrumbs--${surfaceStyle}`,
+        `ds-breadcrumbs--${separator}`,
+        iconOnly && "ds-breadcrumbs--icon-only",
+      )}
+      dir={dir}
+    >
+      <ol>
+        {renderedItems.map((item, index) => {
+          const isLast = index === renderedItems.length - 1;
+          const isCurrent = item.current || isLast;
+          const content = (
+            <>
+              <span className="ds-breadcrumbs__icon" aria-hidden={item.icon ? "true" : undefined}>
+                {item.overflow ? <OverflowIcon /> : item.icon}
+              </span>
+              <span className={cx("ds-breadcrumbs__label", iconOnly && "ds-breadcrumbs__label--hidden")}>
+                {item.label}
+              </span>
+            </>
+          );
+
+          return (
+            <li key={`${item.label}-${index}`}>
+              {index > 0 && <Separator separator={separator} />}
+              {item.href && !isCurrent && !item.overflow ? (
+                <a href={item.href}>{content}</a>
+              ) : (
+                <span aria-current={isCurrent ? "page" : undefined} className={isCurrent ? "is-current" : undefined}>
+                  {content}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+function Separator({ separator }: { separator: BreadcrumbSeparator }) {
+  return (
+    <span aria-hidden="true" className="ds-breadcrumbs__separator">
+      {separator === "slash" ? "/" : <ChevronIcon />}
+    </span>
+  );
+}
+
+export function BreadcrumbHomeIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 20 20">
+      <path
+        d="M3.5 8.7 10 3.4l6.5 5.3v7.1a.9.9 0 0 1-.9.9h-3.2v-4.9H7.6v4.9H4.4a.9.9 0 0 1-.9-.9V8.7Z"
+        fill="none"
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="1.7"
+      />
+    </svg>
+  );
+}
+
+export function BreadcrumbFolderIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 20 20">
+      <path
+        d="M2.8 5.7c0-.9.7-1.6 1.6-1.6h3.8l1.5 1.8h5.9c.9 0 1.6.7 1.6 1.6v6.8c0 .9-.7 1.6-1.6 1.6H4.4c-.9 0-1.6-.7-1.6-1.6V5.7Z"
+        fill="none"
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="1.7"
+      />
+    </svg>
+  );
+}
+
+function ChevronIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16">
+      <path d="m6 3.5 4 4.5-4 4.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" />
+    </svg>
+  );
+}
+
+function OverflowIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 20 20">
+      <path
+        d="M5.2 10h.1M10 10h.1M14.8 10h.1"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="2.4"
+      />
+    </svg>
+  );
+}

package/registry/components/expanded/CatalogComponentsShowcase.tsx

@@ -0,0 +1,211 @@
+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 { CatalogTag, type CatalogTagState, type CatalogTagType } from "./CatalogTag";
+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 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" },
+];
+
+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" },
+  { 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: CatalogTagType[] = ["simple", "dot", "flag", "avatar", "icon"];
+const tagStates: CatalogTagState[] = ["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={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={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) => (
+            <CatalogTag
+              closeLabel="Remove tag"
+              key={type}
+              showCloseButton={type === "simple"}
+              type={type}
+              avatar={type === "avatar" ? "A" : undefined}
+            >
+              {type}
+            </CatalogTag>
+          ))}
+          {tagStates.map((state) => (
+            <CatalogTag key={state} state={state} type="dot">
+              {state}
+            </CatalogTag>
+          ))}
+          <CatalogTag size="xs">xs</CatalogTag>
+          <CatalogTag size="md">md</CatalogTag>
+          <CatalogTag closeLabel="Remove tag" size="lg" showCloseButton>
+            large
+          </CatalogTag>
+          <CatalogTag
+            avatar="\u0645"
+            closeLabel="\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645"
+            dir="rtl"
+            type="avatar"
+            showCloseButton
+          >
+            \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" />
+        </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

@@ -0,0 +1,48 @@
+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 = "ltr",
+  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} type="button">
+          {actionLabel}
+        </button>
+      ) : label ? (
+        <span className="ds-content-divider__label">{label}</span>
+      ) : null}
+      <span aria-hidden="true" className="ds-content-divider__rule" />
+    </div>
+  );
+}