@ryuzaki13/react-foundation-ui 0.1.0

package/dist/sortable/stories/Sortable.stories.js

@@ -0,0 +1,255 @@
+import { s as e, t } from "../../chunks/sortable-CwDHC3CA.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useState as i } from "react";
+//#region src/sortable/stories/Sortable.stories.tsx
+var a = {
+	display: "grid",
+	gridTemplateColumns: "var(--control-height) 1fr",
+	alignItems: "center",
+	gap: "var(--space-sm)",
+	padding: "var(--space-sm)",
+	border: "var(--border)",
+	borderRadius: "var(--radius-sm)",
+	background: "var(--surface-0)"
+}, o = [
+	"Alpha",
+	"Bravo",
+	"Charlie",
+	"Delta"
+], s = [
+	"Фильтры",
+	"Графики",
+	"Сводка",
+	"История"
+], c = [
+	"Карточка 1",
+	"Карточка 2",
+	"Карточка 3",
+	"Карточка 4",
+	"Карточка 5",
+	"Карточка 6"
+];
+function l(e, t, n) {
+	let r = [...e], [i] = r.splice(t, 1);
+	return r.splice(n, 0, i), r;
+}
+function u(e) {
+	switch (e) {
+		case "horizontal": return {
+			display: "flex",
+			gap: "var(--space-sm)",
+			overflowX: "auto"
+		};
+		case "grid": return {
+			display: "grid",
+			gap: "var(--space-sm)",
+			gridTemplateColumns: "repeat(auto-fill, minmax(12rem, 1fr))"
+		};
+		default: return {
+			display: "grid",
+			gap: "var(--space-sm)"
+		};
+	}
+}
+function d(o) {
+	let [s, c] = i(o.initialItems), d = new Set(o.disabledIds ?? []);
+	return /* @__PURE__ */ r("div", {
+		style: {
+			display: "grid",
+			gap: 12
+		},
+		children: [/* @__PURE__ */ n(t.Root, {
+			onDragEnd: (t) => {
+				let n = e({
+					event: t,
+					items: { [o.containerId]: s }
+				});
+				n && c((e) => l(e, n.fromIndex, n.toIndex));
+			},
+			children: /* @__PURE__ */ n(t.Container, {
+				containerId: o.containerId,
+				items: s,
+				layout: o.layout,
+				children: /* @__PURE__ */ n("div", {
+					style: u(o.layout),
+					children: s.map((e) => /* @__PURE__ */ r(t.Item, {
+						id: e,
+						disabled: d.has(e),
+						style: {
+							...a,
+							minWidth: o.itemWidth
+						},
+						children: [/* @__PURE__ */ n(t.DragHandle, { title: `Перетащить ${e}` }), /* @__PURE__ */ n("div", { children: e })]
+					}, e))
+				})
+			})
+		}), /* @__PURE__ */ n("div", {
+			style: {
+				fontSize: 14,
+				opacity: .8
+			},
+			children: "Порядок элементов изменяется локально в рамках story."
+		})]
+	});
+}
+var f = {
+	title: "Shared/UI/Sortable",
+	component: d,
+	args: {
+		containerId: "sortable-demo",
+		layout: "vertical",
+		initialItems: o,
+		itemWidth: void 0,
+		disabledIds: []
+	},
+	parameters: {
+		atomicCanvas: !0,
+		layout: "padded"
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		containerId: {
+			description: "Идентификатор `SortableContext`, который используется для вычисления reorder внутри контейнера.",
+			control: "text"
+		},
+		layout: {
+			description: "Режим раскладки и стратегия сортировки: вертикальный список, горизонтальный список или grid.",
+			control: "inline-radio",
+			options: [
+				"vertical",
+				"horizontal",
+				"grid"
+			]
+		},
+		initialItems: {
+			description: "Начальный набор элементов. Внутри story состояние управляется локально.",
+			control: !1
+		},
+		itemWidth: {
+			description: "Минимальная ширина карточки; полезна для горизонтального режима.",
+			control: "text"
+		},
+		disabledIds: {
+			description: "Список id, для которых drag-handle отключен.",
+			control: !1
+		}
+	}
+}, p = {}, m = { args: {
+	containerId: "sortable-horizontal",
+	layout: "horizontal",
+	initialItems: s,
+	itemWidth: "12rem"
+} }, h = { args: {
+	containerId: "sortable-grid",
+	layout: "grid",
+	initialItems: c
+} }, g = { args: {
+	containerId: "sortable-disabled",
+	layout: "vertical",
+	initialItems: o,
+	disabledIds: ["Bravo", "Delta"]
+} }, _ = { args: {
+	containerId: "sortable-handle-only",
+	layout: "vertical",
+	initialItems: [
+		"Пункт 1",
+		"Пункт 2",
+		"Пункт 3",
+		"Пункт 4"
+	]
+} }, v = {
+	args: {
+		containerId: "top",
+		layout: "vertical",
+		initialItems: ["Группа A", "Группа B"]
+	},
+	render: () => {
+		let [o, s] = i(["Группа A", "Группа B"]), [c, u] = i({
+			"Группа A": [
+				"A.1",
+				"A.2",
+				"A.3"
+			],
+			"Группа B": ["B.1", "B.2"]
+		});
+		return /* @__PURE__ */ r("div", {
+			style: {
+				display: "grid",
+				gap: 12
+			},
+			children: [/* @__PURE__ */ n(t.Root, {
+				onDragEnd: (t) => {
+					let n = e({
+						event: t,
+						items: {
+							top: o,
+							...Object.fromEntries(o.map((e) => [`parent:${e}`, c[e] ?? []]))
+						}
+					});
+					if (!n) return;
+					if (n.containerId === "top") {
+						s((e) => l(e, n.fromIndex, n.toIndex));
+						return;
+					}
+					let r = String(n.containerId).slice(7);
+					u((e) => ({
+						...e,
+						[r]: l(e[r] ?? [], n.fromIndex, n.toIndex)
+					}));
+				},
+				children: /* @__PURE__ */ n(t.Container, {
+					containerId: "top",
+					items: o,
+					children: /* @__PURE__ */ n("div", {
+						style: {
+							display: "grid",
+							gap: "var(--space-md)"
+						},
+						children: o.map((e) => /* @__PURE__ */ r(t.Item, {
+							id: e,
+							style: {
+								...a,
+								gridTemplateColumns: "var(--control-height) 1fr",
+								alignItems: "start"
+							},
+							children: [/* @__PURE__ */ n(t.DragHandle, { title: `Перетащить ${e}` }), /* @__PURE__ */ r("div", {
+								style: {
+									display: "grid",
+									gap: "var(--space-sm)"
+								},
+								children: [/* @__PURE__ */ n("strong", { children: e }), /* @__PURE__ */ n(t.Container, {
+									containerId: `parent:${e}`,
+									items: c[e] ?? [],
+									children: /* @__PURE__ */ n("div", {
+										style: {
+											display: "grid",
+											gap: "var(--space-xs)"
+										},
+										children: (c[e] ?? []).map((e) => /* @__PURE__ */ r(t.Item, {
+											id: e,
+											style: {
+												...a,
+												background: "var(--surface-1)"
+											},
+											children: [/* @__PURE__ */ n(t.DragHandle, { title: `Перетащить ${e}` }), /* @__PURE__ */ n("div", { children: e })]
+										}, e))
+									})
+								})]
+							})]
+						}, e))
+					})
+				})
+			}), /* @__PURE__ */ n("div", {
+				style: {
+					fontSize: 14,
+					opacity: .8
+				},
+				children: "Вложенные контейнеры сортируются независимо и используют общий `Sortable.Root`."
+			})]
+		});
+	}
+};
+//#endregion
+export { p as Basic, g as DisabledItems, h as GridCards, _ as HandleOnly, m as HorizontalList, v as NestedContainers, d as SortablePreview, f as default };
+
+//# sourceMappingURL=Sortable.stories.js.map

package/dist/sortable/stories/Sortable.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sortable.stories.js","names":[],"sources":["../../../src/sortable/stories/Sortable.stories.tsx"],"sourcesContent":["import { useState, type CSSProperties } from \"react\";\n\nimport { Sortable } from \"..\";\nimport { getSortableReorderResult, type SortableLayout } from \"../sortableUtils\";\n\nimport type { UniqueIdentifier } from \"@dnd-kit/core\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\n\nconst itemStyle: CSSProperties = {\n\tdisplay: \"grid\",\n\tgridTemplateColumns: \"var(--control-height) 1fr\",\n\talignItems: \"center\",\n\tgap: \"var(--space-sm)\",\n\tpadding: \"var(--space-sm)\",\n\tborder: \"var(--border)\",\n\tborderRadius: \"var(--radius-sm)\",\n\tbackground: \"var(--surface-0)\"\n};\n\nconst verticalItems = [\"Alpha\", \"Bravo\", \"Charlie\", \"Delta\"];\nconst horizontalItems = [\"Фильтры\", \"Графики\", \"Сводка\", \"История\"];\nconst gridItems = [\"Карточка 1\", \"Карточка 2\", \"Карточка 3\", \"Карточка 4\", \"Карточка 5\", \"Карточка 6\"];\n\nexport interface SortablePreviewProps {\n\tcontainerId: string;\n\tlayout: SortableLayout;\n\tinitialItems: string[];\n\titemWidth?: string;\n\tdisabledIds?: string[];\n}\n\nfunction reorderItems(items: readonly UniqueIdentifier[], fromIndex: number, toIndex: number) {\n\tconst next = [...items];\n\tconst [moved] = next.splice(fromIndex, 1);\n\tnext.splice(toIndex, 0, moved!);\n\treturn next;\n}\n\nfunction getContainerStyle(layout: SortableLayout): CSSProperties {\n\tswitch (layout) {\n\t\tcase \"horizontal\":\n\t\t\treturn { display: \"flex\", gap: \"var(--space-sm)\", overflowX: \"auto\" };\n\t\tcase \"grid\":\n\t\t\treturn { display: \"grid\", gap: \"var(--space-sm)\", gridTemplateColumns: \"repeat(auto-fill, minmax(12rem, 1fr))\" };\n\t\tcase \"vertical\":\n\t\tdefault:\n\t\t\treturn { display: \"grid\", gap: \"var(--space-sm)\" };\n\t}\n}\n\nexport function SortablePreview(props: SortablePreviewProps) {\n\tconst [items, setItems] = useState(props.initialItems);\n\tconst disabledIdSet = new Set(props.disabledIds ?? []);\n\n\treturn (\n\t\t<div style={{ display: \"grid\", gap: 12 }}>\n\t\t\t<Sortable.Root\n\t\t\t\tonDragEnd={(event) => {\n\t\t\t\t\tconst reorder = getSortableReorderResult({\n\t\t\t\t\t\tevent,\n\t\t\t\t\t\titems: {\n\t\t\t\t\t\t\t[props.containerId]: items\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\tif (!reorder) return;\n\n\t\t\t\t\tsetItems((prev) => reorderItems(prev, reorder.fromIndex, reorder.toIndex) as string[]);\n\t\t\t\t}}>\n\t\t\t\t<Sortable.Container containerId={props.containerId} items={items} layout={props.layout}>\n\t\t\t\t\t<div style={getContainerStyle(props.layout)}>\n\t\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t\t<Sortable.Item\n\t\t\t\t\t\t\t\tkey={item}\n\t\t\t\t\t\t\t\tid={item}\n\t\t\t\t\t\t\t\tdisabled={disabledIdSet.has(item)}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t...itemStyle,\n\t\t\t\t\t\t\t\t\tminWidth: props.itemWidth\n\t\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t\t<Sortable.DragHandle title={`Перетащить ${item}`} />\n\t\t\t\t\t\t\t\t<div>{item}</div>\n\t\t\t\t\t\t\t</Sortable.Item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</Sortable.Container>\n\t\t\t</Sortable.Root>\n\n\t\t\t<div style={{ fontSize: 14, opacity: 0.8 }}>Порядок элементов изменяется локально в рамках story.</div>\n\t\t</div>\n\t);\n}\n\nconst meta = {\n\ttitle: \"Shared/UI/Sortable\",\n\tcomponent: SortablePreview,\n\targs: {\n\t\tcontainerId: \"sortable-demo\",\n\t\tlayout: \"vertical\",\n\t\tinitialItems: verticalItems,\n\t\titemWidth: undefined,\n\t\tdisabledIds: []\n\t},\n\tparameters: {\n\t\tatomicCanvas: true,\n\t\tlayout: \"padded\"\n\t},\n\ttags: [\"autodocs\"],\n\targTypes: {\n\t\tcontainerId: {\n\t\t\tdescription: \"Идентификатор `SortableContext`, который используется для вычисления reorder внутри контейнера.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tlayout: {\n\t\t\tdescription: \"Режим раскладки и стратегия сортировки: вертикальный список, горизонтальный список или grid.\",\n\t\t\tcontrol: \"inline-radio\",\n\t\t\toptions: [\"vertical\", \"horizontal\", \"grid\"]\n\t\t},\n\t\tinitialItems: {\n\t\t\tdescription: \"Начальный набор элементов. Внутри story состояние управляется локально.\",\n\t\t\tcontrol: false\n\t\t},\n\t\titemWidth: {\n\t\t\tdescription: \"Минимальная ширина карточки; полезна для горизонтального режима.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tdisabledIds: {\n\t\t\tdescription: \"Список id, для которых drag-handle отключен.\",\n\t\t\tcontrol: false\n\t\t}\n\t}\n} satisfies Meta<typeof SortablePreview>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Basic: Story = {};\n\nexport const HorizontalList: Story = {\n\targs: {\n\t\tcontainerId: \"sortable-horizontal\",\n\t\tlayout: \"horizontal\",\n\t\tinitialItems: horizontalItems,\n\t\titemWidth: \"12rem\"\n\t}\n};\n\nexport const GridCards: Story = {\n\targs: {\n\t\tcontainerId: \"sortable-grid\",\n\t\tlayout: \"grid\",\n\t\tinitialItems: gridItems\n\t}\n};\n\nexport const DisabledItems: Story = {\n\targs: {\n\t\tcontainerId: \"sortable-disabled\",\n\t\tlayout: \"vertical\",\n\t\tinitialItems: verticalItems,\n\t\tdisabledIds: [\"Bravo\", \"Delta\"]\n\t}\n};\n\nexport const HandleOnly: Story = {\n\targs: {\n\t\tcontainerId: \"sortable-handle-only\",\n\t\tlayout: \"vertical\",\n\t\tinitialItems: [\"Пункт 1\", \"Пункт 2\", \"Пункт 3\", \"Пункт 4\"]\n\t}\n};\n\nexport const NestedContainers: Story = {\n\targs: {\n\t\tcontainerId: \"top\",\n\t\tlayout: \"vertical\",\n\t\tinitialItems: [\"Группа A\", \"Группа B\"]\n\t},\n\trender: () => {\n\t\tconst [topItems, setTopItems] = useState([\"Группа A\", \"Группа B\"]);\n\t\tconst [childItemsByGroup, setChildItemsByGroup] = useState<Record<string, string[]>>({\n\t\t\t\"Группа A\": [\"A.1\", \"A.2\", \"A.3\"],\n\t\t\t\"Группа B\": [\"B.1\", \"B.2\"]\n\t\t});\n\n\t\treturn (\n\t\t\t<div style={{ display: \"grid\", gap: 12 }}>\n\t\t\t\t<Sortable.Root\n\t\t\t\t\tonDragEnd={(event) => {\n\t\t\t\t\t\tconst reorder = getSortableReorderResult({\n\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\titems: {\n\t\t\t\t\t\t\t\ttop: topItems,\n\t\t\t\t\t\t\t\t...Object.fromEntries(topItems.map((item) => [`parent:${item}`, childItemsByGroup[item] ?? []]))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t\tif (!reorder) return;\n\n\t\t\t\t\t\tif (reorder.containerId === \"top\") {\n\t\t\t\t\t\t\tsetTopItems((prev) => reorderItems(prev, reorder.fromIndex, reorder.toIndex) as string[]);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst parentId = String(reorder.containerId).slice(\"parent:\".length);\n\t\t\t\t\t\tsetChildItemsByGroup((prev) => ({\n\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t[parentId]: reorderItems(prev[parentId] ?? [], reorder.fromIndex, reorder.toIndex) as string[]\n\t\t\t\t\t\t}));\n\t\t\t\t\t}}>\n\t\t\t\t\t<Sortable.Container containerId=\"top\" items={topItems}>\n\t\t\t\t\t\t<div style={{ display: \"grid\", gap: \"var(--space-md)\" }}>\n\t\t\t\t\t\t\t{topItems.map((groupId) => (\n\t\t\t\t\t\t\t\t<Sortable.Item\n\t\t\t\t\t\t\t\t\tkey={groupId}\n\t\t\t\t\t\t\t\t\tid={groupId}\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t...itemStyle,\n\t\t\t\t\t\t\t\t\t\tgridTemplateColumns: \"var(--control-height) 1fr\",\n\t\t\t\t\t\t\t\t\t\talignItems: \"start\"\n\t\t\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t\t\t<Sortable.DragHandle title={`Перетащить ${groupId}`} />\n\t\t\t\t\t\t\t\t\t<div style={{ display: \"grid\", gap: \"var(--space-sm)\" }}>\n\t\t\t\t\t\t\t\t\t\t<strong>{groupId}</strong>\n\t\t\t\t\t\t\t\t\t\t<Sortable.Container containerId={`parent:${groupId}`} items={childItemsByGroup[groupId] ?? []}>\n\t\t\t\t\t\t\t\t\t\t\t<div style={{ display: \"grid\", gap: \"var(--space-xs)\" }}>\n\t\t\t\t\t\t\t\t\t\t\t\t{(childItemsByGroup[groupId] ?? []).map((item) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Sortable.Item\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={item}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tid={item}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...itemStyle,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbackground: \"var(--surface-1)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Sortable.DragHandle title={`Перетащить ${item}`} />\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div>{item}</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Sortable.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</Sortable.Container>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</Sortable.Item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Sortable.Container>\n\t\t\t\t</Sortable.Root>\n\n\t\t\t\t<div style={{ fontSize: 14, opacity: 0.8 }}>\n\t\t\t\t\tВложенные контейнеры сортируются независимо и используют общий `Sortable.Root`.\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n};\n"],"mappings":"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"}

package/dist/splitter/Splitter.d.ts

@@ -0,0 +1,14 @@
+import { type PropsWithChildren, type ReactNode } from "react";
+type SplitterDirection = "vertical" | "horizontal";
+type SplitterPane = "start" | "end";
+export type SplitterProps = PropsWithChildren<{
+    direction?: SplitterDirection;
+    initial?: number;
+    min?: number;
+    max?: number;
+    className?: string;
+    collapsedPane?: SplitterPane | null;
+}>;
+export declare function Splitter({ direction, initial, min, max, className, collapsedPane, children }: SplitterProps): string | number | bigint | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Splitter.d.ts.map

package/dist/splitter/Splitter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Splitter.d.ts","sourceRoot":"","sources":["../../src/splitter/Splitter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EAQd,MAAM,OAAO,CAAC;AAMf,KAAK,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAAC;AACnD,KAAK,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;IAC7C,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CACpC,CAAC,CAAC;AAgSH,wBAAgB,QAAQ,CAAC,EACxB,SAAsB,EACtB,OAAyB,EACzB,GAAiB,EACjB,GAAiB,EACjB,SAAS,EACT,aAAoB,EACpB,QAAQ,EACR,EAAE,aAAa,kSASf"}

package/dist/splitter/index.d.ts

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

package/dist/splitter/index.d.ts.map

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

package/dist/splitter/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../chunks/Splitter-NjNFuEq4.js";
+export { e as Splitter };

package/dist/splitter/stories/Splitter.stories.d.ts

@@ -0,0 +1,66 @@
+import { Splitter } from "../Splitter";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: typeof Splitter;
+    parameters: {
+        atomicCanvas: boolean;
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        direction: "vertical";
+        initial: number;
+        min: number;
+        max: number;
+    };
+    argTypes: {
+        direction: {
+            description: string;
+            control: "inline-radio";
+            options: string[];
+        };
+        initial: {
+            description: string;
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        min: {
+            description: string;
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        max: {
+            description: string;
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        className: {
+            description: string;
+            control: "text";
+        };
+        children: {
+            description: string;
+            control: false;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const Horizontal: Story;
+export declare const NestedFourPanels: Story;
+export declare const Constrained: Story;
+//# sourceMappingURL=Splitter.stories.d.ts.map

package/dist/splitter/stories/Splitter.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Splitter.stories.d.ts","sourceRoot":"","sources":["../../../src/splitter/stories/Splitter.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAmH5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAG9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC"}

package/dist/splitter/stories/Splitter.stories.js

@@ -0,0 +1,223 @@
+import { t as e } from "../../chunks/Splitter-NjNFuEq4.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/splitter/stories/Splitter.stories.tsx
+function r({ children: e }) {
+	return /* @__PURE__ */ t("div", {
+		style: { height: 490 },
+		children: e
+	});
+}
+function i({ title: e, description: r, items: i = [] }) {
+	return /* @__PURE__ */ n("div", {
+		style: {
+			height: "100%",
+			padding: "var(--space-md)",
+			borderRadius: "var(--radius-md)",
+			border: "var(--border)",
+			display: "grid",
+			alignContent: "start",
+			gap: "var(--space-md)"
+		},
+		className: "scrollable",
+		children: [/* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t("h2", { children: e }), /* @__PURE__ */ t("p", { children: r })] }), i.length > 0 && /* @__PURE__ */ t("div", {
+			style: {
+				display: "grid",
+				gap: "var(--space-sm)"
+			},
+			children: i.map((e) => /* @__PURE__ */ t("div", {
+				style: {
+					padding: "var(--space-sm) var(--space-md)",
+					borderRadius: "var(--radius-sm)",
+					background: "var(--surface-1)"
+				},
+				children: e
+			}, e))
+		})]
+	});
+}
+function a(a) {
+	return /* @__PURE__ */ t(r, { children: /* @__PURE__ */ n(e, {
+		...a,
+		children: [/* @__PURE__ */ t(i, {
+			title: "Навигация",
+			description: "Левая панель подходит для фильтров, дерева разделов, списка сущностей или структуры документа.",
+			items: [
+				"Раздел 1",
+				"Раздел 2",
+				"Раздел 3",
+				"Раздел 4"
+			]
+		}), /* @__PURE__ */ t(i, {
+			title: "Рабочая область",
+			description: "Правая панель обычно содержит детальный контент: таблицу, карточку объекта, форму или вкладки.",
+			items: [
+				"Текущий документ",
+				"История изменений",
+				"Комментарии",
+				"Связанные объекты",
+				"Параметры отображения"
+			]
+		})]
+	}) });
+}
+function o() {
+	return /* @__PURE__ */ t(r, { children: /* @__PURE__ */ n(e, {
+		initial: .48,
+		min: .25,
+		max: .75,
+		children: [/* @__PURE__ */ n(e, {
+			direction: "horizontal",
+			initial: .58,
+			min: .25,
+			max: .75,
+			children: [/* @__PURE__ */ t(i, {
+				title: "Список",
+				description: "Верхняя левая панель может держать навигацию или результат поиска.",
+				items: [
+					"Поиск",
+					"Фильтр по статусу",
+					"Группы",
+					"Быстрые действия"
+				]
+			}), /* @__PURE__ */ t(i, {
+				title: "Подробности",
+				description: "Нижняя левая панель подходит для связанного контента по выбранному элементу.",
+				items: [
+					"Свойства",
+					"Ответственный",
+					"Теги",
+					"Контекст"
+				]
+			})]
+		}), /* @__PURE__ */ n(e, {
+			direction: "horizontal",
+			initial: .36,
+			min: .2,
+			max: .8,
+			children: [/* @__PURE__ */ t(i, {
+				title: "Превью",
+				description: "Верхняя правая панель может содержать документ, схему, карту или live-просмотр.",
+				items: [
+					"Предпросмотр файла",
+					"Масштаб 100%",
+					"Слой подсветки"
+				]
+			}), /* @__PURE__ */ t(i, {
+				title: "Журнал",
+				description: "Нижняя правая панель часто используется для событий, логов или вспомогательных данных.",
+				items: [
+					"10:31 Импорт завершён",
+					"10:34 Индексация",
+					"10:36 Синхронизация",
+					"10:38 Проверка целостности"
+				]
+			})]
+		})]
+	}) });
+}
+function s(a) {
+	return /* @__PURE__ */ t(r, { children: /* @__PURE__ */ n(e, {
+		...a,
+		children: [/* @__PURE__ */ t(i, {
+			title: "Фиксированные ограничения",
+			description: "У этой панели ужаты границы `min` и `max`, поэтому splitter нельзя увести слишком далеко.",
+			items: [
+				"Нажмите на разделитель",
+				"Используйте стрелки",
+				"Home = минимум",
+				"End = максимум"
+			]
+		}), /* @__PURE__ */ t(i, {
+			title: "Проверка доступности",
+			description: "Сценарий помогает проверить клавиатурное управление, устойчивость границ и отсутствие рывков при drag.",
+			items: [
+				"ArrowLeft / ArrowRight",
+				"ArrowUp / ArrowDown",
+				"Перетаскивание мышью",
+				"Перетаскивание на тач-устройстве"
+			]
+		})]
+	}) });
+}
+var c = {
+	title: "Shared/UI/Splitter",
+	component: e,
+	parameters: {
+		atomicCanvas: !0,
+		layout: "padded"
+	},
+	tags: ["autodocs"],
+	args: {
+		direction: "vertical",
+		initial: .45,
+		min: .15,
+		max: .85
+	},
+	argTypes: {
+		direction: {
+			description: "Направление разделения: вертикальное по ширине или горизонтальное по высоте.",
+			control: "inline-radio",
+			options: ["vertical", "horizontal"]
+		},
+		initial: {
+			description: "Начальная доля первой панели в диапазоне от 0 до 1.",
+			control: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01
+			}
+		},
+		min: {
+			description: "Минимальная доля первой панели. Значение автоматически нормализуется в диапазон 0..1.",
+			control: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01
+			}
+		},
+		max: {
+			description: "Максимальная доля первой панели. Если `min` и `max` перепутаны местами, компонент сам исправит диапазон.",
+			control: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01
+			}
+		},
+		className: {
+			description: "Дополнительный CSS-класс корневого контейнера.",
+			control: "text"
+		},
+		children: {
+			description: "Splitter ожидает ровно два прямых дочерних элемента. Для большего количества областей используйте вложенные Splitter.",
+			control: !1
+		}
+	}
+}, l = {
+	name: "Две панели",
+	render: (e) => /* @__PURE__ */ t(a, { ...e })
+}, u = {
+	name: "Горизонтальное разделение",
+	render: (e) => /* @__PURE__ */ t(a, { ...e }),
+	args: {
+		direction: "horizontal",
+		initial: .55
+	}
+}, d = {
+	name: "Четыре панели через вложенность",
+	render: () => /* @__PURE__ */ t(o, {})
+}, f = {
+	name: "Ограничения и клавиатура",
+	render: (e) => /* @__PURE__ */ t(s, { ...e }),
+	args: {
+		initial: .35,
+		min: .25,
+		max: .55
+	}
+};
+//#endregion
+export { l as Basic, f as Constrained, u as Horizontal, d as NestedFourPanels, c as default };
+
+//# sourceMappingURL=Splitter.stories.js.map

package/dist/splitter/stories/Splitter.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Splitter.stories.js","names":[],"sources":["../../../src/splitter/stories/Splitter.stories.tsx"],"sourcesContent":["import { Splitter } from \"../Splitter\";\n\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\n\nfunction StoryCanvas({ children }: { children: React.ReactNode }) {\n\treturn <div style={{ height: 490 }}>{children}</div>;\n}\n\nfunction Panel({ title, description, items = [] }: { title: string; description: string; items?: string[] }) {\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\theight: \"100%\",\n\t\t\t\tpadding: \"var(--space-md)\",\n\t\t\t\tborderRadius: \"var(--radius-md)\",\n\t\t\t\tborder: \"var(--border)\",\n\t\t\t\tdisplay: \"grid\",\n\t\t\t\talignContent: \"start\",\n\t\t\t\tgap: \"var(--space-md)\"\n\t\t\t}}\n\t\t\tclassName=\"scrollable\">\n\t\t\t<div>\n\t\t\t\t<h2>{title}</h2>\n\t\t\t\t<p>{description}</p>\n\t\t\t</div>\n\n\t\t\t{items.length > 0 && (\n\t\t\t\t<div style={{ display: \"grid\", gap: \"var(--space-sm)\" }}>\n\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={item}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tpadding: \"var(--space-sm) var(--space-md)\",\n\t\t\t\t\t\t\t\tborderRadius: \"var(--radius-sm)\",\n\t\t\t\t\t\t\t\tbackground: \"var(--surface-1)\"\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t{item}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction TwoPaneLayout(args: React.ComponentProps<typeof Splitter>) {\n\treturn (\n\t\t<StoryCanvas>\n\t\t\t<Splitter {...args}>\n\t\t\t\t<Panel\n\t\t\t\t\ttitle=\"Навигация\"\n\t\t\t\t\tdescription=\"Левая панель подходит для фильтров, дерева разделов, списка сущностей или структуры документа.\"\n\t\t\t\t\titems={[\"Раздел 1\", \"Раздел 2\", \"Раздел 3\", \"Раздел 4\"]}\n\t\t\t\t/>\n\t\t\t\t<Panel\n\t\t\t\t\ttitle=\"Рабочая область\"\n\t\t\t\t\tdescription=\"Правая панель обычно содержит детальный контент: таблицу, карточку объекта, форму или вкладки.\"\n\t\t\t\t\titems={[\"Текущий документ\", \"История изменений\", \"Комментарии\", \"Связанные объекты\", \"Параметры отображения\"]}\n\t\t\t\t/>\n\t\t\t</Splitter>\n\t\t</StoryCanvas>\n\t);\n}\n\nfunction NestedFourPaneLayout() {\n\treturn (\n\t\t<StoryCanvas>\n\t\t\t<Splitter initial={0.48} min={0.25} max={0.75}>\n\t\t\t\t<Splitter direction=\"horizontal\" initial={0.58} min={0.25} max={0.75}>\n\t\t\t\t\t<Panel\n\t\t\t\t\t\ttitle=\"Список\"\n\t\t\t\t\t\tdescription=\"Верхняя левая панель может держать навигацию или результат поиска.\"\n\t\t\t\t\t\titems={[\"Поиск\", \"Фильтр по статусу\", \"Группы\", \"Быстрые действия\"]}\n\t\t\t\t\t/>\n\t\t\t\t\t<Panel\n\t\t\t\t\t\ttitle=\"Подробности\"\n\t\t\t\t\t\tdescription=\"Нижняя левая панель подходит для связанного контента по выбранному элементу.\"\n\t\t\t\t\t\titems={[\"Свойства\", \"Ответственный\", \"Теги\", \"Контекст\"]}\n\t\t\t\t\t/>\n\t\t\t\t</Splitter>\n\n\t\t\t\t<Splitter direction=\"horizontal\" initial={0.36} min={0.2} max={0.8}>\n\t\t\t\t\t<Panel\n\t\t\t\t\t\ttitle=\"Превью\"\n\t\t\t\t\t\tdescription=\"Верхняя правая панель может содержать документ, схему, карту или live-просмотр.\"\n\t\t\t\t\t\titems={[\"Предпросмотр файла\", \"Масштаб 100%\", \"Слой подсветки\"]}\n\t\t\t\t\t/>\n\t\t\t\t\t<Panel\n\t\t\t\t\t\ttitle=\"Журнал\"\n\t\t\t\t\t\tdescription=\"Нижняя правая панель часто используется для событий, логов или вспомогательных данных.\"\n\t\t\t\t\t\titems={[\"10:31 Импорт завершён\", \"10:34 Индексация\", \"10:36 Синхронизация\", \"10:38 Проверка целостности\"]}\n\t\t\t\t\t/>\n\t\t\t\t</Splitter>\n\t\t\t</Splitter>\n\t\t</StoryCanvas>\n\t);\n}\n\nfunction ConstrainedLayout(args: React.ComponentProps<typeof Splitter>) {\n\treturn (\n\t\t<StoryCanvas>\n\t\t\t<Splitter {...args}>\n\t\t\t\t<Panel\n\t\t\t\t\ttitle=\"Фиксированные ограничения\"\n\t\t\t\t\tdescription=\"У этой панели ужаты границы `min` и `max`, поэтому splitter нельзя увести слишком далеко.\"\n\t\t\t\t\titems={[\"Нажмите на разделитель\", \"Используйте стрелки\", \"Home = минимум\", \"End = максимум\"]}\n\t\t\t\t/>\n\t\t\t\t<Panel\n\t\t\t\t\ttitle=\"Проверка доступности\"\n\t\t\t\t\tdescription=\"Сценарий помогает проверить клавиатурное управление, устойчивость границ и отсутствие рывков при drag.\"\n\t\t\t\t\titems={[\"ArrowLeft / ArrowRight\", \"ArrowUp / ArrowDown\", \"Перетаскивание мышью\", \"Перетаскивание на тач-устройстве\"]}\n\t\t\t\t/>\n\t\t\t</Splitter>\n\t\t</StoryCanvas>\n\t);\n}\n\nconst meta = {\n\ttitle: \"Shared/UI/Splitter\",\n\tcomponent: Splitter,\n\tparameters: {\n\t\tatomicCanvas: true,\n\t\tlayout: \"padded\"\n\t},\n\ttags: [\"autodocs\"],\n\targs: {\n\t\tdirection: \"vertical\",\n\t\tinitial: 0.45,\n\t\tmin: 0.15,\n\t\tmax: 0.85\n\t},\n\targTypes: {\n\t\tdirection: {\n\t\t\tdescription: \"Направление разделения: вертикальное по ширине или горизонтальное по высоте.\",\n\t\t\tcontrol: \"inline-radio\",\n\t\t\toptions: [\"vertical\", \"horizontal\"]\n\t\t},\n\t\tinitial: {\n\t\t\tdescription: \"Начальная доля первой панели в диапазоне от 0 до 1.\",\n\t\t\tcontrol: { type: \"range\", min: 0, max: 1, step: 0.01 }\n\t\t},\n\t\tmin: {\n\t\t\tdescription: \"Минимальная доля первой панели. Значение автоматически нормализуется в диапазон 0..1.\",\n\t\t\tcontrol: { type: \"range\", min: 0, max: 1, step: 0.01 }\n\t\t},\n\t\tmax: {\n\t\t\tdescription: \"Максимальная доля первой панели. Если `min` и `max` перепутаны местами, компонент сам исправит диапазон.\",\n\t\t\tcontrol: { type: \"range\", min: 0, max: 1, step: 0.01 }\n\t\t},\n\t\tclassName: {\n\t\t\tdescription: \"Дополнительный CSS-класс корневого контейнера.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tchildren: {\n\t\t\tdescription:\n\t\t\t\t\"Splitter ожидает ровно два прямых дочерних элемента. Для большего количества областей используйте вложенные Splitter.\",\n\t\t\tcontrol: false\n\t\t}\n\t}\n} satisfies Meta<typeof Splitter>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Basic: Story = {\n\tname: \"Две панели\",\n\trender: (args) => <TwoPaneLayout {...args} />\n};\n\nexport const Horizontal: Story = {\n\tname: \"Горизонтальное разделение\",\n\trender: (args) => <TwoPaneLayout {...args} />,\n\targs: {\n\t\tdirection: \"horizontal\",\n\t\tinitial: 0.55\n\t}\n};\n\nexport const NestedFourPanels: Story = {\n\tname: \"Четыре панели через вложенность\",\n\trender: () => <NestedFourPaneLayout />\n};\n\nexport const Constrained: Story = {\n\tname: \"Ограничения и клавиатура\",\n\trender: (args) => <ConstrainedLayout {...args} />,\n\targs: {\n\t\tinitial: 0.35,\n\t\tmin: 0.25,\n\t\tmax: 0.55\n\t}\n};\n"],"mappings":"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"}

package/dist/state-select/StateSelect.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { State } from "@ryuzaki13/react-foundation-lib/types";
+import { UiBaseProps } from "../types";
+export type StateMeta = {
+    label?: ReactNode;
+    icon?: ReactNode;
+};
+export interface StateSelectProps extends Omit<UiBaseProps<State | undefined>, "placeholder"> {
+    placeholder?: string;
+    options?: readonly State[];
+    stateMeta?: Partial<Record<State, StateMeta>>;
+    className?: string;
+    clearable?: boolean;
+}
+/**
+ * Специализированный селект для выбора цветового или статусного состояния. Используется там, где значению соответствует визуальный swatch.
+ */
+export declare function StateSelect({ label, description, disabled, placeholder, size, value, onChange, options, stateMeta, className, clearable }: StateSelectProps): import("react").JSX.Element;
+//# sourceMappingURL=StateSelect.d.ts.map

package/dist/state-select/StateSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateSelect.d.ts","sourceRoot":"","sources":["../../src/state-select/StateSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAW,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAE,KAAK,EAAE,MAAM,uCAAuC,CAAC;AAI9D,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,MAAM,MAAM,SAAS,GAAG;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC;IAC5F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,KAAK,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAmDD;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAA8B,EAC9B,SAAS,EACT,SAAS,EACT,SAAS,EACT,EAAE,gBAAgB,+BA6ClB"}

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

@@ -0,0 +1,3 @@
+export { StateSelect } from "./StateSelect";
+export type { StateSelectProps } from "./StateSelect";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/state-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}