@ryuzaki13/react-foundation-ui 0.1.0

package/dist/slider/stories/SliderInput.stories.js

@@ -0,0 +1,282 @@
+import { n as e, 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";
+import { createFilterBetween as o } from "@ryuzaki13/react-foundation-lib/odata-service";
+//#region src/slider/stories/SliderInput.stories.tsx
+var s = [
+	{
+		value: 0,
+		label: "0"
+	},
+	{
+		value: 20,
+		label: "20"
+	},
+	{
+		value: 40,
+		label: "40"
+	},
+	{
+		value: 60,
+		label: "60"
+	},
+	{
+		value: 80,
+		label: "80"
+	},
+	{
+		value: 100,
+		label: "100"
+	}
+], 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: "1г.",
+		outputValue: 360
+	},
+	{
+		value: 18,
+		label: "1.5г.",
+		outputValue: 540
+	},
+	{
+		value: 24,
+		label: "2г.",
+		outputValue: 720
+	},
+	{
+		value: 25,
+		label: "-",
+		outputValue: null
+	}
+], d = {
+	title: "Shared/UI/SliderInput",
+	component: t,
+	args: {
+		value: 12,
+		onChange: () => {},
+		min: 0,
+		max: 100,
+		step: .5
+	},
+	parameters: {
+		atomicCanvas: !0,
+		layout: "padded"
+	},
+	tags: ["autodocs"]
+};
+function f({ value: e, field: t, children: n }) {
+	let [a, 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: [a, s],
+				filter: o(t, e)
+			}, null, 2) }),
+			n
+		]
+	});
+}
+var p = { render: (e) => {
+	let [n, i] = a(e.value);
+	return /* @__PURE__ */ r(t, {
+		...e,
+		label: "Порог",
+		description: "Ручной ввод и popover slider работают с одним значением.",
+		value: n,
+		onChange: i
+	});
+} }, m = { render: (e) => {
+	let [n, i] = a(40);
+	return /* @__PURE__ */ r(t, {
+		...e,
+		label: "Готовый пресет",
+		marks: s,
+		value: n,
+		onChange: i
+	});
+} }, h = {
+	render: (e) => {
+		let [n, i] = a(17.5);
+		return /* @__PURE__ */ r(t, {
+			...e,
+			label: "Десятичное значение",
+			value: n,
+			onChange: i
+		});
+	},
+	args: { step: .5 }
+}, g = { render: () => {
+	let [t, o] = a([20, 80]);
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {
+		label: "Процент выполнения",
+		description: "RangeInput без outputValue: наружу отдаётся координата `value`.",
+		min: 0,
+		max: 100,
+		marks: s,
+		value: t,
+		onChange: o
+	}), /* @__PURE__ */ r(f, {
+		value: t,
+		field: "progress",
+		unit: "%"
+	})] });
+} }, _ = { render: () => {
+	let [t, o] = a([null, 12]);
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {
+		label: "Срок в месяцах",
+		description: "У крайних marks `outputValue:null`; у обычных marks outputValue не указан и берётся `value`.",
+		min: 0,
+		max: 25,
+		marks: c,
+		marksPosition: "index",
+		value: t,
+		onChange: o
+	}), /* @__PURE__ */ r(f, {
+		value: t,
+		field: "months",
+		unit: " мес."
+	})] });
+} }, v = { render: () => {
+	let [t, o] = a([90, 360]);
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {
+		label: "Срок: месяцы на шкале, дни в фильтре",
+		description: "В поле и фильтре видны дни, а popover показывает месячные marks.",
+		min: 1,
+		max: 24,
+		marks: l,
+		marksPosition: "index",
+		value: t,
+		onChange: o
+	}), /* @__PURE__ */ r(f, {
+		value: t,
+		field: "days",
+		unit: " дн."
+	})] });
+} }, y = { 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(f, {
+		value: t,
+		field: "days",
+		unit: " дн."
+	})] });
+} }, b = { render: () => {
+	let [t, o] = a([90, 180]);
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {
+		label: "Срок текстом",
+		description: "В поле выводится готовый текст по marks, а изменение через popover коммитится при закрытии.",
+		min: 0,
+		max: 25,
+		marks: u,
+		marksPosition: "index",
+		value: t,
+		onChange: o,
+		readonlyValueText: !0,
+		placeholder: "Любой срок"
+	}), /* @__PURE__ */ r(f, {
+		value: t,
+		field: "days",
+		unit: " дн."
+	})] });
+} }, x = { args: {
+	label: "Недоступно",
+	description: "Поле и popover отключены.",
+	value: 20,
+	disabled: !0,
+	marks: s
+} };
+//#endregion
+export { p as Basic, h as DecimalManualInput, x as Disabled, m as MarksSnap, v as RangeInputMonthToDaysOutput, y as RangeInputOpenMonthToDaysOutput, _ as RangeInputOpenWithoutExplicitMiddleOutput, g as RangeInputPlain, b as RangeInputReadonlyText, d as default };
+
+//# sourceMappingURL=SliderInput.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderInput.stories.js","names":[],"sources":["../../../src/slider/stories/SliderInput.stories.tsx"],"sourcesContent":["import { ReactNode, useState } from \"react\";\n\nimport { createFilterBetween } from \"@ryuzaki13/react-foundation-lib/odata-service\";\n\nimport { SliderInput, SliderRangeInput, type SliderRangeValue } from \"..\";\n\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\n\nconst percentMarks = [\n\t{ value: 0, label: \"0\" },\n\t{ value: 20, label: \"20\" },\n\t{ value: 40, label: \"40\" },\n\t{ value: 60, label: \"60\" },\n\t{ value: 80, label: \"80\" },\n\t{ value: 100, label: \"100\" }\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: \"1г.\", outputValue: 360 },\n\t{ value: 18, label: \"1.5г.\", outputValue: 540 },\n\t{ value: 24, label: \"2г.\", outputValue: 720 },\n\t{ value: 25, label: \"-\", outputValue: null }\n] as const;\n\nconst meta = {\n\ttitle: \"Shared/UI/SliderInput\",\n\tcomponent: SliderInput,\n\targs: {\n\t\tvalue: 12,\n\t\tonChange: () => {},\n\t\tmin: 0,\n\t\tmax: 100,\n\t\tstep: 0.5\n\t},\n\tparameters: {\n\t\tatomicCanvas: true,\n\t\tlayout: \"padded\"\n\t},\n\ttags: [\"autodocs\"]\n} satisfies Meta<typeof SliderInput>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nfunction RangePreview({\n\tvalue,\n\tfield,\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\tfilter: createFilterBetween(field, value)\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 Basic: Story = {\n\trender: (args) => {\n\t\tconst [value, setValue] = useState<number | undefined>(args.value as number | undefined);\n\n\t\treturn (\n\t\t\t<SliderInput\n\t\t\t\t{...args}\n\t\t\t\tlabel=\"Порог\"\n\t\t\t\tdescription=\"Ручной ввод и popover slider работают с одним значением.\"\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={setValue}\n\t\t\t/>\n\t\t);\n\t}\n};\n\nexport const MarksSnap: Story = {\n\trender: (args) => {\n\t\tconst [value, setValue] = useState<number | undefined>(40);\n\n\t\treturn <SliderInput {...args} label=\"Готовый пресет\" marks={percentMarks} value={value} onChange={setValue} />;\n\t}\n};\n\nexport const DecimalManualInput: Story = {\n\trender: (args) => {\n\t\tconst [value, setValue] = useState<number | undefined>(17.5);\n\n\t\treturn <SliderInput {...args} label=\"Десятичное значение\" value={value} onChange={setValue} />;\n\t},\n\targs: {\n\t\tstep: 0.5\n\t}\n};\n\nexport const RangeInputPlain: Story = {\n\trender: () => {\n\t\tconst [value, setValue] = useState<SliderRangeValue | undefined>([20, 80]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SliderRangeInput\n\t\t\t\t\tlabel=\"Процент выполнения\"\n\t\t\t\t\tdescription=\"RangeInput без outputValue: наружу отдаётся координата `value`.\"\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 RangeInputOpenWithoutExplicitMiddleOutput: 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<SliderRangeInput\n\t\t\t\t\tlabel=\"Срок в месяцах\"\n\t\t\t\t\tdescription=\"У крайних marks `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 RangeInputMonthToDaysOutput: 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<SliderRangeInput\n\t\t\t\t\tlabel=\"Срок: месяцы на шкале, дни в фильтре\"\n\t\t\t\t\tdescription=\"В поле и фильтре видны дни, а popover показывает месячные marks.\"\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 RangeInputOpenMonthToDaysOutput: 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<SliderRangeInput\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 RangeInputReadonlyText: Story = {\n\trender: () => {\n\t\tconst [value, setValue] = useState<SliderRangeValue | undefined>([90, 180]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SliderRangeInput\n\t\t\t\t\tlabel=\"Срок текстом\"\n\t\t\t\t\tdescription=\"В поле выводится готовый текст по marks, а изменение через popover коммитится при закрытии.\"\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\treadonlyValueText\n\t\t\t\t\tplaceholder=\"Любой срок\"\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: \"Поле и popover отключены.\",\n\t\tvalue: 20,\n\t\tdisabled: true,\n\t\tmarks: percentMarks\n\t}\n};\n"],"mappings":"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"}

package/dist/sortable/Sortable.d.ts

@@ -0,0 +1,52 @@
+import { type ComponentPropsWithoutRef, type CSSProperties, type ElementType, type ReactNode } from "react";
+import { type DndContextProps } from "@dnd-kit/core";
+import { type SortingStrategy } from "@dnd-kit/sortable";
+import { type SortableLayout } from "./sortableUtils";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+type SortableItemRenderState = {
+    isDragging: boolean;
+    isOver: boolean;
+    isSorting: boolean;
+    disabled: boolean;
+};
+type SortableHandleContextValue = {
+    attributes: Record<string, unknown>;
+    listeners: Record<string, ((event: unknown) => void) | undefined> | undefined;
+    setActivatorNodeRef: (element: HTMLElement | null) => void;
+    disabled: boolean;
+    isDragging: boolean;
+};
+type SortableRootProps = Omit<DndContextProps, "children" | "collisionDetection" | "sensors"> & {
+    children: ReactNode;
+    collisionDetection?: DndContextProps["collisionDetection"];
+    sensors?: DndContextProps["sensors"];
+};
+type SortableContainerProps = {
+    children: ReactNode;
+    containerId: UniqueIdentifier;
+    items: readonly UniqueIdentifier[];
+    layout?: SortableLayout;
+    strategy?: SortingStrategy;
+};
+type SortableItemBaseProps = {
+    as?: ElementType;
+    id: UniqueIdentifier;
+    children?: ReactNode | ((state: SortableItemRenderState) => ReactNode);
+    className?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+    dragActivator?: "handle" | "item";
+};
+type SortableItemProps<E extends ElementType = "div"> = SortableItemBaseProps & Omit<ComponentPropsWithoutRef<E>, keyof SortableItemBaseProps | "children" | "style" | "id">;
+type SortableHandleBaseProps = {
+    as?: ElementType;
+    children?: ReactNode | ((state: Pick<SortableHandleContextValue, "disabled" | "isDragging">) => ReactNode);
+    disabled?: boolean;
+};
+type SortableHandleProps<E extends ElementType = "div"> = SortableHandleBaseProps & Omit<ComponentPropsWithoutRef<E>, keyof SortableHandleBaseProps | "children">;
+export declare function SortableRoot(props: SortableRootProps): import("react").JSX.Element;
+export declare function SortableContainer(props: SortableContainerProps): import("react").JSX.Element;
+export declare function SortableItem<E extends ElementType = "div">(props: SortableItemProps<E>): import("react").JSX.Element;
+export declare function SortableHandle<E extends ElementType = "div">(props: SortableHandleProps<E>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Sortable.d.ts.map

package/dist/sortable/Sortable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sortable.d.ts","sourceRoot":"","sources":["../../src/sortable/Sortable.tsx"],"names":[],"mappings":"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"}

package/dist/sortable/SortableDragHandle.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+type SortableDragHandleBaseProps = {
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    icon?: ReactNode;
+};
+type SortableDragHandleDivProps = SortableDragHandleBaseProps & Omit<ComponentPropsWithoutRef<"div">, keyof SortableDragHandleBaseProps | "children"> & {
+    as?: "div";
+};
+type SortableDragHandleButtonProps = SortableDragHandleBaseProps & Omit<ComponentPropsWithoutRef<"button">, keyof SortableDragHandleBaseProps | "children" | "type"> & {
+    as: "button";
+    type?: "button" | "submit" | "reset";
+};
+export type SortableDragHandleProps = SortableDragHandleDivProps | SortableDragHandleButtonProps;
+export declare function SortableDragHandle(props: SortableDragHandleProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SortableDragHandle.d.ts.map

package/dist/sortable/SortableDragHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableDragHandle.d.ts","sourceRoot":"","sources":["../../src/sortable/SortableDragHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjE,KAAK,2BAA2B,GAAG;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,KAAK,0BAA0B,GAAG,2BAA2B,GAC5D,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,2BAA2B,GAAG,UAAU,CAAC,GAAG;IACvF,EAAE,CAAC,EAAE,KAAK,CAAC;CACX,CAAC;AAEH,KAAK,6BAA6B,GAAG,2BAA2B,GAC/D,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,MAAM,2BAA2B,GAAG,UAAU,GAAG,MAAM,CAAC,GAAG;IACnG,EAAE,EAAE,QAAQ,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,0BAA0B,GAAG,6BAA6B,CAAC;AAUjG,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,+BA+BhE"}

package/dist/sortable/index.d.ts

@@ -0,0 +1,14 @@
+import { SortableContainer, SortableHandle, SortableItem, SortableRoot } from "./Sortable";
+import { SortableDragHandle } from "./SortableDragHandle";
+export { getSortableReorderResult } from "./sortableUtils";
+export { SortableContainer, SortableDragHandle, SortableHandle, SortableItem, SortableRoot };
+export type { SortableDragHandleProps } from "./SortableDragHandle";
+export type { SortableLayout, SortableReorderResult } from "./sortableUtils";
+export declare const Sortable: {
+    Root: typeof SortableRoot;
+    Container: typeof SortableContainer;
+    Item: typeof SortableItem;
+    Handle: typeof SortableHandle;
+    DragHandle: typeof SortableDragHandle;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sortable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC3F,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC;AAE7F,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7E,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC"}

package/dist/sortable/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/sortable-CwDHC3CA.js";
+export { o as Sortable, i as SortableContainer, n as SortableDragHandle, t as SortableHandle, e as SortableItem, r as SortableRoot, a as getSortableReorderResult };

package/dist/sortable/sortableUtils.d.ts

@@ -0,0 +1,18 @@
+import { type DragEndEvent, type UniqueIdentifier } from "@dnd-kit/core";
+import { type SortingStrategy } from "@dnd-kit/sortable";
+export type SortableLayout = "vertical" | "horizontal" | "grid";
+export interface SortableReorderResult {
+    containerId: UniqueIdentifier;
+    activeId: UniqueIdentifier;
+    overId: UniqueIdentifier;
+    fromIndex: number;
+    toIndex: number;
+}
+type SortableItemsByContainer = Record<string, readonly UniqueIdentifier[]>;
+export declare function resolveSortableStrategy(layout: SortableLayout, strategy?: SortingStrategy): SortingStrategy;
+export declare function getSortableReorderResult(params: {
+    event: DragEndEvent;
+    items: readonly UniqueIdentifier[] | SortableItemsByContainer;
+}): SortableReorderResult | null;
+export {};
+//# sourceMappingURL=sortableUtils.d.ts.map

package/dist/sortable/sortableUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortableUtils.d.ts","sourceRoot":"","sources":["../../src/sortable/sortableUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAmF,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE1I,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAEhE,MAAM,WAAW,qBAAqB;IACrC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,wBAAwB,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC,CAAC;AAiB5E,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,CAAC,EAAE,eAAe,GAAG,eAAe,CAc3G;AAED,wBAAgB,wBAAwB,CAAC,MAAM,EAAE;IAChD,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,SAAS,gBAAgB,EAAE,GAAG,wBAAwB,CAAC;CAC9D,GAAG,qBAAqB,GAAG,IAAI,CAgC/B"}

package/dist/sortable/stories/Sortable.stories.d.ts

@@ -0,0 +1,58 @@
+import { type SortableLayout } from "../sortableUtils";
+import type { StoryObj } from "@storybook/react-vite";
+export interface SortablePreviewProps {
+    containerId: string;
+    layout: SortableLayout;
+    initialItems: string[];
+    itemWidth?: string;
+    disabledIds?: string[];
+}
+export declare function SortablePreview(props: SortablePreviewProps): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof SortablePreview;
+    args: {
+        containerId: string;
+        layout: "vertical";
+        initialItems: string[];
+        itemWidth: undefined;
+        disabledIds: never[];
+    };
+    parameters: {
+        atomicCanvas: boolean;
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        containerId: {
+            description: string;
+            control: "text";
+        };
+        layout: {
+            description: string;
+            control: "inline-radio";
+            options: string[];
+        };
+        initialItems: {
+            description: string;
+            control: false;
+        };
+        itemWidth: {
+            description: string;
+            control: "text";
+        };
+        disabledIds: {
+            description: string;
+            control: false;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const HorizontalList: Story;
+export declare const GridCards: Story;
+export declare const DisabledItems: Story;
+export declare const HandleOnly: Story;
+export declare const NestedContainers: Story;
+//# sourceMappingURL=Sortable.stories.d.ts.map

package/dist/sortable/stories/Sortable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sortable.stories.d.ts","sourceRoot":"","sources":["../../../src/sortable/stories/Sortable.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGjF,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAiB5D,MAAM,WAAW,oBAAoB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,cAAc,CAAC;IACvB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAqBD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAwC1D;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC8B,CAAC;AAEzC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KAAU,CAAC;AAE/B,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAgF9B,CAAC"}