@cakejp/design-system 0.16.0 → 0.17.1

package/dist/components/ec/admin-shell.js

@@ -0,0 +1,202 @@
+import { jsxs as r, jsx as e, Fragment as N } from "react/jsx-runtime";
+import * as d from "react";
+import { cn as k } from "../../lib/utils.js";
+import M from "iconsax-reactjs/dist/esm/Home2.js";
+import z from "iconsax-reactjs/dist/esm/ShoppingCart.js";
+import C from "iconsax-reactjs/dist/esm/Cake.js";
+import A from "iconsax-reactjs/dist/esm/Shop.js";
+import T from "iconsax-reactjs/dist/esm/Chart2.js";
+import H from "iconsax-reactjs/dist/esm/Box.js";
+import P from "iconsax-reactjs/dist/esm/Setting2.js";
+import E from "iconsax-reactjs/dist/esm/InfoCircle.js";
+import j from "iconsax-reactjs/dist/esm/Notification.js";
+import w from "iconsax-reactjs/dist/esm/User.js";
+import F from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import I from "iconsax-reactjs/dist/esm/ArrowLeft.js";
+import { AdminSideNav as O } from "../primitives/admin-side-nav.js";
+import { AdminHeader as L } from "../primitives/admin-header.js";
+import { Button as R } from "../foundations/button.js";
+import { SkipLink as B } from "../foundations/skip-link.js";
+function te({
+  name: i,
+  children: t,
+  className: l
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: k(
+        "relative border-2 border-dashed border-red-500 rounded-lg",
+        l
+      ),
+      children: [
+        /* @__PURE__ */ r("span", { className: "absolute -top-3 left-2 bg-[var(--Primitive-Red-500)] text-[var(--Primitive-White-alpha-1000)] typo-label-xs px-1.5 py-0.5 rounded z-10", children: [
+          "DS未実装: ",
+          i
+        ] }),
+        t
+      ]
+    }
+  );
+}
+function a(i) {
+  return ({ active: t, placement: l }) => /* @__PURE__ */ e(
+    i,
+    {
+      size: l === "rail" ? 24 : 20,
+      variant: t ? "Bold" : "Outline"
+    }
+  );
+}
+const D = [
+  { key: "home", label: "ホーム", icon: a(M) },
+  {
+    key: "orders",
+    label: "注文管理",
+    icon: a(z),
+    subMenus: [
+      { label: "注文一覧", href: "#" },
+      { label: "注文CSV出力", href: "#" },
+      { label: "伝票番号一括登録", href: "#" },
+      { label: "納品書PDF出力", href: "#" },
+      { label: "受注分析", href: "#" }
+    ]
+  },
+  {
+    key: "items",
+    label: "商品管理",
+    icon: a(C),
+    subMenus: [
+      { label: "商品一覧", href: "#" },
+      { label: "商品登録", href: "#" },
+      { label: "カテゴリ管理", href: "#" },
+      { label: "商品グループ", href: "#" },
+      { label: "一括編集", href: "#" },
+      { label: "AI商品作成", href: "#" }
+    ]
+  },
+  {
+    key: "shop",
+    label: "ショップ管理",
+    icon: a(A),
+    subMenus: [
+      { label: "ショップ情報", href: "#" },
+      { label: "休業日設定", href: "#" },
+      { label: "配送設定", href: "#" },
+      { label: "送料設定", href: "#" },
+      { label: "クーポン管理", href: "#" },
+      { label: "レビュー管理", href: "#" },
+      { label: "ブランドデザイン", href: "#" }
+    ]
+  },
+  {
+    key: "sales",
+    label: "売上管理",
+    icon: a(T),
+    subMenus: [
+      { label: "売上詳細", href: "#" },
+      { label: "振込一覧", href: "#" },
+      { label: "KPI", href: "#" },
+      { label: "広告管理", href: "#" }
+    ]
+  },
+  { key: "services", label: "サービス", icon: a(H) },
+  {
+    key: "settings",
+    label: "設定",
+    icon: a(P),
+    subMenus: [
+      { label: "アカウント設定", href: "#" },
+      { label: "銀行口座", href: "#" },
+      { label: "クレジットカード", href: "#" },
+      { label: "プラン変更", href: "#" },
+      { label: "メールテンプレート", href: "#" }
+    ]
+  },
+  { key: "faq", label: "FAQ", icon: a(E) }
+];
+function ne({
+  children: i,
+  activeNav: t = "home",
+  title: l = "",
+  breadcrumbs: n,
+  shopName: s = "Sample Shop",
+  brand: b,
+  sidebarHeader: p,
+  navItems: u = D,
+  headerActions: v,
+  onBack: m,
+  backLabel: x = "戻る",
+  mainId: f = "main-content",
+  skipLink: g
+}) {
+  const [y, h] = d.useState(!1), S = /* @__PURE__ */ r(N, { children: [
+    /* @__PURE__ */ r("button", { className: "relative flex items-center justify-center size-10 shrink-0 rounded-lg hover:bg-[var(--Surface-Secondary)]", "aria-label": "通知", children: [
+      /* @__PURE__ */ e(j, { size: 20, className: "text-[var(--Text-High-Emphasis)]" }),
+      /* @__PURE__ */ e("span", { className: "absolute top-1.5 right-1.5 size-2 rounded-full bg-[var(--Surface-Caution)]" })
+    ] }),
+    /* @__PURE__ */ e("button", { className: "flex items-center justify-center size-10 shrink-0 rounded-full bg-[var(--Surface-Tertiary)]", "aria-label": "プロフィール", children: /* @__PURE__ */ e(w, { size: 20, className: "text-[var(--Text-Medium-Emphasis)]" }) })
+  ] });
+  return (
+    // 地が Surface-Secondary なので、配下 Card の既定サーフェスを白に切り替える文脈を宣言する
+    // （#150 の Section と同じ仕組み。dark は半透明白が重なって浮くため据え置き）。
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "@container flex min-h-screen bg-[var(--Surface-Secondary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]",
+        "data-slot": "admin-shell",
+        children: [
+          g !== !1 && /* @__PURE__ */ e(B, { href: `#${f}` }),
+          /* @__PURE__ */ e(
+            O,
+            {
+              items: u,
+              activeKey: t,
+              drawerTitle: p ?? s,
+              open: y,
+              onOpenChange: h
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: "@container/main flex flex-1 flex-col @md:pl-18", children: [
+            /* @__PURE__ */ e(
+              L,
+              {
+                brand: b ?? `${s}管理`,
+                onMenuClick: () => h(!0),
+                actions: v ?? S
+              }
+            ),
+            /* @__PURE__ */ r("main", { id: f, className: "mt-14 @md:mt-16 flex-1 p-4 @md:p-6", children: [
+              m && /* @__PURE__ */ r(
+                R,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "mb-2 gap-1",
+                  onClick: m,
+                  children: [
+                    /* @__PURE__ */ e(I, { size: 16 }),
+                    " ",
+                    x
+                  ]
+                }
+              ),
+              (n || l) && /* @__PURE__ */ r("div", { className: "mb-4 space-y-1", children: [
+                n && n.length > 0 && /* @__PURE__ */ e("nav", { className: "flex items-center gap-1 typo-body-sm text-[var(--Text-Low-Emphasis)]", "aria-label": "パンくず", children: n.map((o, c) => /* @__PURE__ */ r(d.Fragment, { children: [
+                  c > 0 && /* @__PURE__ */ e(F, { size: 12 }),
+                  o.href ? /* @__PURE__ */ e("a", { href: o.href, className: "hover:text-[var(--Text-Accent-Primary)] transition-colors", children: o.label }) : /* @__PURE__ */ e("span", { className: "text-[var(--Text-High-Emphasis)]", children: o.label })
+                ] }, c)) }),
+                l && /* @__PURE__ */ e("h1", { className: "typo-heading-2xl text-[var(--Text-High-Emphasis)]", children: l })
+              ] }),
+              i
+            ] })
+          ] })
+        ]
+      }
+    )
+  );
+}
+export {
+  ne as AdminShell,
+  te as MissingComponent
+};

package/dist/components/ec/anniversary-card.js

@@ -0,0 +1,63 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import "react";
+import h from "iconsax-reactjs/dist/esm/Calendar.js";
+import { cn as u } from "../../lib/utils.js";
+import { Button as i } from "../foundations/button.js";
+function N({
+  name: n,
+  relation: d,
+  type: l,
+  date: c,
+  daysLeft: m,
+  memo: r,
+  editHref: s,
+  onEdit: t,
+  className: p,
+  ...o
+}) {
+  const x = s ? /* @__PURE__ */ e(i, { variant: "tertiary", size: "xs", asChild: !0, children: /* @__PURE__ */ e("a", { href: s, children: "編集" }) }) : t ? /* @__PURE__ */ e(i, { variant: "tertiary", size: "xs", onClick: t, children: "編集" }) : null;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "anniversary-card",
+      className: u(
+        "min-w-[200px] rounded-xl border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-4 space-y-2",
+        p
+      ),
+      ...o,
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e("p", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: n }),
+            /* @__PURE__ */ e("span", { className: "typo-label-xs text-[var(--Text-Medium-Emphasis)] bg-[var(--Surface-Secondary)] px-2 py-0.5 rounded-full", children: d })
+          ] }),
+          x
+        ] }),
+        /* @__PURE__ */ a("p", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: [
+          l,
+          " — ",
+          c
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-2 bg-[var(--Surface-Accent-Primary-Light)] rounded-lg px-3 py-2", children: [
+          /* @__PURE__ */ e(
+            h,
+            {
+              size: 16,
+              className: "text-[var(--Brand-Cake-Orange)]",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ a("span", { className: "typo-label-md text-[var(--Brand-Cake-Orange)]", children: [
+            "あと",
+            m,
+            "日"
+          ] })
+        ] }),
+        r && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: r })
+      ]
+    }
+  );
+}
+export {
+  N as AnniversaryCard
+};

package/dist/components/ec/cake-logo.js

@@ -0,0 +1,38 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import "react";
+import { cn as q } from "../../lib/utils.js";
+function d({
+  height: t = 24,
+  color: h,
+  className: o,
+  ...m
+}) {
+  const c = Math.round(t * 5.2592592592592595);
+  return /* @__PURE__ */ r(
+    "svg",
+    {
+      "data-slot": "cake-logo",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 568 108",
+      width: c,
+      height: t,
+      fill: h ?? "currentColor",
+      "aria-label": "Cake.jp",
+      role: "img",
+      className: q("shrink-0", o),
+      ...m,
+      children: [
+        /* @__PURE__ */ a("path", { d: "m79.09 78.16a31.92 31.92 0 0 1 -12.15 21.38q-10.38 8.26-25.27 8.26-19.12 0-30.06-11.8t-10.93-30.16q0-18 11.66-30.13t29-12.15q15.07 0 25.6 8.75a32.07 32.07 0 0 1 11.82 22.52h-16.68a19.2 19.2 0 0 0 -6.64-11.59q-5.52-4.77-14.44-4.77a21.38 21.38 0 0 0 -17.09 7.69q-6.57 7.7-6.56 19.68 0 12.31 6.23 19.85t17.9 7.53a21.15 21.15 0 0 0 13.39-4.22 20.8 20.8 0 0 0 7.37-10.85z" }),
+        /* @__PURE__ */ a("path", { d: "m159.22 25.18h16.2v81h-16.2v-10.69c-5.94 8.21-14.53 12.31-25.11 12.31a34 34 0 0 1 -26.4-11.74q-10.54-11.74-10.53-30.38 0-18.8 10.85-30.45a35.24 35.24 0 0 1 26.89-11.67q17.34 0 24.3 12.48zm-45.52 40.5q0 11.83 6.48 19.44a20.73 20.73 0 0 0 16.52 7.62 20.12 20.12 0 0 0 16.3-7.54q6.24-7.53 6.24-19.52t-6.24-19.52a20.11 20.11 0 0 0 -16.28-7.53 20.76 20.76 0 0 0 -16.6 7.53q-6.42 7.53-6.42 19.52z" }),
+        /* @__PURE__ */ a("path", { d: "m242.93 65.68c16.45-6 25.8-22.82 25.8-40.5h-16.2a32.43 32.43 0 0 1 -32.4 32.4v-32.4h-16.51v81h16.51v-32.4a32.44 32.44 0 0 1 32.4 32.4h16.2c0-17.68-9.35-34.55-25.8-40.5z" }),
+        /* @__PURE__ */ a("path", { d: "m325 23.56q17.32 0 28.18 11.67t9.4 34.5h-60.64q1 11.17 7.13 17.58t17.33 6.4a24.88 24.88 0 0 0 12.24-3 17.48 17.48 0 0 0 7.85-8.83h16a30.77 30.77 0 0 1 -13 19.12 40.64 40.64 0 0 1 -23.33 6.8q-18.63 0-29.48-11.58t-10.78-30.86q0-18.31 11.1-30t28-11.8zm-22.36 33.7h44.36a20.88 20.88 0 0 0 -6.16-14.34q-5.84-5.92-15.41-5.92a21.69 21.69 0 0 0 -15 5.42q-6.05 5.44-7.84 14.84z" }),
+        /* @__PURE__ */ a("path", { d: "m411.48 50.2a25 25 0 0 0 -25-25 25 25 0 0 0 25-25 25 25 0 0 0 25 25 25 25 0 0 0 -25 25z" }),
+        /* @__PURE__ */ a("path", { d: "m461.71 107.34c-8.15 0-14.56-2.36-19.06-7s-6.86-10.94-7-18.71v-.1h15.43v.09a13.45 13.45 0 0 0 2.92 8 9 9 0 0 0 7.25 3 9.25 9.25 0 0 0 7.32-3.14c1.82-2.08 2.74-5.23 2.74-9.34v-54.96h15.69v55.82c0 8.23-2.36 14.74-7 19.35s-10.83 6.99-18.29 6.99z" }),
+        /* @__PURE__ */ a("path", { d: "m508.48 106.18v-81h31.15c8.61 0 15.45 2.44 20.33 7.24s7.36 11.14 7.36 18.83c0 8.23-2.5 14.76-7.42 19.41s-11.89 7-20.73 7h-15.48v28.51zm29.52-42.68c4.34 0 7.69-1.09 10-3.26s3.43-5.19 3.43-9a11.44 11.44 0 0 0 -3.43-8.57c-2.28-2.21-5.48-3.32-9.51-3.32h-14.8v24.15z" })
+      ]
+    }
+  );
+}
+export {
+  d as CakeLogo
+};

package/dist/components/ec/chart-controls.js

@@ -0,0 +1,91 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import "react";
+import { cn as c } from "../../lib/utils.js";
+import { Switch as d } from "../foundations/switch.js";
+const h = [
+  { value: "daily", label: "日別" },
+  { value: "weekly", label: "週別" },
+  { value: "monthly", label: "月別" }
+], u = [
+  { value: "3M", label: "3M" },
+  { value: "6M", label: "6M" },
+  { value: "12M", label: "12M" },
+  { value: "all", label: "全期間" }
+];
+function n({
+  active: t,
+  onClick: s,
+  children: r
+}) {
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      onClick: s,
+      className: c(
+        "px-3 py-1 rounded typo-label-sm transition-colors",
+        t ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
+      ),
+      children: r
+    }
+  );
+}
+function g({
+  granularity: t = "daily",
+  onGranularityChange: s,
+  period: r = "3M",
+  onPeriodChange: i,
+  showPrevious: m = !1,
+  onShowPreviousChange: o,
+  className: v
+}) {
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-slot": "chart-controls",
+      className: c(
+        "flex flex-wrap items-center gap-x-4 gap-y-2",
+        v
+      ),
+      children: [
+        /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ a("span", { className: "typo-label-sm text-[var(--Text-Low-Emphasis)]", children: "粒度" }),
+          /* @__PURE__ */ a("div", { className: "flex items-center gap-0.5", children: h.map((e) => /* @__PURE__ */ a(
+            n,
+            {
+              active: t === e.value,
+              onClick: () => s?.(e.value),
+              children: e.label
+            },
+            e.value
+          )) })
+        ] }),
+        /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ a("span", { className: "typo-label-sm text-[var(--Text-Low-Emphasis)]", children: "期間" }),
+          /* @__PURE__ */ a("div", { className: "flex items-center gap-0.5", children: u.map((e) => /* @__PURE__ */ a(
+            n,
+            {
+              active: r === e.value,
+              onClick: () => i?.(e.value),
+              children: e.label
+            },
+            e.value
+          )) })
+        ] }),
+        /* @__PURE__ */ l("label", { className: "flex items-center gap-2 cursor-pointer select-none ml-auto", children: [
+          /* @__PURE__ */ a(
+            d,
+            {
+              checked: m,
+              onCheckedChange: o
+            }
+          ),
+          /* @__PURE__ */ a("span", { className: "typo-label-sm text-[var(--Text-Medium-Emphasis)]", children: "前期比を重ねる" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  g as ChartControls
+};

package/dist/components/ec/countdown-timer.js

@@ -0,0 +1,50 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import "react";
+import { cn as c } from "../../lib/utils.js";
+function b({
+  variant: t = "active",
+  remainingSeconds: a = 0,
+  label: o,
+  className: s,
+  ...i
+}) {
+  const d = Math.floor(a / 3600), m = Math.floor(a % 3600 / 60), p = a % 60, r = (h) => String(h).padStart(2, "0"), u = o ?? (t === "before" ? "開始まで" : t === "active" ? "終了まで" : "");
+  return t === "ended" ? /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "countdown-timer",
+      className: c(
+        "flex items-center justify-center rounded-lg bg-[var(--Surface-Secondary)] px-4 py-3 typo-label-md text-[var(--Text-Medium-Emphasis)]",
+        s
+      ),
+      ...i,
+      children: "次回の開催をお待ち下さい"
+    }
+  ) : /* @__PURE__ */ n(
+    "div",
+    {
+      "data-slot": "countdown-timer",
+      className: c(
+        "flex items-center justify-center gap-2 rounded-lg bg-[var(--Surface-Secondary)] px-4 py-3",
+        s
+      ),
+      ...i,
+      children: [
+        /* @__PURE__ */ e("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: u }),
+        /* @__PURE__ */ n("div", { className: "flex items-center gap-0.5", children: [
+          /* @__PURE__ */ e(l, { value: r(d) }),
+          /* @__PURE__ */ e("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: ":" }),
+          /* @__PURE__ */ e(l, { value: r(m) }),
+          /* @__PURE__ */ e("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: ":" }),
+          /* @__PURE__ */ e(l, { value: r(p) })
+        ] })
+      ]
+    }
+  );
+}
+function l({ value: t }) {
+  return /* @__PURE__ */ e("span", { className: "flex h-7 min-w-7 items-center justify-center rounded bg-[var(--Primitive-Gray-900)] px-1 typo-label-md tabular-nums text-[var(--Primitive-White-alpha-1000)]", children: t });
+}
+export {
+  b as CountdownTimer
+};

package/dist/components/ec/coupon-card.js

@@ -0,0 +1,136 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import "react";
+import y from "iconsax-reactjs/dist/esm/Ticket2.js";
+import { Loader2 as g, Check as N } from "lucide-react";
+import { cn as d } from "../../lib/utils.js";
+function P({
+  title: r,
+  description: t,
+  imageUrl: l,
+  imageAlt: o,
+  shopThumbnailUrl: s,
+  shopName: a,
+  status: c = "available",
+  onAcquire: n,
+  acquireLabel: u = "クーポンを獲得する",
+  layout: p = "vertical",
+  limitLabel: f,
+  conditionText: b,
+  expiryText: x,
+  className: m,
+  ...v
+}) {
+  return p === "horizontal" ? /* @__PURE__ */ e(
+    w,
+    {
+      title: r,
+      limitLabel: f,
+      conditionText: b,
+      expiryText: x,
+      status: c,
+      onAcquire: n,
+      className: m,
+      ...v
+    }
+  ) : /* @__PURE__ */ i(
+    "div",
+    {
+      "data-slot": "coupon-card",
+      className: d(
+        "min-w-[200px] overflow-hidden rounded-xl border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)]",
+        c === "unavailable" && "opacity-50",
+        m
+      ),
+      ...v,
+      children: [
+        l && /* @__PURE__ */ i("div", { className: "relative aspect-[5/2] w-full overflow-hidden bg-[var(--Surface-Secondary)]", children: [
+          /* @__PURE__ */ e(
+            "img",
+            {
+              src: l,
+              alt: o ?? r,
+              className: "h-full w-full object-cover",
+              loading: "lazy"
+            }
+          ),
+          s && /* @__PURE__ */ e("div", { className: "absolute bottom-2 left-2 z-[var(--Z-Local-2)] size-10 overflow-hidden rounded-full border-2 border-[var(--Surface-Primary)] bg-[var(--Surface-Primary)] shadow-sm", children: /* @__PURE__ */ e(
+            "img",
+            {
+              src: s,
+              alt: a ?? "ショップ",
+              className: "h-full w-full object-cover",
+              loading: "lazy"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ i("div", { className: "px-4 pb-1 pt-3", children: [
+          /* @__PURE__ */ e("h3", { className: "break-words typo-heading-md text-[var(--Text-High-Emphasis)]", children: r }),
+          t && /* @__PURE__ */ e("p", { className: "mt-1 break-words typo-body-md text-[var(--Text-Medium-Emphasis)]", children: t })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "px-4 py-3", children: /* @__PURE__ */ e("div", { className: "border-t border-dashed border-[var(--Border-Medium-Emphasis)]" }) }),
+        /* @__PURE__ */ e("div", { className: "px-4 pb-4", children: /* @__PURE__ */ e(h, { status: c, onAcquire: n, label: u, size: "lg" }) })
+      ]
+    }
+  );
+}
+function w({
+  title: r,
+  limitLabel: t,
+  conditionText: l,
+  expiryText: o,
+  status: s = "available",
+  onAcquire: a,
+  className: c,
+  ...n
+}) {
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-slot": "coupon-card",
+      "data-layout": "horizontal",
+      className: d("flex items-stretch min-w-0 overflow-hidden", c),
+      ...n,
+      children: [
+        /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col items-start justify-center gap-1 rounded-l-lg border-b border-l border-t border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] px-3 py-2", children: [
+          t && /* @__PURE__ */ e("span", { className: "shrink-0 rounded-full bg-[var(--Surface-Accent-Primary-Light)] px-2 py-0.5 typo-body-sm text-[var(--Text-Accent-Primary)]", children: t }),
+          /* @__PURE__ */ e("h3", { className: "typo-heading-lg text-[var(--Text-Accent-Primary)]", children: r }),
+          /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-col gap-0.5 self-stretch typo-body-sm", children: [
+            l && /* @__PURE__ */ e("p", { className: "truncate text-[var(--Text-Accent-Primary)]", children: l }),
+            o && /* @__PURE__ */ e("p", { className: "truncate text-[var(--Text-High-Emphasis)]", children: o })
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "flex items-stretch justify-center", children: /* @__PURE__ */ e("svg", { width: "2", height: "100%", preserveAspectRatio: "none", className: "text-[var(--Border-Medium-Emphasis)]", children: /* @__PURE__ */ e("line", { x1: "1", y1: "0", x2: "1", y2: "100%", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "4 3" }) }) }),
+        /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center justify-center rounded-r-lg border-b border-r border-t border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] px-3", children: /* @__PURE__ */ e(h, { status: s, onAcquire: a, label: "獲得する", size: "sm" }) })
+      ]
+    }
+  );
+}
+function h({
+  status: r,
+  onAcquire: t,
+  label: l,
+  size: o = "lg"
+}) {
+  const s = o === "sm", a = s ? "flex h-9 items-center justify-center gap-0.5 rounded-lg px-4 typo-label-md" : "flex h-12 w-full items-center justify-center rounded-xl typo-label-lg";
+  return r === "available" ? /* @__PURE__ */ i(
+    "button",
+    {
+      type: "button",
+      onClick: t,
+      className: d(
+        a,
+        "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)] transition-colors hover:bg-[var(--Hover-Primary-Button)] active:scale-[0.98]"
+      ),
+      children: [
+        s && /* @__PURE__ */ e(y, { size: 16 }),
+        l
+      ]
+    }
+  ) : r === "acquiring" ? /* @__PURE__ */ e("div", { className: d(a, "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]"), children: /* @__PURE__ */ e(g, { className: "size-5 animate-spin" }) }) : r === "acquired" ? /* @__PURE__ */ i("div", { className: d(a, "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] animate-in fade-in duration-[var(--Motion-Duration-Slow)] gap-1.5"), children: [
+    /* @__PURE__ */ e(N, { className: "size-4" }),
+    "獲得済み"
+  ] }) : /* @__PURE__ */ e("div", { className: d(a, "bg-[var(--Surface-Secondary)] text-[var(--Text-Low-Emphasis)]"), children: "獲得不可" });
+}
+export {
+  P as CouponCard
+};