@cakejp/design-system 0.22.1 → 0.24.0

package/dist/components/foundations/sonner.js

@@ -1,34 +1,34 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
-import { Loader2Icon as t, OctagonXIcon as i, TriangleAlertIcon as o, InfoIcon as n, CircleCheckIcon as s } from "lucide-react";
-import { useTheme as v } from "next-themes";
-import { Toaster as c } from "sonner";
-const g = ({ ...a }) => {
-  const { theme: e = "system" } = v();
-  return /* @__PURE__ */ r(
-    c,
+import { jsx as a } from "react/jsx-runtime";
+import { Loader2Icon as t, OctagonXIcon as i, TriangleAlertIcon as o, InfoIcon as s, CircleCheckIcon as n } from "lucide-react";
+import { useTheme as c } from "next-themes";
+import { toast as v, Toaster as m } from "sonner";
+const g = ({ ...r }) => {
+  const { theme: e = "system" } = c();
+  return /* @__PURE__ */ a(
+    m,
     {
       theme: e,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ r(s, { className: "size-4 text-[var(--Text-Success)]" }),
-        info: /* @__PURE__ */ r(n, { className: "size-4 text-[var(--Primitive-Sea-600)]" }),
-        warning: /* @__PURE__ */ r(o, { className: "size-4 text-[var(--Text-Warning)]" }),
-        error: /* @__PURE__ */ r(i, { className: "size-4 text-[var(--Primitive-Sun-800)]" }),
+        success: /* @__PURE__ */ a(n, { className: "size-4 text-[var(--Text-Success)]" }),
+        info: /* @__PURE__ */ a(s, { className: "size-4 text-[var(--Primitive-Sea-600)]" }),
+        warning: /* @__PURE__ */ a(o, { className: "size-4 text-[var(--Text-Warning)]" }),
+        error: /* @__PURE__ */ a(i, { className: "size-4 text-[var(--Primitive-Sun-800)]" }),
         // 動きを減らす設定では回転を止める（--Motion-* の一括制御は animate-spin に効かない）
-        loading: /* @__PURE__ */ r(t, { className: "size-4 animate-spin motion-reduce:animate-none text-[var(--Text-Medium-Emphasis)]" })
+        loading: /* @__PURE__ */ a(t, { className: "size-4 animate-spin motion-reduce:animate-none text-[var(--Text-Medium-Emphasis)]" })
       },
       toastOptions: {
         classNames: {
           toast: "!mx-auto",
           description: "!text-[var(--Text-Medium-Emphasis)]",
           actionButton: "!bg-[var(--Brand-Cake-Orange)] !text-[var(--Text-on-Inverse)] !typo-label-sm !rounded-lg !px-4 !py-2 !h-8 hover:!bg-[var(--Hover-Primary-Button)]",
-          cancelButton: "!bg-[var(--Surface-Tertiary)] !text-[var(--Text-High-Emphasis)] !typo-label-sm !rounded-lg !px-4 !py-2 !h-8",
+          cancelButton: "!bg-[var(--Surface-Neutral-Tertiary)] !text-[var(--Text-High-Emphasis)] !typo-label-sm !rounded-lg !px-4 !py-2 !h-8",
           // 状態トースト（success/error/warning/info）は背景を primitive の明色で固定しているため、
           // 中の description / cancel もモード反転しない primitive に固定する。
           // semantic（Text-Medium-Emphasis 等）のままだとダークモードで白系に反転し、
           // 明色背景の上で文字が不可視になる（デフォルトトーストは背景が反転するので semantic のままで正しい）
-          success: "!bg-[var(--Primitive-Forest-50)] !border-[var(--Primitive-Forest-200)] !text-[var(--Text-Success)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
+          success: "!bg-[var(--Surface-Success-Light)] !border-[var(--Border-Success)] !text-[var(--Text-Success)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
           error: "!bg-[var(--Surface-Caution-Light)] !border-[var(--Border-Caution)] !text-[var(--Primitive-Sun-800)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
           warning: "!bg-[var(--Surface-Warning)] !border-[var(--Primitive-Wood-200)] !text-[var(--Text-Warning)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
           info: "!bg-[var(--Primitive-Sea-50)] !border-[var(--Primitive-Sea-200)] !text-[var(--Primitive-Sea-600)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]"
@@ -42,10 +42,11 @@ const g = ({ ...a }) => {
       },
       position: "bottom-center",
       containerAriaLabel: "通知",
-      ...a
+      ...r
     }
   );
-};
+}, p = v;
 export {
-  g as Toaster
+  g as Toaster,
+  p as toast
 };

package/dist/components/foundations/switch.js

@@ -1,16 +1,17 @@
+"use client";
 import { jsx as e } from "react/jsx-runtime";
 import "react";
 import { Switch as o } from "radix-ui";
 import { Check as n } from "lucide-react";
 import { cn as a } from "../../lib/utils.js";
 import { FOCUS_RING_ONLY as d } from "../../lib/focus-ring.js";
-import { resolveFieldAria as u, useFieldLabelling as m } from "../../lib/field-labelling.js";
+import { resolveFieldAria as u, useFieldLabelling as l } from "../../lib/field-labelling.js";
 function v({
   className: s,
   size: r = "default",
   ...i
 }) {
-  const t = r === "default", c = u(i, m());
+  const t = r === "default", c = u(i, l());
   return /* @__PURE__ */ e(
     o.Root,
     {

package/dist/components/foundations/tabs.js

@@ -4,13 +4,13 @@ import { cva as l } from "class-variance-authority";
 import { Tabs as i } from "radix-ui";
 import { cn as s } from "../../lib/utils.js";
 import { FOCUS_RING as d } from "../../lib/focus-ring.js";
-const b = "data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-start data-[orientation=vertical]:gap-4", g = "data-[orientation=vertical]:w-auto data-[orientation=vertical]:max-w-[50%] data-[orientation=vertical]:shrink-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", c = [
+const b = "data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-start data-[orientation=vertical]:gap-4", g = "data-[orientation=vertical]:w-auto data-[orientation=vertical]:max-w-[50%] data-[orientation=vertical]:shrink-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", u = [
   "data-[orientation=vertical]:justify-start data-[orientation=vertical]:whitespace-normal data-[orientation=vertical]:text-left",
   // underbar: 均等割り（flex-1）と下線をやめ、パネル側（右）の線で選択中を示す。高さは折り返しに合わせて伸ばす
   "group-data-[variant=underbar]/tabs-list:data-[orientation=vertical]:h-auto group-data-[variant=underbar]/tabs-list:data-[orientation=vertical]:min-h-12 group-data-[variant=underbar]/tabs-list:data-[orientation=vertical]:flex-none group-data-[variant=underbar]/tabs-list:data-[orientation=vertical]:border-b-0 group-data-[variant=underbar]/tabs-list:data-[orientation=vertical]:border-r-2 group-data-[variant=underbar]/tabs-list:data-[orientation=vertical]:px-4",
   // segment: 高さを折り返しに合わせて伸ばす（1 行なら従来の 37px）
   "group-data-[variant=segment]/tabs-list:data-[orientation=vertical]:h-auto group-data-[variant=segment]/tabs-list:data-[orientation=vertical]:min-h-[37px] group-data-[variant=segment]/tabs-list:data-[orientation=vertical]:py-2"
-].join(" "), u = "data-[orientation=vertical]:min-w-0", p = [
+].join(" "), c = "data-[orientation=vertical]:min-w-0", p = [
   "forced-colors:group-data-[variant=segment]/tabs-list:data-[state=active]:bg-[Highlight] forced-colors:group-data-[variant=segment]/tabs-list:data-[state=active]:text-[HighlightText]",
   "forced-colors:group-data-[variant=underbar]/tabs-list:data-[state=inactive]:border-[Canvas] forced-colors:group-data-[variant=underbar]/tabs-list:data-[state=active]:border-[Highlight]"
 ].join(" "), v = "forced-colors:group-data-[scrollable]/tabs-list:group-data-[state=inactive]/trigger:border-[Canvas] forced-colors:group-data-[state=active]/trigger:border-[Highlight]";
@@ -34,7 +34,7 @@ const m = l(
       variant: {
         underbar: "w-full bg-transparent overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
         // 縦向きでは縦長の地に rounded-full だと上下が半円になり、先頭・末尾のタブの角がはみ出すため角丸を 2xl に抑える
-        segment: "w-fit rounded-full bg-[var(--Surface-Tertiary)] p-2 data-[orientation=vertical]:rounded-2xl"
+        segment: "w-fit rounded-full bg-[var(--Surface-Neutral-Tertiary)] p-2 data-[orientation=vertical]:rounded-2xl"
       },
       scrollable: {
         true: "gap-4"
@@ -106,7 +106,7 @@ function C({
         "group-data-[size=sm]/tabs-list:!min-w-0 group-data-[size=sm]/tabs-list:!px-2",
         // Segment active
         "group-data-[variant=segment]/tabs-list:data-[state=active]:bg-[var(--Surface-Primary)] group-data-[variant=segment]/tabs-list:data-[state=active]:shadow-[0px_4px_6px_-4px_rgba(24,39,75,0.12),0px_8px_8px_-4px_rgba(24,39,75,0.08)]",
-        c,
+        u,
         p,
         t
       ),
@@ -123,7 +123,7 @@ function L({
     i.Content,
     {
       "data-slot": "tabs-content",
-      className: s("flex-1 outline-none", d, u, t),
+      className: s("flex-1 outline-none", d, c, t),
       ...a
     }
   );

package/dist/components/foundations/textarea.js

@@ -1,9 +1,10 @@
+"use client";
 import { jsx as n, jsxs as s } from "react/jsx-runtime";
 import "react";
 import { cn as c } from "../../lib/utils.js";
 import { useValueLength as h } from "../../lib/use-value-length.js";
 import { FOCUS_RING as g } from "../../lib/focus-ring.js";
-import { resolveNativeFieldAria as y, useFieldLabelling as w } from "../../lib/field-labelling.js";
+import { resolveNativeFieldAria as y, useFieldLabelling as N } from "../../lib/field-labelling.js";
 function D({
   className: m,
   showCount: r,
@@ -11,14 +12,14 @@ function D({
   value: a,
   defaultValue: t,
   onChange: o,
-  ref: b,
+  ref: u,
   ...i
 }) {
-  const u = y(i, w()), { ref: f, length: d, syncFromDom: p } = h({
+  const b = y(i, N()), { ref: f, length: d, syncFromDom: p } = h({
     enabled: r === !0,
     value: a,
     defaultValue: t,
-    forwardedRef: b
+    forwardedRef: u
   }), l = /* @__PURE__ */ n(
     "textarea",
     {
@@ -31,13 +32,13 @@ function D({
         p(), o?.(v);
       } : o,
       className: c(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-[var(--Border-High-Emphasis)] bg-transparent px-3 py-2 typo-body-lg md:typo-body-md transition-[color,box-shadow,border-color] outline-none placeholder:text-muted-foreground hover:border-[var(--Focus-High-Emphasis)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[var(--Border-Low-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:placeholder:text-[var(--Text-Disable)] aria-invalid:border-[var(--Border-Caution)] aria-invalid:ring-[var(--Border-Caution)]/20",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-[var(--Border-High-Emphasis)] bg-transparent px-3 py-2 typo-body-lg md:typo-body-md transition-[color,box-shadow,border-color] outline-none placeholder:text-muted-foreground hover:border-[var(--Focus-High-Emphasis)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[var(--Border-Low-Emphasis)] disabled:bg-[var(--Surface-Neutral-Secondary)] disabled:text-[var(--Text-Disable)] disabled:placeholder:text-[var(--Text-Disable)] aria-invalid:border-[var(--Border-Caution)] aria-invalid:ring-[var(--Border-Caution)]/20",
         // フォーカス意匠は DS 共通（FOCUS_RING）。
         g,
         m
       ),
       ...i,
-      ...u
+      ...b
     }
   );
   if (!r) return l;

package/dist/components/foundations/toggle-group.js

@@ -6,7 +6,7 @@ import { ToggleGroup as c } from "radix-ui";
 import { cn as d } from "../../lib/utils.js";
 import { FORCED_COLORS_FOCUS_INSET as u } from "../../lib/focus-ring.js";
 const p = l(
-  "flex items-center gap-1.5 py-1.5 overflow-x-auto scrollbar-none",
+  "flex items-center gap-1.5 py-1.5 overflow-x-auto scrollbar-hide",
   {
     variants: {
       /** グループ全体の幅 */
@@ -40,15 +40,15 @@ const p = l(
     variants: {
       variant: {
         default: [
-          "bg-[var(--Surface-Tertiary)] text-[var(--Text-Medium-Emphasis)]",
-          "hover:bg-[var(--Surface-Tertiary)]/80",
+          "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-Medium-Emphasis)]",
+          "hover:bg-[var(--Surface-Neutral-Tertiary)]/80",
           "data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=on]:text-[var(--Text-Accent-Primary)] data-[state=on]:font-bold",
-          "dark:bg-[var(--Surface-Secondary)] dark:text-[var(--Text-Low-Emphasis)]",
+          "dark:bg-[var(--Surface-Neutral-Secondary)] dark:text-[var(--Text-Low-Emphasis)]",
           "dark:data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] dark:data-[state=on]:text-[var(--Text-Accent-Primary)]"
         ].join(" "),
         outline: [
           "border border-[var(--Border-Control,var(--Border-Low-Emphasis))] bg-transparent text-[var(--Text-Low-Emphasis)]",
-          "hover:bg-[var(--Surface-Tertiary)]",
+          "hover:bg-[var(--Surface-Neutral-Tertiary)]",
           "data-[state=on]:border-[var(--Text-High-Emphasis)] data-[state=on]:bg-transparent data-[state=on]:text-[var(--Text-High-Emphasis)]"
         ].join(" ")
       },

package/dist/components/primitives/admin-header.js

@@ -1,7 +1,7 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import "react";
 import s from "iconsax-reactjs/dist/esm/HamburgerMenu.js";
-function l({ brand: r, onMenuClick: a, actions: t }) {
+function n({ brand: r, onMenuClick: a, actions: t }) {
   return /* @__PURE__ */ i(
     "header",
     {
@@ -13,7 +13,7 @@ function l({ brand: r, onMenuClick: a, actions: t }) {
             "button",
             {
               type: "button",
-              className: "flex items-center justify-center size-10 shrink-0 rounded-lg hover:bg-[var(--Surface-Secondary)] @md:hidden",
+              className: "flex items-center justify-center size-10 shrink-0 rounded-lg hover:bg-[var(--Surface-Neutral-Secondary)] @md:hidden",
               "aria-label": "メニュー",
               onClick: a,
               children: /* @__PURE__ */ e(s, { size: 20, className: "text-[var(--Text-High-Emphasis)]" })
@@ -27,5 +27,5 @@ function l({ brand: r, onMenuClick: a, actions: t }) {
   );
 }
 export {
-  l as AdminHeader
+  n as AdminHeader
 };

package/dist/components/primitives/admin-side-nav.js

@@ -1,58 +1,63 @@
 "use client";
-import { jsxs as f, Fragment as S, jsx as n } from "react/jsx-runtime";
+import { jsxs as h, Fragment as S, jsx as n } from "react/jsx-runtime";
 import * as t from "react";
-import B from "iconsax-reactjs/dist/esm/ArrowDown2.js";
-import { XIcon as G } from "lucide-react";
-import { DropdownMenu as q, DropdownMenuTrigger as Z, DropdownMenuContent as U, DropdownMenuItem as W } from "../foundations/dropdown-menu.js";
-import { FOCUS_RING as X } from "../../lib/focus-ring.js";
+import G from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import { XIcon as K } from "lucide-react";
+import { DropdownMenu as q, DropdownMenuTrigger as Z, DropdownMenuContent as _, DropdownMenuItem as U } from "../foundations/dropdown-menu.js";
+import { FOCUS_RING as W } from "../../lib/focus-ring.js";
 import { cn as F } from "../../lib/utils.js";
-function H(v, w) {
-  return typeof v == "function" ? v(w) : v;
+function H(u, p) {
+  return typeof u == "function" ? u(p) : u;
 }
-function K({
-  items: v,
-  activeKey: w,
+function L(u) {
+  if (u.button !== 0 || u.metaKey || u.ctrlKey || u.shiftKey || u.altKey) return !1;
+  const p = u.currentTarget.getAttribute("target");
+  return !(p && p !== "_self");
+}
+function ee({
+  items: u,
+  activeKey: p,
   drawerTitle: z,
-  open: L = !1,
-  onOpenChange: R,
+  open: I = !1,
+  onOpenChange: N,
   ariaLabel: E = "管理メニュー",
-  linkComponent: I
+  linkComponent: j
 }) {
-  const N = I ?? "a", [P, M] = t.useState(null), c = t.useRef(null), y = t.useRef(/* @__PURE__ */ new Set()), k = t.useRef(null), s = t.useRef(null), b = t.useRef(null), a = t.useRef(null), g = t.useRef(/* @__PURE__ */ new Map()), T = t.useRef(/* @__PURE__ */ new Map()), d = t.useRef(null), p = t.useRef(null), D = t.useRef(null), o = t.useCallback(() => {
-    p.current !== null && (clearTimeout(p.current), p.current = null);
-  }, []), i = t.useCallback(() => {
-    d.current !== null && (clearTimeout(d.current), d.current = null);
-  }, []), j = t.useCallback(
+  const R = j ?? "a", [P, M] = t.useState(null), s = t.useRef(null), g = t.useRef(/* @__PURE__ */ new Set()), b = t.useRef(null), a = t.useRef(null), m = t.useRef(null), o = t.useRef(null), x = t.useRef(/* @__PURE__ */ new Map()), T = t.useRef(/* @__PURE__ */ new Map()), y = t.useRef(null), v = t.useRef(null), D = t.useRef(null), i = t.useCallback(() => {
+    v.current !== null && (clearTimeout(v.current), v.current = null);
+  }, []), f = t.useCallback(() => {
+    y.current !== null && (clearTimeout(y.current), y.current = null);
+  }, []), B = t.useCallback(
     (e, l) => {
-      l !== "touch" && (i(), o(), d.current = setTimeout(() => {
-        s.current !== null && s.current !== e && (s.current = null, g.current.get(e)?.focus({ preventScroll: !0 })), c.current = e, y.current.add(e), M(e), d.current = null;
+      l !== "touch" && (f(), i(), y.current = setTimeout(() => {
+        a.current !== null && a.current !== e && (a.current = null, x.current.get(e)?.focus({ preventScroll: !0 })), s.current = e, g.current.add(e), M(e), y.current = null;
       }, 80));
     },
-    [o, i]
+    [i, f]
   ), A = t.useCallback(
     (e) => {
-      i(), o(), p.current = setTimeout(() => {
-        M((l) => l === e ? null : l), p.current = null;
+      f(), i(), v.current = setTimeout(() => {
+        M((l) => l === e ? null : l), v.current = null;
       }, 120);
     },
-    [o, i]
+    [i, f]
   ), O = t.useCallback(() => {
-    i(), o(), c.current = null, y.current.clear(), k.current = null, s.current = null, b.current = null, a.current = null, M(null);
-  }, [o, i]);
+    f(), i(), s.current = null, g.current.clear(), b.current = null, a.current = null, m.current = null, o.current = null, M(null);
+  }, [i, f]);
   return t.useEffect(
     () => () => {
-      d.current !== null && clearTimeout(d.current), p.current !== null && clearTimeout(p.current), k.current = null, s.current = null, b.current = null, a.current = null, g.current.clear(), T.current.clear();
+      y.current !== null && clearTimeout(y.current), v.current !== null && clearTimeout(v.current), b.current = null, a.current = null, m.current = null, o.current = null, x.current.clear(), T.current.clear();
     },
     []
   ), t.useEffect(() => {
     const e = D.current;
     if (!e || typeof ResizeObserver > "u") return;
     const l = () => {
-      const u = e.getBoundingClientRect();
-      (getComputedStyle(e).display === "none" || u.width === 0 || u.height === 0) && O();
-    }, h = new ResizeObserver(l);
-    return h.observe(e), l(), () => h.disconnect();
-  }, [O]), /* @__PURE__ */ f(S, { children: [
+      const c = e.getBoundingClientRect();
+      (getComputedStyle(e).display === "none" || c.width === 0 || c.height === 0) && O();
+    }, k = new ResizeObserver(l);
+    return k.observe(e), l(), () => k.disconnect();
+  }, [O]), /* @__PURE__ */ h(S, { children: [
     /* @__PURE__ */ n(
       "nav",
       {
@@ -60,25 +65,25 @@ function K({
         "data-slot": "admin-side-nav",
         "aria-label": E,
         className: "hidden @md:flex fixed left-0 top-16 bottom-0 z-[var(--Z-Sticky)] w-[72px] flex-col items-center bg-[var(--Surface-Elevated)] border-r border-[var(--Border-Low-Emphasis)]",
-        children: v.map((e) => {
-          const l = w === e.key, h = !!e.subMenus && e.subMenus.length > 0;
+        children: u.map((e) => {
+          const l = p === e.key, k = !!e.subMenus && e.subMenus.length > 0;
           return /* @__PURE__ */ n("div", { className: "relative", children: (() => {
-            const u = F(
+            const c = F(
               "flex h-16 w-16 flex-col items-center justify-center gap-1 rounded-md transition-colors",
               l ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]",
-              X
-            ), m = /* @__PURE__ */ f(S, { children: [
+              W
+            ), d = /* @__PURE__ */ h(S, { children: [
               H(e.icon, { active: l, placement: "rail" }),
               /* @__PURE__ */ n("span", { className: "max-w-12 text-center typo-label-xs", children: e.label })
             ] });
-            return h ? /* @__PURE__ */ f(
+            return k ? /* @__PURE__ */ h(
               q,
               {
                 modal: !1,
                 open: P === e.key,
                 onOpenChange: (r) => {
-                  o(), r ? (a.current === e.key && (a.current = null), c.current = null, y.current.delete(e.key), M(e.key)) : M(
-                    (x) => x === e.key ? null : x
+                  i(), r ? (o.current === e.key && (o.current = null), s.current = null, g.current.delete(e.key), M(e.key)) : M(
+                    (w) => w === e.key ? null : w
                   );
                 },
                 children: [
@@ -86,67 +91,67 @@ function K({
                     "button",
                     {
                       ref: (r) => {
-                        r ? g.current.set(e.key, r) : g.current.delete(e.key);
+                        r ? x.current.set(e.key, r) : x.current.delete(e.key);
                       },
                       type: "button",
-                      className: u,
+                      className: c,
                       onFocus: () => {
-                        i(), k.current = e.key, c.current === e.key && (c.current = null), y.current.delete(e.key);
+                        f(), b.current = e.key, s.current === e.key && (s.current = null), g.current.delete(e.key);
                       },
                       onBlur: () => {
-                        k.current === e.key && (k.current = null);
+                        b.current === e.key && (b.current = null);
                       },
                       onPointerEnter: (r) => {
-                        k.current === e.key || b.current === e.key || j(e.key, r.pointerType);
+                        b.current === e.key || m.current === e.key || B(e.key, r.pointerType);
                       },
                       onPointerDownCapture: () => {
-                        i(), P !== e.key && (s.current = e.key);
+                        f(), P !== e.key && (a.current = e.key);
                       },
                       onPointerLeave: () => {
-                        b.current === e.key && (b.current = null), A(e.key);
+                        m.current === e.key && (m.current = null), A(e.key);
                       },
-                      children: m
+                      children: d
                     }
                   ) }),
                   /* @__PURE__ */ n(
-                    U,
+                    _,
                     {
                       side: "right",
                       align: "start",
                       sideOffset: 0,
                       collisionPadding: 8,
                       className: "w-[240px] rounded-2xl p-2 shadow-menu",
-                      onPointerEnter: o,
+                      onPointerEnter: i,
                       onPointerLeave: () => A(e.key),
                       onPointerMoveCapture: (r) => {
-                        c.current === e.key && r.preventDefault();
+                        s.current === e.key && r.preventDefault();
                       },
                       onInteractOutside: (r) => {
-                        const x = g.current.get(e.key);
-                        s.current === e.key && r.target instanceof Node && !x?.contains(r.target) && (a.current = e.key);
+                        const w = x.current.get(e.key);
+                        a.current === e.key && r.target instanceof Node && !w?.contains(r.target) && (o.current = e.key);
                       },
                       onOpenAutoFocus: (r) => {
-                        c.current === e.key ? r.preventDefault() : s.current === e.key && (r.preventDefault(), requestAnimationFrame(() => {
+                        s.current === e.key ? r.preventDefault() : a.current === e.key && (r.preventDefault(), requestAnimationFrame(() => {
                           T.current.get(e.key)?.focus();
                         }));
                       },
                       onCloseAutoFocus: (r) => {
-                        y.current.has(e.key) && (r.preventDefault(), y.current.delete(e.key), c.current === e.key && (c.current = null)), s.current === e.key && (r.preventDefault(), s.current = null, a.current !== e.key && (b.current = e.key, requestAnimationFrame(() => {
-                          g.current.get(e.key)?.focus();
-                        }))), a.current === e.key && (a.current = null);
+                        g.current.has(e.key) && (r.preventDefault(), g.current.delete(e.key), s.current === e.key && (s.current = null)), a.current === e.key && (r.preventDefault(), a.current = null, o.current !== e.key && (m.current = e.key, requestAnimationFrame(() => {
+                          x.current.get(e.key)?.focus();
+                        }))), o.current === e.key && (o.current = null);
                       },
-                      children: e.subMenus.map((r, x) => /* @__PURE__ */ n(
-                        W,
+                      children: e.subMenus.map((r, w) => /* @__PURE__ */ n(
+                        U,
                         {
                           asChild: !0,
                           className: "min-h-11 px-4",
                           onPointerLeave: (C) => {
-                            c.current === e.key && C.preventDefault();
+                            s.current === e.key && C.preventDefault();
                           },
                           children: /* @__PURE__ */ n(
-                            N,
+                            R,
                             {
-                              ref: x === 0 ? (C) => {
+                              ref: w === 0 ? (C) => {
                                 C ? T.current.set(
                                   e.key,
                                   C
@@ -164,76 +169,80 @@ function K({
                 ]
               }
             ) : e.href ? /* @__PURE__ */ n(
-              N,
+              R,
               {
                 href: e.href,
-                className: u,
+                className: c,
                 "aria-current": l ? "page" : void 0,
-                children: m
+                children: d
               }
-            ) : /* @__PURE__ */ n("button", { type: "button", className: u, children: m });
+            ) : /* @__PURE__ */ n("button", { type: "button", className: c, children: d });
           })() }, e.key);
         })
       }
     ),
-    L && /* @__PURE__ */ f("div", { className: "fixed inset-0 z-[var(--Z-Overlay)] @md:hidden", children: [
+    I && /* @__PURE__ */ h("div", { className: "fixed inset-0 z-[var(--Z-Overlay)] @md:hidden", children: [
       /* @__PURE__ */ n(
         "div",
         {
           className: "absolute inset-0 bg-[var(--Overlay-Medium)]",
-          onClick: () => R?.(!1)
+          onClick: () => N?.(!1)
         }
       ),
-      /* @__PURE__ */ f(
+      /* @__PURE__ */ h(
         "nav",
         {
           "aria-label": E,
           className: "absolute left-0 top-0 h-full w-[280px] bg-[var(--Surface-Primary)] shadow-lg overflow-y-auto dark:bg-[var(--Primitive-Gray-900)]",
           children: [
-            /* @__PURE__ */ f("div", { className: "flex items-center justify-between px-4 py-3", children: [
+            /* @__PURE__ */ h("div", { className: "flex items-center justify-between px-4 py-3", children: [
               /* @__PURE__ */ n("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: z }),
               /* @__PURE__ */ n(
                 "button",
                 {
-                  onClick: () => R?.(!1),
-                  className: "flex size-10 shrink-0 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] focus-visible:outline-hidden",
+                  onClick: () => N?.(!1),
+                  className: "flex size-10 shrink-0 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Neutral-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] focus-visible:outline-hidden",
                   "aria-label": "閉じる",
-                  children: /* @__PURE__ */ n(G, { className: "size-5" })
+                  children: /* @__PURE__ */ n(K, { className: "size-5" })
                 }
               )
             ] }),
-            v.map((e) => {
-              const l = w === e.key, h = !!e.subMenus && e.subMenus.length > 0;
-              return /* @__PURE__ */ f("div", { children: [
+            u.map((e) => {
+              const l = p === e.key, k = !!e.subMenus && e.subMenus.length > 0;
+              return /* @__PURE__ */ h("div", { children: [
                 (() => {
-                  const u = F(
+                  const c = F(
                     "flex w-full items-center gap-3 px-4 py-3 transition-colors",
-                    l ? "text-[var(--Text-Accent-Primary)] bg-[var(--Surface-Accent-Primary-Light)]" : "text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
-                  ), m = /* @__PURE__ */ f(S, { children: [
+                    l ? "text-[var(--Text-Accent-Primary)] bg-[var(--Surface-Accent-Primary-Light)]" : "text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Secondary)]"
+                  ), d = /* @__PURE__ */ h(S, { children: [
                     H(e.icon, { active: l, placement: "drawer" }),
                     /* @__PURE__ */ n("span", { className: "typo-label-md", children: e.label }),
-                    h && /* @__PURE__ */ n(B, { size: 16, className: "ml-auto text-[var(--Text-Low-Emphasis)]" })
+                    k && /* @__PURE__ */ n(G, { size: 16, className: "ml-auto text-[var(--Text-Low-Emphasis)]" })
                   ] });
                   return e.href ? /* @__PURE__ */ n(
-                    N,
+                    R,
                     {
                       href: e.href,
-                      className: u,
+                      className: c,
                       "aria-current": l ? "page" : void 0,
-                      onClick: () => R?.(!1),
-                      children: m
+                      onClick: (r) => {
+                        L(r) && N?.(!1);
+                      },
+                      children: d
                     }
-                  ) : /* @__PURE__ */ n("button", { type: "button", className: u, children: m });
+                  ) : /* @__PURE__ */ n("button", { type: "button", className: c, children: d });
                 })(),
-                h && /* @__PURE__ */ n("div", { className: "bg-[var(--Surface-Secondary)] dark:bg-[var(--Primitive-Gray-900)]", children: e.subMenus.map((u) => /* @__PURE__ */ n(
-                  N,
+                k && /* @__PURE__ */ n("div", { className: "bg-[var(--Surface-Neutral-Secondary)] dark:bg-[var(--Primitive-Gray-900)]", children: e.subMenus.map((c) => /* @__PURE__ */ n(
+                  R,
                   {
-                    href: u.href,
-                    onClick: () => R?.(!1),
+                    href: c.href,
+                    onClick: (d) => {
+                      L(d) && N?.(!1);
+                    },
                     className: "flex min-h-11 items-center px-12 py-2.5 typo-body-md text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]",
-                    children: u.label
+                    children: c.label
                   },
-                  u.label
+                  c.label
                 )) })
               ] }, e.key);
             })
@@ -244,5 +253,5 @@ function K({
   ] });
 }
 export {
-  K as AdminSideNav
+  ee as AdminSideNav
 };

package/dist/components/primitives/category-shortcuts.js

@@ -1,25 +1,25 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import "react";
 import { cn as a } from "../../lib/utils.js";
-function g({ items: c, className: s, linkComponent: l }) {
+function g({ items: c, className: l, linkComponent: s }) {
   return /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "category-shortcuts",
       className: a(
         "flex gap-3 overflow-x-auto px-4 py-2 scrollbar-hide",
-        s
+        l
       ),
       children: [
-        c.map((r, n) => {
-          const t = !!r.href || !!r.onClick, i = r.href ? l ?? "a" : "button", d = r.href ? { href: r.href, onClick: r.onClick } : { type: "button", onClick: r.onClick };
+        c.map((r, t) => {
+          const n = !!r.href || !!r.onClick, i = r.href ? s ?? "a" : "button", d = r.href ? { href: r.href, onClick: r.onClick } : { type: "button", onClick: r.onClick };
           return /* @__PURE__ */ o(
             i,
             {
               ...d,
               className: a(
                 "flex shrink-0 flex-col items-center gap-1 rounded-lg p-1 transition-colors",
-                t && "hover:bg-[var(--Surface-Secondary)]",
+                n && "hover:bg-[var(--Surface-Neutral-Secondary)]",
                 r.isSelected && "bg-[var(--Surface-Accent-Primary-Light)]"
               ),
               children: [
@@ -53,7 +53,7 @@ function g({ items: c, className: s, linkComponent: l }) {
                 )
               ]
             },
-            n
+            t
           );
         }),
         /* @__PURE__ */ e("div", { className: "shrink-0 w-2", "aria-hidden": "true" })

package/dist/components/primitives/chat-composer.js

@@ -65,7 +65,7 @@ function re({
         // フォーカス意匠は DS 共通（FOCUS_RING_WITHIN。以前は同じクラスを手で書いていた）。
         // 枠はこのラッパーが描く（内側の Textarea はリングを消している）
         U,
-        i && "border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Secondary)]",
+        i && "border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Neutral-Secondary)]",
         j
       ),
       children: [