@ryuzaki13/react-foundation-ui 2.0.0 → 2.1.0

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":"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"}

package/dist/status-indicator/StatusIndicator.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "react";
+import type { UiSize, UiTone } from "../types";
+export type StatusIndicatorTone = Exclude<UiTone, "brand">;
+export type StatusIndicatorSize = Extract<UiSize, "sm" | "md" | "lg">;
+export interface StatusIndicatorProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    tone?: StatusIndicatorTone;
+    size?: StatusIndicatorSize;
+    animated?: boolean;
+}
+/**
+ * Декоративный цветовой маркер статуса. Передавайте смысл состояния видимым текстом рядом с индикатором.
+ */
+export declare function StatusIndicator({ tone, size, animated, className, ...htmlProps }: StatusIndicatorProps): import("react").JSX.Element;
+//# sourceMappingURL=StatusIndicator.d.ts.map

package/dist/status-indicator/StatusIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../src/status-indicator/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAE/C,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAEtE,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC9F,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAgBD;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAgB,EAAE,IAAW,EAAE,QAAgB,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,+BAajI"}

package/dist/status-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusIndicator, type StatusIndicatorProps, type StatusIndicatorSize, type StatusIndicatorTone } from "./StatusIndicator";
+//# sourceMappingURL=index.d.ts.map

package/dist/status-indicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/status-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/status-indicator/index.js

@@ -0,0 +1,38 @@
+import { cn as e } from "@ryuzaki13/react-foundation-lib/utils";
+import { jsx as t } from "react/jsx-runtime";
+var n = {
+	statusIndicator: "bJvCcD",
+	neutral: "UhVDLa",
+	info: "bRw83O",
+	success: "VQh7sh",
+	warning: "zdESHk",
+	error: "-KLln9",
+	sizeSm: "Ak9M6g",
+	sizeMd: "_43MsRd",
+	sizeLg: "FpGv5-",
+	animated: "y-1aex",
+	statusIndicatorPulse: "_56N544"
+}, r = {
+	neutral: n.neutral,
+	info: n.info,
+	success: n.success,
+	warning: n.warning,
+	error: n.error
+}, i = {
+	sm: n.sizeSm,
+	md: n.sizeMd,
+	lg: n.sizeLg
+};
+function a({ tone: a = "neutral", size: o = "md", animated: s = !1, className: c, ...l }) {
+	let u = l.role !== void 0 || l["aria-label"] !== void 0 || l["aria-labelledby"] !== void 0, d = l["aria-hidden"] ?? (!u || void 0);
+	return /* @__PURE__ */ t("span", {
+		...l,
+		className: e(n.statusIndicator, r[a], i[o], s && n.animated, c),
+		"aria-hidden": d,
+		"data-ui": "status-indicator"
+	});
+}
+//#endregion
+export { a as StatusIndicator };
+
+//# sourceMappingURL=index.js.map

package/dist/status-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/status-indicator/StatusIndicator.module.scss","../../src/status-indicator/StatusIndicator.tsx"],"sourcesContent":[".statusIndicator {\n\t--status-indicator-fill: var(--status-neutral-fill);\n\t--status-indicator-size: 0.5em;\n\n\tdisplay: inline-block;\n\tflex: 0 0 auto;\n\twidth: var(--status-indicator-size);\n\theight: var(--status-indicator-size);\n\tborder-radius: 50%;\n\tvertical-align: middle;\n\tbackground-color: var(--status-indicator-fill);\n}\n\n.neutral {\n\t--status-indicator-fill: var(--status-neutral-fill);\n}\n\n.info {\n\t--status-indicator-fill: var(--status-info-fill);\n}\n\n.success {\n\t--status-indicator-fill: var(--status-success-fill);\n}\n\n.warning {\n\t--status-indicator-fill: var(--status-warning-fill);\n}\n\n.error {\n\t--status-indicator-fill: var(--status-error-fill);\n}\n\n.sizeSm {\n\t--status-indicator-size: 0.375em;\n}\n\n.sizeMd {\n\t--status-indicator-size: 0.5em;\n}\n\n.sizeLg {\n\t--status-indicator-size: 0.75em;\n}\n\n.animated {\n\ttransform-origin: center;\n\tanimation: statusIndicatorPulse var(--animation-2s) ease-in-out infinite;\n}\n\n@keyframes statusIndicatorPulse {\n\t0%,\n\t100% {\n\t\topacity: 0.7;\n\t\ttransform: scale(0.9);\n\t}\n\n\t50% {\n\t\topacity: 1;\n\t\ttransform: scale(1.05);\n\t}\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.animated {\n\t\tanimation: none;\n\t}\n}\n","import type { HTMLAttributes } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport styles from \"./StatusIndicator.module.scss\";\n\nimport type { UiSize, UiTone } from \"../types\";\n\nexport type StatusIndicatorTone = Exclude<UiTone, \"brand\">;\nexport type StatusIndicatorSize = Extract<UiSize, \"sm\" | \"md\" | \"lg\">;\n\nexport interface StatusIndicatorProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n\ttone?: StatusIndicatorTone;\n\tsize?: StatusIndicatorSize;\n\tanimated?: boolean;\n}\n\nconst toneClasses: Record<StatusIndicatorTone, string> = {\n\tneutral: styles.neutral,\n\tinfo: styles.info,\n\tsuccess: styles.success,\n\twarning: styles.warning,\n\terror: styles.error\n};\n\nconst sizeClasses: Record<StatusIndicatorSize, string> = {\n\tsm: styles.sizeSm,\n\tmd: styles.sizeMd,\n\tlg: styles.sizeLg\n};\n\n/**\n * Декоративный цветовой маркер статуса. Передавайте смысл состояния видимым текстом рядом с индикатором.\n */\nexport function StatusIndicator({ tone = \"neutral\", size = \"md\", animated = false, className, ...htmlProps }: StatusIndicatorProps) {\n\tconst hasAccessibleSemantics =\n\t\thtmlProps.role !== undefined || htmlProps[\"aria-label\"] !== undefined || htmlProps[\"aria-labelledby\"] !== undefined;\n\tconst ariaHidden = htmlProps[\"aria-hidden\"] ?? (hasAccessibleSemantics ? undefined : true);\n\n\treturn (\n\t\t<span\n\t\t\t{...htmlProps}\n\t\t\tclassName={cn(styles.statusIndicator, toneClasses[tone], sizeClasses[size], animated && styles.animated, className)}\n\t\t\taria-hidden={ariaHidden}\n\t\t\tdata-ui=\"status-indicator\"\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;GCiBM,IAAmD;CACxD,SAAS,EAAO;CAChB,MAAM,EAAO;CACb,SAAS,EAAO;CAChB,SAAS,EAAO;CAChB,OAAO,EAAO;AACf,GAEM,IAAmD;CACxD,IAAI,EAAO;CACX,IAAI,EAAO;CACX,IAAI,EAAO;AACZ;AAKA,SAAgB,EAAgB,EAAE,UAAO,WAAW,UAAO,MAAM,cAAW,IAAO,cAAW,GAAG,KAAmC;CACnI,IAAM,IACL,EAAU,SAAS,KAAA,KAAa,EAAU,kBAAkB,KAAA,KAAa,EAAU,uBAAuB,KAAA,GACrG,IAAa,EAAU,mBAAmB,MAAyB,KAAA;CAEzE,OACC,kBAAC,QAAD;EACC,GAAI;EACJ,WAAW,EAAG,EAAO,iBAAiB,EAAY,IAAO,EAAY,IAAO,KAAY,EAAO,UAAU,CAAS;EAClH,eAAa;EACb,WAAQ;CACR,CAAA;AAEH"}