@cakejp/design-system 0.17.1 → 0.20.0

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as g, jsx as i } from "react/jsx-runtime";
 import * as s from "react";
 import { cva as J } from "class-variance-authority";
@@ -69,12 +70,12 @@ function ce({
   onBlur: n,
   id: r,
   name: l,
-  accept: d = "image/png,image/jpeg",
+  accept: u = "image/png,image/jpeg",
   maxSizeMb: v = 2,
   aspect: F,
   size: L,
   objectFit: U = "cover",
-  disabled: u = !1,
+  disabled: d = !1,
   clearable: A = !0,
   error: C,
   onValidationError: P,
@@ -100,11 +101,11 @@ function ce({
   }, M = (t) => {
     const o = t[0];
     if (o) {
-      if (!Y(o, d)) {
+      if (!Y(o, u)) {
         y(
           "accept",
           o,
-          `画像形式は${Z(d)}のみアップロードできます。`
+          `画像形式は${Z(u)}のみアップロードできます。`
         );
         return;
       }
@@ -119,7 +120,7 @@ function ce({
     "div",
     {
       "data-slot": "image-input",
-      "data-disabled": u || void 0,
+      "data-disabled": d || void 0,
       className: h("flex min-w-0 flex-col gap-2", G),
       onBlur: q,
       children: [
@@ -156,7 +157,7 @@ function ce({
                 ),
                 /* @__PURE__ */ i("span", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)]", children: R })
               ] }),
-              c && A && !u && /* @__PURE__ */ i(
+              c && A && !d && /* @__PURE__ */ i(
                 X,
                 {
                   type: "button",
@@ -176,9 +177,9 @@ function ce({
           {
             id: b,
             name: l,
-            accept: d,
+            accept: u,
             maxSize: v * 1024 * 1024,
-            disabled: u,
+            disabled: d,
             buttonLabel: T ?? (c ? "画像を変更" : "画像を選択"),
             placeholder: "",
             value: [],

package/dist/components/primitives/list-item.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as x, Fragment as D, jsx as e } from "react/jsx-runtime";
 import * as L from "react";
 import K from "iconsax-reactjs/dist/esm/ArrowRight2.js";
@@ -7,7 +8,7 @@ import { cn as g } from "../../lib/utils.js";
 function q({
   title: p,
   caption: o,
-  rightType: i = "arrow-right",
+  rightType: a = "arrow-right",
   rightText: d,
   badgeCount: m,
   toggleChecked: y = !1,
@@ -22,8 +23,8 @@ function q({
   className: S,
   ...s
 }) {
-  const u = L.useId(), t = o ? "md" : !!(l || n) ? "lg" : N, v = !!c, r = !v && typeof s.onClick == "function", j = v || r, C = r ? (a) => {
-    s.onKeyDown?.(a), !a.defaultPrevented && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), a.currentTarget.click());
+  const u = L.useId(), t = o ? "md" : !!(l || n) ? "lg" : N, v = !!c, r = !v && typeof s.onClick == "function", j = v || r, C = r ? (i) => {
+    s.onKeyDown?.(i), !i.defaultPrevented && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), i.currentTarget.click());
   } : s.onKeyDown, z = t === "lg" ? "min-h-16 py-4" : t === "md" ? "min-h-14 py-2" : "min-h-11 py-2", H = t === "lg" ? "typo-body-lg text-[var(--Text-High-Emphasis)]" : "typo-body-md text-[var(--Text-High-Emphasis)]", f = g(
     "relative flex w-full items-center gap-2 bg-[var(--Surface-Primary)] px-4 rounded-lg",
     z,
@@ -38,11 +39,11 @@ function q({
       /* @__PURE__ */ e("span", { id: u, className: g("truncate", H), children: p }),
       o && /* @__PURE__ */ e("span", { className: "truncate typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: o })
     ] }),
-    i === "arrow-right" && /* @__PURE__ */ e(K, { size: 20, className: "shrink-0 text-[var(--Object-Low-Emphasis)]" }),
-    i === "arrow-down" && /* @__PURE__ */ e(F, { size: 20, className: "shrink-0 text-[var(--Object-Low-Emphasis)]" }),
-    i === "text" && d && /* @__PURE__ */ e("span", { className: "shrink-0 typo-body-md text-[var(--Text-High-Emphasis)]", children: d }),
-    i === "badge" && m !== void 0 && /* @__PURE__ */ e("span", { className: "flex shrink-0 h-[13px] min-w-[13px] items-center justify-center rounded-full bg-[var(--Surface-Caution,#ec0000)] px-1 typo-label-xs text-white", children: m }),
-    i === "toggle" && /* @__PURE__ */ e(
+    a === "arrow-right" && /* @__PURE__ */ e(K, { size: 20, className: "shrink-0 text-[var(--Object-Low-Emphasis)]" }),
+    a === "arrow-down" && /* @__PURE__ */ e(F, { size: 20, className: "shrink-0 text-[var(--Object-Low-Emphasis)]" }),
+    a === "text" && d && /* @__PURE__ */ e("span", { className: "shrink-0 typo-body-md text-[var(--Text-High-Emphasis)]", children: d }),
+    a === "badge" && m !== void 0 && /* @__PURE__ */ e("span", { className: "flex shrink-0 h-[13px] min-w-[13px] items-center justify-center rounded-full bg-[var(--Surface-Caution,#ec0000)] px-1 typo-label-xs text-white", children: m }),
+    a === "toggle" && /* @__PURE__ */ e(
       O,
       {
         checked: y,

package/dist/components/primitives/menu-drawer.js

@@ -1,29 +1,32 @@
-import { jsxs as l, jsx as e, Fragment as t } from "react/jsx-runtime";
-import * as w from "react";
-import k from "iconsax-reactjs/dist/esm/ArrowDown2.js";
-import E from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import z from "iconsax-reactjs/dist/esm/ArrowUp2.js";
-import j from "iconsax-reactjs/dist/esm/Add.js";
-import { X as T } from "lucide-react";
-import { cn as S } from "../../lib/utils.js";
-import { Button as m } from "../foundations/button.js";
-const f = "flex min-h-12 items-center gap-1 mx-2 rounded-lg px-2 py-3 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] hover:bg-[var(--Surface-Secondary)] active:bg-[var(--Surface-Tertiary)]";
-function P({
+"use client";
+import { jsxs as l, jsx as e, Fragment as c } from "react/jsx-runtime";
+import * as z from "react";
+import j from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import S from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import B from "iconsax-reactjs/dist/esm/ArrowUp2.js";
+import L from "iconsax-reactjs/dist/esm/Add.js";
+import { X as M } from "lucide-react";
+import { cn as A } from "../../lib/utils.js";
+import { resolveLinkComponent as m } from "../../lib/link-component.js";
+import { Button as x } from "../foundations/button.js";
+const v = "flex min-h-12 items-center gap-1 mx-2 rounded-lg px-2 py-3 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] hover:bg-[var(--Surface-Secondary)] active:bg-[var(--Surface-Tertiary)]";
+function _({
   userName: r,
-  isLoggedIn: n = !1,
-  hideLoginLink: x = !1,
-  sections: u,
-  banners: c,
-  onClose: d,
-  onLogin: o,
-  loginHref: v = "/security/login_link/",
-  className: N,
-  ...b
+  isLoggedIn: t = !1,
+  hideLoginLink: d = !1,
+  sections: g,
+  banners: o,
+  onClose: h,
+  onLogin: p,
+  loginHref: N = "/security/login_link/",
+  className: b,
+  linkComponent: n,
+  ...y
 }) {
-  const [h, y] = w.useState(
+  const w = m(n), k = m(n), [f, E] = z.useState(
     /* @__PURE__ */ new Set()
-  ), g = (a) => {
-    y((i) => {
+  ), T = (a) => {
+    E((i) => {
       const s = new Set(i);
       return s.has(a) ? s.delete(a) : s.add(a), s;
     });
@@ -32,39 +35,39 @@ function P({
     "div",
     {
       "data-slot": "menu-drawer",
-      className: S(
+      className: A(
         "flex h-full w-80 flex-col bg-[var(--Surface-Primary)]",
-        N
+        b
       ),
-      ...b,
+      ...y,
       children: [
-        (n || d) && /* @__PURE__ */ l("div", { className: "flex items-center justify-between px-4 py-3", children: [
-          n ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ l("p", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: [
+        (t || h) && /* @__PURE__ */ l("div", { className: "flex items-center justify-between px-4 py-3", children: [
+          t ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ l("p", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: [
             r ?? "ゲスト",
             "さま"
           ] }) }) : /* @__PURE__ */ e("div", {}),
-          d && /* @__PURE__ */ e(
-            m,
+          h && /* @__PURE__ */ e(
+            x,
             {
               variant: "ghost",
               size: "icon-sm",
-              onClick: d,
+              onClick: h,
               "aria-label": "メニューを閉じる",
-              children: /* @__PURE__ */ e(T, { className: "size-5" })
+              children: /* @__PURE__ */ e(M, { className: "size-5" })
             }
           )
         ] }),
-        !n && !x && /* @__PURE__ */ l(t, { children: [
+        !t && !d && /* @__PURE__ */ l(c, { children: [
           /* @__PURE__ */ e("div", { className: "py-2", children: /* @__PURE__ */ e("ul", { children: /* @__PURE__ */ e("li", { children: /* @__PURE__ */ l(
-            "a",
+            w,
             {
-              href: v,
-              onClick: o ? (a) => {
-                a.preventDefault(), o();
+              href: N,
+              onClick: p ? (a) => {
+                a.preventDefault(), p();
               } : void 0,
-              className: f,
+              className: v,
               children: [
-                /* @__PURE__ */ e("span", { className: "flex size-5 shrink-0 items-center justify-center text-[var(--Text-Medium-Emphasis)]", children: /* @__PURE__ */ e(j, { size: 16 }) }),
+                /* @__PURE__ */ e("span", { className: "flex size-5 shrink-0 items-center justify-center text-[var(--Text-Medium-Emphasis)]", children: /* @__PURE__ */ e(L, { size: 16 }) }),
                 /* @__PURE__ */ e("span", { className: "flex-1", children: "ログイン・新規会員登録" })
               ]
             }
@@ -72,36 +75,36 @@ function P({
           /* @__PURE__ */ e("div", { className: "h-px w-full bg-[var(--Border-Low-Emphasis)]" })
         ] }),
         /* @__PURE__ */ l("div", { className: "flex-1 overflow-y-auto", children: [
-          u.map((a, i) => /* @__PURE__ */ l("div", { children: [
+          g.map((a, i) => /* @__PURE__ */ l("div", { children: [
             a.border && /* @__PURE__ */ e("div", { className: "h-px w-full bg-[var(--Border-Low-Emphasis)]" }),
             /* @__PURE__ */ l("div", { className: "py-2", children: [
               a.title && /* @__PURE__ */ e("div", { className: "px-4 pb-1 pt-2", children: /* @__PURE__ */ l("p", { className: "flex items-center gap-1 typo-label-md font-bold text-[var(--Text-High-Emphasis)]", children: [
                 a.icon && /* @__PURE__ */ e("span", { className: "flex size-5 shrink-0 items-center justify-center", children: a.icon }),
                 /* @__PURE__ */ e("span", { children: a.title })
               ] }) }),
-              /* @__PURE__ */ e("ul", { children: a.items.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(p, { item: s }) }, s.label)) }),
-              a.itemsExtra && a.itemsExtra.length > 0 && /* @__PURE__ */ l(t, { children: [
-                h.has(i) && /* @__PURE__ */ e("ul", { children: a.itemsExtra.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(p, { item: s }) }, s.label)) }),
+              /* @__PURE__ */ e("ul", { children: a.items.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(u, { linkComponent: n, item: s }) }, s.label)) }),
+              a.itemsExtra && a.itemsExtra.length > 0 && /* @__PURE__ */ l(c, { children: [
+                f.has(i) && /* @__PURE__ */ e("ul", { children: a.itemsExtra.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(u, { linkComponent: n, item: s }) }, s.label)) }),
                 /* @__PURE__ */ e(
-                  m,
+                  x,
                   {
                     variant: "ghost",
                     className: "flex w-full items-center justify-center gap-1 rounded-none px-4 py-3 typo-label-md text-[var(--Text-Accent-Primary)]",
-                    onClick: () => g(i),
-                    children: h.has(i) ? /* @__PURE__ */ l(t, { children: [
+                    onClick: () => T(i),
+                    children: f.has(i) ? /* @__PURE__ */ l(c, { children: [
                       /* @__PURE__ */ e("span", { children: "折りたたむ" }),
-                      /* @__PURE__ */ e(z, { size: 16 })
-                    ] }) : /* @__PURE__ */ l(t, { children: [
+                      /* @__PURE__ */ e(B, { size: 16 })
+                    ] }) : /* @__PURE__ */ l(c, { children: [
                       /* @__PURE__ */ e("span", { children: "すべて表示" }),
-                      /* @__PURE__ */ e(k, { size: 16 })
+                      /* @__PURE__ */ e(j, { size: 16 })
                     ] })
                   }
                 )
               ] })
             ] })
           ] }, i)),
-          c && c.length > 0 && /* @__PURE__ */ e("div", { className: "px-6 py-6", children: /* @__PURE__ */ e("ul", { className: "flex justify-center", children: c.map((a, i) => /* @__PURE__ */ e("li", { className: "w-1/2 max-w-28 px-2", children: /* @__PURE__ */ e(
-            "a",
+          o && o.length > 0 && /* @__PURE__ */ e("div", { className: "px-6 py-6", children: /* @__PURE__ */ e("ul", { className: "flex justify-center", children: o.map((a, i) => /* @__PURE__ */ e("li", { className: "w-1/2 max-w-28 px-2", children: /* @__PURE__ */ e(
+            k,
             {
               href: a.href ?? "#",
               className: "block overflow-hidden rounded",
@@ -121,13 +124,14 @@ function P({
     }
   );
 }
-function p({ item: r }) {
+function u({ item: r, linkComponent: t }) {
+  const d = m(t);
   return /* @__PURE__ */ l(
-    "a",
+    d,
     {
       href: r.href ?? "#",
       onClick: r.onClick,
-      className: f,
+      className: v,
       children: [
         r.thumb && /* @__PURE__ */ e("picture", { className: "relative mr-1 block size-9 shrink-0 overflow-hidden rounded", children: /* @__PURE__ */ e(
           "img",
@@ -144,11 +148,11 @@ function p({ item: r }) {
           r.badge && /* @__PURE__ */ e("span", { className: "rounded-full bg-[var(--Brand-Cake-Orange)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: r.badge }),
           r.subText && /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: r.subText })
         ] }),
-        r.hasChildren && /* @__PURE__ */ e(E, { size: 16, className: "shrink-0 text-[var(--Object-High-Emphasis)]" })
+        r.hasChildren && /* @__PURE__ */ e(S, { size: 16, className: "shrink-0 text-[var(--Object-High-Emphasis)]" })
       ]
     }
   );
 }
 export {
-  P as MenuDrawer
+  _ as MenuDrawer
 };

package/dist/components/primitives/multi-select.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
 import * as E from "react";
 import { ChevronsUpDown as P, Check as S } from "lucide-react";
@@ -8,10 +9,10 @@ import { Popover as R, PopoverTrigger as B, PopoverContent as G } from "../found
 import { useFieldLabelling as H, resolveFieldAria as U } from "../../lib/field-labelling.js";
 import { Chip as $ } from "./chip.js";
 function W({
-  options: d,
+  options: n,
   value: l = [],
   onValueChange: f,
-  placeholder: n = "選択してください",
+  placeholder: d = "選択してください",
   searchPlaceholder: v = "検索",
   emptyLabel: g = "候補がありません",
   disabled: m,
@@ -22,7 +23,7 @@ function W({
   "aria-label": t,
   "aria-labelledby": s
 }) {
-  const [p, C] = E.useState(!1), i = d.filter((e) => l.includes(e.value)), h = H(), w = U(
+  const [p, C] = E.useState(!1), i = n.filter((e) => l.includes(e.value)), h = H(), w = U(
     {
       id: o,
       "aria-label": t,
@@ -30,7 +31,7 @@ function W({
       "aria-describedby": c
     },
     h
-  ), N = !h && !t && !s ? n : void 0, u = (e) => f?.(l.includes(e) ? l.filter((j) => j !== e) : [...l, e]);
+  ), N = !h && !t && !s ? d : void 0, u = (e) => f?.(l.includes(e) ? l.filter((j) => j !== e) : [...l, e]);
   return /* @__PURE__ */ r("div", { "data-slot": "multi-select", className: b("flex flex-col gap-2", x), children: [
     /* @__PURE__ */ r(R, { open: p, onOpenChange: C, children: [
       /* @__PURE__ */ a(B, { asChild: !0, children: /* @__PURE__ */ r(
@@ -50,7 +51,7 @@ function W({
           disabled: m,
           className: "w-full justify-between bg-[var(--Surface-Primary)]",
           children: [
-            /* @__PURE__ */ a("span", { className: i.length ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]", children: i.length ? `${i.length}件選択中` : n }),
+            /* @__PURE__ */ a("span", { className: i.length ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]", children: i.length ? `${i.length}件選択中` : d }),
             /* @__PURE__ */ a(P, { "aria-hidden": "true", className: "text-[var(--Object-Medium-Emphasis)]" })
           ]
         }
@@ -59,7 +60,7 @@ function W({
         /* @__PURE__ */ a(T, { placeholder: v }),
         /* @__PURE__ */ r(A, { children: [
           /* @__PURE__ */ a(F, { children: g }),
-          /* @__PURE__ */ a(I, { children: d.map((e) => /* @__PURE__ */ r(
+          /* @__PURE__ */ a(I, { children: n.map((e) => /* @__PURE__ */ r(
             M,
             {
               value: [e.label, ...e.keywords ?? []].join(" "),

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

@@ -1,3 +1,4 @@
+"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";

package/dist/components/primitives/prose.js

@@ -0,0 +1,52 @@
+import { jsx as _ } from "react/jsx-runtime";
+import "react";
+import { cn as l } from "../../lib/utils.js";
+function s({ className: a, html: e, as: r = "div", children: d, ...o }) {
+  const t = l(
+    // 基本の本文
+    "typo-body-md text-[var(--Text-High-Emphasis)]",
+    // 見出し
+    "[&_h2]:mt-10 [&_h2]:mb-4 [&_h2]:typo-heading-2xl",
+    "[&_h3]:mt-8 [&_h3]:mb-3 [&_h3]:typo-heading-xl",
+    "[&_h4]:mt-6 [&_h4]:mb-2 [&_h4]:typo-heading-lg",
+    "[&_h5]:mt-6 [&_h5]:mb-2 [&_h5]:typo-heading-md",
+    // 段落・リスト
+    "[&_p]:my-4",
+    "[&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-6",
+    "[&_ol]:my-4 [&_ol]:list-decimal [&_ol]:pl-6",
+    "[&_li]:my-1",
+    // 引用
+    "[&_blockquote]:my-6 [&_blockquote]:border-l-4 [&_blockquote]:border-[var(--Border-Medium-Emphasis)] [&_blockquote]:pl-4 [&_blockquote]:text-[var(--Text-Medium-Emphasis)]",
+    // リンク
+    "[&_a]:text-[var(--Text-Accent-Primary)] [&_a]:underline [&_a]:underline-offset-2 [&_a:hover]:no-underline",
+    // 画像・図版
+    "[&_img]:my-6 [&_img]:h-auto [&_img]:w-full [&_img]:rounded-lg",
+    "[&_figure]:my-6 [&_figcaption]:mt-2 [&_figcaption]:typo-body-sm [&_figcaption]:text-[var(--Text-Medium-Emphasis)]",
+    // 表。block + w-max + max-w-full で、枠に収まるまで縮み、縮みきれなければ
+    // 表自身が横スクロールする。どちらの場合もページを横に伸ばさない
+    "[&_table]:my-6 [&_table]:block [&_table]:w-max [&_table]:max-w-full [&_table]:overflow-x-auto [&_table]:border-collapse",
+    "[&_th]:border [&_th]:border-[var(--Border-Low-Emphasis)] [&_th]:bg-[var(--Surface-Secondary)] [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:typo-label-sm",
+    "[&_td]:border [&_td]:border-[var(--Border-Low-Emphasis)] [&_td]:px-3 [&_td]:py-2",
+    // コード
+    "[&_code]:rounded-xs [&_code]:bg-[var(--Surface-Secondary)] [&_code]:px-1 [&_code]:py-0.5",
+    "[&_pre]:my-6 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-[var(--Surface-Secondary)] [&_pre]:p-4",
+    "[&_pre_code]:bg-transparent [&_pre_code]:p-0",
+    // 区切り線
+    "[&_hr]:my-8 [&_hr]:border-t [&_hr]:border-[var(--Border-Low-Emphasis)]",
+    // 先頭・末尾は外側の余白と二重にしない
+    "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+    a
+  );
+  return e !== void 0 ? /* @__PURE__ */ _(
+    r,
+    {
+      "data-slot": "prose",
+      className: t,
+      dangerouslySetInnerHTML: { __html: e },
+      ...o
+    }
+  ) : /* @__PURE__ */ _(r, { "data-slot": "prose", className: t, ...o, children: d });
+}
+export {
+  s as Prose
+};

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

@@ -1,81 +1,96 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import * as a from "react";
-import y from "iconsax-reactjs/dist/esm/SearchNormal1.js";
-import { cn as n } from "../../lib/utils.js";
-import { FOCUS_RING_INSET as b, FOCUS_RING_WITHIN as v } from "../../lib/focus-ring.js";
-const x = a.forwardRef(
+"use client";
+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(
   ({
-    className: l,
-    placeholder: h = "キーワードを入力してください",
-    onSearch: d,
-    size: o = "md",
-    searchHref: s,
-    ...i
+    className: v,
+    placeholder: y = "キーワードを入力してください",
+    onSearch: c,
+    size: a = "md",
+    searchHref: m,
+    action: l,
+    name: u,
+    ...d
   }, r) => {
-    const c = a.useRef(null), u = a.useCallback(
+    const t = !!l, n = s.useRef(null), x = s.useCallback(
       (e) => {
-        c.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
+        n.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
       },
       [r]
-    ), m = () => {
-      const e = c.current?.value ?? "";
-      e.trim() && (d?.(e), s && (window.location.href = s.replace(
+    ), h = () => {
+      const e = n.current?.value ?? "";
+      e.trim() && (c?.(e), m && (window.location.href = m.replace(
         "{query}",
         encodeURIComponent(e)
       )));
-    }, p = (e) => {
-      e.key === "Enter" && m(), i.onKeyDown?.(e);
-    };
-    return /* @__PURE__ */ f(
-      "div",
+    }, g = (e) => {
+      e.key === "Enter" && !t && h(), d.onKeyDown?.(e);
+    }, w = (e) => {
+      const b = n.current?.value ?? "";
+      if (!b.trim()) {
+        e.preventDefault();
+        return;
+      }
+      c?.(b);
+    }, f = i(
+      "group flex items-center overflow-hidden rounded-lg border border-[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,
+      a === "sm" ? "h-9" : "h-11",
+      v
+    ), p = /* @__PURE__ */ N(S, { children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          ref: x,
+          type: "search",
+          "aria-label": "キーワード検索",
+          name: t ? u ?? "q" : u,
+          placeholder: y,
+          className: i(
+            "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,
+          ...d
+        }
+      ),
+      /* @__PURE__ */ o(
+        "button",
+        {
+          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)]",
+            // 親が overflow-hidden なので外向きリングは切れる。内側に描く。
+            R,
+            a === "sm" ? "size-9" : "h-11 w-11"
+          ),
+          onClick: t ? void 0 : h,
+          "aria-label": "検索",
+          children: /* @__PURE__ */ o(E, { size: a === "sm" ? 14 : 16 })
+        }
+      )
+    ] });
+    return t ? /* @__PURE__ */ o(
+      "form",
       {
         "data-slot": "search-bar",
-        className: n(
-          "group flex items-center overflow-hidden rounded-lg border border-[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)]",
-          v,
-          o === "sm" ? "h-9" : "h-11",
-          l
-        ),
-        children: [
-          /* @__PURE__ */ t(
-            "input",
-            {
-              ref: u,
-              type: "search",
-              "aria-label": "キーワード検索",
-              placeholder: h,
-              className: n(
-                "min-w-0 flex-1 bg-transparent px-3 text-[var(--Text-High-Emphasis)] outline-none placeholder:text-[var(--Text-Low-Emphasis)]",
-                o === "sm" ? "typo-body-sm" : "typo-body-md"
-              ),
-              onKeyDown: p,
-              ...i
-            }
-          ),
-          /* @__PURE__ */ t(
-            "button",
-            {
-              type: "button",
-              className: n(
-                "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)]",
-                // 親が overflow-hidden なので外向きリングは切れる。内側に描く。
-                b,
-                o === "sm" ? "size-9" : "h-11 w-11"
-              ),
-              onClick: m,
-              "aria-label": "検索",
-              children: /* @__PURE__ */ t(y, { size: o === "sm" ? 14 : 16 })
-            }
-          )
-        ]
+        action: l,
+        method: "get",
+        role: "search",
+        onSubmit: w,
+        className: f,
+        children: p
       }
-    );
+    ) : /* @__PURE__ */ o("div", { "data-slot": "search-bar", className: f, children: p });
   }
 );
-x.displayName = "SearchBar";
+C.displayName = "SearchBar";
 export {
-  x as SearchBar
+  C as SearchBar
 };