@takashi145/react-multi-select-buttons 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 takashu
+
+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,162 @@
+# @takashi145/react-multi-select-buttons
+
+Button-based multi-select components for React.
+
+## Installation
+
+```bash
+npm install @takashi145/@takashi145/react-multi-select-buttons
+```
+
+## Components
+
+### `MultiSelectButtons`
+
+A generic multi-select component that works with any value type.
+
+```tsx
+import { useState } from 'react'
+import { MultiSelectButtons } from '@takashi145/react-multi-select-buttons'
+import type { MultiSelectButtonItem } from '@takashi145/react-multi-select-buttons'
+
+const items: MultiSelectButtonItem<string>[] = [
+  { key: 'apple', label: 'Apple', value: 'apple' },
+  { key: 'banana', label: 'Banana', value: 'banana' },
+  { key: 'orange', label: 'Orange', value: 'orange' },
+]
+
+function App() {
+  const [selected, setSelected] = useState<MultiSelectButtonItem<string>[]>([])
+
+  return (
+    <MultiSelectButtons
+      items={items}
+      selectedItems={selected}
+      maxSelection={2}
+      onChange={setSelected}
+    />
+  )
+}
+```
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `items` | `MultiSelectButtonItem<T>[]` | Yes | List of selectable items |
+| `selectedItems` | `MultiSelectButtonItem<T>[]` | Yes | Currently selected items |
+| `maxSelection` | `number` | Yes | Maximum number of items that can be selected |
+| `onChange` | `(items: MultiSelectButtonItem<T>[]) => void` | Yes | Called when selection changes |
+| `renderValue` | `(params: RenderValueParams<T>) => ReactNode` | No | Custom button renderer |
+| `onSelectionLimitReached` | `(item: MultiSelectButtonItem<T>) => void` | No | Called when user taps an unselected item but the limit is already reached |
+| `onDisabledClick` | `(item: MultiSelectButtonItem<T>) => void` | No | Called when user taps a disabled item |
+| `className` | `string` | No | Class name for the container element |
+| `style` | `CSSProperties` | No | Inline style for the container element |
+
+---
+
+### `NumberMultiSelectButtons`
+
+A convenience component for selecting numbers within a range.
+
+```tsx
+import { useState } from 'react'
+import { NumberMultiSelectButtons } from '@takashi145/react-multi-select-buttons'
+
+function App() {
+  const [selected, setSelected] = useState<number[]>([])
+
+  return (
+    <NumberMultiSelectButtons
+      min={1}
+      max={10}
+      selectedValues={selected}
+      maxSelection={3}
+      onChange={setSelected}
+    />
+  )
+}
+```
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `min` | `number` | Yes | Minimum value (inclusive) |
+| `max` | `number` | Yes | Maximum value (inclusive) |
+| `step` | `number` | No | Step between values (default: `1`) |
+| `selectedValues` | `number[]` | Yes | Currently selected values |
+| `maxSelection` | `number` | Yes | Maximum number of values that can be selected |
+| `onChange` | `(values: number[]) => void` | Yes | Called when selection changes |
+| `getValueLabel` | `(value: number, index: number) => string` | No | Custom label for each value |
+| `isValueDisabled` | `(value: number, index: number) => boolean` | No | Whether a value should be disabled |
+| `renderValue` | `(params: RenderValueParams<number>) => ReactNode` | No | Custom button renderer |
+| `onSelectionLimitReached` | `(value: number) => void` | No | Called when user taps an unselected value but the limit is already reached |
+| `onDisabledClick` | `(value: number) => void` | No | Called when user taps a disabled value |
+| `className` | `string` | No | Class name for the container element |
+| `style` | `CSSProperties` | No | Inline style for the container element |
+
+---
+
+## Types
+
+### `MultiSelectButtonItem<T>`
+
+```ts
+type MultiSelectButtonItem<T> = {
+  key: Key
+  label: string
+  value: T
+  disabled?: boolean
+}
+```
+
+### `RenderValueParams<T>`
+
+```ts
+type RenderValueParams<T> = {
+  item: MultiSelectButtonItem<T>
+  value: T
+  isSelected: boolean
+  isDisabled: boolean
+  isInteractive: boolean
+  selectedOrder: number | null
+  onClick: () => void
+}
+```
+
+---
+
+## Custom Rendering
+
+Use the `renderValue` prop to fully replace the default button appearance.
+
+```tsx
+<MultiSelectButtons
+  items={items}
+  selectedItems={selected}
+  maxSelection={3}
+  onChange={setSelected}
+  renderValue={({ item, isSelected, isDisabled, onClick }) => (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={isDisabled}
+      style={{
+        width: '100%',
+        padding: '14px 16px',
+        borderRadius: 999,
+        border: `1px solid ${isSelected ? '#111827' : '#d1d5db'}`,
+        background: isSelected ? '#111827' : '#ffffff',
+        color: isSelected ? '#ffffff' : '#111827',
+      }}
+    >
+      {item.label}
+    </button>
+  )}
+/>
+```
+
+## License
+
+MIT

package/dist/components/DefaultMultiSelectButton.d.ts

@@ -0,0 +1,6 @@
+import { RenderValueParams } from '../types';
+type DefaultMultiSelectButtonProps<T> = RenderValueParams<T> & {
+    label: string;
+};
+export declare function DefaultMultiSelectButton<T>({ isSelected, isDisabled, isInteractive, onClick, label, }: DefaultMultiSelectButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MultiSelectButtons.d.ts

@@ -0,0 +1,2 @@
+import { MultiSelectButtonsProps } from '../types';
+export declare function MultiSelectButtons<T>(props: MultiSelectButtonsProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/NumberMultiSelectButtons.d.ts

@@ -0,0 +1,2 @@
+import { NumberMultiSelectButtonsProps } from '../types';
+export declare function NumberMultiSelectButtons({ min, max, step, selectedValues, maxSelection, onChange, getValueLabel, isValueDisabled, renderValue, onSelectionLimitReached, onDisabledClick, className, style, }: NumberMultiSelectButtonsProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useSelectablePicker.d.ts

@@ -0,0 +1,9 @@
+import { Key } from 'react';
+import { MultiSelectButtonsProps, RenderValueParams } from '../types';
+type PickerItemModel<T> = {
+    key: Key;
+    index: number;
+    renderParams: RenderValueParams<T>;
+};
+export declare function useSelectablePicker<T>({ items, selectedItems, maxSelection, onChange, onSelectionLimitReached, onDisabledClick, }: MultiSelectButtonsProps<T>): PickerItemModel<T>[];
+export {};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { MultiSelectButtons } from './components/MultiSelectButtons';
+export { NumberMultiSelectButtons } from './components/NumberMultiSelectButtons';
+export type { MultiSelectButtonItem, MultiSelectButtonsProps, NumberMultiSelectButtonsProps, RenderValueParams, } from './types';

package/dist/index.js

@@ -0,0 +1,329 @@
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.multi-select-picker{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;display:grid}.multi-select-picker__cell{min-width:0}.multi-select-picker__item{color:#111827;cursor:pointer;background:#fff;border:1px solid #d0d7de;border-radius:10px;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding:10px 12px;display:flex}.multi-select-picker__item.is-selected{background:#eff6ff;border-color:#2563eb}.multi-select-picker__item:active{background:#f3f4f6;transform:scale(.96)}.multi-select-picker__item.is-disabled:active,.multi-select-picker__item.is-limit:active{background:#fff;transform:none}.multi-select-picker__item.is-disabled,.multi-select-picker__item.is-limit{cursor:not-allowed;opacity:.55}.multi-select-picker__label,.multi-select-picker__order{font:inherit}
+/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();import { useMemo as e } from "react";
+//#region \0rolldown/runtime.js
+var t = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), n = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+}), r = /* @__PURE__ */ t(((e) => {
+	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+	function r(e, n, r) {
+		var i = null;
+		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
+		else r = n;
+		return n = r.ref, {
+			$$typeof: t,
+			type: e,
+			key: i,
+			ref: n === void 0 ? null : n,
+			props: r
+		};
+	}
+	e.Fragment = n, e.jsx = r, e.jsxs = r;
+})), i = /* @__PURE__ */ t(((e) => {
+	process.env.NODE_ENV !== "production" && (function() {
+		function t(e) {
+			if (e == null) return null;
+			if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
+			if (typeof e == "string") return e;
+			switch (e) {
+				case v: return "Fragment";
+				case b: return "Profiler";
+				case y: return "StrictMode";
+				case w: return "Suspense";
+				case T: return "SuspenseList";
+				case O: return "Activity";
+			}
+			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
+				case _: return "Portal";
+				case S: return e.displayName || "Context";
+				case x: return (e._context.displayName || "Context") + ".Consumer";
+				case C:
+					var n = e.render;
+					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
+				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
+				case D:
+					n = e._payload, e = e._init;
+					try {
+						return t(e(n));
+					} catch {}
+			}
+			return null;
+		}
+		function r(e) {
+			return "" + e;
+		}
+		function i(e) {
+			try {
+				r(e);
+				var t = !1;
+			} catch {
+				t = !0;
+			}
+			if (t) {
+				t = console;
+				var n = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+				return n.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), r(e);
+			}
+		}
+		function a(e) {
+			if (e === v) return "<>";
+			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
+			try {
+				var n = t(e);
+				return n ? "<" + n + ">" : "<...>";
+			} catch {
+				return "<...>";
+			}
+		}
+		function o() {
+			var e = A.A;
+			return e === null ? null : e.getOwner();
+		}
+		function s() {
+			return Error("react-stack-top-frame");
+		}
+		function c(e) {
+			if (j.call(e, "key")) {
+				var t = Object.getOwnPropertyDescriptor(e, "key").get;
+				if (t && t.isReactWarning) return !1;
+			}
+			return e.key !== void 0;
+		}
+		function l(e, t) {
+			function n() {
+				P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
+			}
+			n.isReactWarning = !0, Object.defineProperty(e, "key", {
+				get: n,
+				configurable: !0
+			});
+		}
+		function u() {
+			var e = t(this.type);
+			return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
+		}
+		function d(e, t, n, r, i, a) {
+			var o = n.ref;
+			return e = {
+				$$typeof: g,
+				type: e,
+				key: t,
+				props: n,
+				_owner: r
+			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				value: null
+			}) : Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				get: u
+			}), e._store = {}, Object.defineProperty(e._store, "validated", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: 0
+			}), Object.defineProperty(e, "_debugInfo", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: null
+			}), Object.defineProperty(e, "_debugStack", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: i
+			}), Object.defineProperty(e, "_debugTask", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: a
+			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+		}
+		function f(e, n, r, a, s, u) {
+			var f = n.children;
+			if (f !== void 0) if (a) if (M(f)) {
+				for (a = 0; a < f.length; a++) p(f[a]);
+				Object.freeze && Object.freeze(f);
+			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+			else p(f);
+			if (j.call(n, "key")) {
+				f = t(e);
+				var m = Object.keys(n).filter(function(e) {
+					return e !== "key";
+				});
+				a = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + a] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", a, f, m, f), R[f + a] = !0);
+			}
+			if (f = null, r !== void 0 && (i(r), f = "" + r), c(n) && (i(n.key), f = "" + n.key), "key" in n) for (var h in r = {}, n) h !== "key" && (r[h] = n[h]);
+			else r = n;
+			return f && l(r, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, r, o(), s, u);
+		}
+		function p(e) {
+			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+		}
+		function m(e) {
+			return typeof e == "object" && !!e && e.$$typeof === g;
+		}
+		var h = n("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
+			return null;
+		};
+		h = { react_stack_bottom_frame: function(e) {
+			return e();
+		} };
+		var P, F = {}, I = h.react_stack_bottom_frame.bind(h, s)(), L = N(a(s)), R = {};
+		e.Fragment = v, e.jsx = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(a(e)) : L);
+		}, e.jsxs = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(a(e)) : L);
+		};
+	})();
+})), a = (/* @__PURE__ */ t(((e, t) => {
+	process.env.NODE_ENV === "production" ? t.exports = r() : t.exports = i();
+})))();
+function o({ isSelected: e, isDisabled: t, isInteractive: n, onClick: r, label: i }) {
+	return /* @__PURE__ */ (0, a.jsx)("button", {
+		type: "button",
+		className: [
+			"multi-select-picker__item",
+			e ? "is-selected" : "",
+			t ? "is-disabled" : "",
+			!n && !t ? "is-limit" : ""
+		].filter(Boolean).join(" "),
+		onClick: r,
+		"aria-disabled": t,
+		"aria-pressed": e,
+		children: /* @__PURE__ */ (0, a.jsx)("span", {
+			className: "multi-select-picker__label",
+			children: i
+		})
+	});
+}
+//#endregion
+//#region src/utils/selection.ts
+function s(e, t) {
+	return c(e, t) >= 0;
+}
+function c(e, t) {
+	return t.findIndex((t) => Object.is(e, t));
+}
+function l({ item: e, selectedItemKeys: t, selectedItems: n, maxSelection: r, isDisabled: i }) {
+	if (i) return {
+		type: "disabled",
+		nextSelectedItems: n
+	};
+	let a = c(e.key, t);
+	return a >= 0 ? {
+		type: "deselected",
+		nextSelectedItems: n.filter((e, t) => t !== a)
+	} : n.length >= r ? {
+		type: "limit",
+		nextSelectedItems: n
+	} : {
+		type: "selected",
+		nextSelectedItems: [...n, e]
+	};
+}
+//#endregion
+//#region src/hooks/useSelectablePicker.ts
+function u({ items: t, selectedItems: n, maxSelection: r, onChange: i, onSelectionLimitReached: a, onDisabledClick: o }) {
+	return e(() => {
+		d(t.map((e) => e.key), "items");
+		let e = n.map((e) => e.key);
+		return d(e, "selectedItems"), t.map((t, u) => {
+			let { key: d, value: f } = t, p = c(d, e), m = p >= 0, h = t.disabled ?? !1;
+			return {
+				key: d,
+				index: u,
+				renderParams: {
+					item: t,
+					value: f,
+					isSelected: m,
+					isDisabled: h,
+					isInteractive: s(d, e) || !h && n.length < r,
+					selectedOrder: m ? p + 1 : null,
+					onClick: () => {
+						let s = l({
+							item: t,
+							selectedItemKeys: e,
+							selectedItems: n,
+							maxSelection: r,
+							isDisabled: h
+						});
+						if (s.type === "disabled") {
+							o?.(t);
+							return;
+						}
+						if (s.type === "limit") {
+							a?.(t);
+							return;
+						}
+						i(s.nextSelectedItems);
+					}
+				}
+			};
+		});
+	}, [
+		t,
+		r,
+		i,
+		o,
+		a,
+		n
+	]);
+}
+function d(e, t) {
+	let n = /* @__PURE__ */ new Set();
+	for (let r of e) {
+		if (n.has(r)) throw Error(`MultiSelectButtons received duplicate key in ${t}: ${String(r)}`);
+		n.add(r);
+	}
+}
+//#endregion
+//#region src/components/MultiSelectButtons.tsx
+function f(e) {
+	let { className: t, items: n, style: r, renderValue: i } = e, s = u(e);
+	return /* @__PURE__ */ (0, a.jsx)("div", {
+		className: ["multi-select-picker", t].filter(Boolean).join(" "),
+		style: r,
+		children: s.map(({ key: e, index: t, renderParams: r }) => /* @__PURE__ */ (0, a.jsx)("div", {
+			className: "multi-select-picker__cell",
+			children: i ? i(r) : /* @__PURE__ */ (0, a.jsx)(o, {
+				...r,
+				label: n[t]?.label ?? String(r.value)
+			})
+		}, e))
+	});
+}
+//#endregion
+//#region src/components/NumberMultiSelectButtons.tsx
+function p({ min: t, max: n, step: r = 1, selectedValues: i, maxSelection: o, onChange: s, getValueLabel: c, isValueDisabled: l, renderValue: u, onSelectionLimitReached: d, onDisabledClick: p, className: m, style: h }) {
+	let g = e(() => {
+		let e = [];
+		for (let i = t; i <= n; i += r) e.push({
+			key: i,
+			label: c?.(i, e.length) ?? String(i),
+			value: i,
+			disabled: l?.(i, e.length) ?? !1
+		});
+		return e;
+	}, [
+		c,
+		l,
+		n,
+		t,
+		r
+	]);
+	return /* @__PURE__ */ (0, a.jsx)(f, {
+		items: g,
+		selectedItems: e(() => i.flatMap((e) => g.find((t) => Object.is(t.value, e)) ?? []), [g, i]),
+		maxSelection: o,
+		onChange: (e) => s(e.map((e) => e.value)),
+		renderValue: u,
+		onSelectionLimitReached: (e) => d?.(e.value),
+		onDisabledClick: (e) => p?.(e.value),
+		className: m,
+		style: h
+	});
+}
+//#endregion
+export { f as MultiSelectButtons, p as NumberMultiSelectButtons };

package/dist/types.d.ts

@@ -0,0 +1,42 @@
+import { CSSProperties, Key, ReactNode } from 'react';
+export type MultiSelectButtonItem<T> = {
+    key: Key;
+    label: string;
+    value: T;
+    disabled?: boolean;
+};
+export type RenderValueParams<T> = {
+    item: MultiSelectButtonItem<T>;
+    value: T;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isInteractive: boolean;
+    selectedOrder: number | null;
+    onClick: () => void;
+};
+export type MultiSelectButtonsProps<T> = {
+    items: MultiSelectButtonItem<T>[];
+    selectedItems: MultiSelectButtonItem<T>[];
+    maxSelection: number;
+    onChange: (items: MultiSelectButtonItem<T>[]) => void;
+    renderValue?: (params: RenderValueParams<T>) => ReactNode;
+    onSelectionLimitReached?: (item: MultiSelectButtonItem<T>) => void;
+    onDisabledClick?: (item: MultiSelectButtonItem<T>) => void;
+    className?: string;
+    style?: CSSProperties;
+};
+export type NumberMultiSelectButtonsProps = {
+    min: number;
+    max: number;
+    step?: number;
+    selectedValues: number[];
+    maxSelection: number;
+    onChange: (values: number[]) => void;
+    getValueLabel?: (value: number, index: number) => string;
+    isValueDisabled?: (value: number, index: number) => boolean;
+    renderValue?: (params: RenderValueParams<number>) => ReactNode;
+    onSelectionLimitReached?: (value: number) => void;
+    onDisabledClick?: (value: number) => void;
+    className?: string;
+    style?: CSSProperties;
+};

package/dist/utils/selection.d.ts

@@ -0,0 +1,26 @@
+import { MultiSelectButtonItem } from '../types';
+import { Key } from 'react';
+export type ToggleSelectionResult<T> = {
+    type: 'disabled';
+    nextSelectedItems: MultiSelectButtonItem<T>[];
+} | {
+    type: 'limit';
+    nextSelectedItems: MultiSelectButtonItem<T>[];
+} | {
+    type: 'selected';
+    nextSelectedItems: MultiSelectButtonItem<T>[];
+} | {
+    type: 'deselected';
+    nextSelectedItems: MultiSelectButtonItem<T>[];
+};
+type ToggleSelectionParams<T> = {
+    item: MultiSelectButtonItem<T>;
+    selectedItemKeys: Key[];
+    selectedItems: MultiSelectButtonItem<T>[];
+    maxSelection: number;
+    isDisabled: boolean;
+};
+export declare function isItemSelected(itemKey: Key, selectedItemKeys: Key[]): boolean;
+export declare function getSelectedIndex(itemKey: Key, selectedItemKeys: Key[]): number;
+export declare function toggleSelection<T>({ item, selectedItemKeys, selectedItems, maxSelection, isDisabled, }: ToggleSelectionParams<T>): ToggleSelectionResult<T>;
+export {};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@takashi145/react-multi-select-buttons",
+  "version": "0.1.0",
+  "description": "Button-based multi-select components for React.",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.0.4",
+    "vite-plugin-css-injected-by-js": "^4.0.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}