@ryuzaki13/react-foundation-ui 1.12.4 → 2.0.1

package/dist/listbox/Listbox.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, JSX, ReactNode } from "react";
+import { type HTMLAttributes, type JSX, type ReactNode } from "react";
 type ListboxOption<T> = {
     value: T;
     label?: string;
@@ -6,6 +6,8 @@ type ListboxOption<T> = {
 };
 interface ListboxBaseProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "value"> {
     options: ListboxOption<T>[];
+    label?: ReactNode;
+    description?: string;
     disabled?: boolean;
     focusOnMount?: boolean;
     renderItem?: (option: ListboxOption<T>, selected: boolean, active: boolean) => ReactNode;

package/dist/listbox/Listbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.d.ts","sourceRoot":"","sources":["../../src/listbox/Listbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,cAAc,EACd,GAAG,EAEH,SAAS,EAOT,MAAM,OAAO,CAAC;AAaf,KAAK,aAAa,CAAC,CAAC,IAAI;IACvB,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,UAAU,gBAAgB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,GAAG,OAAO,CAAC;IAChH,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,KAAK,SAAS,CAAC;IACzF,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7D;AAGD,UAAU,kBAAkB,CAAC,CAAC,CAAE,SAAQ,gBAAgB,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACxD;AAGD,UAAU,iBAAiB,CAAC,CAAC,CAAE,SAAQ,gBAAgB,CAAC,CAAC,CAAC;IACzD,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CAC1D;AA4BD;;GAEG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;AACtE,wBAAgB,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC"}
+{"version":3,"file":"Listbox.d.ts","sourceRoot":"","sources":["../../src/listbox/Listbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,cAAc,EACnB,KAAK,GAAG,EAGR,KAAK,SAAS,EAMd,MAAM,OAAO,CAAC;AAaf,KAAK,aAAa,CAAC,CAAC,IAAI;IACvB,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,UAAU,gBAAgB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,GAAG,OAAO,CAAC;IAChH,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,KAAK,SAAS,CAAC;IACzF,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7D;AAGD,UAAU,kBAAkB,CAAC,CAAC,CAAE,SAAQ,gBAAgB,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACxD;AAGD,UAAU,iBAAiB,CAAC,CAAC,CAAE,SAAQ,gBAAgB,CAAC,CAAC,CAAC;IACzD,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CAC1D;AA4BD;;GAEG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;AACtE,wBAAgB,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC"}

package/dist/listbox/index.js

@@ -1,6 +1,6 @@
 import { CustomOptionButton as e, Option as t, OptionButton as n } from "../option/index.js";
-import { h as r } from "../chunks/picker-DZ4-1BvK.js";
-import { useEffect as i, useId as a, useLayoutEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import { h as r, v as i } from "../chunks/picker-DZ4-1BvK.js";
+import { useEffect as a, useLayoutEffect as o, useMemo as s, useRef as c, useState as l } from "react";
 import { findFirstEnabledIndex as u, findLastEnabledIndex as d, findNextEnabledIndex as f, handleKeyboardActivation as p } from "@ryuzaki13/react-foundation-lib/utils";
 import { jsx as m } from "react/jsx-runtime";
 import { CheckIcon as h } from "lucide-react";
@@ -21,74 +21,83 @@ function _(e, t, n) {
 	return u(e, g);
 }
 function v(v) {
-	let { value: y, defaultValue: b, multiple: x, disabled: S, focusOnMount: C, renderItem: w, getKey: T, options: E, onChange: D, id: O, ...k } = v, A = y !== void 0, j = a(), M = O ?? `${j}-listbox`, [N, P] = l(b), F = c(null), [I, L] = l(() => _(E, y ?? b, x)), R = c(!1), z = s(() => (A ? y : N) ?? (x ? [] : null), [
+	let { value: y, defaultValue: b, multiple: x, label: S, description: C, disabled: w, focusOnMount: T, renderItem: E, getKey: D, options: O, onChange: k, id: A, ...j } = v, M = y !== void 0, [N, P] = l(b), F = c(null), [I, L] = l(() => _(O, y ?? b, x)), R = c(!1), z = s(() => (M ? y : N) ?? (x ? [] : null), [
 		N,
-		A,
+		M,
 		x,
 		y
 	]), B = I, V = (e) => {
-		if (S || e.disabled) return;
-		let t;
-		if (v.multiple) {
-			let n = Array.isArray(z) ? z : [];
-			t = n.includes(e.value) ? n.filter((t) => t !== e.value) : [...n, e.value], v.onChange?.(t, e);
-		} else t = e.value, v.onChange?.(t, e);
-		A || P(t);
+		if (!(w || e.disabled)) {
+			if (x) {
+				let t = Array.isArray(z) ? z : [], n = t.includes(e.value) ? t.filter((t) => t !== e.value) : [...t, e.value];
+				k?.(n, e), M || P(n);
+				return;
+			}
+			k?.(e.value, e), M || P(e.value);
+		}
+	}, H = (e) => {
+		if (!w) {
+			if (e.key === "ArrowDown") e.preventDefault(), R.current = !0, L((e) => f(O, e, 1, g));
+			else if (e.key === "ArrowUp") e.preventDefault(), R.current = !0, L((e) => f(O, e, -1, g));
+			else if (e.key === "Home") e.preventDefault(), R.current = !0, L(u(O, g));
+			else if (e.key === "End") e.preventDefault(), R.current = !0, L(d(O, g));
+			else if (p(e, () => {
+				let e = O[B];
+				e && V(e);
+			})) return;
+		}
 	};
-	return i(() => {
+	return a(() => {
 		if (!R.current) return;
 		R.current = !1;
 		let e = F.current?.querySelectorAll("[role=\"option\"]")[B];
 		e && e.scrollIntoView({ block: "nearest" });
 	}, [B]), o(() => {
-		C && F.current?.focus();
-	}, [C]), /* @__PURE__ */ m(r, {
-		rootRef: F,
-		id: M,
-		role: "listbox",
-		"aria-multiselectable": x || void 0,
-		"aria-activedescendant": B >= 0 ? `${M}-option-${B}` : void 0,
-		onKeyDown: (e) => {
-			if (!S) {
-				if (e.key === "ArrowDown") e.preventDefault(), R.current = !0, L((e) => f(E, e, 1, g));
-				else if (e.key === "ArrowUp") e.preventDefault(), R.current = !0, L((e) => f(E, e, -1, g));
-				else if (e.key === "Home") e.preventDefault(), R.current = !0, L(u(E, g));
-				else if (e.key === "End") e.preventDefault(), R.current = !0, L(d(E, g));
-				else if (p(e, () => {
-					let e = E[B];
-					e && V(e);
-				})) return;
-			}
-		},
-		...k,
-		"aria-disabled": S || void 0,
-		tabIndex: S ? -1 : 0,
-		className: k.className,
-		children: E.map((r, i) => {
-			let a = x ? Array.isArray(z) && z.includes(r.value) : z === r.value, o = i === B, s = S || r.disabled || void 0, c = (e) => {
-				e.preventDefault(), !s && (L(i), V(r));
-			};
-			return /* @__PURE__ */ m(t, {
-				id: `${M}-option-${i}`,
-				role: "option",
-				"aria-selected": a,
-				"aria-disabled": s,
-				disabled: s,
-				active: o,
-				selected: a,
-				children: w ? /* @__PURE__ */ m(e, {
-					tabIndex: -1,
-					disabled: s,
-					onMouseDown: c,
-					children: w(r, a, o)
-				}) : /* @__PURE__ */ m(n, {
-					tabIndex: -1,
-					disabled: s,
-					onMouseDown: c,
-					icon: m(a ? h : "span", {}),
-					text: r.label ?? String(r.value)
-				})
-			}, T ? T(r, i) : i);
+		T && F.current?.focus();
+	}, [T]), /* @__PURE__ */ m(i, {
+		id: A,
+		label: S,
+		description: C,
+		disabled: w,
+		children: ({ controlId: i, labelId: a, describedBy: o }) => /* @__PURE__ */ m(r, {
+			rootRef: F,
+			id: i,
+			role: "listbox",
+			"aria-multiselectable": x || void 0,
+			"aria-activedescendant": B >= 0 ? `${i}-option-${B}` : void 0,
+			onKeyDown: H,
+			...j,
+			"aria-labelledby": a ?? j["aria-labelledby"],
+			"aria-describedby": o ?? j["aria-describedby"],
+			"aria-disabled": w || void 0,
+			tabIndex: w ? -1 : 0,
+			className: j.className,
+			children: O.map((r, a) => {
+				let o = x ? Array.isArray(z) && z.includes(r.value) : z === r.value, s = a === B, c = w || r.disabled || void 0, l = (e) => {
+					e.preventDefault(), !c && (L(a), V(r));
+				};
+				return /* @__PURE__ */ m(t, {
+					id: `${i}-option-${a}`,
+					role: "option",
+					"aria-selected": o,
+					"aria-disabled": c,
+					disabled: c,
+					active: s,
+					selected: o,
+					children: E ? /* @__PURE__ */ m(e, {
+						tabIndex: -1,
+						disabled: c,
+						onMouseDown: l,
+						children: E(r, o, s)
+					}) : /* @__PURE__ */ m(n, {
+						tabIndex: -1,
+						disabled: c,
+						onMouseDown: l,
+						icon: m(o ? h : "span", {}),
+						text: r.label ?? String(r.value)
+					})
+				}, D ? D(r, a) : a);
+			})
 		})
 	});
 }

package/dist/listbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/listbox/Listbox.tsx"],"sourcesContent":["import {\n\ttype MouseEvent,\n\tHTMLAttributes,\n\tJSX,\n\tKeyboardEvent,\n\tReactNode,\n\tuseEffect,\n\tuseId,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState\n} from \"react\";\n\nimport {\n\tfindFirstEnabledIndex,\n\tfindLastEnabledIndex,\n\tfindNextEnabledIndex,\n\thandleKeyboardActivation\n} from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { CheckIcon } from \"lucide-react\";\n\nimport { CustomOptionButton, Option, OptionButton } from \"../option\";\nimport { PickerOptions } from \"../picker\";\n\ntype ListboxOption<T> = {\n\tvalue: T;\n\tlabel?: string;\n\tdisabled?: boolean;\n};\n\ninterface ListboxBaseProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\" | \"value\"> {\n\toptions: ListboxOption<T>[];\n\tdisabled?: boolean;\n\tfocusOnMount?: boolean;\n\trenderItem?: (option: ListboxOption<T>, selected: boolean, active: boolean) => ReactNode;\n\tgetKey?: (option: ListboxOption<T>, index: number) => string;\n}\n\n// Вариант для single-select\ninterface ListboxSingleProps<T> extends ListboxBaseProps<T> {\n\tmultiple?: false;\n\tvalue?: T;\n\tdefaultValue?: T;\n\tonChange?: (value: T, option: ListboxOption<T>) => void;\n}\n\n// Вариант для multi-select\ninterface ListboxMultiProps<T> extends ListboxBaseProps<T> {\n\tmultiple: true;\n\tvalue?: T[];\n\tdefaultValue?: T[];\n\tonChange?: (value: T[], option: ListboxOption<T>) => void;\n}\n\ntype ListboxProps<T> = ListboxSingleProps<T> | ListboxMultiProps<T>;\n\nconst isOptionDisabled = <T,>(option: ListboxOption<T>) => option.disabled === true;\n\nfunction getInitialFocusIndex<T>(options: ListboxOption<T>[], value: T | T[] | undefined, multiple: boolean | undefined) {\n\tif (multiple) {\n\t\tif (Array.isArray(value) && value.length > 0) {\n\t\t\tconst selectedIndex = options.findIndex((option) => value.includes(option.value) && !option.disabled);\n\t\t\tif (selectedIndex >= 0) {\n\t\t\t\treturn selectedIndex;\n\t\t\t}\n\t\t}\n\n\t\treturn findFirstEnabledIndex(options, isOptionDisabled);\n\t}\n\n\tif (value !== undefined) {\n\t\tconst selectedIndex = options.findIndex((option) => option.value === value && !option.disabled);\n\t\tif (selectedIndex >= 0) {\n\t\t\treturn selectedIndex;\n\t\t}\n\t}\n\n\treturn findFirstEnabledIndex(options, isOptionDisabled);\n}\n\n/**\n * Компонент выбора одного или нескольких элементов из списка. Поддерживает controlled API, поиск по данным и рендер кастомных опций.\n */\nexport function Listbox<T>(props: ListboxSingleProps<T>): JSX.Element;\nexport function Listbox<T>(props: ListboxMultiProps<T>): JSX.Element;\nexport function Listbox<T>(props: ListboxProps<T>): JSX.Element {\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tconst { value, defaultValue, multiple, disabled, focusOnMount, renderItem, getKey, options, onChange, id: externalId, ...rest } = props;\n\n\tconst isControlled = value !== undefined;\n\tconst autoId = useId();\n\tconst listId = externalId ?? `${autoId}-listbox`;\n\tconst [internalValue, setInternalValue] = useState<T | T[] | undefined>(defaultValue);\n\tconst listRef = useRef<HTMLDivElement>(null);\n\tconst [focusedIndex, setFocusedIndex] = useState(() => getInitialFocusIndex(options, value ?? defaultValue, multiple));\n\t/**\n\t * Прокрутка нужна только после клавиатурной навигации. Это не даёт монтированию и Fast Refresh\n\t * вызывать scrollIntoView, который иначе прокручивает внешнюю страницу до Listbox.\n\t */\n\tconst shouldScrollActiveOptionRef = useRef(false);\n\n\tconst selectedValues = useMemo(\n\t\t() => (isControlled ? value : internalValue) ?? (multiple ? [] : null),\n\t\t[internalValue, isControlled, multiple, value]\n\t);\n\tconst activeIndex = focusedIndex;\n\n\tconst handleSelect = (option: ListboxOption<T>) => {\n\t\tif (disabled || option.disabled) return;\n\n\t\tlet newValue: T | T[];\n\t\tif (props.multiple) {\n\t\t\tconst arr = Array.isArray(selectedValues) ? selectedValues : [];\n\t\t\tnewValue = arr.includes(option.value) ? arr.filter((v) => v !== option.value) : [...arr, option.value];\n\n\t\t\tprops.onChange?.(newValue, option);\n\t\t} else {\n\t\t\tnewValue = option.value;\n\n\t\t\tprops.onChange?.(newValue, option);\n\t\t}\n\n\t\tif (!isControlled) setInternalValue(newValue);\n\t};\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n\t\tif (disabled) return;\n\n\t\tif (e.key === \"ArrowDown\") {\n\t\t\te.preventDefault();\n\t\t\tshouldScrollActiveOptionRef.current = true;\n\t\t\t// setHoveredIndex(null);\n\t\t\tsetFocusedIndex((index) => findNextEnabledIndex(options, index, 1, isOptionDisabled));\n\t\t} else if (e.key === \"ArrowUp\") {\n\t\t\te.preventDefault();\n\t\t\tshouldScrollActiveOptionRef.current = true;\n\t\t\t// setHoveredIndex(null);\n\t\t\tsetFocusedIndex((index) => findNextEnabledIndex(options, index, -1, isOptionDisabled));\n\t\t} else if (e.key === \"Home\") {\n\t\t\te.preventDefault();\n\t\t\tshouldScrollActiveOptionRef.current = true;\n\t\t\t// setHoveredIndex(null);\n\t\t\tsetFocusedIndex(findFirstEnabledIndex(options, isOptionDisabled));\n\t\t} else if (e.key === \"End\") {\n\t\t\te.preventDefault();\n\t\t\tshouldScrollActiveOptionRef.current = true;\n\t\t\t// setHoveredIndex(null);\n\t\t\tsetFocusedIndex(findLastEnabledIndex(options, isOptionDisabled));\n\t\t} else if (\n\t\t\thandleKeyboardActivation(e, () => {\n\t\t\t\tconst activeOption = options[activeIndex];\n\t\t\t\tif (activeOption) {\n\t\t\t\t\thandleSelect(activeOption);\n\t\t\t\t}\n\t\t\t})\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (!shouldScrollActiveOptionRef.current) return;\n\n\t\tshouldScrollActiveOptionRef.current = false;\n\t\tconst el = listRef.current?.querySelectorAll<HTMLElement>('[role=\"option\"]')[activeIndex];\n\t\tif (el) el.scrollIntoView({ block: \"nearest\" });\n\t}, [activeIndex]);\n\n\tuseLayoutEffect(() => {\n\t\tif (focusOnMount) {\n\t\t\tlistRef.current?.focus();\n\t\t}\n\t}, [focusOnMount]);\n\n\treturn (\n\t\t<PickerOptions\n\t\t\trootRef={listRef}\n\t\t\tid={listId}\n\t\t\trole=\"listbox\"\n\t\t\t// aria-label={}\n\t\t\taria-multiselectable={multiple || undefined}\n\t\t\taria-activedescendant={activeIndex >= 0 ? `${listId}-option-${activeIndex}` : undefined}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\t{...rest}\n\t\t\taria-disabled={disabled || undefined}\n\t\t\ttabIndex={disabled ? -1 : 0}\n\t\t\tclassName={rest.className}>\n\t\t\t{options.map((option, index) => {\n\t\t\t\tconst selected = multiple\n\t\t\t\t\t? Array.isArray(selectedValues) && selectedValues.includes(option.value)\n\t\t\t\t\t: selectedValues === option.value;\n\t\t\t\tconst active = index === activeIndex;\n\t\t\t\tconst optionDisabled = disabled || option.disabled || undefined;\n\n\t\t\t\tconst handleMouseDown = (e: MouseEvent<HTMLButtonElement>) => {\n\t\t\t\t\te.preventDefault(); // чтобы не сбрасывался фокус listbox\n\t\t\t\t\tif (optionDisabled) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tsetFocusedIndex(index);\n\t\t\t\t\thandleSelect(option);\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tkey={getKey ? getKey(option, index) : index}\n\t\t\t\t\t\tid={`${listId}-option-${index}`}\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\taria-selected={selected}\n\t\t\t\t\t\taria-disabled={optionDisabled}\n\t\t\t\t\t\tdisabled={optionDisabled}\n\t\t\t\t\t\tactive={active}\n\t\t\t\t\t\tselected={selected}>\n\t\t\t\t\t\t{renderItem ? (\n\t\t\t\t\t\t\t<CustomOptionButton tabIndex={-1} disabled={optionDisabled} onMouseDown={handleMouseDown}>\n\t\t\t\t\t\t\t\t{renderItem(option, selected, active)}\n\t\t\t\t\t\t\t</CustomOptionButton>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<OptionButton\n\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\tdisabled={optionDisabled}\n\t\t\t\t\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\t\t\t\t\ticon={selected ? <CheckIcon /> : <span />}\n\t\t\t\t\t\t\t\ttext={option.label ?? String(option.value)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Option>\n\t\t\t\t);\n\t\t\t})}\n\t\t</PickerOptions>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/listbox/Listbox.tsx"],"sourcesContent":["import {\n\ttype HTMLAttributes,\n\ttype JSX,\n\ttype KeyboardEvent,\n\ttype MouseEvent,\n\ttype ReactNode,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState\n} from \"react\";\n\nimport {\n\tfindFirstEnabledIndex,\n\tfindLastEnabledIndex,\n\tfindNextEnabledIndex,\n\thandleKeyboardActivation\n} from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { CheckIcon } from \"lucide-react\";\n\nimport { CustomOptionButton, Option, OptionButton } from \"../option\";\nimport { PickerField, PickerOptions } from \"../picker\";\n\ntype ListboxOption<T> = {\n\tvalue: T;\n\tlabel?: string;\n\tdisabled?: boolean;\n};\n\ninterface ListboxBaseProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\" | \"value\"> {\n\toptions: ListboxOption<T>[];\n\tlabel?: ReactNode;\n\tdescription?: string;\n\tdisabled?: boolean;\n\tfocusOnMount?: boolean;\n\trenderItem?: (option: ListboxOption<T>, selected: boolean, active: boolean) => ReactNode;\n\tgetKey?: (option: ListboxOption<T>, index: number) => string;\n}\n\n// Вариант для single-select\ninterface ListboxSingleProps<T> extends ListboxBaseProps<T> {\n\tmultiple?: false;\n\tvalue?: T;\n\tdefaultValue?: T;\n\tonChange?: (value: T, option: ListboxOption<T>) => void;\n}\n\n// Вариант для multi-select\ninterface ListboxMultiProps<T> extends ListboxBaseProps<T> {\n\tmultiple: true;\n\tvalue?: T[];\n\tdefaultValue?: T[];\n\tonChange?: (value: T[], option: ListboxOption<T>) => void;\n}\n\ntype ListboxProps<T> = ListboxSingleProps<T> | ListboxMultiProps<T>;\n\nconst isOptionDisabled = <T,>(option: ListboxOption<T>) => option.disabled === true;\n\nfunction getInitialFocusIndex<T>(options: ListboxOption<T>[], value: T | T[] | undefined, multiple: boolean | undefined) {\n\tif (multiple) {\n\t\tif (Array.isArray(value) && value.length > 0) {\n\t\t\tconst selectedIndex = options.findIndex((option) => value.includes(option.value) && !option.disabled);\n\t\t\tif (selectedIndex >= 0) {\n\t\t\t\treturn selectedIndex;\n\t\t\t}\n\t\t}\n\n\t\treturn findFirstEnabledIndex(options, isOptionDisabled);\n\t}\n\n\tif (value !== undefined) {\n\t\tconst selectedIndex = options.findIndex((option) => option.value === value && !option.disabled);\n\t\tif (selectedIndex >= 0) {\n\t\t\treturn selectedIndex;\n\t\t}\n\t}\n\n\treturn findFirstEnabledIndex(options, isOptionDisabled);\n}\n\n/**\n * Компонент выбора одного или нескольких элементов из списка. Поддерживает controlled API, поиск по данным и рендер кастомных опций.\n */\nexport function Listbox<T>(props: ListboxSingleProps<T>): JSX.Element;\nexport function Listbox<T>(props: ListboxMultiProps<T>): JSX.Element;\nexport function Listbox<T>(props: ListboxProps<T>): JSX.Element {\n\tconst {\n\t\tvalue,\n\t\tdefaultValue,\n\t\tmultiple,\n\t\tlabel,\n\t\tdescription,\n\t\tdisabled,\n\t\tfocusOnMount,\n\t\trenderItem,\n\t\tgetKey,\n\t\toptions,\n\t\tonChange,\n\t\tid: externalId,\n\t\t...rest\n\t} = props;\n\n\tconst isControlled = value !== undefined;\n\tconst [internalValue, setInternalValue] = useState<T | T[] | undefined>(defaultValue);\n\tconst listRef = useRef<HTMLDivElement>(null);\n\tconst [focusedIndex, setFocusedIndex] = useState(() => getInitialFocusIndex(options, value ?? defaultValue, multiple));\n\t/**\n\t * Прокрутка нужна только после клавиатурной навигации. Это не даёт монтированию и Fast Refresh\n\t * вызывать scrollIntoView, который иначе прокручивает внешнюю страницу до Listbox.\n\t */\n\tconst shouldScrollActiveOptionRef = useRef(false);\n\n\tconst selectedValues = useMemo(\n\t\t() => (isControlled ? value : internalValue) ?? (multiple ? [] : null),\n\t\t[internalValue, isControlled, multiple, value]\n\t);\n\tconst activeIndex = focusedIndex;\n\n\tconst handleSelect = (option: ListboxOption<T>) => {\n\t\tif (disabled || option.disabled) return;\n\n\t\tif (multiple) {\n\t\t\tconst arr = Array.isArray(selectedValues) ? selectedValues : [];\n\t\t\tconst newValue = arr.includes(option.value) ? arr.filter((v) => v !== option.value) : [...arr, option.value];\n\n\t\t\tonChange?.(newValue, option);\n\t\t\tif (!isControlled) setInternalValue(newValue);\n\t\t\treturn;\n\t\t}\n\n\t\tonChange?.(option.value, option);\n\n\t\tif (!isControlled) setInternalValue(option.value);\n\t};\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n\t\tif (disabled) return;\n\n\t\tif (e.key === \"ArrowDown\") {\n\t\t\te.preventDefault();\n\t\t\tshouldScrollActiveOptionRef.current = true;\n\t\t\t// setHoveredIndex(null);\n\t\t\tsetFocusedIndex((index) => findNextEnabledIndex(options, index, 1, isOptionDisabled));\n\t\t} else if (e.key === \"ArrowUp\") {\n\t\t\te.preventDefault();\n\t\t\tshouldScrollActiveOptionRef.current = true;\n\t\t\t// setHoveredIndex(null);\n\t\t\tsetFocusedIndex((index) => findNextEnabledIndex(options, index, -1, isOptionDisabled));\n\t\t} else if (e.key === \"Home\") {\n\t\t\te.preventDefault();\n\t\t\tshouldScrollActiveOptionRef.current = true;\n\t\t\t// setHoveredIndex(null);\n\t\t\tsetFocusedIndex(findFirstEnabledIndex(options, isOptionDisabled));\n\t\t} else if (e.key === \"End\") {\n\t\t\te.preventDefault();\n\t\t\tshouldScrollActiveOptionRef.current = true;\n\t\t\t// setHoveredIndex(null);\n\t\t\tsetFocusedIndex(findLastEnabledIndex(options, isOptionDisabled));\n\t\t} else if (\n\t\t\thandleKeyboardActivation(e, () => {\n\t\t\t\tconst activeOption = options[activeIndex];\n\t\t\t\tif (activeOption) {\n\t\t\t\t\thandleSelect(activeOption);\n\t\t\t\t}\n\t\t\t})\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (!shouldScrollActiveOptionRef.current) return;\n\n\t\tshouldScrollActiveOptionRef.current = false;\n\t\tconst el = listRef.current?.querySelectorAll<HTMLElement>('[role=\"option\"]')[activeIndex];\n\t\tif (el) el.scrollIntoView({ block: \"nearest\" });\n\t}, [activeIndex]);\n\n\tuseLayoutEffect(() => {\n\t\tif (focusOnMount) {\n\t\t\tlistRef.current?.focus();\n\t\t}\n\t}, [focusOnMount]);\n\n\treturn (\n\t\t<PickerField id={externalId} label={label} description={description} disabled={disabled}>\n\t\t\t{({ controlId: listId, labelId, describedBy }) => (\n\t\t\t\t<PickerOptions\n\t\t\t\t\trootRef={listRef}\n\t\t\t\t\tid={listId}\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-multiselectable={multiple || undefined}\n\t\t\t\t\taria-activedescendant={activeIndex >= 0 ? `${listId}-option-${activeIndex}` : undefined}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t{...rest}\n\t\t\t\t\taria-labelledby={labelId ?? rest[\"aria-labelledby\"]}\n\t\t\t\t\taria-describedby={describedBy ?? rest[\"aria-describedby\"]}\n\t\t\t\t\taria-disabled={disabled || undefined}\n\t\t\t\t\ttabIndex={disabled ? -1 : 0}\n\t\t\t\t\tclassName={rest.className}>\n\t\t\t\t\t{options.map((option, index) => {\n\t\t\t\t\t\tconst selected = multiple\n\t\t\t\t\t\t\t? Array.isArray(selectedValues) && selectedValues.includes(option.value)\n\t\t\t\t\t\t\t: selectedValues === option.value;\n\t\t\t\t\t\tconst active = index === activeIndex;\n\t\t\t\t\t\tconst optionDisabled = disabled || option.disabled || undefined;\n\n\t\t\t\t\t\tconst handleMouseDown = (e: MouseEvent<HTMLButtonElement>) => {\n\t\t\t\t\t\t\te.preventDefault(); // чтобы не сбрасывался фокус listbox\n\t\t\t\t\t\t\tif (optionDisabled) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetFocusedIndex(index);\n\t\t\t\t\t\t\thandleSelect(option);\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Option\n\t\t\t\t\t\t\t\tkey={getKey ? getKey(option, index) : index}\n\t\t\t\t\t\t\t\tid={`${listId}-option-${index}`}\n\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\taria-selected={selected}\n\t\t\t\t\t\t\t\taria-disabled={optionDisabled}\n\t\t\t\t\t\t\t\tdisabled={optionDisabled}\n\t\t\t\t\t\t\t\tactive={active}\n\t\t\t\t\t\t\t\tselected={selected}>\n\t\t\t\t\t\t\t\t{renderItem ? (\n\t\t\t\t\t\t\t\t\t<CustomOptionButton tabIndex={-1} disabled={optionDisabled} onMouseDown={handleMouseDown}>\n\t\t\t\t\t\t\t\t\t\t{renderItem(option, selected, active)}\n\t\t\t\t\t\t\t\t\t</CustomOptionButton>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<OptionButton\n\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\tdisabled={optionDisabled}\n\t\t\t\t\t\t\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\t\t\t\t\t\t\ticon={selected ? <CheckIcon /> : <span />}\n\t\t\t\t\t\t\t\t\t\ttext={option.label ?? String(option.value)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Option>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</PickerOptions>\n\t\t\t)}\n\t\t</PickerField>\n\t);\n}\n"],"mappings":";;;;;;;AA0DA,IAAM,KAAwB,MAA6B,EAAO,aAAa;AAE/E,SAAS,EAAwB,GAA6B,GAA4B,GAA+B;CACxH,IAAI,GAAU;EACb,IAAI,MAAM,QAAQ,CAAK,KAAK,EAAM,SAAS,GAAG;GAC7C,IAAM,IAAgB,EAAQ,WAAW,MAAW,EAAM,SAAS,EAAO,KAAK,KAAK,CAAC,EAAO,QAAQ;GACpG,IAAI,KAAiB,GACpB,OAAO;EAET;EAEA,OAAO,EAAsB,GAAS,CAAgB;CACvD;CAEA,IAAI,MAAU,KAAA,GAAW;EACxB,IAAM,IAAgB,EAAQ,WAAW,MAAW,EAAO,UAAU,KAAS,CAAC,EAAO,QAAQ;EAC9F,IAAI,KAAiB,GACpB,OAAO;CAET;CAEA,OAAO,EAAsB,GAAS,CAAgB;AACvD;AAOA,SAAgB,EAAW,GAAqC;CAC/D,IAAM,EACL,UACA,iBACA,aACA,UACA,gBACA,aACA,iBACA,eACA,WACA,YACA,aACA,IAAI,GACJ,GAAG,MACA,GAEE,IAAe,MAAU,KAAA,GACzB,CAAC,GAAe,KAAoB,EAA8B,CAAY,GAC9E,IAAU,EAAuB,IAAI,GACrC,CAAC,GAAc,KAAmB,QAAe,EAAqB,GAAS,KAAS,GAAc,CAAQ,CAAC,GAK/G,IAA8B,EAAO,EAAK,GAE1C,IAAiB,SACf,IAAe,IAAQ,OAAmB,IAAW,CAAC,IAAI,OACjE;EAAC;EAAe;EAAc;EAAU;CAAK,CAC9C,GACM,IAAc,GAEd,KAAgB,MAA6B;EAC9C,WAAY,EAAO,WAEvB;OAAI,GAAU;IACb,IAAM,IAAM,MAAM,QAAQ,CAAc,IAAI,IAAiB,CAAC,GACxD,IAAW,EAAI,SAAS,EAAO,KAAK,IAAI,EAAI,QAAQ,MAAM,MAAM,EAAO,KAAK,IAAI,CAAC,GAAG,GAAK,EAAO,KAAK;IAG3G,AADA,IAAW,GAAU,CAAM,GACtB,KAAc,EAAiB,CAAQ;IAC5C;GACD;GAIA,AAFA,IAAW,EAAO,OAAO,CAAM,GAE1B,KAAc,EAAiB,EAAO,KAAK;EAJhD;CAKD,GAEM,KAAiB,MAAqC;EACvD,QAEJ;OAAI,EAAE,QAAQ,aAIb,AAHA,EAAE,eAAe,GACjB,EAA4B,UAAU,IAEtC,GAAiB,MAAU,EAAqB,GAAS,GAAO,GAAG,CAAgB,CAAC;QAC9E,IAAI,EAAE,QAAQ,WAIpB,AAHA,EAAE,eAAe,GACjB,EAA4B,UAAU,IAEtC,GAAiB,MAAU,EAAqB,GAAS,GAAO,IAAI,CAAgB,CAAC;QAC/E,IAAI,EAAE,QAAQ,QAIpB,AAHA,EAAE,eAAe,GACjB,EAA4B,UAAU,IAEtC,EAAgB,EAAsB,GAAS,CAAgB,CAAC;QAC1D,IAAI,EAAE,QAAQ,OAIpB,AAHA,EAAE,eAAe,GACjB,EAA4B,UAAU,IAEtC,EAAgB,EAAqB,GAAS,CAAgB,CAAC;QACzD,IACN,EAAyB,SAAS;IACjC,IAAM,IAAe,EAAQ;IAC7B,AAAI,KACH,EAAa,CAAY;GAE3B,CAAC,GAED;EAAA;CAEF;CAgBA,OAdA,QAAgB;EACf,IAAI,CAAC,EAA4B,SAAS;EAE1C,EAA4B,UAAU;EACtC,IAAM,IAAK,EAAQ,SAAS,iBAA8B,mBAAiB,CAAC,CAAC;EAC7E,AAAI,KAAI,EAAG,eAAe,EAAE,OAAO,UAAU,CAAC;CAC/C,GAAG,CAAC,CAAW,CAAC,GAEhB,QAAsB;EACrB,AAAI,KACH,EAAQ,SAAS,MAAM;CAEzB,GAAG,CAAC,CAAY,CAAC,GAGhB,kBAAC,GAAD;EAAa,IAAI;EAAmB;EAAoB;EAAuB;EAC5E,WAAA,EAAE,WAAW,GAAQ,YAAS,qBAC/B,kBAAC,GAAD;GACC,SAAS;GACT,IAAI;GACJ,MAAK;GACL,wBAAsB,KAAY,KAAA;GAClC,yBAAuB,KAAe,IAAI,GAAG,EAAO,UAAU,MAAgB,KAAA;GAC9E,WAAW;GACX,GAAI;GACJ,mBAAiB,KAAW,EAAK;GACjC,oBAAkB,KAAe,EAAK;GACtC,iBAAe,KAAY,KAAA;GAC3B,UAAU,IAAW,KAAK;GAC1B,WAAW,EAAK;GACf,UAAA,EAAQ,KAAK,GAAQ,MAAU;IAC/B,IAAM,IAAW,IACd,MAAM,QAAQ,CAAc,KAAK,EAAe,SAAS,EAAO,KAAK,IACrE,MAAmB,EAAO,OACvB,IAAS,MAAU,GACnB,IAAiB,KAAY,EAAO,YAAY,KAAA,GAEhD,KAAmB,MAAqC;KAC7D,EAAE,eAAe,GACb,OAGJ,EAAgB,CAAK,GACrB,EAAa,CAAM;IACpB;IAEA,OACC,kBAAC,GAAD;KAEC,IAAI,GAAG,EAAO,UAAU;KACxB,MAAK;KACL,iBAAe;KACf,iBAAe;KACf,UAAU;KACF;KACE;KACT,UAAA,IACA,kBAAC,GAAD;MAAoB,UAAU;MAAI,UAAU;MAAgB,aAAa;MACvE,UAAA,EAAW,GAAQ,GAAU,CAAM;KACjB,CAAA,IAEpB,kBAAC,GAAD;MACC,UAAU;MACV,UAAU;MACV,aAAa;MACb,MAAiB,EAAX,IAAY,IAAgB,QAAjB,CAAY,CAAW;MACxC,MAAM,EAAO,SAAS,OAAO,EAAO,KAAK;KACzC,CAAA;IAEK,GArBF,IAAS,EAAO,GAAQ,CAAK,IAAI,CAqB/B;GAEV,CAAC;EACa,CAAA;CAEJ,CAAA;AAEf"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ryuzaki13/react-foundation-ui",
-	"version": "1.12.4",
+	"version": "2.0.1",
 	"description": "Reusable React foundation UI primitives and Storybook stories.",
 	"license": "MIT",
 	"author": "Ryuzaki13",
@@ -384,8 +384,8 @@
 		"@lexical/rich-text": ">=0.46.0 <1.0.0",
 		"@lexical/selection": ">=0.46.0 <1.0.0",
 		"@lexical/utils": ">=0.46.0 <1.0.0",
-		"@ryuzaki13/react-foundation-api": ">=0.1.0 <2.0.0",
-		"@ryuzaki13/react-foundation-lib": ">=0.1.0 <2.0.0",
+		"@ryuzaki13/react-foundation-api": ">=2.0.0 <3.0.0",
+		"@ryuzaki13/react-foundation-lib": ">=2.0.0 <3.0.0",
 		"@tanstack/react-query": ">=5.101.4 <6.0.0",
 		"@tanstack/react-router": ">=1.170.23 <2.0.0",
 		"@tanstack/react-table": ">=9.1.0 <10.0.0",
@@ -481,8 +481,8 @@
 		"@lexical/rich-text": "^0.49.0",
 		"@lexical/selection": "^0.49.0",
 		"@lexical/utils": "^0.49.0",
-		"@ryuzaki13/react-foundation-api": "^1.1.20",
-		"@ryuzaki13/react-foundation-lib": "^1.4.4",
+		"@ryuzaki13/react-foundation-api": "^2.0.0",
+		"@ryuzaki13/react-foundation-lib": "^2.0.0",
 		"@storybook/addon-a11y": "^10.5.5",
 		"@storybook/addon-docs": "^10.5.5",
 		"@storybook/addon-vitest": "^10.5.5",

package/storybook-static/assets/{Badge-D34jY6Gi.js → Badge-DTV2OL5k.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-I7-gyNVJ.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-DxyL_jCu.js";import{a as p,i as m,n as h,o as g,r as _,s as v,t as y}from"./Badge.stories-BviYPkwq.js";function b(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(s,{of:h,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-DWvPB8Sk.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-B_u8Yt1Z.js";import{a as p,i as m,n as h,o as g,r as _,s as v,t as y}from"./Badge.stories-D4zH_nK5.js";function b(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(s,{of:h,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
 `,(0,S.jsx)(u,{children:`Badge`}),`
 `,(0,S.jsx)(o,{children:`Компактная текстовая метка для статусов, категорий, фильтров и коротких служебных пометок`}),`
 `,(0,S.jsx)(t.p,{children:`Badge подходит для коротких подписей, которые должны быстро читаться и не перегружать интерфейс:`}),`

package/storybook-static/assets/{Badge.stories-BviYPkwq.js → Badge.stories-D4zH_nK5.js}

@@ -1,4 +1,4 @@
-import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-I7-gyNVJ.js";import{i,n as a,r as o,t as s}from"./BadgeList-D1opuTdU.js";var c=t({Appearances:()=>h,Basic:()=>p,RemovableList:()=>_,Sizes:()=>g,Tones:()=>m,__namedExportsOrder:()=>v,default:()=>f}),l,u,d,f,p,m,h,g,_,v;function y(){return(y=e((()=>{l=n(),i(),a(),u=r(),{useArgs:d}=__STORYBOOK_MODULE_PREVIEW_API__,f={title:`UI/Badge`,component:o,args:{children:`Новый`,size:`md`,tone:`info`,appearance:`solid`},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{children:{description:`Текст внутри бейджа.`,control:`text`},size:{description:`Размер бейджа.`,control:`inline-radio`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},tone:{description:`Цветовой тон бейджа.`,control:`inline-radio`,options:[`neutral`,`brand`,`success`,`warning`,`error`,`info`]},appearance:{description:`Форма бейджа.`,control:`inline-radio`,options:[`solid`,`outline`,`ghost`,`transparent`]},onRemove:{description:`Показывает кнопку удаления и вызывает обработчик по клику.`,control:!1}}},p={render:function(){let[e]=d();return(0,u.jsx)(o,{...e})}},m={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{tone:`neutral`,appearance:`outline`,children:`Neutral`}),(0,u.jsx)(o,{tone:`success`,appearance:`solid`,children:`Успешно`}),(0,u.jsx)(o,{tone:`warning`,appearance:`solid`,children:`Внимание`}),(0,u.jsx)(o,{tone:`error`,appearance:`solid`,children:`Ошибка`}),(0,u.jsx)(o,{tone:`info`,appearance:`solid`,children:`Информация`})]})},h={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{tone:`neutral`,appearance:`solid`,children:`Solid`}),(0,u.jsx)(o,{tone:`neutral`,appearance:`outline`,children:`Outline`}),(0,u.jsx)(o,{tone:`info`,appearance:`ghost`,children:`Ghost`}),(0,u.jsx)(o,{tone:`warning`,appearance:`transparent`,children:`Transparent`})]})},g={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{size:`xs`,children:`Extra Small`}),(0,u.jsx)(o,{size:`sm`,children:`Small`}),(0,u.jsx)(o,{size:`md`,children:`Medium`}),(0,u.jsx)(o,{size:`lg`,children:`Large`}),(0,u.jsx)(o,{size:`xl`,children:`Extra Large`})]})},_={render:()=>{let[e,t]=(0,l.useState)([`Фильтр A`,`Фильтр B`,`Фильтр C`]);return(0,u.jsx)(s,{children:e.map(e=>(0,u.jsx)(o,{tone:`info`,appearance:`outline`,onRemove:()=>t(t=>t.filter(t=>t!==e)),children:e},e))})}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-DWvPB8Sk.js";import{i,n as a,r as o,t as s}from"./BadgeList-CnmQ4zmg.js";var c=t({Appearances:()=>h,Basic:()=>p,RemovableList:()=>_,Sizes:()=>g,Tones:()=>m,__namedExportsOrder:()=>v,default:()=>f}),l,u,d,f,p,m,h,g,_,v;function y(){return(y=e((()=>{l=n(),i(),a(),u=r(),{useArgs:d}=__STORYBOOK_MODULE_PREVIEW_API__,f={title:`UI/Badge`,component:o,args:{children:`Новый`,size:`md`,tone:`info`,appearance:`solid`},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{children:{description:`Текст внутри бейджа.`,control:`text`},size:{description:`Размер бейджа.`,control:`inline-radio`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},tone:{description:`Цветовой тон бейджа.`,control:`inline-radio`,options:[`neutral`,`brand`,`success`,`warning`,`error`,`info`]},appearance:{description:`Форма бейджа.`,control:`inline-radio`,options:[`solid`,`outline`,`ghost`,`transparent`]},onRemove:{description:`Показывает кнопку удаления и вызывает обработчик по клику.`,control:!1}}},p={render:function(){let[e]=d();return(0,u.jsx)(o,{...e})}},m={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{tone:`neutral`,appearance:`outline`,children:`Neutral`}),(0,u.jsx)(o,{tone:`success`,appearance:`solid`,children:`Успешно`}),(0,u.jsx)(o,{tone:`warning`,appearance:`solid`,children:`Внимание`}),(0,u.jsx)(o,{tone:`error`,appearance:`solid`,children:`Ошибка`}),(0,u.jsx)(o,{tone:`info`,appearance:`solid`,children:`Информация`})]})},h={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{tone:`neutral`,appearance:`solid`,children:`Solid`}),(0,u.jsx)(o,{tone:`neutral`,appearance:`outline`,children:`Outline`}),(0,u.jsx)(o,{tone:`info`,appearance:`ghost`,children:`Ghost`}),(0,u.jsx)(o,{tone:`warning`,appearance:`transparent`,children:`Transparent`})]})},g={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{size:`xs`,children:`Extra Small`}),(0,u.jsx)(o,{size:`sm`,children:`Small`}),(0,u.jsx)(o,{size:`md`,children:`Medium`}),(0,u.jsx)(o,{size:`lg`,children:`Large`}),(0,u.jsx)(o,{size:`xl`,children:`Extra Large`})]})},_={render:()=>{let[e,t]=(0,l.useState)([`Фильтр A`,`Фильтр B`,`Фильтр C`]);return(0,u.jsx)(s,{children:e.map(e=>(0,u.jsx)(o,{tone:`info`,appearance:`outline`,onRemove:()=>t(t=>t.filter(t=>t!==e)),children:e},e))})}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
   render: function Render() {
     const [args] = useArgs<BadgeStoryArgs>();
     return <Badge {...args} />;

package/storybook-static/assets/{BadgeList-D1opuTdU.js → BadgeList-CnmQ4zmg.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n,t as r}from"./x-DlvQAqG5.js";import{n as i}from"./iframe-I7-gyNVJ.js";import{a,i as o}from"./utils-tg3ibbzi.js";import{a as s,l as c}from"./array-D-_yMMUK-BQ0uu1hZ.js";import{n as l,t as u}from"./FloatingPopover-Cc604wgC.js";import{a as d,i as f,r as p,t as m}from"./uiClasses-Bz6cvlDQ.js";import{n as h,t as g}from"./FlexContainer-BWyPlTMB.js";function _({maxChar:e,placement:t=`left`,closeDelay:n=0,maxWidth:r,children:i,block:a,state:o,textWrap:s,textWrapProps:l}){let d=c(i);if(!d.length||e&&d.length<e)return(0,v.jsx)(`span`,{children:d});let f=s??`div`,p={style:{display:a?`block`:`inline-block`,width:e?`${e-3}ch`:`auto`},className:`textOverflow`},m={...l,...p,style:{...l?.style,...p.style},className:[l?.className,p.className].filter(Boolean).join(` `)};return(0,v.jsx)(u,{state:o,placement:t,openOnHover:!0,content:d,closeDelay:n,maxWidth:r,children:(0,v.jsx)(f,{...m,children:d})})}var v;function y(){return(y=e((()=>{s(),l(),v=i(),_.__docgenInfo={description:``,methods:[],displayName:`TextOverflow`,props:{children:{required:!0,tsType:{name:`string`},description:``},maxChar:{required:!1,tsType:{name:`number`},description:``},maxWidth:{required:!1,tsType:{name:`number`},description:`Максимальная ширина тултипа в em.`},placement:{required:!1,tsType:{name:`Placement`},description:``,defaultValue:{value:`"left"`,computed:!1}},closeDelay:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`0`,computed:!1}},block:{required:!1,tsType:{name:`literal`,value:`true`},description:`Для работы text-overflow элемент обязан быть блочным или inline-block.
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n,t as r}from"./x-B3GmOByS.js";import{n as i}from"./iframe-DWvPB8Sk.js";import{a,i as o}from"./utils-tg3ibbzi.js";import{c as s,i as c}from"./array-D-_yMMUK-DYqn1Ozn.js";import{n as l,t as u}from"./FloatingPopover-yB9tTk9G.js";import{a as d,i as f,r as p,t as m}from"./uiClasses-Bz6cvlDQ.js";import{n as h,t as g}from"./FlexContainer-BWyPlTMB.js";function _({maxChar:e,placement:t=`left`,closeDelay:n=0,maxWidth:r,children:i,block:a,state:o,textWrap:c,textWrapProps:l}){let d=s(i);if(!d.length||e&&d.length<e)return(0,v.jsx)(`span`,{children:d});let f=c??`div`,p={style:{display:a?`block`:`inline-block`,width:e?`${e-3}ch`:`auto`},className:`textOverflow`},m={...l,...p,style:{...l?.style,...p.style},className:[l?.className,p.className].filter(Boolean).join(` `)};return(0,v.jsx)(u,{state:o,placement:t,openOnHover:!0,content:d,closeDelay:n,maxWidth:r,children:(0,v.jsx)(f,{...m,children:d})})}var v;function y(){return(y=e((()=>{c(),l(),v=i(),_.__docgenInfo={description:``,methods:[],displayName:`TextOverflow`,props:{children:{required:!0,tsType:{name:`string`},description:``},maxChar:{required:!1,tsType:{name:`number`},description:``},maxWidth:{required:!1,tsType:{name:`number`},description:`Максимальная ширина тултипа в em.`},placement:{required:!1,tsType:{name:`Placement`},description:``,defaultValue:{value:`"left"`,computed:!1}},closeDelay:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`0`,computed:!1}},block:{required:!1,tsType:{name:`literal`,value:`true`},description:`Для работы text-overflow элемент обязан быть блочным или inline-block.
 Если в качестве обёртки передается инлайновый компонент, то он будет
 перезаписан через стили на display: block или inline-block в зависимости
 от установки данного пропса.`},state:{required:!1,tsType:{name:`union`,raw:`"information" | "error" | "warning" | "success" | "negative"`,elements:[{name:`literal`,value:`"information"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"negative"`}]},description:``},textWrap:{required:!1,tsType:{name:`T`},description:``},textWrapProps:{required:!1,tsType:{name:`Omit`,elements:[{name:`ComponentProps`,elements:[{name:`T`}],raw:`ComponentProps<T>`},{name:`literal`,value:`"children"`}],raw:`Omit<ComponentProps<T>, "children">`},description:``}}}})))()}var b,x,S,C,w,T,E,D,O,k;function A(){return(A=e((()=>{b=`qBtmnH`,x=`p-HsHY`,S=`u9tQAE`,C=`FRScRz`,w=`W13uQO`,T=`_3IRcM9`,E=`R3ybI7`,D=`DdWAaC`,O=`_5cXBQF`,k={badge:b,passive:x,sizeXs:S,sizeSm:C,sizeMd:w,sizeLg:T,sizeXl:E,content:D,removeButton:O}})))()}function j({children:e,size:t=`sm`,tone:n,appearance:i,className:o,onRemove:s}){let c=n??`neutral`,l=d({tone:n,appearance:i,fallbackTone:c,fallbackAppearance:c===`neutral`?`outline`:`solid`});return(0,M.jsxs)(`div`,{className:a(k.badge,N[t],p(l.tone),m(l.appearance),!s&&k.passive,o),children:[(0,M.jsx)(_,{maxChar:25,placement:`top`,block:!0,textWrapProps:{className:k.content},children:String(e)}),s&&(0,M.jsx)(`button`,{type:`button`,onClick:s,className:k.removeButton,"aria-label":`Удалить бейдж`,"data-ui":`badge-remove-button`,"data-action":`remove-badge`,children:(0,M.jsx)(r,{})})]})}var M,N;function P(){return(P=e((()=>{o(),n(),y(),f(),A(),M=i(),N={xs:k.sizeXs,sm:k.sizeSm,md:k.sizeMd,lg:k.sizeLg,xl:k.sizeXl},j.__docgenInfo={description:`Компактный индикатор для статусов, категорий и коротких служебных меток.`,methods:[],displayName:`Badge`,props:{children:{required:!0,tsType:{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``,defaultValue:{value:`"sm"`,computed:!1}},tone:{required:!1,tsType:{name:`union`,raw:`"neutral" | "brand" | "error" | "warning" | "success" | "info"`,elements:[{name:`literal`,value:`"neutral"`},{name:`literal`,value:`"brand"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"info"`}]},description:``},appearance:{required:!1,tsType:{name:`union`,raw:`"solid" | "outline" | "ghost" | "transparent"`,elements:[{name:`literal`,value:`"solid"`},{name:`literal`,value:`"outline"`},{name:`literal`,value:`"ghost"`},{name:`literal`,value:`"transparent"`}]},description:``},className:{required:!1,tsType:{name:`string`},description:``},onRemove:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``}}}})))()}function F({children:e}){return(0,L.jsx)(g,{inline:!0,wrap:!0,gap:`sm`,align:`baseline`,children:I.Children.map(e,(e,t)=>(0,L.jsx)(I.Fragment,{children:e},t))})}var I,L;function R(){return(R=e((()=>{I=t(),h(),L=i(),F.__docgenInfo={description:"Контейнер для группы `Badge`, который выстраивает элементы в единый список с предсказуемыми отступами. Используется для компактного вывода набора меток или фильтров.",methods:[],displayName:`BadgeList`,props:{children:{required:!0,tsType:{name:`Array`,elements:[{name:`ReactElement`,elements:[{name:`union`,raw:`typeof Badge | null | undefined | false`,elements:[{name:`Badge`},{name:`null`},{name:`undefined`},{name:`literal`,value:`false`}]}],raw:`ReactElement<typeof Badge | null | undefined | false>`}],raw:`ReactElement<typeof Badge | null | undefined | false>[]`},description:``}}}})))()}export{P as i,R as n,j as r,F as t};