@ryuzaki13/react-foundation-ui 0.1.0

package/dist/input-files/stories/InputFiles.stories.js

@@ -0,0 +1,158 @@
+import { t as e } from "../../chunks/InputFiles-Or2Nvfgk.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useState as n } from "react";
+//#region src/input-files/stories/InputFiles.stories.tsx
+var r = (e, t = "application/pdf") => {
+	let n = new File(["demo-file"], e, {
+		type: t,
+		lastModified: 17040672e5
+	});
+	return {
+		mode: "data-url",
+		meta: {
+			name: n.name,
+			mime: n.type,
+			size: n.size,
+			lastModified: n.lastModified
+		},
+		dataUrl: `data:${t};base64,ZGVtby1maWxl`,
+		file: n
+	};
+}, i = {
+	title: "Shared/UI/InputFiles",
+	component: e,
+	args: {
+		value: [],
+		onChange: () => {}
+	},
+	parameters: {
+		atomicCanvas: !0,
+		layout: "padded"
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		label: {
+			description: "Заголовок поля множественной загрузки.",
+			control: "text"
+		},
+		description: {
+			description: "Описание под заголовком.",
+			control: "text"
+		},
+		placeholder: {
+			description: "Текст в поле, пока список файлов пуст.",
+			control: "text"
+		},
+		value: {
+			description: "Массив результатов чтения выбранных файлов.",
+			control: !1
+		},
+		onChange: {
+			description: "Вызывается с новым массивом файлов после добавления/удаления.",
+			control: !1
+		},
+		onReadError: {
+			description: "Вызывается при ошибке чтения отдельного файла.",
+			control: !1
+		},
+		accept: {
+			description: "HTML `accept` для диалога выбора файлов.",
+			control: "text"
+		},
+		allowedMime: {
+			description: "Список допустимых MIME-типов при валидации.",
+			control: !1
+		},
+		maxBytes: {
+			description: "Максимальный размер одного файла в байтах.",
+			control: "number"
+		},
+		readMode: {
+			description: "Режим чтения: data-url или array-buffer.",
+			control: "inline-radio",
+			options: ["data-url", "array-buffer"]
+		},
+		maxFiles: {
+			description: "Лимит количества файлов в списке.",
+			control: "number"
+		},
+		error: {
+			description: "Текст ошибки под полем.",
+			control: "text"
+		},
+		onClearError: {
+			description: "Вызывается при выборе новых файлов для сброса ошибки.",
+			control: !1
+		},
+		disabled: {
+			description: "Полностью блокирует выбор файлов.",
+			control: "boolean"
+		},
+		size: {
+			description: "Размер визуального контрола.",
+			control: "select",
+			options: [
+				"xs",
+				"sm",
+				"md",
+				"lg",
+				"xl"
+			]
+		}
+	}
+}, a = {
+	render: (r) => {
+		let [i, a] = n([]);
+		return /* @__PURE__ */ t(e, {
+			...r,
+			readMode: "data-url",
+			value: i,
+			onChange: a
+		});
+	},
+	args: {
+		label: "Вложения",
+		description: "Можно выбрать несколько файлов.",
+		placeholder: "Выберите файлы",
+		accept: [
+			".pdf",
+			".png",
+			".jpg"
+		],
+		maxFiles: 5,
+		value: []
+	}
+}, o = {
+	render: (i) => {
+		let [a, o] = n([r("contract.pdf"), r("diagram.png", "image/png")]);
+		return /* @__PURE__ */ t(e, {
+			...i,
+			readMode: "data-url",
+			value: a,
+			onChange: o
+		});
+	},
+	args: {
+		label: "Предзаполненный список",
+		description: "Иллюстрация удаления файлов из уже заполненного значения."
+	}
+}, s = {
+	render: (i) => {
+		let [a, o] = n([r("first.pdf"), r("second.pdf")]);
+		return /* @__PURE__ */ t(e, {
+			...i,
+			readMode: "data-url",
+			value: a,
+			onChange: o
+		});
+	},
+	args: {
+		label: "Лимит файлов",
+		description: "После достижения лимита поле выбора блокируется.",
+		maxFiles: 2
+	}
+};
+//#endregion
+export { a as Controlled, s as LimitReached, o as WithInitialFiles, i as default };
+
+//# sourceMappingURL=InputFiles.stories.js.map

package/dist/input-files/stories/InputFiles.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputFiles.stories.js","names":[],"sources":["../../../src/input-files/stories/InputFiles.stories.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport type { ReadFileAsDataUrlResult } from \"@ryuzaki13/react-foundation-lib/file\";\n\nimport { InputFiles } from \"../InputFiles\";\n\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\n\nconst createMockReadFileResult = (name: string, mime: string = \"application/pdf\"): ReadFileAsDataUrlResult => {\n\tconst file = new File([\"demo-file\"], name, { type: mime, lastModified: 1704067200000 });\n\n\treturn {\n\t\tmode: \"data-url\",\n\t\tmeta: {\n\t\t\tname: file.name,\n\t\t\tmime: file.type,\n\t\t\tsize: file.size,\n\t\t\tlastModified: file.lastModified\n\t\t},\n\t\tdataUrl: `data:${mime};base64,ZGVtby1maWxl`,\n\t\tfile\n\t};\n};\n\nconst meta = {\n\ttitle: \"Shared/UI/InputFiles\",\n\tcomponent: InputFiles,\n\targs: {\n\t\tvalue: [] as ReadFileAsDataUrlResult[],\n\t\tonChange: () => {}\n\t},\n\tparameters: {\n\t\tatomicCanvas: true,\n\t\tlayout: \"padded\"\n\t},\n\ttags: [\"autodocs\"],\n\targTypes: {\n\t\tlabel: {\n\t\t\tdescription: \"Заголовок поля множественной загрузки.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tdescription: {\n\t\t\tdescription: \"Описание под заголовком.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tplaceholder: {\n\t\t\tdescription: \"Текст в поле, пока список файлов пуст.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tvalue: {\n\t\t\tdescription: \"Массив результатов чтения выбранных файлов.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tonChange: {\n\t\t\tdescription: \"Вызывается с новым массивом файлов после добавления/удаления.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tonReadError: {\n\t\t\tdescription: \"Вызывается при ошибке чтения отдельного файла.\",\n\t\t\tcontrol: false\n\t\t},\n\t\taccept: {\n\t\t\tdescription: \"HTML `accept` для диалога выбора файлов.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tallowedMime: {\n\t\t\tdescription: \"Список допустимых MIME-типов при валидации.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tmaxBytes: {\n\t\t\tdescription: \"Максимальный размер одного файла в байтах.\",\n\t\t\tcontrol: \"number\"\n\t\t},\n\t\treadMode: {\n\t\t\tdescription: \"Режим чтения: data-url или array-buffer.\",\n\t\t\tcontrol: \"inline-radio\",\n\t\t\toptions: [\"data-url\", \"array-buffer\"]\n\t\t},\n\t\tmaxFiles: {\n\t\t\tdescription: \"Лимит количества файлов в списке.\",\n\t\t\tcontrol: \"number\"\n\t\t},\n\t\terror: {\n\t\t\tdescription: \"Текст ошибки под полем.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tonClearError: {\n\t\t\tdescription: \"Вызывается при выборе новых файлов для сброса ошибки.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tdisabled: {\n\t\t\tdescription: \"Полностью блокирует выбор файлов.\",\n\t\t\tcontrol: \"boolean\"\n\t\t},\n\t\tsize: {\n\t\t\tdescription: \"Размер визуального контрола.\",\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n\t\t}\n\t}\n} satisfies Meta<typeof InputFiles>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Controlled: Story = {\n\trender: (args) => {\n\t\tconst [value, setValue] = useState<ReadFileAsDataUrlResult[]>([]);\n\t\treturn <InputFiles {...args} readMode=\"data-url\" value={value} onChange={setValue} />;\n\t},\n\targs: {\n\t\tlabel: \"Вложения\",\n\t\tdescription: \"Можно выбрать несколько файлов.\",\n\t\tplaceholder: \"Выберите файлы\",\n\t\taccept: [\".pdf\", \".png\", \".jpg\"],\n\t\tmaxFiles: 5,\n\t\tvalue: []\n\t}\n};\n\nexport const WithInitialFiles: Story = {\n\trender: (args) => {\n\t\tconst [value, setValue] = useState<ReadFileAsDataUrlResult[]>([\n\t\t\tcreateMockReadFileResult(\"contract.pdf\"),\n\t\t\tcreateMockReadFileResult(\"diagram.png\", \"image/png\")\n\t\t]);\n\n\t\treturn <InputFiles {...args} readMode=\"data-url\" value={value} onChange={setValue} />;\n\t},\n\targs: {\n\t\tlabel: \"Предзаполненный список\",\n\t\tdescription: \"Иллюстрация удаления файлов из уже заполненного значения.\"\n\t}\n};\n\nexport const LimitReached: Story = {\n\trender: (args) => {\n\t\tconst [value, setValue] = useState<ReadFileAsDataUrlResult[]>([\n\t\t\tcreateMockReadFileResult(\"first.pdf\"),\n\t\t\tcreateMockReadFileResult(\"second.pdf\")\n\t\t]);\n\n\t\treturn <InputFiles {...args} readMode=\"data-url\" value={value} onChange={setValue} />;\n\t},\n\targs: {\n\t\tlabel: \"Лимит файлов\",\n\t\tdescription: \"После достижения лимита поле выбора блокируется.\",\n\t\tmaxFiles: 2\n\t}\n};\n"],"mappings":";;;;AAQA,IAAM,KAA4B,GAAc,IAAe,sBAA+C;CAC7G,IAAM,IAAO,IAAI,KAAK,CAAC,WAAW,GAAG,GAAM;EAAE,MAAM;EAAM,cAAc;CAAc,CAAC;CAEtF,OAAO;EACN,MAAM;EACN,MAAM;GACL,MAAM,EAAK;GACX,MAAM,EAAK;GACX,MAAM,EAAK;GACX,cAAc,EAAK;EACpB;EACA,SAAS,QAAQ,EAAK;EACtB;CACD;AACD,GAEM,IAAO;CACZ,OAAO;CACP,WAAW;CACX,MAAM;EACL,OAAO,CAAC;EACR,gBAAgB,CAAC;CAClB;CACA,YAAY;EACX,cAAc;EACd,QAAQ;CACT;CACA,MAAM,CAAC,UAAU;CACjB,UAAU;EACT,OAAO;GACN,aAAa;GACb,SAAS;EACV;EACA,aAAa;GACZ,aAAa;GACb,SAAS;EACV;EACA,aAAa;GACZ,aAAa;GACb,SAAS;EACV;EACA,OAAO;GACN,aAAa;GACb,SAAS;EACV;EACA,UAAU;GACT,aAAa;GACb,SAAS;EACV;EACA,aAAa;GACZ,aAAa;GACb,SAAS;EACV;EACA,QAAQ;GACP,aAAa;GACb,SAAS;EACV;EACA,aAAa;GACZ,aAAa;GACb,SAAS;EACV;EACA,UAAU;GACT,aAAa;GACb,SAAS;EACV;EACA,UAAU;GACT,aAAa;GACb,SAAS;GACT,SAAS,CAAC,YAAY,cAAc;EACrC;EACA,UAAU;GACT,aAAa;GACb,SAAS;EACV;EACA,OAAO;GACN,aAAa;GACb,SAAS;EACV;EACA,cAAc;GACb,aAAa;GACb,SAAS;EACV;EACA,UAAU;GACT,aAAa;GACb,SAAS;EACV;EACA,MAAM;GACL,aAAa;GACb,SAAS;GACT,SAAS;IAAC;IAAM;IAAM;IAAM;IAAM;GAAI;EACvC;CACD;AACD,GAKa,IAAoB;CAChC,SAAS,MAAS;EACjB,IAAM,CAAC,GAAO,KAAY,EAAoC,CAAC,CAAC;EAChE,OAAO,kBAAC,GAAD;GAAY,GAAI;GAAM,UAAS;GAAkB;GAAO,UAAU;EAAW,CAAA;CACrF;CACA,MAAM;EACL,OAAO;EACP,aAAa;EACb,aAAa;EACb,QAAQ;GAAC;GAAQ;GAAQ;EAAM;EAC/B,UAAU;EACV,OAAO,CAAC;CACT;AACD,GAEa,IAA0B;CACtC,SAAS,MAAS;EACjB,IAAM,CAAC,GAAO,KAAY,EAAoC,CAC7D,EAAyB,cAAc,GACvC,EAAyB,eAAe,WAAW,CACpD,CAAC;EAED,OAAO,kBAAC,GAAD;GAAY,GAAI;GAAM,UAAS;GAAkB;GAAO,UAAU;EAAW,CAAA;CACrF;CACA,MAAM;EACL,OAAO;EACP,aAAa;CACd;AACD,GAEa,IAAsB;CAClC,SAAS,MAAS;EACjB,IAAM,CAAC,GAAO,KAAY,EAAoC,CAC7D,EAAyB,WAAW,GACpC,EAAyB,YAAY,CACtC,CAAC;EAED,OAAO,kBAAC,GAAD;GAAY,GAAI;GAAM,UAAS;GAAkB;GAAO,UAAU;EAAW,CAAA;CACrF;CACA,MAAM;EACL,OAAO;EACP,aAAa;EACb,UAAU;CACX;AACD"}

package/dist/input-image/InputImage.d.ts

@@ -0,0 +1,42 @@
+import { ImageMime, ReadImageError, ReadImageResult, ReadMode } from "@ryuzaki13/react-foundation-lib/file";
+import { UiBaseProps } from "../types";
+/**
+ * Пропсы компонента InputImage.
+ *
+ * Компонент предназначен для выбора одного изображения.
+ * Внешний вид идентичен InputText.
+ *
+ * Под капотом использует readImageFile, который:
+ * - Проверяет что файл является изображением (image/*)
+ * - Валидирует MIME-тип по списку allowedMime
+ * - В режиме "data-url" автоматически извлекает размеры изображения (dimensions)
+ */
+export interface InputImageProps extends UiBaseProps<ReadImageResult, ReadImageResult | undefined> {
+    /** Callback очистки выбранного изображения. Если передан — отображается кнопка «крестик» */
+    onClear?: () => void;
+    /** Callback ошибки чтения (невалидный формат, не изображение, превышение размера и т.д.) */
+    onReadError?: (error: ReadImageError) => void;
+    /** Допустимые MIME-типы изображений — передаётся в readImageFile */
+    allowedMime?: readonly ImageMime[];
+    /** Максимальный размер файла в байтах — передаётся в readImageFile */
+    maxBytes?: number;
+    /** Режим чтения: "data-url" (по умолчанию, с извлечением dimensions) или "array-buffer" */
+    readMode?: ReadMode;
+    /** Текст ошибки под полем */
+    error?: string;
+    /** Callback сброса ошибки (вызывается при повторном выборе изображения) */
+    onClearError?: () => void;
+    /** CSS-класс обёртки */
+    className?: string;
+}
+/**
+ * InputImage — компонент выбора одного изображения.
+ *
+ * Визуально идентичен InputText. Под капотом использует readImageFile,
+ * который валидирует что файл — изображение и извлекает его размеры.
+ *
+ * HTML-атрибут accept формируется автоматически из allowedMime
+ * или по умолчанию равен "image/*".
+ */
+export declare function InputImage({ value, onChange, onClear, onReadError, allowedMime, maxBytes, readMode, label, description, placeholder, disabled, size, error, onClearError, className }: InputImageProps): import("react").JSX.Element;
+//# sourceMappingURL=InputImage.d.ts.map

package/dist/input-image/InputImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputImage.d.ts","sourceRoot":"","sources":["../../src/input-image/InputImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAiB,eAAe,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAI3H,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAKvC;;;;;;;;;;GAUG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW,CAAC,eAAe,EAAE,eAAe,GAAG,SAAS,CAAC;IACjG,4FAA4F;IAC5F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4FAA4F;IAC5F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAE9C,oEAAoE;IACpE,WAAW,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IACnC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAoC,EACpC,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,SAAS,EACT,EAAE,eAAe,+BAgHjB"}

package/dist/input-image/index.d.ts

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

package/dist/input-image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/input-image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/input-image/index.js

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

package/dist/input-image/stories/InputImage.stories.d.ts

@@ -0,0 +1,81 @@
+import { InputImage } from "../InputImage";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: typeof InputImage;
+    args: {
+        value: undefined;
+        onChange: () => void;
+    };
+    parameters: {
+        atomicCanvas: boolean;
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        label: {
+            description: string;
+            control: "text";
+        };
+        description: {
+            description: string;
+            control: "text";
+        };
+        placeholder: {
+            description: string;
+            control: "text";
+        };
+        value: {
+            description: string;
+            control: false;
+        };
+        onChange: {
+            description: string;
+            control: false;
+        };
+        onReadError: {
+            description: string;
+            control: false;
+        };
+        onClear: {
+            description: string;
+            control: false;
+        };
+        allowedMime: {
+            description: string;
+            control: false;
+        };
+        maxBytes: {
+            description: string;
+            control: "number";
+        };
+        readMode: {
+            description: string;
+            control: "inline-radio";
+            options: string[];
+        };
+        error: {
+            description: string;
+            control: "text";
+        };
+        onClearError: {
+            description: string;
+            control: false;
+        };
+        disabled: {
+            description: string;
+            control: "boolean";
+        };
+        size: {
+            description: string;
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Controlled: Story;
+export declare const WithInitialImage: Story;
+export declare const ArrayBufferMode: Story;
+//# sourceMappingURL=InputImage.stories.d.ts.map

package/dist/input-image/stories/InputImage.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputImage.stories.d.ts","sourceRoot":"","sources":["../../../src/input-image/stories/InputImage.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAsB5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAqB9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC"}

package/dist/input-image/stories/InputImage.stories.js

@@ -0,0 +1,174 @@
+import { t as e } from "../../chunks/InputImage-BeA5WJz1.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useState as r } from "react";
+//#region src/input-image/stories/InputImage.stories.tsx
+var i = (e = "avatar.png") => {
+	let t = new File(["image-demo"], e, {
+		type: "image/png",
+		lastModified: 17040672e5
+	});
+	return {
+		mode: "data-url",
+		meta: {
+			name: t.name,
+			mime: t.type,
+			size: t.size,
+			lastModified: t.lastModified
+		},
+		dataUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9YxM9a0AAAAASUVORK5CYII=",
+		file: t,
+		dimensions: {
+			width: 1,
+			height: 1
+		}
+	};
+}, a = {
+	title: "Shared/UI/InputImage",
+	component: e,
+	args: {
+		value: void 0,
+		onChange: () => {}
+	},
+	parameters: {
+		atomicCanvas: !0,
+		layout: "padded"
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		label: {
+			description: "Заголовок поля выбора изображения.",
+			control: "text"
+		},
+		description: {
+			description: "Описание под заголовком.",
+			control: "text"
+		},
+		placeholder: {
+			description: "Текст до выбора изображения.",
+			control: "text"
+		},
+		value: {
+			description: "Результат чтения выбранного изображения.",
+			control: !1
+		},
+		onChange: {
+			description: "Вызывается после успешного чтения изображения.",
+			control: !1
+		},
+		onReadError: {
+			description: "Вызывается при ошибке валидации или чтения изображения.",
+			control: !1
+		},
+		onClear: {
+			description: "Очищает выбранное изображение.",
+			control: !1
+		},
+		allowedMime: {
+			description: "Разрешенные MIME-типы изображений.",
+			control: !1
+		},
+		maxBytes: {
+			description: "Максимальный размер изображения в байтах.",
+			control: "number"
+		},
+		readMode: {
+			description: "Режим чтения: data-url или array-buffer.",
+			control: "inline-radio",
+			options: ["data-url", "array-buffer"]
+		},
+		error: {
+			description: "Текст ошибки под полем.",
+			control: "text"
+		},
+		onClearError: {
+			description: "Сброс ошибки при повторном выборе изображения.",
+			control: !1
+		},
+		disabled: {
+			description: "Блокирует взаимодействие с полем.",
+			control: "boolean"
+		},
+		size: {
+			description: "Размер визуального контрола.",
+			control: "select",
+			options: [
+				"xs",
+				"sm",
+				"md",
+				"lg",
+				"xl"
+			]
+		}
+	}
+}, o = {
+	render: (n) => {
+		let [i, a] = r(n.value);
+		return /* @__PURE__ */ t(e, {
+			...n,
+			value: i,
+			onChange: a,
+			onClear: () => a(void 0)
+		});
+	},
+	args: {
+		label: "Аватар",
+		description: "Выберите одно изображение профиля.",
+		placeholder: "Выберите изображение",
+		readMode: "data-url",
+		allowedMime: [
+			"image/png",
+			"image/jpeg",
+			"image/webp"
+		],
+		value: void 0
+	}
+}, s = {
+	render: (a) => {
+		let [o, s] = r(i());
+		return /* @__PURE__ */ n("div", {
+			style: {
+				display: "grid",
+				gap: 12
+			},
+			children: [/* @__PURE__ */ t(e, {
+				...a,
+				value: o,
+				onChange: s,
+				onClear: () => s(void 0)
+			}), o?.mode === "data-url" && /* @__PURE__ */ t("img", {
+				src: o.dataUrl,
+				alt: "Предпросмотр",
+				style: {
+					width: 96,
+					height: 96,
+					objectFit: "cover",
+					border: "1px solid var(--border-0)"
+				}
+			})]
+		});
+	},
+	args: {
+		label: "Изображение с предпросмотром",
+		description: "Сторис показывает, что значение можно использовать для preview."
+	}
+}, c = {
+	render: (n) => {
+		let [i, a] = r(void 0);
+		return /* @__PURE__ */ t(e, {
+			...n,
+			value: i,
+			onChange: a,
+			onClear: () => a(void 0)
+		});
+	},
+	args: {
+		label: "Двоичный режим",
+		description: "Используется, когда изображение нужно обработать как бинарные данные.",
+		readMode: "array-buffer",
+		value: void 0
+	}
+};
+//#endregion
+export { c as ArrayBufferMode, o as Controlled, s as WithInitialImage, a as default };
+
+//# sourceMappingURL=InputImage.stories.js.map

package/dist/input-image/stories/InputImage.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputImage.stories.js","names":[],"sources":["../../../src/input-image/stories/InputImage.stories.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport type { ReadImageResult } from \"@ryuzaki13/react-foundation-lib/file\";\n\nimport { InputImage } from \"../InputImage\";\n\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\n\nconst createMockReadImageResult = (name: string = \"avatar.png\"): ReadImageResult => {\n\tconst file = new File([\"image-demo\"], name, { type: \"image/png\", lastModified: 1704067200000 });\n\n\treturn {\n\t\tmode: \"data-url\",\n\t\tmeta: {\n\t\t\tname: file.name,\n\t\t\tmime: file.type,\n\t\t\tsize: file.size,\n\t\t\tlastModified: file.lastModified\n\t\t},\n\t\tdataUrl: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9YxM9a0AAAAASUVORK5CYII=\",\n\t\tfile,\n\t\tdimensions: {\n\t\t\twidth: 1,\n\t\t\theight: 1\n\t\t}\n\t};\n};\n\nconst meta = {\n\ttitle: \"Shared/UI/InputImage\",\n\tcomponent: InputImage,\n\targs: {\n\t\tvalue: undefined,\n\t\tonChange: () => {}\n\t},\n\tparameters: {\n\t\tatomicCanvas: true,\n\t\tlayout: \"padded\"\n\t},\n\ttags: [\"autodocs\"],\n\targTypes: {\n\t\tlabel: {\n\t\t\tdescription: \"Заголовок поля выбора изображения.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tdescription: {\n\t\t\tdescription: \"Описание под заголовком.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tplaceholder: {\n\t\t\tdescription: \"Текст до выбора изображения.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tvalue: {\n\t\t\tdescription: \"Результат чтения выбранного изображения.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tonChange: {\n\t\t\tdescription: \"Вызывается после успешного чтения изображения.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tonReadError: {\n\t\t\tdescription: \"Вызывается при ошибке валидации или чтения изображения.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tonClear: {\n\t\t\tdescription: \"Очищает выбранное изображение.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tallowedMime: {\n\t\t\tdescription: \"Разрешенные MIME-типы изображений.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tmaxBytes: {\n\t\t\tdescription: \"Максимальный размер изображения в байтах.\",\n\t\t\tcontrol: \"number\"\n\t\t},\n\t\treadMode: {\n\t\t\tdescription: \"Режим чтения: data-url или array-buffer.\",\n\t\t\tcontrol: \"inline-radio\",\n\t\t\toptions: [\"data-url\", \"array-buffer\"]\n\t\t},\n\t\terror: {\n\t\t\tdescription: \"Текст ошибки под полем.\",\n\t\t\tcontrol: \"text\"\n\t\t},\n\t\tonClearError: {\n\t\t\tdescription: \"Сброс ошибки при повторном выборе изображения.\",\n\t\t\tcontrol: false\n\t\t},\n\t\tdisabled: {\n\t\t\tdescription: \"Блокирует взаимодействие с полем.\",\n\t\t\tcontrol: \"boolean\"\n\t\t},\n\t\tsize: {\n\t\t\tdescription: \"Размер визуального контрола.\",\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n\t\t}\n\t}\n} satisfies Meta<typeof InputImage>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Controlled: Story = {\n\trender: (args) => {\n\t\tconst [value, setValue] = useState<ReadImageResult | undefined>(args.value);\n\t\treturn <InputImage {...args} value={value} onChange={setValue} onClear={() => setValue(undefined)} />;\n\t},\n\targs: {\n\t\tlabel: \"Аватар\",\n\t\tdescription: \"Выберите одно изображение профиля.\",\n\t\tplaceholder: \"Выберите изображение\",\n\t\treadMode: \"data-url\",\n\t\tallowedMime: [\"image/png\", \"image/jpeg\", \"image/webp\"],\n\t\tvalue: undefined\n\t}\n};\n\nexport const WithInitialImage: Story = {\n\trender: (args) => {\n\t\tconst [value, setValue] = useState<ReadImageResult | undefined>(createMockReadImageResult());\n\n\t\treturn (\n\t\t\t<div style={{ display: \"grid\", gap: 12 }}>\n\t\t\t\t<InputImage {...args} value={value} onChange={setValue} onClear={() => setValue(undefined)} />\n\t\t\t\t{value?.mode === \"data-url\" && (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={value.dataUrl}\n\t\t\t\t\t\talt=\"Предпросмотр\"\n\t\t\t\t\t\tstyle={{ width: 96, height: 96, objectFit: \"cover\", border: \"1px solid var(--border-0)\" }}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n\targs: {\n\t\tlabel: \"Изображение с предпросмотром\",\n\t\tdescription: \"Сторис показывает, что значение можно использовать для preview.\"\n\t}\n};\n\nexport const ArrayBufferMode: Story = {\n\trender: (args) => {\n\t\tconst [value, setValue] = useState<ReadImageResult | undefined>(undefined);\n\t\treturn <InputImage {...args} value={value} onChange={setValue} onClear={() => setValue(undefined)} />;\n\t},\n\targs: {\n\t\tlabel: \"Двоичный режим\",\n\t\tdescription: \"Используется, когда изображение нужно обработать как бинарные данные.\",\n\t\treadMode: \"array-buffer\",\n\t\tvalue: undefined\n\t}\n};\n"],"mappings":";;;;AAQA,IAAM,KAA6B,IAAe,iBAAkC;CACnF,IAAM,IAAO,IAAI,KAAK,CAAC,YAAY,GAAG,GAAM;EAAE,MAAM;EAAa,cAAc;CAAc,CAAC;CAE9F,OAAO;EACN,MAAM;EACN,MAAM;GACL,MAAM,EAAK;GACX,MAAM,EAAK;GACX,MAAM,EAAK;GACX,cAAc,EAAK;EACpB;EACA,SAAS;EACT;EACA,YAAY;GACX,OAAO;GACP,QAAQ;EACT;CACD;AACD,GAEM,IAAO;CACZ,OAAO;CACP,WAAW;CACX,MAAM;EACL,OAAO,KAAA;EACP,gBAAgB,CAAC;CAClB;CACA,YAAY;EACX,cAAc;EACd,QAAQ;CACT;CACA,MAAM,CAAC,UAAU;CACjB,UAAU;EACT,OAAO;GACN,aAAa;GACb,SAAS;EACV;EACA,aAAa;GACZ,aAAa;GACb,SAAS;EACV;EACA,aAAa;GACZ,aAAa;GACb,SAAS;EACV;EACA,OAAO;GACN,aAAa;GACb,SAAS;EACV;EACA,UAAU;GACT,aAAa;GACb,SAAS;EACV;EACA,aAAa;GACZ,aAAa;GACb,SAAS;EACV;EACA,SAAS;GACR,aAAa;GACb,SAAS;EACV;EACA,aAAa;GACZ,aAAa;GACb,SAAS;EACV;EACA,UAAU;GACT,aAAa;GACb,SAAS;EACV;EACA,UAAU;GACT,aAAa;GACb,SAAS;GACT,SAAS,CAAC,YAAY,cAAc;EACrC;EACA,OAAO;GACN,aAAa;GACb,SAAS;EACV;EACA,cAAc;GACb,aAAa;GACb,SAAS;EACV;EACA,UAAU;GACT,aAAa;GACb,SAAS;EACV;EACA,MAAM;GACL,aAAa;GACb,SAAS;GACT,SAAS;IAAC;IAAM;IAAM;IAAM;IAAM;GAAI;EACvC;CACD;AACD,GAKa,IAAoB;CAChC,SAAS,MAAS;EACjB,IAAM,CAAC,GAAO,KAAY,EAAsC,EAAK,KAAK;EAC1E,OAAO,kBAAC,GAAD;GAAY,GAAI;GAAa;GAAO,UAAU;GAAU,eAAe,EAAS,KAAA,CAAS;EAAI,CAAA;CACrG;CACA,MAAM;EACL,OAAO;EACP,aAAa;EACb,aAAa;EACb,UAAU;EACV,aAAa;GAAC;GAAa;GAAc;EAAY;EACrD,OAAO,KAAA;CACR;AACD,GAEa,IAA0B;CACtC,SAAS,MAAS;EACjB,IAAM,CAAC,GAAO,KAAY,EAAsC,EAA0B,CAAC;EAE3F,OACC,kBAAC,OAAD;GAAK,OAAO;IAAE,SAAS;IAAQ,KAAK;GAAG;aAAvC,CACC,kBAAC,GAAD;IAAY,GAAI;IAAa;IAAO,UAAU;IAAU,eAAe,EAAS,KAAA,CAAS;GAAI,CAAA,GAC5F,GAAO,SAAS,cAChB,kBAAC,OAAD;IACC,KAAK,EAAM;IACX,KAAI;IACJ,OAAO;KAAE,OAAO;KAAI,QAAQ;KAAI,WAAW;KAAS,QAAQ;IAA4B;GACxF,CAAA,CAEE;;CAEP;CACA,MAAM;EACL,OAAO;EACP,aAAa;CACd;AACD,GAEa,IAAyB;CACrC,SAAS,MAAS;EACjB,IAAM,CAAC,GAAO,KAAY,EAAsC,KAAA,CAAS;EACzE,OAAO,kBAAC,GAAD;GAAY,GAAI;GAAa;GAAO,UAAU;GAAU,eAAe,EAAS,KAAA,CAAS;EAAI,CAAA;CACrG;CACA,MAAM;EACL,OAAO;EACP,aAAa;EACb,UAAU;EACV,OAAO,KAAA;CACR;AACD"}

package/dist/input-search/InputSearch.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { BaseInputProps } from "../input";
+interface SearchInputProps extends BaseInputProps<string> {
+    onChange: (value: string) => void;
+}
+export declare function InputSearch({ onChange, ...props }: SearchInputProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=InputSearch.d.ts.map

package/dist/input-search/InputSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputSearch.d.ts","sourceRoot":"","sources":["../../src/input-search/InputSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,cAAc,EAAS,MAAM,UAAU,CAAC;AAEjD,UAAU,gBAAiB,SAAQ,cAAc,CAAC,MAAM,CAAC;IACxD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAuCnE"}

package/dist/input-search/index.d.ts

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

package/dist/input-search/index.d.ts.map

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

package/dist/input-search/index.js

@@ -0,0 +1,30 @@
+import { t as e } from "../chunks/Input-Ce2HXBUc.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useState as n } from "react";
+//#region src/input-search/InputSearch.tsx
+function r({ onChange: r, ...i }) {
+	let [a, o] = n(() => i.defaultValue ?? i.value ?? ""), [s, c] = n(() => i.defaultValue ?? i.value ?? ""), l = (e) => {
+		let t = e.trim();
+		t !== s && (c(t), r(t));
+	}, u = () => {
+		o(""), c(""), r("");
+	}, d = (e) => {
+		e.key === "Enter" && (e.preventDefault(), l(a));
+	}, f = () => {
+		l(a);
+	}, p = (e) => {
+		o(e);
+	};
+	return /* @__PURE__ */ t(e, {
+		...i,
+		value: a,
+		onChange: p,
+		onKeyDown: d,
+		onBlur: f,
+		onClear: u
+	});
+}
+//#endregion
+export { r as InputSearch };
+
+//# sourceMappingURL=index.js.map

package/dist/input-search/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/input-search/InputSearch.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { BaseInputProps, Input } from \"../input\";\n\ninterface SearchInputProps extends BaseInputProps<string> {\n\tonChange: (value: string) => void;\n}\n\nexport function InputSearch({ onChange, ...props }: SearchInputProps) {\n\tconst [searchTerm, setSearchTerm] = useState(() => props.defaultValue ?? props.value ?? \"\");\n\tconst [previousSearch, setPreviousSearch] = useState(() => props.defaultValue ?? props.value ?? \"\");\n\n\tconst handleSearch = (term: string) => {\n\t\tconst changedTerm = term.trim();\n\n\t\t// Проверяем, изменилось ли значение с предыдущего поиска\n\t\tif (changedTerm === previousSearch) return;\n\n\t\tsetPreviousSearch(changedTerm);\n\t\tonChange(changedTerm);\n\t};\n\n\tconst handleClear = () => {\n\t\tsetSearchTerm(\"\");\n\t\tsetPreviousSearch(\"\");\n\t\tonChange(\"\");\n\t};\n\n\tconst handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\tif (event.key === \"Enter\") {\n\t\t\tevent.preventDefault();\n\t\t\thandleSearch(searchTerm);\n\t\t}\n\t};\n\n\tconst handleBlur = () => {\n\t\thandleSearch(searchTerm);\n\t};\n\n\tconst handleChange = (value: string) => {\n\t\tsetSearchTerm(value);\n\t\t// Не вызываем onSearch здесь - только по Enter/blur\n\t};\n\n\treturn (\n\t\t<Input {...props} value={searchTerm} onChange={handleChange} onKeyDown={handleKeyDown} onBlur={handleBlur} onClear={handleClear} />\n\t);\n}\n"],"mappings":";;;;AAQA,SAAgB,EAAY,EAAE,aAAU,GAAG,KAA2B;CACrE,IAAM,CAAC,GAAY,KAAiB,QAAe,EAAM,gBAAgB,EAAM,SAAS,EAAE,GACpF,CAAC,GAAgB,KAAqB,QAAe,EAAM,gBAAgB,EAAM,SAAS,EAAE,GAE5F,KAAgB,MAAiB;EACtC,IAAM,IAAc,EAAK,KAAK;EAG1B,MAAgB,MAEpB,EAAkB,CAAW,GAC7B,EAAS,CAAW;CACrB,GAEM,UAAoB;EAGzB,AAFA,EAAc,EAAE,GAChB,EAAkB,EAAE,GACpB,EAAS,EAAE;CACZ,GAEM,KAAiB,MAAiD;EACvE,AAAI,EAAM,QAAQ,YACjB,EAAM,eAAe,GACrB,EAAa,CAAU;CAEzB,GAEM,UAAmB;EACxB,EAAa,CAAU;CACxB,GAEM,KAAgB,MAAkB;EACvC,EAAc,CAAK;CAEpB;CAEA,OACC,kBAAC,GAAD;EAAO,GAAI;EAAO,OAAO;EAAY,UAAU;EAAc,WAAW;EAAe,QAAQ;EAAY,SAAS;CAAc,CAAA;AAEpI"}

package/dist/layout-picker/index.d.ts

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

package/dist/layout-picker/index.d.ts.map

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

package/dist/layout-picker/index.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../chunks/layout-picker-BA9vA8JI.js";
+export { n as DEFAULT_LAYOUT_PICKER_PRESETS, o as LayoutPicker, i as getDefaultLayoutPickerPresetId, r as getLayoutCellStyle, a as getLayoutStyle, t as resolveLayoutCellCount, e as resolveLayoutPreset };

package/dist/layout-picker/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./layout";
+export * from "./presets";
+export type * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/layout-picker/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout-picker/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAE1B,mBAAmB,SAAS,CAAC"}

package/dist/layout-picker/lib/layout.d.ts

@@ -0,0 +1,11 @@
+import { type CSSProperties } from "react";
+import { type LayoutPickerPreset, type LayoutPickerPresetCell } from "./types";
+/**
+ * Возвращает CSS Grid-стиль для схематичного layout-пресета.
+ */
+export declare function getLayoutStyle(preset: LayoutPickerPreset, rowMinHeightInEm?: number): CSSProperties;
+/**
+ * Возвращает позиционирование ячейки внутри CSS Grid.
+ */
+export declare function getLayoutCellStyle(cell: LayoutPickerPresetCell): CSSProperties;
+//# sourceMappingURL=layout.d.ts.map

package/dist/layout-picker/lib/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/layout-picker/lib/layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAE/E;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,kBAAkB,EAAE,gBAAgB,CAAC,EAAE,MAAM,GAAG,aAAa,CAKnG;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,sBAAsB,GAAG,aAAa,CAK9E"}