@cakejp/design-system 0.17.1 → 0.19.0

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

@@ -1,30 +1,30 @@
-import { jsxs as a, jsx as e, Fragment as z } from "react/jsx-runtime";
+import { jsxs as a, jsx as e, Fragment as L } from "react/jsx-runtime";
 import "react";
-import B from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
-import L from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import { cn as i } from "../../lib/utils.js";
+import M from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import S from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { cn as l } from "../../lib/utils.js";
 import { Button as b } from "../foundations/button.js";
-const M = {
+const F = {
   "3xl": "h1",
   "2xl": "h2",
   xl: "h3",
   lg: "h4",
   md: "h5",
   sm: "h6"
-}, S = {
+}, H = {
   "3xl": "typo-heading-3xl",
   "2xl": "typo-heading-2xl",
   xl: "typo-heading-xl",
   lg: "typo-heading-lg",
   md: "typo-heading-md",
   sm: "typo-heading-sm"
-}, F = {
+}, I = {
   "5xl": "@md:typo-heading-5xl",
   "4xl": "@md:typo-heading-4xl"
 };
-function D({
+function J({
   className: d,
-  title: N,
+  title: w,
   subtitle: c,
   moreHref: t,
   moreLabel: o = "もっと見る",
@@ -32,23 +32,23 @@ function D({
   action: m,
   onPrev: x,
   onNext: p,
-  prevDisabled: w = !1,
-  nextDisabled: C = !1,
+  prevDisabled: C = !1,
+  nextDisabled: T = !1,
   size: s = "lg",
   desktopSize: g,
-  as: T,
-  align: k = "start",
+  as: k,
+  align: j = "start",
   eyebrow: f,
-  ...y
+  ...u
 }) {
-  const j = T ?? M[s], A = ["3xl", "2xl", "xl", "lg"].includes(s), u = x || p, v = t || h, l = k === "center", E = !!t && !l, n = (v || m || u) && /* @__PURE__ */ a("div", { className: i("flex shrink-0 items-center gap-2", l && "justify-center"), children: [
-    v && (t ? /* @__PURE__ */ e(
+  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",
       {
         href: t,
         className: "typo-label-lg text-[var(--Text-Accent-Primary)] whitespace-nowrap",
-        tabIndex: l ? void 0 : -1,
-        "aria-hidden": l ? void 0 : "true",
+        tabIndex: i ? void 0 : -1,
+        "aria-hidden": i ? void 0 : "true",
         children: o
       }
     ) : /* @__PURE__ */ e(
@@ -61,7 +61,7 @@ function D({
       }
     )),
     m,
-    u && /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+    v && /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
       /* @__PURE__ */ e(
         b,
         {
@@ -69,9 +69,9 @@ function D({
           size: "icon-sm",
           "aria-label": "前へ",
           onClick: x,
-          disabled: w,
+          disabled: C,
           className: "rounded-full border border-[var(--Border-Medium-Emphasis)]",
-          children: /* @__PURE__ */ e(B, { size: 16 })
+          children: /* @__PURE__ */ e(M, { size: 16 })
         }
       ),
       /* @__PURE__ */ e(
@@ -81,48 +81,48 @@ function D({
           size: "icon-sm",
           "aria-label": "次へ",
           onClick: p,
-          disabled: C,
+          disabled: T,
           className: "rounded-full border border-[var(--Border-Medium-Emphasis)]",
-          children: /* @__PURE__ */ e(L, { size: 16 })
+          children: /* @__PURE__ */ e(S, { size: 16 })
         }
       )
     ] })
-  ] }), r = /* @__PURE__ */ a(z, { children: [
-    /* @__PURE__ */ e(
-      j,
-      {
-        className: i(
-          "text-[var(--Text-High-Emphasis)]",
-          S[s],
-          g && F[g]
-        ),
-        children: N
-      }
-    ),
-    c && /* @__PURE__ */ e(
-      "p",
-      {
-        className: i(
-          "text-[var(--Text-High-Emphasis)]",
-          A ? "typo-body-lg" : "typo-body-md"
-        ),
-        children: c
-      }
-    )
+  ] }), r = /* @__PURE__ */ e(
+    A,
+    {
+      className: l(
+        "text-[var(--Text-High-Emphasis)]",
+        H[s],
+        g && I[g]
+      ),
+      children: w
+    }
+  ), N = c && /* @__PURE__ */ e(
+    "p",
+    {
+      className: l(
+        "text-[var(--Text-High-Emphasis)]",
+        E ? "typo-body-lg" : "typo-body-md"
+      ),
+      children: c
+    }
+  ), B = /* @__PURE__ */ a(L, { children: [
+    r,
+    N
   ] });
-  return l ? /* @__PURE__ */ a(
+  return i ? /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "section-header",
       "data-align": "center",
-      className: i(
+      className: l(
         "flex flex-col items-center gap-2 text-center [&>p]:mx-auto [&>p]:max-w-2xl",
         d
       ),
-      ...y,
+      ...u,
       children: [
         f,
-        r,
+        B,
         n && /* @__PURE__ */ e("div", { className: "pt-1", children: n })
       ]
     }
@@ -131,18 +131,21 @@ function D({
     {
       "data-slot": "section-header",
       "data-align": "start",
-      className: i("flex flex-col gap-2", d),
-      ...y,
+      className: l("flex flex-col gap-2", d),
+      ...u,
       children: [
         f,
-        /* @__PURE__ */ a("div", { className: "flex items-baseline justify-between gap-2 min-w-0", children: [
-          E ? /* @__PURE__ */ e("a", { href: t, className: "flex min-w-0 flex-1 flex-col gap-1", children: r }) : /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: r }),
-          n
+        /* @__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 }),
+            n
+          ] }),
+          N
         ] })
       ]
     }
   );
 }
 export {
-  D as SectionHeader
+  J as SectionHeader
 };

package/dist/components/primitives/share-buttons.js

@@ -1,102 +1,110 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import * as n from "react";
+"use client";
+import { jsx as o, jsxs as u } from "react/jsx-runtime";
+import * as c from "react";
 import g from "iconsax-reactjs/dist/esm/Link2.js";
-import { cn as N } from "../../lib/utils.js";
-import { Button as i } from "../foundations/button.js";
-import { SocialIcon as c } from "../foundations/social-icon.js";
-function L({
-  className: m,
-  url: r = "",
-  text: p = "",
+import { cn as S } from "../../lib/utils.js";
+import { Button as h } from "../foundations/button.js";
+import { SocialIcon as l } from "../foundations/social-icon.js";
+const E = ["line", "x", "copy"], w = {
+  line: {
+    label: "LINE",
+    ariaLabel: "LINEでシェア",
+    href: (t) => `https://social-plugins.line.me/lineit/share?url=${encodeURIComponent(t)}`,
+    icon: /* @__PURE__ */ o(l, { platform: "line", size: 16 })
+  },
+  x: {
+    label: "X",
+    ariaLabel: "Xでシェア",
+    href: (t, a) => `https://twitter.com/intent/tweet?url=${encodeURIComponent(t)}&text=${encodeURIComponent(a)}`,
+    // X のブランド色は黒固定でダーク地に溶けるため、地の文字色に追従させる
+    icon: /* @__PURE__ */ o(l, { platform: "x", size: 14, tone: "mono" })
+  },
+  facebook: {
+    label: "Facebook",
+    ariaLabel: "Facebookでシェア",
+    href: (t) => `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(t)}`,
+    icon: /* @__PURE__ */ o(l, { platform: "facebook", size: 16 })
+  },
+  hatena: {
+    label: "はてブ",
+    ariaLabel: "はてなブックマークに追加",
+    href: (t, a) => `https://b.hatena.ne.jp/entry/panel/?url=${encodeURIComponent(t)}&title=${encodeURIComponent(a)}`,
+    icon: /* @__PURE__ */ o(l, { platform: "hatena", size: 16 })
+  }
+};
+function A({
+  className: t,
+  url: a = "",
+  text: s = "",
+  services: b = E,
   copyLabel: d = "URLをコピー",
-  copiedLabel: u = "コピーしました",
-  copyErrorLabel: f = "コピーできませんでした",
-  onCopy: h,
-  ...y
+  copiedLabel: y = "コピーしました",
+  copyErrorLabel: R = "コピーできませんでした",
+  onCopy: C,
+  ...L
 }) {
-  const [s, l] = n.useState(
+  const [p, m] = c.useState(
     "idle"
-  ), t = n.useRef(null);
-  n.useEffect(() => () => {
-    t.current && clearTimeout(t.current);
+  ), n = c.useRef(null);
+  c.useEffect(() => () => {
+    n.current && clearTimeout(n.current);
   }, []);
-  const b = async () => {
-    let a = "error";
+  const I = async () => {
+    let e = "error";
     try {
-      r && navigator.clipboard && (await navigator.clipboard.writeText(r), a = "success");
+      a && navigator.clipboard && (await navigator.clipboard.writeText(a), e = "success");
     } catch {
-      a = "error";
+      e = "error";
     }
-    l(a), h?.(a), t.current && clearTimeout(t.current), t.current = setTimeout(() => l("idle"), 2e3);
-  }, x = s === "success" ? u : s === "error" ? f : d;
+    m(e), C?.(e), n.current && clearTimeout(n.current), n.current = setTimeout(() => m("idle"), 2e3);
+  }, x = p === "success" ? y : p === "error" ? R : d, f = (e, r, i, k, U) => /* @__PURE__ */ o(h, { variant: "tertiary", size: "sm", className: "flex-1 gap-1.5", asChild: !0, children: /* @__PURE__ */ u("a", { href: r, target: "_blank", rel: "noopener noreferrer", "aria-label": i, children: [
+    k,
+    /* @__PURE__ */ o("span", { className: "typo-body-sm", children: U })
+  ] }) }, e);
   return /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "share-buttons",
-      className: N("flex items-center gap-2", m),
-      ...y,
-      children: [
-        /* @__PURE__ */ e(
-          i,
-          {
-            variant: "tertiary",
-            size: "sm",
-            className: "flex-1 gap-1.5",
-            asChild: !0,
-            children: /* @__PURE__ */ o(
-              "a",
-              {
-                href: `https://social-plugins.line.me/lineit/share?url=${encodeURIComponent(r)}`,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                "aria-label": "LINEでシェア",
-                children: [
-                  /* @__PURE__ */ e(c, { platform: "line", size: 16 }),
-                  /* @__PURE__ */ e("span", { className: "typo-body-sm", children: "LINE" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ e(
-          i,
-          {
-            variant: "tertiary",
-            size: "sm",
-            className: "flex-1 gap-1.5",
-            asChild: !0,
-            children: /* @__PURE__ */ o(
-              "a",
-              {
-                href: `https://twitter.com/intent/tweet?url=${encodeURIComponent(r)}&text=${encodeURIComponent(p)}`,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                "aria-label": "Xでシェア",
-                children: [
-                  /* @__PURE__ */ e(c, { platform: "x", size: 14, tone: "mono" }),
-                  /* @__PURE__ */ e("span", { className: "typo-body-sm", children: "X" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ o(
-          i,
-          {
-            variant: "tertiary",
-            size: "sm",
-            className: "flex-1 gap-1.5",
-            onClick: b,
-            children: [
-              /* @__PURE__ */ e(g, { size: 14, "aria-hidden": "true" }),
-              /* @__PURE__ */ e("span", { className: "typo-body-sm", "aria-live": "polite", children: x })
-            ]
-          }
-        )
-      ]
+      className: S("flex items-center gap-2", t),
+      ...L,
+      children: b.map((e) => {
+        if (typeof e != "string") {
+          const i = e.href.replace("{url}", encodeURIComponent(a)).replace("{text}", encodeURIComponent(s));
+          return f(
+            e.key,
+            i,
+            e.ariaLabel ?? e.label,
+            e.icon,
+            e.label
+          );
+        }
+        if (e === "copy")
+          return /* @__PURE__ */ u(
+            h,
+            {
+              variant: "tertiary",
+              size: "sm",
+              className: "flex-1 gap-1.5",
+              onClick: I,
+              children: [
+                /* @__PURE__ */ o(g, { size: 14, "aria-hidden": "true" }),
+                /* @__PURE__ */ o("span", { className: "typo-body-sm", "aria-live": "polite", children: x })
+              ]
+            },
+            "copy"
+          );
+        const r = w[e];
+        return f(
+          e,
+          r.href(a, s),
+          r.ariaLabel,
+          r.icon,
+          r.label
+        );
+      })
     }
   );
 }
 export {
-  L as ShareButtons
+  A as ShareButtons
 };

package/dist/components/primitives/status-count-tabs.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as l } from "react/jsx-runtime";
 import * as r from "react";
 import { cn as f } from "../../lib/utils.js";
@@ -8,12 +9,12 @@ function h({
   onSelect: n,
   className: u
 }) {
-  const [e, s] = r.useState(o);
+  const [s, a] = r.useState(o);
   r.useEffect(() => {
-    s(o);
+    a(o);
   }, [o]);
   const i = (t) => {
-    s(t), n?.(t);
+    a(t), n?.(t);
   };
   return /* @__PURE__ */ l(
     "div",
@@ -21,15 +22,15 @@ function h({
       "data-slot": "status-count-tabs",
       className: f("flex gap-2 overflow-x-auto scrollbar-hide", u),
       role: "tablist",
-      children: c.map((t, a) => /* @__PURE__ */ l(
+      children: c.map((t, e) => /* @__PURE__ */ l(
         m,
         {
-          selected: e === a,
+          selected: s === e,
           count: t.count,
           size: "sm",
-          onClick: () => i(a),
+          onClick: () => i(e),
           role: "tab",
-          "aria-selected": e === a,
+          "aria-selected": s === e,
           children: t.label
         },
         t.label

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

@@ -1,67 +1,67 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
 import "react";
-import { cn as a } from "../../lib/utils.js";
-function u({
-  className: s,
-  items: n,
-  variant: c = "text",
+import { cn as e } from "../../lib/utils.js";
+import { resolveLinkComponent as f } from "../../lib/link-component.js";
+import { containerVariants as g } from "./container.js";
+const u = "px-4 md:px-6";
+function N({
+  className: t,
+  items: x,
+  variant: n = "text",
+  linkComponent: b,
+  containerSize: o,
   ...l
 }) {
-  return c === "chip" ? /* @__PURE__ */ e(
+  const i = () => x.map((r) => {
+    const p = r.href ? f(b) : "button", v = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
+    return n === "chip" ? /* @__PURE__ */ a(
+      p,
+      {
+        className: e(
+          "shrink-0 rounded-full px-3 typo-label-sm transition-colors h-8 inline-flex items-center justify-center",
+          r.isActive ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]" : "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] hover:bg-[var(--Surface-Tertiary)]"
+        ),
+        ...v,
+        children: r.label
+      },
+      r.label
+    ) : /* @__PURE__ */ m(
+      p,
+      {
+        className: e(
+          "relative shrink-0 py-2.5 typo-label-md transition-colors",
+          r.isActive ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]"
+        ),
+        ...v,
+        children: [
+          r.label,
+          r.isActive && /* @__PURE__ */ a("span", { className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-[var(--Text-High-Emphasis)]" })
+        ]
+      },
+      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(
     "div",
     {
-      "data-slot": "sub-nav",
-      className: a(
-        "flex gap-2 overflow-x-auto px-4 py-2 scrollbar-hide",
-        s
+      "data-slot": "sub-nav-container",
+      "data-container-size": o,
+      className: e(
+        g({ size: o, gutter: "none" }),
+        d
       ),
-      ...l,
-      children: n.map((r) => {
-        const o = r.href ? "a" : "button", t = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
-        return /* @__PURE__ */ e(
-          o,
-          {
-            className: a(
-              "shrink-0 rounded-full px-3 typo-label-sm transition-colors h-8 inline-flex items-center justify-center",
-              r.isActive ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]" : "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] hover:bg-[var(--Surface-Tertiary)]"
-            ),
-            ...t,
-            children: r.label
-          },
-          r.label
-        );
-      })
+      children: i()
     }
-  ) : /* @__PURE__ */ e(
-    "nav",
+  ) }) : /* @__PURE__ */ a(
+    c,
     {
       "data-slot": "sub-nav",
-      className: a(
-        "flex gap-4 overflow-x-auto border-b border-[var(--Border-Low-Emphasis)] px-4 scrollbar-hide",
-        s
-      ),
+      className: e(h, d, t),
       ...l,
-      children: n.map((r) => {
-        const o = r.href ? "a" : "button", t = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
-        return /* @__PURE__ */ i(
-          o,
-          {
-            className: a(
-              "relative shrink-0 py-2.5 typo-label-md transition-colors",
-              r.isActive ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]"
-            ),
-            ...t,
-            children: [
-              r.label,
-              r.isActive && /* @__PURE__ */ e("span", { className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-[var(--Text-High-Emphasis)]" })
-            ]
-          },
-          r.label
-        );
-      })
+      children: i()
     }
   );
 }
 export {
-  u as SubNav
+  N as SubNav
 };