@cakejp/design-system 0.20.1 → 0.21.0

package/dist/components/primitives/header.js

@@ -1,84 +1,85 @@
 "use client";
-import { jsx as e, jsxs as s, Fragment as W } from "react/jsx-runtime";
-import * as y from "react";
-import M from "iconsax-reactjs/dist/esm/ArrowDown2.js";
-import D from "iconsax-reactjs/dist/esm/ArrowLeft.js";
-import { cn as f } from "../../lib/utils.js";
-import { Button as k } from "../foundations/button.js";
-import { DropdownMenu as F, DropdownMenuTrigger as G, DropdownMenuContent as Z, DropdownMenuItem as V } from "../foundations/dropdown-menu.js";
-import { containerVariants as q } from "./container.js";
-function E({
-  containerSize: r,
-  shellClass: c,
+import { jsx as r, jsxs as s, Fragment as G } from "react/jsx-runtime";
+import * as R from "react";
+import V from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import B from "iconsax-reactjs/dist/esm/ArrowLeft.js";
+import { cn as d } from "../../lib/utils.js";
+import { Button as z } from "../foundations/button.js";
+import { DropdownMenu as Z, DropdownMenuTrigger as q, DropdownMenuContent as J, DropdownMenuItem as P } from "../foundations/dropdown-menu.js";
+import { containerVariants as K } from "./container.js";
+function A({
+  containerSize: l,
+  shellClass: t,
   layoutClass: a,
-  containerQuery: u = !1,
-  children: p,
-  ...d
+  containerQuery: m = !1,
+  children: h,
+  ...f
 }) {
-  return r ? /* @__PURE__ */ e("header", { "data-slot": "header", className: c, ...d, children: /* @__PURE__ */ e(
+  return l ? /* @__PURE__ */ r("header", { "data-slot": "header", className: t, ...f, children: /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "header-container",
-      "data-container-size": r,
-      className: f(
-        u && "@container",
-        q({ size: r, gutter: "none" }),
+      "data-container-size": l,
+      className: d(
+        m && "@container",
+        K({ size: l, gutter: "none" }),
         a
       ),
-      children: p
+      children: h
     }
-  ) }) : /* @__PURE__ */ e(
+  ) }) : /* @__PURE__ */ r(
     "header",
     {
       "data-slot": "header",
-      className: f(u && "@container", a, c),
-      ...d,
-      children: p
+      className: d(m && "@container", a, t),
+      ...f,
+      children: h
     }
   );
 }
-function R(r) {
-  return f(
+function H(l) {
+  return d(
     "px-3 py-1.5 typo-body-md rounded-md transition-colors whitespace-nowrap",
-    r ? "text-[var(--Text-High-Emphasis)] font-bold" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
+    l ? "text-[var(--Text-High-Emphasis)] font-bold" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
   );
 }
-const P = 2;
-function J({
-  items: r,
-  overflowLabel: c = "その他"
+const _ = 2;
+function Q({
+  items: l,
+  overflowLabel: t = "その他",
+  linkComponent: a
 }) {
-  const a = y.useRef(null), u = y.useRef(null), [p, d] = y.useState(r.length);
-  y.useEffect(() => {
-    const l = a.current, m = u.current;
-    if (!l || !m) return;
-    const i = () => {
-      const N = Array.from(m.children), v = N.slice(0, r.length).map((t) => t.getBoundingClientRect().width), z = N[r.length]?.getBoundingClientRect().width ?? 0, w = l.clientWidth;
-      if (w === 0 || v.some((t) => t === 0)) {
-        d(r.length);
+  const m = a ?? "a", h = R.useRef(null), f = R.useRef(null), [g, c] = R.useState(l.length);
+  R.useEffect(() => {
+    const e = h.current, p = f.current;
+    if (!e || !p) return;
+    const u = () => {
+      const k = Array.from(p.children), C = k.slice(0, l.length).map((i) => i.getBoundingClientRect().width), b = k[l.length]?.getBoundingClientRect().width ?? 0, x = e.clientWidth;
+      if (x === 0 || C.some((i) => i === 0)) {
+        c(l.length);
         return;
       }
-      if (v.reduce((t, h) => t + h, 0) + P * (r.length - 1) <= w) {
-        d(r.length);
+      if (C.reduce((i, o) => i + o, 0) + _ * (l.length - 1) <= x) {
+        c(l.length);
         return;
       }
-      let g = z, A = 0;
-      for (let t = 0; t < r.length; t++) {
-        const h = g + v[t] + P;
-        if (h > w) break;
-        g = h, A = t + 1;
+      let E = b, L = 0;
+      for (let i = 0; i < l.length; i++) {
+        const o = E + C[i] + _;
+        if (o > x) break;
+        E = o, L = i + 1;
       }
-      d(A);
+      c(L);
     };
-    i(), window.addEventListener("resize", i);
-    const b = typeof ResizeObserver < "u" ? new ResizeObserver(i) : null;
-    return b?.observe(l), b?.observe(m), () => {
-      window.removeEventListener("resize", i), b?.disconnect();
+    u(), window.addEventListener("resize", u);
+    const v = typeof ResizeObserver < "u" ? new ResizeObserver(u) : null;
+    return v?.observe(e), v?.observe(p), () => {
+      window.removeEventListener("resize", u), v?.disconnect();
     };
-  }, [r]);
-  const x = r.slice(0, p), o = r.slice(p);
-  return /* @__PURE__ */ s("div", { ref: a, className: "relative min-w-0 flex-1", children: [
-    /* @__PURE__ */ e(
+  }, [l]);
+  const y = l.slice(0, g), w = l.slice(g);
+  return /* @__PURE__ */ s("div", { ref: h, className: "relative min-w-0 flex-1", children: [
+    /* @__PURE__ */ r(
       "div",
       {
         "aria-hidden": "true",
@@ -86,13 +87,13 @@ function J({
         children: /* @__PURE__ */ s(
           "div",
           {
-            ref: u,
+            ref: f,
             className: "invisible flex w-max items-center gap-0.5",
             children: [
-              r.map((l) => /* @__PURE__ */ e("span", { className: R(l.isActive), children: l.label }, l.label)),
-              /* @__PURE__ */ s("span", { className: f(R(!1), "inline-flex items-center gap-1"), children: [
-                c,
-                /* @__PURE__ */ e(M, { size: 16 })
+              l.map((e) => /* @__PURE__ */ r("span", { className: H(e.isActive), children: e.label }, e.label)),
+              /* @__PURE__ */ s("span", { className: d(H(!1), "inline-flex items-center gap-1"), children: [
+                t,
+                /* @__PURE__ */ r(V, { size: 16 })
               ] })
             ]
           }
@@ -100,208 +101,214 @@ function J({
       }
     ),
     /* @__PURE__ */ s("nav", { className: "flex items-center gap-0.5", children: [
-      x.map((l) => {
-        const m = l.href ? "a" : "button", i = l.href ? { href: l.href } : { type: "button", onClick: l.onClick };
-        return /* @__PURE__ */ e(
-          m,
+      y.map((e) => {
+        const p = e.href ? m : "button", u = e.href ? {
+          href: e.href,
+          "aria-current": e.isActive ? "page" : void 0,
+          onClick: e.onClick
+        } : { type: "button", onClick: e.onClick };
+        return /* @__PURE__ */ r(
+          p,
           {
-            className: R(l.isActive),
-            ...i,
-            children: l.label
+            className: H(e.isActive),
+            ...u,
+            children: e.label
           },
-          l.label
+          e.label
         );
       }),
-      o.length > 0 && /* @__PURE__ */ s(F, { children: [
+      w.length > 0 && /* @__PURE__ */ s(Z, { children: [
         /* @__PURE__ */ s(
-          G,
+          q,
           {
-            className: f(
-              R(o.some((l) => l.isActive)),
+            className: d(
+              H(w.some((e) => e.isActive)),
               "inline-flex items-center gap-1"
             ),
             children: [
-              c,
-              /* @__PURE__ */ e(M, { size: 16, "aria-hidden": "true" })
+              t,
+              /* @__PURE__ */ r(V, { size: 16, "aria-hidden": "true" })
             ]
           }
         ),
-        /* @__PURE__ */ e(Z, { align: "end", children: o.map(
-          (l) => l.href ? /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ e(
-            "a",
+        /* @__PURE__ */ r(J, { align: "end", children: w.map(
+          (e) => e.href ? /* @__PURE__ */ r(P, { asChild: !0, children: /* @__PURE__ */ r(
+            m,
             {
-              href: l.href,
-              onClick: l.onClick,
-              "aria-current": l.isActive ? "page" : void 0,
-              children: l.label
+              href: e.href,
+              onClick: e.onClick,
+              "aria-current": e.isActive ? "page" : void 0,
+              children: e.label
             }
-          ) }, l.label) : /* @__PURE__ */ e(
-            V,
+          ) }, e.label) : /* @__PURE__ */ r(
+            P,
             {
-              onSelect: () => l.onClick?.(),
-              children: l.label
+              onSelect: () => e.onClick?.(),
+              children: e.label
             },
-            l.label
+            e.label
           )
         ) })
       ] })
     ] })
   ] });
 }
-function S({
-  className: r,
-  variant: c = "logo",
+function re({
+  className: l,
+  variant: t = "logo",
   logo: a,
-  title: u,
-  onBack: p,
-  backLabel: d = "戻る",
-  actions: x,
-  navItems: o,
-  navBreakpoint: l = "md",
-  navOverflowLabel: m,
-  searchSlot: i,
-  searchBreakpoint: b,
-  rightSlot: N,
+  title: m,
+  onBack: h,
+  backLabel: f = "戻る",
+  actions: g,
+  navItems: c,
+  navBreakpoint: y = "md",
+  navOverflowLabel: w,
+  searchSlot: e,
+  searchBreakpoint: p,
+  rightSlot: u,
   centerSlot: v,
-  bottomSlot: z,
-  disableSticky: w = !1,
-  containerSize: C,
-  ...g
+  bottomSlot: k,
+  disableSticky: C = !1,
+  containerSize: b,
+  linkComponent: x,
+  ...N
 }) {
-  const h = f(
-    w ? "" : "sticky top-0 z-[var(--Z-Nav)]",
+  const E = x ?? "a", o = d(
+    C ? "" : "sticky top-0 z-[var(--Z-Nav)]",
     // 地は Surface-Elevated: sticky バーはスクロールするコンテンツの上に重なるため
     // 不透明が必須（dark の Surface-Primary は 10% 透過で下の文字が透ける）。light は同値
     "border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)]",
-    r
-  ), _ = l === "lg" ? "@[960px]:hidden" : "@[768px]:hidden", B = l === "lg" ? "hidden @[960px]:flex" : "hidden @[768px]:flex", O = b === "lg" ? "hidden @[960px]:block" : b === "md" ? "hidden @[768px]:block" : void 0;
-  if (c === "logo") {
-    const H = typeof a == "string" ? /* @__PURE__ */ e("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: a }) : a ?? null, j = x && x.length > 0 && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-1", children: x.map((n) => {
-      const L = n.showLabel ? {
+    l
+  ), O = y === "lg" ? "@[960px]:hidden" : "@[768px]:hidden", W = y === "lg" ? "hidden @[960px]:flex" : "hidden @[768px]:flex", F = p === "lg" ? "hidden @[960px]:block" : p === "md" ? "hidden @[768px]:block" : void 0;
+  if (t === "logo") {
+    const T = typeof a == "string" ? /* @__PURE__ */ r("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: a }) : a ?? null, j = g && g.length > 0 && /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center gap-1", children: g.map((n) => {
+      const M = n.showLabel ? {
         variant: "ghost",
         size: "sm",
-        className: "h-10 gap-1.5 rounded-full border border-[var(--Border-Medium-Emphasis)] px-4"
-      } : { variant: "ghost", size: "icon-sm" }, T = /* @__PURE__ */ s(W, { children: [
+        className: "h-10 gap-1.5 rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] px-4"
+      } : { variant: "ghost", size: "icon-sm" }, D = /* @__PURE__ */ s(G, { children: [
         n.badge ? n.badge : n.icon,
-        n.showLabel && /* @__PURE__ */ e("span", { className: "typo-label-sm", children: n.label })
+        n.showLabel && /* @__PURE__ */ r("span", { className: "typo-label-sm", children: n.label })
       ] });
-      return n.href ? /* @__PURE__ */ e(
-        k,
+      return n.href ? /* @__PURE__ */ r(
+        z,
         {
           asChild: !0,
-          ...L,
+          ...M,
           "aria-label": n.showLabel ? void 0 : n.label,
-          children: /* @__PURE__ */ e("a", { href: n.href, onClick: n.onClick, children: T })
+          children: /* @__PURE__ */ r(E, { href: n.href, onClick: n.onClick, children: D })
         },
         n.label
-      ) : /* @__PURE__ */ e(
-        k,
+      ) : /* @__PURE__ */ r(
+        z,
         {
-          ...L,
+          ...M,
           "aria-label": n.showLabel ? void 0 : n.label,
           onClick: n.onClick,
-          children: T
+          children: D
         },
         n.label
       );
     }) });
     return /* @__PURE__ */ s(
-      E,
+      A,
       {
-        containerSize: C,
-        shellClass: h,
+        containerSize: b,
+        shellClass: o,
         containerQuery: !0,
-        ...g,
+        ...N,
         children: [
-          /* @__PURE__ */ s("div", { className: f(
+          /* @__PURE__ */ s("div", { className: d(
             "flex items-center justify-between px-4 py-3",
-            (o || i) && _
+            (c || e) && O
           ), children: [
-            H,
+            T,
             j
           ] }),
-          (o || i) && /* @__PURE__ */ s("div", { className: f(B, "items-center justify-between gap-4 h-14 px-6"), children: [
+          (c || e) && /* @__PURE__ */ s("div", { className: d(W, "items-center justify-between gap-4 h-14 px-6"), children: [
             /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 items-center gap-6", children: [
-              /* @__PURE__ */ e("div", { className: "shrink-0", children: H }),
-              o && o.length > 0 && /* @__PURE__ */ e(
-                J,
+              /* @__PURE__ */ r("div", { className: "shrink-0", children: T }),
+              c && c.length > 0 && /* @__PURE__ */ r(
+                Q,
                 {
-                  items: o,
-                  overflowLabel: m
+                  items: c,
+                  overflowLabel: w,
+                  linkComponent: x
                 }
               )
             ] }),
-            i && /* @__PURE__ */ e(
+            e && /* @__PURE__ */ r(
               "div",
               {
-                className: f(
+                className: d(
                   "min-w-0 flex-1 max-w-[400px]",
-                  O
+                  F
                 ),
-                children: i
+                children: e
               }
             ),
             j
           ] }),
-          z
+          k
         ]
       }
     );
   }
-  return c === "logo-center" ? /* @__PURE__ */ e(
-    E,
+  return t === "logo-center" ? /* @__PURE__ */ r(
+    A,
     {
-      containerSize: C,
-      shellClass: h,
+      containerSize: b,
+      shellClass: o,
       layoutClass: "flex items-center justify-center px-4 py-3",
-      ...g,
-      children: typeof a == "string" ? /* @__PURE__ */ e("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: a }) : a ?? null
+      ...N,
+      children: typeof a == "string" ? /* @__PURE__ */ r("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: a }) : a ?? null
     }
-  ) : c === "back-search" ? /* @__PURE__ */ e(
-    E,
+  ) : t === "back-search" ? /* @__PURE__ */ r(
+    A,
     {
-      containerSize: C,
-      shellClass: h,
+      containerSize: b,
+      shellClass: o,
       layoutClass: "px-4 py-3",
-      ...g,
+      ...N,
       children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e(
-          k,
+        /* @__PURE__ */ r(
+          z,
           {
             variant: "ghost",
             size: "icon-xl",
-            "aria-label": d,
-            onClick: p,
-            children: /* @__PURE__ */ e(D, { size: 20 })
+            "aria-label": f,
+            onClick: h,
+            children: /* @__PURE__ */ r(B, { size: 20 })
           }
         ),
-        v && /* @__PURE__ */ e("div", { className: "flex-1", children: v })
+        v && /* @__PURE__ */ r("div", { className: "flex-1", children: v })
       ] })
     }
   ) : /* @__PURE__ */ s(
-    E,
+    A,
     {
-      containerSize: C,
-      shellClass: h,
+      containerSize: b,
+      shellClass: o,
       layoutClass: "grid grid-cols-[1fr_auto_1fr] items-center gap-2 px-2 py-3",
-      ...g,
+      ...N,
       children: [
-        /* @__PURE__ */ e("div", { className: "justify-self-start", children: /* @__PURE__ */ e(
-          k,
+        /* @__PURE__ */ r("div", { className: "justify-self-start", children: /* @__PURE__ */ r(
+          z,
           {
             variant: "ghost",
             size: "icon-sm",
-            "aria-label": d,
-            onClick: p,
-            children: /* @__PURE__ */ e(D, { size: 20 })
+            "aria-label": f,
+            onClick: h,
+            children: /* @__PURE__ */ r(B, { size: 20 })
           }
         ) }),
-        /* @__PURE__ */ e("h1", { className: "min-w-0 truncate text-center typo-heading-md text-[var(--Text-High-Emphasis)]", children: u }),
-        /* @__PURE__ */ e("div", { className: "justify-self-end", children: N })
+        /* @__PURE__ */ r("h1", { className: "min-w-0 truncate text-center typo-heading-md text-[var(--Text-High-Emphasis)]", children: m }),
+        /* @__PURE__ */ r("div", { className: "justify-self-end", children: u })
       ]
     }
   );
 }
 export {
-  S as Header
+  re as Header
 };