@cakejp/design-system 0.20.1 → 0.21.0

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

@@ -1,34 +1,35 @@
-import { jsxs as l, jsx as a, Fragment as w } from "react/jsx-runtime";
+import { jsxs as s, jsx as a, Fragment as N } from "react/jsx-runtime";
 import "react";
-import { cn as s } from "../../lib/utils.js";
-import { SectionHeader as v } from "./section-header.js";
-const N = {
+import { cn as l } from "../../lib/utils.js";
+import { SectionHeader as y } from "./section-header.js";
+const C = {
   sm: "size-[60px]",
   md: "size-[100px]",
   lg: "size-[120px]"
-}, y = {
+}, b = {
   sm: "max-w-[60px]",
   md: "max-w-[100px]",
   lg: "max-w-[120px]"
-}, C = {
+}, k = {
   sm: "calc((100vw - 32px) / 4.05)",
   md: "calc((100vw - 32px) / 3.5)",
   lg: "calc((100vw - 32px) / 3.0)"
 };
-function A({
-  title: m,
-  moreHref: d,
-  headerSize: x = "lg",
+function q({
+  title: d,
+  moreHref: x,
+  headerSize: n = "lg",
   items: r,
   thumbnailSize: c = "md",
-  thumbnailShape: n = "square",
+  thumbnailShape: g = "square",
   layout: h = "scroll",
-  gridRows: g = 3,
+  gridRows: u = 3,
   pcGridCols: o,
-  className: u
+  className: f,
+  linkComponent: t
 }) {
-  const f = n === "circle" ? "rounded-full" : "rounded-lg", i = (e, t, p) => /* @__PURE__ */ l(
-    "a",
+  const w = t ?? "a", v = g === "circle" ? "rounded-full" : "rounded-lg", i = (e, p, m) => /* @__PURE__ */ s(
+    w,
     {
       href: e.href,
       className: "flex flex-col items-center gap-1.5 group shrink-0",
@@ -36,10 +37,10 @@ function A({
         /* @__PURE__ */ a(
           "div",
           {
-            className: s(
+            className: l(
               "overflow-hidden shrink-0",
-              t ? "size-24" : p ? "w-full aspect-square" : N[c],
-              f
+              p ? "size-24" : m ? "w-full aspect-square" : C[c],
+              v
             ),
             children: /* @__PURE__ */ a(
               "img",
@@ -54,9 +55,9 @@ function A({
         /* @__PURE__ */ a(
           "span",
           {
-            className: s(
+            className: l(
               "typo-label-sm text-[var(--Text-High-Emphasis)] text-center",
-              t ? "max-w-[96px]" : p ? "w-full" : y[c]
+              p ? "max-w-[96px]" : m ? "w-full" : b[c]
             ),
             children: e.name
           }
@@ -65,23 +66,32 @@ function A({
     },
     e.href
   );
-  return /* @__PURE__ */ l("section", { "data-slot": "category-scroll", className: s(
+  return /* @__PURE__ */ s("section", { "data-slot": "category-scroll", className: l(
     // w-full: CSS Grid 直下で mx-auto が justify-self: stretch を無効化し
     // max-content 幅に縮むのを防ぐ（#207）。block 文脈の挙動は変わらない
     "w-full py-4 @[960px]:max-w-[960px] @[960px]:mx-auto",
-    u
+    f
   ), children: [
-    /* @__PURE__ */ a(v, { title: m, moreHref: d, size: x, className: "px-4" }),
-    h === "grid" ? /* @__PURE__ */ l(w, { children: [
-      /* @__PURE__ */ l("div", { className: s("mt-3 overflow-x-auto pl-4 pb-2 scrollbar-hide", o && "@[960px]:hidden"), children: [
+    /* @__PURE__ */ a(
+      y,
+      {
+        title: d,
+        moreHref: x,
+        size: n,
+        linkComponent: t,
+        className: "px-4"
+      }
+    ),
+    h === "grid" ? /* @__PURE__ */ s(N, { children: [
+      /* @__PURE__ */ s("div", { className: l("mt-3 overflow-x-auto pl-4 pb-2 scrollbar-hide", o && "@[960px]:hidden"), children: [
         /* @__PURE__ */ a(
           "div",
           {
             className: "grid gap-2",
             style: {
-              gridTemplateRows: `repeat(${g}, auto)`,
+              gridTemplateRows: `repeat(${u}, auto)`,
               gridAutoFlow: "column",
-              gridAutoColumns: C[c]
+              gridAutoColumns: k[c]
             },
             children: r.map((e) => i(e, !1, !0))
           }
@@ -98,7 +108,7 @@ function A({
       )
     ] }) : (
       /* デフォルト: 横スクロール1行 */
-      /* @__PURE__ */ l("div", { className: "mt-3 flex gap-3 overflow-x-auto pl-4 pb-2 scrollbar-hide", children: [
+      /* @__PURE__ */ s("div", { className: "mt-3 flex gap-3 overflow-x-auto pl-4 pb-2 scrollbar-hide", children: [
         r.map((e) => i(e)),
         /* @__PURE__ */ a("div", { className: "shrink-0 w-4", "aria-hidden": "true" })
       ] })
@@ -106,5 +116,5 @@ function A({
   ] });
 }
 export {
-  A as CategoryScroll
+  q as CategoryScroll
 };

package/dist/components/primitives/category-shortcuts.js

@@ -1,25 +1,25 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import "react";
 import { cn as a } from "../../lib/utils.js";
-function f({ items: s, className: c }) {
+function g({ items: c, className: s, linkComponent: l }) {
   return /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "category-shortcuts",
       className: a(
         "flex gap-3 overflow-x-auto px-4 py-2 scrollbar-hide",
-        c
+        s
       ),
       children: [
-        s.map((r, t) => {
-          const l = !!r.href || !!r.onClick, n = r.href ? "a" : "button", i = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
+        c.map((r, n) => {
+          const t = !!r.href || !!r.onClick, i = r.href ? l ?? "a" : "button", d = r.href ? { href: r.href, onClick: r.onClick } : { type: "button", onClick: r.onClick };
           return /* @__PURE__ */ o(
-            n,
+            i,
             {
-              ...i,
+              ...d,
               className: a(
                 "flex shrink-0 flex-col items-center gap-1 rounded-lg p-1 transition-colors",
-                l && "hover:bg-[var(--Surface-Secondary)]",
+                t && "hover:bg-[var(--Surface-Secondary)]",
                 r.isSelected && "bg-[var(--Surface-Accent-Primary-Light)]"
               ),
               children: [
@@ -53,7 +53,7 @@ function f({ items: s, className: c }) {
                 )
               ]
             },
-            t
+            n
           );
         }),
         /* @__PURE__ */ e("div", { className: "shrink-0 w-2", "aria-hidden": "true" })
@@ -62,5 +62,5 @@ function f({ items: s, className: c }) {
   );
 }
 export {
-  f as CategoryShortcuts
+  g as CategoryShortcuts
 };

package/dist/components/primitives/chat-composer.js

@@ -1,109 +1,112 @@
 "use client";
-import { jsxs as w, jsx as o } from "react/jsx-runtime";
+import { jsxs as C, jsx as r } from "react/jsx-runtime";
 import * as s from "react";
-import { SendHorizontal as q } from "lucide-react";
-import { cn as G } from "../../lib/utils.js";
-import { Button as J } from "../foundations/button.js";
-import { FileInput as M } from "../foundations/file-input.js";
-import { Textarea as O } from "../foundations/textarea.js";
-import { Chip as Q } from "./chip.js";
-function ee({
-  value: a,
-  onChange: C,
+import { SendHorizontal as G } from "lucide-react";
+import { cn as O } from "../../lib/utils.js";
+import { FOCUS_RING_WITHIN as U } from "../../lib/focus-ring.js";
+import { Button as W } from "../foundations/button.js";
+import { FileInput as q } from "../foundations/file-input.js";
+import { Textarea as J } from "../foundations/textarea.js";
+import { Chip as M } from "./chip.js";
+function re({
+  value: l,
+  onChange: N,
   onSubmit: S,
-  submitKey: N = "enter",
+  submitKey: w = "enter",
   attachments: d,
-  onAttachmentsChange: k,
-  accept: z,
-  maxFiles: l,
+  onAttachmentsChange: I,
+  accept: k,
+  maxFiles: a,
   maxSizeMb: f,
   onAttachmentError: u,
-  disabled: n = !1,
-  isSubmitting: h = !1,
-  placeholder: E = "メッセージを入力",
-  maxLength: p,
-  label: F = "メッセージを入力",
-  rows: K = 2,
-  id: I,
-  autoFocus: R,
-  className: H
+  disabled: i = !1,
+  isSubmitting: p = !1,
+  placeholder: z = "メッセージを入力",
+  maxLength: h,
+  label: K = "メッセージを入力",
+  rows: F = 2,
+  id: R,
+  autoFocus: E,
+  className: j
 }) {
-  const j = s.useId(), g = I ?? j, b = d !== void 0, [B, D] = s.useState([]), t = b ? d : B, [L, P] = s.useState(0), c = s.useRef(!1), m = n || h, x = !m && (a.trim().length > 0 || t.length > 0), y = (e) => {
-    b || D(e), k?.(e);
+  const B = s.useId(), b = R ?? B, g = d !== void 0, [D, H] = s.useState([]), t = g ? d : D, [_, L] = s.useState(0), c = s.useRef(!1), m = i || p, y = !m && (l.trim().length > 0 || t.length > 0), x = (e) => {
+    g || H(e), I?.(e);
   }, v = () => {
-    x && S(a, t);
-  }, $ = (e) => {
+    y && S(l, t);
+  }, P = (e) => {
     if (e.key !== "Enter" || c.current || e.nativeEvent.isComposing) return;
-    const r = e.metaKey || e.ctrlKey;
-    if (N === "mod-enter") {
-      if (!r) return;
+    const o = e.metaKey || e.ctrlKey;
+    if (w === "mod-enter") {
+      if (!o) return;
     } else if (e.shiftKey)
       return;
     e.preventDefault(), v();
   }, T = (e) => {
-    if (P((i) => i + 1), e.length === 0) return;
-    let r = t;
-    for (const i of e) {
-      if (l != null && r.length >= l) {
-        u?.({ code: "max-files", file: i, limit: l });
+    if (L((n) => n + 1), e.length === 0) return;
+    let o = t;
+    for (const n of e) {
+      if (a != null && o.length >= a) {
+        u?.({ code: "max-files", file: n, limit: a });
         continue;
       }
-      r = [...r, i];
+      o = [...o, n];
     }
-    r !== t && y(r);
-  }, _ = (e) => {
-    y(t.filter((r, i) => i !== e));
+    o !== t && x(o);
+  }, $ = (e) => {
+    x(t.filter((o, n) => n !== e));
   };
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ C(
     "div",
     {
       "data-slot": "chat-composer",
-      "data-disabled": n || void 0,
-      className: G(
+      "data-disabled": i || void 0,
+      className: O(
         "flex flex-col gap-2 rounded-xl border border-[var(--Border-High-Emphasis)] bg-[var(--Surface-Primary)] p-2 transition-[color,box-shadow,border-color]",
-        "focus-within:border-[var(--Focus-High-Emphasis)] focus-within:ring-[3px] focus-within:ring-[var(--Focus-High-Emphasis)]/50",
-        n && "border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Secondary)]",
-        H
+        // フォーカス意匠は DS 共通（FOCUS_RING_WITHIN。以前は同じクラスを手で書いていた）。
+        // 枠はこのラッパーが描く（内側の Textarea はリングを消している）
+        U,
+        i && "border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Secondary)]",
+        j
       ),
       children: [
-        t.length > 0 && /* @__PURE__ */ o("ul", { "data-slot": "chat-composer-attachments", className: "flex flex-wrap gap-2", children: t.map((e, r) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
-          Q,
+        t.length > 0 && /* @__PURE__ */ r("ul", { "data-slot": "chat-composer-attachments", className: "flex flex-wrap gap-2", children: t.map((e, o) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+          M,
           {
             size: "sm",
             removable: !0,
             disabled: m,
-            onRemove: () => _(r),
+            onRemove: () => $(o),
             children: e.name
           }
-        ) }, `${e.name}-${r}`)) }),
-        /* @__PURE__ */ o("label", { htmlFor: g, className: "sr-only", children: F }),
-        /* @__PURE__ */ o(
-          O,
+        ) }, `${e.name}-${o}`)) }),
+        /* @__PURE__ */ r("label", { htmlFor: b, className: "sr-only", children: K }),
+        /* @__PURE__ */ r(
+          J,
           {
-            id: g,
-            rows: K,
-            value: a,
-            maxLength: p,
-            showCount: p != null,
-            placeholder: E,
-            disabled: n,
-            autoFocus: R,
-            onChange: (e) => C(e.target.value),
-            onKeyDown: $,
+            id: b,
+            rows: F,
+            value: l,
+            maxLength: h,
+            showCount: h != null,
+            placeholder: z,
+            disabled: i,
+            autoFocus: E,
+            onChange: (e) => N(e.target.value),
+            onKeyDown: P,
             onCompositionStart: () => {
               c.current = !0;
             },
             onCompositionEnd: () => {
               c.current = !1;
             },
-            className: "max-h-40 resize-none border-0 bg-transparent px-2 py-1.5 focus-visible:ring-0 disabled:bg-transparent"
+            className: "max-h-40 resize-none border-0 bg-transparent px-2 py-1.5 focus-visible:ring-0 forced-colors:focus-visible:outline-none disabled:bg-transparent"
           }
         ),
-        /* @__PURE__ */ w("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ o(
-            M,
+        /* @__PURE__ */ C("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ r(
+            q,
             {
-              accept: z,
+              accept: k,
               multiple: !0,
               disabled: m,
               maxSize: f != null ? f * 1024 * 1024 : void 0,
@@ -118,18 +121,18 @@ function ee({
               }),
               className: "shrink-0"
             },
-            L
+            _
           ),
-          /* @__PURE__ */ o(
-            J,
+          /* @__PURE__ */ r(
+            W,
             {
               type: "button",
               size: "icon",
               className: "shrink-0 rounded-full",
-              disabled: !x,
-              "aria-label": h ? "送信中" : "送信",
+              disabled: !y,
+              "aria-label": p ? "送信中" : "送信",
               onClick: v,
-              children: /* @__PURE__ */ o(q, { className: "size-4", "aria-hidden": "true" })
+              children: /* @__PURE__ */ r(G, { className: "size-4", "aria-hidden": "true" })
             }
           )
         ] })
@@ -138,5 +141,5 @@ function ee({
   );
 }
 export {
-  ee as ChatComposer
+  re as ChatComposer
 };

package/dist/components/primitives/chip.js

@@ -1,123 +1,146 @@
-import { jsx as t, jsxs as n, Fragment as S } from "react/jsx-runtime";
+import { jsx as i, jsxs as s, Fragment as R } from "react/jsx-runtime";
 import "react";
-import { X as T } from "lucide-react";
-import { cn as s } from "../../lib/utils.js";
-import { chipVariants as b } from "../foundations/chip-variants.js";
-function E({
+import { X as _ } from "lucide-react";
+import { cn as l } from "../../lib/utils.js";
+import { chipVariants as v } from "../foundations/chip-variants.js";
+const h = "forced-colors:data-[selected]:bg-[Highlight] forced-colors:data-[selected]:text-[HighlightText]", D = "forced-colors:has-[[data-slot=chip-trigger]:focus-visible]:outline-solid forced-colors:has-[[data-slot=chip-trigger]:focus-visible]:outline-2 forced-colors:has-[[data-slot=chip-trigger]:focus-visible]:outline-offset-2 forced-colors:has-[[data-slot=chip-trigger]:focus-visible]:outline-[Highlight]", F = /* @__PURE__ */ new Set([
+  "type",
+  "disabled",
+  "form",
+  "formAction",
+  "formEncType",
+  "formMethod",
+  "formNoValidate",
+  "formTarget",
+  "name",
+  "value"
+]);
+function y(o) {
+  return Object.fromEntries(Object.entries(o).filter(([n]) => !F.has(n)));
+}
+function V({
   className: o,
-  variant: h = "filled",
-  size: l,
-  shape: c,
+  variant: n = "filled",
+  size: c,
+  shape: d,
   href: r,
-  selected: i = !1,
-  soldOut: x = !1,
-  removable: y = !1,
-  onRemove: N,
-  count: m,
-  children: d,
-  ...a
+  selected: a = !1,
+  soldOut: T = !1,
+  removable: E = !1,
+  onRemove: S,
+  removeLabel: N = "削除",
+  count: b,
+  linkComponent: C,
+  children: f,
+  ...t
 }) {
-  const v = i ? "accent" : h, e = x && !i, u = e ? "border border-[var(--Text-Disable)] bg-[var(--Surface-Secondary)] text-[var(--Text-Disable)]" : void 0, g = m !== void 0 && /* @__PURE__ */ t(
+  const p = C ?? "a", u = a ? "selected" : n, e = T && !a, g = e ? "border border-[var(--Text-Disable)] bg-[var(--Surface-Secondary)] text-[var(--Text-Disable)]" : void 0, m = b !== void 0 && /* @__PURE__ */ i(
     "span",
     {
-      className: s(
+      className: l(
         "inline-flex items-center justify-center rounded-full px-1.5 min-w-[1.25rem] typo-label-xs transition-colors",
-        i ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)] group-hover:bg-[var(--Surface-Primary)] group-hover:text-[var(--Brand-Cake-Orange)]" : "bg-[var(--Surface-Tertiary)] text-[var(--Text-Medium-Emphasis)]"
+        a ? "bg-[var(--Surface-Primary)] text-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Tertiary)] text-[var(--Text-Medium-Emphasis)]"
       ),
-      children: m
+      children: b
     }
-  ), f = e && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ t("div", { className: "h-[67px] w-px origin-center rotate-45 bg-[var(--Text-Disable)]" }) });
-  if (y)
-    return /* @__PURE__ */ n(
+  ), x = e && /* @__PURE__ */ i("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ i("div", { className: "h-[67px] w-px origin-center rotate-45 bg-[var(--Text-Disable)]" }) });
+  if (E)
+    return /* @__PURE__ */ s(
       "span",
       {
         "data-slot": "chip",
-        "data-selected": i || void 0,
-        className: s(
+        "data-selected": a || void 0,
+        className: l(
           "group",
-          b({ variant: v, size: l, shape: c }),
-          e ? u : void 0,
+          v({ variant: u, size: c, shape: d }),
+          e ? g : void 0,
           e && "relative",
           "has-[[data-slot=chip-trigger]:focus-visible]:ring-2 has-[[data-slot=chip-trigger]:focus-visible]:ring-[var(--Focus-High-Emphasis)]",
+          h,
+          D,
           o
         ),
         children: [
-          r ? /* @__PURE__ */ n(
-            "a",
+          r ? /* @__PURE__ */ s(
+            p,
             {
               href: r,
               "data-slot": "chip-trigger",
               className: "inline-flex items-center gap-1.5 focus-visible:outline-none",
+              ...y(t),
               children: [
-                d,
-                g
+                f,
+                m
               ]
             }
-          ) : /* @__PURE__ */ n(
+          ) : /* @__PURE__ */ s(
             "button",
             {
               type: "button",
               "data-slot": "chip-trigger",
-              disabled: e || a.disabled,
+              disabled: e || t.disabled,
               className: "inline-flex items-center gap-1.5 focus-visible:outline-none",
-              ...a,
+              ...t,
               children: [
-                d,
-                g
+                f,
+                m
               ]
             }
           ),
-          f,
-          /* @__PURE__ */ t(
+          x,
+          /* @__PURE__ */ i(
             "button",
             {
               type: "button",
-              "aria-label": "削除",
-              disabled: e || a.disabled,
-              onClick: (O) => {
-                O.stopPropagation(), N?.();
+              "data-slot": "chip-remove",
+              "aria-label": N,
+              disabled: e || t.disabled,
+              onClick: (j) => {
+                j.stopPropagation(), S?.();
               },
               className: "-mr-1 ml-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-full hover:bg-[var(--Overlay-Light)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)]",
-              children: /* @__PURE__ */ t(T, { className: "size-3.5" })
+              children: /* @__PURE__ */ i(_, { className: "size-3.5" })
             }
           )
         ]
       }
     );
-  const p = /* @__PURE__ */ n(S, { children: [
-    d,
-    g,
-    f
+  const O = /* @__PURE__ */ s(R, { children: [
+    f,
+    m,
+    x
   ] });
-  return r ? /* @__PURE__ */ t(
-    "a",
+  return r ? /* @__PURE__ */ i(
+    p,
     {
       href: r,
       "data-slot": "chip",
-      "data-selected": i || void 0,
-      className: s("group", b({ variant: v, size: l, shape: c }), u, o),
-      children: p
+      "data-selected": a || void 0,
+      className: l("group", v({ variant: u, size: c, shape: d }), g, h, o),
+      ...y(t),
+      children: O
     }
-  ) : /* @__PURE__ */ t(
+  ) : /* @__PURE__ */ i(
     "button",
     {
       type: "button",
       "data-slot": "chip",
-      "data-selected": i || void 0,
-      disabled: e || a.disabled,
-      className: s(
+      "data-selected": a || void 0,
+      disabled: e || t.disabled,
+      className: l(
         "group",
-        b({ variant: v, size: l, shape: c }),
-        e ? u : void 0,
+        v({ variant: u, size: c, shape: d }),
+        e ? g : void 0,
         e && "relative",
+        h,
         o
       ),
-      ...a,
-      children: p
+      ...t,
+      children: O
     }
   );
 }
 export {
-  E as Chip,
-  b as chipVariants
+  V as Chip,
+  v as chipVariants
 };