@cakejp/design-system 0.16.0 → 0.17.1

package/dist/components/primitives/header.js

@@ -0,0 +1,257 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import * as k from "react";
+import H from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import j 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 M, DropdownMenuTrigger as L, DropdownMenuContent as P, DropdownMenuItem as T } from "../foundations/dropdown-menu.js";
+function E(n) {
+  return d(
+    "px-3 py-1.5 typo-body-md rounded-md transition-colors whitespace-nowrap",
+    n ? "text-[var(--Text-High-Emphasis)] font-bold" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
+  );
+}
+const D = 2;
+function V({
+  items: n,
+  overflowLabel: u = "その他"
+}) {
+  const t = k.useRef(null), C = k.useRef(null), [g, m] = k.useState(n.length);
+  k.useEffect(() => {
+    const e = t.current, h = C.current;
+    if (!e || !h) return;
+    const a = () => {
+      const b = Array.from(h.children), w = b.slice(0, n.length).map((s) => s.getBoundingClientRect().width), R = b[n.length]?.getBoundingClientRect().width ?? 0, o = e.clientWidth;
+      if (o === 0 || w.some((s) => s === 0)) {
+        m(n.length);
+        return;
+      }
+      if (w.reduce((s, p) => s + p, 0) + D * (n.length - 1) <= o) {
+        m(n.length);
+        return;
+      }
+      let f = R, N = 0;
+      for (let s = 0; s < n.length; s++) {
+        const p = f + w[s] + D;
+        if (p > o) break;
+        f = p, N = s + 1;
+      }
+      m(N);
+    };
+    a(), window.addEventListener("resize", a);
+    const v = typeof ResizeObserver < "u" ? new ResizeObserver(a) : null;
+    return v?.observe(e), v?.observe(h), () => {
+      window.removeEventListener("resize", a), v?.disconnect();
+    };
+  }, [n]);
+  const x = n.slice(0, g), c = n.slice(g);
+  return /* @__PURE__ */ i("div", { ref: t, className: "relative min-w-0 flex-1", children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        ref: C,
+        "aria-hidden": "true",
+        className: "invisible pointer-events-none absolute top-0 left-0 flex w-max items-center gap-0.5",
+        children: [
+          n.map((e) => /* @__PURE__ */ r("span", { className: E(e.isActive), children: e.label }, e.label)),
+          /* @__PURE__ */ i("span", { className: d(E(!1), "inline-flex items-center gap-1"), children: [
+            u,
+            /* @__PURE__ */ r(H, { size: 16 })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ i("nav", { className: "flex items-center gap-0.5", children: [
+      x.map((e) => {
+        const h = e.href ? "a" : "button", a = e.href ? { href: e.href } : { type: "button", onClick: e.onClick };
+        return /* @__PURE__ */ r(
+          h,
+          {
+            className: E(e.isActive),
+            ...a,
+            children: e.label
+          },
+          e.label
+        );
+      }),
+      c.length > 0 && /* @__PURE__ */ i(M, { children: [
+        /* @__PURE__ */ i(
+          L,
+          {
+            className: d(
+              E(c.some((e) => e.isActive)),
+              "inline-flex items-center gap-1"
+            ),
+            children: [
+              u,
+              /* @__PURE__ */ r(H, { size: 16, "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(P, { align: "end", children: c.map(
+          (e) => e.href ? /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r(
+            "a",
+            {
+              href: e.href,
+              onClick: e.onClick,
+              "aria-current": e.isActive ? "page" : void 0,
+              children: e.label
+            }
+          ) }, e.label) : /* @__PURE__ */ r(
+            T,
+            {
+              onSelect: () => e.onClick?.(),
+              children: e.label
+            },
+            e.label
+          )
+        ) })
+      ] })
+    ] })
+  ] });
+}
+function Z({
+  className: n,
+  variant: u = "logo",
+  logo: t,
+  title: C,
+  onBack: g,
+  backLabel: m = "戻る",
+  actions: x,
+  navItems: c,
+  navBreakpoint: e = "md",
+  navOverflowLabel: h,
+  searchSlot: a,
+  rightSlot: v,
+  centerSlot: b,
+  bottomSlot: w,
+  disableSticky: R = !1,
+  ...o
+}) {
+  const y = R ? "" : "sticky top-0 z-[var(--Z-Nav)]", f = "border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]", N = e === "lg" ? "@[1024px]:hidden" : "@[768px]:hidden", s = e === "lg" ? "hidden @[1024px]:flex" : "hidden @[768px]:flex";
+  if (u === "logo") {
+    const p = typeof t == "string" ? /* @__PURE__ */ r("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: t }) : t ?? null, A = x && x.length > 0 && /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center gap-1", children: x.map(
+      (l) => l.href ? /* @__PURE__ */ r(
+        z,
+        {
+          asChild: !0,
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": l.label,
+          children: /* @__PURE__ */ r("a", { href: l.href, onClick: l.onClick, children: l.badge ? l.badge : l.icon })
+        },
+        l.label
+      ) : /* @__PURE__ */ r(
+        z,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": l.label,
+          onClick: l.onClick,
+          children: l.badge ? l.badge : l.icon
+        },
+        l.label
+      )
+    ) });
+    return /* @__PURE__ */ i(
+      "header",
+      {
+        "data-slot": "header",
+        className: d(y, f, "@container", n),
+        ...o,
+        children: [
+          /* @__PURE__ */ i("div", { className: d(
+            "flex items-center justify-between px-4 py-3",
+            (c || a) && N
+          ), children: [
+            p,
+            A
+          ] }),
+          (c || a) && /* @__PURE__ */ i("div", { className: d(s, "items-center justify-between gap-4 h-14 px-6"), children: [
+            /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 items-center gap-6", children: [
+              /* @__PURE__ */ r("div", { className: "shrink-0", children: p }),
+              c && c.length > 0 && /* @__PURE__ */ r(
+                V,
+                {
+                  items: c,
+                  overflowLabel: h
+                }
+              )
+            ] }),
+            a && /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 max-w-[400px]", children: a }),
+            A
+          ] }),
+          w
+        ]
+      }
+    );
+  }
+  return u === "logo-center" ? /* @__PURE__ */ r(
+    "header",
+    {
+      "data-slot": "header",
+      className: d(
+        y,
+        f,
+        "flex items-center justify-center px-4 py-3",
+        n
+      ),
+      ...o,
+      children: typeof t == "string" ? /* @__PURE__ */ r("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: t }) : t ?? null
+    }
+  ) : u === "back-search" ? /* @__PURE__ */ r(
+    "header",
+    {
+      "data-slot": "header",
+      className: d(
+        y,
+        f,
+        "px-4 py-3",
+        n
+      ),
+      ...o,
+      children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ r(
+          z,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            "aria-label": m,
+            onClick: g,
+            children: /* @__PURE__ */ r(j, { size: 20 })
+          }
+        ),
+        b && /* @__PURE__ */ r("div", { className: "flex-1", children: b })
+      ] })
+    }
+  ) : /* @__PURE__ */ i(
+    "header",
+    {
+      "data-slot": "header",
+      className: d(
+        y,
+        f,
+        "grid grid-cols-[1fr_auto_1fr] items-center gap-2 px-2 py-3",
+        n
+      ),
+      ...o,
+      children: [
+        /* @__PURE__ */ r("div", { className: "justify-self-start", children: /* @__PURE__ */ r(
+          z,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            "aria-label": m,
+            onClick: g,
+            children: /* @__PURE__ */ r(j, { size: 20 })
+          }
+        ) }),
+        /* @__PURE__ */ r("h1", { className: "min-w-0 truncate text-center typo-heading-md text-[var(--Text-High-Emphasis)]", children: C }),
+        /* @__PURE__ */ r("div", { className: "justify-self-end", children: v })
+      ]
+    }
+  );
+}
+export {
+  Z as Header
+};

package/dist/components/primitives/image-carousel.js

@@ -0,0 +1,156 @@
+import { jsxs as y, jsx as t, Fragment as T } from "react/jsx-runtime";
+import * as l from "react";
+import k from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import C from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { cn as o } from "../../lib/utils.js";
+function B({
+  images: c,
+  aspectRatio: i = "banner",
+  showDots: N = !0,
+  showArrows: w = !0,
+  autoPlay: d = 0,
+  peek: x = !1,
+  pcSlidesPerView: u = 1,
+  centeredSlides: h = !1,
+  className: j,
+  ...z
+}) {
+  const p = l.useRef(null), [s, E] = l.useState(0), a = c.length, b = i === "square" ? "aspect-square" : i === "video" ? "aspect-video" : i === "ogp" ? "aspect-[1.91/1]" : "aspect-[311/162.5]";
+  l.useEffect(() => {
+    const r = p.current;
+    if (!r) return;
+    const e = new IntersectionObserver(
+      (m) => {
+        for (const v of m)
+          if (v.isIntersecting) {
+            const g = Number(
+              v.target.dataset.index
+            );
+            Number.isNaN(g) || E(g);
+          }
+      },
+      { root: r, threshold: 0.6 }
+    );
+    return r.querySelectorAll("[data-slide]").forEach((m) => e.observe(m)), () => e.disconnect();
+  }, [a]);
+  function n(r) {
+    const e = p.current;
+    if (!e) return;
+    const f = e.children[r];
+    f && e.scrollTo({ left: f.offsetLeft, behavior: "smooth" });
+  }
+  l.useEffect(() => {
+    if (d <= 0 || a <= 1) return;
+    const r = setInterval(() => {
+      n((s + 1) % a);
+    }, d);
+    return () => clearInterval(r);
+  }, [d, s, a]);
+  function I() {
+    n(s <= 0 ? a - 1 : s - 1);
+  }
+  function S() {
+    n(s >= a - 1 ? 0 : s + 1);
+  }
+  return a === 0 ? null : /* @__PURE__ */ y(
+    "div",
+    {
+      "data-slot": "image-carousel",
+      className: o("@container group/carousel relative", j),
+      ...z,
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            ref: p,
+            tabIndex: 0,
+            className: o(
+              "flex snap-x snap-mandatory overflow-x-auto scroll-smooth scrollbar-none",
+              "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50",
+              x && "pl-4 @[960px]:pl-0",
+              // タブレット centeredSlides: コンテナに px-[22.25%] を付与し
+              // flex item の w-full が自動で ~426px になる（768px の 55.5%）
+              // @[768px]: と @[960px]: は数値指定で CSS 出力順が保証されるため
+              // 960px+ では @[960px]:px-0 が必ず上書きする
+              h && "@[768px]:px-[22.25%] @[960px]:px-0 @[768px]:gap-4",
+              // PC 複数枚表示時のスライド間ギャップ（本番 spaceBetween:24 準拠）
+              // cascade: @[960px]:gap-6 > @[768px]:gap-4 at 960px+
+              u > 1 && "@[960px]:gap-6"
+            ),
+            style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+            children: c.map((r, e) => /* @__PURE__ */ t(
+              "div",
+              {
+                "data-slide": !0,
+                "data-index": e,
+                className: o(
+                  "shrink-0 snap-start",
+                  // centeredSlides: タブレットで snap-center、PC で snap-start に戻す
+                  h && "@[768px]:snap-center @[960px]:snap-start",
+                  x ? u > 1 ? "w-[calc(100%-48px)] pr-3 @[960px]:w-[calc((100%-48px)/3)] @[960px]:pr-0" : "w-[calc(100%-48px)] pr-3 @[960px]:w-full @[960px]:pr-0" : u > 1 ? "w-full @[960px]:w-[calc((100%-48px)/3)]" : "w-full"
+                ),
+                children: r.href ? /* @__PURE__ */ t("a", { href: r.href, className: "block", children: /* @__PURE__ */ t(
+                  "img",
+                  {
+                    src: r.src,
+                    alt: r.alt,
+                    loading: e === 0 ? "eager" : "lazy",
+                    className: o("w-full rounded-md object-cover @[960px]:rounded-lg", b)
+                  }
+                ) }) : /* @__PURE__ */ t(
+                  "img",
+                  {
+                    src: r.src,
+                    alt: r.alt,
+                    loading: e === 0 ? "eager" : "lazy",
+                    className: o("w-full rounded-md object-cover @[960px]:rounded-lg", b)
+                  }
+                )
+              },
+              e
+            ))
+          }
+        ),
+        w && a > 1 && /* @__PURE__ */ y(T, { children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: I,
+              "aria-label": "前へ",
+              className: "absolute left-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
+              children: /* @__PURE__ */ t(k, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: S,
+              "aria-label": "次へ",
+              className: "absolute right-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
+              children: /* @__PURE__ */ t(C, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
+            }
+          )
+        ] }),
+        N && a > 1 && /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-1.5 @[960px]:hidden", children: c.map((r, e) => /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => n(e),
+            "aria-label": `スライド ${e + 1}`,
+            className: o(
+              // shrink-0 必須: 空要素なので min-content 幅が 0、既定の flex-shrink:1 だとドットが消える
+              "size-2 shrink-0 rounded-full transition-colors",
+              e === s ? "bg-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Tertiary)]"
+            )
+          },
+          e
+        )) })
+      ]
+    }
+  );
+}
+export {
+  B as ImageCarousel
+};

package/dist/components/primitives/image-gallery.js

@@ -0,0 +1,177 @@
+import { jsxs as o, jsx as t, Fragment as b } from "react/jsx-runtime";
+import * as x from "react";
+import y from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import g from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { cn as n } from "../../lib/utils.js";
+function P({
+  images: r,
+  alts: c,
+  aspectRatio: h = "square",
+  showThumbnails: f = !1,
+  showDots: m = !0,
+  layout: v = "default",
+  className: i,
+  ...d
+}) {
+  const [a, p] = x.useState(0);
+  if (r.length === 0) return null;
+  const s = (l) => {
+    const e = (l % r.length + r.length) % r.length;
+    e !== a && p(e);
+  }, u = {
+    square: "aspect-square",
+    "4:3": "aspect-[4/3]",
+    "16:9": "aspect-video",
+    auto: ""
+  }[h];
+  return v === "pc-detail" ? /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "image-gallery",
+      className: n("flex flex-row-reverse gap-6", i),
+      ...d,
+      children: [
+        /* @__PURE__ */ o("div", { className: n("relative min-w-0 grow overflow-hidden rounded-lg", u), children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "flex h-full transition-transform duration-[var(--Motion-Duration-Slow)] ease-out",
+              style: { transform: `translateX(-${a * 100}%)` },
+              children: r.map((l, e) => /* @__PURE__ */ t(
+                "img",
+                {
+                  src: l,
+                  alt: c?.[e] ?? `画像 ${e + 1}`,
+                  className: "h-full w-full shrink-0 object-contain"
+                },
+                e
+              ))
+            }
+          ),
+          r.length > 1 && /* @__PURE__ */ o("span", { className: "absolute bottom-2 right-2 rounded-full bg-[var(--Overlay-Medium)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: [
+            a + 1,
+            " / ",
+            r.length
+          ] })
+        ] }),
+        r.length > 1 && /* @__PURE__ */ t("div", { className: "flex w-16 shrink-0 flex-col gap-2 overflow-y-auto scrollbar-hide", children: r.map((l, e) => /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => s(e),
+            onMouseOver: () => s(e),
+            className: n(
+              "size-16 shrink-0 overflow-hidden rounded-lg border-2 transition-colors",
+              e === a ? "border-[var(--Border-Accent-Primary)]" : "border-transparent opacity-60 hover:opacity-100"
+            ),
+            children: /* @__PURE__ */ t(
+              "img",
+              {
+                src: l,
+                alt: c?.[e] ?? `サムネイル ${e + 1}`,
+                className: "h-full w-full object-cover"
+              }
+            )
+          },
+          e
+        )) })
+      ]
+    }
+  ) : /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "image-gallery",
+      className: n("space-y-2", i),
+      ...d,
+      children: [
+        /* @__PURE__ */ o("div", { className: n("relative w-full overflow-hidden", u), children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "flex h-full transition-transform duration-[var(--Motion-Duration-Slow)] ease-out",
+              style: { transform: `translateX(-${a * 100}%)` },
+              children: r.map((l, e) => /* @__PURE__ */ t(
+                "img",
+                {
+                  src: l,
+                  alt: c?.[e] ?? `画像 ${e + 1}`,
+                  className: "h-full w-full shrink-0 object-cover"
+                },
+                e
+              ))
+            }
+          ),
+          r.length > 1 && /* @__PURE__ */ o(b, { children: [
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "absolute left-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--Surface-Primary)]/80 shadow-sm transition-colors hover:bg-[var(--Surface-Primary)]",
+                onClick: () => s(a - 1),
+                "aria-label": "前の画像",
+                children: /* @__PURE__ */ t(y, { size: 20, className: "text-[var(--Text-High-Emphasis)]" })
+              }
+            ),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "absolute right-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--Surface-Primary)]/80 shadow-sm transition-colors hover:bg-[var(--Surface-Primary)]",
+                onClick: () => s(a + 1),
+                "aria-label": "次の画像",
+                children: /* @__PURE__ */ t(g, { size: 20, className: "text-[var(--Text-High-Emphasis)]" })
+              }
+            )
+          ] }),
+          r.length > 1 && /* @__PURE__ */ o("span", { className: "absolute bottom-2 right-2 rounded-full bg-[var(--Overlay-Medium)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: [
+            a + 1,
+            " / ",
+            r.length
+          ] })
+        ] }),
+        m && r.length > 1 && /* @__PURE__ */ t("div", { className: "flex flex-wrap justify-center gap-0.5", children: r.map((l, e) => /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => s(e),
+            className: "flex h-6 shrink-0 items-center justify-center px-0.5",
+            "aria-label": `画像 ${e + 1}`,
+            children: /* @__PURE__ */ t(
+              "span",
+              {
+                className: n(
+                  "h-1.5 shrink-0 rounded-full transition-all",
+                  e === a ? "w-4 bg-[var(--Brand-Cake-Orange)]" : "w-1.5 bg-[var(--Text-Low-Emphasis)]/30"
+                )
+              }
+            )
+          },
+          e
+        )) }),
+        f && r.length > 1 && /* @__PURE__ */ t("div", { className: "flex gap-1.5 overflow-x-auto scrollbar-hide", children: r.map((l, e) => /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => s(e),
+            className: n(
+              "size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors",
+              e === a ? "border-[var(--Brand-Cake-Orange)]" : "border-transparent opacity-60 hover:opacity-100"
+            ),
+            children: /* @__PURE__ */ t(
+              "img",
+              {
+                src: l,
+                alt: c?.[e] ?? `サムネイル ${e + 1}`,
+                className: "h-full w-full object-cover"
+              }
+            )
+          },
+          e
+        )) })
+      ]
+    }
+  );
+}
+export {
+  P as ImageGallery
+};