@cakejp/design-system 0.16.0 → 0.17.0

package/dist/components/primitives/notification-badge.js

@@ -0,0 +1,61 @@
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import "react";
+import { cva as h } from "class-variance-authority";
+import { cn as v } from "../../lib/utils.js";
+const b = h(
+  "absolute flex items-center justify-center rounded-full typo-label-xs",
+  {
+    variants: {
+      color: {
+        red: "bg-[var(--Surface-Caution)] text-[var(--Text-on-Inverse)]",
+        green: "bg-[var(--Surface-Success)] text-[var(--Text-on-Inverse)]"
+      },
+      size: {
+        sm: "",
+        md: ""
+      }
+    },
+    defaultVariants: {
+      color: "red",
+      size: "sm"
+    }
+  }
+);
+function j({
+  className: c,
+  children: i,
+  count: e,
+  max: n = 99,
+  dot: r = !1,
+  hidden: m = !1,
+  color: f,
+  size: t = "sm",
+  ...p
+}) {
+  if (m || e != null && e <= 0 && !r)
+    return /* @__PURE__ */ o("span", { className: "relative inline-flex", children: i });
+  const a = r || e == null, s = e != null ? e > n ? `${n}+` : String(e) : void 0, l = s != null && s.length > 1, u = t === "sm" ? "h-2 w-2" : "h-2.5 w-2.5", d = t === "sm" ? l ? "h-3.5 min-w-3.5 px-1" : "h-3.5 w-3.5" : l ? "h-4 min-w-4 px-1" : "h-4 w-4", x = a ? "-right-0.5 -top-0.5" : "-right-1.5 -top-1";
+  return /* @__PURE__ */ g("span", { className: "relative inline-flex", children: [
+    i,
+    /* @__PURE__ */ o(
+      "span",
+      {
+        "data-slot": "notification-badge",
+        className: v(
+          b({ color: f, size: t }),
+          x,
+          a ? u : d,
+          c
+        ),
+        role: "status",
+        "aria-label": s ? `${s}件の通知` : "通知あり",
+        ...p,
+        children: !a && s
+      }
+    )
+  ] });
+}
+export {
+  j as NotificationBadge,
+  b as notificationBadgeVariants
+};

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

@@ -0,0 +1,72 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import "react";
+import d from "iconsax-reactjs/dist/esm/Notification.js";
+import h from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { Badge as m } from "../foundations/badge.js";
+import { cn as l } from "../../lib/utils.js";
+function g({
+  notifications: r,
+  variant: n = "vertical",
+  emptyMessage: c = "新着のお知らせはありません",
+  className: i,
+  ...t
+}) {
+  return r.length === 0 ? /* @__PURE__ */ s(
+    "div",
+    {
+      "data-slot": "notification-list",
+      className: l(
+        "flex flex-col items-center justify-center gap-3 py-12",
+        i
+      ),
+      ...t,
+      children: [
+        /* @__PURE__ */ a(d, { size: 48, className: "text-[var(--Text-Low-Emphasis)]" }),
+        /* @__PURE__ */ a("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: c })
+      ]
+    }
+  ) : /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "notification-list",
+      className: l("w-full divide-y divide-[var(--Border-Low-Emphasis)]", i),
+      ...t,
+      children: r.map((e) => {
+        const o = e.href ? "a" : "div";
+        return n === "horizontal" ? /* @__PURE__ */ s(
+          o,
+          {
+            ...e.href ? { href: e.href } : {},
+            className: "flex items-center gap-3 px-4 py-3 transition-colors hover:bg-[var(--Surface-Secondary)]",
+            children: [
+              /* @__PURE__ */ a("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)] shrink-0 w-[88px]", children: e.date }),
+              /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+                e.isUnread && /* @__PURE__ */ a(m, { variant: "destructive", className: "shrink-0 w-fit", children: "NEW" }),
+                /* @__PURE__ */ a("span", { className: "typo-body-md text-[var(--Text-High-Emphasis)] truncate", children: e.message })
+              ] }),
+              /* @__PURE__ */ a(h, { size: 16, className: "text-[var(--Text-Low-Emphasis)] shrink-0 ml-auto" })
+            ]
+          },
+          e.id
+        ) : /* @__PURE__ */ s(
+          o,
+          {
+            ...e.href ? { href: e.href } : {},
+            className: "flex items-start gap-3 px-4 py-3.5 transition-colors hover:bg-[var(--Surface-Secondary)]",
+            children: [
+              /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center pt-1.5", children: e.isUnread ? /* @__PURE__ */ a("span", { className: "size-2 rounded-full bg-[var(--Brand-Cake-Orange)]" }) : /* @__PURE__ */ a("span", { className: "size-2" }) }),
+              /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ a("p", { className: "typo-body-md text-[var(--Text-High-Emphasis)]", children: e.message }),
+                /* @__PURE__ */ a("p", { className: "mt-0.5 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: e.date })
+              ] })
+            ]
+          },
+          e.id
+        );
+      })
+    }
+  );
+}
+export {
+  g as NotificationList
+};

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

@@ -0,0 +1,235 @@
+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 { FOCUS_RING as c } from "../../lib/focus-ring.js";
+function _({
+  className: D,
+  value: N,
+  defaultValue: K,
+  min: l = 1,
+  max: f = 99,
+  step: B = 1,
+  onChange: L,
+  disabled: a = !1,
+  error: g = !1,
+  size: R = "md",
+  editable: h = !0,
+  showTrash: U = !1,
+  onDelete: V,
+  formatOptions: x,
+  locale: G = "ja-JP",
+  inputId: M,
+  label: n = "数量",
+  ...C
+}) {
+  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 k = (e) => {
+    const o = z(e);
+    O || Q(o), u(String(o)), L?.(o);
+  }, T = () => {
+    if (s) {
+      V?.();
+      return;
+    }
+    m && k(t - B);
+  }, j = () => {
+    d && k(t + B);
+  }, H = (e) => {
+    const o = e.target.value;
+    (o === "" || /^-?\d*$/.test(o)) && u(o);
+  }, w = () => {
+    const e = parseInt(E, 10);
+    k(Number.isNaN(e) ? t : e), S(!1);
+  }, I = (e) => {
+    if (e.key === "Enter") {
+      w();
+      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__ */ $(
+    "div",
+    {
+      "data-slot": "number-input",
+      "data-editable": h || void 0,
+      className: i(
+        // 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)]",
+        a && "cursor-not-allowed",
+        D
+      ),
+      role: "group",
+      "aria-label": n,
+      ...C,
+      children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            className: i(
+              "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)]"
+            ),
+            onClick: T,
+            disabled: !(m || b),
+            "aria-label": s ? "削除" : `${n}を減らす`,
+            children: s ? /* @__PURE__ */ r(A, { size: 14 }) : /* @__PURE__ */ r(F, { size: 14 })
+          }
+        ),
+        h ? /* @__PURE__ */ r(
+          "input",
+          {
+            type: "text",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            id: M,
+            value: p,
+            onFocus: () => {
+              S(!0), u(String(t));
+            },
+            onChange: H,
+            onBlur: w,
+            onKeyDown: I,
+            disabled: a,
+            className: i(
+              "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}を入力`,
+            "aria-live": "polite"
+          }
+        ) : /* @__PURE__ */ r(
+          "span",
+          {
+            className: i(
+              "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
+          }
+        ),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            className: i(
+              "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)]"
+            ),
+            onClick: j,
+            disabled: !d,
+            "aria-label": `${n}を増やす`,
+            children: /* @__PURE__ */ r(P, { size: 14 })
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ $(
+    "div",
+    {
+      "data-slot": "number-input",
+      "data-editable": h || void 0,
+      className: i("inline-flex shrink-0 items-center gap-3", D),
+      role: "group",
+      "aria-label": n,
+      ...C,
+      children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            className: i(
+              "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)]"
+            ),
+            onClick: T,
+            disabled: !(m || b),
+            "aria-label": s ? "削除" : `${n}を減らす`,
+            children: s ? /* @__PURE__ */ r(A, { size: 18 }) : /* @__PURE__ */ r(F, { size: 18 })
+          }
+        ),
+        h ? /* @__PURE__ */ r(
+          "input",
+          {
+            type: "text",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            id: M,
+            value: p,
+            onFocus: () => {
+              S(!0), u(String(t));
+            },
+            onChange: H,
+            onBlur: w,
+            onKeyDown: I,
+            disabled: a,
+            className: i(
+              // 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)]",
+              c,
+              a ? "bg-[var(--Surface-Tertiary)] text-[var(--Text-Disable)]" : "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)]"
+            ),
+            "aria-label": `${n}を入力`,
+            "aria-live": "polite"
+          }
+        ) : /* @__PURE__ */ r(
+          "span",
+          {
+            className: i(
+              // 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)]",
+              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
+          }
+        ),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            className: i(
+              "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)]"
+            ),
+            onClick: j,
+            disabled: !d,
+            "aria-label": `${n}を増やす`,
+            children: /* @__PURE__ */ r(P, { size: 18 })
+          }
+        )
+      ]
+    }
+  );
+}
+const re = _;
+export {
+  _ as NumberInput,
+  re as QuantitySelector
+};

package/dist/components/primitives/price-display.js

@@ -0,0 +1,101 @@
+import { jsxs as o, Fragment as g, jsx as f } from "react/jsx-runtime";
+import "react";
+import { cva as $ } from "class-variance-authority";
+import { cn as s } from "../../lib/utils.js";
+const v = $("inline-flex items-baseline gap-0.5 text-[var(--Text-High-Emphasis)]", {
+  variants: {
+    size: {
+      sm: "typo-label-md",
+      md: "typo-label-lg",
+      lg: "typo-heading-lg",
+      xl: "typo-heading-3xl"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), L = {
+  sm: "typo-body-xs",
+  md: "typo-body-sm",
+  lg: "typo-body-md",
+  xl: "typo-body-lg"
+}, S = {
+  sm: "typo-body-xs",
+  md: "typo-body-xs",
+  lg: "typo-body-sm",
+  xl: "typo-body-lg"
+};
+function T({
+  className: h,
+  price: l,
+  maxPrice: e,
+  originalPrice: i,
+  showTaxLabel: y = !0,
+  currency: t = "¥",
+  size: n = "md",
+  ...b
+}) {
+  const a = l.toLocaleString("ja-JP"), m = e?.toLocaleString("ja-JP"), p = i?.toLocaleString("ja-JP"), d = i != null && i > l, r = e != null && e > l, x = n ?? "md", c = d ? `${t}${a} 税込、元の価格 ${t}${p}` : r ? `${t}${a}〜${t}${m} 税込` : `${t}${a} 税込`;
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "price-display",
+      className: s("flex flex-col", h),
+      role: "group",
+      "aria-label": c,
+      ...b,
+      children: [
+        d && /* @__PURE__ */ o(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: s(
+              "text-[var(--Text-Low-Emphasis)] line-through",
+              L[x]
+            ),
+            children: [
+              t,
+              p
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: s(
+              v({ size: n }),
+              d && "text-[var(--Text-Caution)]"
+            ),
+            children: [
+              r ? /* @__PURE__ */ o(g, { children: [
+                t,
+                a,
+                "〜",
+                t,
+                m
+              ] }) : /* @__PURE__ */ o(g, { children: [
+                t,
+                a
+              ] }),
+              y && /* @__PURE__ */ f(
+                "span",
+                {
+                  className: s(
+                    "ml-0.5 text-[var(--Text-Low-Emphasis)]",
+                    S[x]
+                  ),
+                  children: "税込"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  T as PriceDisplay,
+  v as priceDisplayVariants
+};

package/dist/components/primitives/progress-steps.js

@@ -0,0 +1,62 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import "react";
+import { Check as p } from "lucide-react";
+import { cn as s } from "../../lib/utils.js";
+function b({
+  className: d,
+  steps: a,
+  currentStep: i,
+  showCheckmark: x = !0,
+  ...f
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "progress-steps",
+      className: s("flex w-full items-start justify-center px-4", d),
+      role: "navigation",
+      "aria-label": "ステップ",
+      ...f,
+      children: a.map((l, r) => {
+        const t = r < i, n = r === i, o = t || n, c = r === a.length - 1;
+        return /* @__PURE__ */ m("div", { className: s("flex items-start", !c && "flex-1"), children: [
+          /* @__PURE__ */ m("div", { className: "flex flex-col items-center gap-1.5", children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: s(
+                  "flex size-7 items-center justify-center rounded-full typo-label-sm transition-colors",
+                  o ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]" : "bg-[var(--Surface-Tertiary)] text-[var(--Text-Low-Emphasis)]"
+                ),
+                "aria-current": n ? "step" : void 0,
+                children: x && t ? /* @__PURE__ */ e(p, { className: "size-4 shrink-0" }) : r + 1
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: s(
+                  "transition-colors",
+                  o ? "typo-label-xs text-[var(--Text-High-Emphasis)]" : "typo-body-xs text-[var(--Text-Low-Emphasis)]"
+                ),
+                children: l
+              }
+            )
+          ] }),
+          !c && /* @__PURE__ */ e("div", { className: "mt-3 flex flex-1 items-center px-1.5", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: s(
+                "h-0.5 w-full rounded-full transition-colors",
+                t ? "bg-[var(--Brand-Cake-Orange)]" : "bg-[var(--Border-Medium-Emphasis)]"
+              )
+            }
+          ) })
+        ] }, l);
+      })
+    }
+  );
+}
+export {
+  b as ProgressSteps
+};

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

@@ -0,0 +1,81 @@
+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(
+  ({
+    className: l,
+    placeholder: h = "キーワードを入力してください",
+    onSearch: d,
+    size: o = "md",
+    searchHref: s,
+    ...i
+  }, r) => {
+    const c = a.useRef(null), u = a.useCallback(
+      (e) => {
+        c.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(
+        "{query}",
+        encodeURIComponent(e)
+      )));
+    }, p = (e) => {
+      e.key === "Enter" && m(), i.onKeyDown?.(e);
+    };
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        "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 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+x.displayName = "SearchBar";
+export {
+  x as SearchBar
+};

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

@@ -0,0 +1,43 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as l } from "../../lib/utils.js";
+import { Button as i } from "../foundations/button.js";
+import n from "iconsax-reactjs/dist/esm/SearchNormal1.js";
+const f = {
+  2: "@sm:grid-cols-2",
+  3: "@sm:grid-cols-2 @lg:grid-cols-3",
+  4: "@sm:grid-cols-2 @lg:grid-cols-4"
+};
+function v({
+  children: a,
+  onSearch: o,
+  onReset: s,
+  columns: c = 4,
+  layout: m = "grid",
+  className: d
+}) {
+  const t = m === "flex" ? "flex flex-wrap items-end gap-3 [&>*]:flex [&>*]:flex-col [&>*]:min-w-[140px] [&>*]:flex-1" : l("grid grid-cols-1 gap-3 items-end [&>*]:flex [&>*]:flex-col", f[c]);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: l(
+        "@container rounded-2xl bg-[var(--Surface-Primary)] border border-[var(--Border-Low-Emphasis)] p-4",
+        d
+      ),
+      "data-slot": "search-panel",
+      children: [
+        /* @__PURE__ */ e("div", { className: t, children: a }),
+        /* @__PURE__ */ r("div", { className: "flex items-center justify-end gap-2 mt-3", children: [
+          s && /* @__PURE__ */ e(i, { variant: "tertiary", size: "sm", onClick: s, children: "リセット" }),
+          /* @__PURE__ */ r(i, { variant: "default", size: "sm", onClick: o, children: [
+            /* @__PURE__ */ e(n, { size: 16, className: "mr-1" }),
+            " 検索"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  v as SearchPanel
+};