@cakejp/design-system 0.15.0 → 0.17.0

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

@@ -0,0 +1,106 @@
+import { jsxs as a, jsx as s, Fragment as _ } 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 = {
+  sm: "w-40",
+  md: "w-[200px]",
+  lg: "w-[240px]",
+  /** 本番準拠レスポンシブ: SP 2.6枚 / Tablet 5枚 / PC 6枚 */
+  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,
+  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
+}) {
+  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(
+    "img",
+    {
+      src: r,
+      alt: u ?? m,
+      className: "size-full object-cover",
+      loading: "lazy"
+    }
+  ) }), z = n ? /* @__PURE__ */ s("a", { href: n, className: "shrink-0", children: f }) : f;
+  return /* @__PURE__ */ a(
+    "section",
+    {
+      "data-slot": "product-carousel",
+      className: i("@container py-4 @[960px]:max-w-[960px] @[960px]:mx-auto", y),
+      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,
+              {
+                title: m,
+                subtitle: p,
+                moreHref: x,
+                moreLabel: d,
+                onMoreClick: o,
+                size: t
+              }
+            ),
+            e && /* @__PURE__ */ s("p", { className: "mt-1 line-clamp-3 typo-body-md text-[var(--Text-Medium-Emphasis)]", children: e })
+          ] })
+        ] }) : /* @__PURE__ */ a(_, { children: [
+          /* @__PURE__ */ s(
+            w,
+            {
+              title: m,
+              subtitle: p,
+              moreHref: x,
+              moreLabel: d,
+              onMoreClick: o,
+              size: t,
+              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 })
+        ] }),
+        /* @__PURE__ */ a("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"
+        ), children: [
+          N.map((l, g) => /* @__PURE__ */ s(
+            "div",
+            {
+              className: i("shrink-0", E[h]),
+              children: /* @__PURE__ */ s(
+                k,
+                {
+                  ...l,
+                  ranking: b ? g + 1 : l.ranking,
+                  showCartButton: c,
+                  className: i(l.className, c && "h-full")
+                }
+              )
+            },
+            l.name + g
+          )),
+          /* @__PURE__ */ s("div", { className: "shrink-0 w-4 @[736px]:w-4 @[928px]:w-4", "aria-hidden": "true" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  M as ProductCarousel
+};

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

@@ -0,0 +1,80 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import "react";
+import { cn as p } from "../../lib/utils.js";
+import { Button as a } from "../foundations/button.js";
+function b({
+  variant: e = "add-to-cart",
+  onAddToCart: o,
+  onBookmark: s,
+  isBookmarked: l = !1,
+  countdownText: c,
+  resaleText: r,
+  className: i,
+  ...d
+}) {
+  const m = e === "sold-out" || e === "timesale-ended" || e === "pre-sale", u = {
+    "add-to-cart": "カートに追加",
+    resale: "再販通知を受け取る",
+    timesale: "タイムセール カートに追加",
+    "not-logged-in": "ログインしてカートに追加",
+    backorder: "入荷待ち注文する",
+    "out-of-stock-waiting": "現在入荷待ちです",
+    "pre-sale": "販売開始前です",
+    countdown: c ?? "カートに追加",
+    "sold-out": "完売しました",
+    "timesale-ended": "タイムセール終了"
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-slot": "product-cta",
+      className: p("space-y-2", i),
+      ...d,
+      children: [
+        /* @__PURE__ */ t(
+          a,
+          {
+            size: "lg",
+            className: "w-full",
+            disabled: m,
+            onClick: o,
+            children: u[e]
+          }
+        ),
+        s && /* @__PURE__ */ n(
+          a,
+          {
+            variant: "tertiary",
+            size: "lg",
+            className: "w-full",
+            onClick: s,
+            children: [
+              /* @__PURE__ */ t(f, { className: "mr-1.5 size-4", filled: l }),
+              l ? "ブックマーク済み" : "ブックマークに追加"
+            ]
+          }
+        ),
+        e === "resale" && r && /* @__PURE__ */ t("p", { className: "text-center typo-body-xs text-[var(--Text-Low-Emphasis)]", children: r })
+      ]
+    }
+  );
+}
+function f({ className: e, filled: o = !1 }) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: o ? "currentColor" : "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: e,
+      children: /* @__PURE__ */ t("path", { d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" })
+    }
+  );
+}
+export {
+  b as ProductCTA
+};

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

@@ -0,0 +1,86 @@
+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({
+  className: l,
+  tabs: m,
+  productName: c,
+  price: n,
+  isSale: d = !1,
+  rating: i,
+  reviewCount: o,
+  ctaLabel: h = "カートに追加",
+  onCtaClick: x,
+  ctaDisabled: p = !1,
+  onTabClick: s,
+  ...v
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "product-detail-bar",
+      className: r(
+        "hidden border-t border-[var(--Border-Low-Emphasis)] @md:block",
+        l
+      ),
+      ...v,
+      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",
+          {
+            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));
+            },
+            "aria-current": t.active ? "true" : void 0,
+            children: t.label
+          },
+          t.label
+        )) }),
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-4 py-2", children: [
+          /* @__PURE__ */ a("div", { className: "max-w-[270px]", children: [
+            /* @__PURE__ */ e("p", { className: "line-clamp-1 typo-label-sm text-[var(--Text-High-Emphasis)]", children: c }),
+            /* @__PURE__ */ a("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ a("div", { className: r(
+                "flex items-baseline text-[var(--Text-High-Emphasis)]",
+                d && "text-[var(--Text-Caution)]"
+              ), children: [
+                /* @__PURE__ */ a("span", { className: "typo-heading-md text-inherit", children: [
+                  "¥",
+                  n.toLocaleString()
+                ] }),
+                /* @__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,
+                {
+                  rating: i,
+                  reviewCount: o,
+                  size: "sm"
+                }
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(
+            u,
+            {
+              size: "lg",
+              onClick: x,
+              disabled: p,
+              children: h
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  j as ProductDetailBar
+};

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

@@ -0,0 +1,296 @@
+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,
+  tags: c,
+  shopName: d,
+  shopHref: h,
+  brandLabel: m,
+  brandHref: f,
+  rating: v,
+  reviewCount: E,
+  coupons: n,
+  sizeOptions: o,
+  selectedSize: C,
+  onSizeChange: S,
+  sizeInfoLabel: u,
+  onSizeInfoClick: z,
+  deliveryPrefecture: p,
+  onPrefectureChange: M,
+  earliestDelivery: x,
+  quantity: I = 1,
+  onQuantityChange: b,
+  pointInfo: s,
+  onAddToCart: N,
+  addToCartLabel: R = "カートに追加",
+  onBookmark: H,
+  isBookmarked: y = !1,
+  promoBanner: i,
+  ...j
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "product-detail-sidebar",
+      className: F(
+        "flex w-[400px] max-w-full flex-col rounded-2xl border-2 border-[var(--Surface-Tertiary)] bg-[var(--Surface-Primary)]",
+        T
+      ),
+      ...j,
+      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 }),
+            d && /* @__PURE__ */ a("div", { className: "flex w-full items-center gap-1", children: [
+              /* @__PURE__ */ e(
+                P,
+                {
+                  size: 20,
+                  className: "shrink-0 text-[var(--Text-Medium-Emphasis)]"
+                }
+              ),
+              h ? /* @__PURE__ */ e(
+                "a",
+                {
+                  href: h,
+                  className: "typo-label-md text-[var(--Text-Medium-Emphasis)] underline",
+                  children: d
+                }
+              ) : /* @__PURE__ */ e("span", { className: "typo-label-md text-[var(--Text-Medium-Emphasis)]", children: d })
+            ] }),
+            m && /* @__PURE__ */ a("div", { className: "flex w-full items-center gap-1", children: [
+              /* @__PURE__ */ e(
+                D,
+                {
+                  size: 20,
+                  className: "shrink-0 text-[var(--Text-Medium-Emphasis)]"
+                }
+              ),
+              f ? /* @__PURE__ */ e(
+                "a",
+                {
+                  href: f,
+                  className: "typo-label-md text-[var(--Text-Medium-Emphasis)] underline",
+                  children: m
+                }
+              ) : /* @__PURE__ */ e("span", { className: "typo-label-md text-[var(--Text-Medium-Emphasis)]", children: m })
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ e(O, { price: k, size: "xl" }),
+            v != null && /* @__PURE__ */ e(
+              J,
+              {
+                rating: v,
+                reviewCount: E,
+                size: "md",
+                showValue: !0,
+                showCount: !0
+              }
+            )
+          ] }),
+          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("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: [
+              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 }),
+                l.actionLabel && /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    className: "shrink-0 typo-body-md text-[var(--Text-Info)] underline",
+                    onClick: l.onAction,
+                    children: l.actionLabel
+                  }
+                )
+              ] })
+            ] }, r)) })
+          ] })
+        ] }),
+        o && o.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col py-2", children: [
+          /* @__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,
+              {
+                shape: "square",
+                size: "tile",
+                variant: "filled",
+                selected: C === t.value,
+                soldOut: t.soldOut,
+                onClick: () => S?.(t.value),
+                children: t.label
+              },
+              t.value
+            )) }, r)
+          )) }),
+          u && /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center gap-0.5 px-6 pb-3 pt-1",
+              onClick: z,
+              children: [
+                /* @__PURE__ */ e(
+                  B,
+                  {
+                    size: 16,
+                    className: "shrink-0 text-[var(--Text-Medium-Emphasis)]"
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "typo-label-md text-[var(--Text-Medium-Emphasis)]", children: u })
+              ]
+            }
+          )
+        ] }),
+        (p || x) && /* @__PURE__ */ a("div", { className: "flex min-w-0 items-center gap-2 rounded-lg px-4 py-2", children: [
+          p && /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              onClick: M,
+              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,
+                  {
+                    size: 16,
+                    className: "shrink-0 text-[var(--Text-High-Emphasis)]"
+                  }
+                )
+              ]
+            }
+          ),
+          x && /* @__PURE__ */ a("div", { className: "min-w-0 shrink text-[var(--Text-High-Emphasis)]", children: [
+            /* @__PURE__ */ e("span", { className: "typo-body-md", children: "への最短お届け日は" }),
+            /* @__PURE__ */ e("br", {}),
+            /* @__PURE__ */ e("span", { className: "typo-label-md", children: x }),
+            /* @__PURE__ */ e("span", { className: "typo-body-md", children: "です" })
+          ] })
+        ] }),
+        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,
+            {
+              value: I,
+              onChange: b,
+              size: "md",
+              editable: !1
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("div", { className: "flex flex-col px-6 py-2", children: /* @__PURE__ */ a("div", { className: "flex w-full flex-col gap-2", children: [
+          s && /* @__PURE__ */ a("div", { className: "flex flex-col gap-2 rounded-lg bg-[var(--Surface-Secondary)] px-4 py-3", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-0.5", children: [
+                /* @__PURE__ */ e("span", { className: "typo-body-md text-[var(--Text-Medium-Emphasis)]", children: "獲得ポイント:" }),
+                /* @__PURE__ */ e("span", { className: "typo-body-lg text-[var(--Text-Accent-Primary)]", children: s.points }),
+                s.pointsSuffix && /* @__PURE__ */ e("span", { className: "typo-body-md text-[var(--Text-Medium-Emphasis)]", children: s.pointsSuffix })
+              ] }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: "typo-body-md text-[var(--Text-High-Emphasis)] underline",
+                  onClick: s.onDetailClick,
+                  children: "詳細"
+                }
+              )
+            ] }),
+            s.cardReward && /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ e("span", { className: "typo-body-md text-[var(--Text-Medium-Emphasis)]", children: "Cake.jp CARDなら" }),
+                /* @__PURE__ */ e("span", { className: "typo-body-lg text-[var(--Text-Accent-Primary)]", children: s.cardReward })
+              ] }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: "typo-body-md text-[var(--Text-High-Emphasis)] underline",
+                  onClick: s.onDetailClick,
+                  children: "詳細"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ e(
+            g,
+            {
+              size: "xl",
+              className: "w-full",
+              onClick: N,
+              disabled: !N,
+              children: R
+            }
+          ),
+          /* @__PURE__ */ a(
+            g,
+            {
+              variant: "tertiary",
+              size: "xl",
+              className: "mb-2 w-full",
+              onClick: H,
+              children: [
+                /* @__PURE__ */ e(
+                  V,
+                  {
+                    size: 20,
+                    filled: y
+                  }
+                ),
+                y ? "ブックマーク済み" : "ブックマークに追加"
+              ]
+            }
+          )
+        ] }) }),
+        i && /* @__PURE__ */ e("div", { className: "p-4", "data-missing-component": "PromoBanner", children: /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center gap-2 rounded-lg border border-[var(--Border-Info)] bg-[var(--Surface-Info-Light)] px-4 py-4",
+            onClick: i.onClick,
+            children: [
+              /* @__PURE__ */ a("div", { className: "flex flex-1 flex-col items-start gap-2", children: [
+                /* @__PURE__ */ e("span", { className: "rounded bg-[var(--Surface-Info)] px-2 py-1 typo-label-md text-[var(--Text-on-Inverse)]", children: i.badge }),
+                /* @__PURE__ */ e("span", { className: "typo-body-md text-left text-[var(--Text-Info)]", children: i.text })
+              ] }),
+              /* @__PURE__ */ e(
+                Z,
+                {
+                  size: 24,
+                  className: "shrink-0 text-[var(--Text-Info)]"
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  me as ProductDetailSidebar
+};