@ryuzaki13/react-foundation-ui 0.1.0

package/dist/chunks/layout-picker-BA9vA8JI.js

@@ -0,0 +1,1171 @@
+import { t as e } from "./ui.module-BisoTevy.js";
+import { c as t, d as n, f as r, i, l as a, t as o } from "./picker-Cj4RnJh6.js";
+import { CheckIcon as s } from "lucide-react";
+import { cn as c } from "@ryuzaki13/react-foundation-lib/utils";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useRef as f, useState as p } from "react";
+//#region src/layout-picker/lib/layout.ts
+function m(e, t) {
+	return {
+		gridTemplateColumns: `repeat(${e.columns}, minmax(0, 1fr))`,
+		gridTemplateRows: `repeat(${e.rows}, minmax(${t ?? 0}em, 1fr))`
+	};
+}
+function h(e) {
+	return {
+		gridColumn: `${e.column} / span ${e.columnSpan ?? 1}`,
+		gridRow: `${e.row} / span ${e.rowSpan ?? 1}`
+	};
+}
+//#endregion
+//#region src/layout-picker/lib/presets.ts
+var g = [
+	{
+		id: "1x1",
+		label: "1x1",
+		columns: 1,
+		rows: 1,
+		cells: [{
+			id: "c11",
+			row: 1,
+			column: 1
+		}]
+	},
+	{
+		id: "1x2",
+		label: "1x2",
+		columns: 2,
+		rows: 1,
+		cells: [{
+			id: "c11",
+			row: 1,
+			column: 1
+		}, {
+			id: "c12",
+			row: 1,
+			column: 2
+		}]
+	},
+	{
+		id: "1x3",
+		label: "1x3",
+		columns: 3,
+		rows: 1,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "c13",
+				row: 1,
+				column: 3
+			}
+		]
+	},
+	{
+		id: "2x1",
+		label: "2x1",
+		columns: 1,
+		rows: 2,
+		cells: [{
+			id: "c11",
+			row: 1,
+			column: 1
+		}, {
+			id: "c21",
+			row: 2,
+			column: 1
+		}]
+	},
+	{
+		id: "2x2",
+		label: "2x2",
+		columns: 2,
+		rows: 2,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			}
+		]
+	},
+	{
+		id: "2x3",
+		label: "2x3",
+		columns: 3,
+		rows: 2,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "c13",
+				row: 1,
+				column: 3
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c23",
+				row: 2,
+				column: 3
+			}
+		]
+	},
+	{
+		id: "3x1",
+		label: "3x1",
+		columns: 1,
+		rows: 3,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			}
+		]
+	},
+	{
+		id: "3x2",
+		label: "3x2",
+		columns: 2,
+		rows: 3,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "c32",
+				row: 3,
+				column: 2
+			}
+		]
+	},
+	{
+		id: "3x3",
+		label: "3x3",
+		columns: 3,
+		rows: 3,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "c13",
+				row: 1,
+				column: 3
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c23",
+				row: 2,
+				column: 3
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "c32",
+				row: 3,
+				column: 2
+			},
+			{
+				id: "c33",
+				row: 3,
+				column: 3
+			}
+		]
+	},
+	{
+		id: "4x1",
+		label: "4x1",
+		columns: 1,
+		rows: 4,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "c41",
+				row: 4,
+				column: 1
+			}
+		]
+	},
+	{
+		id: "4x2",
+		label: "4x2",
+		columns: 2,
+		rows: 4,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "c32",
+				row: 3,
+				column: 2
+			},
+			{
+				id: "c41",
+				row: 4,
+				column: 1
+			},
+			{
+				id: "c42",
+				row: 4,
+				column: 2
+			}
+		]
+	},
+	{
+		id: "4x3",
+		label: "4x3",
+		columns: 3,
+		rows: 4,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "c13",
+				row: 1,
+				column: 3
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c23",
+				row: 2,
+				column: 3
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "c32",
+				row: 3,
+				column: 2
+			},
+			{
+				id: "c33",
+				row: 3,
+				column: 3
+			},
+			{
+				id: "c41",
+				row: 4,
+				column: 1
+			},
+			{
+				id: "c42",
+				row: 4,
+				column: 2
+			},
+			{
+				id: "c43",
+				row: 4,
+				column: 3
+			}
+		]
+	},
+	{
+		id: "2x2-l",
+		label: "Большая слева + две справа",
+		columns: 2,
+		rows: 2,
+		cells: [
+			{
+				id: "left",
+				row: 1,
+				column: 1,
+				rowSpan: 2
+			},
+			{
+				id: "rt",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "rb",
+				row: 2,
+				column: 2
+			}
+		]
+	},
+	{
+		id: "2x2-r",
+		label: "Две слева + большая справа",
+		columns: 2,
+		rows: 2,
+		cells: [
+			{
+				id: "lt",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "lb",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "right",
+				row: 1,
+				column: 2,
+				rowSpan: 2
+			}
+		]
+	},
+	{
+		id: "2x2-t",
+		label: "Широкая сверху + две снизу",
+		columns: 2,
+		rows: 2,
+		cells: [
+			{
+				id: "top",
+				row: 1,
+				column: 1,
+				columnSpan: 2
+			},
+			{
+				id: "bl",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "br",
+				row: 2,
+				column: 2
+			}
+		]
+	},
+	{
+		id: "2x2-b",
+		label: "Две сверху + широкая снизу",
+		columns: 2,
+		rows: 2,
+		cells: [
+			{
+				id: "tl",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "tr",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "bottom",
+				row: 2,
+				column: 1,
+				columnSpan: 2
+			}
+		]
+	},
+	{
+		id: "3x2-t",
+		label: "Широкая сверху + 2x2",
+		columns: 2,
+		rows: 3,
+		cells: [
+			{
+				id: "top",
+				row: 1,
+				column: 1,
+				columnSpan: 2
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "c32",
+				row: 3,
+				column: 2
+			}
+		]
+	},
+	{
+		id: "3x2-b",
+		label: "2x2 + широкая снизу",
+		columns: 2,
+		rows: 3,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "bottom",
+				row: 3,
+				column: 1,
+				columnSpan: 2
+			}
+		]
+	},
+	{
+		id: "3x2-m",
+		label: "Широкая по центру",
+		columns: 2,
+		rows: 3,
+		cells: [
+			{
+				id: "tl",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "tr",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "middle",
+				row: 2,
+				column: 1,
+				columnSpan: 2
+			},
+			{
+				id: "bl",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "br",
+				row: 3,
+				column: 2
+			}
+		]
+	},
+	{
+		id: "3x3-l",
+		label: "Большая слева + 2x3 справа",
+		columns: 3,
+		rows: 3,
+		cells: [
+			{
+				id: "left",
+				row: 1,
+				column: 1,
+				rowSpan: 3
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "c13",
+				row: 1,
+				column: 3
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c23",
+				row: 2,
+				column: 3
+			},
+			{
+				id: "c32",
+				row: 3,
+				column: 2
+			},
+			{
+				id: "c33",
+				row: 3,
+				column: 3
+			}
+		]
+	},
+	{
+		id: "3x3-r",
+		label: "2x3 слева + большая справа",
+		columns: 3,
+		rows: 3,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "right",
+				row: 1,
+				column: 3,
+				rowSpan: 3
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "c32",
+				row: 3,
+				column: 2
+			}
+		]
+	},
+	{
+		id: "3x3-t",
+		label: "Широкая сверху + 2x3",
+		columns: 3,
+		rows: 3,
+		cells: [
+			{
+				id: "top",
+				row: 1,
+				column: 1,
+				columnSpan: 3
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c23",
+				row: 2,
+				column: 3
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "c32",
+				row: 3,
+				column: 2
+			},
+			{
+				id: "c33",
+				row: 3,
+				column: 3
+			}
+		]
+	},
+	{
+		id: "3x3-b",
+		label: "2x3 + широкая снизу",
+		columns: 3,
+		rows: 3,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "c13",
+				row: 1,
+				column: 3
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c23",
+				row: 2,
+				column: 3
+			},
+			{
+				id: "bottom",
+				row: 3,
+				column: 1,
+				columnSpan: 3
+			}
+		]
+	},
+	{
+		id: "4x2-t",
+		label: "Широкая сверху + 3x2",
+		columns: 2,
+		rows: 4,
+		cells: [
+			{
+				id: "top",
+				row: 1,
+				column: 1,
+				columnSpan: 2
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "c32",
+				row: 3,
+				column: 2
+			},
+			{
+				id: "c41",
+				row: 4,
+				column: 1
+			},
+			{
+				id: "c42",
+				row: 4,
+				column: 2
+			}
+		]
+	},
+	{
+		id: "4x2-b",
+		label: "3x2 + широкая снизу",
+		columns: 2,
+		rows: 4,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "c32",
+				row: 3,
+				column: 2
+			},
+			{
+				id: "bottom",
+				row: 4,
+				column: 1,
+				columnSpan: 2
+			}
+		]
+	},
+	{
+		id: "4x3-t",
+		label: "Широкая сверху + 3x3",
+		columns: 3,
+		rows: 4,
+		cells: [
+			{
+				id: "top",
+				row: 1,
+				column: 1,
+				columnSpan: 3
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c23",
+				row: 2,
+				column: 3
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "c32",
+				row: 3,
+				column: 2
+			},
+			{
+				id: "c33",
+				row: 3,
+				column: 3
+			},
+			{
+				id: "c41",
+				row: 4,
+				column: 1
+			},
+			{
+				id: "c42",
+				row: 4,
+				column: 2
+			},
+			{
+				id: "c43",
+				row: 4,
+				column: 3
+			}
+		]
+	},
+	{
+		id: "4x3-b",
+		label: "3x3 + широкая снизу",
+		columns: 3,
+		rows: 4,
+		cells: [
+			{
+				id: "c11",
+				row: 1,
+				column: 1
+			},
+			{
+				id: "c12",
+				row: 1,
+				column: 2
+			},
+			{
+				id: "c13",
+				row: 1,
+				column: 3
+			},
+			{
+				id: "c21",
+				row: 2,
+				column: 1
+			},
+			{
+				id: "c22",
+				row: 2,
+				column: 2
+			},
+			{
+				id: "c23",
+				row: 2,
+				column: 3
+			},
+			{
+				id: "c31",
+				row: 3,
+				column: 1
+			},
+			{
+				id: "c32",
+				row: 3,
+				column: 2
+			},
+			{
+				id: "c33",
+				row: 3,
+				column: 3
+			},
+			{
+				id: "bottom",
+				row: 4,
+				column: 1,
+				columnSpan: 3
+			}
+		]
+	}
+];
+function _() {
+	return g[0].id;
+}
+function v(e) {
+	return g.find((t) => t.id === e) ?? g[0];
+}
+function y(e) {
+	return g.find((t) => t.id === e)?.cells.length ?? 1;
+}
+var b = {
+	valueOverlay: "_959ulH",
+	triggerInput: "Ch-SZL",
+	triggerText: "SmdPit",
+	popup: "giOtGs",
+	popupLayout: "_57Tr0T",
+	popupBody: "Tkhulr",
+	options: "VQlniu",
+	option: "wb39Kf",
+	optionActive: "HGvQdT",
+	optionSelected: "rZuYyb",
+	optionPreviewWrap: "vNV6Q2",
+	optionCheck: "_3ytPPa",
+	preview: "koxYU-",
+	previewPlaceholder: "k8xLa2",
+	previewCompact: "_5pd3Bb",
+	previewCell: "VrHnjN"
+}, x = "Выберите раскладку";
+function S({ preset: e, compact: t = !1 }) {
+	return /* @__PURE__ */ u("span", {
+		className: c(b.preview, t && b.previewCompact),
+		style: m(e),
+		"aria-hidden": "true",
+		children: e.cells.map((t) => /* @__PURE__ */ u("span", {
+			className: b.previewCell,
+			style: h(t)
+		}, `${e.id}:${t.id}`))
+	});
+}
+function C({ id: m, label: h, description: _, value: v, onChange: y, presets: C = g, disabled: w, getPresetDisabled: T, placeholder: E = x, size: D, ariaLabel: O, className: ee, triggerClassName: te, popupClassName: k, placement: A = "bottom-start" }) {
+	let j = f(null), [M, N] = p(!1), P = C.findIndex((e) => e.id === v), F = P >= 0 ? C[P] : void 0, I = F ?? C[0], L = F?.label ?? E, { activeIndex: R, context: z, floatingStyles: B, getFloatingProps: V, setReference: H, setFloating: U, setOptionRef: W, close: G, openList: K, toggleOpen: q, selectOption: J, selectActiveOption: Y, handleReferenceKeyDown: X, handleFloatingKeyDown: Z, getOptionId: ne, getActiveOptionId: Q } = i({
+		options: C,
+		selectedIndex: P,
+		open: M,
+		onOpenChange: N,
+		getOptionDisabled: T,
+		onSelect: (e) => y(e.id),
+		disabled: w,
+		placement: A,
+		triggerMode: "display"
+	}), $ = o({
+		mode: "display",
+		open: M,
+		currentQuery: "",
+		hasDisplayValue: F !== void 0,
+		inputRef: j,
+		openList: K,
+		close: G,
+		toggleOpen: q
+	}), re = (e) => {
+		j.current = e;
+	};
+	return /* @__PURE__ */ u(r, {
+		id: m,
+		label: h,
+		description: _,
+		disabled: w,
+		placeholder: E,
+		size: D,
+		className: ee,
+		children: ({ controlId: r, labelId: i, describedBy: o }) => {
+			let f = `${r}-listbox`;
+			return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(t, {
+				ref: re,
+				rootRef: H,
+				id: r,
+				type: "button",
+				disabled: w,
+				readOnly: !0,
+				autoComplete: "off",
+				role: "combobox",
+				value: L,
+				"aria-haspopup": "listbox",
+				"aria-expanded": M,
+				"aria-controls": M ? f : void 0,
+				"aria-labelledby": i,
+				"aria-describedby": o,
+				"aria-autocomplete": "none",
+				"aria-activedescendant": M ? Q(f) : void 0,
+				"aria-label": i ? void 0 : O ?? `Выбрать layout. Текущее значение: ${L}`,
+				"data-ui": "layout-picker-trigger",
+				rootClassName: te,
+				inputClassName: b.triggerInput,
+				overlay: /* @__PURE__ */ d("div", {
+					className: b.valueOverlay,
+					children: [I ? /* @__PURE__ */ u(S, {
+						preset: I,
+						compact: !0
+					}) : /* @__PURE__ */ u("span", { className: b.previewPlaceholder }), /* @__PURE__ */ u("span", {
+						className: c(b.triggerText, !F && e.uiPlaceholder),
+						children: L
+					})]
+				}),
+				endAdornment: /* @__PURE__ */ u(a, {
+					open: M,
+					disabled: w,
+					onToggleMouseDown: $.handleToggleMouseDown,
+					onToggleClick: $.handleToggleClick,
+					openAriaLabel: "Открыть список layout",
+					closeAriaLabel: "Закрыть список layout"
+				}),
+				onClick: $.handleTriggerClick,
+				onFocus: (e) => {
+					$.handleTriggerFocus(e.currentTarget);
+				},
+				onKeyDown: (e) => {
+					X(e), !e.defaultPrevented && $.handleTriggerKeyDown({
+						event: e,
+						onActivateWhenOpen: Y,
+						enableSpaceActivation: !0
+					});
+				}
+			}), /* @__PURE__ */ u(n, {
+				open: M,
+				context: z,
+				floatingStyles: B,
+				listId: f,
+				labelId: i,
+				descriptionId: o,
+				activeOptionId: Q(f),
+				setFloating: U,
+				getFloatingProps: V,
+				onKeyDown: Z,
+				className: c(e.uiPopupOptions, b.popup, k),
+				layoutClassName: b.popupLayout,
+				bodyClassName: b.popupBody,
+				children: /* @__PURE__ */ u("div", {
+					className: b.options,
+					children: C.map((e, t) => {
+						let n = t === P, r = t === R, i = T?.(e) ?? !1;
+						return /* @__PURE__ */ d("button", {
+							id: ne(f, t),
+							ref: (e) => W(t, e),
+							type: "button",
+							role: "option",
+							tabIndex: -1,
+							disabled: i,
+							"aria-selected": n,
+							"aria-disabled": i || void 0,
+							"aria-label": e.description ? `${e.label}. ${e.description}` : e.label,
+							className: c(b.option, n && b.optionSelected, r && b.optionActive),
+							"data-ui": "layout-picker-option",
+							"data-selected": n || void 0,
+							onMouseDown: (e) => e.preventDefault(),
+							onClick: () => J(e),
+							children: [
+								/* @__PURE__ */ u("span", {
+									className: b.optionPreviewWrap,
+									children: /* @__PURE__ */ u(S, { preset: e })
+								}),
+								/* @__PURE__ */ d("span", {
+									className: "fontSizeSm",
+									children: [/* @__PURE__ */ u("span", { children: e.label }), e.description ? /* @__PURE__ */ u("span", { children: e.description }) : null]
+								}),
+								/* @__PURE__ */ u("span", {
+									className: b.optionCheck,
+									"aria-hidden": "true",
+									children: n ? /* @__PURE__ */ u(s, {}) : null
+								})
+							]
+						}, e.id);
+					})
+				})
+			})] });
+		}
+	});
+}
+//#endregion
+export { v as a, y as i, g as n, h as o, _ as r, m as s, C as t };
+
+//# sourceMappingURL=layout-picker-BA9vA8JI.js.map