@qijenchen/design-system 0.1.0-beta.4 → 0.1.0-beta.6

package/dist/components/Accordion/accordion.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+/**
+ * Accordion — Radix Accordion + 本 DS token
+ *
+ * 結構對齊 shadcn/ui accordion(Accordion / AccordionItem / AccordionTrigger /
+ * AccordionContent),但視覺全改本 DS token。
+ *
+ * ── 視覺差異 vs shadcn 預設 ──
+ * Shadcn 預設 hover 加底線(web 早期 link style),本 DS 改為文字色 tint
+ * (`hover:text-fg-secondary`)——維持現代 SaaS 質感(Notion / Linear / Stripe 皆不用
+ * 底線),但保留 hover 顏色變化作為可點擊提示(user 決策 2026-04-20)。
+ * Chevron 用 Lucide + 本 DS icon size(16px),rotate 動畫 200ms。
+ *
+ * ── 使用情境 ──
+ * FAQ / settings section 收合 / 多區塊表單分組 / 進階選項可隱藏。
+ * 不用於「單純顯示 / 隱藏單一區塊」(那是 Collapsible,本 DS 尚未建立;用 details 或
+ * 自組 toggle),Accordion 是「多個 item 可互斥或獨立收合」的 pattern。
+ */
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const accordionMeta: {
+    readonly component: "Accordion";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly [];
+        readonly fg: readonly ["text-fg-disabled", "text-fg-muted", "text-fg-secondary", "text-foreground"];
+        readonly ring: readonly ["ring-ring"];
+    };
+};
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/Accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAI/D;;;;;;;;;;;;;;;;GAgBG;AAEH,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,0KA2BpB,CAAA;AAGF,QAAA,MAAM,gBAAgB,oKAcpB,CAAA;AAKF,eAAO,MAAM,aAAa;;;;;;;;;;;CAehB,CAAA;AAEV,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Accordion/accordion.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    className: cn("border-b border-divider", className),
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex flex-1 items-center justify-between gap-2",
+      "py-4 text-body font-medium text-foreground text-left",
+      "transition-colors hover:text-fg-secondary",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      // AccordionTrigger 單一 text-style 列 → semantic `text-fg-disabled`(非 opacity);Button canonical 對齊
+      "disabled:text-fg-disabled disabled:pointer-events-none",
+      "[&[data-state=open]>svg]:rotate-180",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          size: 16,
+          className: "shrink-0 text-fg-muted transition-transform duration-200",
+          "aria-hidden": true
+        }
+      )
+    ]
+  }
+) }));
+AccordionTrigger.displayName = "AccordionTrigger";
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden text-body text-fg-secondary",
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: cn("pb-4", className), children })
+  }
+));
+AccordionContent.displayName = "AccordionContent";
+const accordionMeta = {
+  component: "Accordion",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: [],
+    fg: ["text-fg-disabled", "text-fg-muted", "text-fg-secondary", "text-foreground"],
+    ring: ["ring-ring"]
+  }
+};
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  accordionMeta
+};
+//# sourceMappingURL=accordion.js.map

package/dist/components/Accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":["../../../src/components/Accordion/accordion.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\n/**\n * Accordion — Radix Accordion + 本 DS token\n *\n * 結構對齊 shadcn/ui accordion(Accordion / AccordionItem / AccordionTrigger /\n * AccordionContent),但視覺全改本 DS token。\n *\n * ── 視覺差異 vs shadcn 預設 ──\n * Shadcn 預設 hover 加底線(web 早期 link style),本 DS 改為文字色 tint\n * (`hover:text-fg-secondary`)——維持現代 SaaS 質感(Notion / Linear / Stripe 皆不用\n * 底線),但保留 hover 顏色變化作為可點擊提示(user 決策 2026-04-20)。\n * Chevron 用 Lucide + 本 DS icon size(16px),rotate 動畫 200ms。\n *\n * ── 使用情境 ──\n * FAQ / settings section 收合 / 多區塊表單分組 / 進階選項可隱藏。\n * 不用於「單純顯示 / 隱藏單一區塊」(那是 Collapsible,本 DS 尚未建立;用 details 或\n * 自組 toggle),Accordion 是「多個 item 可互斥或獨立收合」的 pattern。\n */\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn('border-b border-divider', className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = 'AccordionItem'\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'flex flex-1 items-center justify-between gap-2',\n        'py-4 text-body font-medium text-foreground text-left',\n        'transition-colors hover:text-fg-secondary',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        // AccordionTrigger 單一 text-style 列 → semantic `text-fg-disabled`(非 opacity);Button canonical 對齊\n        'disabled:text-fg-disabled disabled:pointer-events-none',\n        \"[&[data-state=open]>svg]:rotate-180\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown\n        size={16}\n        className=\"shrink-0 text-fg-muted transition-transform duration-200\"\n        aria-hidden\n      />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = 'AccordionTrigger'\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className={cn(\n      'overflow-hidden text-body text-fg-secondary',\n      'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n    )}\n    {...props}\n  >\n    <div className={cn('pb-4', className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = 'AccordionContent'\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 accordionMeta = {\n  component: 'Accordion',\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: ['text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"],"names":[],"mappings":";;;;;AAuBA,MAAM,YAAY,mBAAmB;AAErC,MAAM,gBAAgB,MAAM,WAG1B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,2BAA2B,SAAS;AAAA,IACjD,GAAG;AAAA,EAAA;AACN,CACD;AACD,cAAc,cAAc;AAE5B,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QACpC,oBAAC,mBAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAA;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,eAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACb;AAAA,EAAA;AACF,GACF,CACD;AACD,iBAAiB,cAAc;AAE/B,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,8BAAC,OAAA,EAAI,WAAW,GAAG,QAAQ,SAAS,GAAI,SAAA,CAAS;AAAA,EAAA;AACnD,CACD;AACD,iBAAiB,cAAc;AAIxB,MAAM,gBAAgB;AAAA,EAC3B,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,CAAC,oBAAoB,iBAAiB,qBAAqB,iBAAiB;AAAA,IAChF,MAAM,CAAC,WAAW;AAAA,EAAA;AAEtB;"}

package/dist/components/Alert/alert.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type NoticeVariant } from '@/design-system/components/Notice/notice';
+declare const alertVariants: (props?: ({
+    placement?: "fixed" | "inline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof alertVariants> {
+    variant?: NoticeVariant;
+    appearance?: 'subtle' | 'solid';
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    endContent?: React.ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export declare const alertMeta: {
+    readonly component: "Alert";
+    readonly family: null;
+    readonly variants: {
+        readonly neutral: {
+            readonly purpose: "中性提示(系統公告、非緊急說明);無情緒色";
+        };
+        readonly info: {
+            readonly purpose: "資訊性提示(版本更新、流程說明);藍色 hue";
+        };
+        readonly success: {
+            readonly purpose: "成功狀態的持久性宣告(綁定生效、付款完成需保留確認)";
+        };
+        readonly warning: {
+            readonly purpose: "警告但非阻斷(方案到期、需更新付款方式);最高頻";
+        };
+        readonly error: {
+            readonly purpose: "錯誤但非阻斷(系統錯誤可重試、API 失敗摘要);aria-live=assertive";
+        };
+    };
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-error", "bg-error-subtle", "bg-info", "bg-info-subtle", "bg-muted", "bg-success", "bg-success-subtle", "bg-surface-raised", "bg-warning", "bg-warning-subtle"];
+        readonly fg: readonly ["text-foreground"];
+        readonly ring: readonly [];
+    };
+    readonly defaultVariant: "neutral";
+};
+export { Alert, alertVariants };
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/Alert/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAA8C,KAAK,aAAa,EAAE,MAAM,0CAA0C,CAAA;AA2CzH,QAAA,MAAM,aAAa;;8EAQjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAGD,QAAA,MAAM,KAAK,mFA2FV,CAAA;AAMD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/Alert/alert.js

@@ -0,0 +1,132 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+import { useInverseTheme, SUBTLE_ICON_COLOR, Notice } from "../Notice/notice.js";
+const SUBTLE_CONTAINER = {
+  neutral: "bg-muted border border-border",
+  info: "bg-info-subtle border border-[var(--info-hover)]",
+  success: "bg-success-subtle border border-[var(--success-hover)]",
+  warning: "bg-warning-subtle border border-[var(--warning-hover)]",
+  error: "bg-error-subtle border border-[var(--error-hover)]"
+};
+const SOLID_HUE_BG = {
+  info: "bg-info",
+  success: "bg-success",
+  warning: "bg-warning",
+  error: "bg-error"
+};
+const SOLID_HUE_THEME = {
+  info: "dark",
+  success: "dark",
+  warning: "light",
+  error: "dark"
+};
+const alertVariants = cva("w-full overflow-hidden", {
+  variants: {
+    placement: {
+      inline: "rounded-md",
+      fixed: "rounded-none border-none"
+    }
+  },
+  defaultVariants: { placement: "inline" }
+});
+const Alert = React.forwardRef(
+  ({
+    variant = "neutral",
+    appearance = "subtle",
+    placement,
+    title,
+    description,
+    endContent,
+    dismissible = true,
+    onDismiss,
+    className,
+    ...props
+  }, ref) => {
+    const inverseTheme = useInverseTheme();
+    const isSolid = appearance === "solid";
+    const iconClassName = !isSolid ? SUBTLE_ICON_COLOR[variant] : void 0;
+    const isCritical = variant === "error" || variant === "warning";
+    const liveRole = isCritical ? "alert" : "status";
+    const liveLevel = isCritical ? "assertive" : "polite";
+    const noticeEl = /* @__PURE__ */ jsx(
+      Notice,
+      {
+        variant,
+        title,
+        description,
+        endContent,
+        dismissible,
+        onDismiss,
+        iconClassName,
+        className: placement === "fixed" ? "px-[var(--layout-space-loose)]" : void 0
+      }
+    );
+    if (!isSolid) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          role: liveRole,
+          "aria-live": liveLevel,
+          className: cn(alertVariants({ placement }), SUBTLE_CONTAINER[variant], className),
+          ...props,
+          children: noticeEl
+        }
+      );
+    }
+    if (variant === "neutral") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          role: liveRole,
+          "aria-live": liveLevel,
+          "data-theme": inverseTheme,
+          className: cn(alertVariants({ placement }), "bg-surface-raised text-foreground", className),
+          ...props,
+          children: noticeEl
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: liveRole,
+        "aria-live": liveLevel,
+        className: cn(alertVariants({ placement }), SOLID_HUE_BG[variant], className),
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { "data-theme": SOLID_HUE_THEME[variant], className: "text-foreground", children: noticeEl })
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+const alertMeta = {
+  component: "Alert",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {
+    neutral: { purpose: "中性提示(系統公告、非緊急說明);無情緒色" },
+    info: { purpose: "資訊性提示(版本更新、流程說明);藍色 hue" },
+    success: { purpose: "成功狀態的持久性宣告(綁定生效、付款完成需保留確認)" },
+    warning: { purpose: "警告但非阻斷(方案到期、需更新付款方式);最高頻" },
+    error: { purpose: "錯誤但非阻斷(系統錯誤可重試、API 失敗摘要);aria-live=assertive" }
+  },
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-error", "bg-error-subtle", "bg-info", "bg-info-subtle", "bg-muted", "bg-success", "bg-success-subtle", "bg-surface-raised", "bg-warning", "bg-warning-subtle"],
+    fg: ["text-foreground"],
+    ring: []
+  },
+  defaultVariant: "neutral"
+};
+export {
+  Alert,
+  alertMeta,
+  alertVariants
+};
+//# sourceMappingURL=alert.js.map

package/dist/components/Alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sources":["../../../src/components/Alert/alert.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 { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { Notice, useInverseTheme, SUBTLE_ICON_COLOR, type NoticeVariant } from '@/design-system/components/Notice/notice'\n\n/**\n * Alert — inline / fixed 通知\n *\n * ── data-theme 必須搭配 text-foreground ──\n * CSS color 從 body 繼承已解析值,data-theme 只改 --foreground 不改 color。\n * 在 theme boundary 設 text-foreground 強制 re-resolve。\n *\n * ── Appearance ──\n * subtle: 淺底色 + 四邊 1px border(色相 hover 色)。不設 data-theme,跟隨頁面。\n * solid: 跟 Toast 對齊:\n *   neutral → data-theme={inverse} + bg-surface-raised（同層翻轉）\n *   info/success/error → bg on outer, data-theme=\"dark\" on inner\n *   warning → bg on outer, data-theme=\"light\" on inner\n *\n * ── Placement ──\n * inline: rounded-md(card-level 圓角,非 overlay — 因 Alert 在頁面流內,非 floating)\n * fixed: 無圓角,full-width,無 border\n */\n\nconst SUBTLE_CONTAINER: Record<NoticeVariant, string> = {\n  neutral: 'bg-muted border border-border',\n  info: 'bg-info-subtle border border-[var(--info-hover)]',\n  success: 'bg-success-subtle border border-[var(--success-hover)]',\n  warning: 'bg-warning-subtle border border-[var(--warning-hover)]',\n  error: 'bg-error-subtle border border-[var(--error-hover)]',\n}\n\nconst SOLID_HUE_BG: Record<string, string> = {\n  info: 'bg-info',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  error: 'bg-error',\n}\n\nconst SOLID_HUE_THEME: Record<string, string> = {\n  info: 'dark',\n  success: 'dark',\n  warning: 'light',\n  error: 'dark',\n}\n\nconst alertVariants = cva('w-full overflow-hidden', {\n  variants: {\n    placement: {\n      inline: 'rounded-md',\n      fixed: 'rounded-none border-none',\n    },\n  },\n  defaultVariants: { placement: 'inline' },\n})\n\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\n    VariantProps<typeof alertVariants> {\n  variant?: NoticeVariant\n  appearance?: 'subtle' | 'solid'\n  title: React.ReactNode\n  description?: React.ReactNode\n  endContent?: React.ReactNode\n  dismissible?: boolean\n  onDismiss?: () => void\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      variant = 'neutral',\n      appearance = 'subtle',\n      placement,\n      title,\n      description,\n      endContent,\n      dismissible = true,\n      onDismiss,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const inverseTheme = useInverseTheme()\n    const isSolid = appearance === 'solid'\n    const iconClassName = !isSolid ? SUBTLE_ICON_COLOR[variant] : undefined\n\n    // ── Live region 由 wrapping consumer 擁有(WAI-ARIA + Atlassian / Polaris / Material 共識) ──\n    // Alert 是 outer host —— 自己擁有 role + aria-live;Notice(inner layout)不再帶 role,\n    // 避免 nested live region 造成 screen reader 重複朗讀。\n    // - error / warning → role=\"alert\" + aria-live=\"assertive\"(中斷,使用者必須立刻知道)\n    // - info / success / neutral → role=\"status\" + aria-live=\"polite\"(空閒朗讀,不打斷)\n    const isCritical = variant === 'error' || variant === 'warning'\n    const liveRole = isCritical ? 'alert' : 'status'\n    const liveLevel = isCritical ? 'assertive' : 'polite'\n\n    // placement=\"fixed\" 用 loose px(density-aware)讓 Alert 嵌在更大佈局內時跟周圍\n   // loose-padding 元素(Toolbar / BulkActionBar / DataTable 等)左右對齊。\n    // py 維持 py-3 fixed(notification banner family canonical,垂直不隨 density)。\n    const noticeEl = (\n      <Notice\n        variant={variant}\n        title={title}\n        description={description}\n        endContent={endContent}\n        dismissible={dismissible}\n        onDismiss={onDismiss}\n        iconClassName={iconClassName}\n        className={placement === 'fixed' ? 'px-[var(--layout-space-loose)]' : undefined}\n      />\n    )\n\n    // ── Subtle ──\n    if (!isSolid) {\n      return (\n        <div\n          ref={ref}\n          role={liveRole}\n          aria-live={liveLevel}\n          className={cn(alertVariants({ placement }), SUBTLE_CONTAINER[variant], className)}\n          {...props}\n        >\n          {noticeEl}\n        </div>\n      )\n    }\n\n    // ── Solid neutral (inverse: bg + theme 同層) ──\n    if (variant === 'neutral') {\n      return (\n        <div\n          ref={ref}\n          role={liveRole}\n          aria-live={liveLevel}\n          data-theme={inverseTheme}\n          className={cn(alertVariants({ placement }), 'bg-surface-raised text-foreground', className)}\n          {...props}\n        >\n          {noticeEl}\n        </div>\n      )\n    }\n\n    // ── Solid 有色相: bg outer + data-theme inner ──\n    return (\n      <div\n        ref={ref}\n        role={liveRole}\n        aria-live={liveLevel}\n        className={cn(alertVariants({ placement }), SOLID_HUE_BG[variant], className)}\n        {...props}\n      >\n        <div data-theme={SOLID_HUE_THEME[variant]} className=\"text-foreground\">\n          {noticeEl}\n        </div>\n      </div>\n    )\n  },\n)\nAlert.displayName = 'Alert'\n\n// Story auto-compile metadata — Phase 2 fill(2026-05-15)\n// Variants = NoticeVariant 5 hues(prop name `variant`,cva 內僅 placement,色相由 SUBTLE_CONTAINER / SOLID_HUE_BG map 控)\n// Sizes = none(Alert 視覺尺寸繼承 Notice primitive,不隨 size 變;見 spec「為何無 SizeMatrix」)\nexport const alertMeta = {\n  component: 'Alert',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n    neutral: { purpose: '中性提示(系統公告、非緊急說明);無情緒色' },\n    info: { purpose: '資訊性提示(版本更新、流程說明);藍色 hue' },\n    success: { purpose: '成功狀態的持久性宣告(綁定生效、付款完成需保留確認)' },\n    warning: { purpose: '警告但非阻斷(方案到期、需更新付款方式);最高頻' },\n    error: { purpose: '錯誤但非阻斷(系統錯誤可重試、API 失敗摘要);aria-live=assertive' },\n  },\n  sizes: {},\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-error', 'bg-error-subtle', 'bg-info', 'bg-info-subtle', 'bg-muted', 'bg-success', 'bg-success-subtle', 'bg-surface-raised', 'bg-warning', 'bg-warning-subtle'],\n    fg: ['text-foreground'],\n    ring: [],\n  },\n  defaultVariant: 'neutral',\n} as const\n\nexport { Alert, alertVariants }\n"],"names":[],"mappings":";;;;;AAyBA,MAAM,mBAAkD;AAAA,EACtD,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,eAAuC;AAAA,EAC3C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,kBAA0C;AAAA,EAC9C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,gBAAgB,IAAI,0BAA0B;AAAA,EAClD,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB,EAAE,WAAW,SAAA;AAChC,CAAC;AAeD,MAAM,QAAQ,MAAM;AAAA,EAClB,CACE;AAAA,IACE,UAAU;AAAA,IACV,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,gBAAA;AACrB,UAAM,UAAU,eAAe;AAC/B,UAAM,gBAAgB,CAAC,UAAU,kBAAkB,OAAO,IAAI;AAO9D,UAAM,aAAa,YAAY,WAAW,YAAY;AACtD,UAAM,WAAW,aAAa,UAAU;AACxC,UAAM,YAAY,aAAa,cAAc;AAK7C,UAAM,WACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,cAAc,UAAU,mCAAmC;AAAA,MAAA;AAAA,IAAA;AAK1E,QAAI,CAAC,SAAS;AACZ,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN,aAAW;AAAA,UACX,WAAW,GAAG,cAAc,EAAE,UAAA,CAAW,GAAG,iBAAiB,OAAO,GAAG,SAAS;AAAA,UAC/E,GAAG;AAAA,UAEH,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAGA,QAAI,YAAY,WAAW;AACzB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN,aAAW;AAAA,UACX,cAAY;AAAA,UACZ,WAAW,GAAG,cAAc,EAAE,WAAW,GAAG,qCAAqC,SAAS;AAAA,UACzF,GAAG;AAAA,UAEH,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAGA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN,aAAW;AAAA,QACX,WAAW,GAAG,cAAc,EAAE,UAAA,CAAW,GAAG,aAAa,OAAO,GAAG,SAAS;AAAA,QAC3E,GAAG;AAAA,QAEJ,UAAA,oBAAC,SAAI,cAAY,gBAAgB,OAAO,GAAG,WAAU,mBAClD,UAAA,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACA,MAAM,cAAc;AAKb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU;AAAA,IACR,SAAS,EAAE,SAAS,wBAAA;AAAA,IACpB,MAAM,EAAE,SAAS,0BAAA;AAAA,IACjB,SAAS,EAAE,SAAS,6BAAA;AAAA,IACpB,SAAS,EAAE,SAAS,2BAAA;AAAA,IACpB,OAAO,EAAE,SAAS,+CAAA;AAAA,EAA+C;AAAA,EAEnE,OAAO,CAAA;AAAA,EACP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY,mBAAmB,WAAW,kBAAkB,YAAY,cAAc,qBAAqB,qBAAqB,cAAc,mBAAmB;AAAA,IACtK,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAAA,EAET,gBAAgB;AAClB;"}

package/dist/components/AppShell/_demo-helpers.d.ts

@@ -0,0 +1,49 @@
+export declare const MAIN_NAV: readonly [{
+    readonly id: "dashboard";
+    readonly label: "Dashboard";
+    readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}, {
+    readonly id: "inbox";
+    readonly label: "Inbox";
+    readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}, {
+    readonly id: "team";
+    readonly label: "Team";
+    readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}, {
+    readonly id: "insights";
+    readonly label: "Insights";
+    readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}, {
+    readonly id: "calendar";
+    readonly label: "Calendar";
+    readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}, {
+    readonly id: "settings";
+    readonly label: "Settings";
+    readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}];
+export declare const WorkspaceBrand: () => import("react/jsx-runtime").JSX.Element;
+export declare const UserFooter: () => import("react/jsx-runtime").JSX.Element;
+export declare function AcmeSidebar({ viewportInsetTop, includeWorkspaceBrand, }?: {
+    viewportInsetTop?: string;
+    includeWorkspaceBrand?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function GlobalHeader({ rightSlot }?: {
+    rightSlot?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PageHeader({ title, tabsSlot, includeSidebarTrigger, }: {
+    title: string;
+    /**
+     * Optional tabs row(per header-canonical.spec.md W1-W6 + Background ownership 段)。
+     * 提供時 ChromeHeader 自動 column mode + suppress border + delegate paint 給 TabsList。
+     */
+    tabsSlot?: React.ReactNode;
+    /**
+     * 是否含 SidebarTrigger(2026-05-21 加 per user「primary-header mode 的 sidebar toggle 應該只放在 primary header 才對」)。
+     * - `primary-sidebar` mode = true(預設):PageHeader 是 chrome 第一層,trigger 自然在這
+     * - `primary-header` mode = false:SidebarTrigger 已在 GlobalHeader,PageHeader 不該重複
+     */
+    includeSidebarTrigger?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=_demo-helpers.d.ts.map

package/dist/components/AppShell/_demo-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_demo-helpers.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/_demo-helpers.tsx"],"names":[],"mappings":"AAuCA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;EAOX,CAAA;AAqBV,eAAO,MAAM,cAAc,+CAM1B,CAAA;AAID,eAAO,MAAM,UAAU,+CAuBtB,CAAA;AAMD,wBAAgB,WAAW,CAAC,EAC1B,gBAAgB,EAChB,qBAA4B,GAC7B,GAAE;IACD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAC3B,2CAgCL;AAQD,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAE;IAAE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAO,2CAY/E;AASD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,qBAA4B,GAC7B,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,2CAOA"}

package/dist/components/AppShell/app-shell.d.ts

@@ -0,0 +1,76 @@
+/**
+ * AppShell — web service page-level layout primitive。
+ *
+ * 組合 Sidebar + ChromeHeader + Aside + main 成完整 page shell。SSOT 邊界:本 pattern only
+ * own slot composition + layout mode + Aside responsive mode;不 own sidebar / header /
+ * sheet 視覺(各自 spec own)。
+ *
+ * 對齊 Mantine AppShell compound API + Ant Layout slot 模式 + Material 3 standard/modal
+ * drawer canonical(per spec.md frontmatter cite)。
+ *
+ * Spec SSOT:`patterns/app-shell/app-shell.spec.md`
+ */
+import * as React from 'react';
+type AppShellLayout = 'primary-sidebar' | 'primary-header';
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** primary-sidebar (Linear/Notion 派) | primary-header (GitHub/Slack 派);預設 primary-sidebar */
+    layout?: AppShellLayout;
+    /** Sidebar 元素(必傳 Sidebar primitive,per Consumer 紀律)*/
+    sidebar?: React.ReactNode;
+    /**
+     * Local page header(永遠 render 在 main column 頂部,當前頁 actions / breadcrumb / page-level filter)。
+     * 兩 layout mode 都會 render 此 slot — `primary-header` mode 多了 globalHeader 在上方,
+     * **不取代** local header(per 2026-05-20 user clarification「primary-header = primary-sidebar + 一條 global header」)。
+     */
+    header?: React.ReactNode;
+    /**
+     * Global header(僅 `primary-header` mode render)。橫跨整 viewport 的頂部 bar:
+     * account avatar / workspace switcher / global search / notifications。
+     * 對齊 GitHub top nav / Slack workspace bar / Gmail logo bar 慣例。
+     * `primary-sidebar` mode 傳此 prop 會被忽略。
+     */
+    globalHeader?: React.ReactNode;
+    /** Aside 元素(`<AppShellAside>` sub-component);可選 */
+    aside?: React.ReactNode;
+    /** Aside open state(modal mode 必須)*/
+    asideOpen?: boolean;
+    onAsideOpenChange?: (open: boolean) => void;
+    /** Main content;`<main>` landmark + padding=0 */
+    children: React.ReactNode;
+}
+export interface AppShellAsideProps {
+    /** Required:modal mode 走 Sheet → aria-labelledby 強制,per sheet.spec.md:98 */
+    title: string;
+    /** Width(number 或 breakpoint-keyed object);clamp min:240 max:640 */
+    width?: number | {
+        md?: number;
+        xl?: number;
+    };
+    /** Children content */
+    children: React.ReactNode;
+    className?: string;
+}
+interface AppShellContextValue {
+    layout: AppShellLayout;
+    asideOpen: boolean;
+    setAsideOpen: (open: boolean) => void;
+    isMobile: boolean;
+}
+declare function useAppShell(): AppShellContextValue;
+declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * AppShellAside — right panel:standard inline(desktop) vs modal overlay(mobile)。
+ *
+ * Desktop(viewport ≥ 768px):
+ *   - Render 直接放 layout grid 右側(asideOpen=true 才 mount,close hide via parent)
+ *   - 不蓋 mask / background 可操作 / 佔 layout 寬
+ *   - Vertical extent:primary-sidebar → 頂天立地 / primary-header → header 下方
+ *
+ * Mobile(viewport < 768px):
+ *   - Render 走 Sheet primitive(side="right",per sheet.spec.md)
+ *   - Mask 蓋 / background 不可操作 / 不佔 layout 寬
+ *   - title 強制(aria-labelledby per sheet.spec.md:98)
+ */
+declare const AppShellAside: React.ForwardRefExoticComponent<AppShellAsideProps & React.RefAttributes<HTMLElement>>;
+export { AppShell, AppShellAside, useAppShell };
+//# sourceMappingURL=app-shell.d.ts.map

package/dist/components/AppShell/app-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/app-shell.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,KAAK,cAAc,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAE1D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,6FAA6F;IAC7F,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,iDAAiD;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7C,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,UAAU,oBAAoB;IAC5B,MAAM,EAAE,cAAc,CAAA;IACtB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,OAAO,CAAA;CAClB;AAID,iBAAS,WAAW,IAAI,oBAAoB,CAI3C;AA+DD,QAAA,MAAM,QAAQ,sFAgIb,CAAA;AAKD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,aAAa,wFAgElB,CAAA;AAQD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,CAAA"}