@cakejp/design-system 0.20.0 → 0.21.0

package/dist/components/primitives/date-picker.js

@@ -1,176 +1,214 @@
 "use client";
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import * as y from "react";
-import v from "iconsax-reactjs/dist/esm/Calendar.js";
-import { X as H } from "lucide-react";
-import { ja as A } from "react-day-picker/locale";
-import { cn as S } from "../../lib/utils.js";
-import { Button as N } from "../foundations/button.js";
-import { Calendar as P } from "../foundations/calendar.js";
-import { Popover as z, PopoverTrigger as j, PopoverContent as k } from "../foundations/popover.js";
-import { Select as M, SelectTrigger as C, SelectValue as w, SelectContent as D, SelectItem as E } from "../foundations/select.js";
-const $ = ["日", "月", "火", "水", "木", "金", "土"];
-function T(e) {
-  return `${e.getMonth() + 1}月${e.getDate()}日（${$[e.getDay()]}）`;
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import * as d from "react";
+import j from "iconsax-reactjs/dist/esm/Calendar.js";
+import { X as k } from "lucide-react";
+import { ja as B } from "react-day-picker/locale";
+import { cn as $ } from "../../lib/utils.js";
+import { useFieldLabelling as D, resolveNativeFieldAria as F } from "../../lib/field-labelling.js";
+import { Button as A } from "../foundations/button.js";
+import { Calendar as R } from "../foundations/calendar.js";
+import { Popover as V, PopoverTrigger as _, PopoverContent as J } from "../foundations/popover.js";
+import { Select as T, SelectTrigger as w, SelectValue as E, SelectContent as H, SelectItem as P } from "../foundations/select.js";
+const O = ["日", "月", "火", "水", "木", "金", "土"];
+function z(e) {
+  return `${e.getMonth() + 1}月${e.getDate()}日（${O[e.getDay()]}）`;
 }
-function V(e, o, s) {
-  const a = [];
-  return e && a.push({ before: e }), o && a.push({ after: o }), s && (Array.isArray(s) ? a.push(...s) : a.push(s)), a.length > 0 ? a : void 0;
+function K(e, n, a) {
+  const s = [];
+  return e && s.push({ before: e }), n && s.push({ after: n }), a && (Array.isArray(a) ? s.push(...a) : s.push(a)), s.length > 0 ? s : void 0;
 }
-function _({
+function W({
   value: e,
-  onChange: o,
-  placeholder: s = "日付を選択",
-  min: a,
-  max: l,
-  disabledDates: p,
-  disabled: c,
-  clearable: u = !1,
-  clearLabel: f = "日付をクリア",
-  id: g,
-  className: b
+  onChange: n,
+  placeholder: a = "日付を選択",
+  min: s,
+  max: g,
+  disabledDates: S,
+  disabled: m,
+  clearable: N = !1,
+  clearLabel: h = "日付をクリア",
+  id: l,
+  "aria-invalid": b,
+  "aria-describedby": u,
+  className: M
 }) {
-  const [m, h] = y.useState(!1), d = V(a, l, p), t = u && !!e && !c;
+  const [y, v] = d.useState(!1), C = K(s, g, S), p = N && !!e && !m, x = d.useRef(null), f = `${d.useId()}-value`, r = D(), i = F(
+    { id: l, "aria-describedby": u, "aria-invalid": b },
+    r
+  ), o = r ? { "aria-labelledby": `${r.labelId} ${f}` } : { "aria-label": e ? z(e) : a };
   return (
     // クリアボタンは trigger の「兄弟」として絶対配置する。trigger の内側に置くと
     // button の入れ子になり a11y 上不正（Chip removable と同じ解決）。
-    /* @__PURE__ */ n("div", { className: S("relative w-full", b), children: [
-      /* @__PURE__ */ n(z, { open: m, onOpenChange: h, children: [
-        /* @__PURE__ */ r(j, { asChild: !0, children: /* @__PURE__ */ n(
-          N,
+    /* @__PURE__ */ c("div", { className: $("relative w-full", M), children: [
+      /* @__PURE__ */ c(V, { open: y, onOpenChange: v, children: [
+        /* @__PURE__ */ t(_, { asChild: !0, children: /* @__PURE__ */ c(
+          A,
           {
-            id: g,
+            ref: x,
+            id: l,
+            "aria-invalid": b,
+            "aria-describedby": u,
+            ...i,
             type: "button",
             variant: "ghost",
-            disabled: c,
-            "aria-label": e ? T(e) : s,
+            disabled: m,
+            ...o,
             "data-empty": !e,
-            className: S(
+            className: $(
               // h-11（44px）= 入力コントロールの共通高さ（Input / SelectTrigger / Button default と揃える）
               "h-11 w-full justify-start gap-2 border border-[var(--Border-High-Emphasis)] bg-transparent px-3 typo-body-md text-[var(--Text-High-Emphasis)] hover:border-[var(--Focus-High-Emphasis)] hover:bg-[var(--Surface-Secondary)] data-[empty=true]:text-[var(--Text-Low-Emphasis)]",
+              // エラー時の枠は Input / Select と同じ Border-Caution（Button 共通の destructive を上書き）
+              "aria-invalid:border-[var(--Border-Caution)]",
               // クリアボタンの領域を空ける
-              t && "pr-10"
+              p && "pr-10"
             ),
             children: [
-              /* @__PURE__ */ r(v, { size: 16, className: "shrink-0" }),
-              /* @__PURE__ */ r("span", { className: "truncate", children: e ? T(e) : s })
+              /* @__PURE__ */ t(j, { size: 16, className: "shrink-0" }),
+              /* @__PURE__ */ t("span", { id: r ? f : void 0, className: "truncate", children: e ? z(e) : a })
             ]
           }
         ) }),
-        /* @__PURE__ */ r(k, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ r(
-          P,
+        /* @__PURE__ */ t(J, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ t(
+          R,
           {
             mode: "single",
             selected: e,
-            onSelect: (i) => {
-              o?.(i), h(!1);
+            onSelect: (I) => {
+              n?.(I), v(!1);
             },
-            disabled: d,
-            locale: A,
+            disabled: C,
+            locale: B,
             autoFocus: !0
           }
         ) })
       ] }),
-      t && /* @__PURE__ */ r(
-        N,
+      p && /* @__PURE__ */ t(
+        A,
         {
           type: "button",
           variant: "ghost",
           size: "icon-sm",
-          "aria-label": f,
-          onClick: () => o?.(void 0),
+          "aria-label": h,
+          onClick: () => {
+            n?.(void 0), x.current?.focus();
+          },
           className: "absolute top-1/2 right-1 -translate-y-1/2 text-[var(--Text-Medium-Emphasis)]",
-          children: /* @__PURE__ */ r(H, { className: "size-4" })
+          children: /* @__PURE__ */ t(k, { className: "size-4" })
         }
       )
     ] })
   );
 }
-function Y({
+function te({
   value: e,
-  onChange: o,
-  minuteStep: s = 5,
-  hourLabel: a = "時",
-  minuteLabel: l = "分",
-  clearLabel: p = "日時をクリア",
-  disabled: c,
-  className: u,
-  ...f
+  onChange: n,
+  minuteStep: a = 5,
+  hourLabel: s = "時",
+  minuteLabel: g = "分",
+  clearLabel: S = "日時をクリア",
+  disabled: m,
+  className: N,
+  "aria-invalid": h,
+  "aria-describedby": l,
+  ...b
 }) {
-  const g = y.useMemo(
-    () => Array.from({ length: 24 }, (t, i) => i),
+  const u = D(), M = d.useId(), y = (r, i) => {
+    if (!u) return { "aria-label": i };
+    const o = `${M}-${r}`;
+    return {
+      id: o,
+      "aria-label": i,
+      "aria-labelledby": `${u.labelId} ${o}`
+    };
+  }, v = d.useMemo(
+    () => Array.from({ length: 24 }, (r, i) => i),
     []
-  ), b = y.useMemo(
+  ), C = d.useMemo(
     () => Array.from(
-      { length: Math.ceil(60 / s) },
-      (t, i) => i * s
+      { length: Math.ceil(60 / a) },
+      (r, i) => i * a
     ),
-    [s]
-  ), m = (t, i) => {
+    [a]
+  ), p = (r, i) => {
     if (!e) return;
-    const x = new Date(e);
-    t === "hours" ? x.setHours(Number(i)) : x.setMinutes(Number(i)), o?.(x);
-  }, h = (t) => {
-    if (!t || !e) {
-      o?.(t);
+    const o = new Date(e);
+    r === "hours" ? o.setHours(Number(i)) : o.setMinutes(Number(i)), n?.(o);
+  }, x = (r) => {
+    if (!r || !e) {
+      n?.(r);
       return;
     }
-    const i = new Date(t);
+    const i = new Date(r);
     i.setHours(
       e.getHours(),
       e.getMinutes(),
       e.getSeconds(),
       e.getMilliseconds()
-    ), o?.(i);
-  }, d = c || !e;
-  return /* @__PURE__ */ n("div", { className: S("flex items-center gap-2", u), children: [
-    /* @__PURE__ */ r(
-      _,
+    ), n?.(i);
+  }, f = m || !e;
+  return /* @__PURE__ */ c("div", { className: $("flex items-center gap-2", N), children: [
+    /* @__PURE__ */ t(
+      W,
       {
-        ...f,
+        ...b,
         value: e,
-        onChange: h,
-        disabled: c,
-        clearLabel: p,
+        onChange: x,
+        disabled: m,
+        clearLabel: S,
+        "aria-invalid": h,
+        "aria-describedby": l,
         className: "flex-1"
       }
     ),
-    /* @__PURE__ */ n(
-      M,
+    /* @__PURE__ */ c(
+      T,
       {
         value: e ? String(e.getHours()) : void 0,
-        onValueChange: (t) => m("hours", t),
-        disabled: d,
+        onValueChange: (r) => p("hours", r),
+        disabled: f,
         children: [
-          /* @__PURE__ */ r(C, { size: "default", className: "w-[72px]", "aria-label": a, children: /* @__PURE__ */ r(w, { placeholder: a }) }),
-          /* @__PURE__ */ r(D, { children: g.map((t) => /* @__PURE__ */ r(E, { value: String(t), children: String(t).padStart(2, "0") }, t)) })
+          /* @__PURE__ */ t(
+            w,
+            {
+              size: "default",
+              className: "w-[72px]",
+              ...y("hour", s),
+              "aria-invalid": h,
+              "aria-describedby": l,
+              children: /* @__PURE__ */ t(E, { placeholder: s })
+            }
+          ),
+          /* @__PURE__ */ t(H, { children: v.map((r) => /* @__PURE__ */ t(P, { value: String(r), children: String(r).padStart(2, "0") }, r)) })
         ]
       }
     ),
-    /* @__PURE__ */ r("span", { className: "typo-body-md text-[var(--Text-Medium-Emphasis)]", children: ":" }),
-    /* @__PURE__ */ n(
-      M,
+    /* @__PURE__ */ t("span", { className: "typo-body-md text-[var(--Text-Medium-Emphasis)]", children: ":" }),
+    /* @__PURE__ */ c(
+      T,
       {
         value: e ? String(e.getMinutes()) : void 0,
-        onValueChange: (t) => m("minutes", t),
-        disabled: d,
+        onValueChange: (r) => p("minutes", r),
+        disabled: f,
         children: [
-          /* @__PURE__ */ r(
-            C,
+          /* @__PURE__ */ t(
+            w,
             {
               size: "default",
               className: "w-[72px]",
-              "aria-label": l,
-              children: /* @__PURE__ */ r(w, { placeholder: l })
+              ...y("minute", g),
+              "aria-invalid": h,
+              "aria-describedby": l,
+              children: /* @__PURE__ */ t(E, { placeholder: g })
             }
           ),
-          /* @__PURE__ */ r(D, { children: b.map((t) => /* @__PURE__ */ r(E, { value: String(t), children: String(t).padStart(2, "0") }, t)) })
+          /* @__PURE__ */ t(H, { children: C.map((r) => /* @__PURE__ */ t(P, { value: String(r), children: String(r).padStart(2, "0") }, r)) })
         ]
       }
     )
   ] });
 }
 export {
-  _ as DatePicker,
-  Y as DateTimePicker
+  W as DatePicker,
+  te as DateTimePicker
 };

package/dist/components/primitives/footer.js

@@ -1,13 +1,12 @@
 "use client";
-import { jsxs as s, Fragment as H, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, Fragment as M, 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,
+function H({
+  title: o,
   children: i
 }) {
-  const [r, o] = v.useState(!1), t = v.useRef(null), [n, c] = v.useState(0);
+  const [r, l] = 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: [
@@ -21,10 +20,10 @@ function B({
           "typo-body-md text-[var(--Text-High-Emphasis)]",
           "cursor-pointer"
         ),
-        onClick: () => o(!r),
+        onClick: () => l(!r),
         "aria-expanded": r,
         children: [
-          /* @__PURE__ */ e("span", { children: l }),
+          /* @__PURE__ */ e("span", { children: o }),
           /* @__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(
@@ -51,11 +50,11 @@ function B({
     )
   ] });
 }
-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(
+function g({ groups: o, linkComponent: i }) {
+  const r = o.length <= 4 ? "@lg:grid-cols-4" : o.length === 5 ? "@lg:grid-cols-5" : "@lg:grid-cols-6";
+  return /* @__PURE__ */ e("div", { className: d("grid grid-cols-3 gap-6", r), children: o.map((l) => /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ e("h3", { className: "typo-label-md text-[var(--Text-High-Emphasis)] mb-3", children: l.title }),
+    /* @__PURE__ */ e("ul", { className: "space-y-1.5", children: l.links.map((t) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
       b,
       {
         link: t,
@@ -64,7 +63,7 @@ function g({ groups: l, linkComponent: i }) {
         children: t.label
       }
     ) }, t.label)) }),
-    o.subGroups?.map((t) => /* @__PURE__ */ s("div", { className: "mt-4", children: [
+    l.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,
@@ -76,27 +75,27 @@ function g({ groups: l, linkComponent: i }) {
         }
       ) }, n.label)) })
     ] }, t.title))
-  ] }, o.title)) });
+  ] }, l.title)) });
 }
 function b({
-  link: l,
+  link: o,
   linkComponent: i,
   className: r,
-  children: o
+  children: l
 }) {
-  const t = w(i, l.external);
+  const t = o.external ? "a" : i ?? "a";
   return /* @__PURE__ */ e(
     t,
     {
-      href: l.href,
+      href: o.href,
       className: r,
-      ...l.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-      children: o
+      ...o.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      children: l
     }
   );
 }
-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(
+function E({ links: o, linkComponent: i }) {
+  return /* @__PURE__ */ e("ul", { children: o.map((r) => /* @__PURE__ */ e("li", { className: "border-b border-[var(--Border-Low-Emphasis)] last:border-b-0", children: /* @__PURE__ */ s(
     b,
     {
       link: r,
@@ -123,24 +122,24 @@ function E({ links: l, linkComponent: i }) {
     }
   ) }, r.label)) });
 }
-function D({
-  className: l,
+function j({
+  className: o,
   linkGroups: i = [],
   copyright: r = "© Cake.jp Co., Ltd.",
-  logo: o,
+  logo: l,
   logoHref: t = "/",
   socialLinks: n = [],
   description: c,
   paymentMethods: u = [],
   trustBadge: m,
   bottomLinks: y = [],
-  variant: T = "default",
-  bottomRightSlot: L,
+  variant: w = "default",
+  bottomRightSlot: T,
   linkComponent: h,
-  ...M
+  ...L
 }) {
-  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 }),
+  const x = w === "brand-first", N = h ?? "a", p = (l || c) && /* @__PURE__ */ s("div", { "data-slot": "footer-brand", className: "grid content-start gap-4", children: [
+    l && /* @__PURE__ */ e(N, { href: t, className: "block w-fit text-[var(--Text-High-Emphasis)]", children: l }),
     c && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: c })
   ] });
   return /* @__PURE__ */ s(
@@ -150,13 +149,13 @@ function D({
       style: { containerType: "inline-size" },
       className: d(
         "bg-[var(--Surface-Primary)] text-[var(--Text-Medium-Emphasis)]",
-        l
+        o
       ),
-      ...M,
+      ...L,
       children: [
-        i.length > 0 && /* @__PURE__ */ s(H, { children: [
+        i.length > 0 && /* @__PURE__ */ s(M, { 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("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(H, { 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 }),
@@ -291,7 +290,7 @@ function D({
               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
+                T
               ] })
             }
           )
@@ -301,7 +300,7 @@ function D({
             "data-slot": "footer-bottom",
             className: "border-t border-[var(--Border-Medium-Emphasis)] px-5 pt-8 pb-9 text-center",
             children: [
-              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 }) }),
+              l && /* @__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: l }) }),
               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 })
             ]
@@ -312,5 +311,5 @@ function D({
   );
 }
 export {
-  D as Footer
+  j as Footer
 };