@qijenchen/design-system 0.1.0-beta.3 → 0.1.0-beta.32

package/dist/components/AspectRatio/aspect-ratio.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+const AspectRatio = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { ref, ...props }));
+AspectRatio.displayName = "AspectRatio";
+const aspectRatioMeta = {
+  component: "AspectRatio",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: [],
+    fg: [],
+    ring: []
+  }
+};
+export {
+  AspectRatio,
+  aspectRatioMeta
+};
+//# sourceMappingURL=aspect-ratio.js.map

package/dist/components/AspectRatio/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.js","sources":["../../../src/components/AspectRatio/aspect-ratio.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'\n\n/**\n * AspectRatio — 固定長寬比容器(Radix AspectRatio primitive 薄包裝)\n *\n * 世界級對照:shadcn `AspectRatio` / Ant 無獨立元件(CSS 方案)/ Material 無\n *\n * ── 為什麼需要 ──\n * CSS `aspect-ratio` 屬性雖然現代瀏覽器都支援,但 Radix primitive 提供 SSR-safe\n * padding-bottom 方案 + consistent API,避免邊緣 bug(image 未載入時容器坍塌 /\n * content-fit 差異)。保 safe + 一致視覺。\n *\n * ── 標準 ratio(DS 慣例) ──\n * 16/9  — 寬螢幕影片、onboarding feature tour 截圖(Coachmark media 預設)\n * 4/3   — 老電視 / 照片基本 ratio、產品 thumbnail\n * 1/1   — Avatar / 方形貼文預覽 / icon preview\n * 3/4   — 直式照片(人物 portrait)\n * 21/9  — Ultra-wide banner(hero section)\n *\n * Consumer 傳 `ratio={n/m}` 數字計算(如 16/9 = 1.7777)。\n *\n * ── 常見消費者 ──\n * Coachmark media / Carousel item image / Card thumbnail(未來)/ Chart preview\n */\n\nexport type AspectRatioProps = React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>\n\n// shadcn canonical:顯式 forwardRef + displayName(雖 Radix primitive 已 forwardRef,\n// 此 wrapper 確保本 DS 每個 named export 在 Inspector 顯示正確 displayName,\n// 且 props passthrough + ref 行為在 code 層面明確可見)\nconst AspectRatio = React.forwardRef<\n  React.ElementRef<typeof AspectRatioPrimitive.Root>,\n  AspectRatioProps\n>((props, ref) => <AspectRatioPrimitive.Root ref={ref} {...props} />)\nAspectRatio.displayName = 'AspectRatio'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const aspectRatioMeta = {\n  component: 'AspectRatio',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { AspectRatio }\n"],"names":[],"mappings":";;;AAgCA,MAAM,cAAc,MAAM,WAGxB,CAAC,OAAO,QAAQ,oBAAC,qBAAqB,MAArB,EAA0B,KAAW,GAAG,OAAO,CAAE;AACpE,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/AspectRatio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './aspect-ratio';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AspectRatio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AspectRatio/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAA"}

package/dist/components/AspectRatio/index.js

@@ -0,0 +1,6 @@
+import { AspectRatio, aspectRatioMeta } from "./aspect-ratio.js";
+export {
+  AspectRatio,
+  aspectRatioMeta
+};
+//# sourceMappingURL=index.js.map

package/dist/components/AspectRatio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Avatar/avatar.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+/**
+ * Avatar — 頭像元件
+ *
+ * 三種內容模式（按優先順序）：
+ *   1. src → 圖片
+ *   2. icon → icon 在底色圓/方形內
+ *   3. alt → 取首字作文字 fallback
+ *   4. 都沒有 → 預設 User icon
+ *
+ * ── 尺寸 ──
+ *   size 接受任意 px 值，icon 自動 = round_even(size × 0.6)
+ *   文字 fallback 字體 = size × 0.5
+ *
+ * ── 形狀 ──
+ *   circle（預設）→ rounded-full，用於人物
+ *   square → rounded-md (4px)，用於實體（專案、組織、App）
+ */
+type ColorKey = 'neutral' | 'blue' | 'red' | 'green' | 'yellow' | 'turquoise' | 'purple' | 'magenta' | 'indigo';
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 尺寸：number (px) 或 'fill'（填滿父容器，由父層決定大小）。預設 32 */
+    size?: number | 'fill';
+    /** 形狀：circle（人物）或 square（實體），預設 circle */
+    shape?: 'circle' | 'square';
+    /** 圖片 URL */
+    src?: string;
+    /** 替代文字（圖片失敗時取首字作 fallback） */
+    alt?: string;
+    /** Icon 模式（LucideIcon） */
+    icon?: LucideIcon;
+    /** Icon / text fallback 的背景色，預設 neutral */
+    color?: ColorKey;
+    /** 深底白字模式（step-6 背景 + 白色前景，warning 例外），預設 false */
+    solid?: boolean;
+    /**
+     * 在線狀態指示器(presence),顯示在 avatar **右下角**。
+     * 世界級對照:Slack / Teams / Discord — `online` 是最廣泛被理解的術語。
+     * 位置語義:右下 = "此人的 presence"(使用者聚焦於「這個人是誰 + 現在 在不在」)。
+     */
+    status?: 'online' | 'away' | 'busy' | 'offline';
+    /**
+     * 未讀 / 通知計數 badge,顯示在 avatar **右上角**。
+     * 世界級對照:chat app(iMessage / Slack thread / LINE / WhatsApp)一律右上角。
+     * 位置語義:右上 = "關於此對話的新事件數量"(使用者聚焦於「有多少未處理」);
+     * 與右下的 presence 共存不衝突(不同角、不同語義)。
+     * `> 99` 自動顯示 "99+"(交給內部 Badge 的 `max` 行為)。
+     */
+    badgeCount?: number;
+    /**
+     * 傳入 HoverCard 內容（如 NameCard），hover avatar 時自動顯示。
+     * 只有人員 avatar 需要傳；實體 avatar（專案、組織）不傳。
+     */
+    hoverCard?: React.ReactNode;
+}
+export interface AvatarData {
+    /** 圖片 URL */
+    src?: string;
+    /** 替代文字（圖片失敗時取首字作 fallback） */
+    alt: string;
+    /** Icon / text fallback 的背景色，預設 neutral */
+    color?: ColorKey;
+    /**
+     * Person avatar hover NameCard(DS-wide canonical,person avatar 預設必有,見 avatar.spec.md)。
+     * Entity avatar(專案 / 組織 logo)不帶 → consumer 不傳 hoverCard 即豁免。
+     * 所有消費 AvatarData 的 primitive(MenuItem / DropdownMenu / SelectMenu / SelectionItem / NameCard)
+     * 需 forward 此 prop 到內部 <Avatar hoverCard={avatar.hoverCard} />。
+     */
+    hoverCard?: React.ReactNode;
+}
+export declare const avatarMeta: {
+    readonly component: "Avatar";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-surface-raised"];
+        readonly fg: readonly ["--foreground", "--on-emphasis"];
+        readonly ring: readonly ["ring-ring"];
+    };
+};
+declare const Avatar: React.MemoExoticComponent<React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>>;
+export { Avatar };
+//# sourceMappingURL=avatar.d.ts.map

package/dist/components/Avatar/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAO9C;;;;;;;;;;;;;;;;GAgBG;AAMH,KAAK,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;AA2E/G,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0BAA0B;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AA4LD,MAAM,WAAW,UAAU;IACzB,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAID,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAGV,QAAA,MAAM,MAAM,+GAA0B,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/Avatar/avatar.js

@@ -0,0 +1,195 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { User } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { HoverCard, HoverCardTrigger, HoverCardContent } from "../HoverCard/hover-card.js";
+import { HOVER_DELAY_CLOSE_MS, HOVER_DELAY_RICH_MS } from "../../tokens/motion/motion.js";
+import { Badge } from "../Badge/badge.js";
+import { useTableIsScrolling, useFieldContext } from "../Field/field-context.js";
+const COLOR_MAP = {
+  subtle: {
+    neutral: { bg: "var(--muted)", text: "var(--foreground)" },
+    blue: { bg: "var(--color-blue-1)", text: "var(--color-blue-7)" },
+    red: { bg: "var(--color-deep-orange-1)", text: "var(--color-deep-orange-7)" },
+    green: { bg: "var(--color-green-1)", text: "var(--color-green-7)" },
+    yellow: { bg: "var(--color-yellow-1)", text: "var(--color-yellow-7)" },
+    turquoise: { bg: "var(--color-turquoise-1)", text: "var(--color-turquoise-7)" },
+    purple: { bg: "var(--color-purple-1)", text: "var(--color-purple-7)" },
+    magenta: { bg: "var(--color-magenta-1)", text: "var(--color-magenta-7)" },
+    indigo: { bg: "var(--color-indigo-1)", text: "var(--color-indigo-7)" }
+  },
+  solid: {
+    neutral: { bg: "var(--color-neutral-9)", text: "var(--inverse-fg)" },
+    blue: { bg: "var(--color-blue-6)", text: "var(--on-emphasis)" },
+    red: { bg: "var(--color-deep-orange-6)", text: "var(--on-emphasis)" },
+    green: { bg: "var(--color-green-6)", text: "var(--on-emphasis)" },
+    yellow: { bg: "var(--color-yellow-6)", text: "var(--warning-foreground)" },
+    turquoise: { bg: "var(--color-turquoise-6)", text: "var(--on-emphasis)" },
+    purple: { bg: "var(--color-purple-6)", text: "var(--on-emphasis)" },
+    magenta: { bg: "var(--color-magenta-6)", text: "var(--on-emphasis)" },
+    indigo: { bg: "var(--color-indigo-6)", text: "var(--on-emphasis)" }
+  }
+};
+function getIconSize(avatarSize) {
+  return Math.round(avatarSize * 0.6 / 2) * 2;
+}
+function getInitial(text) {
+  return text.trim().charAt(0).toUpperCase();
+}
+const STATUS_DOT_COLOR = {
+  online: "var(--status-online)",
+  away: "var(--status-away)",
+  busy: "var(--status-busy)",
+  offline: "var(--status-offline)"
+};
+function useDocumentTheme() {
+  const [theme, setTheme] = React.useState(
+    () => typeof document !== "undefined" ? document.documentElement.getAttribute("data-theme") : null
+  );
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    const update = () => setTheme(root.getAttribute("data-theme"));
+    update();
+    const obs = new MutationObserver(update);
+    obs.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => obs.disconnect();
+  }, []);
+  return theme;
+}
+const AvatarInner = React.forwardRef(
+  ({ size = 32, shape = "circle", src, alt, icon: Icon, color = "neutral", solid = false, status, badgeCount, hoverCard, className, style, ...props }, ref) => {
+    var _a;
+    const [imgError, setImgError] = React.useState(false);
+    const documentTheme = useDocumentTheme();
+    const isTableScrolling = useTableIsScrolling();
+    const fieldCtx = useFieldContext();
+    const isDisabledInField = (fieldCtx == null ? void 0 : fieldCtx.mode) === "disabled" && (fieldCtx == null ? void 0 : fieldCtx.hasFieldWrapper) === true;
+    const isFill = size === "fill";
+    const numSize = isFill ? 32 : size;
+    const iconPx = getIconSize(numSize);
+    const fontSizePx = Math.round(numSize * 0.5);
+    const variantKey = solid ? "solid" : "subtle";
+    const colors = ((_a = COLOR_MAP[variantKey]) == null ? void 0 : _a[color]) ?? COLOR_MAP.subtle.neutral;
+    const radius = shape === "circle" ? "9999px" : "4px";
+    const showImage = src && !imgError;
+    const showIcon = !showImage && (Icon || !alt);
+    const showText = !showImage && !showIcon && alt;
+    const FallbackIcon = Icon ?? User;
+    const dotSize = isFill ? 10 : Math.max(8, Math.min(16, Math.round(numSize * 0.28)));
+    const dotBorder = dotSize >= 12 ? 3 : 2;
+    const avatarEl = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex items-center justify-center shrink-0 overflow-hidden select-none",
+          isFill && "w-full h-full",
+          // 2026-05-13 R3.5 self-dim:Avatar 在 disabled Field wrapper context 內自 dim
+          // (取代 field-wrapper.tsx default/bare/naked disabled blanket opacity-disabled 逃生艙)
+          isDisabledInField && "opacity-disabled"
+        ),
+        style: {
+          ...isFill ? { containerType: "inline-size" } : { width: numSize, height: numSize },
+          borderRadius: radius,
+          backgroundColor: showImage ? void 0 : colors.bg,
+          color: showImage ? void 0 : colors.text
+        },
+        "data-avatar-size": isFill ? "fill" : numSize,
+        children: [
+          showImage && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: alt ?? "",
+              className: "w-full h-full object-cover",
+              onError: () => setImgError(true)
+            }
+          ),
+          showIcon && (isFill ? /* @__PURE__ */ jsx(FallbackIcon, { className: "w-[60%] h-[60%]", "aria-hidden": true }) : /* @__PURE__ */ jsx(FallbackIcon, { size: iconPx, "aria-hidden": true })),
+          showText && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "font-medium leading-none",
+              style: { fontSize: isFill ? "50cqi" : fontSizePx },
+              "aria-hidden": true,
+              children: getInitial(alt)
+            }
+          )
+        ]
+      }
+    );
+    const hasOverlay = status || typeof badgeCount === "number";
+    const focusableProps = hoverCard ? {
+      tabIndex: 0,
+      role: "button",
+      "aria-haspopup": "dialog",
+      "aria-label": alt ?? "View profile"
+    } : {};
+    const focusableClass = hoverCard ? "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-full" : "";
+    const baseEl = !hasOverlay ? /* @__PURE__ */ jsx("div", { ref, className: cn("inline-flex shrink-0", focusableClass, className), style, ...focusableProps, ...props, children: avatarEl }) : /* @__PURE__ */ jsxs("div", { ref, className: cn("relative inline-flex shrink-0", focusableClass, className), style, ...focusableProps, ...props, children: [
+      avatarEl,
+      status && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute block rounded-full",
+          style: {
+            width: dotSize,
+            height: dotSize,
+            bottom: 0,
+            right: 0,
+            backgroundColor: STATUS_DOT_COLOR[status],
+            boxShadow: `0 0 0 ${dotBorder}px var(--surface-raised, var(--canvas))`
+          },
+          "aria-hidden": true
+        }
+      ),
+      typeof badgeCount === "number" && badgeCount > 0 && /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "critical",
+          count: badgeCount,
+          max: 99,
+          className: "absolute -top-1 -right-1",
+          style: {
+            boxShadow: `0 0 0 2px var(--surface-raised, var(--canvas))`
+          },
+          "aria-label": `${badgeCount} unread`
+        }
+      )
+    ] });
+    if (!hoverCard || isTableScrolling) return baseEl;
+    return /* @__PURE__ */ jsxs(HoverCard, { openDelay: HOVER_DELAY_RICH_MS, closeDelay: HOVER_DELAY_CLOSE_MS, children: [
+      /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: baseEl }),
+      /* @__PURE__ */ jsx(
+        HoverCardContent,
+        {
+          "data-theme": documentTheme ?? void 0,
+          className: "bg-surface-raised rounded-lg border border-border overflow-hidden",
+          style: { boxShadow: "var(--elevation-200)" },
+          children: hoverCard
+        }
+      )
+    ] });
+  }
+);
+AvatarInner.displayName = "AvatarInner";
+const avatarMeta = {
+  component: "Avatar",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-surface-raised"],
+    fg: ["--foreground", "--on-emphasis"],
+    ring: ["ring-ring"]
+  }
+};
+AvatarInner.displayName = "Avatar";
+const Avatar = React.memo(AvatarInner);
+export {
+  Avatar,
+  avatarMeta
+};
+//# sourceMappingURL=avatar.js.map

package/dist/components/Avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../src/components/Avatar/avatar.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { User } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@/design-system/components/HoverCard/hover-card'\nimport { HOVER_DELAY_RICH_MS, HOVER_DELAY_CLOSE_MS } from '@/design-system/tokens/motion/motion'\nimport { Badge } from '@/design-system/components/Badge/badge'\nimport { useFieldContext, useTableIsScrolling } from '@/design-system/components/Field/field-context'\n\n/**\n * Avatar — 頭像元件\n *\n * 三種內容模式（按優先順序）：\n *   1. src → 圖片\n *   2. icon → icon 在底色圓/方形內\n *   3. alt → 取首字作文字 fallback\n *   4. 都沒有 → 預設 User icon\n *\n * ── 尺寸 ──\n *   size 接受任意 px 值，icon 自動 = round_even(size × 0.6)\n *   文字 fallback 字體 = size × 0.5\n *\n * ── 形狀 ──\n *   circle（預設）→ rounded-full，用於人物\n *   square → rounded-md (4px)，用於實體（專案、組織、App）\n */\n\n// ── 色彩 ──\n// 直接引用 primitive（bg=step-1, text=step-7），不經過語義層\n// solid：step-6 全色底 + 白色前景（yellow 例外用 --warning-foreground）\n// neutral solid：neutral-9 + --inverse-fg（自動反轉）\ntype ColorKey = 'neutral' | 'blue' | 'red' | 'green' | 'yellow' | 'turquoise' | 'purple' | 'magenta' | 'indigo'\ntype VariantKey = 'subtle' | 'solid'\n\nconst COLOR_MAP: Record<VariantKey, Record<ColorKey, { bg: string; text: string }>> = {\n  subtle: {\n    neutral:   { bg: 'var(--muted)',                text: 'var(--foreground)' },\n    blue:      { bg: 'var(--color-blue-1)',         text: 'var(--color-blue-7)' },\n    red:       { bg: 'var(--color-deep-orange-1)',  text: 'var(--color-deep-orange-7)' },\n    green:     { bg: 'var(--color-green-1)',        text: 'var(--color-green-7)' },\n    yellow:    { bg: 'var(--color-yellow-1)',       text: 'var(--color-yellow-7)' },\n    turquoise: { bg: 'var(--color-turquoise-1)',    text: 'var(--color-turquoise-7)' },\n    purple:    { bg: 'var(--color-purple-1)',       text: 'var(--color-purple-7)' },\n    magenta:   { bg: 'var(--color-magenta-1)',      text: 'var(--color-magenta-7)' },\n    indigo:    { bg: 'var(--color-indigo-1)',       text: 'var(--color-indigo-7)' },\n  },\n  solid: {\n    neutral:   { bg: 'var(--color-neutral-9)',      text: 'var(--inverse-fg)' },\n    blue:      { bg: 'var(--color-blue-6)',         text: 'var(--on-emphasis)' },\n    red:       { bg: 'var(--color-deep-orange-6)',  text: 'var(--on-emphasis)' },\n    green:     { bg: 'var(--color-green-6)',        text: 'var(--on-emphasis)' },\n    yellow:    { bg: 'var(--color-yellow-6)',       text: 'var(--warning-foreground)' },\n    turquoise: { bg: 'var(--color-turquoise-6)',    text: 'var(--on-emphasis)' },\n    purple:    { bg: 'var(--color-purple-6)',       text: 'var(--on-emphasis)' },\n    magenta:   { bg: 'var(--color-magenta-6)',      text: 'var(--on-emphasis)' },\n    indigo:    { bg: 'var(--color-indigo-6)',       text: 'var(--on-emphasis)' },\n  },\n}\n\n// ── Icon size: round to nearest even, ≈ 60% ──\nfunction getIconSize(avatarSize: number): number {\n  return Math.round((avatarSize * 0.6) / 2) * 2\n}\n\n// ── Text fallback: first character ──\nfunction getInitial(text: string): string {\n  return text.trim().charAt(0).toUpperCase()\n}\n\n// Semantic presence tokens — 見 color/semantic.css\n// Module-level constant(2026-04-22 D3 perf audit):從 render body 移到 module scope,\n// 避免每次 Avatar render 都 re-declare 此 4-entry object(Low impact 但渲染大量 avatars 時累積可觀)\nconst STATUS_DOT_COLOR: Record<string, string> = {\n  online: 'var(--status-online)',\n  away: 'var(--status-away)',\n  busy: 'var(--status-busy)',\n  offline: 'var(--status-offline)',\n}\n\n// ── useDocumentTheme(2026-04-23;M3 Portal 逃脫防線,scope verified 2026-04-25)──\n// 讀 `<html data-theme>` 並 observe mutation。用於 Avatar hoverCard NameCard:\n// Portal 後的 HoverCardContent 會繼承 trigger subtree theme(如 OverflowIndicator\n// dark tooltip 內部),造成 NameCard 被污染成 dark。顯式 bind app-level theme\n// 確保 NameCard 永遠跟 app 本身 theme 一致(light-in-light-app / dark-in-dark-app)。\n//\n// 範圍 audit 2026-04-25:觀察對象是 `document.documentElement` 自有 DOM,非 3rd-party\n// lib 內部(不屬 M2 scope);attributeFilter 限定 `data-theme` 單一 attr,re-render 成本\n// 為每次全站 theme 切換 × Avatar 數量,可接受。\nfunction useDocumentTheme(): string | null {\n  const [theme, setTheme] = React.useState<string | null>(() =>\n    typeof document !== 'undefined' ? document.documentElement.getAttribute('data-theme') : null,\n  )\n  React.useEffect(() => {\n    if (typeof document === 'undefined') return\n    const root = document.documentElement\n    const update = () => setTheme(root.getAttribute('data-theme'))\n    update()\n    const obs = new MutationObserver(update)\n    obs.observe(root, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => obs.disconnect()\n  }, [])\n  return theme\n}\n\n// ── Component ──\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 尺寸：number (px) 或 'fill'（填滿父容器，由父層決定大小）。預設 32 */\n  size?: number | 'fill'\n  /** 形狀：circle（人物）或 square（實體），預設 circle */\n  shape?: 'circle' | 'square'\n  /** 圖片 URL */\n  src?: string\n  /** 替代文字（圖片失敗時取首字作 fallback） */\n  alt?: string\n  /** Icon 模式（LucideIcon） */\n  icon?: LucideIcon\n  /** Icon / text fallback 的背景色，預設 neutral */\n  color?: ColorKey\n  /** 深底白字模式（step-6 背景 + 白色前景，warning 例外），預設 false */\n  solid?: boolean\n  /**\n   * 在線狀態指示器(presence),顯示在 avatar **右下角**。\n   * 世界級對照:Slack / Teams / Discord — `online` 是最廣泛被理解的術語。\n   * 位置語義:右下 = \"此人的 presence\"(使用者聚焦於「這個人是誰 + 現在 在不在」)。\n   */\n  status?: 'online' | 'away' | 'busy' | 'offline'\n  /**\n   * 未讀 / 通知計數 badge,顯示在 avatar **右上角**。\n   * 世界級對照:chat app(iMessage / Slack thread / LINE / WhatsApp)一律右上角。\n   * 位置語義:右上 = \"關於此對話的新事件數量\"(使用者聚焦於「有多少未處理」);\n   * 與右下的 presence 共存不衝突(不同角、不同語義)。\n   * `> 99` 自動顯示 \"99+\"(交給內部 Badge 的 `max` 行為)。\n   */\n  badgeCount?: number\n  /**\n   * 傳入 HoverCard 內容（如 NameCard），hover avatar 時自動顯示。\n   * 只有人員 avatar 需要傳；實體 avatar（專案、組織）不傳。\n   */\n  hoverCard?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\n// 2026-05-13 (a) perf fix part-2(per codex Layer C Roadmap rich-cell dominant + user 拍 Path (a)):\n// `React.memo` wrap forwardRef Avatar — Roadmap 13 columns 含 person/multiPerson,每 row 多 avatar\n// × HoverCard subtree + useDocumentTheme observer = 重渲染 hotspot。memo shallow-equal props,\n// HoverCard / themeRef stable across scroll 時 skip re-render。對齊 codex Profile Plan step 5\n// (filter Avatar/PeoplePicker/FieldSurfaceProvider remounts)。\n// code-quality-allow: long-function — size × shape × color × solid × status × badgeCount × hoverCard × img-fallback 多軸 prop 組合,拆 sub-fn 會跨 fn 傳 imgError state + isTableScrolling observer 結果\nconst AvatarInner = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ size = 32, shape = 'circle', src, alt, icon: Icon, color = 'neutral', solid = false, status, badgeCount, hoverCard, className, style, ...props }, ref) => {\n    const [imgError, setImgError] = React.useState(false)\n    const documentTheme = useDocumentTheme()\n    const isTableScrolling = useTableIsScrolling()\n    // 2026-05-13 R3.5(per codex Q3 verdict + user 拍「想盡辦法 auto-handle prereq」):\n    // Avatar self-dim when in disabled Field wrapper context(取代既有 wrapper opacity-disabled blanket\n    // 逃生艙 — color.spec.md:729 specific-disabled-color canonical)。\n    // Scope narrowest:`fieldCtx?.mode === 'disabled' && fieldCtx?.hasFieldWrapper === true`,標準 Field\n    // 家族 wrapper disabled 時才 dim;**沒包在 Field wrapper 內的 standalone Avatar**(NameCard / FileItem /\n    // HoverCard / Dialog 等 display 場景)**backward compat 不變**。對齊 avatar.spec.md「Avatar 在 disabled\n    // 元件內 host-controlled opacity」canonical — 升級成「Avatar self-managed via fieldCtx」。\n    const fieldCtx = useFieldContext()\n    const isDisabledInField = fieldCtx?.mode === 'disabled' && fieldCtx?.hasFieldWrapper === true\n    const isFill = size === 'fill'\n    // Fill 模式下 icon 用 60% 寬高、text 用 50cqi（container query inline-size）；\n    // 數字模式下用既有 px 計算\n    const numSize = isFill ? 32 : (size as number)\n    const iconPx = getIconSize(numSize)\n    const fontSizePx = Math.round(numSize * 0.5)\n    const variantKey: VariantKey = solid ? 'solid' : 'subtle'\n    const colors = COLOR_MAP[variantKey]?.[color] ?? COLOR_MAP.subtle.neutral\n    const radius = shape === 'circle' ? '9999px' : '4px'\n\n    // 決定內容\n    const showImage = src && !imgError\n    const showIcon = !showImage && (Icon || (!alt))\n    const showText = !showImage && !showIcon && alt\n\n    const FallbackIcon = Icon ?? User\n\n    // Status dot 尺寸:avatar 的 28%(Slack / Teams / Discord 世界級平均),\n    // clamp [8, 16] — floor 8 保小 avatar 仍可辨識但不喧賓奪主(10 floor 會讓 24px\n    // avatar 的 dot 占 42% 太大);ceiling 16 防大 avatar dot 過度放大\n    const dotSize = isFill ? 10 : Math.max(8, Math.min(16, Math.round(numSize * 0.28)))\n    // Border ring 在 surface 上分離 dot 與 avatar,dotSize ≥ 12 時升階到 3px 保持視覺比例\n    const dotBorder = dotSize >= 12 ? 3 : 2\n\n    const avatarEl = (\n      <div\n        className={cn(\n          'inline-flex items-center justify-center shrink-0 overflow-hidden select-none',\n          isFill && 'w-full h-full',\n          // 2026-05-13 R3.5 self-dim:Avatar 在 disabled Field wrapper context 內自 dim\n          // (取代 field-wrapper.tsx default/bare/naked disabled blanket opacity-disabled 逃生艙)\n          isDisabledInField && 'opacity-disabled',\n        )}\n        style={{\n          ...(isFill\n            ? { containerType: 'inline-size' as React.CSSProperties['containerType'] }\n            : { width: numSize, height: numSize }),\n          borderRadius: radius,\n          backgroundColor: showImage ? undefined : colors.bg,\n          color: showImage ? undefined : colors.text,\n        }}\n        data-avatar-size={isFill ? 'fill' : numSize}\n      >\n        {showImage && (\n          <img\n            src={src}\n            alt={alt ?? ''}\n            className=\"w-full h-full object-cover\"\n            onError={() => setImgError(true)}\n          />\n        )}\n        {showIcon && (\n          isFill\n            ? <FallbackIcon className=\"w-[60%] h-[60%]\" aria-hidden />\n            : <FallbackIcon size={iconPx} aria-hidden />\n        )}\n        {showText && (\n          <span\n            className=\"font-medium leading-none\"\n            style={{ fontSize: isFill ? '50cqi' : fontSizePx }}\n            aria-hidden\n          >\n            {getInitial(alt!)}\n          </span>\n        )}\n      </div>\n    )\n\n    const hasOverlay = status || typeof badgeCount === 'number'\n    // Keyboard access canonical(D4 UX audit 2026-04-22 finding):Avatar with `hoverCard`\n    // 需 keyboard 可達 — Radix `HoverCardTrigger asChild` 不自動加 tabIndex,non-focusable\n    // `<div>` 會讓 keyboard-only user 無法 reach NameCard popover(WCAG 2.1.1 / 4.1.2 違反)。\n    // 解:當 `hoverCard` 存在時,wrapper `<div>` 變 focusable(`tabIndex=0` + `role=\"button\"` +\n    // `aria-haspopup=\"dialog\"` + focus-visible ring)。若無 hoverCard 則維持純展示 `<div>`。\n    const focusableProps = hoverCard\n      ? {\n          tabIndex: 0,\n          role: 'button' as const,\n          'aria-haspopup': 'dialog' as const,\n          'aria-label': alt ?? 'View profile',\n        }\n      : {}\n    const focusableClass = hoverCard\n      ? 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-full'\n      : ''\n    const baseEl = !hasOverlay\n      ? <div ref={ref} className={cn('inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>{avatarEl}</div>\n      : (\n        <div ref={ref} className={cn('relative inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>\n          {avatarEl}\n          {/* Status dot:bottom-right(presence — 世界級對照 Slack / Teams / Discord),\n              落在 circle avatar 圓周 45° 位置 / square avatar 右下直角;\n              border ring 用 surface 色讓 dot 從 avatar 邊界視覺分離。\n              a11y:`aria-hidden` — presence 資訊整合到 parent avatar 的 aria-label\n              (world-class Slack 做法),避免多 `role=\"status\"` 造成 screen reader 洪水 */}\n          {status && (\n            <span\n              className=\"absolute block rounded-full\"\n              style={{\n                width: dotSize,\n                height: dotSize,\n                bottom: 0,\n                right: 0,\n                backgroundColor: STATUS_DOT_COLOR[status],\n                boxShadow: `0 0 0 ${dotBorder}px var(--surface-raised, var(--canvas))`,\n              }}\n              aria-hidden\n            />\n          )}\n          {/* Count badge:top-right(chat 未讀 / 通知計數 — 世界級對照 iMessage /\n              Slack thread / LINE / WhatsApp)。消費 DS Badge(critical variant),\n              再加 ring 與 avatar 分離 */}\n          {typeof badgeCount === 'number' && badgeCount > 0 && (\n            <Badge\n              variant=\"critical\"\n              count={badgeCount}\n              max={99}\n              className=\"absolute -top-1 -right-1\"\n              style={{\n                boxShadow: `0 0 0 2px var(--surface-raised, var(--canvas))`,\n              }}\n              aria-label={`${badgeCount} unread`}\n            />\n          )}\n        </div>\n      )\n\n    // 2026-05-13 (c) scroll-defer perf(per user 拍 Path (c) + codex Q3 verdict):\n    // DataTable scrolling 期間跳 HoverCard wrapper(Portal + useDocumentTheme observer 是\n    // Roadmap 重渲 hotspot,per codex Layer C 分析)。scroll 結束 → context flips false →\n    // re-render 接回完整 HoverCard tree(NameCard 仍可 hover 顯示)。\n    // 對齊 AG Grid `deferRender` for slow React cell components / MUI X DataGrid scroll-defer。\n    if (!hoverCard || isTableScrolling) return baseEl\n\n    return (\n      <HoverCard openDelay={HOVER_DELAY_RICH_MS} closeDelay={HOVER_DELAY_CLOSE_MS}>\n        <HoverCardTrigger asChild>\n          {baseEl}\n        </HoverCardTrigger>\n        {/* HoverCardContent canonical(2026-04-23):\n            - 無 inner padding(consumer NameCard 自帶 `px-4 py-3` chrome)\n            - `overflow-hidden` + `rounded-lg` → child(NameCard)圓角裁切\n            - **不設 max-height**:NameCard 自己消費 `--radix-hover-card-content-available-height`\n              自約束高度 + 內部 ScrollArea 處理捲動\n            - `data-theme={documentTheme}`:NameCard 永遠跟隨 **app-level theme**(從 `<html data-theme>`\n              動態讀),不受 trigger subtree theme 污染。範例:Avatar 位於 OverflowIndicator 的 dark\n              tooltip 內,其 Portal 會繼承該 subtree dark theme → NameCard 變全黑。顯式設回 app theme\n              確保 NameCard 永遠 light-in-light-app / dark-in-dark-app。 */}\n        <HoverCardContent\n          data-theme={documentTheme ?? undefined}\n          className=\"bg-surface-raised rounded-lg border border-border overflow-hidden\"\n          style={{ boxShadow: 'var(--elevation-200)' }}\n        >\n          {hoverCard}\n        </HoverCardContent>\n      </HoverCard>\n    )\n  }\n)\nAvatarInner.displayName = 'AvatarInner'\n\n// ── AvatarData ─────────────────────────────────────────────────────────────\n// 資料型別，讓 consumer 傳資料而非 ReactNode。\n// 接收端內部用 Avatar 元件渲染，統一控制尺寸與 fallback。\n\nexport interface AvatarData {\n  /** 圖片 URL */\n  src?: string\n  /** 替代文字（圖片失敗時取首字作 fallback） */\n  alt: string\n  /** Icon / text fallback 的背景色，預設 neutral */\n  color?: ColorKey\n  /**\n   * Person avatar hover NameCard(DS-wide canonical,person avatar 預設必有,見 avatar.spec.md)。\n   * Entity avatar(專案 / 組織 logo)不帶 → consumer 不傳 hoverCard 即豁免。\n   * 所有消費 AvatarData 的 primitive(MenuItem / DropdownMenu / SelectMenu / SelectionItem / NameCard)\n   * 需 forward 此 prop 到內部 <Avatar hoverCard={avatar.hoverCard} />。\n   */\n  hoverCard?: React.ReactNode\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const avatarMeta = {\n  component: 'Avatar',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['--foreground', '--on-emphasis'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nAvatarInner.displayName = 'Avatar'\nconst Avatar = React.memo(AvatarInner)\n\nexport { Avatar }\n"],"names":[],"mappings":"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"}

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './avatar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAA"}

package/dist/components/Avatar/index.js

@@ -0,0 +1,6 @@
+import { Avatar, avatarMeta } from "./avatar.js";
+export {
+  Avatar,
+  avatarMeta
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Badge/badge.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    variant?: "high" | "low" | "medium" | "critical" | null | undefined;
+    dot?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>, Omit<VariantProps<typeof badgeVariants>, 'dot'> {
+    /** dot 模式：6×6px 純色圓點，無文字 */
+    dot?: boolean;
+    /** 顯示的數量（dot 模式下忽略） */
+    count?: number;
+    /** 數量上限，超過時顯示 "max+"（例：max=99 → "99+"） */
+    max?: number;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const badgeMeta: {
+    readonly component: "Badge";
+    readonly family: 3;
+    readonly variants: {
+        readonly critical: {
+            readonly purpose: "紅底白字（bg-notification）";
+        };
+        readonly high: {
+            readonly purpose: "藍底白字（bg-info）";
+        };
+        readonly medium: {
+            readonly purpose: "淺藍底藍字（bg-info-subtle）";
+        };
+        readonly low: {
+            readonly purpose: "使用者切 tab 才看，不需搶注意力";
+        };
+    };
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-info", "bg-info-subtle", "bg-notification", "bg-secondary"];
+        readonly fg: readonly ["text-fg-muted", "text-info-text"];
+        readonly ring: readonly [];
+    };
+    readonly defaultVariant: "low";
+};
+export { Badge, badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/Badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAkBjE,QAAA,MAAM,aAAa;;;8EAwBlB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,EAC7D,IAAI,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,EAAE,KAAK,CAAC;IACjD,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,QAAA,MAAM,KAAK,oFAqBV,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;CAmBZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/Badge/badge.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const badgeVariants = cva(
+  // 2026-05-23 Path B revert:icon-as-text / numeric-in-circle 用 leading-none canonical(對齊 Material Avatar `line-height: 1` / Polaris Badge / Carbon Tag 共識)。
+  // 視覺等效驗證:Badge container 顯式 `h-4 (16px)` + `flex items-center` 主導,text 被 items-center 置中,line-height 1.0 vs 1.3 視覺零差別。
+  // user 2026-05-23「或是其實根本不用分?」+「照你建議」path B:統一 leading-none,不分。
+  // 廢除 2026-05-21 F1 fix 的 leading-compact migration(那次 anchor「不影響高度的話就改」core constraint 是高度不變,Path B 同樣滿足且更簡單)。
+  "inline-flex items-center justify-center rounded-full leading-none",
+  {
+    variants: {
+      variant: {
+        critical: "bg-notification text-on-emphasis",
+        high: "bg-info text-on-emphasis",
+        medium: "bg-info-subtle text-info-text",
+        low: "bg-secondary text-fg-muted"
+      },
+      dot: {
+        true: "w-1.5 h-1.5",
+        false: "min-w-4 h-4 px-1 text-[10px] font-medium"
+      }
+    },
+    defaultVariants: {
+      variant: "low",
+      dot: false
+    }
+  }
+);
+const Badge = React.forwardRef(
+  ({ variant, dot = false, count, max, className, role, ...props }, ref) => {
+    const display = dot ? null : max != null && count != null && count > max ? `${max}+` : `${count}`;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: role ?? "status",
+        className: cn(badgeVariants({ variant, dot }), className),
+        ...props,
+        children: display
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+const badgeMeta = {
+  component: "Badge",
+  family: 3,
+  variants: {
+    critical: { purpose: "紅底白字（bg-notification）" },
+    high: { purpose: "藍底白字（bg-info）" },
+    medium: { purpose: "淺藍底藍字（bg-info-subtle）" },
+    low: { purpose: "使用者切 tab 才看，不需搶注意力" }
+  },
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-info", "bg-info-subtle", "bg-notification", "bg-secondary"],
+    fg: ["text-fg-muted", "text-info-text"],
+    ring: []
+  },
+  defaultVariant: "low"
+};
+export {
+  Badge,
+  badgeMeta,
+  badgeVariants
+};
+//# sourceMappingURL=badge.js.map

package/dist/components/Badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":["../../../src/components/Badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ── Badge（notification count indicator）────────────────────────────────────\n// 通知計數指示器，用於未讀數量、待辦計數等。\n//\n// 兩種模式：\n//   count — 16px 高，10px 字，font-medium。個位數正圓，多位數膠囊。\n//   dot   — 6×6px 純色圓點，無文字。\n//\n// 四個層級（由 passive 到 urgent）：\n//   low（預設） — 灰底灰字（neutral-3 + neutral-7），被動計數\n//   medium      — 淺藍底藍字（bg-info-subtle + text-info-text），可延後看\n//   high        — 藍底白字（bg-info），有感影響的待辦\n//   critical    — 紅底白字（bg-notification），立即處理\n//\n// 規則：default low, escalate with reason。見 badge.spec.md「選 level 的流程」。\n\nconst badgeVariants = cva(\n  // 2026-05-23 Path B revert:icon-as-text / numeric-in-circle 用 leading-none canonical(對齊 Material Avatar `line-height: 1` / Polaris Badge / Carbon Tag 共識)。\n  // 視覺等效驗證:Badge container 顯式 `h-4 (16px)` + `flex items-center` 主導,text 被 items-center 置中,line-height 1.0 vs 1.3 視覺零差別。\n  // user 2026-05-23「或是其實根本不用分?」+「照你建議」path B:統一 leading-none,不分。\n  // 廢除 2026-05-21 F1 fix 的 leading-compact migration(那次 anchor「不影響高度的話就改」core constraint 是高度不變,Path B 同樣滿足且更簡單)。\n  'inline-flex items-center justify-center rounded-full leading-none',\n  {\n    variants: {\n      variant: {\n        critical: 'bg-notification text-on-emphasis',\n        high: 'bg-info text-on-emphasis',\n        medium: 'bg-info-subtle text-info-text',\n        low: 'bg-secondary text-fg-muted',\n      },\n      dot: {\n        true: 'w-1.5 h-1.5',\n        false: 'min-w-4 h-4 px-1 text-[10px] font-medium',\n      },\n    },\n    defaultVariants: {\n      variant: 'low',\n      dot: false,\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,\n    Omit<VariantProps<typeof badgeVariants>, 'dot'> {\n  /** dot 模式：6×6px 純色圓點，無文字 */\n  dot?: boolean\n  /** 顯示的數量（dot 模式下忽略） */\n  count?: number\n  /** 數量上限，超過時顯示 \"max+\"（例：max=99 → \"99+\"） */\n  max?: number\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ variant, dot = false, count, max, className, role, ...props }, ref) => {\n    const display = dot ? null : (\n      max != null && count != null && count > max ? `${max}+` : `${count}`\n    )\n\n    // a11y(2026-04-25 axe aria-prohibited-attr fix):\n    // span default 無 role → 不接 aria-label(WCAG 禁止)。Badge 是通知指示器,\n    // `role=\"status\"` 語意正確(live region 可播報計數變化)且允許 aria-label。\n    // Consumer 可 override(傳 role=\"img\" / role={undefined})。\n    return (\n      <span\n        ref={ref}\n        role={role ?? 'status'}\n        className={cn(badgeVariants({ variant, dot }), className)}\n        {...props}\n      >\n        {display}\n      </span>\n    )\n  }\n)\nBadge.displayName = 'Badge'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const badgeMeta = {\n  component: 'Badge',\n  family: 3,\n  variants: {\n    critical: { purpose: '紅底白字（bg-notification）' },\n    high: { purpose: '藍底白字（bg-info）' },\n    medium: { purpose: '淺藍底藍字（bg-info-subtle）' },\n    low: { purpose: '使用者切 tab 才看，不需搶注意力' },\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-info', 'bg-info-subtle', 'bg-notification', 'bg-secondary'],\n    fg: ['text-fg-muted', 'text-info-text'],\n    ring: [],\n  },\n  defaultVariant: 'low',\n} as const\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;AAmBA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,KAAK;AAAA,MAAA;AAAA,MAEP,KAAK;AAAA,QACH,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AAaA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,SAAS,MAAM,OAAO,OAAO,KAAK,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;AACxE,UAAM,UAAU,MAAM,OACpB,OAAO,QAAQ,SAAS,QAAQ,QAAQ,MAAM,GAAG,GAAG,MAAM,GAAG,KAAK;AAOpE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW,GAAG,cAAc,EAAE,SAAS,IAAA,CAAK,GAAG,SAAS;AAAA,QACvD,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,UAAU,EAAE,SAAS,wBAAA;AAAA,IACrB,MAAM,EAAE,SAAS,gBAAA;AAAA,IACjB,QAAQ,EAAE,SAAS,wBAAA;AAAA,IACnB,KAAK,EAAE,SAAS,qBAAA;AAAA,EAAqB;AAAA,EAEvC,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,WAAW,kBAAkB,mBAAmB,cAAc;AAAA,IACnE,IAAI,CAAC,iBAAiB,gBAAgB;AAAA,IACtC,MAAM,CAAA;AAAA,EAAC;AAAA,EAET,gBAAgB;AAClB;"}

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './badge';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAA"}

package/dist/components/Badge/index.js

@@ -0,0 +1,7 @@
+import { Badge, badgeMeta, badgeVariants } from "./badge.js";
+export {
+  Badge,
+  badgeMeta,
+  badgeVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}