@ryuzaki13/react-foundation-ui 0.1.0

package/dist/slider/lib/types.d.ts

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+import type { NumberScaleMarksPosition } from "@ryuzaki13/react-foundation-lib/number-scale";
+import type { RangeOutputValueFallback } from "@ryuzaki13/react-foundation-lib/range-output";
+export type SliderMarksPosition = NumberScaleMarksPosition;
+export type SliderMark = {
+    /**
+     * Внутреннее значение шкалы и координата mark.
+     * Используется для расчёта позиции, snap-логики и движения бегунка.
+     */
+    value: number;
+    /**
+     * Визуальная подпись mark в popover и tooltip.
+     */
+    label: ReactNode;
+    /**
+     * Доступная подпись mark для screen reader, если визуальный label недостаточен.
+     */
+    ariaLabel?: string;
+};
+export type SliderRangeMark = SliderMark & {
+    /**
+     * Текст mark для readonly-отображения выбранного диапазона.
+     * Если не задан, используется визуальная `label`.
+     */
+    readonlyLabel?: string;
+    /**
+     * Публичное значение, которое получает потребитель `SliderRange`/`SliderRangeInput` при выборе этой mark.
+     * Если не задано, наружу отдаётся `value`.
+     * Используется для случаев, где координата шкалы отличается от бизнес-значения:
+     * например, `value: 3` как позиция "3 месяца" и `outputValue: 90` как фильтр в днях.
+     * `null` означает открытую границу диапазона.
+     */
+    outputValue?: number | null;
+};
+/**
+ * Публичное значение range-компонентов.
+ * Числа являются бизнес-значениями после применения `outputValue`, а `null` означает открытую границу.
+ */
+export type SliderRangeValue = [number | null, number | null];
+/**
+ * Сериализуемые подстановки для открытых границ range-слайдера.
+ *
+ * Используются на стороне потребителя перед отправкой/сохранением значения.
+ * Сам компонент и его `onChange` продолжают работать с `SliderRangeValue`, где
+ * `null` означает открытую границу.
+ */
+export type SliderRangeOutputValueFallback = RangeOutputValueFallback<number>;
+export interface SliderMathOptions<TMark extends SliderMark = SliderMark> {
+    /**
+     * Минимальная координата шкалы. Для marks это граница фильтрации `mark.value`.
+     */
+    min: number;
+    /**
+     * Максимальная координата шкалы. Для marks это граница фильтрации `mark.value`.
+     */
+    max: number;
+    /**
+     * Шаг числовой шкалы, используется только когда нет валидных marks.
+     */
+    step?: number;
+    /**
+     * Набор допустимых точек. Если задан, значение всегда snap-ится к ближайшей mark.
+     */
+    marks?: readonly TMark[];
+    /**
+     * Способ визуального размещения marks: пропорционально `value` или равномерно по индексу.
+     */
+    marksPosition?: SliderMarksPosition;
+}
+export interface SliderFillRange {
+    /**
+     * Левая граница заливки track в процентах.
+     */
+    startPercent: number;
+    /**
+     * Правая граница заливки track в процентах.
+     */
+    endPercent: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/slider/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/slider/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8CAA8C,CAAC;AAC7F,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8CAA8C,CAAC;AAE7F,MAAM,MAAM,mBAAmB,GAAG,wBAAwB,CAAC;AAE3D,MAAM,MAAM,UAAU,GAAG;IACxB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG;IAC1C;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,MAAM,GAAG,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAE9D;;;;;;GAMG;AACH,MAAM,MAAM,8BAA8B,GAAG,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAE9E,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU;IACvE;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,KAAK,EAAE,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACpC;AAED,MAAM,WAAW,eAAe;IAC/B;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACnB"}

package/dist/slider/stories/Slider.stories.d.ts

@@ -0,0 +1,29 @@
+import { Slider } from "..";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: typeof Slider;
+    args: {
+        value: number;
+        onChange: () => void;
+        min: number;
+        max: number;
+        step: number;
+    };
+    parameters: {
+        atomicCanvas: boolean;
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SingleStep: Story;
+export declare const SingleWithMarks: Story;
+export declare const MonthsIndexMarks: Story;
+export declare const RangePlain: Story;
+export declare const RangeOpenWithoutExplicitMiddleOutput: Story;
+export declare const RangeMonthToDaysOutput: Story;
+export declare const RangeOpenMonthToDaysOutput: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=Slider.stories.d.ts.map

package/dist/slider/stories/Slider.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.stories.d.ts","sourceRoot":"","sources":["../../../src/slider/stories/Slider.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAwD,MAAM,IAAI,CAAC;AAElF,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAgD5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAeqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqDnC,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAe9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,KAoBlD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoBpC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAoBxC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC"}

package/dist/slider/stories/Slider.stories.js

@@ -0,0 +1,310 @@
+import { i as e, r as t } from "../../chunks/slider-34wxzKkG.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useState as a } from "react";
+//#region src/slider/stories/Slider.stories.tsx
+var o = [
+	{
+		value: 0,
+		label: "0"
+	},
+	{
+		value: 25,
+		label: "25"
+	},
+	{
+		value: 50,
+		label: "50"
+	},
+	{
+		value: 75,
+		label: "75"
+	},
+	{
+		value: 100,
+		label: "100"
+	}
+], s = [
+	{
+		value: 1,
+		label: "1 мес."
+	},
+	{
+		value: 3,
+		label: "3 мес."
+	},
+	{
+		value: 6,
+		label: "6 мес."
+	},
+	{
+		value: 9,
+		label: "9 мес."
+	},
+	{
+		value: 12,
+		label: "12 мес."
+	},
+	{
+		value: 18,
+		label: "18 мес."
+	},
+	{
+		value: 24,
+		label: "24 мес."
+	}
+], c = [
+	{
+		value: 0,
+		label: "Без нижней границы",
+		outputValue: null
+	},
+	{
+		value: 1,
+		label: "1 мес."
+	},
+	{
+		value: 3,
+		label: "3 мес."
+	},
+	{
+		value: 6,
+		label: "6 мес."
+	},
+	{
+		value: 12,
+		label: "12 мес."
+	},
+	{
+		value: 24,
+		label: "24 мес."
+	},
+	{
+		value: 25,
+		label: "Без верхней границы",
+		outputValue: null
+	}
+], l = [
+	{
+		value: 1,
+		label: "1 мес.",
+		outputValue: 30
+	},
+	{
+		value: 3,
+		label: "3 мес.",
+		outputValue: 90
+	},
+	{
+		value: 6,
+		label: "6 мес.",
+		outputValue: 180
+	},
+	{
+		value: 12,
+		label: "12 мес.",
+		outputValue: 360
+	},
+	{
+		value: 24,
+		label: "24 мес.",
+		outputValue: 720
+	}
+], u = [
+	{
+		value: 0,
+		label: "Без нижней границы",
+		outputValue: null
+	},
+	{
+		value: 1,
+		label: "1 мес.",
+		outputValue: 30
+	},
+	{
+		value: 3,
+		label: "3 мес.",
+		outputValue: 90
+	},
+	{
+		value: 6,
+		label: "6 мес.",
+		outputValue: 180
+	},
+	{
+		value: 12,
+		label: "12 мес.",
+		outputValue: 360
+	},
+	{
+		value: 24,
+		label: "24 мес.",
+		outputValue: 720
+	},
+	{
+		value: 25,
+		label: "Без верхней границы",
+		outputValue: null
+	}
+], d = {
+	title: "Shared/UI/Slider",
+	component: t,
+	args: {
+		value: 30,
+		onChange: () => {},
+		min: 0,
+		max: 100,
+		step: 5
+	},
+	parameters: {
+		atomicCanvas: !0,
+		layout: "padded"
+	},
+	tags: ["autodocs"]
+};
+function f(e, t) {
+	return e === null ? "null" : `${e}${t}`;
+}
+function p(e, t, n = "") {
+	let [r, i] = e ?? [null, null], a = [];
+	return r !== null && a.push(`${t} >= ${r}${n}`), i !== null && a.push(`${t} <= ${i}${n}`), a.length > 0 ? a.join(" AND ") : "Фильтр не ограничивает значение";
+}
+function m({ value: e, field: t, unit: n = "", children: a }) {
+	let [o, s] = e ?? [null, null];
+	return /* @__PURE__ */ i("div", {
+		className: "marginTopMd",
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "textSm сontent2",
+				children: "Preview фильтра"
+			}),
+			/* @__PURE__ */ r("pre", { children: JSON.stringify({
+				value: [o, s],
+				human: `${f(o, n)} — ${f(s, n)}`,
+				filter: p(e, t, n)
+			}, null, 2) }),
+			a
+		]
+	});
+}
+var h = {
+	render: (e) => {
+		let n = e, [i, o] = a(e.value);
+		return /* @__PURE__ */ r(t, {
+			...n,
+			label: "Громкость",
+			value: i,
+			onChange: o
+		});
+	},
+	args: {
+		description: "Компактный single-value слайдер со step=5.",
+		value: 35,
+		step: 5
+	}
+}, g = {
+	render: (e) => {
+		let n = e, [i, o] = a(50);
+		return /* @__PURE__ */ r(t, {
+			...n,
+			label: "Процент выполнения",
+			value: i,
+			onChange: o
+		});
+	},
+	args: {
+		description: "Marks активны, кликабельны и показывают подписи через tooltip.",
+		value: 50,
+		marks: o
+	}
+}, _ = {
+	render: (e) => {
+		let n = e, [i, o] = a(6);
+		return /* @__PURE__ */ r(t, {
+			...n,
+			label: "Срок",
+			value: i,
+			onChange: o
+		});
+	},
+	args: {
+		min: 1,
+		max: 24,
+		value: 6,
+		marks: s,
+		marksPosition: "index",
+		description: "Неравномерные значения месяцев расположены с равным визуальным шагом."
+	}
+}, v = { render: () => {
+	let [t, s] = a([25, 75]);
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {
+		label: "Процент выполнения",
+		description: "Обычный range: `value` mark является и координатой шкалы, и значением фильтра.",
+		min: 0,
+		max: 100,
+		marks: o,
+		value: t,
+		onChange: s
+	}), /* @__PURE__ */ r(m, {
+		value: t,
+		field: "progress",
+		unit: "%"
+	})] });
+} }, y = { render: () => {
+	let [t, o] = a([null, 12]);
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {
+		label: "Срок в месяцах",
+		description: "Открытые границы задаются только крайними `outputValue:null`; у обычных marks outputValue не указан и берётся `value`.",
+		min: 0,
+		max: 25,
+		marks: c,
+		marksPosition: "index",
+		value: t,
+		onChange: o
+	}), /* @__PURE__ */ r(m, {
+		value: t,
+		field: "months",
+		unit: " мес."
+	})] });
+} }, b = { render: () => {
+	let [t, o] = a([90, 360]);
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {
+		label: "Срок: месяцы на шкале, дни в фильтре",
+		description: "`value` хранит координату/месяцы, `outputValue` отдаёт наружу дни.",
+		min: 1,
+		max: 24,
+		marks: l,
+		marksPosition: "index",
+		value: t,
+		onChange: o
+	}), /* @__PURE__ */ r(m, {
+		value: t,
+		field: "days",
+		unit: " дн."
+	})] });
+} }, x = { render: () => {
+	let [t, o] = a([null, 720]);
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {
+		label: "Срок: открытые границы и дни в фильтре",
+		description: "Крайние marks отдают null, обычные marks отдают дни через `outputValue`.",
+		min: 0,
+		max: 25,
+		marks: u,
+		marksPosition: "index",
+		value: t,
+		onChange: o
+	}), /* @__PURE__ */ r(m, {
+		value: t,
+		field: "days",
+		unit: " дн."
+	})] });
+} }, S = { args: {
+	label: "Недоступно",
+	description: "Состояние без интеракций.",
+	value: 40,
+	disabled: !0,
+	marks: o
+} };
+//#endregion
+export { S as Disabled, _ as MonthsIndexMarks, b as RangeMonthToDaysOutput, x as RangeOpenMonthToDaysOutput, y as RangeOpenWithoutExplicitMiddleOutput, v as RangePlain, h as SingleStep, g as SingleWithMarks, d as default };
+
+//# sourceMappingURL=Slider.stories.js.map

package/dist/slider/stories/Slider.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.stories.js","names":[],"sources":["../../../src/slider/stories/Slider.stories.tsx"],"sourcesContent":["import { ReactNode, useState } from \"react\";\n\nimport { Slider, SliderRange, type SliderProps, type SliderRangeValue } from \"..\";\n\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\n\nconst percentMarks = [\n\t{ value: 0, label: \"0\" },\n\t{ value: 25, label: \"25\" },\n\t{ value: 50, label: \"50\" },\n\t{ value: 75, label: \"75\" },\n\t{ value: 100, label: \"100\" }\n] as const;\n\nconst monthMarks = [\n\t{ value: 1, label: \"1 мес.\" },\n\t{ value: 3, label: \"3 мес.\" },\n\t{ value: 6, label: \"6 мес.\" },\n\t{ value: 9, label: \"9 мес.\" },\n\t{ value: 12, label: \"12 мес.\" },\n\t{ value: 18, label: \"18 мес.\" },\n\t{ value: 24, label: \"24 мес.\" }\n] as const;\n\nconst openMonthMarks = [\n\t{ value: 0, label: \"Без нижней границы\", outputValue: null },\n\t{ value: 1, label: \"1 мес.\" },\n\t{ value: 3, label: \"3 мес.\" },\n\t{ value: 6, label: \"6 мес.\" },\n\t{ value: 12, label: \"12 мес.\" },\n\t{ value: 24, label: \"24 мес.\" },\n\t{ value: 25, label: \"Без верхней границы\", outputValue: null }\n] as const;\n\nconst monthToDayMarks = [\n\t{ value: 1, label: \"1 мес.\", outputValue: 30 },\n\t{ value: 3, label: \"3 мес.\", outputValue: 90 },\n\t{ value: 6, label: \"6 мес.\", outputValue: 180 },\n\t{ value: 12, label: \"12 мес.\", outputValue: 360 },\n\t{ value: 24, label: \"24 мес.\", outputValue: 720 }\n] as const;\n\nconst openMonthToDayMarks = [\n\t{ value: 0, label: \"Без нижней границы\", outputValue: null },\n\t{ value: 1, label: \"1 мес.\", outputValue: 30 },\n\t{ value: 3, label: \"3 мес.\", outputValue: 90 },\n\t{ value: 6, label: \"6 мес.\", outputValue: 180 },\n\t{ value: 12, label: \"12 мес.\", outputValue: 360 },\n\t{ value: 24, label: \"24 мес.\", outputValue: 720 },\n\t{ value: 25, label: \"Без верхней границы\", outputValue: null }\n] as const;\n\nconst meta = {\n\ttitle: \"Shared/UI/Slider\",\n\tcomponent: Slider,\n\targs: {\n\t\tvalue: 30,\n\t\tonChange: () => {},\n\t\tmin: 0,\n\t\tmax: 100,\n\t\tstep: 5\n\t},\n\tparameters: {\n\t\tatomicCanvas: true,\n\t\tlayout: \"padded\"\n\t},\n\ttags: [\"autodocs\"]\n} satisfies Meta<typeof Slider>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nfunction formatEndpoint(value: number | null, unit: string) {\n\treturn value === null ? \"null\" : `${value}${unit}`;\n}\n\nfunction compileRangeFilter(value: SliderRangeValue | undefined, field: string, unit = \"\") {\n\tconst [from, to] = value ?? [null, null];\n\tconst clauses: string[] = [];\n\n\tif (from !== null) {\n\t\tclauses.push(`${field} >= ${from}${unit}`);\n\t}\n\n\tif (to !== null) {\n\t\tclauses.push(`${field} <= ${to}${unit}`);\n\t}\n\n\treturn clauses.length > 0 ? clauses.join(\" AND \") : \"Фильтр не ограничивает значение\";\n}\n\nfunction RangePreview({\n\tvalue,\n\tfield,\n\tunit = \"\",\n\tchildren\n}: {\n\tvalue: SliderRangeValue | undefined;\n\tfield: string;\n\tunit?: string;\n\tchildren?: ReactNode;\n}) {\n\tconst [from, to] = value ?? [null, null];\n\n\treturn (\n\t\t<div className=\"marginTopMd\">\n\t\t\t<div className=\"textSm сontent2\">Preview фильтра</div>\n\t\t\t<pre>\n\t\t\t\t{JSON.stringify(\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: [from, to],\n\t\t\t\t\t\thuman: `${formatEndpoint(from, unit)} — ${formatEndpoint(to, unit)}`,\n\t\t\t\t\t\tfilter: compileRangeFilter(value, field, unit)\n\t\t\t\t\t},\n\t\t\t\t\tnull,\n\t\t\t\t\t2\n\t\t\t\t)}\n\t\t\t</pre>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport const SingleStep: Story = {\n\trender: (args) => {\n\t\tconst sliderArgs = args as SliderProps;\n\t\tconst [value, setValue] = useState<number | undefined>(args.value as number | undefined);\n\n\t\treturn <Slider {...sliderArgs} label=\"Громкость\" value={value} onChange={setValue} />;\n\t},\n\targs: {\n\t\tdescription: \"Компактный single-value слайдер со step=5.\",\n\t\tvalue: 35,\n\t\tstep: 5\n\t}\n};\n\nexport const SingleWithMarks: Story = {\n\trender: (args) => {\n\t\tconst sliderArgs = args as SliderProps;\n\t\tconst [value, setValue] = useState<number | undefined>(50);\n\n\t\treturn <Slider {...sliderArgs} label=\"Процент выполнения\" value={value} onChange={setValue} />;\n\t},\n\targs: {\n\t\tdescription: \"Marks активны, кликабельны и показывают подписи через tooltip.\",\n\t\tvalue: 50,\n\t\tmarks: percentMarks\n\t}\n};\n\nexport const MonthsIndexMarks: Story = {\n\trender: (args) => {\n\t\tconst sliderArgs = args as SliderProps;\n\t\tconst [value, setValue] = useState<number | undefined>(6);\n\n\t\treturn <Slider {...sliderArgs} label=\"Срок\" value={value} onChange={setValue} />;\n\t},\n\targs: {\n\t\tmin: 1,\n\t\tmax: 24,\n\t\tvalue: 6,\n\t\tmarks: monthMarks,\n\t\tmarksPosition: \"index\",\n\t\tdescription: \"Неравномерные значения месяцев расположены с равным визуальным шагом.\"\n\t}\n};\n\nexport const RangePlain: Story = {\n\trender: () => {\n\t\tconst [value, setValue] = useState<SliderRangeValue | undefined>([25, 75]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SliderRange\n\t\t\t\t\tlabel=\"Процент выполнения\"\n\t\t\t\t\tdescription=\"Обычный range: `value` mark является и координатой шкалы, и значением фильтра.\"\n\t\t\t\t\tmin={0}\n\t\t\t\t\tmax={100}\n\t\t\t\t\tmarks={percentMarks}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={setValue}\n\t\t\t\t/>\n\t\t\t\t<RangePreview value={value} field=\"progress\" unit=\"%\" />\n\t\t\t</>\n\t\t);\n\t}\n};\n\nexport const RangeOpenWithoutExplicitMiddleOutput: Story = {\n\trender: () => {\n\t\tconst [value, setValue] = useState<SliderRangeValue | undefined>([null, 12]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SliderRange\n\t\t\t\t\tlabel=\"Срок в месяцах\"\n\t\t\t\t\tdescription=\"Открытые границы задаются только крайними `outputValue:null`; у обычных marks outputValue не указан и берётся `value`.\"\n\t\t\t\t\tmin={0}\n\t\t\t\t\tmax={25}\n\t\t\t\t\tmarks={openMonthMarks}\n\t\t\t\t\tmarksPosition=\"index\"\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={setValue}\n\t\t\t\t/>\n\t\t\t\t<RangePreview value={value} field=\"months\" unit=\" мес.\" />\n\t\t\t</>\n\t\t);\n\t}\n};\n\nexport const RangeMonthToDaysOutput: Story = {\n\trender: () => {\n\t\tconst [value, setValue] = useState<SliderRangeValue | undefined>([90, 360]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SliderRange\n\t\t\t\t\tlabel=\"Срок: месяцы на шкале, дни в фильтре\"\n\t\t\t\t\tdescription=\"`value` хранит координату/месяцы, `outputValue` отдаёт наружу дни.\"\n\t\t\t\t\tmin={1}\n\t\t\t\t\tmax={24}\n\t\t\t\t\tmarks={monthToDayMarks}\n\t\t\t\t\tmarksPosition=\"index\"\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={setValue}\n\t\t\t\t/>\n\t\t\t\t<RangePreview value={value} field=\"days\" unit=\" дн.\" />\n\t\t\t</>\n\t\t);\n\t}\n};\n\nexport const RangeOpenMonthToDaysOutput: Story = {\n\trender: () => {\n\t\tconst [value, setValue] = useState<SliderRangeValue | undefined>([null, 720]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SliderRange\n\t\t\t\t\tlabel=\"Срок: открытые границы и дни в фильтре\"\n\t\t\t\t\tdescription=\"Крайние marks отдают null, обычные marks отдают дни через `outputValue`.\"\n\t\t\t\t\tmin={0}\n\t\t\t\t\tmax={25}\n\t\t\t\t\tmarks={openMonthToDayMarks}\n\t\t\t\t\tmarksPosition=\"index\"\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={setValue}\n\t\t\t\t/>\n\t\t\t\t<RangePreview value={value} field=\"days\" unit=\" дн.\" />\n\t\t\t</>\n\t\t);\n\t}\n};\n\nexport const Disabled: Story = {\n\targs: {\n\t\tlabel: \"Недоступно\",\n\t\tdescription: \"Состояние без интеракций.\",\n\t\tvalue: 40,\n\t\tdisabled: true,\n\t\tmarks: percentMarks\n\t}\n};\n"],"mappings":"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"}

package/dist/slider/stories/SliderInput.stories.d.ts

@@ -0,0 +1,30 @@
+import { SliderInput } from "..";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: typeof SliderInput;
+    args: {
+        value: number;
+        onChange: () => void;
+        min: number;
+        max: number;
+        step: number;
+    };
+    parameters: {
+        atomicCanvas: boolean;
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const MarksSnap: Story;
+export declare const DecimalManualInput: Story;
+export declare const RangeInputPlain: Story;
+export declare const RangeInputOpenWithoutExplicitMiddleOutput: Story;
+export declare const RangeInputMonthToDaysOutput: Story;
+export declare const RangeInputOpenMonthToDaysOutput: Story;
+export declare const RangeInputReadonlyText: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=SliderInput.stories.d.ts.map

package/dist/slider/stories/SliderInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderInput.stories.d.ts","sourceRoot":"","sources":["../../../src/slider/stories/SliderInput.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAA2C,MAAM,IAAI,CAAC;AAE1E,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAwC5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAe0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgCnC,eAAO,MAAM,KAAK,EAAE,KAcnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAC;AAEF,eAAO,MAAM,yCAAyC,EAAE,KAoBvD,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAoBzC,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAoB7C,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAsBpC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC"}