@cakejp/design-system 0.20.0 → 0.21.0

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

@@ -1,116 +1,117 @@
-import { jsxs as a, jsx as e, Fragment as L } from "react/jsx-runtime";
+import { jsxs as t, jsx as e, Fragment as H } from "react/jsx-runtime";
 import "react";
-import M from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
-import S from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import I from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import R from "iconsax-reactjs/dist/esm/ArrowRight2.js";
 import { cn as l } from "../../lib/utils.js";
-import { Button as b } from "../foundations/button.js";
-const F = {
+import { Button as C } from "../foundations/button.js";
+const w = "typo-label-lg whitespace-nowrap text-[var(--Text-Medium-Emphasis)] underline underline-offset-4 hover:text-[var(--Text-High-Emphasis)]", _ = {
   "3xl": "h1",
   "2xl": "h2",
   xl: "h3",
   lg: "h4",
   md: "h5",
   sm: "h6"
-}, H = {
+}, F = {
   "3xl": "typo-heading-3xl",
   "2xl": "typo-heading-2xl",
   xl: "typo-heading-xl",
   lg: "typo-heading-lg",
   md: "typo-heading-md",
   sm: "typo-heading-sm"
-}, I = {
+}, K = {
   "5xl": "@md:typo-heading-5xl",
   "4xl": "@md:typo-heading-4xl"
 };
-function J({
+function Q({
   className: d,
-  title: w,
-  subtitle: c,
-  moreHref: t,
-  moreLabel: o = "もっと見る",
+  title: T,
+  subtitle: o,
+  moreHref: a,
+  moreLabel: c = "もっと見る",
   onMoreClick: h,
   action: m,
   onPrev: x,
-  onNext: p,
-  prevDisabled: C = !1,
-  nextDisabled: T = !1,
+  onNext: g,
+  prevDisabled: E = !1,
+  nextDisabled: k = !1,
   size: s = "lg",
-  desktopSize: g,
-  as: k,
-  align: j = "start",
+  desktopSize: p,
+  as: L,
+  align: B = "start",
   eyebrow: f,
+  linkComponent: j,
   ...u
 }) {
-  const A = k ?? F[s], E = ["3xl", "2xl", "xl", "lg"].includes(s), v = x || p, y = t || h, i = j === "center", z = !!t && !i, n = (y || m || v) && /* @__PURE__ */ a("div", { className: l("flex shrink-0 items-center gap-2", i && "justify-center"), children: [
-    y && (t ? /* @__PURE__ */ e(
-      "a",
+  const v = j ?? "a", M = L ?? _[s], S = ["3xl", "2xl", "xl", "lg"].includes(s), N = x || g, y = a || h, i = B === "center", z = !!a && !i, n = (y || m || N) && /* @__PURE__ */ t("div", { className: l("flex shrink-0 items-center gap-2", i && "justify-center"), children: [
+    y && (a ? /* @__PURE__ */ e(
+      v,
       {
-        href: t,
-        className: "typo-label-lg text-[var(--Text-Accent-Primary)] whitespace-nowrap",
+        href: a,
+        className: w,
         tabIndex: i ? void 0 : -1,
         "aria-hidden": i ? void 0 : "true",
-        children: o
+        children: c
       }
     ) : /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         onClick: h,
-        className: "typo-label-lg text-[var(--Text-Accent-Primary)] whitespace-nowrap",
-        children: o
+        className: w,
+        children: c
       }
     )),
     m,
-    v && /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+    N && /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
       /* @__PURE__ */ e(
-        b,
+        C,
         {
           variant: "ghost",
           size: "icon-sm",
           "aria-label": "前へ",
           onClick: x,
-          disabled: C,
-          className: "rounded-full border border-[var(--Border-Medium-Emphasis)]",
-          children: /* @__PURE__ */ e(M, { size: 16 })
+          disabled: E,
+          className: "rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))]",
+          children: /* @__PURE__ */ e(I, { size: 16 })
         }
       ),
       /* @__PURE__ */ e(
-        b,
+        C,
         {
           variant: "ghost",
           size: "icon-sm",
           "aria-label": "次へ",
-          onClick: p,
-          disabled: T,
-          className: "rounded-full border border-[var(--Border-Medium-Emphasis)]",
-          children: /* @__PURE__ */ e(S, { size: 16 })
+          onClick: g,
+          disabled: k,
+          className: "rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))]",
+          children: /* @__PURE__ */ e(R, { size: 16 })
         }
       )
     ] })
   ] }), r = /* @__PURE__ */ e(
-    A,
+    M,
     {
       className: l(
         "text-[var(--Text-High-Emphasis)]",
-        H[s],
-        g && I[g]
+        F[s],
+        p && K[p]
       ),
-      children: w
+      children: T
     }
-  ), N = c && /* @__PURE__ */ e(
+  ), b = o && /* @__PURE__ */ e(
     "p",
     {
       className: l(
         "text-[var(--Text-High-Emphasis)]",
-        E ? "typo-body-lg" : "typo-body-md"
+        S ? "typo-body-lg" : "typo-body-md"
       ),
-      children: c
+      children: o
     }
-  ), B = /* @__PURE__ */ a(L, { children: [
+  ), A = /* @__PURE__ */ t(H, { children: [
     r,
-    N
+    b
   ] });
-  return i ? /* @__PURE__ */ a(
+  return i ? /* @__PURE__ */ t(
     "div",
     {
       "data-slot": "section-header",
@@ -122,11 +123,11 @@ function J({
       ...u,
       children: [
         f,
-        B,
+        A,
         n && /* @__PURE__ */ e("div", { className: "pt-1", children: n })
       ]
     }
-  ) : /* @__PURE__ */ a(
+  ) : /* @__PURE__ */ t(
     "div",
     {
       "data-slot": "section-header",
@@ -135,17 +136,17 @@ function J({
       ...u,
       children: [
         f,
-        /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ a("div", { className: "flex items-baseline justify-between gap-2 min-w-0", children: [
-            z ? /* @__PURE__ */ e("a", { href: t, className: "min-w-0 flex-1", children: r }) : /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: r }),
+        /* @__PURE__ */ t("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ t("div", { className: "flex items-baseline justify-between gap-2 min-w-0", children: [
+            z ? /* @__PURE__ */ e(v, { href: a, className: "min-w-0 flex-1", children: r }) : /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: r }),
             n
           ] }),
-          N
+          b
         ] })
       ]
     }
   );
 }
 export {
-  J as SectionHeader
+  Q as SectionHeader
 };

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

@@ -1,98 +1,99 @@
-import { jsx as n, jsxs as v } from "react/jsx-runtime";
+import { jsx as a, jsxs as y } from "react/jsx-runtime";
 import "react";
-import x from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import { cn as u } from "../../lib/utils.js";
-import { Separator as b } from "../foundations/separator.js";
-function g(r) {
-  const s = `/iframe.html?id=${encodeURIComponent(r)}&viewMode=story`;
+import g from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { cn as x } from "../../lib/utils.js";
+import { Separator as S } from "../foundations/separator.js";
+function w(e) {
+  const s = `/iframe.html?id=${encodeURIComponent(e)}&viewMode=story`;
   window.location.href = s;
 }
-function f(r) {
-  return r.length > 1 ? r.replace(/\/+$/, "") : r;
+function u(e) {
+  return e.length > 1 ? e.replace(/\/+$/, "") : e;
 }
-function S(r, s) {
-  const { activeMenu: m, currentPath: h, activeMatch: o, isActive: p } = s, c = r.flatMap((t) => t.items);
-  if (p)
-    return new Set(c.filter(p).map((t) => t.key));
-  if (h != null) {
-    const t = f(h);
+function N(e, s) {
+  const { activeMenu: l, currentPath: m, activeMatch: o, isActive: h } = s, c = e.flatMap((r) => r.items);
+  if (h)
+    return new Set(c.filter(h).map((r) => r.key));
+  if (m != null) {
+    const r = u(m);
     if (o === "prefix") {
-      let a, i = -1;
-      for (const l of c) {
-        const e = f(l.href);
-        (t === e || t.startsWith(e + "/")) && e.length > i && (a = l.key, i = e.length);
+      let t, p = -1;
+      for (const d of c) {
+        const n = u(d.href);
+        (r === n || r.startsWith(n + "/")) && n.length > p && (t = d.key, p = n.length);
       }
-      return new Set(a ? [a] : []);
+      return new Set(t ? [t] : []);
     }
     return new Set(
-      c.filter((a) => f(a.href) === t).map((a) => a.key)
+      c.filter((t) => u(t.href) === r).map((t) => t.key)
     );
   }
-  return new Set(m != null ? [m] : []);
+  return new Set(l != null ? [l] : []);
 }
-function E({
-  activeMenu: r,
+function M({
+  activeMenu: e,
   currentPath: s,
-  activeMatch: m = "exact",
-  isActive: h,
+  activeMatch: l = "exact",
+  isActive: m,
   groups: o,
-  ariaLabel: p = "サイドメニュー",
-  className: c,
+  ariaLabel: h = "サイドメニュー",
+  linkComponent: c,
+  className: r,
   ...t
 }) {
-  const a = S(o, {
-    activeMenu: r,
+  const p = c ?? "a", d = N(o, {
+    activeMenu: e,
     currentPath: s,
-    activeMatch: m,
-    isActive: h
+    activeMatch: l,
+    isActive: m
   });
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ a(
     "nav",
     {
       "data-slot": "side-nav",
-      className: u(
+      className: x(
         "w-64 shrink-0 bg-[var(--Surface-Primary)] border-r border-[var(--Border-Low-Emphasis)]",
-        c
+        r
       ),
-      "aria-label": p,
+      "aria-label": h,
       ...t,
-      children: /* @__PURE__ */ n("div", { className: "py-4", children: o.map((i, l) => /* @__PURE__ */ v("div", { className: "mb-1", children: [
-        i.groupLabel && /* @__PURE__ */ n("p", { className: "px-4 py-2 typo-label-xs text-[var(--Text-Low-Emphasis)] uppercase", children: i.groupLabel }),
-        /* @__PURE__ */ n("ul", { children: i.items.map((e) => {
-          const d = a.has(e.key);
-          return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ v(
-            "a",
+      children: /* @__PURE__ */ a("div", { className: "py-4", children: o.map((n, f) => /* @__PURE__ */ y("div", { className: "mb-1", children: [
+        n.groupLabel && /* @__PURE__ */ a("p", { className: "px-4 py-2 typo-label-xs text-[var(--Text-Low-Emphasis)] uppercase", children: n.groupLabel }),
+        /* @__PURE__ */ a("ul", { children: n.items.map((i) => {
+          const v = d.has(i.key);
+          return /* @__PURE__ */ a("li", { children: /* @__PURE__ */ y(
+            p,
             {
-              href: e.href,
-              onClick: (y) => {
-                e.storyId && (y.preventDefault(), g(e.storyId));
+              href: i.href,
+              onClick: (b) => {
+                i.storyId && (b.preventDefault(), w(i.storyId));
               },
-              className: u(
+              className: x(
                 // hover はモーショントークン参照（prefers-reduced-motion で自動停止する）。
                 // 素の transition-colors は Tailwind 既定値でトークン制御が効かない（#201）
                 "flex items-center gap-3 px-4 py-2.5 typo-body-md transition-colors duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] hover:bg-[var(--Surface-Secondary)] cursor-pointer",
-                d ? "border-l-2 border-[var(--Brand-Cake-Orange)] text-[var(--Text-Accent-Primary)] bg-[var(--Surface-Accent-Primary-Light)] pl-3.5" : "text-[var(--Text-High-Emphasis)] border-l-2 border-transparent"
+                v ? "border-l-2 border-[var(--Brand-Cake-Orange)] text-[var(--Text-Accent-Primary)] bg-[var(--Surface-Accent-Primary-Light)] pl-3.5" : "text-[var(--Text-High-Emphasis)] border-l-2 border-transparent"
               ),
-              "aria-current": d ? "page" : void 0,
+              "aria-current": v ? "page" : void 0,
               children: [
-                /* @__PURE__ */ n(
+                /* @__PURE__ */ a(
                   "span",
                   {
-                    className: d ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Object-High-Emphasis)]",
-                    children: e.icon
+                    className: v ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Object-High-Emphasis)]",
+                    children: i.icon
                   }
                 ),
-                /* @__PURE__ */ n("span", { className: "flex-1", children: e.label }),
-                /* @__PURE__ */ n(x, { size: 14, className: "text-[var(--Object-Low-Emphasis)]" })
+                /* @__PURE__ */ a("span", { className: "flex-1", children: i.label }),
+                /* @__PURE__ */ a(g, { size: 14, className: "text-[var(--Object-Low-Emphasis)]" })
               ]
             }
-          ) }, e.key);
+          ) }, i.key);
         }) }),
-        l < o.length - 1 && /* @__PURE__ */ n(b, { className: "my-2 mx-4" })
-      ] }, l)) })
+        f < o.length - 1 && /* @__PURE__ */ a(S, { className: "my-2 mx-4" })
+      ] }, f)) })
     }
   );
 }
 export {
-  E as SideNav
+  M as SideNav
 };

package/dist/components/primitives/sub-nav.js

@@ -1,19 +1,18 @@
-import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
 import "react";
 import { cn as e } from "../../lib/utils.js";
-import { resolveLinkComponent as f } from "../../lib/link-component.js";
-import { containerVariants as g } from "./container.js";
+import { containerVariants as m } from "./container.js";
 const u = "px-4 md:px-6";
-function N({
-  className: t,
+function E({
+  className: o,
   items: x,
   variant: n = "text",
   linkComponent: b,
-  containerSize: o,
+  containerSize: s,
   ...l
 }) {
   const i = () => x.map((r) => {
-    const p = r.href ? f(b) : "button", v = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
+    const p = r.href ? b ?? "a" : "button", v = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
     return n === "chip" ? /* @__PURE__ */ a(
       p,
       {
@@ -25,7 +24,7 @@ function N({
         children: r.label
       },
       r.label
-    ) : /* @__PURE__ */ m(
+    ) : /* @__PURE__ */ f(
       p,
       {
         className: e(
@@ -40,14 +39,14 @@ function N({
       },
       r.label
     );
-  }), s = n === "chip", c = s ? "div" : "nav", d = s ? e("flex gap-2 overflow-x-auto py-2 scrollbar-hide", u) : e("flex gap-4 overflow-x-auto scrollbar-hide", u), h = s ? void 0 : "border-b border-[var(--Border-Low-Emphasis)]";
-  return o ? /* @__PURE__ */ a(c, { "data-slot": "sub-nav", className: e(h, t), ...l, children: /* @__PURE__ */ a(
+  }), t = n === "chip", c = t ? "div" : "nav", d = t ? e("flex gap-2 overflow-x-auto py-2 scrollbar-hide", u) : e("flex gap-4 overflow-x-auto scrollbar-hide", u), h = t ? void 0 : "border-b border-[var(--Border-Low-Emphasis)]";
+  return s ? /* @__PURE__ */ a(c, { "data-slot": "sub-nav", className: e(h, o), ...l, children: /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "sub-nav-container",
-      "data-container-size": o,
+      "data-container-size": s,
       className: e(
-        g({ size: o, gutter: "none" }),
+        m({ size: s, gutter: "none" }),
         d
       ),
       children: i()
@@ -56,12 +55,12 @@ function N({
     c,
     {
       "data-slot": "sub-nav",
-      className: e(h, d, t),
+      className: e(h, d, o),
       ...l,
       children: i()
     }
   );
 }
 export {
-  N as SubNav
+  E as SubNav
 };

package/dist/components/primitives/tag.js

@@ -8,6 +8,8 @@ const x = o(
     variants: {
       variant: {
         default: "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)] dark:bg-[var(--Surface-Tertiary)] dark:text-[var(--Text-High-Emphasis)] dark:ring-1 dark:ring-[var(--Border-Medium-Emphasis)]",
+        // 写真上のオーバーレイ用。画像の明暗に依存しない不透明な面を使う。
+        image: "bg-[var(--Primitive-Gray-900)] text-[var(--Primitive-White-alpha-1000)]",
         caution: "bg-[var(--Caution-Ultra-Light)] text-[var(--Text-Caution)] dark:bg-[var(--Text-Caution)]/20 dark:text-[var(--Text-Caution)]",
         sale: "bg-[var(--Surface-Caution)] text-[var(--Text-on-Inverse)]",
         warning: "bg-[var(--Primitive-Wood-100)] text-[var(--Text-Warning)]",
@@ -30,7 +32,7 @@ const x = o(
     }
   }
 );
-function u({
+function p({
   className: a,
   variant: r,
   size: t,
@@ -52,6 +54,6 @@ function u({
   );
 }
 export {
-  u as Tag,
+  p as Tag,
   x as tagVariants
 };