@cakejp/design-system 0.16.0 → 0.17.0

package/dist/components/primitives/coach-mark.js

@@ -0,0 +1,102 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import "react";
+import { X as x } from "lucide-react";
+import { cn as a } from "../../lib/utils.js";
+import { Button as m } from "../foundations/button.js";
+const h = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-[-6px]",
+  "top-left": "bottom-full left-5 mb-[-6px]",
+  "top-right": "bottom-full right-5 mb-[-6px]",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-[-6px]",
+  "bottom-left": "top-full left-5 mt-[-6px]",
+  "bottom-right": "top-full right-5 mt-[-6px]",
+  left: "right-full top-1/2 -translate-y-1/2 mr-[-6px]",
+  right: "left-full top-1/2 -translate-y-1/2 ml-[-6px]"
+}, c = {
+  top: "rotate-45 rounded-tl-[2px]",
+  "top-left": "rotate-45 rounded-tl-[2px]",
+  "top-right": "rotate-45 rounded-tl-[2px]",
+  bottom: "rotate-45 rounded-br-[2px]",
+  "bottom-left": "rotate-45 rounded-br-[2px]",
+  "bottom-right": "rotate-45 rounded-br-[2px]",
+  left: "rotate-45 rounded-bl-[2px]",
+  right: "rotate-45 rounded-tr-[2px]"
+};
+function y({
+  className: p,
+  direction: o = "bottom",
+  onClose: l,
+  step: e,
+  onNext: r,
+  nextLabel: s = "次へ",
+  children: d,
+  ...n
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "coach-mark",
+      className: a("relative inline-block", p),
+      ...n,
+      children: /* @__PURE__ */ i(
+        "div",
+        {
+          className: a(
+            "relative rounded-lg bg-[var(--Primitive-Gray-900)] p-3 typo-body-md text-[var(--Primitive-White-alpha-1000)]",
+            "shadow-[0px_4px_6px_-4px_rgba(24,39,75,0.12),0px_8px_8px_-4px_rgba(24,39,75,0.08)]",
+            e || r ? "min-w-[256px]" : "max-w-[256px]"
+          ),
+          children: [
+            /* @__PURE__ */ i("div", { className: "flex items-start gap-1", children: [
+              /* @__PURE__ */ t("div", { className: "min-w-0 flex-1", children: d }),
+              l && /* @__PURE__ */ t(
+                m,
+                {
+                  variant: "ghost",
+                  size: "icon-xs",
+                  className: "shrink-0 text-[var(--Primitive-White-alpha-1000)]/70 hover:bg-[var(--Primitive-White-alpha-1000)]/10 hover:text-[var(--Primitive-White-alpha-1000)]",
+                  onClick: l,
+                  "aria-label": "閉じる",
+                  children: /* @__PURE__ */ t(x, { className: "size-4" })
+                }
+              )
+            ] }),
+            (e || r) && /* @__PURE__ */ i("div", { className: "mt-2 flex items-center justify-between pl-2", children: [
+              /* @__PURE__ */ t("span", { className: "typo-body-md text-[var(--Primitive-White-alpha-1000)]/90", children: e ?? "" }),
+              r && /* @__PURE__ */ t(
+                m,
+                {
+                  variant: "tertiary",
+                  size: "sm",
+                  onClick: r,
+                  children: s
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: a(
+                  "absolute z-[var(--Z-Local-1)] size-3",
+                  h[o]
+                ),
+                children: /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: a(
+                      "size-3 bg-[var(--Primitive-Gray-900)]",
+                      c[o]
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  y as CoachMark
+};

package/dist/components/primitives/combobox.js

@@ -0,0 +1,88 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import * as w from "react";
+import { ChevronsUpDown as N, Check as j } from "lucide-react";
+import { cn as h } from "../../lib/utils.js";
+import { Button as k } from "../foundations/button.js";
+import { Command as E, CommandInput as P, CommandList as O, CommandEmpty as S, CommandGroup as T, CommandItem as A } from "../foundations/command.js";
+import { Popover as F, PopoverTrigger as I, PopoverContent as B } from "../foundations/popover.js";
+import { useFieldLabelling as G, resolveFieldAria as H } from "../../lib/field-labelling.js";
+function K({
+  options: s,
+  value: l,
+  onValueChange: u,
+  placeholder: o = "選択してください",
+  searchPlaceholder: f = "検索",
+  emptyLabel: v = "候補がありません",
+  disabled: x,
+  className: y,
+  id: d,
+  "aria-invalid": C,
+  "aria-describedby": n,
+  "aria-label": i,
+  "aria-labelledby": t
+}) {
+  const [m, c] = w.useState(!1), p = s.find((e) => e.value === l), b = G(), g = H(
+    {
+      id: d,
+      "aria-label": i,
+      "aria-labelledby": t,
+      "aria-describedby": n
+    },
+    b
+  );
+  return /* @__PURE__ */ r(F, { open: m, onOpenChange: c, children: [
+    /* @__PURE__ */ a(I, { asChild: !0, children: /* @__PURE__ */ r(
+      k,
+      {
+        type: "button",
+        variant: "tertiary",
+        role: "combobox",
+        id: d,
+        "aria-expanded": m,
+        "aria-haspopup": "listbox",
+        "aria-invalid": C,
+        "aria-describedby": n,
+        "aria-label": i ?? (!b && !i && !t ? o : void 0),
+        "aria-labelledby": t,
+        ...g,
+        disabled: x,
+        className: h("w-full justify-between bg-[var(--Surface-Primary)]", y),
+        children: [
+          /* @__PURE__ */ a("span", { className: p ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]", children: p?.label ?? o }),
+          /* @__PURE__ */ a(N, { "aria-hidden": "true", className: "text-[var(--Object-Medium-Emphasis)]" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ a(B, { align: "start", className: "w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ r(E, { children: [
+      /* @__PURE__ */ a(P, { placeholder: f }),
+      /* @__PURE__ */ r(O, { children: [
+        /* @__PURE__ */ a(S, { children: v }),
+        /* @__PURE__ */ a(T, { children: s.map((e) => /* @__PURE__ */ r(
+          A,
+          {
+            value: [e.label, ...e.keywords ?? []].join(" "),
+            disabled: e.disabled,
+            onSelect: () => {
+              u?.(e.value), c(!1);
+            },
+            children: [
+              /* @__PURE__ */ a(
+                j,
+                {
+                  "aria-hidden": "true",
+                  className: h(e.value === l ? "opacity-100" : "opacity-0")
+                }
+              ),
+              e.label,
+              e.value === l && /* @__PURE__ */ a("span", { className: "sr-only", children: "選択済み" })
+            ]
+          },
+          e.value
+        )) })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  K as Combobox
+};

package/dist/components/primitives/container.js

@@ -0,0 +1,50 @@
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+import { cva as o } from "class-variance-authority";
+import { cn as i } from "../../lib/utils.js";
+const p = o("mx-auto w-full", {
+  variants: {
+    size: {
+      // コンテンツ最大幅。4px グリッド対象外のレイアウト幅なので任意値で固定。
+      page: "max-w-[1280px]",
+      // 標準ページ = breakpoints.xl（コンテンツ上限段）
+      narrow: "max-w-[760px]",
+      // 記事・フォーム等の読み物幅
+      wide: "max-w-[1440px]",
+      // ワイドなランディング
+      fluid: "max-w-none"
+      // 上限なし（全幅）
+    },
+    gutter: {
+      default: "px-4 md:px-6",
+      // SP 16 / PC 24
+      tight: "px-3 md:px-4",
+      // SP 12 / PC 16
+      none: "px-0"
+    }
+  },
+  defaultVariants: {
+    size: "page",
+    gutter: "default"
+  }
+});
+function u({
+  className: t,
+  size: a,
+  gutter: r,
+  ...e
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-slot": "container",
+      "data-size": a ?? "page",
+      className: i(p({ size: a, gutter: r }), t),
+      ...e
+    }
+  );
+}
+export {
+  u as Container,
+  p as containerVariants
+};

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

@@ -0,0 +1,144 @@
+import { jsxs as v, jsx as a, Fragment as z } from "react/jsx-runtime";
+import * as s from "react";
+import F from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import L from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { cn as i } from "../../lib/utils.js";
+const k = {
+  1: "@[960px]:w-full",
+  2: "@[960px]:w-[calc((100%-16px)/2)]",
+  3: "@[960px]:w-[calc((100%-32px)/3)]",
+  4: "@[960px]:w-[calc((100%-48px)/4)]"
+};
+function M({
+  slides: c,
+  showDots: b = !0,
+  showArrows: y = !0,
+  autoPlay: d = 0,
+  peek: p = !1,
+  itemsPerView: f = 1,
+  ariaLabel: g = "コンテンツカルーセル",
+  className: w,
+  ...E
+}) {
+  const u = s.useRef(null), [o, I] = s.useState(0), t = c.length;
+  s.useEffect(() => {
+    const r = u.current;
+    if (!r) return;
+    let e = 0;
+    const n = () => {
+      cancelAnimationFrame(e), e = requestAnimationFrame(() => {
+        const A = Array.from(
+          r.querySelectorAll("[data-slide]")
+        );
+        let m = 0, h = Number.POSITIVE_INFINITY;
+        A.forEach((T, j) => {
+          const x = Math.abs(T.offsetLeft - r.scrollLeft);
+          x < h && (h = x, m = j);
+        }), I(m);
+      });
+    };
+    return n(), r.addEventListener("scroll", n, { passive: !0 }), () => {
+      cancelAnimationFrame(e), r.removeEventListener("scroll", n);
+    };
+  }, [t]);
+  function l(r) {
+    const e = u.current;
+    if (!e) return;
+    const n = e.children[r];
+    n && e.scrollTo({ left: n.offsetLeft, behavior: "smooth" });
+  }
+  s.useEffect(() => {
+    if (d <= 0 || t <= 1) return;
+    const r = setInterval(() => {
+      l((o + 1) % t);
+    }, d);
+    return () => clearInterval(r);
+  }, [d, o, t]);
+  function N() {
+    l(o <= 0 ? t - 1 : o - 1);
+  }
+  function S() {
+    l(o >= t - 1 ? 0 : o + 1);
+  }
+  return t === 0 ? null : /* @__PURE__ */ v(
+    "div",
+    {
+      "data-slot": "content-carousel",
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": g,
+      className: i("@container group/carousel relative", w),
+      ...E,
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            ref: u,
+            className: i(
+              "flex snap-x snap-mandatory overflow-x-auto scroll-smooth scrollbar-none",
+              p && "pl-4 @[960px]:pl-0",
+              f > 1 && "@[960px]:gap-4"
+            ),
+            style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+            children: c.map((r, e) => /* @__PURE__ */ a(
+              "div",
+              {
+                "data-slide": !0,
+                "data-index": e,
+                role: "group",
+                "aria-roledescription": "スライド",
+                "aria-label": `${e + 1} / ${t}`,
+                className: i(
+                  "shrink-0 snap-start",
+                  p ? "w-[calc(100%-48px)] pr-3 @[960px]:pr-0" : "w-full",
+                  k[f]
+                ),
+                children: r
+              },
+              e
+            ))
+          }
+        ),
+        y && t > 1 && /* @__PURE__ */ v(z, { children: [
+          /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              onClick: N,
+              "aria-label": "前へ",
+              className: "absolute left-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
+              children: /* @__PURE__ */ a(F, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
+            }
+          ),
+          /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              onClick: S,
+              "aria-label": "次へ",
+              className: "absolute right-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
+              children: /* @__PURE__ */ a(L, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
+            }
+          )
+        ] }),
+        b && t > 1 && /* @__PURE__ */ a("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-1.5 @[960px]:hidden", children: c.map((r, e) => /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            onClick: () => l(e),
+            "aria-label": `スライド ${e + 1}`,
+            className: i(
+              // shrink-0 必須: 空要素なので min-content 幅が 0、既定の flex-shrink:1 だとドットが消える
+              "size-2 shrink-0 rounded-full transition-colors",
+              e === o ? "bg-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Tertiary)]"
+            )
+          },
+          e
+        )) })
+      ]
+    }
+  );
+}
+export {
+  M as ContentCarousel
+};

package/dist/components/primitives/date-picker.js

@@ -0,0 +1,175 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import * as y from "react";
+import v from "iconsax-reactjs/dist/esm/Calendar.js";
+import { X as H } from "lucide-react";
+import { ja as A } from "react-day-picker/locale";
+import { cn as S } from "../../lib/utils.js";
+import { Button as N } from "../foundations/button.js";
+import { Calendar as P } from "../foundations/calendar.js";
+import { Popover as z, PopoverTrigger as j, PopoverContent as k } from "../foundations/popover.js";
+import { Select as M, SelectTrigger as C, SelectValue as w, SelectContent as D, SelectItem as E } from "../foundations/select.js";
+const $ = ["日", "月", "火", "水", "木", "金", "土"];
+function T(e) {
+  return `${e.getMonth() + 1}月${e.getDate()}日（${$[e.getDay()]}）`;
+}
+function V(e, o, s) {
+  const a = [];
+  return e && a.push({ before: e }), o && a.push({ after: o }), s && (Array.isArray(s) ? a.push(...s) : a.push(s)), a.length > 0 ? a : void 0;
+}
+function _({
+  value: e,
+  onChange: o,
+  placeholder: s = "日付を選択",
+  min: a,
+  max: l,
+  disabledDates: p,
+  disabled: c,
+  clearable: f = !1,
+  clearLabel: u = "日付をクリア",
+  id: g,
+  className: b
+}) {
+  const [m, h] = y.useState(!1), d = V(a, l, p), t = f && !!e && !c;
+  return (
+    // クリアボタンは trigger の「兄弟」として絶対配置する。trigger の内側に置くと
+    // button の入れ子になり a11y 上不正（Chip removable と同じ解決）。
+    /* @__PURE__ */ n("div", { className: S("relative w-full", b), children: [
+      /* @__PURE__ */ n(z, { open: m, onOpenChange: h, children: [
+        /* @__PURE__ */ r(j, { asChild: !0, children: /* @__PURE__ */ n(
+          N,
+          {
+            id: g,
+            type: "button",
+            variant: "ghost",
+            disabled: c,
+            "aria-label": e ? T(e) : s,
+            "data-empty": !e,
+            className: S(
+              // h-11（44px）= 入力コントロールの共通高さ（Input / SelectTrigger / Button default と揃える）
+              "h-11 w-full justify-start gap-2 border border-[var(--Border-High-Emphasis)] bg-transparent px-3 typo-body-md text-[var(--Text-High-Emphasis)] hover:border-[var(--Focus-High-Emphasis)] hover:bg-[var(--Surface-Secondary)] data-[empty=true]:text-[var(--Text-Low-Emphasis)]",
+              // クリアボタンの領域を空ける
+              t && "pr-10"
+            ),
+            children: [
+              /* @__PURE__ */ r(v, { size: 16, className: "shrink-0" }),
+              /* @__PURE__ */ r("span", { className: "truncate", children: e ? T(e) : s })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ r(k, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ r(
+          P,
+          {
+            mode: "single",
+            selected: e,
+            onSelect: (i) => {
+              o?.(i), h(!1);
+            },
+            disabled: d,
+            locale: A,
+            autoFocus: !0
+          }
+        ) })
+      ] }),
+      t && /* @__PURE__ */ r(
+        N,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": u,
+          onClick: () => o?.(void 0),
+          className: "absolute top-1/2 right-1 -translate-y-1/2 text-[var(--Text-Medium-Emphasis)]",
+          children: /* @__PURE__ */ r(H, { className: "size-4" })
+        }
+      )
+    ] })
+  );
+}
+function Y({
+  value: e,
+  onChange: o,
+  minuteStep: s = 5,
+  hourLabel: a = "時",
+  minuteLabel: l = "分",
+  clearLabel: p = "日時をクリア",
+  disabled: c,
+  className: f,
+  ...u
+}) {
+  const g = y.useMemo(
+    () => Array.from({ length: 24 }, (t, i) => i),
+    []
+  ), b = y.useMemo(
+    () => Array.from(
+      { length: Math.ceil(60 / s) },
+      (t, i) => i * s
+    ),
+    [s]
+  ), m = (t, i) => {
+    if (!e) return;
+    const x = new Date(e);
+    t === "hours" ? x.setHours(Number(i)) : x.setMinutes(Number(i)), o?.(x);
+  }, h = (t) => {
+    if (!t || !e) {
+      o?.(t);
+      return;
+    }
+    const i = new Date(t);
+    i.setHours(
+      e.getHours(),
+      e.getMinutes(),
+      e.getSeconds(),
+      e.getMilliseconds()
+    ), o?.(i);
+  }, d = c || !e;
+  return /* @__PURE__ */ n("div", { className: S("flex items-center gap-2", f), children: [
+    /* @__PURE__ */ r(
+      _,
+      {
+        ...u,
+        value: e,
+        onChange: h,
+        disabled: c,
+        clearLabel: p,
+        className: "flex-1"
+      }
+    ),
+    /* @__PURE__ */ n(
+      M,
+      {
+        value: e ? String(e.getHours()) : void 0,
+        onValueChange: (t) => m("hours", t),
+        disabled: d,
+        children: [
+          /* @__PURE__ */ r(C, { size: "default", className: "w-[72px]", "aria-label": a, children: /* @__PURE__ */ r(w, { placeholder: a }) }),
+          /* @__PURE__ */ r(D, { children: g.map((t) => /* @__PURE__ */ r(E, { value: String(t), children: String(t).padStart(2, "0") }, t)) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r("span", { className: "typo-body-md text-[var(--Text-Medium-Emphasis)]", children: ":" }),
+    /* @__PURE__ */ n(
+      M,
+      {
+        value: e ? String(e.getMinutes()) : void 0,
+        onValueChange: (t) => m("minutes", t),
+        disabled: d,
+        children: [
+          /* @__PURE__ */ r(
+            C,
+            {
+              size: "default",
+              className: "w-[72px]",
+              "aria-label": l,
+              children: /* @__PURE__ */ r(w, { placeholder: l })
+            }
+          ),
+          /* @__PURE__ */ r(D, { children: b.map((t) => /* @__PURE__ */ r(E, { value: String(t), children: String(t).padStart(2, "0") }, t)) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  _ as DatePicker,
+  Y as DateTimePicker
+};

package/dist/components/primitives/empty-state.js

@@ -0,0 +1,32 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as c } from "../../lib/utils.js";
+function n({
+  className: s,
+  icon: a,
+  title: r,
+  description: t,
+  action: m,
+  ...i
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      "data-slot": "empty-state",
+      className: c(
+        "flex flex-col items-center justify-center px-4 py-20",
+        s
+      ),
+      ...i,
+      children: [
+        /* @__PURE__ */ e("div", { className: "text-[var(--Border-Medium-Emphasis)]", children: a }),
+        /* @__PURE__ */ e("p", { className: "mt-4 typo-heading-md text-[var(--Text-High-Emphasis)]", children: r }),
+        t && /* @__PURE__ */ e("div", { className: "mt-1 text-center typo-body-md text-[var(--Text-Medium-Emphasis)]", children: t }),
+        m && /* @__PURE__ */ e("div", { className: "mt-6", children: m })
+      ]
+    }
+  );
+}
+export {
+  n as EmptyState
+};