@cakejp/design-system 0.22.1 → 0.24.0

package/dist/components/primitives/menu-drawer.js

@@ -7,17 +7,17 @@ import j from "iconsax-reactjs/dist/esm/ArrowUp2.js";
 import S from "iconsax-reactjs/dist/esm/Add.js";
 import { X as M } from "lucide-react";
 import { cn as A } from "../../lib/utils.js";
-import { Button as x } from "../foundations/button.js";
-const v = "flex min-h-12 items-center gap-1 mx-2 rounded-lg px-2 py-3 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] hover:bg-[var(--Surface-Secondary)] active:bg-[var(--Surface-Tertiary)]";
+import { Button as u } from "../foundations/button.js";
+const v = "flex min-h-12 items-center gap-1 mx-2 rounded-lg px-2 py-3 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] hover:bg-[var(--Surface-Neutral-Secondary)] active:bg-[var(--Surface-Neutral-Tertiary)]";
 function U({
   userName: r,
   isLoggedIn: t = !1,
   hideLoginLink: o = !1,
-  sections: g,
+  sections: N,
   banners: c,
   onClose: d,
   onLogin: m,
-  loginHref: N = "/security/login_link/",
+  loginHref: g = "/security/login_link/",
   className: b,
   linkComponent: h,
   ...y
@@ -46,7 +46,7 @@ function U({
             "さま"
           ] }) }) : /* @__PURE__ */ e("div", {}),
           d && /* @__PURE__ */ e(
-            x,
+            u,
             {
               variant: "ghost",
               size: "icon-sm",
@@ -60,7 +60,7 @@ function U({
           /* @__PURE__ */ e("div", { className: "py-2", children: /* @__PURE__ */ e("ul", { children: /* @__PURE__ */ e("li", { children: /* @__PURE__ */ l(
             p,
             {
-              href: N,
+              href: g,
               onClick: m ? (a) => {
                 a.preventDefault(), m();
               } : void 0,
@@ -74,18 +74,18 @@ function U({
           /* @__PURE__ */ e("div", { className: "h-px w-full bg-[var(--Border-Low-Emphasis)]" })
         ] }),
         /* @__PURE__ */ l("div", { className: "flex-1 overflow-y-auto", children: [
-          g.map((a, i) => /* @__PURE__ */ l("div", { children: [
+          N.map((a, i) => /* @__PURE__ */ l("div", { children: [
             a.border && /* @__PURE__ */ e("div", { className: "h-px w-full bg-[var(--Border-Low-Emphasis)]" }),
             /* @__PURE__ */ l("div", { className: "py-2", children: [
               a.title && /* @__PURE__ */ e("div", { className: "px-4 pb-1 pt-2", children: /* @__PURE__ */ l("p", { className: "flex items-center gap-1 typo-label-md font-bold text-[var(--Text-High-Emphasis)]", children: [
                 a.icon && /* @__PURE__ */ e("span", { className: "flex size-5 shrink-0 items-center justify-center", children: a.icon }),
                 /* @__PURE__ */ e("span", { children: a.title })
               ] }) }),
-              /* @__PURE__ */ e("ul", { children: a.items.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(u, { linkComponent: h, item: s }) }, s.label)) }),
+              /* @__PURE__ */ e("ul", { children: a.items.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(x, { linkComponent: h, item: s }) }, s.label)) }),
               a.itemsExtra && a.itemsExtra.length > 0 && /* @__PURE__ */ l(n, { children: [
-                f.has(i) && /* @__PURE__ */ e("ul", { children: a.itemsExtra.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(u, { linkComponent: h, item: s }) }, s.label)) }),
+                f.has(i) && /* @__PURE__ */ e("ul", { children: a.itemsExtra.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(x, { linkComponent: h, item: s }) }, s.label)) }),
                 /* @__PURE__ */ e(
-                  x,
+                  u,
                   {
                     variant: "ghost",
                     className: "flex w-full items-center justify-center gap-1 rounded-none px-4 py-3 typo-label-md text-[var(--Text-Accent-Primary)]",
@@ -123,7 +123,7 @@ function U({
     }
   );
 }
-function u({ item: r, linkComponent: t }) {
+function x({ item: r, linkComponent: t }) {
   return /* @__PURE__ */ l(
     t ?? "a",
     {

package/dist/components/primitives/multi-select.js

@@ -1,75 +1,75 @@
 "use client";
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import * as t from "react";
-import { ChevronsUpDown as I, Check as O } from "lucide-react";
-import { cn as m } from "../../lib/utils.js";
-import { Button as P } from "../foundations/button.js";
-import { Command as k, CommandInput as B, CommandList as H, CommandEmpty as F, CommandGroup as G, CommandItem as L } from "../foundations/command.js";
-import { Popover as M, PopoverTrigger as U, PopoverContent as _ } from "../foundations/popover.js";
-import { useFieldLabelling as $, resolveFieldAria as q } from "../../lib/field-labelling.js";
-import { HIGH_CONTRAST_OUTLINE as z } from "../../lib/high-contrast.js";
-import { Chip as D } from "./chip.js";
-function le({
-  options: u,
+import * as s from "react";
+import { ChevronsUpDown as O, Check as P } from "lucide-react";
+import { cn as f } from "../../lib/utils.js";
+import { Button as k } from "../foundations/button.js";
+import { Command as B, CommandInput as H, CommandList as F, CommandEmpty as G, CommandGroup as M, CommandItem as U } from "../foundations/command.js";
+import { Popover as _, PopoverTrigger as $, PopoverContent as q } from "../foundations/popover.js";
+import { useFieldLabelling as z, resolveFieldAria as D } from "../../lib/field-labelling.js";
+import { HIGH_CONTRAST_OUTLINE as J } from "../../lib/high-contrast.js";
+import { Chip as K } from "./chip.js";
+function ie({
+  options: p,
   value: l = [],
-  onValueChange: R,
-  placeholder: f = "選択してください",
-  searchPlaceholder: w = "検索",
-  emptyLabel: E = "候補がありません",
-  disabled: v,
-  className: T,
-  id: h,
-  "aria-invalid": p,
-  "aria-describedby": b,
-  "aria-label": s,
-  "aria-labelledby": c
+  onValueChange: w,
+  placeholder: v = "選択してください",
+  searchPlaceholder: E = "検索",
+  emptyLabel: T = "候補がありません",
+  disabled: h,
+  className: I,
+  id: b,
+  "aria-invalid": g,
+  "aria-describedby": x,
+  "aria-label": n,
+  "aria-labelledby": t
 }) {
-  const [g, S] = t.useState(!1), n = u.filter((e) => l.includes(e.value)), x = $(), j = q(
+  const [C, S] = s.useState(!1), o = p.filter((e) => l.includes(e.value)), c = z(), j = D(
     {
-      id: h,
-      "aria-label": s,
-      "aria-labelledby": c,
-      "aria-describedby": b,
+      id: b,
+      "aria-label": n,
+      "aria-labelledby": t,
+      "aria-describedby": x,
       // 渡さないと、利用側の明示指定が FormField 由来の値（error の有無）で上書きされる
-      "aria-invalid": p
+      "aria-invalid": g
     },
-    x
-  ), A = !x && !s && !c ? f : void 0, C = (e) => R?.(l.includes(e) ? l.filter((a) => a !== e) : [...l, e]), y = t.useRef(null), d = t.useRef(null), o = t.useRef(null);
-  return t.useEffect(() => {
-    const e = o.current;
+    c
+  ), m = !c && !n && !t ? v : void 0, A = t ? { "aria-labelledby": t } : n ?? m ? { "aria-label": n ?? m } : c ? { "aria-labelledby": c.labelId } : {}, y = (e) => w?.(l.includes(e) ? l.filter((a) => a !== e) : [...l, e]), N = s.useRef(null), u = s.useRef(null), d = s.useRef(null);
+  return s.useEffect(() => {
+    const e = d.current;
     if (!e) return;
     const a = document.activeElement;
     if (l.includes(e.value)) {
-      a?.isConnected && d.current?.contains(a) || (o.current = null);
+      a?.isConnected && u.current?.contains(a) || (d.current = null);
       return;
     }
-    if (o.current = null, a && a !== document.body && a.isConnected) return;
-    const N = Array.from(
-      d.current?.querySelectorAll('[data-slot="chip-remove"]') ?? []
+    if (d.current = null, a && a !== document.body && a.isConnected) return;
+    const R = Array.from(
+      u.current?.querySelectorAll('[data-slot="chip-remove"]') ?? []
     );
-    (N[e.index] ?? N[e.index - 1] ?? y.current)?.focus();
-  }, [l]), /* @__PURE__ */ i("div", { "data-slot": "multi-select", className: m("flex flex-col gap-2", T), children: [
-    /* @__PURE__ */ i(M, { open: g, onOpenChange: S, children: [
-      /* @__PURE__ */ r(U, { asChild: !0, children: /* @__PURE__ */ i(
-        P,
+    (R[e.index] ?? R[e.index - 1] ?? N.current)?.focus();
+  }, [l]), /* @__PURE__ */ i("div", { "data-slot": "multi-select", className: f("flex flex-col gap-2", I), children: [
+    /* @__PURE__ */ i(_, { open: C, onOpenChange: S, children: [
+      /* @__PURE__ */ r($, { asChild: !0, children: /* @__PURE__ */ i(
+        k,
         {
-          ref: y,
+          ref: N,
           type: "button",
           variant: "tertiary",
           role: "combobox",
-          id: h,
-          "aria-expanded": g,
+          id: b,
+          "aria-expanded": C,
           "aria-haspopup": "listbox",
-          "aria-invalid": p,
-          "aria-describedby": b,
-          "aria-label": s ?? A,
-          "aria-labelledby": c,
+          "aria-invalid": g,
+          "aria-describedby": x,
+          "aria-label": n ?? m,
+          "aria-labelledby": t,
           ...j,
-          disabled: v,
-          className: m(
+          disabled: h,
+          className: f(
             "w-full justify-between bg-[var(--Surface-Primary)]",
             // 高コントラスト（prefers-contrast: more / data-contrast="more"）のときだけ見える内側 1px の輪郭（#301）
-            z,
+            J,
             // エラー時の赤枠。トリガーは Button tertiary（枠幅 0）なので border 色だけ変えても見えず、
             // border を足すと 1px 広がる。内側リング（inset-ring）で描いて高さを変えない。
             // inset-ring は ring（フォーカスリング）と別の box-shadow 層なので同時に表示される。
@@ -79,23 +79,23 @@ function le({
             "forced-colors:aria-invalid:outline-solid forced-colors:aria-invalid:outline-1 forced-colors:aria-invalid:-outline-offset-1 forced-colors:aria-invalid:outline-[CanvasText]"
           ),
           children: [
-            /* @__PURE__ */ r("span", { className: n.length ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]", children: n.length ? `${n.length}件選択中` : f }),
-            /* @__PURE__ */ r(I, { "aria-hidden": "true", className: "text-[var(--Object-Medium-Emphasis)]" })
+            /* @__PURE__ */ r("span", { className: o.length ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]", children: o.length ? `${o.length}件選択中` : v }),
+            /* @__PURE__ */ r(O, { "aria-hidden": "true", className: "text-[var(--Object-Medium-Emphasis)]" })
           ]
         }
       ) }),
-      /* @__PURE__ */ r(_, { align: "start", className: "w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ i(k, { children: [
-        /* @__PURE__ */ r(B, { placeholder: w }),
-        /* @__PURE__ */ i(H, { children: [
-          /* @__PURE__ */ r(F, { children: E }),
-          /* @__PURE__ */ r(G, { children: u.map((e) => /* @__PURE__ */ i(
-            L,
+      /* @__PURE__ */ r(q, { align: "start", className: "w-[var(--radix-popover-trigger-width)] p-0", ...A, children: /* @__PURE__ */ i(B, { children: [
+        /* @__PURE__ */ r(H, { placeholder: E }),
+        /* @__PURE__ */ i(F, { children: [
+          /* @__PURE__ */ r(G, { children: T }),
+          /* @__PURE__ */ r(M, { children: p.map((e) => /* @__PURE__ */ i(
+            U,
             {
               value: [e.label, ...e.keywords ?? []].join(" "),
               disabled: e.disabled,
-              onSelect: () => C(e.value),
+              onSelect: () => y(e.value),
               children: [
-                /* @__PURE__ */ r(O, { "aria-hidden": "true", className: m(l.includes(e.value) ? "opacity-100" : "opacity-0") }),
+                /* @__PURE__ */ r(P, { "aria-hidden": "true", className: f(l.includes(e.value) ? "opacity-100" : "opacity-0") }),
                 e.label,
                 l.includes(e.value) && /* @__PURE__ */ r("span", { className: "sr-only", children: "選択済み" })
               ]
@@ -105,15 +105,15 @@ function le({
         ] })
       ] }) })
     ] }),
-    n.length > 0 && /* @__PURE__ */ r("div", { ref: d, className: "flex flex-wrap gap-1.5", role: "group", "aria-label": "選択済み", children: n.map((e, a) => /* @__PURE__ */ r(
-      D,
+    o.length > 0 && /* @__PURE__ */ r("div", { ref: u, className: "flex flex-wrap gap-1.5", role: "group", "aria-label": "選択済み", children: o.map((e, a) => /* @__PURE__ */ r(
+      K,
       {
         removable: !0,
         removeLabel: `${e.label}を削除`,
         onRemove: () => {
-          o.current = { value: e.value, index: a }, C(e.value);
+          d.current = { value: e.value, index: a }, y(e.value);
         },
-        disabled: v,
+        disabled: h,
         children: e.label
       },
       e.value
@@ -121,5 +121,5 @@ function le({
   ] });
 }
 export {
-  le as MultiSelect
+  ie as MultiSelect
 };

package/dist/components/primitives/notification-list.js

@@ -3,24 +3,24 @@ import "react";
 import h from "iconsax-reactjs/dist/esm/Notification.js";
 import m from "iconsax-reactjs/dist/esm/ArrowRight2.js";
 import { Badge as p } from "../foundations/badge.js";
-import { cn as l } from "../../lib/utils.js";
+import { cn as o } from "../../lib/utils.js";
 function u({
   notifications: r,
   variant: n = "vertical",
   emptyMessage: c = "新着のお知らせはありません",
   linkComponent: d,
-  className: i,
-  ...t
+  className: t,
+  ...i
 }) {
   return r.length === 0 ? /* @__PURE__ */ s(
     "div",
     {
       "data-slot": "notification-list",
-      className: l(
+      className: o(
         "flex flex-col items-center justify-center gap-3 py-12",
-        i
+        t
       ),
-      ...t,
+      ...i,
       children: [
         /* @__PURE__ */ a(h, { size: 48, className: "text-[var(--Text-Low-Emphasis)]" }),
         /* @__PURE__ */ a("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: c })
@@ -30,15 +30,15 @@ function u({
     "div",
     {
       "data-slot": "notification-list",
-      className: l("w-full divide-y divide-[var(--Border-Low-Emphasis)]", i),
-      ...t,
+      className: o("w-full divide-y divide-[var(--Border-Low-Emphasis)]", t),
+      ...i,
       children: r.map((e) => {
-        const o = e.href ? d ?? "a" : "div";
+        const l = e.href ? d ?? "a" : "div";
         return n === "horizontal" ? /* @__PURE__ */ s(
-          o,
+          l,
           {
             ...e.href ? { href: e.href } : {},
-            className: "flex items-center gap-3 px-4 py-3 transition-colors hover:bg-[var(--Surface-Secondary)]",
+            className: "flex items-center gap-3 px-4 py-3 transition-colors hover:bg-[var(--Surface-Neutral-Secondary)]",
             children: [
               /* @__PURE__ */ a("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)] shrink-0 w-[88px]", children: e.date }),
               /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
@@ -50,10 +50,10 @@ function u({
           },
           e.id
         ) : /* @__PURE__ */ s(
-          o,
+          l,
           {
             ...e.href ? { href: e.href } : {},
-            className: "flex items-start gap-3 px-4 py-3.5 transition-colors hover:bg-[var(--Surface-Secondary)]",
+            className: "flex items-start gap-3 px-4 py-3.5 transition-colors hover:bg-[var(--Surface-Neutral-Secondary)]",
             children: [
               /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center pt-1.5", children: e.isUnread ? /* @__PURE__ */ a("span", { className: "size-2 rounded-full bg-[var(--Brand-Cake-Orange)]" }) : /* @__PURE__ */ a("span", { className: "size-2" }) }),
               /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: [