@cakejp/design-system 0.19.0 → 0.20.0

package/dist/components/foundations/sheet.js

@@ -3,7 +3,7 @@ import "react";
 import { XIcon as h } from "lucide-react";
 import { Dialog as a } from "radix-ui";
 import { cn as r } from "../../lib/utils.js";
-function S({ ...t }) {
+function y({ ...t }) {
   return /* @__PURE__ */ e(a.Root, { "data-slot": "sheet", ...t });
 }
 function N({
@@ -60,7 +60,7 @@ function D({
           l || s.preventDefault(), c?.(s);
         },
         className: r(
-          "fixed z-[var(--Z-Modal)] flex flex-col gap-4 border-[var(--Border-Medium-Emphasis)] bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-[var(--Motion-Duration-Slow)] data-[state=open]:animate-in data-[state=open]:duration-[var(--Motion-Duration-Slower)]",
+          "fixed z-[var(--Z-Modal)] flex flex-col gap-4 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Elevated)] shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-[var(--Motion-Duration-Slow)] data-[state=open]:animate-in data-[state=open]:duration-[var(--Motion-Duration-Slower)]",
           n === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
           n === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
           n === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
@@ -99,7 +99,7 @@ function C({ className: t, ...o }) {
     }
   );
 }
-function M({
+function E({
   className: t,
   ...o
 }) {
@@ -112,7 +112,7 @@ function M({
     }
   );
 }
-function O({
+function M({
   className: t,
   ...o
 }) {
@@ -126,12 +126,12 @@ function O({
   );
 }
 export {
-  S as Sheet,
+  y as Sheet,
   w as SheetClose,
   D as SheetContent,
-  O as SheetDescription,
+  M as SheetDescription,
   C as SheetFooter,
   T as SheetHeader,
-  M as SheetTitle,
+  E as SheetTitle,
   N as SheetTrigger
 };

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

@@ -6,7 +6,7 @@ function l({ brand: r, onMenuClick: a, actions: t }) {
     "header",
     {
       "data-slot": "admin-header",
-      className: "fixed top-0 left-0 right-0 z-[var(--Z-Nav)] flex h-14 @md:h-16 items-center justify-between bg-[var(--Surface-Primary)] border-b border-[var(--Border-Low-Emphasis)] px-4 @md:px-6",
+      className: "fixed top-0 left-0 right-0 z-[var(--Z-Nav)] flex h-14 @md:h-16 items-center justify-between bg-[var(--Surface-Elevated)] border-b border-[var(--Border-Low-Emphasis)] px-4 @md:px-6",
       children: [
         /* @__PURE__ */ i("div", { className: "flex items-center gap-2 @md:gap-3", children: [
           a && /* @__PURE__ */ e(

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

@@ -1,127 +1,236 @@
 "use client";
-import { jsxs as s, Fragment as c, jsx as r } from "react/jsx-runtime";
-import * as b from "react";
-import y from "iconsax-reactjs/dist/esm/ArrowDown2.js";
-import { XIcon as g } from "lucide-react";
-import { cn as m } from "../../lib/utils.js";
-function v(n, o) {
-  return typeof n == "function" ? n(o) : n;
+import { jsxs as f, Fragment as T, jsx as n } from "react/jsx-runtime";
+import * as t from "react";
+import L from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import { XIcon as j } from "lucide-react";
+import { DropdownMenu as B, DropdownMenuTrigger as G, DropdownMenuContent as q, DropdownMenuItem as Z } from "../foundations/dropdown-menu.js";
+import { FOCUS_RING as U } from "../../lib/focus-ring.js";
+import { cn as A } from "../../lib/utils.js";
+function F(v, M) {
+  return typeof v == "function" ? v(M) : v;
 }
-function M({
-  items: n,
-  activeKey: o,
-  drawerTitle: p,
-  open: f = !1,
-  onOpenChange: h,
-  ariaLabel: d = "管理メニュー"
+function Y({
+  items: v,
+  activeKey: M,
+  drawerTitle: H,
+  open: z = !1,
+  onOpenChange: C,
+  ariaLabel: S = "管理メニュー"
 }) {
-  const [x, u] = b.useState(null);
-  return /* @__PURE__ */ s(c, { children: [
-    /* @__PURE__ */ r(
+  const [P, w] = 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()), R = t.useRef(/* @__PURE__ */ new Map()), d = t.useRef(null), p = t.useRef(null), E = 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);
+  }, []), I = 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), w(e), d.current = null;
+      }, 80));
+    },
+    [o, i]
+  ), D = t.useCallback(
+    (e) => {
+      i(), o(), p.current = setTimeout(() => {
+        w((l) => l === e ? null : l), p.current = null;
+      }, 120);
+    },
+    [o, i]
+  ), O = t.useCallback(() => {
+    i(), o(), c.current = null, y.current.clear(), k.current = null, s.current = null, b.current = null, a.current = null, w(null);
+  }, [o, i]);
+  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(), R.current.clear();
+    },
+    []
+  ), t.useEffect(() => {
+    const e = E.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(T, { children: [
+    /* @__PURE__ */ n(
       "nav",
       {
+        ref: E,
         "data-slot": "admin-side-nav",
-        "aria-label": d,
-        className: "hidden @md:flex fixed left-0 top-16 bottom-0 z-[var(--Z-Sticky)] w-[72px] flex-col items-center bg-[var(--Surface-Primary)] border-r border-[var(--Border-Low-Emphasis)]",
-        children: n.map((e) => {
-          const t = o === e.key, l = !!e.subMenus && e.subMenus.length > 0;
-          return /* @__PURE__ */ s(
-            "div",
-            {
-              className: "relative",
-              onMouseEnter: () => u(l ? e.key : null),
-              onMouseLeave: () => u(null),
-              children: [
-                (() => {
-                  const a = m(
-                    "flex h-16 w-16 flex-col items-center justify-center gap-1 transition-colors",
-                    t ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]"
-                  ), i = /* @__PURE__ */ s(c, { children: [
-                    v(e.icon, { active: t, placement: "rail" }),
-                    /* @__PURE__ */ r("span", { className: "max-w-12 text-center typo-label-xs", children: e.label })
-                  ] });
-                  return e.href ? /* @__PURE__ */ r(
-                    "a",
+        "aria-label": S,
+        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 = M === e.key, h = !!e.subMenus && e.subMenus.length > 0;
+          return /* @__PURE__ */ n("div", { className: "relative", children: (() => {
+            const u = A(
+              "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)]",
+              U
+            ), m = /* @__PURE__ */ f(T, { children: [
+              F(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(
+              B,
+              {
+                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), w(e.key)) : w(
+                    (x) => x === e.key ? null : x
+                  );
+                },
+                children: [
+                  /* @__PURE__ */ n(G, { asChild: !0, children: /* @__PURE__ */ n(
+                    "button",
                     {
-                      href: e.href,
-                      className: a,
-                      "aria-current": t ? "page" : void 0,
-                      children: i
+                      ref: (r) => {
+                        r ? g.current.set(e.key, r) : g.current.delete(e.key);
+                      },
+                      type: "button",
+                      className: u,
+                      onFocus: () => {
+                        i(), k.current = e.key, c.current === e.key && (c.current = null), y.current.delete(e.key);
+                      },
+                      onBlur: () => {
+                        k.current === e.key && (k.current = null);
+                      },
+                      onPointerEnter: (r) => {
+                        k.current === e.key || b.current === e.key || I(e.key, r.pointerType);
+                      },
+                      onPointerDownCapture: () => {
+                        i(), P !== e.key && (s.current = e.key);
+                      },
+                      onPointerLeave: () => {
+                        b.current === e.key && (b.current = null), D(e.key);
+                      },
+                      children: m
                     }
-                  ) : /* @__PURE__ */ r("button", { type: "button", className: a, children: i });
-                })(),
-                l && x === e.key && /* @__PURE__ */ r("div", { className: "absolute left-full top-0 z-[var(--Z-Popover)] ml-0 w-[240px] rounded-2xl bg-[var(--Surface-Primary)] shadow-menu border border-[var(--Border-Low-Emphasis)] py-2", children: e.subMenus.map((a) => /* @__PURE__ */ r(
-                  "a",
-                  {
-                    href: a.href,
-                    className: "flex min-h-11 items-center px-4 py-2.5 typo-body-sm text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)] transition-colors",
-                    children: a.label
-                  },
-                  a.label
-                )) })
-              ]
-            },
-            e.key
-          );
+                  ) }),
+                  /* @__PURE__ */ n(
+                    q,
+                    {
+                      side: "right",
+                      align: "start",
+                      sideOffset: 0,
+                      collisionPadding: 8,
+                      className: "w-[240px] rounded-2xl p-2 shadow-menu",
+                      onPointerEnter: o,
+                      onPointerLeave: () => D(e.key),
+                      onPointerMoveCapture: (r) => {
+                        c.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);
+                      },
+                      onOpenAutoFocus: (r) => {
+                        c.current === e.key ? r.preventDefault() : s.current === e.key && (r.preventDefault(), requestAnimationFrame(() => {
+                          R.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);
+                      },
+                      children: e.subMenus.map((r, x) => /* @__PURE__ */ n(
+                        Z,
+                        {
+                          asChild: !0,
+                          className: "min-h-11 px-4",
+                          onPointerLeave: (N) => {
+                            c.current === e.key && N.preventDefault();
+                          },
+                          children: /* @__PURE__ */ n(
+                            "a",
+                            {
+                              ref: x === 0 ? (N) => {
+                                N ? R.current.set(
+                                  e.key,
+                                  N
+                                ) : R.current.delete(e.key);
+                              } : void 0,
+                              href: r.href,
+                              children: r.label
+                            }
+                          )
+                        },
+                        r.label
+                      ))
+                    }
+                  )
+                ]
+              }
+            ) : e.href ? /* @__PURE__ */ n(
+              "a",
+              {
+                href: e.href,
+                className: u,
+                "aria-current": l ? "page" : void 0,
+                children: m
+              }
+            ) : /* @__PURE__ */ n("button", { type: "button", className: u, children: m });
+          })() }, e.key);
         })
       }
     ),
-    f && /* @__PURE__ */ s("div", { className: "fixed inset-0 z-[var(--Z-Overlay)] @md:hidden", children: [
-      /* @__PURE__ */ r(
+    z && /* @__PURE__ */ f("div", { className: "fixed inset-0 z-[var(--Z-Overlay)] @md:hidden", children: [
+      /* @__PURE__ */ n(
         "div",
         {
           className: "absolute inset-0 bg-[var(--Primitive-Black-alpha-1000)]/40",
-          onClick: () => h?.(!1)
+          onClick: () => C?.(!1)
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ f(
         "nav",
         {
-          "aria-label": d,
+          "aria-label": S,
           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__ */ s("div", { className: "flex items-center justify-between px-4 py-3", children: [
-              /* @__PURE__ */ r("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: p }),
-              /* @__PURE__ */ r(
+            /* @__PURE__ */ f("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: H }),
+              /* @__PURE__ */ n(
                 "button",
                 {
-                  onClick: () => h?.(!1),
+                  onClick: () => C?.(!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",
                   "aria-label": "閉じる",
-                  children: /* @__PURE__ */ r(g, { className: "size-5" })
+                  children: /* @__PURE__ */ n(j, { className: "size-5" })
                 }
               )
             ] }),
-            n.map((e) => {
-              const t = o === e.key, l = !!e.subMenus && e.subMenus.length > 0;
-              return /* @__PURE__ */ s("div", { children: [
+            v.map((e) => {
+              const l = M === e.key, h = !!e.subMenus && e.subMenus.length > 0;
+              return /* @__PURE__ */ f("div", { children: [
                 (() => {
-                  const a = m(
+                  const u = A(
                     "flex w-full items-center gap-3 px-4 py-3 transition-colors",
-                    t ? "text-[var(--Text-Accent-Primary)] bg-[var(--Surface-Accent-Primary-Light)]" : "text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
-                  ), i = /* @__PURE__ */ s(c, { children: [
-                    v(e.icon, { active: t, placement: "drawer" }),
-                    /* @__PURE__ */ r("span", { className: "typo-label-md", children: e.label }),
-                    l && /* @__PURE__ */ r(y, { size: 16, className: "ml-auto text-[var(--Text-Low-Emphasis)]" })
+                    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(T, { children: [
+                    F(e.icon, { active: l, placement: "drawer" }),
+                    /* @__PURE__ */ n("span", { className: "typo-label-md", children: e.label }),
+                    h && /* @__PURE__ */ n(L, { size: 16, className: "ml-auto text-[var(--Text-Low-Emphasis)]" })
                   ] });
-                  return e.href ? /* @__PURE__ */ r(
+                  return e.href ? /* @__PURE__ */ n(
                     "a",
                     {
                       href: e.href,
-                      className: a,
-                      "aria-current": t ? "page" : void 0,
-                      children: i
+                      className: u,
+                      "aria-current": l ? "page" : void 0,
+                      children: m
                     }
-                  ) : /* @__PURE__ */ r("button", { type: "button", className: a, children: i });
+                  ) : /* @__PURE__ */ n("button", { type: "button", className: u, children: m });
                 })(),
-                l && /* @__PURE__ */ r("div", { className: "bg-[var(--Surface-Secondary)] dark:bg-[var(--Primitive-Gray-900)]", children: e.subMenus.map((a) => /* @__PURE__ */ r(
+                h && /* @__PURE__ */ n("div", { className: "bg-[var(--Surface-Secondary)] dark:bg-[var(--Primitive-Gray-900)]", children: e.subMenus.map((u) => /* @__PURE__ */ n(
                   "a",
                   {
-                    href: a.href,
+                    href: u.href,
                     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: a.label
+                    children: u.label
                   },
-                  a.label
+                  u.label
                 )) })
               ] }, e.key);
             })
@@ -132,5 +241,5 @@ function M({
   ] });
 }
 export {
-  M as AdminSideNav
+  Y as AdminSideNav
 };

package/dist/components/primitives/bottom-tab-bar.js

@@ -1,4 +1,4 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
 import "react";
 import { cn as a } from "../../lib/utils.js";
 import { NotificationBadge as d } from "./notification-badge.js";
@@ -6,7 +6,7 @@ function x({
   className: n,
   items: s,
   banner: t,
-  ...i
+  ...c
 }) {
   return /* @__PURE__ */ o(
     "nav",
@@ -14,12 +14,12 @@ function x({
       "data-slot": "bottom-tab-bar",
       "aria-label": "メインナビゲーション",
       className: a(
-        "fixed inset-x-0 bottom-0 z-[var(--Z-Floating)] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)] pb-[env(safe-area-inset-bottom)] @md:hidden",
+        "fixed inset-x-0 bottom-0 z-[var(--Z-Floating)] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)] pb-[env(safe-area-inset-bottom)] @md:hidden",
         n
       ),
-      ...i,
+      ...c,
       children: [
-        t && /* @__PURE__ */ e(
+        t && /* @__PURE__ */ r(
           "div",
           {
             "data-slot": "bottom-tab-bar-banner",
@@ -27,49 +27,49 @@ function x({
             children: t
           }
         ),
-        /* @__PURE__ */ e("div", { className: "flex h-[52px] items-center justify-around px-1 @sm:px-4", children: s.map((r) => {
-          const c = r.href ? "a" : "button", l = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
+        /* @__PURE__ */ r("div", { className: "flex h-[52px] items-center justify-around px-1 @sm:px-4", children: s.map((e) => {
+          const i = e.href ? "a" : "button", l = e.href ? { href: e.href } : { type: "button", onClick: e.onClick };
           return /* @__PURE__ */ o(
-            c,
+            i,
             {
               className: a(
                 "relative flex flex-1 flex-col items-center gap-0.5 pb-1 pt-0.5 transition-colors min-w-0",
-                r.isActive ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Text-High-Emphasis)]"
+                e.isActive ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Text-High-Emphasis)]"
               ),
-              "aria-current": r.isActive ? "page" : void 0,
+              "aria-current": e.isActive ? "page" : void 0,
               ...l,
               children: [
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ r(
                   "span",
                   {
                     className: a(
                       "relative flex h-7 w-14 shrink-0 items-center justify-center rounded-full overflow-visible transition-colors",
-                      r.isActive && "bg-[var(--Surface-Accent-Primary-Light)]"
+                      e.isActive && "bg-[var(--Surface-Accent-Primary-Light)]"
                     ),
-                    children: /* @__PURE__ */ e(
+                    children: /* @__PURE__ */ r(
                       d,
                       {
-                        count: r.badgeCount,
+                        count: e.badgeCount,
                         size: "md",
-                        hidden: r.badgeCount == null || r.badgeCount <= 0,
-                        children: r.isActive && r.activeIcon ? r.activeIcon : r.icon
+                        hidden: e.badgeCount == null || e.badgeCount <= 0,
+                        children: e.isActive && e.activeIcon ? e.activeIcon : e.icon
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ r(
                   "span",
                   {
                     className: a(
                       "truncate max-w-full px-0.5 text-center",
-                      r.isActive ? "typo-label-xs" : "typo-body-xs"
+                      e.isActive ? "typo-label-xs" : "typo-body-xs"
                     ),
-                    children: r.label
+                    children: e.label
                   }
                 )
               ]
             },
-            r.label
+            e.label
           );
         }) })
       ]