@cakejp/design-system 0.16.0 → 0.17.1

package/dist/components/primitives/image-input.js

@@ -0,0 +1,207 @@
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import * as s from "react";
+import { cva as J } from "class-variance-authority";
+import { Image as _, X as H } from "lucide-react";
+import { cn as h } from "../../lib/utils.js";
+import { Button as X } from "../foundations/button.js";
+import { FieldError as D } from "../foundations/field.js";
+import { FileInput as Q } from "../foundations/file-input.js";
+const N = {
+  "image/png": "PNG",
+  "image/jpeg": "JPEG",
+  "image/jpg": "JPEG",
+  "image/gif": "GIF",
+  "image/webp": "WebP",
+  "image/svg+xml": "SVG",
+  "image/avif": "AVIF"
+};
+function B(e) {
+  return e.split(",").map((a) => a.trim()).filter(Boolean);
+}
+function Y(e, a) {
+  const n = B(a);
+  return n.length === 0 ? !0 : n.some((r) => r.endsWith("/*") ? e.type.startsWith(r.replace("/*", "")) : r.startsWith(".") ? e.name.toLowerCase().endsWith(r.toLowerCase()) : e.type === r);
+}
+function Z(e) {
+  const a = B(e);
+  if (a.length === 0) return "許可された形式";
+  const n = /* @__PURE__ */ new Set();
+  for (const r of a) {
+    if (r === "image/*") {
+      n.add("画像");
+      continue;
+    }
+    if (N[r]) {
+      n.add(N[r]);
+      continue;
+    }
+    const l = r.match(/^image\/(.+)$/);
+    n.add(l ? l[1].toUpperCase() : r.replace(/^\./, "").toUpperCase());
+  }
+  return Array.from(n).join("、");
+}
+function ee(e) {
+  return e >= 1 ? Number.isInteger(e) ? `${e}MB` : `${e.toFixed(1)}MB` : `${Math.round(e * 1024)}KB`;
+}
+const re = J(
+  "relative w-full overflow-hidden rounded-lg bg-[var(--Surface-Tertiary)]",
+  {
+    variants: {
+      aspect: {
+        square: "aspect-square",
+        landscape: "aspect-[1200/630]"
+      },
+      size: {
+        sm: "max-w-[156px]",
+        md: "max-w-[380px]",
+        lg: "max-w-[568px]"
+      }
+    },
+    defaultVariants: {
+      aspect: "square",
+      size: "md"
+    }
+  }
+);
+function ce({
+  value: e,
+  onChange: a,
+  onBlur: n,
+  id: r,
+  name: l,
+  accept: d = "image/png,image/jpeg",
+  maxSizeMb: v = 2,
+  aspect: F,
+  size: L,
+  objectFit: U = "cover",
+  disabled: u = !1,
+  clearable: A = !0,
+  error: C,
+  onValidationError: P,
+  alt: $ = "選択した画像",
+  placeholder: R = "画像が選択されていません",
+  buttonLabel: T,
+  className: G,
+  "aria-describedby": O
+}) {
+  const V = s.useId(), b = r ?? V, w = `${b}-error`, [W, m] = s.useState(null), [k, x] = s.useState(null), [z, j] = s.useState(0), p = e != null && typeof e != "string" ? e : null;
+  s.useEffect(() => {
+    if (!p) {
+      x(null);
+      return;
+    }
+    const t = URL.createObjectURL(p);
+    return x(t), () => {
+      URL.revokeObjectURL(t);
+    };
+  }, [p]);
+  const I = typeof e == "string" && e !== "" ? e : k, f = C ?? W ?? null, c = I != null, y = (t, o, E) => {
+    j((K) => K + 1), m(E), P?.({ code: t, file: o, message: E });
+  }, M = (t) => {
+    const o = t[0];
+    if (o) {
+      if (!Y(o, d)) {
+        y(
+          "accept",
+          o,
+          `画像形式は${Z(d)}のみアップロードできます。`
+        );
+        return;
+      }
+      m(null), a(o);
+    }
+  }, S = () => {
+    j((t) => t + 1), m(null), a(null);
+  }, q = (t) => {
+    t.currentTarget.contains(t.relatedTarget) || n?.();
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      "data-slot": "image-input",
+      "data-disabled": u || void 0,
+      className: h("flex min-w-0 flex-col gap-2", G),
+      onBlur: q,
+      children: [
+        /* @__PURE__ */ g(
+          "div",
+          {
+            "data-slot": "image-input-preview",
+            className: h(
+              re({ aspect: F, size: L }),
+              c ? "border border-[var(--Border-Low-Emphasis)]" : (
+                // 未選択の破線枠は地（Surface-Tertiary）とのコントラストを確保するため High-Emphasis。
+                // Medium-Emphasis はダークモードで地と同値になり枠が消える
+                "border-2 border-dashed border-[var(--Border-High-Emphasis)]"
+              )
+            ),
+            children: [
+              c ? /* @__PURE__ */ i(
+                "img",
+                {
+                  src: I ?? void 0,
+                  alt: $,
+                  className: h(
+                    "absolute inset-0 size-full",
+                    U === "contain" ? "object-contain" : "object-cover"
+                  )
+                }
+              ) : /* @__PURE__ */ g("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-1 px-4 text-center", children: [
+                /* @__PURE__ */ i(
+                  _,
+                  {
+                    className: "size-6 text-[var(--Object-Medium-Emphasis)]",
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ i("span", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)]", children: R })
+              ] }),
+              c && A && !u && /* @__PURE__ */ i(
+                X,
+                {
+                  type: "button",
+                  variant: "overlay",
+                  size: "icon-sm",
+                  className: "absolute right-2 top-2 rounded-full",
+                  "aria-label": "画像を削除",
+                  onClick: S,
+                  children: /* @__PURE__ */ i(H, { className: "size-4", "aria-hidden": "true" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          Q,
+          {
+            id: b,
+            name: l,
+            accept: d,
+            maxSize: v * 1024 * 1024,
+            disabled: u,
+            buttonLabel: T ?? (c ? "画像を変更" : "画像を選択"),
+            placeholder: "",
+            value: [],
+            onFilesChange: M,
+            onError: (t) => y(
+              "max-size",
+              t.file,
+              `画像サイズは${ee(v)}以下にしてください。`
+            ),
+            "aria-invalid": f ? !0 : void 0,
+            "aria-describedby": [O, f ? w : null].filter(Boolean).join(" ") || void 0
+          },
+          z
+        ),
+        /* @__PURE__ */ i(D, { id: w, children: f })
+      ]
+    }
+  );
+}
+export {
+  ce as ImageInput,
+  Z as formatAcceptedFormats,
+  ee as formatMaxSize,
+  re as imageInputPreviewVariants,
+  Y as isAcceptedImageType
+};

package/dist/components/primitives/image-uploader.js

@@ -0,0 +1,69 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as m } from "../../lib/utils.js";
+import p from "iconsax-reactjs/dist/esm/Add.js";
+import u from "iconsax-reactjs/dist/esm/Trash.js";
+function g({
+  images: i = [],
+  onAdd: s,
+  onRemove: l,
+  maxImages: o = 10,
+  columns: c = 4,
+  className: n
+}) {
+  const d = i.length < o;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: m("grid gap-3", n),
+      style: {
+        gridTemplateColumns: `repeat(${Math.min(c, 4)}, minmax(0, 1fr))`
+      },
+      "data-slot": "image-uploader",
+      children: [
+        i.map((r, a) => /* @__PURE__ */ t(
+          "div",
+          {
+            className: "relative aspect-square rounded-xl bg-[var(--Surface-Tertiary)] border border-[var(--Border-Low-Emphasis)] overflow-hidden group",
+            children: [
+              /* @__PURE__ */ e(
+                "img",
+                {
+                  src: r.src,
+                  alt: r.alt,
+                  className: "absolute inset-0 size-full object-cover"
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-[var(--Primitive-Black-alpha-1000)]/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: /* @__PURE__ */ e(
+                "button",
+                {
+                  className: "size-8 rounded-full bg-[var(--Primitive-White-alpha-1000)]/80 flex items-center justify-center",
+                  "aria-label": `${r.alt}を削除`,
+                  onClick: () => l?.(a),
+                  children: /* @__PURE__ */ e(u, { size: 16, className: "text-[var(--Text-Caution)]" })
+                }
+              ) }),
+              /* @__PURE__ */ e("div", { className: "absolute top-1 left-1 size-5 rounded bg-[var(--Primitive-Black-alpha-1000)]/60 text-[var(--Primitive-White-alpha-1000)] flex items-center justify-center typo-label-xs", children: a + 1 })
+            ]
+          },
+          a
+        )),
+        d && /* @__PURE__ */ t(
+          "button",
+          {
+            className: "aspect-square rounded-xl border-2 border-dashed border-[var(--Border-Medium-Emphasis)] flex flex-col items-center justify-center gap-1 hover:border-[var(--Border-Accent-Primary)] hover:bg-[var(--Surface-Accent-Primary-Light)] transition-colors",
+            onClick: s,
+            "aria-label": "画像を追加",
+            children: [
+              /* @__PURE__ */ e(p, { size: 24, className: "text-[var(--Text-Low-Emphasis)]" }),
+              /* @__PURE__ */ e("span", { className: "typo-label-xs text-[var(--Text-Low-Emphasis)]", children: "追加" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  g as ImageUploader
+};

package/dist/components/primitives/kebab-menu.js

@@ -0,0 +1,40 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import "react";
+import { cn as o } from "../../lib/utils.js";
+import { DropdownMenu as i, DropdownMenuTrigger as l, DropdownMenuContent as s, DropdownMenuItem as c } from "../foundations/dropdown-menu.js";
+import d from "iconsax-reactjs/dist/esm/More.js";
+function f({ items: a, className: t }) {
+  return /* @__PURE__ */ n(i, { children: [
+    /* @__PURE__ */ r(l, { asChild: !0, children: /* @__PURE__ */ r(
+      "button",
+      {
+        className: o(
+          // shrink-0 必須: 長いタイトルと同じ flex row に並ぶため、既定の flex-shrink:1 だと 32px が潰れる
+          "flex items-center justify-center size-8 shrink-0 rounded-md hover:bg-[var(--Surface-Secondary)] transition-colors",
+          t
+        ),
+        "aria-label": "メニュー",
+        "data-slot": "kebab-menu",
+        children: /* @__PURE__ */ r(d, { size: 16, className: "text-[var(--Text-Low-Emphasis)]" })
+      }
+    ) }),
+    /* @__PURE__ */ r(s, { align: "end", children: a.map((e) => /* @__PURE__ */ n(
+      c,
+      {
+        onClick: e.onClick,
+        className: o(
+          "gap-2",
+          e.destructive && "text-[var(--Text-Caution)]"
+        ),
+        children: [
+          e.icon,
+          e.label
+        ]
+      },
+      e.label
+    )) })
+  ] });
+}
+export {
+  f as KebabMenu
+};

package/dist/components/primitives/list-item.js

@@ -0,0 +1,80 @@
+import { jsxs as x, Fragment as D, jsx as e } from "react/jsx-runtime";
+import * as L from "react";
+import K from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import F from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import { Switch as O } from "../foundations/switch.js";
+import { cn as g } from "../../lib/utils.js";
+function q({
+  title: p,
+  caption: o,
+  rightType: i = "arrow-right",
+  rightText: d,
+  badgeCount: m,
+  toggleChecked: y = !1,
+  onToggleChange: w,
+  leftIcon: l,
+  leftImageUrl: n,
+  size: N = "sm",
+  selected: k = !1,
+  showBorder: h = !0,
+  showBadgeDot: E = !1,
+  href: c,
+  className: S,
+  ...s
+}) {
+  const u = L.useId(), t = o ? "md" : !!(l || n) ? "lg" : N, v = !!c, r = !v && typeof s.onClick == "function", j = v || r, C = r ? (a) => {
+    s.onKeyDown?.(a), !a.defaultPrevented && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), a.currentTarget.click());
+  } : s.onKeyDown, z = t === "lg" ? "min-h-16 py-4" : t === "md" ? "min-h-14 py-2" : "min-h-11 py-2", H = t === "lg" ? "typo-body-lg text-[var(--Text-High-Emphasis)]" : "typo-body-md text-[var(--Text-High-Emphasis)]", f = g(
+    "relative flex w-full items-center gap-2 bg-[var(--Surface-Primary)] px-4 rounded-lg",
+    z,
+    k && "bg-[var(--Surface-Secondary)]",
+    j && "transition-colors hover:bg-[var(--Surface-Tertiary)]",
+    r && "cursor-pointer focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50",
+    S
+  ), b = /* @__PURE__ */ x(D, { children: [
+    n && /* @__PURE__ */ e("div", { className: "relative shrink-0 size-8 overflow-hidden rounded-[var(--radius-sm,4px)]", children: /* @__PURE__ */ e("img", { src: n, alt: "", className: "size-full object-cover" }) }),
+    l && !n && /* @__PURE__ */ e("div", { className: "shrink-0 size-5 flex items-center justify-center text-[var(--Object-High-Emphasis)]", children: l }),
+    /* @__PURE__ */ x("div", { className: "flex flex-1 min-w-0 flex-col gap-0", children: [
+      /* @__PURE__ */ e("span", { id: u, className: g("truncate", H), children: p }),
+      o && /* @__PURE__ */ e("span", { className: "truncate typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: o })
+    ] }),
+    i === "arrow-right" && /* @__PURE__ */ e(K, { size: 20, className: "shrink-0 text-[var(--Object-Low-Emphasis)]" }),
+    i === "arrow-down" && /* @__PURE__ */ e(F, { size: 20, className: "shrink-0 text-[var(--Object-Low-Emphasis)]" }),
+    i === "text" && d && /* @__PURE__ */ e("span", { className: "shrink-0 typo-body-md text-[var(--Text-High-Emphasis)]", children: d }),
+    i === "badge" && m !== void 0 && /* @__PURE__ */ e("span", { className: "flex shrink-0 h-[13px] min-w-[13px] items-center justify-center rounded-full bg-[var(--Surface-Caution,#ec0000)] px-1 typo-label-xs text-white", children: m }),
+    i === "toggle" && /* @__PURE__ */ e(
+      O,
+      {
+        checked: y,
+        onCheckedChange: w,
+        "aria-labelledby": u,
+        className: "shrink-0"
+      }
+    ),
+    E && /* @__PURE__ */ e("span", { className: "absolute left-1 top-1/2 -translate-y-1/2 size-2 rounded-full bg-[var(--Surface-Caution,#ec0000)]", "aria-hidden": !0 }),
+    h && t !== "lg" && /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-4 right-4 h-px bg-[var(--Surface-Secondary)]", "aria-hidden": !0 }),
+    h && t === "lg" && /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-4 right-4 h-px bg-[var(--Border-Medium-Emphasis)]", "aria-hidden": !0 })
+  ] });
+  return c ? /* @__PURE__ */ e(
+    "a",
+    {
+      href: c,
+      ...s,
+      className: "block rounded-lg focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50",
+      children: /* @__PURE__ */ e("div", { className: f, children: b })
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      className: f,
+      ...s,
+      role: r ? "button" : s.role,
+      tabIndex: r ? 0 : s.tabIndex,
+      onKeyDown: C,
+      children: b
+    }
+  );
+}
+export {
+  q as ListItem
+};

package/dist/components/primitives/menu-drawer.js

@@ -0,0 +1,154 @@
+import { jsxs as l, jsx as e, Fragment as t } from "react/jsx-runtime";
+import * as w from "react";
+import k from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import E from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import z from "iconsax-reactjs/dist/esm/ArrowUp2.js";
+import j from "iconsax-reactjs/dist/esm/Add.js";
+import { X as T } from "lucide-react";
+import { cn as S } from "../../lib/utils.js";
+import { Button as m } from "../foundations/button.js";
+const f = "flex min-h-12 items-center gap-1 mx-2 rounded-lg px-2 py-3 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] hover:bg-[var(--Surface-Secondary)] active:bg-[var(--Surface-Tertiary)]";
+function P({
+  userName: r,
+  isLoggedIn: n = !1,
+  hideLoginLink: x = !1,
+  sections: u,
+  banners: c,
+  onClose: d,
+  onLogin: o,
+  loginHref: v = "/security/login_link/",
+  className: N,
+  ...b
+}) {
+  const [h, y] = w.useState(
+    /* @__PURE__ */ new Set()
+  ), g = (a) => {
+    y((i) => {
+      const s = new Set(i);
+      return s.has(a) ? s.delete(a) : s.add(a), s;
+    });
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-slot": "menu-drawer",
+      className: S(
+        "flex h-full w-80 flex-col bg-[var(--Surface-Primary)]",
+        N
+      ),
+      ...b,
+      children: [
+        (n || d) && /* @__PURE__ */ l("div", { className: "flex items-center justify-between px-4 py-3", children: [
+          n ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ l("p", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: [
+            r ?? "ゲスト",
+            "さま"
+          ] }) }) : /* @__PURE__ */ e("div", {}),
+          d && /* @__PURE__ */ e(
+            m,
+            {
+              variant: "ghost",
+              size: "icon-sm",
+              onClick: d,
+              "aria-label": "メニューを閉じる",
+              children: /* @__PURE__ */ e(T, { className: "size-5" })
+            }
+          )
+        ] }),
+        !n && !x && /* @__PURE__ */ l(t, { children: [
+          /* @__PURE__ */ e("div", { className: "py-2", children: /* @__PURE__ */ e("ul", { children: /* @__PURE__ */ e("li", { children: /* @__PURE__ */ l(
+            "a",
+            {
+              href: v,
+              onClick: o ? (a) => {
+                a.preventDefault(), o();
+              } : void 0,
+              className: f,
+              children: [
+                /* @__PURE__ */ e("span", { className: "flex size-5 shrink-0 items-center justify-center text-[var(--Text-Medium-Emphasis)]", children: /* @__PURE__ */ e(j, { size: 16 }) }),
+                /* @__PURE__ */ e("span", { className: "flex-1", children: "ログイン・新規会員登録" })
+              ]
+            }
+          ) }) }) }),
+          /* @__PURE__ */ e("div", { className: "h-px w-full bg-[var(--Border-Low-Emphasis)]" })
+        ] }),
+        /* @__PURE__ */ l("div", { className: "flex-1 overflow-y-auto", children: [
+          u.map((a, i) => /* @__PURE__ */ l("div", { children: [
+            a.border && /* @__PURE__ */ e("div", { className: "h-px w-full bg-[var(--Border-Low-Emphasis)]" }),
+            /* @__PURE__ */ l("div", { className: "py-2", children: [
+              a.title && /* @__PURE__ */ e("div", { className: "px-4 pb-1 pt-2", children: /* @__PURE__ */ l("p", { className: "flex items-center gap-1 typo-label-md font-bold text-[var(--Text-High-Emphasis)]", children: [
+                a.icon && /* @__PURE__ */ e("span", { className: "flex size-5 shrink-0 items-center justify-center", children: a.icon }),
+                /* @__PURE__ */ e("span", { children: a.title })
+              ] }) }),
+              /* @__PURE__ */ e("ul", { children: a.items.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(p, { item: s }) }, s.label)) }),
+              a.itemsExtra && a.itemsExtra.length > 0 && /* @__PURE__ */ l(t, { children: [
+                h.has(i) && /* @__PURE__ */ e("ul", { children: a.itemsExtra.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(p, { item: s }) }, s.label)) }),
+                /* @__PURE__ */ e(
+                  m,
+                  {
+                    variant: "ghost",
+                    className: "flex w-full items-center justify-center gap-1 rounded-none px-4 py-3 typo-label-md text-[var(--Text-Accent-Primary)]",
+                    onClick: () => g(i),
+                    children: h.has(i) ? /* @__PURE__ */ l(t, { children: [
+                      /* @__PURE__ */ e("span", { children: "折りたたむ" }),
+                      /* @__PURE__ */ e(z, { size: 16 })
+                    ] }) : /* @__PURE__ */ l(t, { children: [
+                      /* @__PURE__ */ e("span", { children: "すべて表示" }),
+                      /* @__PURE__ */ e(k, { size: 16 })
+                    ] })
+                  }
+                )
+              ] })
+            ] })
+          ] }, i)),
+          c && c.length > 0 && /* @__PURE__ */ e("div", { className: "px-6 py-6", children: /* @__PURE__ */ e("ul", { className: "flex justify-center", children: c.map((a, i) => /* @__PURE__ */ e("li", { className: "w-1/2 max-w-28 px-2", children: /* @__PURE__ */ e(
+            "a",
+            {
+              href: a.href ?? "#",
+              className: "block overflow-hidden rounded",
+              children: /* @__PURE__ */ e(
+                "img",
+                {
+                  loading: "lazy",
+                  src: a.imageUrl,
+                  alt: a.alt,
+                  className: "h-auto w-full object-cover"
+                }
+              )
+            }
+          ) }, i)) }) })
+        ] })
+      ]
+    }
+  );
+}
+function p({ item: r }) {
+  return /* @__PURE__ */ l(
+    "a",
+    {
+      href: r.href ?? "#",
+      onClick: r.onClick,
+      className: f,
+      children: [
+        r.thumb && /* @__PURE__ */ e("picture", { className: "relative mr-1 block size-9 shrink-0 overflow-hidden rounded", children: /* @__PURE__ */ e(
+          "img",
+          {
+            loading: "lazy",
+            src: r.thumb,
+            alt: "",
+            className: "absolute inset-0 size-full object-cover"
+          }
+        ) }),
+        !r.thumb && r.icon && /* @__PURE__ */ e("span", { className: "flex size-5 shrink-0 items-center justify-center text-[var(--Text-Medium-Emphasis)]", children: r.icon }),
+        /* @__PURE__ */ l("span", { className: "flex flex-1 items-center gap-1", children: [
+          /* @__PURE__ */ e("span", { className: "flex-1", children: r.label }),
+          r.badge && /* @__PURE__ */ e("span", { className: "rounded-full bg-[var(--Brand-Cake-Orange)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: r.badge }),
+          r.subText && /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: r.subText })
+        ] }),
+        r.hasChildren && /* @__PURE__ */ e(E, { size: 16, className: "shrink-0 text-[var(--Object-High-Emphasis)]" })
+      ]
+    }
+  );
+}
+export {
+  P as MenuDrawer
+};

package/dist/components/primitives/multi-select.js

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