banhaten 0.1.2 → 0.2.0

package/registry/components/expanded/BannerBoard.tsx

@@ -1,225 +0,0 @@
-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/CatalogTag.tsx

@@ -1,85 +0,0 @@
-import type { ReactNode } from "react";
-import { PlusIcon as LucidePlusIcon, XIcon } from "lucide-react";
-import "./tag.css";
-
-export type TagType = "simple" | "dot" | "flag" | "avatar" | "icon";
-export type TagSize = "xs" | "md" | "lg";
-export type TagState = "default" | "active" | "disabled";
-
-export type CatalogTagType = TagType;
-export type CatalogTagSize = TagSize;
-export type CatalogTagState = TagState;
-
-export type CatalogTagProps = {
-  avatar?: ReactNode;
-  children?: ReactNode;
-  closeLabel?: string;
-  dir?: "ltr" | "rtl" | "auto";
-  disabled?: boolean;
-  flag?: ReactNode;
-  icon?: ReactNode;
-  onClose?: () => void;
-  showCloseButton?: boolean;
-  size?: TagSize;
-  state?: TagState;
-  type?: TagType;
-};
-
-function cx(...classes: Array<string | false | undefined>) {
-  return classes.filter(Boolean).join(" ");
-}
-
-export function CatalogTag({
-  avatar,
-  children,
-  closeLabel,
-  dir = "ltr",
-  disabled = false,
-  flag,
-  icon,
-  onClose,
-  showCloseButton = false,
-  size = "md",
-  state = "default",
-  type = "simple",
-}: CatalogTagProps) {
-  const isDisabled = disabled || state === "disabled";
-  const hasLeadingSlot = type !== "simple";
-
-  return (
-    <span
-      aria-disabled={isDisabled || undefined}
-      className={cx(
-        "ds-tag",
-        `ds-tag--${type}`,
-        `ds-tag--${size}`,
-        `ds-tag--${state}`,
-        showCloseButton && "ds-tag--closeable",
-      )}
-      dir={dir}
-    >
-      {hasLeadingSlot && (
-        <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" && <span className="ds-tag__avatar">{avatar}</span>}
-          {type === "icon" && (icon ?? <PlusIcon />)}
-        </span>
-      )}
-      <span className="ds-tag__label">{children}</span>
-      {showCloseButton && (
-        <button aria-label={closeLabel} className="ds-tag__close" disabled={isDisabled} onClick={onClose} type="button">
-          <CloseIcon />
-        </button>
-      )}
-    </span>
-  );
-}
-
-function PlusIcon() {
-  return <LucidePlusIcon aria-hidden="true" strokeWidth={2.25} />;
-}
-
-function CloseIcon() {
-  return <XIcon aria-hidden="true" strokeWidth={2.25} />;
-}