@ryuzaki13/react-foundation-ui 0.1.0

package/dist/modal/stories/Modal.stories.d.ts

@@ -0,0 +1,74 @@
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("../Modal").ModalProps>;
+    parameters: {
+        atomicCanvas: boolean;
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    decorators: ((story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        isOpen?: boolean | undefined;
+        title?: string | undefined;
+        size?: keyof typeof import("../types").ModalSize | undefined;
+        height?: string | undefined;
+        onClose: () => void;
+        children: import("react").ReactElement<import("../Modal").ModalCompositionProps, import("react").FC<import("../Modal").ModalCompositionProps & {
+            scrollable?: boolean;
+        }>> | [import("react").ReactElement<import("../Modal").ModalCompositionProps, import("react").FC<import("../Modal").ModalCompositionProps>>, import("react").ReactElement<import("../Modal").ModalCompositionProps, import("react").FC<import("../Modal").ModalCompositionProps & {
+            scrollable?: boolean;
+        }>>, import("react").ReactElement<import("../Modal").ModalCompositionProps, import("react").FC<import("../Modal").ModalCompositionProps>>] | [import("react").ReactElement<import("../Modal").ModalCompositionProps, import("react").FC<import("../Modal").ModalCompositionProps>>, import("react").ReactElement<import("../Modal").ModalCompositionProps, import("react").FC<import("../Modal").ModalCompositionProps & {
+            scrollable?: boolean;
+        }>>] | [import("react").ReactElement<import("../Modal").ModalCompositionProps, import("react").FC<import("../Modal").ModalCompositionProps & {
+            scrollable?: boolean;
+        }>>, import("react").ReactElement<import("../Modal").ModalCompositionProps, import("react").FC<import("../Modal").ModalCompositionProps>>];
+    }>) => import("react").JSX.Element)[];
+    args: {
+        isOpen: false;
+        title: string;
+        size: "md";
+        height: undefined;
+        onClose: () => void;
+        children: import("react").JSX.Element;
+    };
+    argTypes: {
+        isOpen: {
+            description: string;
+            control: "boolean";
+        };
+        title: {
+            description: string;
+            control: "text";
+        };
+        size: {
+            description: string;
+            control: "inline-radio";
+            options: string[];
+        };
+        height: {
+            description: string;
+            control: "text";
+        };
+        onClose: {
+            description: string;
+            control: false;
+        };
+        children: {
+            description: string;
+            control: false;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Controlled: Story;
+export declare const WithToolbarAndFooter: Story;
+export declare const ScrollableContent: Story;
+export declare const Sizes: Story;
+export declare const StackedModals: Story;
+//# sourceMappingURL=Modal.stories.d.ts.map

package/dist/modal/stories/Modal.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/modal/stories/Modal.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAsC5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KA2ClC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAmC/B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA+BnB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgD3B,CAAC"}

package/dist/modal/stories/Modal.stories.js

@@ -0,0 +1,320 @@
+import { t as e } from "../../chunks/Button-BZ_b-Kin.js";
+import { t } from "../../chunks/Input-Ce2HXBUc.js";
+import { a as n, i as r, n as i, r as a, t as o } from "../../chunks/modal-DqVcZws_.js";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useState as u } from "react";
+//#region src/modal/stories/Modal.stories.tsx
+function d({ children: e }) {
+	return /* @__PURE__ */ c("div", {
+		style: {
+			minHeight: "60dvh",
+			padding: 24,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		children: e
+	});
+}
+function f() {
+	let [e, n] = u("Алексей"), [r, i] = u("Департамент автоматизации бизнеса");
+	return /* @__PURE__ */ l("div", {
+		style: {
+			display: "grid",
+			gap: 16
+		},
+		children: [
+			/* @__PURE__ */ c(t, {
+				label: "Имя",
+				value: e,
+				onChange: n,
+				placeholder: "Введите имя"
+			}),
+			/* @__PURE__ */ c(t, {
+				label: "Подразделение",
+				value: r,
+				onChange: i,
+				placeholder: "Введите подразделение"
+			}),
+			/* @__PURE__ */ l("div", {
+				style: {
+					padding: 12,
+					borderRadius: 8,
+					background: "var(--surface-1)",
+					border: "1px solid var(--border-1)"
+				},
+				children: [
+					"Текущие значения: ",
+					e || "не указано",
+					", ",
+					r || "не указано"
+				]
+			})
+		]
+	});
+}
+var p = {
+	title: "Shared/UI/Modal",
+	component: i,
+	parameters: {
+		atomicCanvas: !0,
+		layout: "fullscreen",
+		docs: { description: { component: "Композиционная модалка с `Toolbar`, `Content` и `Footer`, поддержкой focus trap, возврата фокуса, закрытия по `Escape` и менеджером стека через `ModalManagerProvider`." } }
+	},
+	tags: ["autodocs"],
+	decorators: [(e) => /* @__PURE__ */ c(o, { children: /* @__PURE__ */ c(d, { children: e() }) })],
+	args: {
+		isOpen: !1,
+		title: "Редактирование профиля",
+		size: "md",
+		height: void 0,
+		onClose: () => {},
+		children: /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(a, { children: /* @__PURE__ */ c(f, {}) }), /* @__PURE__ */ l(r, { children: [/* @__PURE__ */ c(e, {
+			variant: "transparent",
+			children: "Отмена"
+		}), /* @__PURE__ */ c(e, { children: "Сохранить" })] })] })
+	},
+	argTypes: {
+		isOpen: {
+			description: "Управляет видимостью модального окна.",
+			control: "boolean"
+		},
+		title: {
+			description: "Заголовок модального окна.",
+			control: "text"
+		},
+		size: {
+			description: "Предустановленный размер модального окна.",
+			control: "inline-radio",
+			options: [
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"inside"
+			]
+		},
+		height: {
+			description: "Явная высота body-области модалки.",
+			control: "text"
+		},
+		onClose: {
+			description: "Вызывается при закрытии по кнопке, `Escape` или пользовательскому действию.",
+			control: !1
+		},
+		children: {
+			description: "Композиция из `ModalToolbar`, `ModalContent`, `ModalFooter`.",
+			control: !1
+		}
+	}
+}, m = {
+	name: "Управляемая модалка",
+	render: (t) => {
+		let [n, o] = u(!1);
+		return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(e, {
+			onClick: () => o(!0),
+			children: "Открыть модалку"
+		}), /* @__PURE__ */ l(i, {
+			...t,
+			isOpen: n,
+			onClose: () => o(!1),
+			children: [/* @__PURE__ */ c(a, { children: /* @__PURE__ */ c(f, {}) }), /* @__PURE__ */ l(r, { children: [/* @__PURE__ */ c(e, {
+				variant: "transparent",
+				onClick: () => o(!1),
+				children: "Отмена"
+			}), /* @__PURE__ */ c(e, {
+				onClick: () => o(!1),
+				children: "Сохранить"
+			})] })]
+		})] });
+	}
+}, h = {
+	name: "Полная композиция",
+	render: (t) => {
+		let [o, d] = u(!1);
+		return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(e, {
+			onClick: () => d(!0),
+			children: "Открыть сценарий редактирования"
+		}), /* @__PURE__ */ l(i, {
+			...t,
+			isOpen: o,
+			onClose: () => d(!1),
+			height: "min(34rem, 70dvh)",
+			children: [
+				/* @__PURE__ */ c(n, { children: /* @__PURE__ */ l("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						gap: 12,
+						padding: 12,
+						borderRadius: 8,
+						background: "var(--surface-1)",
+						border: "1px solid var(--border-1)"
+					},
+					children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("div", {
+						style: { fontWeight: 600 },
+						children: "Черновик обновлён автоматически"
+					}), /* @__PURE__ */ c("div", {
+						style: { opacity: .72 },
+						children: "Последнее сохранение: 2 минуты назад"
+					})] }), /* @__PURE__ */ c(e, {
+						variant: "transparent",
+						children: "Сбросить"
+					})]
+				}) }),
+				/* @__PURE__ */ c(a, { children: /* @__PURE__ */ c(f, {}) }),
+				/* @__PURE__ */ l(r, { children: [/* @__PURE__ */ c(e, {
+					variant: "transparent",
+					onClick: () => d(!1),
+					children: "Отмена"
+				}), /* @__PURE__ */ c(e, {
+					variant: "success",
+					onClick: () => d(!1),
+					children: "Применить"
+				})] })
+			]
+		})] });
+	}
+}, g = {
+	name: "Длинный контент",
+	render: (t) => {
+		let [n, o] = u(!1);
+		return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(e, {
+			onClick: () => o(!0),
+			children: "Открыть длинный контент"
+		}), /* @__PURE__ */ l(i, {
+			...t,
+			isOpen: n,
+			onClose: () => o(!1),
+			size: "lg",
+			height: "min(38rem, 75dvh)",
+			title: "Журнал изменений",
+			children: [/* @__PURE__ */ c(a, { children: /* @__PURE__ */ c("div", {
+				style: {
+					display: "grid",
+					gap: 12
+				},
+				children: Array.from({ length: 18 }, (e, t) => /* @__PURE__ */ l("div", {
+					style: {
+						padding: 12,
+						borderRadius: 8,
+						border: "1px solid var(--border-1)",
+						background: "var(--surface-1)"
+					},
+					children: [/* @__PURE__ */ l("div", {
+						style: { fontWeight: 600 },
+						children: ["Событие #", t + 1]
+					}), /* @__PURE__ */ c("div", {
+						style: { opacity: .72 },
+						children: "Пользователь обновил настройки карточки, изменил состав полей и подтвердил сохранение конфигурации."
+					})]
+				}, t))
+			}) }), /* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(e, {
+				onClick: () => o(!1),
+				children: "Закрыть"
+			}) })]
+		})] });
+	}
+}, _ = {
+	name: "Размеры",
+	render: () => {
+		let [t, n] = u(null);
+		return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
+			style: {
+				display: "flex",
+				flexWrap: "wrap",
+				gap: 12,
+				justifyContent: "center"
+			},
+			children: [
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"inside"
+			].map((t) => /* @__PURE__ */ c(e, {
+				variant: "transparent",
+				onClick: () => n(t),
+				children: t.toUpperCase()
+			}, t))
+		}), t && /* @__PURE__ */ l(i, {
+			isOpen: !0,
+			onClose: () => n(null),
+			size: t,
+			title: `Размер ${t.toUpperCase()}`,
+			children: [/* @__PURE__ */ c(a, { children: /* @__PURE__ */ l("div", {
+				style: {
+					display: "grid",
+					gap: 12
+				},
+				children: [/* @__PURE__ */ c("div", { children: "Этот сценарий помогает быстро сравнить ширину и поведение модалки для разных размеров." }), /* @__PURE__ */ c("div", {
+					style: { opacity: .72 },
+					children: "Проверьте отступы, читабельность и поведение при `Escape`."
+				})]
+			}) }), /* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(e, {
+				onClick: () => n(null),
+				children: "Понятно"
+			}) })]
+		})] });
+	}
+}, v = {
+	name: "Стек модалок",
+	render: (n) => {
+		let [o, d] = u(!1), [f, p] = u(!1);
+		return /* @__PURE__ */ l(s, { children: [
+			/* @__PURE__ */ c(e, {
+				onClick: () => d(!0),
+				children: "Открыть первую модалку"
+			}),
+			/* @__PURE__ */ l(i, {
+				...n,
+				isOpen: o,
+				onClose: () => {
+					p(!1), d(!1);
+				},
+				size: "lg",
+				title: "Первая модалка",
+				children: [/* @__PURE__ */ c(a, { children: /* @__PURE__ */ l("div", {
+					style: {
+						display: "grid",
+						gap: 16
+					},
+					children: [/* @__PURE__ */ c("div", { children: "Откройте вторую модалку и проверьте, что `Escape` закрывает только верхний слой." }), /* @__PURE__ */ c(e, {
+						variant: "transparent",
+						onClick: () => p(!0),
+						children: "Открыть вторую модалку"
+					})]
+				}) }), /* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(e, {
+					variant: "transparent",
+					onClick: () => d(!1),
+					children: "Закрыть первую"
+				}) })]
+			}),
+			/* @__PURE__ */ l(i, {
+				isOpen: f,
+				onClose: () => p(!1),
+				size: "sm",
+				title: "Вторая модалка",
+				children: [/* @__PURE__ */ c(a, { children: /* @__PURE__ */ l("div", {
+					style: {
+						display: "grid",
+						gap: 12
+					},
+					children: [/* @__PURE__ */ c("div", { children: "Эта модалка должна считаться верхней в стеке." }), /* @__PURE__ */ c(t, {
+						label: "Короткое поле",
+						value: "Фокус внутри",
+						onChange: () => {}
+					})]
+				}) }), /* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(e, {
+					onClick: () => p(!1),
+					children: "Закрыть вторую"
+				}) })]
+			})
+		] });
+	}
+};
+//#endregion
+export { m as Controlled, g as ScrollableContent, _ as Sizes, v as StackedModals, h as WithToolbarAndFooter, p as default };
+
+//# sourceMappingURL=Modal.stories.js.map

package/dist/modal/stories/Modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.js","names":[],"sources":["../../../src/modal/stories/Modal.stories.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { Input } from \"../../input\";\nimport { Modal, ModalContent, ModalFooter, ModalManagerProvider, ModalToolbar } from \"../index\";\n\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\n\nfunction StoryCanvas({ children }: { children: React.ReactNode }) {\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tminHeight: \"60dvh\",\n\t\t\t\tpadding: 24,\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\talignItems: \"center\",\n\t\t\t\tjustifyContent: \"center\"\n\t\t\t}}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nfunction DemoFormContent() {\n\tconst [name, setName] = useState(\"Алексей\");\n\tconst [department, setDepartment] = useState(\"Департамент автоматизации бизнеса\");\n\n\treturn (\n\t\t<div style={{ display: \"grid\", gap: 16 }}>\n\t\t\t<Input label=\"Имя\" value={name} onChange={setName} placeholder=\"Введите имя\" />\n\t\t\t<Input label=\"Подразделение\" value={department} onChange={setDepartment} placeholder=\"Введите подразделение\" />\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tpadding: 12,\n\t\t\t\t\tborderRadius: 8,\n\t\t\t\t\tbackground: \"var(--surface-1)\",\n\t\t\t\t\tborder: \"1px solid var(--border-1)\"\n\t\t\t\t}}>\n\t\t\t\tТекущие значения: {name || \"не указано\"}, {department || \"не указано\"}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nconst meta = {\n\ttitle: \"Shared/UI/Modal\",\n\tcomponent: Modal,\n\tparameters: {\n\t\tatomicCanvas: true,\n\t\tlayout: \"fullscreen\",\n\t\tdocs: {\n\t\t\tdescription: {\n\t\t\t\tcomponent:\n\t\t\t\t\t\"Композиционная модалка с `Toolbar`, `Content` и `Footer`, поддержкой focus trap, возврата фокуса, закрытия по `Escape` и менеджером стека через `ModalManagerProvider`.\"\n\t\t\t}\n\t\t}\n\t},\n\ttags: [\"autodocs\"],\n\tdecorators: [\n\t\t(story) => (\n\t\t\t<ModalManagerProvider>\n\t\t\t\t<StoryCanvas>{story()}</StoryCanvas>\n\t\t\t</ModalManagerProvider>\n\t\t)\n\t],\n\targs: {\n\t\tisOpen: false,\n\t\ttitle: \"Редактирование профиля\",\n\t\tsize: \"md\",\n\t\theight: undefined,\n\t\tonClose: () => {},\n\t\tchildren: (\n\t\t\t<>\n\t\t\t\t<ModalContent>\n\t\t\t\t\t<DemoFormContent />\n\t\t\t\t</ModalContent>\n\t\t\t\t<ModalFooter>\n\t\t\t\t\t<Button variant=\"transparent\">Отмена</Button>\n\t\t\t\t\t<Button>Сохранить</Button>\n\t\t\t\t</ModalFooter>\n\t\t\t</>\n\t\t)\n\t},\n\targTypes: {\n\t\tisOpen: {\n\t\t\tdescription: \"Управляет видимостью модального окна.\",\n\t\t\tcontrol: \"boolean\"\n\t\t},\n\t\ttitle: {\n\t\t\tdescription: \"Заголовок модального окна.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tsize: {\n\t\t\tdescription: \"Предустановленный размер модального окна.\",\n\t\t\tcontrol: \"inline-radio\",\n\t\t\toptions: [\"sm\", \"md\", \"lg\", \"xl\", \"inside\"]\n\t\t},\n\t\theight: {\n\t\t\tdescription: \"Явная высота body-области модалки.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tonClose: {\n\t\t\tdescription: \"Вызывается при закрытии по кнопке, `Escape` или пользовательскому действию.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tchildren: {\n\t\t\tdescription: \"Композиция из `ModalToolbar`, `ModalContent`, `ModalFooter`.\",\n\t\t\tcontrol: false\n\t\t}\n\t}\n} satisfies Meta<typeof Modal>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Controlled: Story = {\n\tname: \"Управляемая модалка\",\n\trender: (args) => {\n\t\tconst [open, setOpen] = useState(false);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Button onClick={() => setOpen(true)}>Открыть модалку</Button>\n\t\t\t\t<Modal {...args} isOpen={open} onClose={() => setOpen(false)}>\n\t\t\t\t\t<ModalContent>\n\t\t\t\t\t\t<DemoFormContent />\n\t\t\t\t\t</ModalContent>\n\t\t\t\t\t<ModalFooter>\n\t\t\t\t\t\t<Button variant=\"transparent\" onClick={() => setOpen(false)}>\n\t\t\t\t\t\t\tОтмена\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button onClick={() => setOpen(false)}>Сохранить</Button>\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t</Modal>\n\t\t\t</>\n\t\t);\n\t}\n};\n\nexport const WithToolbarAndFooter: Story = {\n\tname: \"Полная композиция\",\n\trender: (args) => {\n\t\tconst [open, setOpen] = useState(false);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Button onClick={() => setOpen(true)}>Открыть сценарий редактирования</Button>\n\t\t\t\t<Modal {...args} isOpen={open} onClose={() => setOpen(false)} height=\"min(34rem, 70dvh)\">\n\t\t\t\t\t<ModalToolbar>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\t\tjustifyContent: \"space-between\",\n\t\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t\t\tpadding: 12,\n\t\t\t\t\t\t\t\tborderRadius: 8,\n\t\t\t\t\t\t\t\tbackground: \"var(--surface-1)\",\n\t\t\t\t\t\t\t\tborder: \"1px solid var(--border-1)\"\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<div style={{ fontWeight: 600 }}>Черновик обновлён автоматически</div>\n\t\t\t\t\t\t\t\t<div style={{ opacity: 0.72 }}>Последнее сохранение: 2 минуты назад</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Button variant=\"transparent\">Сбросить</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ModalToolbar>\n\t\t\t\t\t<ModalContent>\n\t\t\t\t\t\t<DemoFormContent />\n\t\t\t\t\t</ModalContent>\n\t\t\t\t\t<ModalFooter>\n\t\t\t\t\t\t<Button variant=\"transparent\" onClick={() => setOpen(false)}>\n\t\t\t\t\t\t\tОтмена\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button variant=\"success\" onClick={() => setOpen(false)}>\n\t\t\t\t\t\t\tПрименить\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t</Modal>\n\t\t\t</>\n\t\t);\n\t}\n};\n\nexport const ScrollableContent: Story = {\n\tname: \"Длинный контент\",\n\trender: (args) => {\n\t\tconst [open, setOpen] = useState(false);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Button onClick={() => setOpen(true)}>Открыть длинный контент</Button>\n\t\t\t\t<Modal {...args} isOpen={open} onClose={() => setOpen(false)} size=\"lg\" height=\"min(38rem, 75dvh)\" title=\"Журнал изменений\">\n\t\t\t\t\t<ModalContent>\n\t\t\t\t\t\t<div style={{ display: \"grid\", gap: 12 }}>\n\t\t\t\t\t\t\t{Array.from({ length: 18 }, (_, index) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tpadding: 12,\n\t\t\t\t\t\t\t\t\t\tborderRadius: 8,\n\t\t\t\t\t\t\t\t\t\tborder: \"1px solid var(--border-1)\",\n\t\t\t\t\t\t\t\t\t\tbackground: \"var(--surface-1)\"\n\t\t\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t\t\t<div style={{ fontWeight: 600 }}>Событие #{index + 1}</div>\n\t\t\t\t\t\t\t\t\t<div style={{ opacity: 0.72 }}>\n\t\t\t\t\t\t\t\t\t\tПользователь обновил настройки карточки, изменил состав полей и подтвердил сохранение конфигурации.\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ModalContent>\n\t\t\t\t\t<ModalFooter>\n\t\t\t\t\t\t<Button onClick={() => setOpen(false)}>Закрыть</Button>\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t</Modal>\n\t\t\t</>\n\t\t);\n\t}\n};\n\nexport const Sizes: Story = {\n\tname: \"Размеры\",\n\trender: () => {\n\t\tconst [openSize, setOpenSize] = useState<\"sm\" | \"md\" | \"lg\" | \"xl\" | \"inside\" | null>(null);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 12, justifyContent: \"center\" }}>\n\t\t\t\t\t{([\"sm\", \"md\", \"lg\", \"xl\", \"inside\"] as const).map((size) => (\n\t\t\t\t\t\t<Button key={size} variant=\"transparent\" onClick={() => setOpenSize(size)}>\n\t\t\t\t\t\t\t{size.toUpperCase()}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\n\t\t\t\t{openSize && (\n\t\t\t\t\t<Modal isOpen onClose={() => setOpenSize(null)} size={openSize} title={`Размер ${openSize.toUpperCase()}`}>\n\t\t\t\t\t\t<ModalContent>\n\t\t\t\t\t\t\t<div style={{ display: \"grid\", gap: 12 }}>\n\t\t\t\t\t\t\t\t<div>Этот сценарий помогает быстро сравнить ширину и поведение модалки для разных размеров.</div>\n\t\t\t\t\t\t\t\t<div style={{ opacity: 0.72 }}>Проверьте отступы, читабельность и поведение при `Escape`.</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ModalContent>\n\t\t\t\t\t\t<ModalFooter>\n\t\t\t\t\t\t\t<Button onClick={() => setOpenSize(null)}>Понятно</Button>\n\t\t\t\t\t\t</ModalFooter>\n\t\t\t\t\t</Modal>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t}\n};\n\nexport const StackedModals: Story = {\n\tname: \"Стек модалок\",\n\trender: (args) => {\n\t\tconst [outerOpen, setOuterOpen] = useState(false);\n\t\tconst [innerOpen, setInnerOpen] = useState(false);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Button onClick={() => setOuterOpen(true)}>Открыть первую модалку</Button>\n\n\t\t\t\t<Modal\n\t\t\t\t\t{...args}\n\t\t\t\t\tisOpen={outerOpen}\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetInnerOpen(false);\n\t\t\t\t\t\tsetOuterOpen(false);\n\t\t\t\t\t}}\n\t\t\t\t\tsize=\"lg\"\n\t\t\t\t\ttitle=\"Первая модалка\">\n\t\t\t\t\t<ModalContent>\n\t\t\t\t\t\t<div style={{ display: \"grid\", gap: 16 }}>\n\t\t\t\t\t\t\t<div>Откройте вторую модалку и проверьте, что `Escape` закрывает только верхний слой.</div>\n\t\t\t\t\t\t\t<Button variant=\"transparent\" onClick={() => setInnerOpen(true)}>\n\t\t\t\t\t\t\t\tОткрыть вторую модалку\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ModalContent>\n\t\t\t\t\t<ModalFooter>\n\t\t\t\t\t\t<Button variant=\"transparent\" onClick={() => setOuterOpen(false)}>\n\t\t\t\t\t\t\tЗакрыть первую\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t</Modal>\n\n\t\t\t\t<Modal isOpen={innerOpen} onClose={() => setInnerOpen(false)} size=\"sm\" title=\"Вторая модалка\">\n\t\t\t\t\t<ModalContent>\n\t\t\t\t\t\t<div style={{ display: \"grid\", gap: 12 }}>\n\t\t\t\t\t\t\t<div>Эта модалка должна считаться верхней в стеке.</div>\n\t\t\t\t\t\t\t<Input label=\"Короткое поле\" value={\"Фокус внутри\"} onChange={() => {}} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ModalContent>\n\t\t\t\t\t<ModalFooter>\n\t\t\t\t\t\t<Button onClick={() => setInnerOpen(false)}>Закрыть вторую</Button>\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t</Modal>\n\t\t\t</>\n\t\t);\n\t}\n};\n"],"mappings":"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"}

package/dist/modal/types.d.ts

@@ -0,0 +1,8 @@
+export declare const ModalSize: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    inside: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/modal/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/modal/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC"}

package/dist/modal/useModalManager.d.ts

@@ -0,0 +1,13 @@
+export declare const ModalManagerContext: import("react").Context<{
+    modals: string[];
+    openModal: (id: string) => void;
+    closeModal: (id: string) => void;
+    isTopModal: (id: string) => boolean;
+}>;
+export declare const useModalManager: () => {
+    modals: string[];
+    openModal: (id: string) => void;
+    closeModal: (id: string) => void;
+    isTopModal: (id: string) => boolean;
+};
+//# sourceMappingURL=useModalManager.d.ts.map

package/dist/modal/useModalManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalManager.d.ts","sourceRoot":"","sources":["../../src/modal/useModalManager.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB;YACvB,MAAM,EAAE;eACL,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;gBACnB,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;gBACpB,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO;EAMlC,CAAC;AAEH,eAAO,MAAM,eAAe;YAXnB,MAAM,EAAE;eACL,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;gBACnB,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;gBACpB,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO;CAQgC,CAAC"}

package/dist/multi-select/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ui";
+//# sourceMappingURL=index.d.ts.map

package/dist/multi-select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/multi-select/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAC"}

package/dist/multi-select/index.js

@@ -0,0 +1,35 @@
+import { n as e, t } from "../chunks/MultiSelect-CBqTylqO.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/multi-select/ui/SerializableMultiSelect.tsx
+function r(e, t) {
+	return e[t];
+}
+function i(e, t, n) {
+	let i = e[t];
+	if (typeof i == "string") return i;
+	let a = r(e, n);
+	return typeof a == "string" ? a : String(a);
+}
+function a({ label: e, description: a, disabled: o, placeholder: s, size: c, options: l, value: u, onChange: d, optionKey: f, optionLabel: p, renderCode: m }) {
+	let h = l.map((e) => ({
+		key: String(r(e, f)),
+		text: i(e, p, f)
+	})), g = new Set((u ?? []).map((e) => String(e))), _ = h.filter((e) => g.has(e.key));
+	return /* @__PURE__ */ n(t, {
+		label: e,
+		description: a,
+		disabled: o,
+		placeholder: s,
+		size: c,
+		items: h,
+		codeKey: "key",
+		textKey: "text",
+		hideCode: m ? void 0 : !0,
+		value: _,
+		onChange: (e) => d(e.map((e) => e.key))
+	});
+}
+//#endregion
+export { t as MultiSelect, e as MultiSelectToken, a as SerializableMultiSelect };
+
+//# sourceMappingURL=index.js.map

package/dist/multi-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/multi-select/ui/SerializableMultiSelect.tsx"],"sourcesContent":["import type { CollectionItem } from \"@ryuzaki13/react-foundation-lib/odata\";\n\nimport { MultiSelect } from \"./MultiSelect\";\n\nimport type { UiBaseProps } from \"../../types\";\n\ntype SerializableOptionRecord = Record<string, unknown>;\n\ntype SerializableOptionKeyField<TOption extends SerializableOptionRecord> = {\n\t[K in keyof TOption]: Extract<TOption[K], string> extends never ? never : K;\n}[keyof TOption];\n\nexport interface SerializableMultiSelectProps<\n\tTOption extends SerializableOptionRecord,\n\tTOptionKey extends SerializableOptionKeyField<TOption>,\n\tTOptionLabel extends keyof TOption\n> extends UiBaseProps<Extract<TOption[TOptionKey], string>[]> {\n\toptions: readonly TOption[];\n\toptionKey: TOptionKey;\n\toptionLabel: TOptionLabel;\n\trenderCode?: true;\n}\n\nfunction getSerializableOptionKey<TOption extends SerializableOptionRecord, TOptionKey extends SerializableOptionKeyField<TOption>>(\n\toption: TOption,\n\toptionKey: TOptionKey\n): Extract<TOption[TOptionKey], string> {\n\treturn option[optionKey] as Extract<TOption[TOptionKey], string>;\n}\n\nfunction getSerializableOptionLabel<\n\tTOption extends SerializableOptionRecord,\n\tTOptionKey extends SerializableOptionKeyField<TOption>,\n\tTOptionLabel extends keyof TOption\n>(option: TOption, optionLabel: TOptionLabel, optionKey: TOptionKey): string {\n\tconst label = option[optionLabel];\n\n\tif (typeof label === \"string\") {\n\t\treturn label;\n\t}\n\n\tconst key = getSerializableOptionKey(option, optionKey);\n\treturn typeof key === \"string\" ? key : String(key);\n}\n\nexport function SerializableMultiSelect<\n\tTOption extends SerializableOptionRecord,\n\tTOptionKey extends SerializableOptionKeyField<TOption>,\n\tTOptionLabel extends keyof TOption\n>({\n\tlabel,\n\tdescription,\n\tdisabled,\n\tplaceholder,\n\tsize,\n\toptions,\n\tvalue,\n\tonChange,\n\toptionKey,\n\toptionLabel,\n\trenderCode\n}: SerializableMultiSelectProps<TOption, TOptionKey, TOptionLabel>) {\n\t// Как будто можно не мемоизировать, нет смысла\n\tconst items = options.map<CollectionItem>((option) => ({\n\t\tkey: String(getSerializableOptionKey(option, optionKey)),\n\t\ttext: getSerializableOptionLabel(option, optionLabel, optionKey)\n\t}));\n\tconst selectedKeys = new Set((value ?? []).map((item) => String(item)));\n\tconst selectedItems = items.filter((item) => selectedKeys.has(item.key));\n\n\treturn (\n\t\t<MultiSelect\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\tdisabled={disabled}\n\t\t\tplaceholder={placeholder}\n\t\t\tsize={size}\n\t\t\titems={items}\n\t\t\tcodeKey=\"key\"\n\t\t\ttextKey=\"text\"\n\t\t\thideCode={renderCode ? undefined : true}\n\t\t\tvalue={selectedItems}\n\t\t\tonChange={(nextItems) => onChange(nextItems.map((item) => item.key) as Extract<TOption[TOptionKey], string>[])}\n\t\t/>\n\t);\n}\n"],"mappings":";;;AAuBA,SAAS,EACR,GACA,GACuC;CACvC,OAAO,EAAO;AACf;AAEA,SAAS,EAIP,GAAiB,GAA2B,GAA+B;CAC5E,IAAM,IAAQ,EAAO;CAErB,IAAI,OAAO,KAAU,UACpB,OAAO;CAGR,IAAM,IAAM,EAAyB,GAAQ,CAAS;CACtD,OAAO,OAAO,KAAQ,WAAW,IAAM,OAAO,CAAG;AAClD;AAEA,SAAgB,EAId,EACD,UACA,gBACA,aACA,gBACA,SACA,YACA,UACA,aACA,cACA,gBACA,iBACmE;CAEnE,IAAM,IAAQ,EAAQ,KAAqB,OAAY;EACtD,KAAK,OAAO,EAAyB,GAAQ,CAAS,CAAC;EACvD,MAAM,EAA2B,GAAQ,GAAa,CAAS;CAChE,EAAE,GACI,IAAe,IAAI,KAAK,KAAS,CAAC,EAAA,CAAG,KAAK,MAAS,OAAO,CAAI,CAAC,CAAC,GAChE,IAAgB,EAAM,QAAQ,MAAS,EAAa,IAAI,EAAK,GAAG,CAAC;CAEvE,OACC,kBAAC,GAAD;EACQ;EACM;EACH;EACG;EACP;EACC;EACP,SAAQ;EACR,SAAQ;EACR,UAAU,IAAa,KAAA,IAAY;EACnC,OAAO;EACP,WAAW,MAAc,EAAS,EAAU,KAAK,MAAS,EAAK,GAAG,CAA2C;CAC7G,CAAA;AAEH"}

package/dist/multi-select/model/index.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=index.d.ts.map

package/dist/multi-select/model/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/multi-select/model/index.ts"],"names":[],"mappings":""}

package/dist/multi-select/ui/MultiSelect.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import type { CollectionItem } from "@ryuzaki13/react-foundation-lib/odata";
+import { type UiBaseProps } from "../../types";
+export interface MultiSelectItemState {
+    selected: boolean;
+    active: boolean;
+    disabled: boolean;
+    query: string;
+    highlightQuery: string;
+}
+export interface MultiSelectRenderContext {
+    selectedItems: CollectionItem[];
+    committedSelectedItems: CollectionItem[];
+    availableItems: CollectionItem[];
+    query: string;
+    open: boolean;
+    clearSelection: () => void;
+    selectAll: () => void;
+    deselectAll: () => void;
+}
+export interface MultiSelectOptionDisableContext {
+    selectedItems: CollectionItem[];
+    committedSelectedItems: CollectionItem[];
+    selectedKeys: ReadonlySet<string>;
+    open: boolean;
+}
+type MultiSelectOptionalRenderer<TContext> = ((context: TContext) => React.ReactNode) | null | false;
+interface MultiSelectRenderers {
+    renderToken?: MultiSelectOptionalRenderer<MultiSelectRenderContext>;
+    renderToolbar?: MultiSelectOptionalRenderer<MultiSelectRenderContext>;
+    renderItem?: (item: CollectionItem, state: MultiSelectItemState) => React.ReactNode;
+}
+export interface MultiSelectProps<TOption extends Record<string, string> = CollectionItem> extends MultiSelectRenderers, UiBaseProps<TOption[]> {
+    codeKey: string;
+    textKey?: string;
+    hideCode?: boolean;
+    query?: string;
+    defaultQuery?: string;
+    highlightQuery?: string;
+    onQuery?: (value: string) => void;
+    defaultFilter?: boolean;
+    items: TOption[];
+    getOptionDisabled?: (item: TOption, context: MultiSelectOptionDisableContext) => boolean;
+    onOpen?: () => void;
+    onClose?: (value: TOption[]) => void;
+    error?: string;
+    isLoading?: boolean;
+}
+/**
+ * Поле множественного выбора с внутренним черновиком значений и подтверждением выбора при закрытии списка.
+ * Подходит как для самостоятельного использования, так и как базовый слой для OData-оберток.
+ */
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps<CollectionItem> & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=MultiSelect.d.ts.map

package/dist/multi-select/ui/MultiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/multi-select/ui/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqF,MAAM,OAAO,CAAC;AAI1G,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAiB5E,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AA0B/C,MAAM,WAAW,oBAAoB;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,wBAAwB;IACxC,aAAa,EAAE,cAAc,EAAE,CAAC;IAChC,sBAAsB,EAAE,cAAc,EAAE,CAAC;IACzC,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,+BAA+B;IAC/C,aAAa,EAAE,cAAc,EAAE,CAAC;IAChC,sBAAsB,EAAE,cAAc,EAAE,CAAC;IACzC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,EAAE,OAAO,CAAC;CACd;AAED,KAAK,2BAA2B,CAAC,QAAQ,IAAI,CAAC,CAAC,OAAO,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;AAErG,UAAU,oBAAoB;IAC7B,WAAW,CAAC,EAAE,2BAA2B,CAAC,wBAAwB,CAAC,CAAC;IACpE,aAAa,CAAC,EAAE,2BAA2B,CAAC,wBAAwB,CAAC,CAAC;IACtE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAC;CACpF;AAED,MAAM,WAAW,gBAAgB,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,cAAc,CACxF,SAAQ,oBAAoB,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,+BAA+B,KAAK,OAAO,CAAC;IACzF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAkHD;;;GAGG;AACH,eAAO,MAAM,WAAW,2GAoYvB,CAAC"}

package/dist/multi-select/ui/MultiSelectOption.d.ts

@@ -0,0 +1,14 @@
+import { CollectionItem } from "@ryuzaki13/react-foundation-lib/odata";
+interface MultiSelectOptionProps {
+    item: CollectionItem;
+    textKey: string;
+    codeKey?: string;
+    highlight?: string;
+    selected: boolean;
+}
+/**
+ * Отдельная опция внутри `MultiSelect`. Отрисовывает состояние выбора и подсветку текста для найденных совпадений.
+ */
+export declare function MultiSelectOption({ item, textKey, codeKey, highlight }: MultiSelectOptionProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MultiSelectOption.d.ts.map

package/dist/multi-select/ui/MultiSelectOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOption.d.ts","sourceRoot":"","sources":["../../../src/multi-select/ui/MultiSelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAIvE,UAAU,sBAAsB;IAC/B,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,sBAAsB,+BAE9F"}

package/dist/multi-select/ui/MultiSelectOptionSkeleton.d.ts

@@ -0,0 +1,10 @@
+interface MultiSelectOptionSkeletonProps {
+    text: string;
+    isError?: boolean;
+}
+/**
+ * Скелетон строки опции для `MultiSelect`. Используется во время загрузки или при отображении ошибок получения списка.
+ */
+export declare function MultiSelectOptionSkeleton({ text, isError }: MultiSelectOptionSkeletonProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MultiSelectOptionSkeleton.d.ts.map

package/dist/multi-select/ui/MultiSelectOptionSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOptionSkeleton.d.ts","sourceRoot":"","sources":["../../../src/multi-select/ui/MultiSelectOptionSkeleton.tsx"],"names":[],"mappings":"AAGA,UAAU,8BAA8B;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,8BAA8B,+BAO1F"}

package/dist/multi-select/ui/MultiSelectOptionsToolbar.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Панель массовых действий для `MultiSelect`. Позволяет быстро выбрать все доступные элементы или снять выбор.
+ */
+export declare function MultiSelectOptionsToolbar({ onSelectAll, onDeselectAll }: {
+    onSelectAll: () => void;
+    onDeselectAll: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=MultiSelectOptionsToolbar.d.ts.map

package/dist/multi-select/ui/MultiSelectOptionsToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOptionsToolbar.d.ts","sourceRoot":"","sources":["../../../src/multi-select/ui/MultiSelectOptionsToolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE;IAAE,WAAW,EAAE,MAAM,IAAI,CAAC;IAAC,aAAa,EAAE,MAAM,IAAI,CAAA;CAAE,+BAqB/H"}

package/dist/multi-select/ui/MultiSelectToken.d.ts

@@ -0,0 +1,9 @@
+interface MultiSelectTokenProps {
+    value: string | undefined;
+}
+/**
+ * Токен выбранного значения в `MultiSelect`. Показывает выбранный элемент и кнопку его удаления из текущего набора.
+ */
+export declare function MultiSelectToken({ value }: MultiSelectTokenProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=MultiSelectToken.d.ts.map

package/dist/multi-select/ui/MultiSelectToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectToken.d.ts","sourceRoot":"","sources":["../../../src/multi-select/ui/MultiSelectToken.tsx"],"names":[],"mappings":"AAEA,UAAU,qBAAqB;IAC9B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,qBAAqB,sCAQhE"}