@ecatchup/basercms-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Catchup Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,129 @@
+# @ecatchup/basercms-ui
+
+検索付きの選択UIコンポーネント集。React 19 以降で動作し、react / react-dom 以外の依存を持ちません。
+
+## インストール
+
+```bash
+npm install @ecatchup/basercms-ui
+```
+
+## 使い方
+
+```tsx
+import { SearchSelect, MultiSelectField } from '@ecatchup/basercms-ui';
+import '@ecatchup/basercms-ui/style.css';
+import type { SelectOption } from '@ecatchup/basercms-ui';
+
+const options: SelectOption[] = [
+  { id: '1', label: '管理者', sublabel: 'managers' },
+  { id: '2', label: '利用者', sublabel: 'employee' },
+];
+
+// 単一選択
+<SearchSelect options={options} value={value} onChange={setValue} emptyLabel="指定なし" />
+
+// 複数選択（タグ形式）
+<MultiSelectField options={options} value={selected} onChange={setSelected} />
+```
+
+## コンポーネント
+
+| 名前 | 用途 |
+| --- | --- |
+| `SearchSelect` | 検索して1つ選ぶ |
+| `MultiSelectField` | 追加ボタン＋選択済みタグ＋モーダルを一体にしたフォーム部品 |
+| `MultiSelectDialog` | 複数選択のモーダル単体 |
+| `MultiSelectPicker` | 検索＋一覧＋選択済みタグの中身のみ（ページ直置き用） |
+
+`SearchSelect` は `searchPlaceholder`（検索欄の placeholder、既定「検索...」）を受け取れます。
+
+## 選択肢の型
+
+```ts
+type SelectOption = {
+  id: string;
+  label: string;      // 表示名
+  sublabel?: string;  // 一覧行にのみ括弧付きで表示。検索対象に含まれる
+  disabled?: boolean;
+};
+```
+
+`disabled: true` の選択肢は、キーボード操作・クリックのどちらでも選択できません。該当行には `data-disabled` / `aria-disabled` が付与されます。
+
+データ取得は行いません。`options` は呼び出し側が用意してください。
+
+## 複数選択の上限
+
+`MultiSelectPicker` / `MultiSelectDialog` / `MultiSelectField` は `maxSelected` を受け取れます。`MultiSelectField` ではこれを**累計の選択件数の上限**として扱い、上限に達すると追加ボタンが無効になります。一方、`MultiSelectPicker` / `MultiSelectDialog` を単体で使う場合、`maxSelected` はその部品自身の選択状態（`value` / `initialValue`）に対する上限であり、それ以上の追加ができなくなります。
+
+## モーダルの挙動（MultiSelectDialog / MultiSelectField）
+
+モーダルは Escape キー・閉じるボタン（×）・キャンセルボタンで閉じます。誤操作防止のため、オーバーレイ（背景）のクリックでは閉じません。開いている間はフォーカスがモーダル内に閉じ込められます（Tab / Shift+Tab で外へ出ません）。
+
+## ボタンのクラス・属性（既定で baserCMS のボタンスタイルが当たります）
+
+`MultiSelectField` の `addButtonProps`、`MultiSelectDialog` の `submitButtonProps` /
+`cancelButtonProps` は、既定で以下の値になっています（baserCMS の `.bca-btn` を
+前提にしています）。
+
+| prop | 既定値 |
+| --- | --- |
+| `addButtonProps`（MultiSelectField） | `{ className: 'bca-btn', 'data-bca-btn-type': 'add' }` |
+| `submitButtonProps`（MultiSelectDialog） | `{ className: 'bca-btn', 'data-bca-btn-type': 'save' }` |
+| `cancelButtonProps`（MultiSelectDialog） | `{ className: 'bca-btn' }` |
+
+**既定値は「置き換え」です。マージではありません。** 何か1つでも渡すと、既定値は使われず渡した内容がそのまま使われます。既定のクラス・属性が不要な場合は空オブジェクト（`{}`）を渡してください。ただしこれで置き換わるのは追加のクラス・属性だけで、部品自身の BEM クラス（`bca-multi-select-field__add` 等）は常に付くため、`{}` を渡しても部品同梱の CSS は効き続けます（baserCMS のボタンスタイルだけ外したい場合に使えます）。`MultiSelectField` に渡した `submitButtonProps` / `cancelButtonProps` はモーダルへそのまま転送されます。`type` / `onClick` / `disabled` は部品側が制御するため渡せません。
+
+```tsx
+// baserCMS 以外の見た目にしたい場合
+<MultiSelectField
+  addButtonProps={{ className: 'my-add-button' }}
+  submitButtonProps={{ className: 'my-submit-button' }}
+  cancelButtonProps={{ className: 'my-cancel-button' }}
+  ...
+/>
+
+// 何も付けたくない場合
+<MultiSelectField
+  addButtonProps={{}}
+  submitButtonProps={{}}
+  cancelButtonProps={{}}
+  ...
+/>
+```
+
+## フォーム連携
+
+`name` を渡すと hidden input を描画します。
+
+```tsx
+<SearchSelect name="data[User][approver_id]" ... />       // hidden 1つ
+<MultiSelectField name="data[User][group_ids][]" ... />   // 選択件数分の hidden
+```
+
+## テーマ
+
+CSS 変数を上書きしてください。
+
+| 変数 | 既定値 |
+| --- | --- |
+| `--bca-accent` | `#D4EDC9` |
+| `--bca-accent-hover` | `#E9F7E3` |
+| `--bca-border` | `#ccc` |
+| `--bca-radius` | `4px` |
+| `--bca-font-size` | `14px` |
+| `--bca-z-index` | `9999` |
+
+## 開発
+
+```bash
+npm install
+npm run dev    # 動作確認用デモ
+npm test       # テスト
+npm run build  # dist を生成
+```
+
+## ライセンス
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,106 @@
+import { ButtonHTMLAttributes } from 'react';
+import { JSX } from 'react';
+
+/**
+ * 部品内のボタン（追加ボタン、モーダルの決定/キャンセルボタン）へ、利用側から
+ * 任意のクラス・data 属性等を渡すための型。
+ *
+ * `type` / `onClick` / `disabled` は部品側が制御する（type="button" の強制、開閉の
+ * ハンドラ、無効化判定）ため除外している。baserCMS 等、既存のデザインシステムの
+ * ボタンスタイル（クラス＋ data 属性）を当てたい場合に使う。
+ */
+export declare type ButtonPassthroughProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'onClick' | 'disabled'> & {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+
+export declare const MultiSelectDialog: ({ open, title, options, initialValue, onSubmit, onCancel, submitLabel, cancelLabel, requireSelection, submitButtonProps, cancelButtonProps, className, ...pickerProps }: MultiSelectDialogProps) => JSX.Element | null;
+
+export declare type MultiSelectDialogProps = Pick<MultiSelectPickerProps, 'options' | 'searchPlaceholder' | 'noResultsText' | 'listHeight' | 'maxSelected' | 'className'> & {
+    open: boolean;
+    title?: string;
+    initialValue?: SelectOption[];
+    onSubmit: (selected: SelectOption[]) => void;
+    onCancel: () => void;
+    submitLabel?: string;
+    cancelLabel?: string;
+    /** true のとき、未選択なら決定ボタンを無効にする */
+    requireSelection?: boolean;
+    /** 決定ボタンへ渡す任意のクラス・属性（baserCMS 等のボタンスタイル用） */
+    submitButtonProps?: ButtonPassthroughProps;
+    /** キャンセルボタンへ渡す任意のクラス・属性（baserCMS 等のボタンスタイル用） */
+    cancelButtonProps?: ButtonPassthroughProps;
+};
+
+/**
+ * 「追加ボタン → モーダルで選択 → 決定 → タグとして並ぶ → × で削除」
+ * をひとまとめにしたフォーム部品
+ */
+export declare const MultiSelectField: ({ options, value, onChange, name, addButtonLabel, dialogTitle, emptyText, disabled, className, maxSelected, submitLabel, cancelLabel, requireSelection, addButtonProps, submitButtonProps, cancelButtonProps, ...pickerProps }: MultiSelectFieldProps) => JSX.Element;
+
+export declare type MultiSelectFieldProps = Pick<MultiSelectPickerProps, 'options' | 'searchPlaceholder' | 'noResultsText' | 'listHeight' | 'maxSelected' | 'className'> & {
+    value: SelectOption[];
+    onChange: (selected: SelectOption[]) => void;
+    /** 指定時、選択件数分の hidden input を描画する */
+    name?: string;
+    addButtonLabel?: string;
+    dialogTitle?: string;
+    emptyText?: string;
+    disabled?: boolean;
+    submitLabel?: string;
+    cancelLabel?: string;
+    requireSelection?: boolean;
+    /** 追加ボタンへ渡す任意のクラス・属性（baserCMS 等のボタンスタイル用） */
+    addButtonProps?: ButtonPassthroughProps;
+    /** モーダルの決定ボタンへそのまま転送する（baserCMS 等のボタンスタイル用） */
+    submitButtonProps?: ButtonPassthroughProps;
+    /** モーダルのキャンセルボタンへそのまま転送する（baserCMS 等のボタンスタイル用） */
+    cancelButtonProps?: ButtonPassthroughProps;
+};
+
+export declare const MultiSelectPicker: ({ options, value, onChange, searchPlaceholder, noResultsText, listHeight, maxSelected, className, }: MultiSelectPickerProps) => JSX.Element;
+
+export declare type MultiSelectPickerProps = {
+    options: SelectOption[];
+    value: SelectOption[];
+    onChange: (selected: SelectOption[]) => void;
+    searchPlaceholder?: string;
+    noResultsText?: string;
+    listHeight?: number | string;
+    maxSelected?: number;
+    className?: string;
+};
+
+export declare const SearchSelect: ({ options, value, onChange, name, placeholder, emptyLabel, clearable, disabled, noResultsText, searchPlaceholder, dropdownPlacement, className, }: SearchSelectProps) => JSX.Element;
+
+export declare type SearchSelectProps = {
+    options: SelectOption[];
+    value: string | null;
+    onChange: (id: string | null) => void;
+    /** 指定時、hidden input を描画する */
+    name?: string;
+    placeholder?: string;
+    /** 指定時、「指定なし」相当の選択肢を先頭に出す */
+    emptyLabel?: string;
+    clearable?: boolean;
+    disabled?: boolean;
+    noResultsText?: string;
+    /** 検索欄の placeholder */
+    searchPlaceholder?: string;
+    dropdownPlacement?: 'auto' | 'top' | 'bottom';
+    className?: string;
+};
+
+/**
+ * 選択肢の共通型
+ *
+ * sublabel は一覧行にのみ括弧付きで表示し、検索対象に含める。
+ * 選択済みタグには表示しない。
+ */
+export declare type SelectOption = {
+    id: string;
+    label: string;
+    sublabel?: string;
+    disabled?: boolean;
+};
+
+export { }

package/dist/index.js

@@ -0,0 +1,365 @@
+import { jsxs as g, jsx as c } from "react/jsx-runtime";
+import { useMemo as P, useEffect as C, useState as D, useLayoutEffect as U, useRef as $, useId as j } from "react";
+const q = (t, e) => {
+  const s = e.trim().toLowerCase();
+  return s ? t.filter(
+    (i) => i.label.toLowerCase().includes(s) || (i.sublabel ?? "").toLowerCase().includes(s)
+  ) : t;
+}, F = (t, e) => P(() => q(t, e), [t, e]), Q = (t, e, s) => {
+  C(() => {
+    if (!e) return;
+    const i = (n) => {
+      t.current && !t.current.contains(n.target) && s();
+    };
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, [t, e, s]);
+}, H = (t, e, s, i = 240) => {
+  const [n, r] = D(s === "top" ? "top" : "bottom");
+  return U(() => {
+    if (!e) return;
+    if (s !== "auto") {
+      r(s);
+      return;
+    }
+    const m = t.current;
+    if (!m) return;
+    const o = m.getBoundingClientRect(), f = window.innerHeight - o.bottom;
+    r(f < i && o.top > f ? "top" : "bottom");
+  }, [t, e, s, i]), n;
+}, R = "", V = ({
+  options: t,
+  value: e,
+  onChange: s,
+  name: i,
+  placeholder: n = "選択してください",
+  emptyLabel: r,
+  clearable: m = !0,
+  disabled: o = !1,
+  noResultsText: f = "一致する項目がありません",
+  searchPlaceholder: p = "検索...",
+  dropdownPlacement: k = "auto",
+  className: w = ""
+}) => {
+  const [d, b] = D(!1), [v, l] = D(""), [u, h] = D(0), y = $(null), x = $(null), S = $(null), M = j(), I = (a) => `${M}-option-${a || "__empty__"}`, L = F(t, v), E = r ? [{ id: R, label: r }, ...L] : L, _ = t.find((a) => a.id === e) ?? null;
+  Q(y, d, () => b(!1));
+  const O = H(y, d, k);
+  C(() => {
+    d || (l(""), h(0));
+  }, [d]), C(() => {
+    d && x.current?.focus();
+  }, [d]);
+  const A = (a) => {
+    s(a === R ? null : a), b(!1), S.current?.focus();
+  }, T = (a) => {
+    if (!o && !a.nativeEvent.isComposing && !(a.key !== "Escape" && a.target.closest(".bca-search-select__clear"))) {
+      if (a.key === "Escape") {
+        b(!1), S.current?.focus();
+        return;
+      }
+      if (!d) {
+        (a.key === "ArrowDown" || a.key === "Enter") && (a.preventDefault(), b(!0));
+        return;
+      }
+      if (a.key === "ArrowDown")
+        a.preventDefault(), h((N) => Math.min(N + 1, E.length - 1));
+      else if (a.key === "ArrowUp")
+        a.preventDefault(), h((N) => Math.max(N - 1, 0));
+      else if (a.key === "Enter") {
+        a.preventDefault();
+        const N = E[u];
+        N && !N.disabled && A(N.id);
+      }
+    }
+  };
+  return /* @__PURE__ */ g("div", { ref: y, className: `bca-search-select ${w}`.trim(), onKeyDown: T, children: [
+    i && /* @__PURE__ */ c("input", { type: "hidden", name: i, value: e ?? "" }),
+    /* @__PURE__ */ g(
+      "div",
+      {
+        ref: S,
+        role: "combobox",
+        "aria-expanded": d,
+        "aria-haspopup": "listbox",
+        "aria-disabled": o,
+        "aria-controls": d ? M : void 0,
+        "aria-activedescendant": d && E[u] ? I(E[u].id) : void 0,
+        tabIndex: o ? -1 : 0,
+        className: "bca-search-select__trigger",
+        "data-disabled": o || void 0,
+        onClick: () => !o && b(!d),
+        children: [
+          /* @__PURE__ */ c("span", { className: _ ? "bca-search-select__value" : "bca-search-select__placeholder", children: _ ? _.label : n }),
+          !o && m && e ? /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              className: "bca-search-select__clear",
+              "aria-label": "選択を解除",
+              onClick: (a) => {
+                a.stopPropagation(), s(null);
+              },
+              children: "×"
+            }
+          ) : /* @__PURE__ */ c("span", { className: "bca-search-select__arrow", "aria-hidden": "true", children: "▼" })
+        ]
+      }
+    ),
+    d && /* @__PURE__ */ g("div", { className: "bca-search-select__dropdown", "data-placement": O, children: [
+      /* @__PURE__ */ c("div", { className: "bca-search-select__search", children: /* @__PURE__ */ c(
+        "input",
+        {
+          ref: x,
+          type: "text",
+          className: "bca-search-select__search-input",
+          placeholder: p,
+          value: v,
+          onChange: (a) => {
+            l(a.target.value), h(0);
+          },
+          onClick: (a) => a.stopPropagation()
+        }
+      ) }),
+      /* @__PURE__ */ c("ul", { role: "listbox", id: M, className: "bca-search-select__list", children: E.length > 0 ? E.map((a, N) => /* @__PURE__ */ g(
+        "li",
+        {
+          id: I(a.id),
+          role: "option",
+          "aria-selected": a.id === (e ?? R),
+          "aria-disabled": a.disabled || void 0,
+          className: "bca-search-select__option",
+          "data-active": N === u || void 0,
+          "data-selected": a.id === (e ?? R) || void 0,
+          "data-disabled": a.disabled || void 0,
+          onMouseEnter: () => !a.disabled && h(N),
+          onClick: () => !a.disabled && A(a.id),
+          children: [
+            /* @__PURE__ */ c("span", { className: "bca-search-select__label", children: a.label }),
+            a.sublabel && /* @__PURE__ */ c("span", { className: "bca-search-select__sublabel", children: `(${a.sublabel})` })
+          ]
+        },
+        a.id || "__empty__"
+      )) : /* @__PURE__ */ c("li", { className: "bca-search-select__no-results", children: f }) })
+    ] })
+  ] });
+}, K = ({ items: t, onRemove: e, emptyText: s = "選択されていません", disabled: i = !1 }) => t.length === 0 ? /* @__PURE__ */ c("span", { className: "bca-selected-tags__empty", children: s }) : /* @__PURE__ */ c("ul", { className: "bca-selected-tags", children: t.map((n) => /* @__PURE__ */ g("li", { className: "bca-selected-tags__item", children: [
+  /* @__PURE__ */ c("span", { className: "bca-selected-tags__label", children: n.label }),
+  /* @__PURE__ */ c(
+    "button",
+    {
+      type: "button",
+      className: "bca-selected-tags__remove",
+      "aria-label": `${n.label} を削除`,
+      disabled: i,
+      onClick: () => e(n.id),
+      children: "×"
+    }
+  )
+] }, n.id)) }), Y = ({
+  options: t,
+  value: e,
+  onChange: s,
+  searchPlaceholder: i = "検索...",
+  noResultsText: n = "選択可能な項目はありません",
+  listHeight: r = 350,
+  maxSelected: m,
+  className: o = ""
+}) => {
+  const [f, p] = D(""), k = new Set(e.map((l) => l.id)), w = F(t, f).filter((l) => !k.has(l.id)), d = m !== void 0 && e.length >= m, b = (l) => {
+    d || l.disabled || s([...e, l]);
+  }, v = (l) => {
+    s(e.filter((u) => u.id !== l));
+  };
+  return /* @__PURE__ */ g("div", { className: `bca-multi-select-picker ${o}`.trim(), children: [
+    /* @__PURE__ */ g("div", { className: "bca-multi-select-picker__search", children: [
+      /* @__PURE__ */ c(
+        "input",
+        {
+          type: "text",
+          className: "bca-multi-select-picker__search-input",
+          placeholder: i,
+          value: f,
+          onChange: (l) => p(l.target.value)
+        }
+      ),
+      f && /* @__PURE__ */ c(
+        "button",
+        {
+          type: "button",
+          className: "bca-multi-select-picker__search-clear",
+          "aria-label": "検索語をクリア",
+          onClick: () => p(""),
+          children: "×"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c("div", { className: "bca-multi-select-picker__list-wrapper", style: { maxHeight: r }, children: /* @__PURE__ */ c("ul", { className: "bca-multi-select-picker__list", role: "listbox", "aria-multiselectable": "true", "aria-label": "選択可能な項目", children: w.length > 0 ? w.map((l) => {
+      const u = l.disabled || d;
+      return /* @__PURE__ */ g(
+        "li",
+        {
+          className: "bca-multi-select-picker__option",
+          role: "option",
+          "aria-selected": !1,
+          "aria-disabled": u || void 0,
+          "data-disabled": u || void 0,
+          tabIndex: u ? -1 : 0,
+          onClick: () => b(l),
+          onKeyDown: (h) => {
+            h.nativeEvent.isComposing || (h.key === "Enter" || h.key === " ") && (h.preventDefault(), b(l));
+          },
+          children: [
+            /* @__PURE__ */ c("span", { className: "bca-multi-select-picker__label", children: l.label }),
+            l.sublabel && /* @__PURE__ */ c("span", { className: "bca-multi-select-picker__sublabel", children: `(${l.sublabel})` })
+          ]
+        },
+        l.id
+      );
+    }) : /* @__PURE__ */ c("li", { className: "bca-multi-select-picker__no-results", children: n }) }) }),
+    /* @__PURE__ */ c("div", { className: "bca-multi-select-picker__selected", children: /* @__PURE__ */ c(K, { items: e, onRemove: v }) })
+  ] });
+}, z = 'a[href], button, input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])', B = (t) => "disabled" in t && t.disabled, G = (t) => Array.from(t.querySelectorAll(z)).filter((e) => !B(e)), J = (t, e) => {
+  C(() => {
+    if (!e) return;
+    const s = t.current;
+    if (!s) return;
+    const i = (n) => {
+      if (n.key !== "Tab") return;
+      const r = G(s);
+      if (r.length === 0) return;
+      const m = r[0], o = r[r.length - 1];
+      n.shiftKey ? (document.activeElement === m || !s.contains(document.activeElement)) && (n.preventDefault(), o.focus()) : (document.activeElement === o || !s.contains(document.activeElement)) && (n.preventDefault(), m.focus());
+    };
+    return s.addEventListener("keydown", i), () => s.removeEventListener("keydown", i);
+  }, [t, e]);
+}, W = ({
+  open: t,
+  title: e = "選択",
+  options: s,
+  initialValue: i,
+  onSubmit: n,
+  onCancel: r,
+  submitLabel: m = "決定",
+  cancelLabel: o = "キャンセル",
+  requireSelection: f = !0,
+  submitButtonProps: p = { className: "bca-btn", "data-bca-btn-type": "save" },
+  cancelButtonProps: k = { className: "bca-btn" },
+  className: w = "",
+  ...d
+}) => {
+  const [b, v] = D(i ?? []), l = $(null), u = $(null);
+  if (C(() => {
+    t && v(i ?? []);
+  }, [t]), C(() => {
+    if (!t) return;
+    const y = (x) => {
+      x.isComposing || x.key === "Escape" && r();
+    };
+    return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
+  }, [t, r]), C(() => {
+    t ? (u.current = document.activeElement, l.current?.focus()) : (u.current?.focus(), u.current = null);
+  }, [t]), J(l, t), !t) return null;
+  const h = !f || b.length > 0;
+  return /* @__PURE__ */ c("div", { className: "bca-multi-select-dialog__overlay", children: /* @__PURE__ */ g(
+    "div",
+    {
+      ref: l,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": e,
+      tabIndex: -1,
+      className: `bca-multi-select-dialog ${w}`.trim(),
+      children: [
+        /* @__PURE__ */ g("div", { className: "bca-multi-select-dialog__header", children: [
+          /* @__PURE__ */ c("span", { className: "bca-multi-select-dialog__title", children: e }),
+          /* @__PURE__ */ c("button", { type: "button", className: "bca-multi-select-dialog__close", "aria-label": "閉じる", onClick: r, children: "×" })
+        ] }),
+        /* @__PURE__ */ c("div", { className: "bca-multi-select-dialog__body", children: /* @__PURE__ */ c(Y, { options: s, value: b, onChange: v, ...d }) }),
+        /* @__PURE__ */ g("div", { className: "bca-multi-select-dialog__footer", children: [
+          /* @__PURE__ */ c(
+            "button",
+            {
+              ...k,
+              type: "button",
+              className: `bca-multi-select-dialog__button ${k?.className ?? ""}`.trim(),
+              onClick: r,
+              children: o
+            }
+          ),
+          /* @__PURE__ */ c(
+            "button",
+            {
+              ...p,
+              type: "button",
+              className: `bca-multi-select-dialog__button bca-multi-select-dialog__button--primary ${p?.className ?? ""}`.trim(),
+              disabled: !h,
+              onClick: () => n(b),
+              children: m
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}, ee = ({
+  options: t,
+  value: e,
+  onChange: s,
+  name: i,
+  addButtonLabel: n = "追加",
+  dialogTitle: r = "選択",
+  emptyText: m = "選択されていません",
+  disabled: o = !1,
+  className: f = "",
+  maxSelected: p,
+  submitLabel: k,
+  cancelLabel: w,
+  requireSelection: d,
+  addButtonProps: b = { className: "bca-btn", "data-bca-btn-type": "add" },
+  submitButtonProps: v,
+  cancelButtonProps: l,
+  ...u
+}) => {
+  const [h, y] = D(!1), x = new Set(e.map((_) => _.id)), S = t.filter((_) => !x.has(_.id)), M = p !== void 0 ? Math.max(0, p - e.length) : void 0, I = p !== void 0 && e.length >= p, L = (_) => {
+    s(e.filter((O) => O.id !== _));
+  }, E = (_) => {
+    s([...e, ..._]), y(!1);
+  };
+  return /* @__PURE__ */ g("div", { className: `bca-multi-select-field ${f}`.trim(), children: [
+    i && e.map((_) => /* @__PURE__ */ c("input", { type: "hidden", name: i, value: _.id }, _.id)),
+    /* @__PURE__ */ c("div", { className: "bca-multi-select-field__tags", children: /* @__PURE__ */ c(K, { items: e, onRemove: L, emptyText: m, disabled: o }) }),
+    /* @__PURE__ */ c("div", { className: "bca-multi-select-field__actions", children: /* @__PURE__ */ c(
+      "button",
+      {
+        ...b,
+        type: "button",
+        className: `bca-multi-select-field__add ${b?.className ?? ""}`.trim(),
+        disabled: o || I,
+        onClick: () => y(!0),
+        children: n
+      }
+    ) }),
+    /* @__PURE__ */ c(
+      W,
+      {
+        open: h,
+        title: r,
+        options: S,
+        onSubmit: E,
+        onCancel: () => y(!1),
+        maxSelected: M,
+        submitLabel: k,
+        cancelLabel: w,
+        requireSelection: d,
+        submitButtonProps: v,
+        cancelButtonProps: l,
+        ...u
+      }
+    )
+  ] });
+};
+export {
+  W as MultiSelectDialog,
+  ee as MultiSelectField,
+  Y as MultiSelectPicker,
+  V as SearchSelect
+};

package/dist/style.css

@@ -0,0 +1 @@
+:root{--bca-accent: #D4EDC9;--bca-accent-hover: #E9F7E3;--bca-border: #ccc;--bca-radius: 4px;--bca-font-size: 14px;--bca-z-index: 9999}.bca-selected-tags{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:0;padding:0}.bca-selected-tags__empty{color:#999;font-size:var(--bca-font-size)}.bca-selected-tags__item{display:flex;align-items:center;padding:5px 10px;background-color:var(--bca-accent);border-radius:15px;font-size:var(--bca-font-size)}.bca-selected-tags__remove{margin-left:5px}:where(.bca-selected-tags__remove){font:inherit;border:none;background:transparent;font-weight:700;cursor:pointer}.bca-selected-tags__remove:disabled{cursor:not-allowed;opacity:.5}.bca-search-select{position:relative;width:100%;font-size:var(--bca-font-size)}.bca-search-select__trigger{position:relative;display:flex;align-items:center;box-sizing:border-box;width:100%;padding:4px 32px 4px 8px;border:1px solid var(--bca-border);border-radius:var(--bca-radius);background-color:#fff;cursor:pointer}.bca-search-select__trigger[data-disabled]{background-color:#f4f4f4;color:#999;cursor:not-allowed}.bca-search-select__value,.bca-search-select__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bca-search-select__placeholder{color:#999}.bca-search-select__clear,.bca-search-select__arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#999}.bca-search-select__clear{border:none;background:transparent;font-weight:700;cursor:pointer;padding:0 4px}.bca-search-select__arrow{font-size:12px;pointer-events:none}.bca-search-select__dropdown{position:absolute;left:0;width:100%;box-sizing:border-box;z-index:var(--bca-z-index);background-color:#fff;border:1px solid var(--bca-border);border-radius:var(--bca-radius);box-shadow:0 2px 6px #00000026;max-height:240px;display:flex;flex-direction:column}.bca-search-select__dropdown[data-placement=bottom]{top:100%}.bca-search-select__dropdown[data-placement=top]{bottom:100%}.bca-search-select__search{padding:8px;border-bottom:1px solid #eee}.bca-search-select__search-input{font:inherit;box-sizing:border-box;width:100%;padding:4px 8px;border:1px solid var(--bca-border);border-radius:var(--bca-radius)}.bca-search-select__list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}.bca-search-select__option{padding:6px 12px;cursor:pointer;border-bottom:1px solid #f9f9f9}.bca-search-select__option[data-active]{background-color:var(--bca-accent-hover)}.bca-search-select__option[data-selected]{background-color:var(--bca-accent);font-weight:700}.bca-search-select__option[data-disabled]{color:#999;cursor:not-allowed;background-color:transparent}.bca-search-select__sublabel{margin-left:4px;font-size:.8em;color:#666}.bca-search-select__no-results{padding:8px 12px;color:#999;text-align:center}.bca-multi-select-picker{font-size:var(--bca-font-size)}.bca-multi-select-picker__search{position:relative;margin-bottom:10px}.bca-multi-select-picker__search-input{font:inherit;box-sizing:border-box;width:100%;padding:4px 30px 4px 8px;border:1px solid var(--bca-border);border-radius:var(--bca-radius)}.bca-multi-select-picker__search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:transparent;font-size:16px;color:#999;cursor:pointer}.bca-multi-select-picker__list-wrapper{overflow-y:auto;border:1px solid var(--bca-border);border-radius:var(--bca-radius)}.bca-multi-select-picker__list{list-style:none;margin:0;padding:0}.bca-multi-select-picker__option{padding:8px 10px;border-bottom:1px solid #eee;cursor:pointer}.bca-multi-select-picker__option:hover{background-color:var(--bca-accent-hover)}.bca-multi-select-picker__option:focus-visible{outline:2px solid var(--bca-accent-hover);outline-offset:-2px;background-color:var(--bca-accent-hover)}.bca-multi-select-picker__option[data-disabled]{color:#999;cursor:not-allowed}.bca-multi-select-picker__option[data-disabled]:hover{background-color:transparent}.bca-multi-select-picker__sublabel{margin-left:4px;font-size:.8em;color:#666}.bca-multi-select-picker__no-results{padding:10px;color:#999;text-align:center}.bca-multi-select-picker__selected{margin-top:10px;padding:10px;border:1px solid var(--bca-border);border-radius:var(--bca-radius);min-height:40px;max-height:120px;overflow-y:auto}.bca-multi-select-dialog__overlay{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;background-color:#0000004d;z-index:var(--bca-z-index)}.bca-multi-select-dialog{width:500px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);display:flex;flex-direction:column;background-color:#fff;border:1px solid var(--bca-border);border-radius:var(--bca-radius);box-shadow:0 4px 16px #0003;font-size:var(--bca-font-size)}.bca-multi-select-dialog:focus{outline:none}.bca-multi-select-dialog__header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--bca-border);background-color:#f5f5f5}.bca-multi-select-dialog__title{font-weight:700}:where(.bca-multi-select-dialog__close){font:inherit;border:none;background:transparent;font-size:18px;cursor:pointer;color:#666}.bca-multi-select-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:1em}.bca-multi-select-dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:8px 12px;border-top:1px solid var(--bca-border)}:where(.bca-multi-select-dialog__button){font:inherit;padding:4px 16px;border:1px solid var(--bca-border);border-radius:var(--bca-radius);background-color:#fff;cursor:pointer}:where(.bca-multi-select-dialog__button--primary){background-color:var(--bca-accent)}.bca-multi-select-dialog__button:disabled{opacity:.5;cursor:not-allowed}.bca-multi-select-field{font-size:var(--bca-font-size)}.bca-multi-select-field__tags{padding:10px;border:1px solid var(--bca-border);border-radius:var(--bca-radius);min-height:40px;box-sizing:border-box}.bca-multi-select-field__actions{margin-top:8px}:where(.bca-multi-select-field__add){font:inherit;padding:4px 16px;border:1px solid var(--bca-border);border-radius:var(--bca-radius);background-color:#fff;cursor:pointer}.bca-multi-select-field__add:disabled{opacity:.5;cursor:not-allowed}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@ecatchup/basercms-ui",
+  "version": "0.1.0",
+  "description": "検索付きの選択UIコンポーネント集",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ecatchup/basercms-ui.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": ["dist"],
+  "sideEffects": ["**/*.css"],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@types/node": "^24.13.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "jsdom": "^25.0.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.2.4"
+  }
+}