@cakejp/design-system 0.17.0 → 0.19.0

package/dist/components/primitives/footer.js

@@ -1,36 +1,38 @@
-import { jsxs as t, Fragment as u, jsx as e } from "react/jsx-runtime";
-import * as h from "react";
-import { cn as c } from "../../lib/utils.js";
-function y({
+"use client";
+import { jsxs as s, Fragment as H, jsx as e } from "react/jsx-runtime";
+import * as v from "react";
+import { cn as d } from "../../lib/utils.js";
+import { resolveLinkComponent as w } from "../../lib/link-component.js";
+function B({
   title: l,
-  children: s
+  children: i
 }) {
-  const [i, a] = h.useState(!1), o = h.useRef(null), [d, m] = h.useState(0);
-  return h.useEffect(() => {
-    o.current && m(o.current.scrollHeight);
-  }, [i]), /* @__PURE__ */ t("div", { "data-slot": "footer-accordion", children: [
-    /* @__PURE__ */ t(
+  const [r, o] = v.useState(!1), t = v.useRef(null), [n, c] = v.useState(0);
+  return v.useEffect(() => {
+    t.current && c(t.current.scrollHeight);
+  }, [r]), /* @__PURE__ */ s("div", { "data-slot": "footer-accordion", children: [
+    /* @__PURE__ */ s(
       "button",
       {
         type: "button",
-        className: c(
+        className: d(
           "flex w-full items-center justify-between",
           "border-t border-[var(--Border-Low-Emphasis)] px-5 py-5",
           "typo-body-md text-[var(--Text-High-Emphasis)]",
           "cursor-pointer"
         ),
-        onClick: () => a(!i),
-        "aria-expanded": i,
+        onClick: () => o(!r),
+        "aria-expanded": r,
         children: [
           /* @__PURE__ */ e("span", { children: l }),
-          /* @__PURE__ */ t("span", { className: "relative size-3 shrink-0", children: [
+          /* @__PURE__ */ s("span", { className: "relative size-3 shrink-0", children: [
             /* @__PURE__ */ e("span", { className: "absolute top-1/2 left-0 block h-px w-3 -translate-y-1/2 bg-[var(--Text-High-Emphasis)] transition-transform duration-[var(--Motion-Duration-Base)]" }),
             /* @__PURE__ */ e(
               "span",
               {
-                className: c(
+                className: d(
                   "absolute top-1/2 left-0 block h-px w-3 -translate-y-1/2 bg-[var(--Text-High-Emphasis)] transition-transform duration-[var(--Motion-Duration-Base)]",
-                  i ? "rotate-0" : "rotate-90"
+                  r ? "rotate-0" : "rotate-90"
                 )
               }
             )
@@ -41,54 +43,71 @@ function y({
     /* @__PURE__ */ e(
       "div",
       {
-        ref: o,
+        ref: t,
         className: "overflow-hidden transition-[max-height] duration-[var(--Motion-Duration-Base)] ease-in-out",
-        style: { maxHeight: i ? `${d}px` : "0px" },
-        children: /* @__PURE__ */ e("div", { className: "bg-[var(--Surface-Secondary)]", children: s })
+        style: { maxHeight: r ? `${n}px` : "0px" },
+        children: /* @__PURE__ */ e("div", { className: "bg-[var(--Surface-Secondary)]", children: i })
       }
     )
   ] });
 }
-function N({ groups: l }) {
-  const s = l.length <= 4 ? "@lg:grid-cols-4" : l.length === 5 ? "@lg:grid-cols-5" : "@lg:grid-cols-6";
-  return /* @__PURE__ */ e("div", { className: c("grid grid-cols-3 gap-6", s), children: l.map((i) => /* @__PURE__ */ t("div", { children: [
-    /* @__PURE__ */ e("h3", { className: "typo-label-md text-[var(--Text-High-Emphasis)] mb-3", children: i.title }),
-    /* @__PURE__ */ e("ul", { className: "space-y-1.5", children: i.links.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-      "a",
+function g({ groups: l, linkComponent: i }) {
+  const r = l.length <= 4 ? "@lg:grid-cols-4" : l.length === 5 ? "@lg:grid-cols-5" : "@lg:grid-cols-6";
+  return /* @__PURE__ */ e("div", { className: d("grid grid-cols-3 gap-6", r), children: l.map((o) => /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ e("h3", { className: "typo-label-md text-[var(--Text-High-Emphasis)] mb-3", children: o.title }),
+    /* @__PURE__ */ e("ul", { className: "space-y-1.5", children: o.links.map((t) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+      b,
       {
-        href: a.href,
+        link: t,
+        linkComponent: i,
         className: "typo-body-sm text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]",
-        ...a.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-        children: a.label
+        children: t.label
       }
-    ) }, a.label)) }),
-    i.subGroups?.map((a) => /* @__PURE__ */ t("div", { className: "mt-4", children: [
-      /* @__PURE__ */ e("h4", { className: "typo-label-md text-[var(--Text-High-Emphasis)] mb-3", children: a.title }),
-      /* @__PURE__ */ e("ul", { className: "space-y-1.5", children: a.links.map((o) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-        "a",
+    ) }, t.label)) }),
+    o.subGroups?.map((t) => /* @__PURE__ */ s("div", { className: "mt-4", children: [
+      /* @__PURE__ */ e("h4", { className: "typo-label-md text-[var(--Text-High-Emphasis)] mb-3", children: t.title }),
+      /* @__PURE__ */ e("ul", { className: "space-y-1.5", children: t.links.map((n) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+        b,
         {
-          href: o.href,
+          link: n,
+          linkComponent: i,
           className: "typo-body-sm text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]",
-          ...o.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-          children: o.label
+          children: n.label
         }
-      ) }, o.label)) })
-    ] }, a.title))
-  ] }, i.title)) });
+      ) }, n.label)) })
+    ] }, t.title))
+  ] }, o.title)) });
 }
-function b({ links: l }) {
-  return /* @__PURE__ */ e("ul", { children: l.map((s) => /* @__PURE__ */ e("li", { className: "border-b border-[var(--Border-Low-Emphasis)] last:border-b-0", children: /* @__PURE__ */ t(
-    "a",
+function b({
+  link: l,
+  linkComponent: i,
+  className: r,
+  children: o
+}) {
+  const t = w(i, l.external);
+  return /* @__PURE__ */ e(
+    t,
+    {
+      href: l.href,
+      className: r,
+      ...l.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      children: o
+    }
+  );
+}
+function E({ links: l, linkComponent: i }) {
+  return /* @__PURE__ */ e("ul", { children: l.map((r) => /* @__PURE__ */ e("li", { className: "border-b border-[var(--Border-Low-Emphasis)] last:border-b-0", children: /* @__PURE__ */ s(
+    b,
     {
-      href: s.href,
-      className: c(
+      link: r,
+      linkComponent: i,
+      className: d(
         "flex items-center justify-between px-5 py-5",
         "typo-body-sm text-[var(--Text-Medium-Emphasis)]",
         "hover:text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]"
       ),
-      ...s.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
       children: [
-        /* @__PURE__ */ e("span", { children: s.label }),
+        /* @__PURE__ */ e("span", { children: r.label }),
         /* @__PURE__ */ e(
           "svg",
           {
@@ -102,139 +121,189 @@ function b({ links: l }) {
         )
       ]
     }
-  ) }, s.label)) });
+  ) }, r.label)) });
 }
-function w({
+function D({
   className: l,
-  linkGroups: s = [],
-  copyright: i = "© Cake.jp Co., Ltd.",
-  logo: a,
-  logoHref: o = "/",
-  socialLinks: d = [],
-  description: m,
-  paymentMethods: x = [],
-  trustBadge: n,
-  bottomLinks: v = [],
-  ...f
+  linkGroups: i = [],
+  copyright: r = "© Cake.jp Co., Ltd.",
+  logo: o,
+  logoHref: t = "/",
+  socialLinks: n = [],
+  description: c,
+  paymentMethods: u = [],
+  trustBadge: m,
+  bottomLinks: y = [],
+  variant: T = "default",
+  bottomRightSlot: L,
+  linkComponent: h,
+  ...M
 }) {
-  return /* @__PURE__ */ t(
+  const x = T === "brand-first", N = w(h), p = (o || c) && /* @__PURE__ */ s("div", { "data-slot": "footer-brand", className: "grid content-start gap-4", children: [
+    o && /* @__PURE__ */ e(N, { href: t, className: "block w-fit text-[var(--Text-High-Emphasis)]", children: o }),
+    c && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: c })
+  ] });
+  return /* @__PURE__ */ s(
     "footer",
     {
       "data-slot": "footer",
       style: { containerType: "inline-size" },
-      className: c(
+      className: d(
         "bg-[var(--Surface-Primary)] text-[var(--Text-Medium-Emphasis)]",
         l
       ),
-      ...f,
+      ...M,
       children: [
-        s.length > 0 && /* @__PURE__ */ t(u, { children: [
-          /* @__PURE__ */ e("nav", { "aria-label": "フッターナビゲーション", "data-slot": "footer-links", className: "border-t border-[var(--Border-Medium-Emphasis)] @lg:hidden", children: s.map((r) => /* @__PURE__ */ t(y, { title: r.title, children: [
-            /* @__PURE__ */ e(b, { links: r.links }),
-            r.subGroups?.map((p) => /* @__PURE__ */ t("div", { children: [
-              /* @__PURE__ */ e("div", { className: "border-t border-[var(--Border-Low-Emphasis)] px-5 py-5 typo-body-md text-[var(--Text-High-Emphasis)]", children: p.title }),
-              /* @__PURE__ */ e(b, { links: p.links })
-            ] }, p.title))
-          ] }, r.title)) }),
+        i.length > 0 && /* @__PURE__ */ s(H, { children: [
+          x && p && /* @__PURE__ */ e("div", { className: "border-t border-[var(--Border-Medium-Emphasis)] px-5 py-8 @lg:hidden", children: p }),
+          /* @__PURE__ */ e("nav", { "aria-label": "フッターナビゲーション", "data-slot": "footer-links", className: d("border-t border-[var(--Border-Medium-Emphasis)] @lg:hidden", x && "border-t-0"), children: i.map((a) => /* @__PURE__ */ s(B, { title: a.title, children: [
+            /* @__PURE__ */ e(E, { links: a.links, linkComponent: h }),
+            a.subGroups?.map((f) => /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ e("div", { className: "border-t border-[var(--Border-Low-Emphasis)] px-5 py-5 typo-body-md text-[var(--Text-High-Emphasis)]", children: f.title }),
+              /* @__PURE__ */ e(E, { links: f.links, linkComponent: h })
+            ] }, f.title))
+          ] }, a.title)) }),
           /* @__PURE__ */ e(
             "nav",
             {
               "aria-label": "フッターナビゲーション",
               "data-slot": "footer-links-pc",
               className: "hidden @lg:block border-t border-[var(--Border-Medium-Emphasis)]",
-              children: /* @__PURE__ */ e("div", { className: "mx-auto max-w-[1065px] px-5 py-16", children: /* @__PURE__ */ e(N, { groups: s }) })
+              children: /* @__PURE__ */ e("div", { className: "mx-auto max-w-[1065px] px-5 py-16", children: x ? (
+                // FooterColumnNav は 1 つの grid 子としてリンク群をまとめて持つ。
+                // auto-fit だと nav 全体が 1 トラックに潰れて中で再分割されるため、
+                // ブランド列と nav 領域の比率を明示する（求人サイトの 1.6 : 3.4 相当）。
+                // brandBlock が無い（logo も description も未指定）ときに 2 カラムへ
+                // すると nav が 1.6fr のブランド側トラックへ入って左に寄るため、
+                // その場合は nav 単独レイアウトにする。
+                /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: d(
+                      "grid gap-8",
+                      p && "@lg:grid-cols-[minmax(0,1.6fr)_minmax(0,3.4fr)]"
+                    ),
+                    children: [
+                      p,
+                      /* @__PURE__ */ e(g, { groups: i, linkComponent: h })
+                    ]
+                  }
+                )
+              ) : /* @__PURE__ */ e(g, { groups: i, linkComponent: h }) })
             }
           )
         ] }),
-        d.length > 0 && /* @__PURE__ */ e(
+        x && i.length === 0 && p && /* @__PURE__ */ e(
+          "div",
+          {
+            "data-slot": "footer-brand-only",
+            className: "border-t border-[var(--Border-Medium-Emphasis)] px-5 py-8 @lg:py-16",
+            children: /* @__PURE__ */ e("div", { className: "mx-auto max-w-[1065px]", children: p })
+          }
+        ),
+        n.length > 0 && /* @__PURE__ */ e(
           "div",
           {
             "data-slot": "footer-social",
             className: "flex flex-wrap items-center justify-center gap-4 px-4 py-6 @sm:gap-8 @sm:px-0 @sm:py-8",
-            children: d.map((r) => /* @__PURE__ */ e(
+            children: n.map((a) => /* @__PURE__ */ e(
               "a",
               {
-                href: r.href,
-                className: c(
+                href: a.href,
+                className: d(
                   // shrink-0 必須: SNS アイコンの 40px タッチターゲットを flex row で保つ
                   "flex size-10 shrink-0 items-center justify-center",
                   "text-[var(--Text-High-Emphasis)]",
                   "transition-colors duration-[var(--Motion-Duration-Fast)] hover:text-[var(--Text-Medium-Emphasis)]"
                 ),
-                "aria-label": r.label,
+                "aria-label": a.label,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                children: r.icon
+                children: a.icon
               },
-              r.label
+              a.label
             ))
           }
         ),
-        x.length > 0 && /* @__PURE__ */ t(
+        u.length > 0 && /* @__PURE__ */ s(
           "div",
           {
             "data-slot": "footer-payment",
             className: "border-t border-[var(--Border-Low-Emphasis)] px-5 py-6",
             children: [
               /* @__PURE__ */ e("p", { className: "typo-label-sm text-[var(--Text-Low-Emphasis)] text-center mb-3", children: "お支払い方法" }),
-              /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-center gap-1.5 @sm:gap-2", children: x.map((r) => /* @__PURE__ */ e(
+              /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-center gap-1.5 @sm:gap-2", children: u.map((a) => /* @__PURE__ */ e(
                 "div",
                 {
                   className: "flex items-center justify-center",
-                  "aria-label": r.label,
-                  children: r.icon
+                  "aria-label": a.label,
+                  children: a.icon
                 },
-                r.label
+                a.label
               )) })
             ]
           }
         ),
-        n && /* @__PURE__ */ t(
+        m && /* @__PURE__ */ s(
           "div",
           {
             "data-slot": "footer-trust",
             className: "flex items-center gap-3 border-t border-[var(--Border-Low-Emphasis)] px-5 py-5",
             children: [
-              n.href ? /* @__PURE__ */ e(
+              m.href ? /* @__PURE__ */ e(
                 "a",
                 {
-                  href: n.href,
+                  href: m.href,
                   target: "_blank",
                   rel: "noopener noreferrer",
                   className: "shrink-0",
-                  children: n.icon
+                  children: m.icon
                 }
-              ) : /* @__PURE__ */ e("div", { className: "shrink-0", children: n.icon }),
-              n.description && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)]", children: n.description })
+              ) : /* @__PURE__ */ e("div", { className: "shrink-0", children: m.icon }),
+              m.description && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)]", children: m.description })
             ]
           }
         ),
-        v.length > 0 && /* @__PURE__ */ e(
+        y.length > 0 && /* @__PURE__ */ e(
           "div",
           {
             "data-slot": "footer-bottom-links",
             className: "border-t border-[var(--Border-Low-Emphasis)] px-5 py-4",
-            children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-center gap-x-3 gap-y-2 @sm:gap-x-4", children: v.map((r) => /* @__PURE__ */ e(
-              "a",
+            children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-center gap-x-3 gap-y-2 @sm:gap-x-4", children: y.map((a) => /* @__PURE__ */ e(
+              b,
               {
-                href: r.href,
+                link: a,
+                linkComponent: h,
                 className: "typo-body-xs text-[var(--Text-Low-Emphasis)] hover:text-[var(--Text-Medium-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]",
-                ...r.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-                children: r.label
+                children: a.label
               },
-              r.label
+              a.label
             )) })
           }
         ),
-        /* @__PURE__ */ t(
+        x ? (
+          // ロゴ・説明文はブランド列で出し済みなので、ここはコピーライトと
+          // bottomRightSlot（Powered by 等）を左右に振り分けるだけにする。
+          /* @__PURE__ */ e(
+            "div",
+            {
+              "data-slot": "footer-bottom",
+              className: "border-t border-[var(--Border-Medium-Emphasis)] px-5 py-5",
+              children: /* @__PURE__ */ s("div", { className: "mx-auto flex max-w-[1065px] flex-col gap-3 typo-body-sm text-[var(--Text-Low-Emphasis)] @lg:flex-row @lg:items-center @lg:justify-between", children: [
+                /* @__PURE__ */ e("p", { children: r }),
+                L
+              ] })
+            }
+          )
+        ) : /* @__PURE__ */ s(
           "div",
           {
             "data-slot": "footer-bottom",
             className: "border-t border-[var(--Border-Medium-Emphasis)] px-5 pt-8 pb-9 text-center",
             children: [
-              a && /* @__PURE__ */ e("div", { className: "mx-auto w-fit max-w-[160px]", children: /* @__PURE__ */ e("a", { href: o, className: "block text-[var(--Text-High-Emphasis)]", children: a }) }),
-              m && /* @__PURE__ */ e("p", { className: "mt-6 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: m }),
-              /* @__PURE__ */ e("p", { className: "mt-5 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: i })
+              o && /* @__PURE__ */ e("div", { className: "mx-auto w-fit max-w-[160px]", children: /* @__PURE__ */ e(N, { href: t, className: "block text-[var(--Text-High-Emphasis)]", children: o }) }),
+              c && /* @__PURE__ */ e("p", { className: "mt-6 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: c }),
+              /* @__PURE__ */ e("p", { className: "mt-5 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: r })
             ]
           }
         )
@@ -243,5 +312,5 @@ function w({
   );
 }
 export {
-  w as Footer
+  D as Footer
 };

package/dist/components/primitives/form-field.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import * as u from "react";
 import { cn as y } from "../../lib/utils.js";