@cakejp/design-system 0.16.0 → 0.17.0

package/dist/components/primitives/banner-carousel.js

@@ -0,0 +1,97 @@
+import { jsxs as r, jsx as a, Fragment as x } from "react/jsx-runtime";
+import "react";
+import { cn as e } from "../../lib/utils.js";
+import { SectionHeader as f } from "./section-header.js";
+const c = {
+  sm: "w-[48vw] @md:w-[180px]",
+  md: "w-[70vw] @md:w-[260px]",
+  lg: "w-[85vw] @md:w-[320px]"
+}, w = {
+  "16/9": "aspect-[16/9]",
+  "1/1": "aspect-[1/1]",
+  "4/3": "aspect-[4/3]",
+  "3/4": "aspect-[3/4]"
+};
+function j({
+  title: n,
+  subtitle: i,
+  moreHref: d,
+  moreLabel: p,
+  headerSize: m,
+  items: h,
+  aspectRatio: u = "16/9",
+  bannerSize: l = "md",
+  className: v
+}) {
+  return /* @__PURE__ */ r(
+    "section",
+    {
+      "data-slot": "banner-carousel",
+      className: e("py-4", v),
+      children: [
+        /* @__PURE__ */ a(
+          f,
+          {
+            title: n,
+            subtitle: i,
+            moreHref: d,
+            moreLabel: p,
+            size: m,
+            className: "px-4"
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "flex gap-3 overflow-x-auto px-4 pb-2 scrollbar-hide mt-3", children: [
+          h.map((s, o) => {
+            const t = /* @__PURE__ */ r(x, { children: [
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  className: e(
+                    "overflow-hidden rounded-lg",
+                    w[u]
+                  ),
+                  children: /* @__PURE__ */ a(
+                    "img",
+                    {
+                      src: s.imageUrl,
+                      alt: s.alt,
+                      className: "h-full w-full object-cover"
+                    }
+                  )
+                }
+              ),
+              s.label && /* @__PURE__ */ a("p", { className: "typo-label-sm text-[var(--Text-High-Emphasis)] mt-1.5", children: s.label }),
+              s.sublabel && /* @__PURE__ */ a("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: s.sublabel })
+            ] });
+            return s.href ? /* @__PURE__ */ a(
+              "a",
+              {
+                href: s.href,
+                className: e(
+                  "group shrink-0",
+                  c[l]
+                ),
+                children: /* @__PURE__ */ a("div", { className: "transition-opacity duration-[var(--Motion-Duration-Fast)] group-hover:opacity-80", children: t })
+              },
+              o
+            ) : /* @__PURE__ */ a(
+              "div",
+              {
+                className: e(
+                  "shrink-0",
+                  c[l]
+                ),
+                children: t
+              },
+              o
+            );
+          }),
+          /* @__PURE__ */ a("div", { className: "shrink-0 w-4", "aria-hidden": "true" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  j as BannerCarousel
+};

package/dist/components/primitives/bottom-tab-bar.js

@@ -0,0 +1,81 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as a } from "../../lib/utils.js";
+import { NotificationBadge as d } from "./notification-badge.js";
+function x({
+  className: n,
+  items: s,
+  banner: t,
+  ...i
+}) {
+  return /* @__PURE__ */ o(
+    "nav",
+    {
+      "data-slot": "bottom-tab-bar",
+      "aria-label": "メインナビゲーション",
+      className: a(
+        "fixed inset-x-0 bottom-0 z-[var(--Z-Floating)] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)] pb-[env(safe-area-inset-bottom)] @md:hidden",
+        n
+      ),
+      ...i,
+      children: [
+        t && /* @__PURE__ */ e(
+          "div",
+          {
+            "data-slot": "bottom-tab-bar-banner",
+            className: "border-b border-[var(--Border-Low-Emphasis)]",
+            children: t
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "flex h-[52px] items-center justify-around px-1 @sm:px-4", children: s.map((r) => {
+          const c = r.href ? "a" : "button", l = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
+          return /* @__PURE__ */ o(
+            c,
+            {
+              className: a(
+                "relative flex flex-1 flex-col items-center gap-0.5 pb-1 pt-0.5 transition-colors min-w-0",
+                r.isActive ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Text-High-Emphasis)]"
+              ),
+              "aria-current": r.isActive ? "page" : void 0,
+              ...l,
+              children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: a(
+                      "relative flex h-7 w-14 shrink-0 items-center justify-center rounded-full overflow-visible transition-colors",
+                      r.isActive && "bg-[var(--Surface-Accent-Primary-Light)]"
+                    ),
+                    children: /* @__PURE__ */ e(
+                      d,
+                      {
+                        count: r.badgeCount,
+                        size: "md",
+                        hidden: r.badgeCount == null || r.badgeCount <= 0,
+                        children: r.isActive && r.activeIcon ? r.activeIcon : r.icon
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: a(
+                      "truncate max-w-full px-0.5 text-center",
+                      r.isActive ? "typo-label-xs" : "typo-body-xs"
+                    ),
+                    children: r.label
+                  }
+                )
+              ]
+            },
+            r.label
+          );
+        }) })
+      ]
+    }
+  );
+}
+export {
+  x as BottomTabBar
+};

package/dist/components/primitives/bulk-action-bar.js

@@ -0,0 +1,27 @@
+import { jsxs as a } from "react/jsx-runtime";
+import "react";
+import { cn as e } from "../../lib/utils.js";
+function c({ selectedCount: r, children: t, className: i }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "bulk-action-bar",
+      className: e(
+        "flex items-center gap-3 rounded-lg bg-[var(--Surface-Accent-Primary-Light)] px-4 py-3",
+        i
+      ),
+      role: "toolbar",
+      "aria-label": `${r}件を選択中`,
+      children: [
+        /* @__PURE__ */ a("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)] shrink-0", children: [
+          r,
+          "件を選択中"
+        ] }),
+        t
+      ]
+    }
+  );
+}
+export {
+  c as BulkActionBar
+};

package/dist/components/primitives/category-scroll.js

@@ -0,0 +1,110 @@
+import { jsxs as l, jsx as a, Fragment as w } from "react/jsx-runtime";
+import "react";
+import { cn as s } from "../../lib/utils.js";
+import { SectionHeader as v } from "./section-header.js";
+const N = {
+  sm: "size-[60px]",
+  md: "size-[100px]",
+  lg: "size-[120px]"
+}, y = {
+  sm: "max-w-[60px]",
+  md: "max-w-[100px]",
+  lg: "max-w-[120px]"
+}, C = {
+  sm: "calc((100vw - 32px) / 4.05)",
+  md: "calc((100vw - 32px) / 3.5)",
+  lg: "calc((100vw - 32px) / 3.0)"
+};
+function A({
+  title: m,
+  moreHref: d,
+  headerSize: x = "lg",
+  items: r,
+  thumbnailSize: c = "md",
+  thumbnailShape: n = "square",
+  layout: h = "scroll",
+  gridRows: g = 3,
+  pcGridCols: o,
+  className: u
+}) {
+  const f = n === "circle" ? "rounded-full" : "rounded-lg", i = (e, t, p) => /* @__PURE__ */ l(
+    "a",
+    {
+      href: e.href,
+      className: "flex flex-col items-center gap-1.5 group shrink-0",
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: s(
+              "overflow-hidden shrink-0",
+              t ? "size-24" : p ? "w-full aspect-square" : N[c],
+              f
+            ),
+            children: /* @__PURE__ */ a(
+              "img",
+              {
+                src: e.imageUrl,
+                alt: "",
+                className: "size-full object-cover transition-opacity group-hover:opacity-80"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: s(
+              "typo-label-sm text-[var(--Text-High-Emphasis)] text-center",
+              t ? "max-w-[96px]" : p ? "w-full" : y[c]
+            ),
+            children: e.name
+          }
+        )
+      ]
+    },
+    e.href
+  );
+  return /* @__PURE__ */ l("section", { "data-slot": "category-scroll", className: s(
+    // w-full: CSS Grid 直下で mx-auto が justify-self: stretch を無効化し
+    // max-content 幅に縮むのを防ぐ（#207）。block 文脈の挙動は変わらない
+    "w-full py-4 @[960px]:max-w-[960px] @[960px]:mx-auto",
+    u
+  ), children: [
+    /* @__PURE__ */ a(v, { title: m, moreHref: d, size: x, className: "px-4" }),
+    h === "grid" ? /* @__PURE__ */ l(w, { children: [
+      /* @__PURE__ */ l("div", { className: s("mt-3 overflow-x-auto pl-4 pb-2 scrollbar-hide", o && "@[960px]:hidden"), children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "grid gap-2",
+            style: {
+              gridTemplateRows: `repeat(${g}, auto)`,
+              gridAutoFlow: "column",
+              gridAutoColumns: C[c]
+            },
+            children: r.map((e) => i(e, !1, !0))
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: "shrink-0 w-4", "aria-hidden": "true" })
+      ] }),
+      o && /* @__PURE__ */ a(
+        "div",
+        {
+          className: "hidden @[960px]:grid @[960px]:gap-x-2 @[960px]:gap-y-4 @[960px]:px-6 @[960px]:mt-3",
+          style: { gridTemplateColumns: `repeat(${o}, 1fr)` },
+          children: r.map((e) => i(e, !0))
+        }
+      )
+    ] }) : (
+      /* デフォルト: 横スクロール1行 */
+      /* @__PURE__ */ l("div", { className: "mt-3 flex gap-3 overflow-x-auto pl-4 pb-2 scrollbar-hide", children: [
+        r.map((e) => i(e)),
+        /* @__PURE__ */ a("div", { className: "shrink-0 w-4", "aria-hidden": "true" })
+      ] })
+    )
+  ] });
+}
+export {
+  A as CategoryScroll
+};

package/dist/components/primitives/category-shortcuts.js

@@ -0,0 +1,66 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as a } from "../../lib/utils.js";
+function f({ items: s, className: c }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "category-shortcuts",
+      className: a(
+        "flex gap-3 overflow-x-auto px-4 py-2 scrollbar-hide",
+        c
+      ),
+      children: [
+        s.map((r, t) => {
+          const l = !!r.href || !!r.onClick, n = r.href ? "a" : "button", i = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
+          return /* @__PURE__ */ o(
+            n,
+            {
+              ...i,
+              className: a(
+                "flex shrink-0 flex-col items-center gap-1 rounded-lg p-1 transition-colors",
+                l && "hover:bg-[var(--Surface-Secondary)]",
+                r.isSelected && "bg-[var(--Surface-Accent-Primary-Light)]"
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: a(
+                      "size-10 overflow-hidden rounded-full border",
+                      r.isSelected ? "border-[var(--Brand-Cake-Orange)]" : "border-[var(--Border-Low-Emphasis)]"
+                    ),
+                    children: /* @__PURE__ */ e(
+                      "img",
+                      {
+                        src: r.imageUrl,
+                        alt: r.imageAlt ?? "",
+                        className: "size-full object-cover",
+                        loading: "lazy"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: a(
+                      "w-[56px] text-center typo-body-xs leading-tight line-clamp-2",
+                      r.isSelected ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Text-High-Emphasis)]"
+                    ),
+                    children: r.name
+                  }
+                )
+              ]
+            },
+            t
+          );
+        }),
+        /* @__PURE__ */ e("div", { className: "shrink-0 w-2", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+export {
+  f as CategoryShortcuts
+};

package/dist/components/primitives/chat-composer.js

@@ -0,0 +1,141 @@
+import { jsxs as w, jsx as o } from "react/jsx-runtime";
+import * as s from "react";
+import { SendHorizontal as q } from "lucide-react";
+import { cn as G } from "../../lib/utils.js";
+import { Button as J } from "../foundations/button.js";
+import { FileInput as M } from "../foundations/file-input.js";
+import { Textarea as O } from "../foundations/textarea.js";
+import { Chip as Q } from "./chip.js";
+function ee({
+  value: a,
+  onChange: C,
+  onSubmit: S,
+  submitKey: N = "enter",
+  attachments: d,
+  onAttachmentsChange: k,
+  accept: z,
+  maxFiles: l,
+  maxSizeMb: f,
+  onAttachmentError: u,
+  disabled: n = !1,
+  isSubmitting: h = !1,
+  placeholder: E = "メッセージを入力",
+  maxLength: p,
+  label: F = "メッセージを入力",
+  rows: K = 2,
+  id: I,
+  autoFocus: R,
+  className: H
+}) {
+  const j = s.useId(), g = I ?? j, b = d !== void 0, [B, D] = s.useState([]), t = b ? d : B, [L, P] = s.useState(0), c = s.useRef(!1), m = n || h, x = !m && (a.trim().length > 0 || t.length > 0), y = (e) => {
+    b || D(e), k?.(e);
+  }, v = () => {
+    x && S(a, t);
+  }, $ = (e) => {
+    if (e.key !== "Enter" || c.current || e.nativeEvent.isComposing) return;
+    const r = e.metaKey || e.ctrlKey;
+    if (N === "mod-enter") {
+      if (!r) return;
+    } else if (e.shiftKey)
+      return;
+    e.preventDefault(), v();
+  }, T = (e) => {
+    if (P((i) => i + 1), e.length === 0) return;
+    let r = t;
+    for (const i of e) {
+      if (l != null && r.length >= l) {
+        u?.({ code: "max-files", file: i, limit: l });
+        continue;
+      }
+      r = [...r, i];
+    }
+    r !== t && y(r);
+  }, _ = (e) => {
+    y(t.filter((r, i) => i !== e));
+  };
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      "data-slot": "chat-composer",
+      "data-disabled": n || void 0,
+      className: G(
+        "flex flex-col gap-2 rounded-xl border border-[var(--Border-High-Emphasis)] bg-[var(--Surface-Primary)] p-2 transition-[color,box-shadow,border-color]",
+        "focus-within:border-[var(--Focus-High-Emphasis)] focus-within:ring-[3px] focus-within:ring-[var(--Focus-High-Emphasis)]/50",
+        n && "border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Secondary)]",
+        H
+      ),
+      children: [
+        t.length > 0 && /* @__PURE__ */ o("ul", { "data-slot": "chat-composer-attachments", className: "flex flex-wrap gap-2", children: t.map((e, r) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
+          Q,
+          {
+            size: "sm",
+            removable: !0,
+            disabled: m,
+            onRemove: () => _(r),
+            children: e.name
+          }
+        ) }, `${e.name}-${r}`)) }),
+        /* @__PURE__ */ o("label", { htmlFor: g, className: "sr-only", children: F }),
+        /* @__PURE__ */ o(
+          O,
+          {
+            id: g,
+            rows: K,
+            value: a,
+            maxLength: p,
+            showCount: p != null,
+            placeholder: E,
+            disabled: n,
+            autoFocus: R,
+            onChange: (e) => C(e.target.value),
+            onKeyDown: $,
+            onCompositionStart: () => {
+              c.current = !0;
+            },
+            onCompositionEnd: () => {
+              c.current = !1;
+            },
+            className: "max-h-40 resize-none border-0 bg-transparent px-2 py-1.5 focus-visible:ring-0 disabled:bg-transparent"
+          }
+        ),
+        /* @__PURE__ */ w("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ o(
+            M,
+            {
+              accept: z,
+              multiple: !0,
+              disabled: m,
+              maxSize: f != null ? f * 1024 * 1024 : void 0,
+              buttonLabel: "ファイルを添付",
+              placeholder: "",
+              value: [],
+              onFilesChange: T,
+              onError: (e) => u?.({
+                code: "max-size",
+                file: e.file,
+                limit: e.maxSize / 1024 / 1024
+              }),
+              className: "shrink-0"
+            },
+            L
+          ),
+          /* @__PURE__ */ o(
+            J,
+            {
+              type: "button",
+              size: "icon",
+              className: "shrink-0 rounded-full",
+              disabled: !x,
+              "aria-label": h ? "送信中" : "送信",
+              onClick: v,
+              children: /* @__PURE__ */ o(q, { className: "size-4", "aria-hidden": "true" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ee as ChatComposer
+};

package/dist/components/primitives/chip.js

@@ -0,0 +1,123 @@
+import { jsx as t, jsxs as n, Fragment as S } from "react/jsx-runtime";
+import "react";
+import { X as T } from "lucide-react";
+import { cn as s } from "../../lib/utils.js";
+import { chipVariants as b } from "../foundations/chip-variants.js";
+function E({
+  className: o,
+  variant: h = "filled",
+  size: l,
+  shape: c,
+  href: r,
+  selected: i = !1,
+  soldOut: x = !1,
+  removable: y = !1,
+  onRemove: N,
+  count: m,
+  children: d,
+  ...a
+}) {
+  const v = i ? "accent" : h, e = x && !i, u = e ? "border border-[var(--Text-Disable)] bg-[var(--Surface-Secondary)] text-[var(--Text-Disable)]" : void 0, g = m !== void 0 && /* @__PURE__ */ t(
+    "span",
+    {
+      className: s(
+        "inline-flex items-center justify-center rounded-full px-1.5 min-w-[1.25rem] typo-label-xs transition-colors",
+        i ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)] group-hover:bg-[var(--Surface-Primary)] group-hover:text-[var(--Brand-Cake-Orange)]" : "bg-[var(--Surface-Tertiary)] text-[var(--Text-Medium-Emphasis)]"
+      ),
+      children: m
+    }
+  ), f = e && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ t("div", { className: "h-[67px] w-px origin-center rotate-45 bg-[var(--Text-Disable)]" }) });
+  if (y)
+    return /* @__PURE__ */ n(
+      "span",
+      {
+        "data-slot": "chip",
+        "data-selected": i || void 0,
+        className: s(
+          "group",
+          b({ variant: v, size: l, shape: c }),
+          e ? u : void 0,
+          e && "relative",
+          "has-[[data-slot=chip-trigger]:focus-visible]:ring-2 has-[[data-slot=chip-trigger]:focus-visible]:ring-[var(--Focus-High-Emphasis)]",
+          o
+        ),
+        children: [
+          r ? /* @__PURE__ */ n(
+            "a",
+            {
+              href: r,
+              "data-slot": "chip-trigger",
+              className: "inline-flex items-center gap-1.5 focus-visible:outline-none",
+              children: [
+                d,
+                g
+              ]
+            }
+          ) : /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              "data-slot": "chip-trigger",
+              disabled: e || a.disabled,
+              className: "inline-flex items-center gap-1.5 focus-visible:outline-none",
+              ...a,
+              children: [
+                d,
+                g
+              ]
+            }
+          ),
+          f,
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              "aria-label": "削除",
+              disabled: e || a.disabled,
+              onClick: (O) => {
+                O.stopPropagation(), N?.();
+              },
+              className: "-mr-1 ml-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-full hover:bg-[var(--Overlay-Light)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)]",
+              children: /* @__PURE__ */ t(T, { className: "size-3.5" })
+            }
+          )
+        ]
+      }
+    );
+  const p = /* @__PURE__ */ n(S, { children: [
+    d,
+    g,
+    f
+  ] });
+  return r ? /* @__PURE__ */ t(
+    "a",
+    {
+      href: r,
+      "data-slot": "chip",
+      "data-selected": i || void 0,
+      className: s("group", b({ variant: v, size: l, shape: c }), u, o),
+      children: p
+    }
+  ) : /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      "data-slot": "chip",
+      "data-selected": i || void 0,
+      disabled: e || a.disabled,
+      className: s(
+        "group",
+        b({ variant: v, size: l, shape: c }),
+        e ? u : void 0,
+        e && "relative",
+        o
+      ),
+      ...a,
+      children: p
+    }
+  );
+}
+export {
+  E as Chip,
+  b as chipVariants
+};