@cakejp/design-system 0.20.1 → 0.21.0

package/dist/components/primitives/number-input.js

@@ -1,93 +1,104 @@
 "use client";
-import { jsxs as $, jsx as r } from "react/jsx-runtime";
-import * as v from "react";
-import P from "iconsax-reactjs/dist/esm/Add.js";
-import F from "iconsax-reactjs/dist/esm/Minus.js";
-import A from "iconsax-reactjs/dist/esm/Trash.js";
-import { cn as i } from "../../lib/utils.js";
+import { jsxs as V, jsx as r } from "react/jsx-runtime";
+import * as l from "react";
+import J from "iconsax-reactjs/dist/esm/Add.js";
+import Q from "iconsax-reactjs/dist/esm/Minus.js";
+import q from "iconsax-reactjs/dist/esm/Trash.js";
+import { cn as n } from "../../lib/utils.js";
 import { FOCUS_RING as c } from "../../lib/focus-ring.js";
-function _({
+import { HIGH_CONTRAST_OUTLINE as le } from "../../lib/high-contrast.js";
+import { useFieldLabelling as ce, mergeIdRefs as ue } from "../../lib/field-labelling.js";
+function de({
   className: D,
-  value: N,
-  defaultValue: K,
-  min: l = 1,
-  max: f = 99,
-  step: B = 1,
-  onChange: L,
+  value: M,
+  defaultValue: W,
+  min: u = 1,
+  max: S = 99,
+  step: O = 1,
+  onChange: X,
   disabled: a = !1,
-  error: g = !1,
-  size: R = "md",
+  error: Y,
+  size: Z = "md",
   editable: h = !0,
-  showTrash: U = !1,
-  onDelete: V,
-  formatOptions: x,
-  locale: G = "ja-JP",
-  inputId: M,
-  label: n = "数量",
-  ...C
+  showTrash: ee = !1,
+  onDelete: re,
+  formatOptions: I,
+  locale: te = "ja-JP",
+  inputId: ae,
+  label: H,
+  ...z
 }) {
-  const O = N !== void 0, z = v.useCallback(
-    (e) => Math.min(f, Math.max(l, e)),
-    [l, f]
-  ), [J, Q] = v.useState(() => z(K ?? l)), t = O ? N : J, [y, S] = v.useState(!1), [E, u] = v.useState(String(t)), s = U && t <= l, m = t > l && !a, d = t < f && !a, b = s && !a;
-  v.useEffect(() => {
-    y || u(String(t));
-  }, [t, y]);
+  const p = H ?? "数量", o = ce(), ne = l.useId(), s = H === void 0 ? o?.labelId : void 0, f = Y ?? !!o?.errorId, $ = s ? { "aria-labelledby": s } : { "aria-label": p }, L = ae ?? o?.controlId, A = {
+    ...s ? { "aria-labelledby": s } : { "aria-label": `${p}を入力` },
+    "aria-describedby": o ? ue(o.descriptionId, o.errorId) : void 0,
+    "aria-invalid": f || void 0
+  }, B = (e, i, se) => {
+    if (!s) return { "aria-label": se };
+    const G = `${ne}-${e}`;
+    return { id: G, "aria-label": i, "aria-labelledby": `${s} ${G}` };
+  }, F = M !== void 0, P = l.useCallback(
+    (e) => Math.min(S, Math.max(u, e)),
+    [u, S]
+  ), [ie, oe] = l.useState(() => P(W ?? u)), t = F ? M : ie, [E, N] = l.useState(!1), [T, d] = l.useState(String(t)), m = ee && t <= u, v = t > u && !a, b = t < S && !a, g = m && !a, R = m ? B("decrement", "削除", "削除") : B("decrement", "減らす", `${p}を減らす`), K = B("increment", "増やす", `${p}を増やす`), y = (e) => a ? { disabled: !0 } : { "aria-disabled": e ? void 0 : !0 };
+  l.useEffect(() => {
+    E || d(String(t));
+  }, [t, E]);
   const k = (e) => {
-    const o = z(e);
-    O || Q(o), u(String(o)), L?.(o);
-  }, T = () => {
-    if (s) {
-      V?.();
+    const i = P(e);
+    F || oe(i), d(String(i)), X?.(i);
+  }, j = () => {
+    if (m) {
+      re?.();
       return;
     }
-    m && k(t - B);
-  }, j = () => {
-    d && k(t + B);
-  }, H = (e) => {
-    const o = e.target.value;
-    (o === "" || /^-?\d*$/.test(o)) && u(o);
+    v && k(t - O);
   }, w = () => {
-    const e = parseInt(E, 10);
-    k(Number.isNaN(e) ? t : e), S(!1);
-  }, I = (e) => {
+    b && k(t + O);
+  }, U = (e) => {
+    const i = e.target.value;
+    (i === "" || /^-?\d*$/.test(i)) && d(i);
+  }, C = () => {
+    const e = parseInt(T, 10);
+    k(Number.isNaN(e) ? t : e), N(!1);
+  }, _ = (e) => {
     if (e.key === "Enter") {
-      w();
+      C();
       return;
     }
-    e.key === "ArrowUp" && (e.preventDefault(), j()), e.key === "ArrowDown" && (e.preventDefault(), T());
-  }, p = y ? E : x ? new Intl.NumberFormat(G, x).format(t).replace(/￥/g, "¥") : E;
-  return R === "sm" ? /* @__PURE__ */ $(
+    e.key === "ArrowUp" && (e.preventDefault(), w()), e.key === "ArrowDown" && (e.preventDefault(), j());
+  }, x = E ? T : I ? new Intl.NumberFormat(te, I).format(t).replace(/￥/g, "¥") : T;
+  return Z === "sm" ? /* @__PURE__ */ V(
     "div",
     {
       "data-slot": "number-input",
       "data-editable": h || void 0,
-      className: i(
+      className: n(
         // px-1（4px）は上下の余白（(36-28)/2 = 4px）と揃える値。
         // ホバー時の円が外枠に対して上下左右とも同じ内側余白で収まる
         // shrink-0 必須: カート行など flex row の子として置かれるため、既定の flex-shrink:1 だと 108px が潰れる
         "inline-flex h-9 w-[108px] shrink-0 items-center justify-between rounded-full bg-[var(--Surface-Tertiary)] px-1",
-        g && "ring-2 ring-[var(--Surface-Caution)]",
+        le,
+        f && "ring-2 ring-[var(--Surface-Caution)]",
         a && "cursor-not-allowed",
         D
       ),
       role: "group",
-      "aria-label": n,
-      ...C,
+      ...$,
+      ...z,
       children: [
         /* @__PURE__ */ r(
           "button",
           {
             type: "button",
-            className: i(
+            className: n(
               "flex size-7 shrink-0 items-center justify-center rounded-full transition-colors outline-none",
               c,
-              m || b ? "text-[var(--Object-High-Emphasis)] hover:bg-[var(--Overlay-Light)] active:bg-[var(--Overlay-Medium)]" : "text-[var(--Object-Disable)]"
+              v || g ? "text-[var(--Object-High-Emphasis)] hover:bg-[var(--Overlay-Light)] active:bg-[var(--Overlay-Medium)]" : "text-[var(--Object-Disable)]"
             ),
-            onClick: T,
-            disabled: !(m || b),
-            "aria-label": s ? "削除" : `${n}を減らす`,
-            children: s ? /* @__PURE__ */ r(A, { size: 14 }) : /* @__PURE__ */ r(F, { size: 14 })
+            onClick: j,
+            ...y(v || g),
+            ...R,
+            children: m ? /* @__PURE__ */ r(q, { size: 14 }) : /* @__PURE__ */ r(Q, { size: 14 })
           }
         ),
         h ? /* @__PURE__ */ r(
@@ -96,76 +107,76 @@ function _({
             type: "text",
             inputMode: "numeric",
             pattern: "[0-9]*",
-            id: M,
-            value: p,
+            id: L,
+            value: x,
             onFocus: () => {
-              S(!0), u(String(t));
+              N(!0), d(String(t));
             },
-            onChange: H,
-            onBlur: w,
-            onKeyDown: I,
+            onChange: U,
+            onBlur: C,
+            onKeyDown: _,
             disabled: a,
-            className: i(
+            className: n(
               "w-7 shrink-0 rounded bg-transparent text-center typo-label-md outline-none transition-colors",
               "hover:bg-[var(--Overlay-Light)] focus-visible:bg-[var(--Surface-Primary)]",
               c,
               a ? "text-[var(--Text-Disable)]" : "text-[var(--Text-High-Emphasis)]"
             ),
-            "aria-label": `${n}を入力`,
+            ...A,
             "aria-live": "polite"
           }
         ) : /* @__PURE__ */ r(
           "span",
           {
-            className: i(
+            className: n(
               "w-7 shrink-0 select-none text-center typo-label-md",
               a ? "text-[var(--Text-Disable)]" : "text-[var(--Text-High-Emphasis)]"
             ),
             "aria-live": "polite",
             "aria-atomic": "true",
-            children: p
+            children: x
           }
         ),
         /* @__PURE__ */ r(
           "button",
           {
             type: "button",
-            className: i(
+            className: n(
               "flex size-7 shrink-0 items-center justify-center rounded-full transition-colors outline-none",
               c,
-              d ? "text-[var(--Object-High-Emphasis)] hover:bg-[var(--Overlay-Light)] active:bg-[var(--Overlay-Medium)]" : "text-[var(--Object-Disable)]"
+              b ? "text-[var(--Object-High-Emphasis)] hover:bg-[var(--Overlay-Light)] active:bg-[var(--Overlay-Medium)]" : "text-[var(--Object-Disable)]"
             ),
-            onClick: j,
-            disabled: !d,
-            "aria-label": `${n}を増やす`,
-            children: /* @__PURE__ */ r(P, { size: 14 })
+            onClick: w,
+            ...y(b),
+            ...K,
+            children: /* @__PURE__ */ r(J, { size: 14 })
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ $(
+  ) : /* @__PURE__ */ V(
     "div",
     {
       "data-slot": "number-input",
       "data-editable": h || void 0,
-      className: i("inline-flex shrink-0 items-center gap-3", D),
+      className: n("inline-flex shrink-0 items-center gap-3", D),
       role: "group",
-      "aria-label": n,
-      ...C,
+      ...$,
+      ...z,
       children: [
         /* @__PURE__ */ r(
           "button",
           {
             type: "button",
-            className: i(
+            className: n(
               "flex size-10 shrink-0 items-center justify-center rounded-full border transition-colors outline-none",
               c,
-              m || b ? "border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Object-High-Emphasis)] hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Tertiary)] active:bg-[var(--Surface-Tertiary)]" : "border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Object-Disable)]"
+              v || g ? "border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] text-[var(--Object-High-Emphasis)] hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Tertiary)] active:bg-[var(--Surface-Tertiary)]" : "border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Object-Disable)]"
             ),
-            onClick: T,
-            disabled: !(m || b),
-            "aria-label": s ? "削除" : `${n}を減らす`,
-            children: s ? /* @__PURE__ */ r(A, { size: 18 }) : /* @__PURE__ */ r(F, { size: 18 })
+            onClick: j,
+            ...y(v || g),
+            ...R,
+            children: m ? /* @__PURE__ */ r(q, { size: 18 }) : /* @__PURE__ */ r(Q, { size: 18 })
           }
         ),
         h ? /* @__PURE__ */ r(
@@ -174,63 +185,63 @@ function _({
             type: "text",
             inputMode: "numeric",
             pattern: "[0-9]*",
-            id: M,
-            value: p,
+            id: L,
+            value: x,
             onFocus: () => {
-              S(!0), u(String(t));
+              N(!0), d(String(t));
             },
-            onChange: H,
-            onBlur: w,
-            onKeyDown: I,
+            onChange: U,
+            onBlur: C,
+            onKeyDown: _,
             disabled: a,
-            className: i(
+            className: n(
               // formatOptions で桁が増えるため、内容に応じて広がるよう min-w にしている
               "h-10 shrink-0 rounded-lg border text-center typo-label-lg outline-none transition-colors",
               // 既定は Figma 準拠の固定幅。桁区切り・通貨表示のときだけ内容に追従させる
               // （input は size 属性由来の既定幅を持つため、w-12 を外すと 200px 超に広がる）
-              x ? "field-sizing-content min-w-12 max-w-40 px-2" : "w-12",
-              g ? "border-[var(--Border-Caution)]" : "border-[var(--Border-Medium-Emphasis)] hover:border-[var(--Border-High-Emphasis)]",
+              I ? "field-sizing-content min-w-12 max-w-40 px-2" : "w-12",
+              f ? "border-[var(--Border-Caution)]" : "border-[var(--Border-Control,var(--Border-Medium-Emphasis))] hover:border-[var(--Border-High-Emphasis)]",
               c,
               a ? "bg-[var(--Surface-Tertiary)] text-[var(--Text-Disable)]" : "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)]"
             ),
-            "aria-label": `${n}を入力`,
+            ...A,
             "aria-live": "polite"
           }
         ) : /* @__PURE__ */ r(
           "span",
           {
-            className: i(
+            className: n(
               // span は内容幅なので min-w-12 で Figma の 48px を下限にする
               "flex h-10 min-w-12 shrink-0 items-center justify-center rounded-lg border px-2 text-center typo-label-lg",
-              g ? "border-[var(--Border-Caution)]" : "border-[var(--Border-Medium-Emphasis)]",
+              f ? "border-[var(--Border-Caution)]" : "border-[var(--Border-Control,var(--Border-Medium-Emphasis))]",
               a ? "bg-[var(--Surface-Tertiary)] text-[var(--Text-Disable)]" : "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)]"
             ),
             "aria-live": "polite",
             "aria-atomic": "true",
-            children: p
+            children: x
           }
         ),
         /* @__PURE__ */ r(
           "button",
           {
             type: "button",
-            className: i(
+            className: n(
               "flex size-10 shrink-0 items-center justify-center rounded-full border transition-colors outline-none",
               c,
-              d ? "border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Object-High-Emphasis)] hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Tertiary)] active:bg-[var(--Surface-Tertiary)]" : "border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Object-Disable)]"
+              b ? "border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] text-[var(--Object-High-Emphasis)] hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Tertiary)] active:bg-[var(--Surface-Tertiary)]" : "border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Object-Disable)]"
             ),
-            onClick: j,
-            disabled: !d,
-            "aria-label": `${n}を増やす`,
-            children: /* @__PURE__ */ r(P, { size: 18 })
+            onClick: w,
+            ...y(b),
+            ...K,
+            children: /* @__PURE__ */ r(J, { size: 18 })
           }
         )
       ]
     }
   );
 }
-const re = _;
+const xe = de;
 export {
-  _ as NumberInput,
-  re as QuantitySelector
+  de as NumberInput,
+  xe as QuantitySelector
 };

package/dist/components/primitives/scroll-row.js

@@ -0,0 +1,21 @@
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+import { cn as e } from "../../lib/utils.js";
+function i({ bleed: r = !0, snap: o = !1, className: t, ...a }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-slot": "scroll-row",
+      className: e(
+        "-my-1 flex gap-3 overflow-x-auto py-1 [-webkit-overflow-scrolling:touch] *:shrink-0",
+        r && "-mx-[var(--Container-Gutter,0px)] px-[var(--Container-Gutter,0px)] scroll-px-[var(--Container-Gutter,0px)]",
+        o && "snap-x snap-mandatory *:snap-start",
+        t
+      ),
+      ...a
+    }
+  );
+}
+export {
+  i as ScrollRow
+};

package/dist/components/primitives/search-bar.js

@@ -3,44 +3,44 @@ import { jsxs as N, Fragment as S, jsx as o } from "react/jsx-runtime";
 import * as s from "react";
 import E from "iconsax-reactjs/dist/esm/SearchNormal1.js";
 import { cn as i } from "../../lib/utils.js";
-import { FOCUS_RING_INSET as R, FOCUS_RING_WITHIN as T } from "../../lib/focus-ring.js";
-const C = s.forwardRef(
+import { FOCUS_RING_INSET as C, FOCUS_RING_WITHIN as R } from "../../lib/focus-ring.js";
+const B = s.forwardRef(
   ({
     className: v,
     placeholder: y = "キーワードを入力してください",
-    onSearch: c,
+    onSearch: l,
     size: a = "md",
-    searchHref: m,
-    action: l,
+    searchHref: c,
+    action: m,
     name: u,
     ...d
-  }, r) => {
-    const t = !!l, n = s.useRef(null), x = s.useCallback(
-      (e) => {
-        n.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
+  }, e) => {
+    const t = !!m, n = s.useRef(null), x = s.useCallback(
+      (r) => {
+        n.current = r, typeof e == "function" ? e(r) : e && (e.current = r);
       },
-      [r]
+      [e]
     ), h = () => {
-      const e = n.current?.value ?? "";
-      e.trim() && (c?.(e), m && (window.location.href = m.replace(
+      const r = n.current?.value ?? "";
+      r.trim() && (l?.(r), c && (window.location.href = c.replace(
         "{query}",
-        encodeURIComponent(e)
+        encodeURIComponent(r)
       )));
-    }, g = (e) => {
-      e.key === "Enter" && !t && h(), d.onKeyDown?.(e);
-    }, w = (e) => {
+    }, w = (r) => {
+      r.key === "Enter" && !t && h(), d.onKeyDown?.(r);
+    }, g = (r) => {
       const b = n.current?.value ?? "";
       if (!b.trim()) {
-        e.preventDefault();
+        r.preventDefault();
         return;
       }
-      c?.(b);
+      l?.(b);
     }, f = i(
-      "group flex items-center overflow-hidden rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Secondary)] transition-colors",
+      "group flex items-center overflow-hidden rounded-lg border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] transition-colors",
       // Tailwind の variant 順では focus-within が hover より先に出力される
       // ＝ hover が後勝ちしてフォーカス枠を潰すため、hover 側を明示的に抑制する。
       "hover:not-focus-within:border-[var(--Border-High-Emphasis)]",
-      T,
+      R,
       a === "sm" ? "h-9" : "h-11",
       v
     ), p = /* @__PURE__ */ N(S, { children: [
@@ -56,7 +56,7 @@ const C = s.forwardRef(
             "min-w-0 flex-1 bg-transparent px-3 text-[var(--Text-High-Emphasis)] outline-none placeholder:text-[var(--Text-Low-Emphasis)]",
             a === "sm" ? "typo-body-sm" : "typo-body-md"
           ),
-          onKeyDown: g,
+          onKeyDown: w,
           ...d
         }
       ),
@@ -65,10 +65,13 @@ const C = s.forwardRef(
         {
           type: t ? "submit" : "button",
           className: i(
-            "flex shrink-0 items-center justify-center border-l border-[var(--Border-Medium-Emphasis)] text-[var(--Text-Low-Emphasis)] transition-colors outline-none hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)]",
+            "flex shrink-0 items-center justify-center border-l border-[var(--Border-Control,var(--Border-Medium-Emphasis))] text-[var(--Text-Low-Emphasis)] transition-colors outline-none hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)]",
             // 親が overflow-hidden なので外向きリングは切れる。内側に描く。
-            R,
-            a === "sm" ? "size-9" : "h-11 w-11"
+            C,
+            // 高さは親の枠（border 1px）の内側いっぱい（h-full）。以前は親と同じ高さ（h-9 / h-11）で、
+            // 上下 1px が親の overflow-hidden に切り取られ、内側のリング・輪郭線も 1px 切れていた。
+            // 切られていた 1px は元から見えないので、静止時の見た目は変わらない
+            a === "sm" ? "h-full w-9" : "h-full w-11"
           ),
           onClick: t ? void 0 : h,
           "aria-label": "検索",
@@ -80,17 +83,17 @@ const C = s.forwardRef(
       "form",
       {
         "data-slot": "search-bar",
-        action: l,
+        action: m,
         method: "get",
         role: "search",
-        onSubmit: w,
+        onSubmit: g,
         className: f,
         children: p
       }
     ) : /* @__PURE__ */ o("div", { "data-slot": "search-bar", className: f, children: p });
   }
 );
-C.displayName = "SearchBar";
+B.displayName = "SearchBar";
 export {
-  C as SearchBar
+  B as SearchBar
 };