@qijenchen/design-system 0.1.0-beta.83 → 0.1.0-beta.85

package/dist/components/SelectionControl/boolean-value.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { Check, X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const booleanIconSize = {
+  sm: "size-3.5",
+  // 14px
+  md: "size-3.5",
+  // 14px
+  lg: "size-4"
+  //   16px
+};
+function BooleanValueIcon({
+  checked,
+  size = "md",
+  className
+}) {
+  const Icon = checked ? Check : X;
+  return /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: cn(booleanIconSize[size], "text-foreground", className) });
+}
+export {
+  BooleanValueIcon
+};
+//# sourceMappingURL=boolean-value.js.map

package/dist/components/SelectionControl/boolean-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"boolean-value.js","sources":["../../../src/components/SelectionControl/boolean-value.tsx"],"sourcesContent":["// @internal — boolean 值展示符號 SSOT(display / readonly 態);consumer 用 Checkbox / Switch 不直用。\n// ── 消費的 SSOT ──\n// - lucide-react Check / X(DS icon canonical:成功/勾 = Check、關閉/否 = X,見 ui-development.md「Icon canonical」)\n// - components/Field/field-context.ts(FieldSize 型別 → icon 尺寸對齊 value 文字)\n// - tokens/color:text-foreground(展示值中性色,同 readonly value / 空值 canonical)\n//\n// 世界級對照(M22,2026-07-09 本 session 查證):read-only boolean 顯示 = 勾/叉 icon,中性色(非紅綠):\n//   MUI X DataGrid boolean cell = Check / Close(X)icon,default 中性色(非 red/green)\n//   Refine(Ant)BooleanField https://refine.dev/docs/ui-integrations/ant-design/components/fields/boolean-field/ = 勾 / 叉\n//   React-admin BooleanField https://marmelab.com/react-admin/BooleanField.html = TrueIcon / FalseIcon(預設 勾 / 叉)\n// 為何中性色不用紅叉綠勾:false = 「否」值本身,非「錯誤 / 被拒」;error / warning 是另一條 error token 通道,\n// 不靠此 glyph 表達。true/false 對稱同色 = MUI/React-admin 共識。\nimport { Check, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { FieldSize } from '@/design-system/components/Field/field-context'\n\n// icon 尺寸對齊 value 文字(fieldDisplayTextClass:sm/md → text-body 14px、lg → text-body-lg 16px)。\nconst booleanIconSize: Record<FieldSize, string> = {\n  sm: 'size-3.5', // 14px\n  md: 'size-3.5', // 14px\n  lg: 'size-4', //   16px\n}\n\n/**\n * BooleanValueIcon — boolean 值的展示符號(true = Check 勾 / false = X 叉),中性 `text-foreground` 色。\n * Checkbox / Switch 的 display + readonly 態、DataTable boolean cell(經 Checkbox)全消費此 SSOT。\n */\nexport function BooleanValueIcon({\n  checked,\n  size = 'md',\n  className,\n}: {\n  checked: boolean\n  size?: FieldSize\n  className?: string\n}) {\n  const Icon = checked ? Check : X\n  return <Icon aria-hidden className={cn(booleanIconSize[size], 'text-foreground', className)} />\n}\n"],"names":[],"mappings":";;;AAiBA,MAAM,kBAA6C;AAAA,EACjD,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AACN;AAMO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAIG;AACD,QAAM,OAAO,UAAU,QAAQ;AAC/B,SAAO,oBAAC,MAAA,EAAK,eAAW,MAAC,WAAW,GAAG,gBAAgB,IAAI,GAAG,mBAAmB,SAAS,EAAA,CAAG;AAC/F;"}

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

@@ -1,2 +1,3 @@
+export * from './boolean-value';
 export * from './selection-item';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionControl/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionControl/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA"}

package/dist/components/SelectionControl/index.js

@@ -1,5 +1,7 @@
+import { BooleanValueIcon } from "./boolean-value.js";
 import { SelectionItem, selectionItemMeta, selectionItemStyles } from "./selection-item.js";
 export {
+  BooleanValueIcon,
   SelectionItem,
   selectionItemMeta,
   selectionItemStyles

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

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

package/dist/components/Sheet/index.js

@@ -1,4 +1,4 @@
-import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetMeta, sheetVariants } from "./sheet.js";
+import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, handleSheetOpenAutoFocus, sheetMeta, sheetVariants } from "./sheet.js";
 export {
   Sheet,
   SheetBody,
@@ -11,6 +11,7 @@ export {
   SheetPortal,
   SheetTitle,
   SheetTrigger,
+  handleSheetOpenAutoFocus,
   sheetMeta,
   sheetVariants
 };

package/dist/components/Sheet/sheet.d.ts

@@ -35,9 +35,15 @@ declare const sheetVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
+/** @internal DS 預設 open-focus(首個 body 互動元素)。consumer 傳自訂 onOpenAutoFocus 會覆寫
+ *  本預設({...props} 在後),需自訂前置行為(如 AppShellAside opener snapshot)時 import 接力呼叫。 */
+export declare const handleSheetOpenAutoFocus: (e: Event) => void;
 declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: React.ForwardRefExoticComponent<SurfaceHeaderProps & React.RefAttributes<HTMLDivElement>>;
-declare const SheetBody: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-scroll-area").ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetBody: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-scroll-area").ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    fillX?: boolean;
+    viewportTabIndex?: 0 | -1;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SheetFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/Sheet/sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/sheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,0DAA0D,CAAA;AAIjE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,QAAA,MAAM,KAAK,sCAAsB,CAAA;AAEjC,QAAA,MAAM,YAAY,6GAAyB,CAAA;AAE3C,QAAA,MAAM,UAAU,2GAAuB,CAAA;AAEvC,QAAA,MAAM,WAAW,4CAAwB,CAAA;AAEzC,QAAA,MAAM,YAAY,6JAahB,CAAA;AAMF,QAAA,MAAM,aAAa;;8EAoBlB,CAAA;AAED,UAAU,iBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAezC,QAAA,MAAM,YAAY,0FAgBhB,CAAA;AAOF,QAAA,MAAM,WAAW,2FAgBf,CAAA;AAeF,QAAA,MAAM,SAAS,oOAcb,CAAA;AAIF,QAAA,MAAM,WAAW,6GAGiE,CAAA;AAGlF,QAAA,MAAM,UAAU,mKASd,CAAA;AAGF,QAAA,MAAM,gBAAgB,6KAWpB,CAAA;AAKF,eAAO,MAAM,SAAS;;;;;;;;;;;CAgBZ,CAAA;AAEV,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,aAAa,GACd,CAAA"}
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/sheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,0DAA0D,CAAA;AAKjE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,QAAA,MAAM,KAAK,sCAAsB,CAAA;AAEjC,QAAA,MAAM,YAAY,6GAAyB,CAAA;AAE3C,QAAA,MAAM,UAAU,2GAAuB,CAAA;AAEvC,QAAA,MAAM,WAAW,4CAAwB,CAAA;AAEzC,QAAA,MAAM,YAAY,6JAahB,CAAA;AAMF,QAAA,MAAM,aAAa;;8EAqBlB,CAAA;AAED,UAAU,iBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAGzC;gFACgF;AAChF,eAAO,MAAM,wBAAwB,GAAI,GAAG,KAAK,SAUhD,CAAA;AAED,QAAA,MAAM,YAAY,0FAgBhB,CAAA;AAOF,QAAA,MAAM,WAAW,2FAgBf,CAAA;AAeF,QAAA,MAAM,SAAS;;;sFAcb,CAAA;AAIF,QAAA,MAAM,WAAW,6GAGiE,CAAA;AAGlF,QAAA,MAAM,UAAU,mKASd,CAAA;AAGF,QAAA,MAAM,gBAAgB,6KAWpB,CAAA;AAKF,eAAO,MAAM,SAAS;;;;;;;;;;;CAgBZ,CAAA;AAEV,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,aAAa,GACd,CAAA"}

package/dist/components/Sheet/sheet.js

@@ -7,6 +7,7 @@ import { cn } from "../../lib/utils.js";
 import { SurfaceFooter, SurfaceHeader } from "../../patterns/overlay-surface/overlay-surface.js";
 import { Button } from "../Button/button.js";
 import { ScrollArea } from "../ScrollArea/scroll-area.js";
+import { surfaceMotion } from "../../tokens/motion/overlay-motion.js";
 const Sheet = DialogPrimitive.Root;
 const SheetTrigger = DialogPrimitive.Trigger;
 const SheetClose = DialogPrimitive.Close;
@@ -26,8 +27,9 @@ SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const sheetVariants = cva(
   // 核心容器 — 無 padding(由 SheetBody / SheetHeader / SheetFooter 自理 padding,
   // 對齊 overlay-surface pattern + Dialog canonical)
-  // Animation canonical:300ms 雙向一致(D4 audit:500ms 太久 sluggish)+ motion-reduce 豁免
-  "fixed z-50 flex flex-col bg-surface-raised shadow-[var(--elevation-200)] transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300 motion-reduce:transition-none motion-reduce:data-[state=open]:duration-0 motion-reduce:data-[state=closed]:duration-0",
+  // Animation canonical:panel = surfaceMotion 250ms(--motion-duration-surface)雙向一致
+  // (D4 audit:500ms 太久 sluggish)+ motion-reduce 豁免
+  `fixed z-50 flex flex-col bg-surface-raised shadow-[var(--elevation-200)] transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out ${surfaceMotion}`,
   {
     variants: {
       side: {
@@ -140,6 +142,7 @@ export {
   SheetPortal,
   SheetTitle,
   SheetTrigger,
+  handleSheetOpenAutoFocus,
   sheetMeta,
   sheetVariants
 };

package/dist/components/Sheet/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","sources":["../../../src/components/Sheet/sheet.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 SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X as XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  SurfaceHeader,\n  SurfaceFooter,\n  type SurfaceHeaderProps,\n} from \"@/design-system/patterns/overlay-surface/overlay-surface\"\nimport { Button } from \"@/design-system/components/Button/button\"\nimport { ScrollArea } from \"@/design-system/components/ScrollArea/scroll-area\"\n\n/**\n * Sheet — **右側 Dialog primitive**(給消費者的 canonical)。\n *\n * ── 定位(2026-04-21 canonical)──\n * Sheet 給**消費者**用的唯一合法形式 = **右側開啟的 modal**(side=\"right\"),\n * 內部結構跟 `Dialog` 一致:`SheetHeader` / `SheetBody` / `SheetFooter`(Header / Footer 消費\n * `SurfaceHeader` / `SurfaceFooter` primitive;Body = `ScrollArea` + 內層 padding div,\n * padding token SSOT 在 `patterns/overlay-surface/`)。side=\"right\" 是 defaultVariants,消費者不傳 side。\n *\n * ── 其他 side(top / bottom / left)——**非消費者 API**,內部基建用 ──\n * top / bottom / left 變體保留給 DS 內部基建(例:Sidebar 在小尺寸視口時從 left 滑入)。\n * 消費者 code **禁止** 傳 `side=\"top\" | \"bottom\" | \"left\"` — 這些用途需 user 授權。\n *\n * ── 跟 Dialog 的差異 ──\n * - Dialog = 中央 modal,用於「明確決策 / 表單 / 確認」\n * - Sheet(side=\"right\")= 側滑 modal,用於「補充資訊 / 多欄位表單 / 編輯 flow」\n * - 兩者 API 結構 1:1 對應,差異只在 side / 動畫 / 初始寬度\n *\n * ── Header / Footer 消費 SurfaceXxx SSOT;Body 走 ScrollArea canonical ──\n * 避免 padding 漂移 — Dialog / Popover / Sheet / Coachmark 共用同一套 overlay-surface\n * padding token(px-loose / py-tight),改 overlay-surface.tsx 四者自動跟進;\n * SheetBody 同 DialogBody:ScrollArea + 內層 px-loose / pt-tight / pb-bottom(詳 SheetBody comment)。\n */\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    // motion-reduce:animate-none — prefers-reduced-motion 豁免,對齊 DialogOverlay canonical(dialog.tsx DialogOverlay 同 token,2026-07-05 P2 收乾)\n    className={cn(\n      \"fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\n// ── sheetVariants ─────────────────────────────────────────────────────────\n// side=\"right\" 給**消費者**。top/bottom/left 給 **DS 內部基建**用(如 Sidebar 在\n// narrow viewport 時切 side=\"left\")。消費者 code 不傳 side,用 default。\nconst sheetVariants = cva(\n  // 核心容器 — 無 padding(由 SheetBody / SheetHeader / SheetFooter 自理 padding,\n  // 對齊 overlay-surface pattern + Dialog canonical)\n  // Animation canonical:300ms 雙向一致(D4 audit:500ms 太久 sluggish)+ motion-reduce 豁免\n  \"fixed z-50 flex flex-col bg-surface-raised shadow-[var(--elevation-200)] transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300 motion-reduce:transition-none motion-reduce:data-[state=open]:duration-0 motion-reduce:data-[state=closed]:duration-0\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b border-divider data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t border-divider data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r border-divider data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l border-divider data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\n// AutoFocus canonical(對齊 Dialog / Material / Polaris)— 見 dialog.tsx handleOpenAutoFocus 註解\nconst handleSheetOpenAutoFocus = (e: Event) => {\n  e.preventDefault()\n  const content = e.currentTarget as HTMLElement\n  const firstBodyTarget = content.querySelector<HTMLElement>(\n    '[data-sheet-body] input:not([disabled]),[data-sheet-body] textarea:not([disabled]),[data-sheet-body] select:not([disabled]),[data-sheet-body] button:not([disabled]):not([data-dismiss])'\n  )\n  const firstFooterButton = content.querySelector<HTMLElement>(\n    '[data-sheet-footer] button:not([disabled]):not([data-dismiss])'\n  )\n  ;(firstBodyTarget ?? firstFooterButton ?? content).focus({ preventScroll: true })\n}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      onOpenAutoFocus={handleSheetOpenAutoFocus}\n      // Sheet 不自設 density,繼承 page 層級的 `html[data-density]`(2026-04-21 canonical 定案)\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      {children}\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\n// ── SheetHeader:SurfaceHeader + Close X(對齊 DialogHeader canonical)──────────\n// 2026-05-18 audit gap fix:type 對齊 SurfaceHeaderProps,withTabs / lockDensity expose\n// 給 consumer(per header-canonical.spec.md W1 跨 6 consumer 同契約)。Spread 早 forward\n// 過去,只是 TS type 沒 expose 導致 consumer 不能 type-safe 用 `<SheetHeader withTabs>`。\nconst SheetHeader = React.forwardRef<\n  HTMLDivElement,\n  SurfaceHeaderProps\n>(({ className, children, ...props }, ref) => (\n  // 2026-05-18:className 不再硬加 justify-between(同 DialogHeader 邏輯,避 column mode 破裂)。\n  <SurfaceHeader\n    ref={ref}\n    className={className}\n    {...props}\n  >\n    <div className=\"flex-1 min-w-0\">{children}</div>\n    {/* Dismiss X = native sm,SurfaceHeader 負 my trick 讓 layout 佔位 24 → chrome-header-height */}\n    <SheetPrimitive.Close asChild>\n      <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" />\n    </SheetPrimitive.Close>\n  </SurfaceHeader>\n))\nSheetHeader.displayName = \"SheetHeader\"\n\n// ── SheetBody:flex-1 ScrollArea + chrome padding(對齊 DialogBody + ScrollArea canonical) ──\n// 捲軸必用 ScrollArea(跨 OS 一致、不吃寬度)— 不自寫 overflow-y-auto。\n// padding 搬進 viewport inner div:px-loose / pt-tight / pb-bottom。\n// data-sheet-body:讓 SheetContent onOpenAutoFocus 找得到 body 第一個互動元素\n//\n// ── List-as-region 場景(menu / nav / settings list)──\n// 不再提供 `flush` variant(2026-05-01 移除)。canonical = consumer 用 className override:\n// `<SheetBody className=\"!px-0 !pt-0 !pb-0\"><div className=\"py-2\">{items}</div></SheetBody>`\n// 詳 DialogBody comment + `tokens/layoutSpace/layoutSpace.spec.md`「List-as-region in overlay body」\n// `className` forward 到 **inner content div**(非外層 ScrollArea wrapper)——\n// consumer `<SheetBody className=\"flex flex-col gap-X\">` 期望作用於 children 排列;\n// 套在 ScrollArea 上會 0 效果(children 住 inner div),曾造成 Sheet form field 完全貼邊。\nconst SheetBody = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ScrollArea>\n>(({ className, children, ...props }, ref) => (\n  <ScrollArea ref={ref} data-sheet-body className=\"flex-1 min-h-0\" {...props}>\n    <div\n      className={cn(\n        \"px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)] pb-[var(--layout-space-bottom)]\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  </ScrollArea>\n))\nSheetBody.displayName = \"SheetBody\"\n\n// ── SheetFooter:SurfaceFooter wrap 加 data-sheet-footer(autoFocus fallback target)──\nconst SheetFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ ...props }, ref) => <SurfaceFooter ref={ref} data-sheet-footer {...props} />)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-body-lg font-medium truncate\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    // title → description 間距 canonical:SheetTitle body-lg(16)+ desc body(14)→ reading-lg token\n    // (label tier 決定;對齊 Dialog canonical。Tailwind preflight reset h2/p margin=0 → 必顯式 mt)\n    className={cn(\"mt-[var(--item-gap-label-desc-reading-lg)] text-body text-fg-secondary\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\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 sheetMeta = {\n  component: 'Sheet',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  // 2026-07-04 audit 對齊:Sheet 本身無 disabled state(surface container,spec 邊界案例明文;對齊 popover/dialog meta pattern)\n  states: ['default'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['text-fg-secondary', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetBody,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n  sheetVariants,\n}\n"],"names":["SheetPrimitive","XIcon"],"mappings":"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"}
+{"version":3,"file":"sheet.js","sources":["../../../src/components/Sheet/sheet.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 SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X as XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  SurfaceHeader,\n  SurfaceFooter,\n  type SurfaceHeaderProps,\n} from \"@/design-system/patterns/overlay-surface/overlay-surface\"\nimport { Button } from \"@/design-system/components/Button/button\"\nimport { ScrollArea } from \"@/design-system/components/ScrollArea/scroll-area\"\nimport { surfaceMotion } from \"@/design-system/tokens/motion/overlay-motion\"\n\n/**\n * Sheet — **右側 Dialog primitive**(給消費者的 canonical)。\n *\n * ── 定位(2026-04-21 canonical)──\n * Sheet 給**消費者**用的唯一合法形式 = **右側開啟的 modal**(side=\"right\"),\n * 內部結構跟 `Dialog` 一致:`SheetHeader` / `SheetBody` / `SheetFooter`(Header / Footer 消費\n * `SurfaceHeader` / `SurfaceFooter` primitive;Body = `ScrollArea` + 內層 padding div,\n * padding token SSOT 在 `patterns/overlay-surface/`)。side=\"right\" 是 defaultVariants,消費者不傳 side。\n *\n * ── 其他 side(top / bottom / left)——**非消費者 API**,內部基建用 ──\n * top / bottom / left 變體保留給 DS 內部基建(例:Sidebar 在小尺寸視口時從 left 滑入)。\n * 消費者 code **禁止** 傳 `side=\"top\" | \"bottom\" | \"left\"` — 這些用途需 user 授權。\n *\n * ── 跟 Dialog 的差異 ──\n * - Dialog = 中央 modal,用於「明確決策 / 表單 / 確認」\n * - Sheet(side=\"right\")= 側滑 modal,用於「補充資訊 / 多欄位表單 / 編輯 flow」\n * - 兩者 API 結構 1:1 對應,差異只在 side / 動畫 / 初始寬度\n *\n * ── Header / Footer 消費 SurfaceXxx SSOT;Body 走 ScrollArea canonical ──\n * 避免 padding 漂移 — Dialog / Popover / Sheet / Coachmark 共用同一套 overlay-surface\n * padding token(px-loose / py-tight),改 overlay-surface.tsx 四者自動跟進;\n * SheetBody 同 DialogBody:ScrollArea + 內層 px-loose / pt-tight / pb-bottom(詳 SheetBody comment)。\n */\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    // motion-reduce:animate-none — prefers-reduced-motion 豁免,對齊 DialogOverlay canonical(dialog.tsx DialogOverlay 同 token,2026-07-05 P2 收乾)\n    className={cn(\n      \"fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\n// ── sheetVariants ─────────────────────────────────────────────────────────\n// side=\"right\" 給**消費者**。top/bottom/left 給 **DS 內部基建**用(如 Sidebar 在\n// narrow viewport 時切 side=\"left\")。消費者 code 不傳 side,用 default。\nconst sheetVariants = cva(\n  // 核心容器 — 無 padding(由 SheetBody / SheetHeader / SheetFooter 自理 padding,\n  // 對齊 overlay-surface pattern + Dialog canonical)\n  // Animation canonical:panel = surfaceMotion 250ms(--motion-duration-surface)雙向一致\n  // (D4 audit:500ms 太久 sluggish)+ motion-reduce 豁免\n  `fixed z-50 flex flex-col bg-surface-raised shadow-[var(--elevation-200)] transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out ${surfaceMotion}`,\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b border-divider data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t border-divider data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r border-divider data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l border-divider data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\n// AutoFocus canonical(對齊 Dialog / Material / Polaris)— 見 dialog.tsx handleOpenAutoFocus 註解\n/** @internal DS 預設 open-focus(首個 body 互動元素)。consumer 傳自訂 onOpenAutoFocus 會覆寫\n *  本預設({...props} 在後),需自訂前置行為(如 AppShellAside opener snapshot)時 import 接力呼叫。 */\nexport const handleSheetOpenAutoFocus = (e: Event) => {\n  e.preventDefault()\n  const content = e.currentTarget as HTMLElement\n  const firstBodyTarget = content.querySelector<HTMLElement>(\n    '[data-sheet-body] input:not([disabled]),[data-sheet-body] textarea:not([disabled]),[data-sheet-body] select:not([disabled]),[data-sheet-body] button:not([disabled]):not([data-dismiss])'\n  )\n  const firstFooterButton = content.querySelector<HTMLElement>(\n    '[data-sheet-footer] button:not([disabled]):not([data-dismiss])'\n  )\n  ;(firstBodyTarget ?? firstFooterButton ?? content).focus({ preventScroll: true })\n}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      onOpenAutoFocus={handleSheetOpenAutoFocus}\n      // Sheet 不自設 density,繼承 page 層級的 `html[data-density]`(2026-04-21 canonical 定案)\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      {children}\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\n// ── SheetHeader:SurfaceHeader + Close X(對齊 DialogHeader canonical)──────────\n// 2026-05-18 audit gap fix:type 對齊 SurfaceHeaderProps,withTabs / tabsSlot expose\n// 給 consumer(per header-canonical.spec.md W1 跨 6 consumer 同契約)。Spread 早 forward\n// 過去,只是 TS type 沒 expose 導致 consumer 不能 type-safe 用 `<SheetHeader withTabs>`。\nconst SheetHeader = React.forwardRef<\n  HTMLDivElement,\n  SurfaceHeaderProps\n>(({ className, children, ...props }, ref) => (\n  // 2026-05-18:className 不再硬加 justify-between(同 DialogHeader 邏輯,避 column mode 破裂)。\n  <SurfaceHeader\n    ref={ref}\n    className={className}\n    {...props}\n  >\n    <div className=\"flex-1 min-w-0\">{children}</div>\n    {/* Dismiss X = native sm,SurfaceHeader 負 my trick 讓 layout 佔位 24 → chrome-header-height */}\n    <SheetPrimitive.Close asChild>\n      <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" />\n    </SheetPrimitive.Close>\n  </SurfaceHeader>\n))\nSheetHeader.displayName = \"SheetHeader\"\n\n// ── SheetBody:flex-1 ScrollArea + chrome padding(對齊 DialogBody + ScrollArea canonical) ──\n// 捲軸必用 ScrollArea(跨 OS 一致、不吃寬度)— 不自寫 overflow-y-auto。\n// padding 搬進 viewport inner div:px-loose / pt-tight / pb-bottom。\n// data-sheet-body:讓 SheetContent onOpenAutoFocus 找得到 body 第一個互動元素\n//\n// ── List-as-region 場景(menu / nav / settings list)──\n// 不再提供 `flush` variant(2026-05-01 移除)。canonical = consumer 用 className override:\n// `<SheetBody className=\"!px-0 !pt-0 !pb-0\"><div className=\"py-2\">{items}</div></SheetBody>`  ← @tabs-content-gap-ok: JSDoc 文件範例(list-as-region canonical,非 tabs !pt-0 hack;對齊 dialog.tsx 同款 marker)\n// 詳 DialogBody comment + `tokens/layoutSpace/layoutSpace.spec.md`「List-as-region in overlay body」\n// `className` forward 到 **inner content div**(非外層 ScrollArea wrapper)——\n// consumer `<SheetBody className=\"flex flex-col gap-X\">` 期望作用於 children 排列;\n// 套在 ScrollArea 上會 0 效果(children 住 inner div),曾造成 Sheet form field 完全貼邊。\nconst SheetBody = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ScrollArea>\n>(({ className, children, ...props }, ref) => (\n  <ScrollArea ref={ref} data-sheet-body className=\"flex-1 min-h-0\" {...props}>\n    <div\n      className={cn(\n        \"px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)] pb-[var(--layout-space-bottom)]\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  </ScrollArea>\n))\nSheetBody.displayName = \"SheetBody\"\n\n// ── SheetFooter:SurfaceFooter wrap 加 data-sheet-footer(autoFocus fallback target)──\nconst SheetFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ ...props }, ref) => <SurfaceFooter ref={ref} data-sheet-footer {...props} />)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-body-lg font-medium truncate\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    // title → description 間距 canonical:SheetTitle body-lg(16)+ desc body(14)→ reading-lg token\n    // (label tier 決定;對齊 Dialog canonical。Tailwind preflight reset h2/p margin=0 → 必顯式 mt)\n    className={cn(\"mt-[var(--item-gap-label-desc-reading-lg)] text-body text-fg-secondary\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\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 sheetMeta = {\n  component: 'Sheet',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  // 2026-07-04 audit 對齊:Sheet 本身無 disabled state(surface container,spec 邊界案例明文;對齊 popover/dialog meta pattern)\n  states: ['default'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['text-fg-secondary', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetBody,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n  sheetVariants,\n}\n"],"names":["SheetPrimitive","XIcon"],"mappings":"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"}

package/dist/components/Sidebar/sidebar.d.ts

@@ -61,6 +61,10 @@ declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttribute
      * 從該值起算(`top: viewportInsetTop / height: calc(100svh - viewportInsetTop)`),
      * 讓 global header 不被覆蓋(AppShell primary-header mode 必傳)。
      * 對齊 Mantine `layout="default"` navbar 高度扣 header 慣例。
+     *
+     * ⚠️ 作用範圍:**僅桌機 `offcanvas` / `icon` 分支**套用 insetStyle。
+     * `collapsible="none"`(於 isMobile 前提前 return 固定 div)與 mobile Sheet
+     * 兩分支不套此 inset —— 該兩模式下 global header 仍會被覆蓋(未接線)。
      */
     viewportInsetTop?: string;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -77,13 +81,14 @@ declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.Detaile
  * SidebarGroup
  *
  * 預設是非互動的 plain group(div)。當 `collapsible` = true 時自動切換成 Radix
- * Collapsible:SidebarGroupLabel 變 trigger、SidebarGroupContent 變 Content、
- * 自動渲染 chevron 於 label 尾端、chevron 依 open state 旋轉。
+ * Collapsible:SidebarGroupLabel 尾端自動渲染 chevron button 作為 `Collapsible.Trigger`
+ * (承載 aria-expanded / data-state,依 open state 旋轉),SidebarGroupContent 變 Content;
+ * label 本身維持 `role="presentation"` div,不升格為 button。
  *
  * ── API 設計決策 ──
  * 為什麼是 group 層級的 prop 而不是 label 層級?因為「group 是否可收合」是結構層
- * 的決定,影響 group 所有子 primitive 的渲染模式(label 變 button、content 變
- * animated container)。把 prop 放在 label 上會讓 content 不知道自己該不該被包,
+ * 的決定,影響 group 子 primitive 的渲染模式(label 尾端 chevron 變 trigger button、
+ * content 變 animated container)。把 prop 放在 label 上會讓 content 不知道自己該不該被包,
  * 形成跨元件的 prop drilling。放在 group 上用 context 傳遞是 React 的標準做法。
  */
 declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {

package/dist/components/Sidebar/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/sidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/components/Sidebar/sidebar.js

@@ -59,14 +59,11 @@ const SidebarProvider = React.forwardRef(
     const setOpen = React.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
-        if (setOpenProp) {
-          setOpenProp(openState);
-        } else {
-          _setOpen(openState);
-        }
+        if (openProp === void 0) _setOpen(openState);
+        setOpenProp == null ? void 0 : setOpenProp(openState);
         document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
       },
-      [setOpenProp, open]
+      [openProp, setOpenProp, open]
     );
     const toggleSidebar = React.useCallback(() => {
       return isMobile ? setOpenMobile((o) => !o) : setOpen((o) => !o);
@@ -310,10 +307,11 @@ const SidebarHeader = React.forwardRef(({ className, withTabs, tabsSlot, ...prop
           //                                JS 端透過 WorkspaceBrand RowSizeProvider value="md"
           //                                + AVATAR_SIZE.inline.md spec-coupled 共識 sync。
           //
-          // Numerical equivalence to v13 `loose-4` 公式(verified):
-          //   md density: (48-24)/2 = 12 = loose-4 = 12 ✓ identical
-          //   lg density: (64-24)/2 = 20 = loose-4 = 20 ✓ identical
-          // → v14 upgrade 純 SSOT chain robustness,0 視覺改變。
+          // Collapsed pl 幾何值(rail-centered,--sidebar-width-icon = 2*loose + menu-icon):
+          //   md density: (48-24)/2 = 12  ·  lg density: (68-24)/2 = 22
+          //   (lg width = 2×24+20 = 68,非 stale 64;avatar-size = 24 both densities)
+          // 註:已撤回的 v13 `loose-4` 近似在 lg 給 20,與新 rail-幾何精確值 22 不同 —
+          //     v14 以 SSOT chain 公式取代該近似,md 兩者恰好都是 12。
           "group-data-[collapsible=icon]:!pl-[calc((var(--sidebar-width-icon)-var(--chrome-header-avatar-size))/2)]",
           "group-data-[collapsible=icon]:!pr-0",
           "transition-[padding] duration-200 ease-linear motion-reduce:duration-0",