@cakejp/design-system 0.20.1 → 0.21.0

package/dist/components/ec/delivery-calendar.js

@@ -1,105 +1,111 @@
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
 import "react";
 import E from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
 import z from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import { cn as m } from "../../lib/utils.js";
+import { cn as v } from "../../lib/utils.js";
 import { Button as u } from "../foundations/button.js";
 const A = ["日", "月", "火", "水", "木", "金", "土"];
-function H({
+function W({
   year: a,
   month: r,
-  days: h,
-  onMonthChange: v,
-  onDaySelect: x,
+  days: x,
+  onMonthChange: h,
+  onDaySelect: f,
   selectedDate: c,
-  className: f,
-  ...y
+  className: y,
+  ...b
 }) {
-  const b = new Date(a, r - 1, 1), D = new Date(a, r, 0), N = b.getDay(), w = D.getDate(), p = [];
-  let l = Array(N).fill(null);
-  for (let e = 1; e <= w; e++) {
-    const n = new Date(a, r - 1, e), i = h.find(
-      (s) => s.date.getFullYear() === a && s.date.getMonth() === r - 1 && s.date.getDate() === e
+  const D = new Date(a, r - 1, 1), N = new Date(a, r, 0), w = D.getDay(), T = N.getDate(), m = [];
+  let l = Array(w).fill(null);
+  for (let e = 1; e <= T; e++) {
+    const s = new Date(a, r - 1, e), i = x.find(
+      (n) => n.date.getFullYear() === a && n.date.getMonth() === r - 1 && n.date.getDate() === e
     );
     l.push(
-      i ?? { date: n, availability: "available" }
-    ), l.length === 7 && (p.push(l), l = []);
+      i ?? { date: s, availability: "available" }
+    ), l.length === 7 && (m.push(l), l = []);
   }
   if (l.length > 0) {
     for (; l.length < 7; ) l.push(null);
-    p.push(l);
+    m.push(l);
   }
   const k = () => {
     const e = r === 1 ? { y: a - 1, m: 12 } : { y: a, m: r - 1 };
-    v?.(e.y, e.m);
-  }, T = () => {
+    h?.(e.y, e.m);
+  }, C = () => {
     const e = r === 12 ? { y: a + 1, m: 1 } : { y: a, m: r + 1 };
-    v?.(e.y, e.m);
-  }, C = (e) => c && e.getFullYear() === c.getFullYear() && e.getMonth() === c.getMonth() && e.getDate() === c.getDate();
-  return /* @__PURE__ */ g(
+    h?.(e.y, e.m);
+  }, S = (e) => c && e.getFullYear() === c.getFullYear() && e.getMonth() === c.getMonth() && e.getDate() === c.getDate();
+  return /* @__PURE__ */ p(
     "div",
     {
       "data-slot": "delivery-calendar",
-      className: m("space-y-2", f),
-      ...y,
+      className: v("space-y-2", y),
+      ...b,
       children: [
-        /* @__PURE__ */ g("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ p("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ t(u, { variant: "ghost", size: "icon-sm", onClick: k, "aria-label": "前月", children: /* @__PURE__ */ t(E, { size: 16 }) }),
-          /* @__PURE__ */ g("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: [
+          /* @__PURE__ */ p("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: [
             r,
             "月"
           ] }),
-          /* @__PURE__ */ t(u, { variant: "ghost", size: "icon-sm", onClick: T, "aria-label": "次月", children: /* @__PURE__ */ t(z, { size: 16 }) })
+          /* @__PURE__ */ t(u, { variant: "ghost", size: "icon-sm", onClick: C, "aria-label": "次月", children: /* @__PURE__ */ t(z, { size: 16 }) })
         ] }),
-        /* @__PURE__ */ t("div", { className: "grid grid-cols-7 text-center", children: A.map((e, n) => /* @__PURE__ */ t(
+        /* @__PURE__ */ t("div", { className: "grid grid-cols-7 text-center", children: A.map((e, s) => /* @__PURE__ */ t(
           "span",
           {
-            className: m(
+            className: v(
               "py-1 typo-label-sm",
-              n === 0 && "text-[var(--Text-Caution)]",
-              n === 6 && "text-[var(--Primitive-Sea-600)]",
-              n > 0 && n < 6 && "text-[var(--Text-Medium-Emphasis)]"
+              s === 0 && "text-[var(--Text-Caution)]",
+              s === 6 && "text-[var(--Primitive-Sea-600)]",
+              s > 0 && s < 6 && "text-[var(--Text-Medium-Emphasis)]"
             ),
             children: e
           },
           e
         )) }),
-        p.map((e, n) => /* @__PURE__ */ t("div", { className: "grid grid-cols-7 text-center", children: e.map((i, s) => {
+        m.map((e, s) => /* @__PURE__ */ t("div", { className: "grid grid-cols-7 text-center", children: e.map((i, n) => {
           if (!i)
-            return /* @__PURE__ */ t("div", { className: "py-1" }, `empty-${s}`);
-          const o = i.date.getDay(), S = C(i.date), d = i.availability !== "unavailable";
-          return /* @__PURE__ */ g(
+            return /* @__PURE__ */ t("div", { className: "py-1" }, `empty-${n}`);
+          const o = i.date.getDay(), d = S(i.date), g = i.availability !== "unavailable";
+          return /* @__PURE__ */ p(
             "button",
             {
               type: "button",
-              disabled: !d,
-              onClick: () => d && x?.(i.date),
-              className: m(
+              disabled: !g,
+              "aria-pressed": d,
+              "data-selected": d || void 0,
+              onClick: () => g && f?.(i.date),
+              className: v(
                 "flex flex-col items-center gap-0.5 rounded-md py-1.5 typo-body-md transition-colors",
-                d && "cursor-pointer hover:bg-[var(--Surface-Secondary)]",
-                S && "relative z-10 bg-[var(--Brand-Cake-Orange)]/10 ring-1 ring-inset ring-[var(--Brand-Cake-Orange)]",
-                !d && "cursor-default opacity-60",
+                g && "cursor-pointer hover:bg-[var(--Surface-Secondary)]",
+                d && "relative z-10 bg-[var(--Brand-Cake-Orange)]/10 ring-1 ring-inset ring-[var(--Brand-Cake-Orange)]",
+                // forced-colors（Windows ハイコントラスト）では薄い地が Canvas に、枠（ring = box-shadow）が
+                // 消えて選んだ日が見えなかった。選んだ日だけ OS の選択色で示し、日付と ○△× も
+                // HighlightText にそろえる（子の span は自前の文字色を持つため * で指定）。通常表示は不変
+                d && "forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:*:text-[HighlightText]",
+                !g && "cursor-default opacity-60",
                 o === 0 && "text-[var(--Text-Caution)]",
                 o === 6 && "text-[var(--Primitive-Sea-600)]",
                 o > 0 && o < 6 && "text-[var(--Text-High-Emphasis)]"
               ),
               children: [
                 /* @__PURE__ */ t("span", { children: i.date.getDate() }),
-                /* @__PURE__ */ t(Y, { availability: i.availability })
+                /* @__PURE__ */ t(H, { availability: i.availability })
               ]
             },
             i.date.getDate()
           );
-        }) }, n))
+        }) }, s))
       ]
     }
   );
 }
-function Y({
+function H({
   availability: a
 }) {
   return a === "available" ? /* @__PURE__ */ t("span", { className: "typo-heading-lg text-[var(--Text-Success)]", children: "○" }) : a === "few" ? /* @__PURE__ */ t("span", { className: "typo-heading-lg text-[var(--Text-Warning)]", children: "△" }) : /* @__PURE__ */ t("span", { className: "typo-heading-lg text-[var(--Text-Low-Emphasis)]", children: "×" });
 }
 export {
-  H as DeliveryCalendar
+  W as DeliveryCalendar
 };

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

@@ -1,98 +1,109 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import L from "react";
-import z from "iconsax-reactjs/dist/esm/Home2.js";
-import c from "iconsax-reactjs/dist/esm/SearchNormal1.js";
-import _ from "iconsax-reactjs/dist/esm/Shop.js";
-import w from "iconsax-reactjs/dist/esm/Calendar.js";
-import H from "iconsax-reactjs/dist/esm/Bookmark.js";
-import P from "iconsax-reactjs/dist/esm/User.js";
-import E from "iconsax-reactjs/dist/esm/ShoppingCart.js";
-import { BreadcrumbList as C, BreadcrumbSeparator as T, BreadcrumbItem as j, BreadcrumbPage as A, BreadcrumbLink as M, Breadcrumb as s } from "../foundations/breadcrumb.js";
-import { SkipLink as F } from "../foundations/skip-link.js";
-import { Header as n } from "../primitives/header.js";
-import { SideNav as G } from "../primitives/side-nav.js";
-import { CakeLogo as I } from "./cake-logo.js";
-import { mypageMenuGroups as R } from "./_mypage-menu-data.js";
-import { BottomTabBar as U } from "../primitives/bottom-tab-bar.js";
-const $ = [
-  { icon: /* @__PURE__ */ e(c, { size: 20 }), label: "検索" },
-  { icon: /* @__PURE__ */ e(P, { size: 20 }), label: "マイページ" },
-  { icon: /* @__PURE__ */ e(E, { size: 20 }), label: "カート" }
-], q = [
-  { label: "ホーム", icon: /* @__PURE__ */ e(z, { size: 20 }), href: "/" },
-  { label: "探す", icon: /* @__PURE__ */ e(c, { size: 20 }), href: "/search/" },
-  { label: "店舗受取予約", icon: /* @__PURE__ */ e(_, { size: 20 }), href: "/takeout/" },
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import z from "react";
+import _ from "iconsax-reactjs/dist/esm/Home2.js";
+import n from "iconsax-reactjs/dist/esm/SearchNormal1.js";
+import w from "iconsax-reactjs/dist/esm/Shop.js";
+import H from "iconsax-reactjs/dist/esm/Calendar.js";
+import P from "iconsax-reactjs/dist/esm/Bookmark.js";
+import E from "iconsax-reactjs/dist/esm/User.js";
+import T from "iconsax-reactjs/dist/esm/ShoppingCart.js";
+import { BreadcrumbList as j, BreadcrumbSeparator as A, BreadcrumbItem as M, BreadcrumbPage as F, BreadcrumbLink as G, Breadcrumb as c } from "../foundations/breadcrumb.js";
+import { SkipLink as I } from "../foundations/skip-link.js";
+import { Header as t } from "../primitives/header.js";
+import { SideNav as R } from "../primitives/side-nav.js";
+import { CakeLogo as U } from "./cake-logo.js";
+import { mypageMenuGroups as $ } from "./_mypage-menu-data.js";
+import { BottomTabBar as q } from "../primitives/bottom-tab-bar.js";
+const C = [
+  { icon: /* @__PURE__ */ r(n, { size: 20 }), label: "検索" },
+  { icon: /* @__PURE__ */ r(E, { size: 20 }), label: "マイページ" },
+  { icon: /* @__PURE__ */ r(T, { size: 20 }), label: "カート" }
+], D = [
+  { label: "ホーム", icon: /* @__PURE__ */ r(_, { size: 20 }), href: "/" },
+  { label: "探す", icon: /* @__PURE__ */ r(n, { size: 20 }), href: "/search/" },
+  { label: "店舗受取予約", icon: /* @__PURE__ */ r(w, { size: 20 }), href: "/takeout/" },
   {
     label: "記念日",
-    icon: /* @__PURE__ */ e(w, { size: 20 }),
+    icon: /* @__PURE__ */ r(H, { size: 20 }),
     href: "/mypage/anniversary/"
   },
   {
     label: "ブックマーク",
-    icon: /* @__PURE__ */ e(H, { size: 20 }),
+    icon: /* @__PURE__ */ r(P, { size: 20 }),
     href: "/mypage/bookmark/item_list/"
   }
 ];
-function D(r) {
+function J(e) {
   return [
     { label: "ホーム", href: "/" },
     { label: "山田 太郎 さまのマイページ", href: "/mypage/" },
-    { label: r }
+    { label: e }
   ];
 }
-function le({
-  title: r,
-  activeMenu: t,
-  currentPath: h,
-  activeMatch: p,
-  isActiveMenuItem: b,
-  children: f,
-  breadcrumbs: u,
-  bottomNavItems: g = q,
-  menuGroups: v = R,
-  headerActions: x = $,
-  logo: N = /* @__PURE__ */ e(I, {}),
-  navItems: y,
-  onBack: k,
-  mainId: d = "main-content",
-  skipLink: B
+function lr({
+  title: e,
+  activeMenu: h,
+  currentPath: p,
+  activeMatch: b,
+  isActiveMenuItem: f,
+  children: u,
+  breadcrumbs: g,
+  bottomNavItems: v = D,
+  menuGroups: x = $,
+  headerActions: N = C,
+  logo: y = /* @__PURE__ */ r(U, {}),
+  navItems: B,
+  onBack: S,
+  mainId: o = "main-content",
+  skipLink: k,
+  linkComponent: i
 }) {
-  const o = u ?? D(r), l = /* @__PURE__ */ e(C, { children: o.map((i, m) => {
-    const S = m === o.length - 1;
-    return /* @__PURE__ */ a(L.Fragment, { children: [
-      m > 0 && /* @__PURE__ */ e(T, {}),
-      /* @__PURE__ */ e(j, { children: S ? /* @__PURE__ */ e(A, { children: i.label }) : /* @__PURE__ */ e(M, { href: i.href ?? "#", children: i.label }) })
-    ] }, m);
+  const s = g ?? J(e), l = /* @__PURE__ */ r(j, { children: s.map((m, d) => {
+    const L = d === s.length - 1;
+    return /* @__PURE__ */ a(z.Fragment, { children: [
+      d > 0 && /* @__PURE__ */ r(A, {}),
+      /* @__PURE__ */ r(M, { children: L ? /* @__PURE__ */ r(F, { children: m.label }) : /* @__PURE__ */ r(G, { href: m.href ?? "#", linkComponent: i, children: m.label }) })
+    ] }, d);
   }) });
   return /* @__PURE__ */ a("div", { className: "@container min-h-screen bg-[var(--Surface-Secondary)]", children: [
-    B !== !1 && /* @__PURE__ */ e(F, { href: `#${d}` }),
+    k !== !1 && /* @__PURE__ */ r(I, { href: `#${o}` }),
     /* @__PURE__ */ a("div", { className: "@md:hidden bg-[var(--Surface-Primary)]", children: [
-      /* @__PURE__ */ e(n, { variant: "back", onBack: k }),
-      /* @__PURE__ */ e("div", { className: "px-4 pt-3", children: /* @__PURE__ */ e(s, { children: l }) }),
-      /* @__PURE__ */ e("h1", { className: "typo-heading-xl text-[var(--Text-High-Emphasis)] px-4 pt-1 pb-3", children: r })
+      /* @__PURE__ */ r(t, { variant: "back", onBack: S }),
+      /* @__PURE__ */ r("div", { className: "px-4 pt-3", children: /* @__PURE__ */ r(c, { children: l }) }),
+      /* @__PURE__ */ r("h1", { className: "typo-heading-xl text-[var(--Text-High-Emphasis)] px-4 pt-1 pb-3", children: e })
     ] }),
-    /* @__PURE__ */ e("div", { className: "hidden @md:block", children: /* @__PURE__ */ e(n, { logo: N, variant: "logo", actions: x, navItems: y }) }),
-    /* @__PURE__ */ e("div", { className: "hidden @md:block bg-[var(--Surface-Primary)] border-b border-[var(--Border-Low-Emphasis)]", children: /* @__PURE__ */ e("div", { className: "max-w-[1280px] mx-auto px-6 py-3", children: /* @__PURE__ */ e(s, { children: l }) }) }),
+    /* @__PURE__ */ r("div", { className: "hidden @md:block", children: /* @__PURE__ */ r(
+      t,
+      {
+        logo: y,
+        variant: "logo",
+        actions: N,
+        navItems: B,
+        linkComponent: i
+      }
+    ) }),
+    /* @__PURE__ */ r("div", { className: "hidden @md:block bg-[var(--Surface-Primary)] border-b border-[var(--Border-Low-Emphasis)]", children: /* @__PURE__ */ r("div", { className: "max-w-[1280px] mx-auto px-6 py-3", children: /* @__PURE__ */ r(c, { children: l }) }) }),
     /* @__PURE__ */ a("div", { className: "@md:max-w-[1280px] @md:mx-auto @md:px-6 @md:mt-10 @md:mb-10 @md:grid @md:[grid-template:'side_main'_1fr_/_256px_1fr] @md:gap-6 @md:items-start", children: [
-      /* @__PURE__ */ e("div", { className: "hidden @md:block @md:[grid-area:side] rounded-2xl overflow-hidden shadow-sm", children: /* @__PURE__ */ e(
-        G,
+      /* @__PURE__ */ r("div", { className: "hidden @md:block @md:[grid-area:side] rounded-2xl overflow-hidden shadow-sm", children: /* @__PURE__ */ r(
+        R,
         {
-          groups: v,
-          activeMenu: t,
-          currentPath: h,
-          activeMatch: p,
-          isActive: b,
-          ariaLabel: "マイページメニュー"
+          groups: x,
+          activeMenu: h,
+          currentPath: p,
+          activeMatch: b,
+          isActive: f,
+          ariaLabel: "マイページメニュー",
+          linkComponent: i
         }
       ) }),
-      /* @__PURE__ */ a("main", { id: d, className: "@container @md:[grid-area:main] bg-[var(--Surface-Primary)] @md:rounded-2xl @md:shadow-sm pb-20 @md:pb-8", children: [
-        /* @__PURE__ */ e("div", { className: "hidden @md:flex items-center gap-3 px-6 py-5 border-b border-[var(--Border-Low-Emphasis)]", children: /* @__PURE__ */ e("h1", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: r }) }),
-        f
+      /* @__PURE__ */ a("main", { id: o, className: "@container @md:[grid-area:main] bg-[var(--Surface-Primary)] @md:rounded-2xl @md:shadow-sm pb-20 @md:pb-8", children: [
+        /* @__PURE__ */ r("div", { className: "hidden @md:flex items-center gap-3 px-6 py-5 border-b border-[var(--Border-Low-Emphasis)]", children: /* @__PURE__ */ r("h1", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: e }) }),
+        u
       ] })
     ] }),
-    /* @__PURE__ */ e(U, { items: g, className: "@md:hidden" })
+    /* @__PURE__ */ r(q, { items: v, className: "@md:hidden", linkComponent: i })
   ] });
 }
 export {
-  le as MypageShell
+  lr as MypageShell
 };

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

@@ -1,16 +1,19 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import "react";
-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";
+import { cn as c } from "../../lib/utils.js";
+import { buttonVariants as I } from "../foundations/button.js";
+import { PriceDisplay as B } from "../primitives/price-display.js";
+import { RatingStars as M } from "./rating-stars.js";
+import { Tag as b } from "../primitives/tag.js";
 function j({
   href: a,
   onClick: r,
-  name: t
+  name: t,
+  linkComponent: i
 }) {
+  const o = i ?? "a";
   return a ? /* @__PURE__ */ e(
-    "a",
+    o,
     {
       href: a,
       className: "absolute inset-0 z-[var(--Z-Local-1)]",
@@ -29,7 +32,7 @@ function j({
     }
   ) : null;
 }
-function $({ size: a = 20, filled: r = !1 }) {
+function V({ size: a = 20, filled: r = !1 }) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -52,7 +55,7 @@ function $({ size: a = 20, filled: r = !1 }) {
     }
   );
 }
-function M({
+function Z({
   isFavorite: a,
   onToggle: r,
   size: t = "md"
@@ -61,16 +64,16 @@ function M({
     "button",
     {
       type: "button",
-      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)]",
+      className: c(
+        "relative z-10 flex items-center justify-center rounded-full border border-[var(--Border-Control,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: (o) => {
-        o.preventDefault(), o.stopPropagation(), r();
+      onClick: (i) => {
+        i.preventDefault(), i.stopPropagation(), r();
       },
       "aria-label": a ? "お気に入りから削除" : "お気に入りに追加",
       children: /* @__PURE__ */ e(
-        $,
+        V,
         {
           size: t === "sm" ? 16 : 20,
           filled: a
@@ -79,7 +82,7 @@ function M({
     }
   );
 }
-function Z({ rank: a }) {
+function S({ rank: a }) {
   return /* @__PURE__ */ e(
     "img",
     {
@@ -90,89 +93,95 @@ function Z({ rank: a }) {
     }
   );
 }
-function D(a, r) {
+function q(a, r) {
   return r == null || r <= a ? null : `${Math.round((r - a) / r * 100)}%OFF`;
 }
-function C({ name: a, href: r }) {
+function H({
+  name: a,
+  href: r,
+  linkComponent: t
+}) {
+  const i = t ?? "a";
   return r ? /* @__PURE__ */ e(
-    "a",
+    i,
     {
       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(),
+      onClick: (o) => o.stopPropagation(),
       children: a
     }
   ) : /* @__PURE__ */ e("p", { className: "truncate typo-body-sm text-[var(--Text-Low-Emphasis)]", children: a });
 }
-function H(a) {
+function O(a) {
   if (a !== "none")
     return a === "fade" ? "transition-[filter] group-hover:brightness-110" : "transition-transform group-hover:scale-105";
 }
-function J({
+function Y({
   className: a,
   name: r,
   imageUrl: t,
-  imageAlt: o,
-  price: f,
-  originalPrice: b,
-  caption: u,
-  rating: i,
+  imageAlt: i,
+  price: o,
+  originalPrice: x,
+  caption: h,
+  rating: d,
   reviewCount: y,
-  shopName: h,
-  shopHref: N,
+  shopName: p,
+  shopHref: z,
   hoverEffect: P,
-  tags: x = [],
-  isFavorite: g = !1,
-  onFavoriteToggle: p,
-  onCardClick: z,
-  href: w,
+  tags: N = [],
+  isFavorite: w = !1,
+  onFavoriteToggle: v,
+  onCardClick: g,
+  href: L,
   ranking: n,
-  deliveryDate: c,
-  orientation: E = "vertical",
-  showDiscountBadge: S = !0,
-  showCartButton: O = !1,
-  onCartAdd: I,
-  cartButtonLabel: R = "カートに追加",
-  ...L
+  deliveryDate: m,
+  orientation: T = "vertical",
+  showDiscountBadge: C = !0,
+  showCartButton: R = !1,
+  onCartAdd: $,
+  cartButtonLabel: D = "カートに追加",
+  linkComponent: f,
+  ...E
 }) {
-  const T = P ?? (E === "horizontal" ? "none" : "zoom"), d = S ? D(f, b) : null;
-  return E === "horizontal" ? /* @__PURE__ */ l(
+  const k = P ?? (T === "horizontal" ? "none" : "zoom"), u = C ? q(o, x) : null;
+  return T === "horizontal" ? /* @__PURE__ */ l(
     "div",
     {
       "data-slot": "product-card",
       "data-orientation": "horizontal",
-      className: m(
+      className: c(
         // 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",
         a
       ),
-      ...L,
+      ...E,
       children: [
-        /* @__PURE__ */ e(j, { href: w, onClick: z, name: r }),
-        n != null && /* @__PURE__ */ e(Z, { rank: n }),
+        /* @__PURE__ */ e(j, { href: L, onClick: g, name: r, linkComponent: f }),
+        n != null && /* @__PURE__ */ e(S, { 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__ */ e("img", { src: t, alt: i ?? r, className: c("h-full w-full object-cover duration-[var(--Motion-Duration-Base)]", O(k)), loading: "lazy" }),
+          u && /* @__PURE__ */ e(b, { variant: "sale", size: "sm", className: "absolute bottom-1.5 left-1.5 z-[var(--Z-Local-2)]", children: u }),
+          N.length > 0 && /* @__PURE__ */ e("div", { className: "absolute bottom-1.5 left-1.5 z-[var(--Z-Local-2)] flex flex-wrap gap-1", children: !u && N.map((s) => /* @__PURE__ */ e(b, { variant: s.variant, size: "sm", children: s.label }, s.label)) }),
+          v && /* @__PURE__ */ e("div", { className: "absolute bottom-1 right-1 z-10", children: /* @__PURE__ */ e(Z, { isFavorite: w, onToggle: v, size: "sm" }) })
         ] }),
         /* @__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 }),
+            p && /* @__PURE__ */ e(H, { name: p, href: z, linkComponent: f }),
             /* @__PURE__ */ e("h3", { className: "line-clamp-2 typo-body-md text-[var(--Text-High-Emphasis)]", children: r })
           ] }),
           /* @__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: [
+              d != null && /* @__PURE__ */ e(M, { rating: d, reviewCount: y, size: "sm" }),
+              m && /* @__PURE__ */ l("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: [
                 "最短 ",
-                c
+                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__ */ e(B, { price: o, originalPrice: x, size: "sm", showTaxLabel: !1 }),
+            h && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: h })
           ] })
         ] })
       ]
@@ -182,7 +191,7 @@ function J({
     {
       "data-slot": "product-card",
       "data-orientation": "vertical",
-      className: m(
+      className: c(
         // max-w: 広いグリッドセルでもカードが膨らみすぎないようカード自身が上限を持つ。
         // 280px は本番の検索結果グリッド（PC 5列 ≈ カード215px）では未到達＝影響なし。
         // マイページ等の3列グリッド（実効幅 ~950px）で 3×280+gap が収まる上限として採用。
@@ -192,42 +201,50 @@ function J({
         n != null && "pt-3",
         a
       ),
-      ...L,
+      ...E,
       children: [
-        /* @__PURE__ */ e(j, { href: w, onClick: z, name: r }),
-        n != null && /* @__PURE__ */ e(Z, { rank: n }),
+        /* @__PURE__ */ e(j, { href: L, onClick: g, name: r, linkComponent: f }),
+        n != null && /* @__PURE__ */ e(S, { 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("img", { src: t, alt: i ?? r, className: c("h-full w-full object-cover duration-[var(--Motion-Duration-Base)]", O(k)), 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))
+              u && /* @__PURE__ */ e(b, { variant: "sale", size: "sm", children: u }),
+              N.map((s) => /* @__PURE__ */ e(
+                b,
+                {
+                  variant: s.variant === void 0 || s.variant === "default" ? "image" : s.variant,
+                  size: "sm",
+                  children: s.label
+                },
+                s.label
+              ))
             ] }) })
           ] }),
-          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 }) })
+          v && /* @__PURE__ */ e("div", { className: "absolute bottom-1.5 right-1.5 z-[var(--Z-Local-4)]", children: /* @__PURE__ */ e(Z, { isFavorite: w, onToggle: v }) })
         ] }),
         /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-          h && /* @__PURE__ */ e(C, { name: h, href: N }),
+          p && /* @__PURE__ */ e(H, { name: p, href: z, linkComponent: f }),
           /* @__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: [
+          (d != null || m) && /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+            d != null && /* @__PURE__ */ e(M, { rating: d, reviewCount: y, size: "sm" }),
+            m && /* @__PURE__ */ l("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: [
               "最短 ",
-              c
+              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 })
+          /* @__PURE__ */ e(B, { price: o, originalPrice: x, size: "md", showTaxLabel: !1 }),
+          h && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: h })
         ] }),
-        O && /* @__PURE__ */ e(
+        R && /* @__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)]",
+            className: c(I({ variant: "outline", size: "sm" }), "relative z-10 h-9 w-full gap-0.5"),
             onClick: (s) => {
-              s.preventDefault(), s.stopPropagation(), I?.();
+              s.preventDefault(), s.stopPropagation(), $?.();
             },
-            children: R
+            children: D
           }
         )
       ]
@@ -235,6 +252,6 @@ function J({
   );
 }
 export {
-  $ as BookmarkRibbonIcon,
-  J as ProductCard
+  V as BookmarkRibbonIcon,
+  Y as ProductCard
 };