@cakejp/design-system 0.20.1 → 0.21.0

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

@@ -1,9 +1,10 @@
-import { jsxs as a, jsx as s, Fragment as _ } from "react/jsx-runtime";
+import { jsxs as e, jsx as a, Fragment as j } from "react/jsx-runtime";
 import "react";
 import { cn as i } from "../../lib/utils.js";
-import { SectionHeader as w } from "../primitives/section-header.js";
-import { ProductCard as k } from "./product-card.js";
-const E = {
+import { FOCUS_RING_ONLY as E } from "../../lib/focus-ring.js";
+import { SectionHeader as g } from "../primitives/section-header.js";
+import { ProductCard as T } from "./product-card.js";
+const F = {
   sm: "w-40",
   md: "w-[200px]",
   lg: "w-[240px]",
@@ -11,91 +12,95 @@ const E = {
   responsive: "w-[calc((100vw_-_48px)/2.6)] @[736px]:w-[calc((100vw_-_96px)/5)] @[928px]:w-[calc((100vw_-_184px)/6)]"
 };
 function M({
-  title: m,
-  subtitle: p,
-  description: e,
-  sectionImage: r,
+  title: c,
+  subtitle: r,
+  description: l,
+  sectionImage: n,
   sectionImageAlt: u,
-  sectionImageHref: n,
-  moreHref: x,
-  moreLabel: d,
-  onMoreClick: o,
-  headerSize: t,
-  products: N,
-  cardSize: h = "sm",
-  showRanking: b = !1,
-  showCartButton: c = !1,
-  className: y
+  sectionImageHref: x,
+  moreHref: d,
+  moreLabel: o,
+  onMoreClick: t,
+  headerSize: h,
+  products: _,
+  cardSize: v = "sm",
+  showRanking: y = !1,
+  showCartButton: p = !1,
+  className: z,
+  linkComponent: m
 }) {
-  const v = !!r, f = v && /* @__PURE__ */ s("div", { className: "shrink-0 overflow-hidden rounded-xl size-20 @sm:size-[100px] @md:size-[140px]", children: /* @__PURE__ */ s(
+  const b = m ?? "a", N = !!n, f = N && /* @__PURE__ */ a("div", { className: "shrink-0 overflow-hidden rounded-xl size-20 @sm:size-[100px] @md:size-[140px]", children: /* @__PURE__ */ a(
     "img",
     {
-      src: r,
-      alt: u ?? m,
+      src: n,
+      alt: u ?? c,
       className: "size-full object-cover",
       loading: "lazy"
     }
-  ) }), z = n ? /* @__PURE__ */ s("a", { href: n, className: "shrink-0", children: f }) : f;
-  return /* @__PURE__ */ a(
+  ) }), k = x ? /* @__PURE__ */ a(b, { href: x, className: "shrink-0", children: f }) : f;
+  return /* @__PURE__ */ e(
     "section",
     {
       "data-slot": "product-carousel",
-      className: i("@container py-4 @[960px]:max-w-[960px] @[960px]:mx-auto", y),
+      className: i("@container py-4 @[960px]:max-w-[960px] @[960px]:mx-auto", z),
       children: [
-        v ? /* @__PURE__ */ a("div", { className: "flex gap-3 px-4 @md:gap-4", children: [
-          z,
-          /* @__PURE__ */ a("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ s(
-              w,
+        N ? /* @__PURE__ */ e("div", { className: "flex gap-3 px-4 @md:gap-4", children: [
+          k,
+          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ a(
+              g,
               {
-                title: m,
-                subtitle: p,
-                moreHref: x,
-                moreLabel: d,
-                onMoreClick: o,
-                size: t
+                title: c,
+                subtitle: r,
+                moreHref: d,
+                moreLabel: o,
+                onMoreClick: t,
+                size: h,
+                linkComponent: m
               }
             ),
-            e && /* @__PURE__ */ s("p", { className: "mt-1 line-clamp-3 typo-body-md text-[var(--Text-Medium-Emphasis)]", children: e })
+            l && /* @__PURE__ */ a("p", { className: "mt-1 line-clamp-3 typo-body-md text-[var(--Text-Medium-Emphasis)]", children: l })
           ] })
-        ] }) : /* @__PURE__ */ a(_, { children: [
-          /* @__PURE__ */ s(
-            w,
+        ] }) : /* @__PURE__ */ e(j, { children: [
+          /* @__PURE__ */ a(
+            g,
             {
-              title: m,
-              subtitle: p,
-              moreHref: x,
-              moreLabel: d,
-              onMoreClick: o,
-              size: t,
+              title: c,
+              subtitle: r,
+              moreHref: d,
+              moreLabel: o,
+              onMoreClick: t,
+              size: h,
+              linkComponent: m,
               className: "px-4"
             }
           ),
-          e && /* @__PURE__ */ s("p", { className: "mt-1 px-4 line-clamp-3 typo-body-md text-[var(--Text-Medium-Emphasis)]", children: e })
+          l && /* @__PURE__ */ a("p", { className: "mt-1 px-4 line-clamp-3 typo-body-md text-[var(--Text-Medium-Emphasis)]", children: l })
         ] }),
-        /* @__PURE__ */ a("div", { tabIndex: 0, className: i(
+        /* @__PURE__ */ e("div", { tabIndex: 0, className: i(
           "flex overflow-x-auto pl-4 pb-2 pt-3 scrollbar-hide",
-          "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50",
-          h === "responsive" ? "gap-2 @[736px]:gap-4 @[928px]:gap-6" : "gap-3",
-          c && "items-stretch"
+          `focus-visible:outline-none ${E}`,
+          v === "responsive" ? "gap-2 @[736px]:gap-4 @[928px]:gap-6" : "gap-3",
+          p && "items-stretch"
         ), children: [
-          N.map((l, g) => /* @__PURE__ */ s(
+          _.map((s, w) => /* @__PURE__ */ a(
             "div",
             {
-              className: i("shrink-0", E[h]),
-              children: /* @__PURE__ */ s(
-                k,
+              className: i("shrink-0", F[v]),
+              children: /* @__PURE__ */ a(
+                T,
                 {
-                  ...l,
-                  ranking: b ? g + 1 : l.ranking,
-                  showCartButton: c,
-                  className: i(l.className, c && "h-full")
+                  ...s,
+                  linkComponent: s.linkComponent ?? m,
+                  ranking: y ? w + 1 : s.ranking,
+                  showCartButton: p,
+                  className: i(s.className, p && "h-full")
                 }
               )
             },
-            l.name + g
+            s.name + w
           )),
-          /* @__PURE__ */ s("div", { className: "shrink-0 w-4 @[736px]:w-4 @[928px]:w-4", "aria-hidden": "true" })
+          /* @__PURE__ */ a("div", { className: "shrink-0 w-4 @[736px]:w-4 @[928px]:w-4", "aria-hidden": "true" })
         ] })
       ]
     }

package/dist/components/ec/product-detail-bar.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import "react";
 import { cn as r } from "../../lib/utils.js";
-import { Button as u } from "../foundations/button.js";
-import { RatingStars as N } from "./rating-stars.js";
-function j({
+import { Button as b } from "../foundations/button.js";
+import { RatingStars as g } from "./rating-stars.js";
+function H({
   className: l,
   tabs: m,
   productName: c,
@@ -15,8 +15,10 @@ function j({
   onCtaClick: x,
   ctaDisabled: p = !1,
   onTabClick: s,
-  ...v
+  linkComponent: v,
+  ...f
 }) {
+  const u = v ?? "a";
   return /* @__PURE__ */ e(
     "div",
     {
@@ -25,18 +27,18 @@ function j({
         "hidden border-t border-[var(--Border-Low-Emphasis)] @md:block",
         l
       ),
-      ...v,
+      ...f,
       children: /* @__PURE__ */ a("div", { className: "mx-auto flex max-w-[1064px] items-center justify-between", children: [
         /* @__PURE__ */ e("nav", { className: "flex items-center self-stretch", "aria-label": "商品詳細ナビゲーション", children: m.map((t) => /* @__PURE__ */ e(
-          "a",
+          u,
           {
             href: t.href,
             className: r(
               "flex h-14 items-center justify-center px-3 typo-label-md transition-colors",
               t.active ? "border-b-2 border-[var(--Text-High-Emphasis)] text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Disable)] hover:text-[var(--Text-Medium-Emphasis)]"
             ),
-            onClick: (f) => {
-              s && (f.preventDefault(), s(t));
+            onClick: (N) => {
+              s && (N.preventDefault(), s(t));
             },
             "aria-current": t.active ? "true" : void 0,
             children: t.label
@@ -58,7 +60,7 @@ function j({
                 /* @__PURE__ */ e("span", { className: "ml-1 typo-body-sm text-inherit", children: "税込" })
               ] }),
               i != null && i > 0 && /* @__PURE__ */ e("div", { className: "ml-1", children: /* @__PURE__ */ e(
-                N,
+                g,
                 {
                   rating: i,
                   reviewCount: o,
@@ -68,7 +70,7 @@ function j({
             ] })
           ] }),
           /* @__PURE__ */ e(
-            u,
+            b,
             {
               size: "lg",
               onClick: x,
@@ -82,5 +84,5 @@ function j({
   );
 }
 export {
-  j as ProductDetailBar
+  H as ProductDetailBar
 };

package/dist/components/ec/product-detail-sidebar.js

@@ -1,73 +1,75 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import * as A from "react";
-import P from "iconsax-reactjs/dist/esm/Shop.js";
-import D from "iconsax-reactjs/dist/esm/Tag2.js";
-import L from "iconsax-reactjs/dist/esm/Ticket2.js";
-import B from "iconsax-reactjs/dist/esm/InfoCircle.js";
-import Z from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import q from "iconsax-reactjs/dist/esm/ArrowDown2.js";
-import { cn as F } from "../../lib/utils.js";
-import { BookmarkRibbonIcon as V } from "./product-card.js";
-import { Tag as G } from "../primitives/tag.js";
-import { RatingStars as J } from "./rating-stars.js";
-import { NumberInput as K } from "../primitives/number-input.js";
-import { PriceDisplay as O } from "../primitives/price-display.js";
-import { Chip as U } from "../primitives/chip.js";
-import { Button as g } from "../foundations/button.js";
-function me({
-  className: T,
-  productName: w,
-  price: k,
+import * as D from "react";
+import L from "iconsax-reactjs/dist/esm/Shop.js";
+import B from "iconsax-reactjs/dist/esm/Tag2.js";
+import Z from "iconsax-reactjs/dist/esm/Ticket2.js";
+import q from "iconsax-reactjs/dist/esm/InfoCircle.js";
+import F from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import V from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import { cn as G } from "../../lib/utils.js";
+import { BookmarkRibbonIcon as J } from "./product-card.js";
+import { Tag as K } from "../primitives/tag.js";
+import { RatingStars as O } from "./rating-stars.js";
+import { NumberInput as U } from "../primitives/number-input.js";
+import { PriceDisplay as W } from "../primitives/price-display.js";
+import { Chip as X } from "../primitives/chip.js";
+import { Button as T } from "../foundations/button.js";
+function oe({
+  className: w,
+  productName: k,
+  price: E,
   tags: c,
   shopName: d,
   shopHref: h,
   brandLabel: m,
   brandHref: f,
   rating: v,
-  reviewCount: E,
+  reviewCount: C,
   coupons: n,
   sizeOptions: o,
-  selectedSize: C,
-  onSizeChange: S,
+  selectedSize: S,
+  onSizeChange: z,
   sizeInfoLabel: u,
-  onSizeInfoClick: z,
+  onSizeInfoClick: M,
   deliveryPrefecture: p,
-  onPrefectureChange: M,
+  onPrefectureChange: I,
   earliestDelivery: x,
-  quantity: I = 1,
+  quantity: R = 1,
   onQuantityChange: b,
   pointInfo: s,
   onAddToCart: N,
-  addToCartLabel: R = "カートに追加",
-  onBookmark: H,
+  addToCartLabel: H = "カートに追加",
+  onBookmark: j,
   isBookmarked: y = !1,
   promoBanner: i,
-  ...j
+  linkComponent: A,
+  ...P
 }) {
+  const g = A ?? "a";
   return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "product-detail-sidebar",
-      className: F(
+      className: G(
         "flex w-[400px] max-w-full flex-col rounded-2xl border-2 border-[var(--Surface-Tertiary)] bg-[var(--Surface-Primary)]",
-        T
+        w
       ),
-      ...j,
+      ...P,
       children: [
         /* @__PURE__ */ a("div", { className: "flex flex-col gap-4 overflow-hidden px-6 pb-2 pt-6", children: [
           /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
-            c && c.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: c.map((l, r) => /* @__PURE__ */ e(G, { variant: l.variant, size: "md", children: l.label }, r)) }),
-            /* @__PURE__ */ e("h2", { className: "typo-heading-2xl text-[var(--Text-High-Emphasis)]", children: w }),
+            c && c.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: c.map((l, r) => /* @__PURE__ */ e(K, { variant: l.variant, size: "md", children: l.label }, r)) }),
+            /* @__PURE__ */ e("h2", { className: "typo-heading-2xl text-[var(--Text-High-Emphasis)]", children: k }),
             d && /* @__PURE__ */ a("div", { className: "flex w-full items-center gap-1", children: [
               /* @__PURE__ */ e(
-                P,
+                L,
                 {
                   size: 20,
                   className: "shrink-0 text-[var(--Text-Medium-Emphasis)]"
                 }
               ),
               h ? /* @__PURE__ */ e(
-                "a",
+                g,
                 {
                   href: h,
                   className: "typo-label-md text-[var(--Text-Medium-Emphasis)] underline",
@@ -77,14 +79,14 @@ function me({
             ] }),
             m && /* @__PURE__ */ a("div", { className: "flex w-full items-center gap-1", children: [
               /* @__PURE__ */ e(
-                D,
+                B,
                 {
                   size: 20,
                   className: "shrink-0 text-[var(--Text-Medium-Emphasis)]"
                 }
               ),
               f ? /* @__PURE__ */ e(
-                "a",
+                g,
                 {
                   href: f,
                   className: "typo-label-md text-[var(--Text-Medium-Emphasis)] underline",
@@ -94,12 +96,12 @@ function me({
             ] })
           ] }),
           /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ e(O, { price: k, size: "xl" }),
+            /* @__PURE__ */ e(W, { price: E, size: "xl" }),
             v != null && /* @__PURE__ */ e(
-              J,
+              O,
               {
                 rating: v,
-                reviewCount: E,
+                reviewCount: C,
                 size: "md",
                 showValue: !0,
                 showCount: !0
@@ -108,10 +110,10 @@ function me({
           ] }),
           n && n.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col pb-2", children: [
             /* @__PURE__ */ a("div", { className: "z-[var(--Z-Local-2)] flex items-center gap-0.5 self-start rounded bg-[var(--Surface-Info)] px-2 py-1", children: [
-              /* @__PURE__ */ e(L, { size: 16, className: "text-[var(--Text-on-Inverse)]" }),
+              /* @__PURE__ */ e(Z, { size: 16, className: "text-[var(--Text-on-Inverse)]" }),
               /* @__PURE__ */ e("span", { className: "typo-label-sm text-[var(--Text-on-Inverse)]", children: "対象クーポン" })
             ] }),
-            /* @__PURE__ */ e("div", { className: "-mt-2 z-[var(--Z-Local-1)] flex flex-col gap-0 rounded-lg bg-[var(--Surface-Info-Light)] px-4 py-3 pt-5", children: n.map((l, r) => /* @__PURE__ */ a(A.Fragment, { children: [
+            /* @__PURE__ */ e("div", { className: "-mt-2 z-[var(--Z-Local-1)] flex flex-col gap-0 rounded-lg bg-[var(--Surface-Info-Light)] px-4 py-3 pt-5", children: n.map((l, r) => /* @__PURE__ */ a(D.Fragment, { children: [
               r > 0 && /* @__PURE__ */ e("div", { className: "my-2 border-t border-dashed border-[var(--Border-Info)]" }),
               /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-2 py-1", children: [
                 /* @__PURE__ */ e("span", { className: "min-w-0 truncate typo-label-lg text-[var(--Text-Info)]", children: l.label }),
@@ -132,14 +134,14 @@ function me({
           /* @__PURE__ */ e("div", { className: "flex flex-col gap-3 overflow-hidden px-6 py-2", children: o.map((l, r) => (
             // lint-scratch-allow: gap-[11px] は Figma サイズチップ間隔の固有値
             /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-[11px]", children: l.map((t) => /* @__PURE__ */ e(
-              U,
+              X,
               {
                 shape: "square",
                 size: "tile",
                 variant: "filled",
-                selected: C === t.value,
+                selected: S === t.value,
                 soldOut: t.soldOut,
-                onClick: () => S?.(t.value),
+                onClick: () => z?.(t.value),
                 children: t.label
               },
               t.value
@@ -150,10 +152,10 @@ function me({
             {
               type: "button",
               className: "flex items-center gap-0.5 px-6 pb-3 pt-1",
-              onClick: z,
+              onClick: M,
               children: [
                 /* @__PURE__ */ e(
-                  B,
+                  q,
                   {
                     size: 16,
                     className: "shrink-0 text-[var(--Text-Medium-Emphasis)]"
@@ -169,12 +171,12 @@ function me({
             "button",
             {
               type: "button",
-              onClick: M,
+              onClick: I,
               className: "flex min-w-0 shrink items-center justify-between gap-2 rounded-lg border border-[var(--Border-High-Emphasis)] bg-[var(--Surface-Primary)] px-4 py-3",
               children: [
                 /* @__PURE__ */ e("span", { className: "min-w-0 truncate typo-body-lg text-[var(--Text-High-Emphasis)]", children: p }),
                 /* @__PURE__ */ e(
-                  q,
+                  V,
                   {
                     size: 16,
                     className: "shrink-0 text-[var(--Text-High-Emphasis)]"
@@ -193,9 +195,9 @@ function me({
         b && /* @__PURE__ */ a("div", { className: "flex items-center gap-6 px-6 py-2", children: [
           /* @__PURE__ */ e("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: "数量" }),
           /* @__PURE__ */ e(
-            K,
+            U,
             {
-              value: I,
+              value: R,
               onChange: b,
               size: "md",
               editable: !1
@@ -237,25 +239,25 @@ function me({
             ] })
           ] }),
           /* @__PURE__ */ e(
-            g,
+            T,
             {
               size: "xl",
               className: "w-full",
               onClick: N,
               disabled: !N,
-              children: R
+              children: H
             }
           ),
           /* @__PURE__ */ a(
-            g,
+            T,
             {
               variant: "tertiary",
               size: "xl",
               className: "mb-2 w-full",
-              onClick: H,
+              onClick: j,
               children: [
                 /* @__PURE__ */ e(
-                  V,
+                  J,
                   {
                     size: 20,
                     filled: y
@@ -278,7 +280,7 @@ function me({
                 /* @__PURE__ */ e("span", { className: "typo-body-md text-left text-[var(--Text-Info)]", children: i.text })
               ] }),
               /* @__PURE__ */ e(
-                Z,
+                F,
                 {
                   size: 24,
                   className: "shrink-0 text-[var(--Text-Info)]"
@@ -292,5 +294,5 @@ function me({
   );
 }
 export {
-  me as ProductDetailSidebar
+  oe as ProductDetailSidebar
 };