@cakejp/design-system 0.20.1 → 0.21.0

package/dist/components/foundations/checkbox.js

@@ -1,91 +1,108 @@
 "use client";
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import * as p from "react";
-import y from "iconsax-reactjs/dist/esm/TickSquare.js";
-import k from "iconsax-reactjs/dist/esm/MinusSquare.js";
-import { Checkbox as l } from "radix-ui";
-import { cn as b } from "../../lib/utils.js";
-import { FOCUS_RING as g } from "../../lib/focus-ring.js";
-import { useFieldLabelling as N, resolveFieldAria as T } from "../../lib/field-labelling.js";
-function m({
-  className: i,
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import * as i from "react";
+import S from "iconsax-reactjs/dist/esm/TickSquare.js";
+import T from "iconsax-reactjs/dist/esm/MinusSquare.js";
+import { Checkbox as y } from "radix-ui";
+import { cn as E } from "../../lib/utils.js";
+import { FOCUS_RING as j } from "../../lib/focus-ring.js";
+import { useFieldLabelling as w, resolveFieldAria as L } from "../../lib/field-labelling.js";
+function k(e, r) {
+  if (typeof e == "function") {
+    const a = e(r);
+    return typeof a == "function" ? a : void 0;
+  }
+  e && typeof e == "object" && (e.current = r);
+}
+const g = i.forwardRef(function({
+  className: r,
   ...a
-}) {
-  return /* @__PURE__ */ e(
-    l.Root,
+}, l) {
+  return /* @__PURE__ */ t(
+    y.Root,
     {
       "data-slot": "checkbox",
-      className: b(
+      ref: l,
+      className: E(
         // lint-scratch-allow: rounded-[5px] は Figma チェックボックス固有値（トークン外）
-        "peer flex size-5 shrink-0 items-center justify-center rounded-[5px] border-2 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] transition-colors outline-none",
+        "peer flex size-5 shrink-0 items-center justify-center rounded-[5px] border-2 border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] transition-colors outline-none",
         "data-[state=checked]:border-transparent data-[state=checked]:bg-transparent",
         "data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-transparent",
         // hover はフォーカス中に抑制する（checked 時の border-transparent が
         // フォーカスリングの枠を消してしまうため）。
         "hover:border-[var(--Focus-High-Emphasis)] data-[state=checked]:hover:not-focus-visible:border-transparent data-[state=indeterminate]:hover:not-focus-visible:border-transparent",
-        g,
-        "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-[var(--Border-Medium-Emphasis)]",
-        i
+        j,
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-[var(--Border-Control,var(--Border-Medium-Emphasis))]",
+        r
       ),
       ...a,
-      children: /* @__PURE__ */ e(
-        l.Indicator,
+      children: /* @__PURE__ */ t(
+        y.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center",
-          children: a.checked === "indeterminate" ? /* @__PURE__ */ e(k, { size: 24, variant: "Bold", className: "text-[var(--Object-Accent-Primary)]" }) : /* @__PURE__ */ e(y, { size: 24, variant: "Bold", className: "text-[var(--Object-Accent-Primary)]" })
+          children: a.checked === "indeterminate" ? /* @__PURE__ */ t(T, { size: 24, variant: "Bold", className: "text-[var(--Object-Accent-Primary)]" }) : /* @__PURE__ */ t(S, { size: 24, variant: "Bold", className: "text-[var(--Object-Accent-Primary)]" })
         }
       )
     }
   );
-}
-function w({
-  label: i,
-  description: a,
-  count: o,
-  containerClassName: h,
-  className: s,
-  id: u,
-  ...r
+});
+function $({
+  label: e,
+  description: r,
+  count: a,
+  containerClassName: l,
+  className: m,
+  id: C,
+  ref: u,
+  ...s
 }) {
-  const v = N(), x = p.useId(), t = u ?? x, d = `${t}-label`, n = a ? `${t}-description` : void 0;
-  if (i === void 0) {
-    const f = T({ ...r, id: t }, v);
-    return /* @__PURE__ */ e(m, { id: t, className: s, ...r, ...f });
+  const c = w(), b = i.useRef(null), f = i.useRef(void 0), [I, R] = i.useState(!1), N = i.useId(), n = C ?? N, h = i.useCallback((o) => {
+    const d = f.current;
+    f.current = void 0, d ? d() : o || k(u, null), b.current = o, o && (f.current = k(u, o));
+  }, [u]), v = `${n}-label`, p = r ? `${n}-description` : void 0;
+  if ((typeof window > "u" ? i.useEffect : i.useLayoutEffect)(() => {
+    if (e !== void 0 || !b.current || !c) return;
+    const o = Array.from(b.current.labels ?? []).filter((d) => d.id !== c.labelId);
+    R(o.length > 0);
+  }, [c, e]), e === void 0) {
+    const o = L({ ...s, id: n }, c, I);
+    return /* @__PURE__ */ t(g, { ref: h, id: n, className: m, ...s, ...o });
   }
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ x(
     "label",
     {
-      htmlFor: t,
+      htmlFor: n,
       "data-slot": "checkbox-row",
-      "data-disabled": r.disabled || void 0,
-      className: b(
+      "data-disabled": s.disabled || void 0,
+      className: E(
         "flex items-center gap-3 rounded-md px-3 py-2 transition-colors cursor-pointer",
         "hover:bg-[var(--Surface-Tertiary)]",
         "has-[:focus-visible]:bg-[var(--Surface-Tertiary)]",
-        r.disabled && "cursor-not-allowed opacity-60 hover:bg-transparent has-[:focus-visible]:bg-transparent",
-        h
+        s.disabled && "cursor-not-allowed opacity-60 hover:bg-transparent has-[:focus-visible]:bg-transparent",
+        l
       ),
       children: [
-        /* @__PURE__ */ e(
-          m,
+        /* @__PURE__ */ t(
+          g,
           {
-            id: t,
-            className: s,
-            "aria-labelledby": r["aria-label"] ? void 0 : d,
-            "aria-describedby": n,
-            ...r
+            ref: h,
+            id: n,
+            className: m,
+            "aria-labelledby": s["aria-label"] ? void 0 : v,
+            "aria-describedby": p,
+            ...s
           }
         ),
-        /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ e("span", { id: d, className: "typo-body-md text-[var(--Text-High-Emphasis)]", children: i }),
-          a && /* @__PURE__ */ e("span", { id: n, className: "block typo-body-sm text-[var(--Text-Medium-Emphasis)] mt-0.5", children: a })
+        /* @__PURE__ */ x("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ t("span", { id: v, className: "typo-body-md text-[var(--Text-High-Emphasis)]", children: e }),
+          r && /* @__PURE__ */ t("span", { id: p, className: "block typo-body-sm text-[var(--Text-Medium-Emphasis)] mt-0.5", children: r })
         ] }),
-        o !== void 0 && /* @__PURE__ */ e("span", { className: "shrink-0 typo-label-sm text-[var(--Text-Medium-Emphasis)] tabular-nums", children: o.toLocaleString() })
+        a !== void 0 && /* @__PURE__ */ t("span", { className: "shrink-0 typo-label-sm text-[var(--Text-Medium-Emphasis)] tabular-nums", children: a.toLocaleString() })
       ]
     }
   );
 }
 export {
-  w as Checkbox
+  $ as Checkbox
 };

package/dist/components/foundations/chip-variants.js

@@ -10,10 +10,23 @@ const t = e(
           "hover:bg-[var(--Surface-Tertiary)]",
           "disabled:text-[var(--Text-Disable)] disabled:hover:bg-[var(--Surface-Secondary)]"
         ].join(" "),
+        /** accent — 薄いブランド色地 + ブランド色文字。Chip の selected は使わなくなった（明示指定の互換のために残す） */
         accent: [
           "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)]",
           "hover:bg-[var(--Surface-Accent-Primary)] hover:text-[var(--Text-on-Inverse)]",
           "disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:hover:bg-[var(--Surface-Secondary)] disabled:hover:text-[var(--Text-Disable)]"
+        ].join(" "),
+        /**
+         * selected — Chip の選択中。ブランド色を使わず、グレー地 + 1px の黒系の枠で示す
+         * （contracts/composition.json の brandColorUsage。ナビ・絞り込みの選択中表示にブランド色を使わない）。
+         * 枠は border ではなく内側リング（inset-ring）で描く: border だと未選択→選択で 2px 大きくなる。
+         * inset-ring は FOCUS_RING の ring（外側）と別の box-shadow 層なので、フォーカス中も両方見える。
+         * forced-colors では box-shadow が消えるため、Chip 側が Highlight の塗りで選択中を示す。
+         */
+        selected: [
+          "bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] inset-ring-1 inset-ring-[var(--Border-High-Emphasis)]",
+          "hover:bg-[var(--Hover-Tertiary-Button)]",
+          "disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:inset-ring-transparent disabled:hover:bg-[var(--Surface-Secondary)]"
         ].join(" ")
       },
       size: {

package/dist/components/foundations/command.js

@@ -1,172 +1,174 @@
 "use client";
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import "react";
-import { Command as r } from "cmdk";
-import { SearchIcon as i } from "lucide-react";
-import { cn as a } from "../../lib/utils.js";
-import { Dialog as p, DialogHeader as l, DialogTitle as u, DialogDescription as g, DialogContent as h } from "./dialog.js";
-function f({
-  className: e,
-  ...o
+import { Command as a } from "cmdk";
+import { SearchIcon as c } from "lucide-react";
+import { cn as r } from "../../lib/utils.js";
+import { FORCED_COLORS_COMMAND_ITEM as l } from "../../lib/focus-ring.js";
+import { Dialog as u, DialogHeader as p, DialogTitle as f, DialogDescription as g, DialogContent as h } from "./dialog.js";
+function x({
+  className: o,
+  ...e
 }) {
   return /* @__PURE__ */ t(
-    r,
+    a,
     {
       "data-slot": "command",
-      className: a(
+      className: r(
         "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-        e
+        o
       ),
-      ...o
+      ...e
     }
   );
 }
-function w({
-  title: e = "Command Palette",
-  description: o = "Search for a command to run...",
-  children: n,
+function N({
+  title: o = "Command Palette",
+  description: e = "Search for a command to run...",
+  children: d,
   className: m,
   showCloseButton: s = !0,
-  ...c
+  ...i
 }) {
-  return /* @__PURE__ */ d(p, { ...c, children: [
-    /* @__PURE__ */ d(l, { className: "sr-only", children: [
-      /* @__PURE__ */ t(u, { children: e }),
-      /* @__PURE__ */ t(g, { children: o })
+  return /* @__PURE__ */ n(u, { ...i, children: [
+    /* @__PURE__ */ n(p, { className: "sr-only", children: [
+      /* @__PURE__ */ t(f, { children: o }),
+      /* @__PURE__ */ t(g, { children: e })
     ] }),
     /* @__PURE__ */ t(
       h,
       {
-        className: a("overflow-hidden p-0", m),
+        className: r("overflow-hidden p-0", m),
         showCloseButton: s,
-        children: /* @__PURE__ */ t(f, { className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:typo-label-sm [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: n })
+        children: /* @__PURE__ */ t(x, { className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:typo-label-sm [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: d })
       }
     )
   ] });
 }
-function C({
-  className: e,
-  ...o
+function D({
+  className: o,
+  ...e
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "command-input-wrapper",
-      className: "flex h-9 items-center gap-2 border-b border-[var(--Border-Medium-Emphasis)] px-3 focus-within:border-[var(--Focus-High-Emphasis)]",
+      className: "flex h-9 items-center gap-2 border-b border-[var(--Border-Medium-Emphasis)] px-3 focus-within:border-[var(--Focus-High-Emphasis)] forced-colors:focus-within:outline-solid forced-colors:focus-within:outline-2 forced-colors:focus-within:-outline-offset-2 forced-colors:focus-within:outline-[Highlight]",
       children: [
-        /* @__PURE__ */ t(i, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ t(c, { className: "size-4 shrink-0 opacity-50" }),
         /* @__PURE__ */ t(
-          r.Input,
+          a.Input,
           {
             "data-slot": "command-input",
-            className: a(
-              "flex h-10 w-full rounded-md bg-transparent py-3 typo-body-md outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-              e
+            className: r(
+              "flex h-10 w-full rounded-md bg-transparent py-3 typo-body-md outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+              o
             ),
-            ...o
+            ...e
           }
         )
       ]
     }
   );
 }
-function N({
-  className: e,
-  ...o
+function E({
+  className: o,
+  ...e
 }) {
   return /* @__PURE__ */ t(
-    r.List,
+    a.List,
     {
       "data-slot": "command-list",
-      className: a(
+      className: r(
         "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        e
+        o
       ),
-      ...o
+      ...e
     }
   );
 }
-function D({
-  ...e
+function I({
+  ...o
 }) {
   return /* @__PURE__ */ t(
-    r.Empty,
+    a.Empty,
     {
       "data-slot": "command-empty",
       className: "py-6 text-center typo-body-md",
-      ...e
+      ...o
     }
   );
 }
-function I({
-  className: e,
-  ...o
+function S({
+  className: o,
+  ...e
 }) {
   return /* @__PURE__ */ t(
-    r.Group,
+    a.Group,
     {
       "data-slot": "command-group",
-      className: a(
+      className: r(
         "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:typo-label-sm [&_[cmdk-group-heading]]:text-muted-foreground",
-        e
+        o
       ),
-      ...o
+      ...e
     }
   );
 }
-function S({
-  className: e,
-  ...o
+function M({
+  className: o,
+  ...e
 }) {
   return /* @__PURE__ */ t(
-    r.Separator,
+    a.Separator,
     {
       "data-slot": "command-separator",
-      className: a("-mx-1 h-px bg-border", e),
-      ...o
+      className: r("-mx-1 h-px bg-border", o),
+      ...e
     }
   );
 }
-function E({
-  className: e,
-  ...o
+function O({
+  className: o,
+  ...e
 }) {
   return /* @__PURE__ */ t(
-    r.Item,
+    a.Item,
     {
       "data-slot": "command-item",
-      className: a(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 typo-body-md outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        e
+      className: r(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 typo-body-md outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        l,
+        o
       ),
-      ...o
+      ...e
     }
   );
 }
 function z({
-  className: e,
-  ...o
+  className: o,
+  ...e
 }) {
   return /* @__PURE__ */ t(
     "span",
     {
       "data-slot": "command-shortcut",
-      className: a(
+      className: r(
         "ml-auto typo-body-xs text-muted-foreground",
-        e
+        o
       ),
-      ...o
+      ...e
     }
   );
 }
 export {
-  f as Command,
-  w as CommandDialog,
-  D as CommandEmpty,
-  I as CommandGroup,
-  C as CommandInput,
-  E as CommandItem,
-  N as CommandList,
-  S as CommandSeparator,
+  x as Command,
+  N as CommandDialog,
+  I as CommandEmpty,
+  S as CommandGroup,
+  D as CommandInput,
+  O as CommandItem,
+  E as CommandList,
+  M as CommandSeparator,
   z as CommandShortcut
 };

package/dist/components/foundations/confirm-dialog.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsxs as D, jsx as f } from "react/jsx-runtime";
+import * as o from "react";
+import { AlertDialog as w, AlertDialogContent as x, AlertDialogHeader as E, AlertDialogTitle as I, AlertDialogDescription as T, AlertDialogFooter as q, AlertDialogCancel as v } from "./alert-dialog.js";
+import { Button as L } from "./button.js";
+const A = { active: null, open: !1, queue: [] };
+function M(e, r) {
+  if (e.active === r) {
+    if (!e.open) return e;
+    const [n, ...u] = e.queue;
+    return n ? { active: n, open: !0, queue: u } : { ...e, open: !1 };
+  }
+  return e.queue.includes(r) ? { ...e, queue: e.queue.filter((n) => n !== r) } : e;
+}
+const R = "data-confirm-dialog";
+function y(e) {
+  return !(e instanceof HTMLElement) || e === e.ownerDocument.body ? !1 : !e.closest(`[${R}]`);
+}
+function O(e) {
+  let r = null, n = e;
+  for (let u = 0; u < 8; u++) {
+    const s = n.closest('[role="menu"]')?.getAttribute("aria-labelledby"), t = s ? e.ownerDocument.getElementById(s) : null;
+    if (!(t instanceof HTMLElement) || t === n) break;
+    r = t, n = t;
+  }
+  return r;
+}
+const k = o.createContext(null);
+function j({ children: e }) {
+  const [r, n] = o.useState(A), u = o.useRef(/* @__PURE__ */ new Set()), i = o.useRef(!1), s = o.useRef(0), t = o.useRef(
+    null
+  ), d = o.useCallback((c, l) => {
+    u.current.delete(c) && c.resolve(l), n((a) => M(a, c));
+  }, []), F = o.useCallback(
+    (c) => new Promise((l) => {
+      const a = typeof document > "u" ? null : document.activeElement, h = y(a) ? { returnFocus: a, fallbackFocus: O(a) } : t.current ?? { returnFocus: null, fallbackFocus: null };
+      t.current = h;
+      const C = { id: s.current++, options: c, resolve: l, ...h };
+      u.current.add(C), n(
+        (g) => g.active && g.open ? { ...g, queue: [...g.queue, C] } : (
+          // 閉じるアニメーション中の要求は key の変更で即座に差し替える
+          { active: C, open: !0, queue: g.queue }
+        )
+      ), i.current && queueMicrotask(() => {
+        i.current && d(C, !1);
+      });
+    }),
+    [d]
+  ), m = o.useCallback((c, l) => {
+    if (c.preventDefault(), document.activeElement?.closest(`[${R}]`)) return;
+    (l.returnFocus?.isConnected ? l.returnFocus : l.fallbackFocus?.isConnected ? l.fallbackFocus : null)?.focus(), t.current = null;
+  }, []);
+  o.useEffect(() => {
+    i.current = !1;
+    const c = u.current;
+    return () => {
+      i.current = !0, queueMicrotask(() => {
+        if (i.current) {
+          for (const l of c) l.resolve(!1);
+          c.clear(), t.current = null, n(A);
+        }
+      });
+    };
+  }, []);
+  const { active: b, open: p } = r;
+  return /* @__PURE__ */ D(k.Provider, { value: F, children: [
+    e,
+    b ? /* @__PURE__ */ f(
+      P,
+      {
+        request: b,
+        open: p,
+        onFinish: d,
+        onCloseAutoFocus: m
+      },
+      b.id
+    ) : null
+  ] });
+}
+function P({
+  request: e,
+  open: r,
+  onFinish: n,
+  onCloseAutoFocus: u
+}) {
+  const {
+    title: i,
+    description: s,
+    confirmLabel: t = "確認",
+    cancelLabel: d = "キャンセル",
+    tone: F = "default"
+  } = e.options;
+  return /* @__PURE__ */ f(
+    w,
+    {
+      open: r,
+      onOpenChange: (m) => {
+        m || n(e, !1);
+      },
+      children: /* @__PURE__ */ D(
+        x,
+        {
+          "data-confirm-dialog": "",
+          onCloseAutoFocus: (m) => u(m, e),
+          children: [
+            /* @__PURE__ */ D(E, { children: [
+              /* @__PURE__ */ f(I, { children: i }),
+              s != null ? /* @__PURE__ */ f(T, { children: s }) : null
+            ] }),
+            /* @__PURE__ */ D(q, { children: [
+              /* @__PURE__ */ f(v, { children: d }),
+              /* @__PURE__ */ f(
+                L,
+                {
+                  variant: F === "destructive" ? "destructive" : "default",
+                  onClick: () => n(e, !0),
+                  children: t
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function B() {
+  const e = o.useContext(k);
+  if (!e)
+    throw new Error("useConfirm は <ConfirmDialogProvider> の内側で使ってください。");
+  return e;
+}
+export {
+  j as ConfirmDialogProvider,
+  B as useConfirm
+};