@cakejp/design-system 0.17.1 → 0.20.0

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

@@ -1,40 +1,40 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import "react";
-import { cn as x } from "../../lib/utils.js";
-import { PriceDisplay as T } from "../primitives/price-display.js";
-import { RatingStars as k } from "./rating-stars.js";
-import { Tag as p } from "../primitives/tag.js";
-function B({
-  href: l,
-  onClick: a,
+import { cn as m } from "../../lib/utils.js";
+import { PriceDisplay as k } from "../primitives/price-display.js";
+import { RatingStars as B } from "./rating-stars.js";
+import { Tag as v } from "../primitives/tag.js";
+function j({
+  href: a,
+  onClick: r,
   name: t
 }) {
-  return l ? /* @__PURE__ */ e(
+  return a ? /* @__PURE__ */ e(
     "a",
     {
-      href: l,
+      href: a,
       className: "absolute inset-0 z-[var(--Z-Local-1)]",
       "aria-label": t,
-      onClick: a,
+      onClick: r,
       children: /* @__PURE__ */ e("span", { className: "sr-only", children: t })
     }
-  ) : a ? /* @__PURE__ */ e(
+  ) : r ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       className: "absolute inset-0 z-[var(--Z-Local-1)] cursor-pointer",
       "aria-label": t,
-      onClick: a,
+      onClick: r,
       children: /* @__PURE__ */ e("span", { className: "sr-only", children: t })
     }
   ) : null;
 }
-function O({ size: l = 20, filled: a = !1 }) {
+function $({ size: a = 20, filled: r = !1 }) {
   return /* @__PURE__ */ e(
     "svg",
     {
-      width: l,
-      height: l,
+      width: a,
+      height: a,
       viewBox: "0 0 24 24",
       fill: "none",
       className: "transition-colors",
@@ -42,8 +42,8 @@ function O({ size: l = 20, filled: a = !1 }) {
         "path",
         {
           d: "M17 3H7a2 2 0 0 0-2 2v16l7-4 7 4V5a2 2 0 0 0-2-2Z",
-          fill: a ? "var(--Brand-Cake-Orange)" : "none",
-          stroke: a ? "var(--Brand-Cake-Orange)" : "var(--Object-High-Emphasis)",
+          fill: r ? "var(--Brand-Cake-Orange)" : "none",
+          stroke: r ? "var(--Brand-Cake-Orange)" : "var(--Object-High-Emphasis)",
           strokeWidth: 1.5,
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -52,132 +52,137 @@ function O({ size: l = 20, filled: a = !1 }) {
     }
   );
 }
-function E({
-  isFavorite: l,
-  onToggle: a,
+function M({
+  isFavorite: a,
+  onToggle: r,
   size: t = "md"
 }) {
   return /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      className: x(
+      className: m(
         "relative z-10 flex items-center justify-center rounded-full border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)]/80 backdrop-blur-sm transition-colors hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Tertiary)]",
         t === "sm" ? "size-[30px]" : "size-9"
       ),
-      onClick: (i) => {
-        i.preventDefault(), i.stopPropagation(), a();
+      onClick: (o) => {
+        o.preventDefault(), o.stopPropagation(), r();
       },
-      "aria-label": l ? "お気に入りから削除" : "お気に入りに追加",
+      "aria-label": a ? "お気に入りから削除" : "お気に入りに追加",
       children: /* @__PURE__ */ e(
-        O,
+        $,
         {
           size: t === "sm" ? 16 : 20,
-          filled: l
+          filled: a
         }
       )
     }
   );
 }
-function j({ rank: l }) {
+function Z({ rank: a }) {
   return /* @__PURE__ */ e(
     "img",
     {
-      src: `https://assets.cake.jp/bp/img/common/tags/ranking_${l}.png`,
-      alt: `${l}位`,
+      src: `https://assets.cake.jp/bp/img/common/tags/ranking_${a}.png`,
+      alt: `${a}位`,
       loading: "lazy",
       className: "absolute left-1 top-0 z-[var(--Z-Local-2)] h-auto w-[60px]"
     }
   );
 }
-function R(l, a) {
-  return a == null || a <= l ? null : `${Math.round((a - l) / a * 100)}%OFF`;
+function D(a, r) {
+  return r == null || r <= a ? null : `${Math.round((r - a) / r * 100)}%OFF`;
 }
-function M({ name: l, href: a }) {
-  return a ? /* @__PURE__ */ e(
+function C({ name: a, href: r }) {
+  return r ? /* @__PURE__ */ e(
     "a",
     {
-      href: a,
+      href: r,
       className: "relative z-10 truncate typo-body-sm text-[var(--Text-Low-Emphasis)] hover:text-[var(--Text-Medium-Emphasis)] hover:underline",
       onClick: (t) => t.stopPropagation(),
-      children: l
+      children: a
     }
-  ) : /* @__PURE__ */ e("p", { className: "truncate typo-body-sm text-[var(--Text-Low-Emphasis)]", children: l });
+  ) : /* @__PURE__ */ e("p", { className: "truncate typo-body-sm text-[var(--Text-Low-Emphasis)]", children: a });
+}
+function H(a) {
+  if (a !== "none")
+    return a === "fade" ? "transition-[filter] group-hover:brightness-110" : "transition-transform group-hover:scale-105";
 }
-function _({
-  className: l,
-  name: a,
+function J({
+  className: a,
+  name: r,
   imageUrl: t,
-  imageAlt: i,
-  price: v,
-  originalPrice: f,
-  caption: m,
-  rating: o,
+  imageAlt: o,
+  price: f,
+  originalPrice: b,
+  caption: u,
+  rating: i,
   reviewCount: y,
-  shopName: u,
+  shopName: h,
   shopHref: N,
-  tags: b = [],
-  isFavorite: w = !1,
-  onFavoriteToggle: h,
-  onCardClick: g,
-  href: z,
+  hoverEffect: P,
+  tags: x = [],
+  isFavorite: g = !1,
+  onFavoriteToggle: p,
+  onCardClick: z,
+  href: w,
   ranking: n,
   deliveryDate: c,
-  orientation: Z = "vertical",
-  showDiscountBadge: P = !0,
-  showCartButton: S = !1,
-  onCartAdd: C,
-  cartButtonLabel: H = "カートに追加",
+  orientation: E = "vertical",
+  showDiscountBadge: S = !0,
+  showCartButton: O = !1,
+  onCartAdd: I,
+  cartButtonLabel: R = "カートに追加",
   ...L
 }) {
-  const d = P ? R(v, f) : null;
-  return Z === "horizontal" ? /* @__PURE__ */ r(
+  const T = P ?? (E === "horizontal" ? "none" : "zoom"), d = S ? D(f, b) : null;
+  return E === "horizontal" ? /* @__PURE__ */ l(
     "div",
     {
       "data-slot": "product-card",
       "data-orientation": "horizontal",
-      className: x(
+      className: m(
         // min-w-0: 列トラック（1fr = minmax(auto,1fr)）が nowrap の内容や
         // 固定 min-width に押し広げられ、カードが列からはみ出すのを防ぐ（#210）
         "group relative flex min-w-0 rounded-lg bg-[var(--Surface-Primary)]",
         n != null && "pt-3",
-        l
+        a
       ),
       ...L,
       children: [
-        /* @__PURE__ */ e(B, { href: z, onClick: g, name: a }),
-        n != null && /* @__PURE__ */ e(j, { rank: n }),
-        /* @__PURE__ */ r("div", { className: "relative h-auto w-28 shrink-0 overflow-hidden rounded-lg @sm:w-36", children: [
-          /* @__PURE__ */ e("img", { src: t, alt: i ?? a, className: "h-full w-full object-cover", loading: "lazy" }),
-          d && /* @__PURE__ */ e(p, { variant: "sale", size: "sm", className: "absolute bottom-1.5 left-1.5 z-[var(--Z-Local-2)]", children: d }),
-          b.length > 0 && /* @__PURE__ */ e("div", { className: "absolute bottom-1.5 left-1.5 z-[var(--Z-Local-2)] flex flex-wrap gap-1", children: !d && b.map((s) => /* @__PURE__ */ e(p, { variant: s.variant, size: "sm", children: s.label }, s.label)) }),
-          h && /* @__PURE__ */ e("div", { className: "absolute bottom-1 right-1 z-10", children: /* @__PURE__ */ e(E, { isFavorite: w, onToggle: h, size: "sm" }) })
+        /* @__PURE__ */ e(j, { href: w, onClick: z, name: r }),
+        n != null && /* @__PURE__ */ e(Z, { rank: n }),
+        /* @__PURE__ */ l("div", { className: "relative h-auto w-28 shrink-0 overflow-hidden rounded-lg @sm:w-36", children: [
+          /* @__PURE__ */ e("img", { src: t, alt: o ?? r, className: m("h-full w-full object-cover duration-[var(--Motion-Duration-Base)]", H(T)), loading: "lazy" }),
+          d && /* @__PURE__ */ e(v, { variant: "sale", size: "sm", className: "absolute bottom-1.5 left-1.5 z-[var(--Z-Local-2)]", children: d }),
+          x.length > 0 && /* @__PURE__ */ e("div", { className: "absolute bottom-1.5 left-1.5 z-[var(--Z-Local-2)] flex flex-wrap gap-1", children: !d && x.map((s) => /* @__PURE__ */ e(v, { variant: s.variant, size: "sm", children: s.label }, s.label)) }),
+          p && /* @__PURE__ */ e("div", { className: "absolute bottom-1 right-1 z-10", children: /* @__PURE__ */ e(M, { isFavorite: g, onToggle: p, size: "sm" }) })
         ] }),
-        /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 flex-col justify-between py-1 pl-3 pr-1", children: [
-          /* @__PURE__ */ r("div", { className: "space-y-0.5", children: [
-            u && /* @__PURE__ */ e(M, { name: u, href: N }),
-            /* @__PURE__ */ e("h3", { className: "line-clamp-2 typo-body-md text-[var(--Text-High-Emphasis)]", children: a })
+        /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 flex-col justify-between py-1 pl-3 pr-1", children: [
+          /* @__PURE__ */ l("div", { className: "space-y-0.5", children: [
+            h && /* @__PURE__ */ e(C, { name: h, href: N }),
+            /* @__PURE__ */ e("h3", { className: "line-clamp-2 typo-body-md text-[var(--Text-High-Emphasis)]", children: r })
           ] }),
-          /* @__PURE__ */ r("div", { className: "mt-1 min-w-0 space-y-0.5", children: [
-            /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
-              o != null && /* @__PURE__ */ e(k, { rating: o, reviewCount: y, size: "sm" }),
-              c && /* @__PURE__ */ r("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: [
+          /* @__PURE__ */ l("div", { className: "mt-1 min-w-0 space-y-0.5", children: [
+            /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+              i != null && /* @__PURE__ */ e(B, { rating: i, reviewCount: y, size: "sm" }),
+              c && /* @__PURE__ */ l("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: [
                 "最短 ",
                 c
               ] })
             ] }),
-            /* @__PURE__ */ e(T, { price: v, originalPrice: f, size: "sm", showTaxLabel: !1 }),
-            m && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: m })
+            /* @__PURE__ */ e(k, { price: f, originalPrice: b, size: "sm", showTaxLabel: !1 }),
+            u && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: u })
           ] })
         ] })
       ]
     }
-  ) : /* @__PURE__ */ r(
+  ) : /* @__PURE__ */ l(
     "div",
     {
       "data-slot": "product-card",
       "data-orientation": "vertical",
-      className: x(
+      className: m(
         // max-w: 広いグリッドセルでもカードが膨らみすぎないようカード自身が上限を持つ。
         // 280px は本番の検索結果グリッド（PC 5列 ≈ カード215px）では未到達＝影響なし。
         // マイページ等の3列グリッド（実効幅 ~950px）で 3×280+gap が収まる上限として採用。
@@ -185,44 +190,44 @@ function _({
         // 列からはみ出す原因だった（#210）。幅は列（minmax(0,1fr)）側が決める。
         "group relative flex w-full min-w-0 max-w-[280px] flex-col gap-1 bg-[var(--Surface-Primary)]",
         n != null && "pt-3",
-        l
+        a
       ),
       ...L,
       children: [
-        /* @__PURE__ */ e(B, { href: z, onClick: g, name: a }),
-        n != null && /* @__PURE__ */ e(j, { rank: n }),
-        /* @__PURE__ */ r("div", { className: "relative", children: [
-          /* @__PURE__ */ r("div", { className: "aspect-square overflow-hidden rounded-lg", children: [
-            /* @__PURE__ */ e("img", { src: t, alt: i ?? a, className: "h-full w-full object-cover transition-transform duration-[var(--Motion-Duration-Base)] group-hover:scale-105", loading: "lazy" }),
-            /* @__PURE__ */ e("div", { className: "absolute inset-x-1 bottom-1 z-[var(--Z-Local-3)] flex items-end", children: /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-1", children: [
-              d && /* @__PURE__ */ e(p, { variant: "sale", size: "sm", children: d }),
-              b.map((s) => /* @__PURE__ */ e(p, { variant: s.variant, size: "sm", children: s.label }, s.label))
+        /* @__PURE__ */ e(j, { href: w, onClick: z, name: r }),
+        n != null && /* @__PURE__ */ e(Z, { rank: n }),
+        /* @__PURE__ */ l("div", { className: "relative", children: [
+          /* @__PURE__ */ l("div", { className: "aspect-square overflow-hidden rounded-lg", children: [
+            /* @__PURE__ */ e("img", { src: t, alt: o ?? r, className: m("h-full w-full object-cover duration-[var(--Motion-Duration-Base)]", H(T)), loading: "lazy" }),
+            /* @__PURE__ */ e("div", { className: "absolute inset-x-1 bottom-1 z-[var(--Z-Local-3)] flex items-end", children: /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1", children: [
+              d && /* @__PURE__ */ e(v, { variant: "sale", size: "sm", children: d }),
+              x.map((s) => /* @__PURE__ */ e(v, { variant: s.variant, size: "sm", children: s.label }, s.label))
             ] }) })
           ] }),
-          h && /* @__PURE__ */ e("div", { className: "absolute bottom-1.5 right-1.5 z-[var(--Z-Local-4)]", children: /* @__PURE__ */ e(E, { isFavorite: w, onToggle: h }) })
+          p && /* @__PURE__ */ e("div", { className: "absolute bottom-1.5 right-1.5 z-[var(--Z-Local-4)]", children: /* @__PURE__ */ e(M, { isFavorite: g, onToggle: p }) })
         ] }),
-        /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-          u && /* @__PURE__ */ e(M, { name: u, href: N }),
-          /* @__PURE__ */ e("h3", { className: "line-clamp-2 min-h-[2lh] typo-body-md text-[var(--Text-High-Emphasis)]", children: a }),
-          (o != null || c) && /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
-            o != null && /* @__PURE__ */ e(k, { rating: o, reviewCount: y, size: "sm" }),
-            c && /* @__PURE__ */ r("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: [
+        /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          h && /* @__PURE__ */ e(C, { name: h, href: N }),
+          /* @__PURE__ */ e("h3", { className: "line-clamp-2 min-h-[2lh] typo-body-md text-[var(--Text-High-Emphasis)]", children: r }),
+          (i != null || c) && /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+            i != null && /* @__PURE__ */ e(B, { rating: i, reviewCount: y, size: "sm" }),
+            c && /* @__PURE__ */ l("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: [
               "最短 ",
               c
             ] })
           ] }),
-          /* @__PURE__ */ e(T, { price: v, originalPrice: f, size: "md", showTaxLabel: !1 }),
-          m && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: m })
+          /* @__PURE__ */ e(k, { price: f, originalPrice: b, size: "md", showTaxLabel: !1 }),
+          u && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: u })
         ] }),
-        S && /* @__PURE__ */ e(
+        O && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
             className: "relative z-10 flex h-9 w-full items-center justify-center gap-0.5 rounded-lg bg-[var(--Brand-Cake-Orange)] typo-label-md text-[var(--Text-on-Inverse)] transition-colors hover:bg-[var(--Hover-Primary-Button)] active:bg-[var(--Active-Primary-Button)]",
             onClick: (s) => {
-              s.preventDefault(), s.stopPropagation(), C?.();
+              s.preventDefault(), s.stopPropagation(), I?.();
             },
-            children: H
+            children: R
           }
         )
       ]
@@ -230,6 +235,6 @@ function _({
   );
 }
 export {
-  O as BookmarkRibbonIcon,
-  _ as ProductCard
+  $ as BookmarkRibbonIcon,
+  J as ProductCard
 };

package/dist/components/ec/product-option.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import * as d from "react";
 import x from "iconsax-reactjs/dist/esm/ArrowDown2.js";

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

@@ -1,13 +1,14 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import "react";
-import T from "iconsax-reactjs/dist/esm/Like1.js";
+import z from "iconsax-reactjs/dist/esm/Like1.js";
 import { cn as r } from "../../lib/utils.js";
-import { SparkleIcon as z } from "./rating-stars.js";
-function O({
+import { SparkleIcon as E } from "./rating-stars.js";
+function P({
   className: f,
   variant: m = "list",
-  rating: v,
-  date: h,
+  bordered: v = !0,
+  rating: h,
+  date: u,
   text: s,
   imageUrl: d,
   productName: l,
@@ -15,22 +16,23 @@ function O({
   helpfulCount: i,
   isLiked: t = !1,
   onLikeClick: g,
-  onMoreClick: u,
+  onMoreClick: y,
   maxLength: c = 80,
-  ...y
+  ...b
 }) {
-  const n = m === "pc", p = m === "card", b = s.length > c ? s.slice(0, c) + "..." : s, N = s.length > c, w = n ? "size-64" : "size-20";
+  const n = m === "pc", p = m === "card", N = s.length > c ? s.slice(0, c) + "..." : s, w = s.length > c, T = n ? "size-64" : "size-20";
   return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "review-card",
       className: r(
-        "flex flex-col rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)]",
+        "flex flex-col rounded-lg bg-[var(--Surface-Primary)]",
+        v && "border border-[var(--Border-Medium-Emphasis)]",
         n ? "w-full max-w-[680px] gap-4 p-6" : "min-w-[240px] w-full gap-2 p-4",
         p && "items-center",
         f
       ),
-      ...y,
+      ...b,
       children: [
         p && l && /* @__PURE__ */ a("div", { className: "flex w-full items-center gap-1.5 rounded bg-[var(--Surface-Secondary)] p-2", children: [
           o && /* @__PURE__ */ e(
@@ -44,17 +46,17 @@ function O({
           /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-High-Emphasis)]", children: l })
         ] }),
         /* @__PURE__ */ a("div", { className: "flex w-full items-center justify-between", children: [
-          /* @__PURE__ */ e("div", { className: "flex items-start", children: Array.from({ length: 5 }).map((E, x) => /* @__PURE__ */ e(
-            z,
+          /* @__PURE__ */ e("div", { className: "flex items-start", children: Array.from({ length: 5 }).map((k, x) => /* @__PURE__ */ e(
+            E,
             {
               size: 20,
               className: r(
-                x < v ? "text-[var(--Brand-Cake-Orange)]" : "text-[var(--Border-Low-Emphasis)]"
+                x < h ? "text-[var(--Brand-Cake-Orange)]" : "text-[var(--Border-Low-Emphasis)]"
               )
             },
             x
           )) }),
-          /* @__PURE__ */ e("span", { className: "typo-body-md text-[var(--Text-High-Emphasis)]", children: h })
+          /* @__PURE__ */ e("span", { className: "typo-body-md text-[var(--Text-High-Emphasis)]", children: u })
         ] }),
         /* @__PURE__ */ a(
           "div",
@@ -65,18 +67,18 @@ function O({
             ),
             children: [
               /* @__PURE__ */ a("p", { className: "min-w-0 flex-1 typo-body-md text-[var(--Text-High-Emphasis)]", children: [
-                b,
-                N && /* @__PURE__ */ e(
+                N,
+                w && /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
                     className: "typo-label-md text-[var(--Text-Accent-Primary)]",
-                    onClick: u,
+                    onClick: y,
                     children: "もっと見る"
                   }
                 )
               ] }),
-              d && /* @__PURE__ */ e("div", { className: r("shrink-0 overflow-hidden rounded-lg", w), children: /* @__PURE__ */ e(
+              d && /* @__PURE__ */ e("div", { className: r("shrink-0 overflow-hidden rounded-lg", T), children: /* @__PURE__ */ e(
                 "img",
                 {
                   src: d,
@@ -95,7 +97,7 @@ function O({
             onClick: g,
             children: [
               /* @__PURE__ */ e(
-                T,
+                z,
                 {
                   size: 16,
                   className: r(
@@ -122,5 +124,5 @@ function O({
   );
 }
 export {
-  O as ReviewCard
+  P as ReviewCard
 };

package/dist/components/ec/review-form.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
 import * as s from "react";
 import I from "iconsax-reactjs/dist/esm/Camera.js";

package/dist/components/foundations/accordion.js

@@ -1,61 +1,62 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
+"use client";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import "react";
 import { ChevronDownIcon as d } from "lucide-react";
-import { Accordion as t } from "radix-ui";
+import { Accordion as r } from "radix-ui";
 import { cn as i } from "../../lib/utils.js";
 function b({
-  ...o
+  ...e
 }) {
-  return /* @__PURE__ */ e(t.Root, { "data-slot": "accordion", ...o });
+  return /* @__PURE__ */ o(r.Root, { "data-slot": "accordion", ...e });
 }
 function g({
-  className: o,
-  ...r
+  className: e,
+  ...t
 }) {
-  return /* @__PURE__ */ e(
-    t.Item,
+  return /* @__PURE__ */ o(
+    r.Item,
     {
       "data-slot": "accordion-item",
-      className: i("border-b border-[var(--Border-Medium-Emphasis)] last:border-b-0", o),
-      ...r
+      className: i("border-b border-[var(--Border-Medium-Emphasis)] last:border-b-0", e),
+      ...t
     }
   );
 }
 function v({
-  className: o,
-  children: r,
+  className: e,
+  children: t,
   headingLevel: n = 3,
   ...a
 }) {
   const s = `h${n}`;
-  return /* @__PURE__ */ e(t.Header, { asChild: !0, children: /* @__PURE__ */ e(s, { className: "flex", children: /* @__PURE__ */ c(
-    t.Trigger,
+  return /* @__PURE__ */ o(r.Header, { asChild: !0, children: /* @__PURE__ */ o(s, { className: "flex", children: /* @__PURE__ */ c(
+    r.Trigger,
     {
       "data-slot": "accordion-trigger",
       className: i(
         "flex w-full flex-1 cursor-pointer items-center justify-between gap-4 py-4 text-left typo-label-md text-[var(--Text-High-Emphasis)] transition-all outline-none hover:bg-[var(--Surface-Tertiary)]/60 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-        o
+        e
       ),
       ...a,
       children: [
-        r,
-        /* @__PURE__ */ e(d, { className: "pointer-events-none size-4 shrink-0 text-[var(--Text-Medium-Emphasis)] transition-transform duration-[var(--Motion-Duration-Base)]" })
+        t,
+        /* @__PURE__ */ o(d, { className: "pointer-events-none size-4 shrink-0 text-[var(--Text-Medium-Emphasis)] transition-transform duration-[var(--Motion-Duration-Base)]" })
       ]
     }
   ) }) });
 }
 function h({
-  className: o,
-  children: r,
+  className: e,
+  children: t,
   ...n
 }) {
-  return /* @__PURE__ */ e(
-    t.Content,
+  return /* @__PURE__ */ o(
+    r.Content,
     {
       "data-slot": "accordion-content",
       className: "overflow-hidden typo-body-md data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       ...n,
-      children: /* @__PURE__ */ e("div", { className: i("pt-0 pb-4", o), children: r })
+      children: /* @__PURE__ */ o("div", { className: i("pt-0 pb-4", e), children: t })
     }
   );
 }

package/dist/components/foundations/alert-dialog.js

@@ -8,7 +8,7 @@ function x({
 }) {
   return /* @__PURE__ */ e(o.Root, { "data-slot": "alert-dialog", ...a });
 }
-function D({
+function v({
   ...a
 }) {
   return /* @__PURE__ */ e(o.Trigger, { "data-slot": "alert-dialog-trigger", ...a });
@@ -34,7 +34,7 @@ function g({
     }
   );
 }
-function h({
+function D({
   className: a,
   size: t = "default",
   ...r
@@ -51,7 +51,7 @@ function h({
           // 画面端との余白は上下左右 40px（calc(100%-5rem)）。
           // 幅上限は端末幅に応じて: SP は端末幅-80px に追従 / sm 以上は
           // default=480px（テキスト確認が間延びしない幅）・sm=320px
-          "group/alert-dialog-content fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-full max-w-[calc(100%-5rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-background p-6 shadow-lg duration-[var(--Motion-Duration-Base)] data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-[480px]",
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-full max-w-[calc(100%-5rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Elevated)] p-6 shadow-lg duration-[var(--Motion-Duration-Base)] data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-[480px]",
           a
         ),
         ...r
@@ -59,7 +59,7 @@ function h({
     )
   ] });
 }
-function v({
+function h({
   className: a,
   ...t
 }) {
@@ -154,12 +154,12 @@ export {
   x as AlertDialog,
   w as AlertDialogAction,
   N as AlertDialogCancel,
-  h as AlertDialogContent,
+  D as AlertDialogContent,
   y as AlertDialogDescription,
   A as AlertDialogFooter,
-  v as AlertDialogHeader,
+  h as AlertDialogHeader,
   g as AlertDialogOverlay,
   n as AlertDialogPortal,
   z as AlertDialogTitle,
-  D as AlertDialogTrigger
+  v as AlertDialogTrigger
 };

package/dist/components/foundations/alert.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import * as b from "react";
 import { cva as N } from "class-variance-authority";

package/dist/components/foundations/aspect-ratio.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as o } from "react/jsx-runtime";
 import { AspectRatio as a } from "radix-ui";
-function p({
+function r({
   ...t
 }) {
   return /* @__PURE__ */ o(a.Root, { "data-slot": "aspect-ratio", ...t });
 }
 export {
-  p as AspectRatio
+  r as AspectRatio
 };

package/dist/components/foundations/avatar.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as e } from "react/jsx-runtime";
 import "react";
 import { Avatar as r } from "radix-ui";

package/dist/components/foundations/button.js

@@ -65,7 +65,13 @@ const b = n(
         icon: "size-9 rounded-lg",
         "icon-xs": "size-6 rounded [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8 rounded-lg",
-        "icon-lg": "size-10 rounded-lg"
+        "icon-lg": "size-10 rounded-lg",
+        /**
+         * icon-xl — 44px（size-11）。size="default" と同じ高さなので、
+         * 入力行（Input / SearchBar / SelectTrigger）の横にアイコンボタンを並置しても揃う。
+         * tokens.json の touchTarget["text-input"].min = 44px も満たす唯一の icon サイズ。
+         */
+        "icon-xl": "size-11 rounded-lg"
       }
     },
     defaultVariants: {