@cakejp/design-system 0.16.0 → 0.17.1

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

@@ -0,0 +1,181 @@
+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";
+import { X as P } from "lucide-react";
+import { cn as k } from "../../lib/utils.js";
+import { SparkleIcon as A } from "./rating-stars.js";
+import { Button as E } from "../foundations/button.js";
+import { Textarea as D } from "../foundations/textarea.js";
+function K({
+  defaultRating: w = 0,
+  defaultText: z = "",
+  onSubmit: L,
+  onCancel: h,
+  isSubmitting: g = !1,
+  maxImages: m = 3,
+  maxLength: x = 500,
+  productName: d,
+  productImageUrl: b,
+  className: j,
+  ...S
+}) {
+  const [l, T] = s.useState(w), [C, y] = s.useState(0), [f, O] = s.useState(z), [p, N] = s.useState([]), [o, R] = s.useState([]), n = s.useRef(null), u = C || l;
+  function U(e) {
+    const t = Array.from(e.target.files ?? []), c = [...p, ...t].slice(0, m);
+    N(c);
+    const i = c.map((v) => URL.createObjectURL(v));
+    o.forEach((v) => URL.revokeObjectURL(v)), R(i), n.current && (n.current.value = "");
+  }
+  function M(e) {
+    URL.revokeObjectURL(o[e]), N((t) => t.filter((c, i) => i !== e)), R((t) => t.filter((c, i) => i !== e));
+  }
+  function B(e) {
+    e.preventDefault(), l !== 0 && L?.({ rating: l, text: f, images: p });
+  }
+  s.useEffect(() => () => {
+    o.forEach((e) => URL.revokeObjectURL(e));
+  }, []);
+  const H = ["", "残念", "いまいち", "普通", "満足", "最高！"];
+  return /* @__PURE__ */ r(
+    "form",
+    {
+      "data-slot": "review-form",
+      className: k(
+        "flex flex-col gap-4 rounded-xl bg-[var(--Surface-Primary)] p-4",
+        j
+      ),
+      onSubmit: B,
+      ...S,
+      children: [
+        d && /* @__PURE__ */ r("div", { className: "flex items-center gap-2 rounded-lg bg-[var(--Surface-Secondary)] p-3", children: [
+          b && /* @__PURE__ */ a(
+            "img",
+            {
+              src: b,
+              alt: d,
+              className: "size-12 shrink-0 rounded-lg object-cover"
+            }
+          ),
+          /* @__PURE__ */ a("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: d })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ a("p", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: "評価を選択してください" }),
+          /* @__PURE__ */ a("div", { className: "flex items-center gap-1", role: "radiogroup", "aria-label": "星評価", children: [1, 2, 3, 4, 5].map((e) => /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": l === e,
+              "aria-label": `${e}つ星`,
+              className: "rounded-full p-1 transition-transform hover:scale-110 focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)]",
+              onClick: () => T(e),
+              onMouseEnter: () => y(e),
+              onMouseLeave: () => y(0),
+              children: /* @__PURE__ */ a(
+                A,
+                {
+                  size: 32,
+                  className: k(
+                    "transition-colors",
+                    e <= u ? "text-[var(--Brand-Cake-Orange)]" : "text-[var(--Border-Medium-Emphasis)]"
+                  )
+                }
+              )
+            },
+            e
+          )) }),
+          u > 0 && /* @__PURE__ */ a("p", { className: "typo-body-sm text-[var(--Text-Accent-Primary)]", children: H[u] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ a(
+            D,
+            {
+              placeholder: "商品の感想を書いてください（任意）",
+              value: f,
+              onChange: (e) => O(e.target.value.slice(0, x)),
+              rows: 5,
+              className: "resize-none"
+            }
+          ),
+          /* @__PURE__ */ r("p", { className: "self-end typo-body-xs text-[var(--Text-Low-Emphasis)]", children: [
+            f.length,
+            " / ",
+            x
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ r("p", { className: "typo-label-sm text-[var(--Text-Medium-Emphasis)]", children: [
+            "写真を追加（最大",
+            m,
+            "枚）"
+          ] }),
+          /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-2", children: [
+            o.map((e, t) => /* @__PURE__ */ r("div", { className: "relative size-20 overflow-hidden rounded-lg", children: [
+              /* @__PURE__ */ a("img", { src: e, alt: `添付画像${t + 1}`, className: "size-full object-cover" }),
+              /* @__PURE__ */ a(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => M(t),
+                  className: "absolute right-1 top-1 flex size-5 items-center justify-center rounded-full bg-[var(--Overlay-Dark)] text-[var(--Text-on-Inverse)] transition-colors hover:bg-[var(--Overlay-Dark)]",
+                  "aria-label": `画像${t + 1}を削除`,
+                  children: /* @__PURE__ */ a(P, { className: "size-3" })
+                }
+              )
+            ] }, t)),
+            p.length < m && /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                onClick: () => n.current?.click(),
+                className: "flex size-20 flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-[var(--Border-Medium-Emphasis)] text-[var(--Text-Low-Emphasis)] transition-colors hover:border-[var(--Border-High-Emphasis)] hover:text-[var(--Text-Medium-Emphasis)]",
+                "aria-label": "写真を追加",
+                children: [
+                  /* @__PURE__ */ a(I, { size: 20 }),
+                  /* @__PURE__ */ a("span", { className: "typo-body-xs", children: "追加" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ a(
+              "input",
+              {
+                ref: n,
+                type: "file",
+                accept: "image/*",
+                multiple: !0,
+                className: "hidden",
+                onChange: U
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex gap-3", children: [
+          h && /* @__PURE__ */ a(
+            E,
+            {
+              type: "button",
+              variant: "tertiary",
+              size: "lg",
+              className: "flex-1",
+              onClick: h,
+              children: "キャンセル"
+            }
+          ),
+          /* @__PURE__ */ a(
+            E,
+            {
+              type: "submit",
+              size: "lg",
+              className: "flex-1",
+              disabled: l === 0 || g,
+              children: g ? "送信中..." : "レビューを投稿する"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  K as ReviewForm
+};

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

@@ -0,0 +1,95 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as d } from "../../lib/utils.js";
+import { RatingStars as p, SparkleIcon as x } from "./rating-stars.js";
+function g({
+  averageRating: l,
+  totalCount: m,
+  breakdown: t,
+  className: n,
+  ...i
+}) {
+  const r = t ? Math.max(...t.map((s) => s.count), 1) : 1;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "review-summary",
+      className: d("space-y-3", n),
+      ...i,
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ e(x, { size: 28, className: "text-[var(--Brand-Cake-Orange)]" }),
+            /* @__PURE__ */ e("span", { className: "typo-heading-3xl tabular-nums text-[var(--Text-High-Emphasis)]", children: l.toFixed(2) })
+          ] }),
+          /* @__PURE__ */ a("span", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: [
+            m.toLocaleString(),
+            "件のレビュー"
+          ] })
+        ] }),
+        t && t.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-1", children: t.map((s) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("span", { className: "w-3 shrink-0 text-right typo-label-sm tabular-nums text-[var(--Text-Medium-Emphasis)]", children: s.stars }),
+          /* @__PURE__ */ e("div", { className: "h-2.5 flex-1 overflow-hidden rounded-full bg-[var(--Surface-Secondary)]", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: "h-full rounded-full bg-[var(--Brand-Cake-Orange)] transition-all duration-[var(--Motion-Duration-Base)]",
+              style: {
+                width: `${s.count / r * 100}%`
+              }
+            }
+          ) }),
+          /* @__PURE__ */ e("span", { className: "w-10 shrink-0 text-right typo-body-sm tabular-nums text-[var(--Text-Medium-Emphasis)]", children: s.count.toLocaleString() })
+        ] }, s.stars)) })
+      ]
+    }
+  );
+}
+function f({
+  reviewer: l,
+  rating: m,
+  date: t,
+  comment: n,
+  productName: i,
+  imageUrls: r,
+  className: s,
+  ...o
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "review-item",
+      className: d(
+        "space-y-2 border-b border-[var(--Border-Low-Emphasis)] py-4 last:border-b-0",
+        s
+      ),
+      ...o,
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e(p, { rating: m, size: "sm" }),
+            /* @__PURE__ */ e("span", { className: "typo-label-sm text-[var(--Text-High-Emphasis)]", children: l })
+          ] }),
+          /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: t })
+        ] }),
+        i && /* @__PURE__ */ a("p", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: [
+          "購入商品: ",
+          i
+        ] }),
+        /* @__PURE__ */ e("p", { className: "typo-body-md text-[var(--Text-High-Emphasis)]", children: n }),
+        r && r.length > 0 && /* @__PURE__ */ e("div", { className: "flex gap-2", children: r.map((h, c) => /* @__PURE__ */ e(
+          "img",
+          {
+            src: h,
+            alt: `レビュー画像 ${c + 1}`,
+            className: "size-16 rounded-md object-cover"
+          },
+          c
+        )) })
+      ]
+    }
+  );
+}
+export {
+  f as ReviewItem,
+  g as ReviewSummary
+};

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

@@ -0,0 +1,179 @@
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
+import "react";
+import u from "iconsax-reactjs/dist/esm/Location.js";
+import N from "iconsax-reactjs/dist/esm/Star1.js";
+import { StarHalf as g } from "lucide-react";
+import { cn as m } from "../../lib/utils.js";
+import { Button as y } from "../foundations/button.js";
+import { BookmarkRibbonIcon as w } from "./product-card.js";
+function E({ rating: r }) {
+  const t = Math.floor(r), l = r - t >= 0.5, i = [];
+  for (let s = 1; s <= 5; s++)
+    s <= t ? i.push(
+      /* @__PURE__ */ a(
+        N,
+        {
+          size: 12,
+          className: "fill-[var(--Brand-Cake-Orange)] text-[var(--Brand-Cake-Orange)]",
+          variant: "Bold"
+        },
+        s
+      )
+    ) : l && s === t + 1 ? i.push(
+      /* @__PURE__ */ a(
+        g,
+        {
+          className: "size-3 fill-[var(--Brand-Cake-Orange)] text-[var(--Brand-Cake-Orange)]"
+        },
+        s
+      )
+    ) : i.push(
+      /* @__PURE__ */ a(
+        N,
+        {
+          size: 12,
+          className: "text-[var(--Border-Medium-Emphasis)]"
+        },
+        s
+      )
+    );
+  return /* @__PURE__ */ a("div", { className: "flex items-center", children: i });
+}
+function O({
+  name: r,
+  ruby: t,
+  productImageUrl: l,
+  shopImageUrl: i,
+  rating: s,
+  reviewCount: p,
+  area: o,
+  deliveryDate: h,
+  isBookmarked: d = !1,
+  onBookmarkToggle: v,
+  href: c,
+  variant: b = "default",
+  className: x,
+  ...f
+}) {
+  return b === "compact" ? /* @__PURE__ */ e(
+    c ? "a" : "div",
+    {
+      ...c ? { href: c } : {},
+      "data-slot": "shop-card",
+      className: m(
+        "flex items-center gap-3 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-3 transition-colors hover:bg-[var(--Surface-Secondary)] max-w-[400px]",
+        x
+      ),
+      ...f,
+      children: [
+        (l || i) && /* @__PURE__ */ a(
+          "img",
+          {
+            src: l || i,
+            alt: r,
+            className: "size-12 shrink-0 rounded object-cover"
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ a("p", { className: "truncate typo-label-md text-[var(--Text-High-Emphasis)]", children: r }),
+          o && /* @__PURE__ */ e("p", { className: "flex items-center gap-1 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
+            /* @__PURE__ */ a(u, { size: 12, className: "shrink-0" }),
+            o
+          ] })
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "shop-card",
+      className: m(
+        "relative min-w-[200px] grid grid-rows-[auto_1fr] gap-2 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-3 transition-colors hover:bg-[var(--Surface-Secondary)]",
+        x
+      ),
+      ...f,
+      children: [
+        /* @__PURE__ */ e("div", { className: "flex overflow-hidden rounded", children: [
+          l && /* @__PURE__ */ e("div", { className: "relative w-1/2", children: [
+            /* @__PURE__ */ a("div", { className: "pb-[100%]" }),
+            /* @__PURE__ */ a(
+              "img",
+              {
+                src: l,
+                alt: `${r}の商品画像`,
+                className: "absolute inset-0 size-full object-cover"
+              }
+            )
+          ] }),
+          i && /* @__PURE__ */ e("div", { className: "relative w-1/2", children: [
+            /* @__PURE__ */ a("div", { className: "pb-[100%]" }),
+            /* @__PURE__ */ a(
+              "img",
+              {
+                src: i,
+                alt: `${r}の店舗画像`,
+                className: "absolute inset-0 size-full object-cover"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "grid items-end", children: [
+          /* @__PURE__ */ e("h3", { className: "mb-auto pb-1 typo-heading-xl text-[var(--Text-High-Emphasis)]", children: [
+            /* @__PURE__ */ a("span", { className: "line-clamp-2", children: r }),
+            t && /* @__PURE__ */ a("small", { className: "block typo-body-sm text-[var(--Text-Low-Emphasis)]", children: t })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-[1fr_auto] items-end gap-2", children: [
+            /* @__PURE__ */ e("div", { className: "grid gap-1", children: [
+              o && /* @__PURE__ */ a("p", { className: "line-clamp-2 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: o }),
+              /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: [
+                s !== void 0 && s >= 1 && /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ a(E, { rating: s }),
+                  /* @__PURE__ */ a("span", { className: "typo-body-sm text-[var(--Text-High-Emphasis)]", children: s.toFixed(1) }),
+                  p !== void 0 && /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
+                    "(",
+                    p,
+                    ")"
+                  ] })
+                ] }),
+                h && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Accent-Primary)]", children: [
+                  "最短",
+                  h,
+                  "お届け"
+                ] })
+              ] })
+            ] }),
+            v && /* @__PURE__ */ a(
+              y,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: (n) => {
+                  n.preventDefault(), n.stopPropagation(), v();
+                },
+                className: m(
+                  "z-[var(--Z-Local-1)] shrink-0 rounded-full",
+                  d ? "text-[var(--Brand-Cake-Orange)]" : "text-[var(--Object-High-Emphasis)]"
+                ),
+                "aria-label": d ? "お気に入り解除" : "お気に入りに追加",
+                children: /* @__PURE__ */ a(
+                  w,
+                  {
+                    size: 20,
+                    filled: d
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        c && /* @__PURE__ */ a("a", { href: c, className: "absolute inset-0", "aria-label": r, children: /* @__PURE__ */ e("span", { className: "sr-only", children: [
+          r,
+          "のショップページへ"
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  O as ShopCard
+};

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

@@ -0,0 +1,50 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import "react";
+import { cn as t } from "../../lib/utils.js";
+import { Card as o, CardContent as n } from "../foundations/card.js";
+import x from "iconsax-reactjs/dist/esm/TrendUp.js";
+import p from "iconsax-reactjs/dist/esm/TrendDown.js";
+function y({
+  label: i,
+  value: r,
+  icon: l,
+  iconBgClass: c = "bg-[var(--Surface-Accent-Primary-Light)]",
+  trend: s,
+  className: m
+}) {
+  return /* @__PURE__ */ e(o, { className: t("min-w-[140px] p-0", m), "data-slot": "stat-card", children: /* @__PURE__ */ a(n, { className: "p-4", children: [
+    /* @__PURE__ */ a("div", { className: "flex flex-col items-start gap-1.5", children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: t(
+            "flex items-center justify-center size-10 rounded-lg",
+            c
+          ),
+          children: l
+        }
+      ),
+      /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: i })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "flex items-baseline justify-between mt-2", children: [
+      /* @__PURE__ */ e("p", { className: "typo-heading-xl text-[var(--Text-High-Emphasis)]", children: r }),
+      s && /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+        s.isPositive ? /* @__PURE__ */ e(x, { size: 14, className: "text-[var(--Text-Success)]" }) : /* @__PURE__ */ e(p, { size: 14, className: "text-[var(--Text-Caution)]" }),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: t(
+              "typo-label-xs",
+              s.isPositive ? "text-[var(--Text-Success)]" : "text-[var(--Text-Caution)]"
+            ),
+            children: s.value
+          }
+        ),
+        s.label && /* @__PURE__ */ e("span", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)]", children: s.label })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  y as StatCard
+};

package/dist/components/foundations/accordion.js

@@ -0,0 +1,67 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import "react";
+import { ChevronDownIcon as d } from "lucide-react";
+import { Accordion as t } from "radix-ui";
+import { cn as i } from "../../lib/utils.js";
+function b({
+  ...o
+}) {
+  return /* @__PURE__ */ e(t.Root, { "data-slot": "accordion", ...o });
+}
+function g({
+  className: o,
+  ...r
+}) {
+  return /* @__PURE__ */ e(
+    t.Item,
+    {
+      "data-slot": "accordion-item",
+      className: i("border-b border-[var(--Border-Medium-Emphasis)] last:border-b-0", o),
+      ...r
+    }
+  );
+}
+function v({
+  className: o,
+  children: r,
+  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,
+    {
+      "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
+      ),
+      ...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)]" })
+      ]
+    }
+  ) }) });
+}
+function h({
+  className: o,
+  children: r,
+  ...n
+}) {
+  return /* @__PURE__ */ e(
+    t.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 })
+    }
+  );
+}
+export {
+  b as Accordion,
+  h as AccordionContent,
+  g as AccordionItem,
+  v as AccordionTrigger
+};