@cakejp/design-system 0.17.1 → 0.20.0

package/dist/components/foundations/sonner.js

@@ -1,16 +1,17 @@
+"use client";
 import { jsx as r } from "react/jsx-runtime";
-import { Loader2Icon as t, OctagonXIcon as i, TriangleAlertIcon as o, InfoIcon as s, CircleCheckIcon as v } from "lucide-react";
-import { useTheme as n } from "next-themes";
+import { Loader2Icon as t, OctagonXIcon as i, TriangleAlertIcon as o, InfoIcon as s, CircleCheckIcon as n } from "lucide-react";
+import { useTheme as v } from "next-themes";
 import { Toaster as c } from "sonner";
 const g = ({ ...a }) => {
-  const { theme: e = "system" } = n();
+  const { theme: e = "system" } = v();
   return /* @__PURE__ */ r(
     c,
     {
       theme: e,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ r(v, { className: "size-4 text-[var(--Text-Success)]" }),
+        success: /* @__PURE__ */ r(n, { className: "size-4 text-[var(--Text-Success)]" }),
         info: /* @__PURE__ */ r(s, { 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)]" }),

package/dist/components/foundations/tabs.js

@@ -1,13 +1,13 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import "react";
-import { cva as o } from "class-variance-authority";
+import { cva as n } from "class-variance-authority";
 import { Tabs as e } from "radix-ui";
 import { cn as i } from "../../lib/utils.js";
-function c({
+function v({
   className: t,
   ...a
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ s(
     e.Root,
     {
       "data-slot": "tabs",
@@ -16,7 +16,7 @@ function c({
     }
   );
 }
-const n = o(
+const b = n(
   "group/tabs-list inline-flex items-center",
   {
     variants: {
@@ -26,37 +26,51 @@ const n = o(
       },
       scrollable: {
         true: "gap-4"
+      },
+      /**
+       * 狭い置き場所（サイドバー等）向けの詰め設定。
+       * segment の 1 項目あたりの最小幅（100px）を外し、左右の padding を詰める（issue #235）。
+       */
+      size: {
+        md: "",
+        sm: ""
       }
     },
+    compoundVariants: [
+      { variant: "segment", size: "sm", class: "p-1" }
+    ],
     defaultVariants: {
       variant: "underbar",
-      scrollable: !1
+      scrollable: !1,
+      size: "md"
     }
   }
 );
-function v({
+function m({
   className: t,
   variant: a = "underbar",
-  scrollable: s = !1,
-  ...l
+  scrollable: r = !1,
+  size: l = "md",
+  ...o
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ s(
     e.List,
     {
       "data-slot": "tabs-list",
       "data-variant": a,
-      "data-scrollable": s || void 0,
-      className: i(n({ variant: a, scrollable: s }), t),
-      ...l
+      "data-scrollable": r || void 0,
+      "data-size": l,
+      className: i(b({ variant: a, scrollable: r, size: l }), t),
+      ...o
     }
   );
 }
-function m({
+function x({
   className: t,
   children: a,
-  ...s
+  ...r
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ s(
     e.Trigger,
     {
       "data-slot": "tabs-trigger",
@@ -64,19 +78,25 @@ function m({
         // Base
         "group/trigger relative inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         // Underbar variant (default: equal-width tabs with full-width underline)
-        "group-data-[variant=underbar]/tabs-list:h-12 group-data-[variant=underbar]/tabs-list:flex-1 group-data-[variant=underbar]/tabs-list:border-b-2 group-data-[variant=underbar]/tabs-list:border-transparent group-data-[variant=underbar]/tabs-list:typo-label-md group-data-[variant=underbar]/tabs-list:text-[var(--Text-Low-Emphasis)]",
+        // px-2: 均等割りで幅が詰まったとき、隣のラベルと文字が接触しないための最小余白（issue #235）
+        "group-data-[variant=underbar]/tabs-list:h-12 group-data-[variant=underbar]/tabs-list:flex-1 group-data-[variant=underbar]/tabs-list:border-b-2 group-data-[variant=underbar]/tabs-list:border-transparent group-data-[variant=underbar]/tabs-list:px-2 group-data-[variant=underbar]/tabs-list:typo-label-md group-data-[variant=underbar]/tabs-list:text-[var(--Text-Low-Emphasis)]",
         // Underbar active
         "group-data-[variant=underbar]/tabs-list:data-[state=active]:border-[var(--Text-High-Emphasis)] group-data-[variant=underbar]/tabs-list:data-[state=active]:text-[var(--Text-High-Emphasis)]",
         // Scrollable underbar: shrink to text width, bold text, remove trigger border (underline moves to inner span)
-        "group-data-[scrollable]/tabs-list:!flex-initial group-data-[scrollable]/tabs-list:!shrink-0 group-data-[scrollable]/tabs-list:!border-b-0 group-data-[scrollable]/tabs-list:data-[state=active]:!border-b-0 group-data-[scrollable]/tabs-list:typo-label-md",
+        // gap-4 で間隔を取っているので左右 padding は戻す（従来の間隔を保つ）
+        "group-data-[scrollable]/tabs-list:!flex-initial group-data-[scrollable]/tabs-list:!shrink-0 group-data-[scrollable]/tabs-list:!border-b-0 group-data-[scrollable]/tabs-list:!px-0 group-data-[scrollable]/tabs-list:data-[state=active]:!border-b-0 group-data-[scrollable]/tabs-list:typo-label-md",
         // Segment variant
         "group-data-[variant=segment]/tabs-list:h-[37px] group-data-[variant=segment]/tabs-list:min-w-[100px] group-data-[variant=segment]/tabs-list:rounded-full group-data-[variant=segment]/tabs-list:px-3 group-data-[variant=segment]/tabs-list:typo-body-md group-data-[variant=segment]/tabs-list:text-[var(--Text-High-Emphasis)]",
+        // size="sm": 狭い置き場所（サイドバー等）向け。1 項目あたりの最小幅を外し、
+        // 左右の padding を詰める。min-w を持つのは segment だけ、underbar の px-2 は同値なので
+        // 実際に効くのは segment。variant 側の group-data と具体度が並ぶため ! で順序依存を断つ（issue #235）
+        "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)]",
         t
       ),
-      ...s,
-      children: /* @__PURE__ */ r("span", { className: "group-data-[scrollable]/tabs-list:inline-block group-data-[scrollable]/tabs-list:border-b-2 group-data-[scrollable]/tabs-list:border-transparent group-data-[scrollable]/tabs-list:pb-px group-data-[state=active]/trigger:border-[var(--Text-High-Emphasis)]", children: a })
+      ...r,
+      children: /* @__PURE__ */ s("span", { className: "group-data-[scrollable]/tabs-list:inline-block group-data-[scrollable]/tabs-list:border-b-2 group-data-[scrollable]/tabs-list:border-transparent group-data-[scrollable]/tabs-list:pb-px group-data-[state=active]/trigger:border-[var(--Text-High-Emphasis)]", children: a })
     }
   );
 }
@@ -84,7 +104,7 @@ function f({
   className: t,
   ...a
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ s(
     e.Content,
     {
       "data-slot": "tabs-content",
@@ -94,9 +114,9 @@ function f({
   );
 }
 export {
-  c as Tabs,
+  v as Tabs,
   f as TabsContent,
-  v as TabsList,
-  m as TabsTrigger,
-  n as tabsListVariants
+  m as TabsList,
+  x as TabsTrigger,
+  b as tabsListVariants
 };

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

@@ -1,9 +1,10 @@
+"use client";
 import { jsx as i } from "react/jsx-runtime";
 import * as s from "react";
 import { cva as l } from "class-variance-authority";
 import { ToggleGroup as d } from "radix-ui";
 import { cn as g } from "../../lib/utils.js";
-const p = l(
+const c = l(
   "flex items-center gap-1.5 py-1.5 overflow-x-auto scrollbar-none",
   {
     variants: {
@@ -17,7 +18,7 @@ const p = l(
       width: "fit"
     }
   }
-), c = l(
+), p = l(
   [
     "inline-flex shrink-0 items-center justify-center",
     "h-9 rounded-full px-3",
@@ -70,7 +71,7 @@ function h({
     d.Root,
     {
       "data-slot": "toggle-group",
-      className: g(p({ width: o }), a),
+      className: g(c({ width: o }), a),
       ...t,
       children: /* @__PURE__ */ i(u.Provider, { value: { variant: e, size: r }, children: n })
     }
@@ -89,7 +90,7 @@ function b({
     {
       "data-slot": "toggle-group-item",
       className: g(
-        c({
+        p({
           variant: t.variant || r,
           size: t.size || o
         }),
@@ -103,5 +104,5 @@ function b({
 export {
   h as ToggleGroup,
   b as ToggleGroupItem,
-  c as toggleGroupItemVariants
+  p as toggleGroupItemVariants
 };

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,126 +1,236 @@
-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;
+"use client";
+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);
             })
@@ -131,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
           );
         }) })
       ]