@de-kit/st-ui 0.1.13 → 0.1.15

package/dist/components/birthday-picker/birthday-picker.scss

@@ -0,0 +1,84 @@
+.birthday-picker {
+  position: relative;
+  width: 100%;
+
+  .birthday-picker__trigger {
+    cursor: pointer;
+    padding-right: 44px;
+  }
+}
+
+.birthday-picker__icon {
+  position: absolute;
+  top: 50%;
+  right: 14px;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.birthday-picker__layer {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+
+.birthday-picker__mask {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  border: 0;
+  background: rgb(0 0 0 / 40%);
+  cursor: pointer;
+}
+
+.birthday-picker__sheet {
+  box-sizing: border-box;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  max-width: none;
+  height: auto;
+  margin: 0;
+  border: 0;
+  padding: var(--space-4) var(--space-4) var(--space-6);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  background: var(--color-background);
+  color: var(--color-foreground);
+  box-shadow: var(--shadow-xl);
+}
+
+.birthday-picker__title {
+  margin: 0 0 var(--space-3);
+  font-size: var(--text-sm);
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.birthday-picker__columns {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr 1fr;
+  gap: var(--space-2);
+}
+
+.birthday-picker__column {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.birthday-picker__caption {
+  font-size: var(--text-xs);
+  color: var(--color-muted-foreground);
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.birthday-picker__actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: var(--space-4);
+}

package/dist/components/birthday-picker/index.d.cts

@@ -0,0 +1,2 @@
+import { BirthdayPicker, BirthdayPickerProps } from "./birthday-picker.cjs";
+export { BirthdayPicker, type BirthdayPickerProps };

package/dist/components/birthday-picker/index.d.ts

@@ -0,0 +1,2 @@
+import { BirthdayPicker, BirthdayPickerProps } from "./birthday-picker.js";
+export { BirthdayPicker, type BirthdayPickerProps };

package/dist/components/birthday-picker/wheel-column.cjs

@@ -0,0 +1,114 @@
+const require_cn = require("../../lib/cn.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./wheel-column.scss");
+const VISIBLE_ROWS = 5;
+/** Пауза после последнего scroll-события, по которой считаем колесо остановленным. */
+const SETTLE_DELAY = 120;
+const clamp = (index, max) => Math.min(Math.max(index, 0), max);
+/**
+* Колесо с прокруткой и snap. Выбранный пункт — тот, что посередине окна.
+* Колесо мыши, тач и стрелки меняют значение, клик по пункту выбирает его.
+*/
+const WheelColumn = ({ label, items, value, onChange, className }) => {
+	const listRef = (0, react.useRef)(null);
+	const settleTimer = (0, react.useRef)(void 0);
+	const frame = (0, react.useRef)(void 0);
+	const scrolling = (0, react.useRef)(false);
+	const latest = (0, react.useRef)({
+		items,
+		value,
+		onChange
+	});
+	(0, react.useEffect)(() => {
+		latest.current = {
+			items,
+			value,
+			onChange
+		};
+	});
+	const index = Math.max(0, items.findIndex((item) => item.value === value));
+	const selected = items[index];
+	(0, react.useEffect)(() => {
+		const node = listRef.current;
+		if (!node || scrolling.current) return;
+		const target = index * 40;
+		if (Math.abs(node.scrollTop - target) > 1) node.scrollTop = target;
+	}, [index, items.length]);
+	(0, react.useEffect)(() => () => {
+		window.clearTimeout(settleTimer.current);
+		if (frame.current !== void 0) window.cancelAnimationFrame(frame.current);
+	}, []);
+	const reportPosition = () => {
+		frame.current = void 0;
+		const node = listRef.current;
+		const { items: list, value: current, onChange: emit } = latest.current;
+		if (!node || list.length === 0) return;
+		const item = list[clamp(Math.round(node.scrollTop / 40), list.length - 1)];
+		if (item && item.value !== current) emit(item.value);
+	};
+	const handleScroll = () => {
+		scrolling.current = true;
+		window.clearTimeout(settleTimer.current);
+		settleTimer.current = window.setTimeout(() => {
+			scrolling.current = false;
+		}, SETTLE_DELAY);
+		if (frame.current === void 0) frame.current = window.requestAnimationFrame(reportPosition);
+	};
+	const select = (next) => {
+		const item = items[next];
+		if (!item || next === index) return;
+		onChange(item.value);
+	};
+	const handleKeyDown = (event) => {
+		const next = {
+			ArrowUp: index - 1,
+			ArrowDown: index + 1,
+			PageUp: index - VISIBLE_ROWS,
+			PageDown: index + VISIBLE_ROWS,
+			Home: 0,
+			End: items.length - 1
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		select(clamp(next, items.length - 1));
+	};
+	const spacer = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "wheel__spacer",
+		style: { height: 40 * Math.floor(VISIBLE_ROWS / 2) },
+		"aria-hidden": true
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "wheel-frame",
+		style: { "--wheel-item-height": `40px` },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: listRef,
+			role: "spinbutton",
+			"aria-label": label,
+			"aria-valuemin": items[0]?.value,
+			"aria-valuemax": items.at(-1)?.value,
+			"aria-valuenow": selected?.value,
+			"aria-valuetext": selected?.label,
+			tabIndex: 0,
+			className: require_cn.cn("wheel", className),
+			style: { height: 200 },
+			onScroll: handleScroll,
+			onKeyDown: handleKeyDown,
+			children: [
+				spacer,
+				items.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					tabIndex: -1,
+					className: require_cn.cn("wheel__item", require_cn.when(i === index, "wheel__item--active")),
+					style: { height: 40 },
+					onClick: () => select(i),
+					children: item.label
+				}, item.value)),
+				spacer
+			]
+		})
+	});
+};
+exports.WheelColumn = WheelColumn;
+
+//# sourceMappingURL=wheel-column.cjs.map

package/dist/components/birthday-picker/wheel-column.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"wheel-column.cjs","names":["useRef","cn","when"],"sources":["../../../src/components/birthday-picker/wheel-column.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type KeyboardEvent,\n} from 'react';\n\nimport { cn, when } from '@/lib/cn';\nimport './wheel-column.scss';\n\nexport const WHEEL_ITEM_HEIGHT = 40;\nconst VISIBLE_ROWS = 5;\n/** Пауза после последнего scroll-события, по которой считаем колесо остановленным. */\nconst SETTLE_DELAY = 120;\n\nexport interface WheelItem {\n  value: number;\n  label: string;\n}\n\nexport interface WheelColumnProps {\n  /** Подпись для вспомогательных технологий. */\n  label: string;\n  items: WheelItem[];\n  value: number;\n  onChange: (value: number) => void;\n  className?: string;\n}\n\nconst clamp = (index: number, max: number) => Math.min(Math.max(index, 0), max);\n\n/**\n * Колесо с прокруткой и snap. Выбранный пункт — тот, что посередине окна.\n * Колесо мыши, тач и стрелки меняют значение, клик по пункту выбирает его.\n */\nexport const WheelColumn = ({\n  label,\n  items,\n  value,\n  onChange,\n  className,\n}: WheelColumnProps) => {\n  const listRef = useRef<HTMLDivElement>(null);\n  const settleTimer = useRef<number | undefined>(undefined);\n  const frame = useRef<number | undefined>(undefined);\n  const scrolling = useRef(false);\n  // Обработчики из таймера видят актуальные значения, а не замыкание на момент скролла.\n  const latest = useRef({ items, value, onChange });\n  useEffect(() => {\n    latest.current = { items, value, onChange };\n  });\n\n  const index = Math.max(\n    0,\n    items.findIndex(item => item.value === value),\n  );\n  const selected = items[index];\n\n  // Значение пришло снаружи или список сократился: докручиваем колесо.\n  // Во время жеста пользователя не трогаем, иначе колесо дёргается под пальцем.\n  useEffect(() => {\n    const node = listRef.current;\n    if (!node || scrolling.current) return;\n\n    const target = index * WHEEL_ITEM_HEIGHT;\n    if (Math.abs(node.scrollTop - target) > 1) node.scrollTop = target;\n  }, [index, items.length]);\n\n  useEffect(\n    () => () => {\n      window.clearTimeout(settleTimer.current);\n      if (frame.current !== undefined)\n        window.cancelAnimationFrame(frame.current);\n    },\n    [],\n  );\n\n  // Выбор идёт за прокруткой, а не после остановки: тап по «Применить» во время\n  // инерции не должен отстать от того, что видно на колесе.\n  const reportPosition = () => {\n    frame.current = undefined;\n    const node = listRef.current;\n    const { items: list, value: current, onChange: emit } = latest.current;\n    if (!node || list.length === 0) return;\n\n    const item =\n      list[\n        clamp(Math.round(node.scrollTop / WHEEL_ITEM_HEIGHT), list.length - 1)\n      ];\n    if (item && item.value !== current) emit(item.value);\n  };\n\n  const handleScroll = () => {\n    scrolling.current = true;\n    window.clearTimeout(settleTimer.current);\n    settleTimer.current = window.setTimeout(() => {\n      scrolling.current = false;\n    }, SETTLE_DELAY);\n\n    if (frame.current === undefined) {\n      frame.current = window.requestAnimationFrame(reportPosition);\n    }\n  };\n\n  const select = (next: number) => {\n    const item = items[next];\n    if (!item || next === index) return;\n    onChange(item.value);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const steps: Record<string, number> = {\n      ArrowUp: index - 1,\n      ArrowDown: index + 1,\n      PageUp: index - VISIBLE_ROWS,\n      PageDown: index + VISIBLE_ROWS,\n      Home: 0,\n      End: items.length - 1,\n    };\n\n    const next = steps[event.key];\n    if (next === undefined) return;\n\n    event.preventDefault();\n    select(clamp(next, items.length - 1));\n  };\n\n  const spacer = (\n    <div\n      className=\"wheel__spacer\"\n      style={{ height: WHEEL_ITEM_HEIGHT * Math.floor(VISIBLE_ROWS / 2) }}\n      aria-hidden\n    />\n  );\n\n  return (\n    <div\n      className=\"wheel-frame\"\n      style={\n        { '--wheel-item-height': `${WHEEL_ITEM_HEIGHT}px` } as CSSProperties\n      }\n    >\n      <div\n        ref={listRef}\n        // У колеса нет нативного тега; spinbutton — ближайшая роль с aria-valuenow.\n        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role\n        role=\"spinbutton\"\n        aria-label={label}\n        aria-valuemin={items[0]?.value}\n        aria-valuemax={items.at(-1)?.value}\n        aria-valuenow={selected?.value}\n        aria-valuetext={selected?.label}\n        tabIndex={0}\n        className={cn('wheel', className)}\n        style={{ height: WHEEL_ITEM_HEIGHT * VISIBLE_ROWS }}\n        onScroll={handleScroll}\n        onKeyDown={handleKeyDown}\n      >\n        {spacer}\n        {items.map((item, i) => (\n          <button\n            key={item.value}\n            type=\"button\"\n            tabIndex={-1}\n            className={cn(\n              'wheel__item',\n              when(i === index, 'wheel__item--active'),\n            )}\n            style={{ height: WHEEL_ITEM_HEIGHT }}\n            onClick={() => select(i)}\n          >\n            {item.label}\n          </button>\n        ))}\n        {spacer}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/birthday-picker/wheel-column.js

@@ -0,0 +1,114 @@
+import { cn, when } from "../../lib/cn.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./wheel-column.scss";
+const VISIBLE_ROWS = 5;
+/** Пауза после последнего scroll-события, по которой считаем колесо остановленным. */
+const SETTLE_DELAY = 120;
+const clamp = (index, max) => Math.min(Math.max(index, 0), max);
+/**
+* Колесо с прокруткой и snap. Выбранный пункт — тот, что посередине окна.
+* Колесо мыши, тач и стрелки меняют значение, клик по пункту выбирает его.
+*/
+const WheelColumn = ({ label, items, value, onChange, className }) => {
+	const listRef = useRef(null);
+	const settleTimer = useRef(void 0);
+	const frame = useRef(void 0);
+	const scrolling = useRef(false);
+	const latest = useRef({
+		items,
+		value,
+		onChange
+	});
+	useEffect(() => {
+		latest.current = {
+			items,
+			value,
+			onChange
+		};
+	});
+	const index = Math.max(0, items.findIndex((item) => item.value === value));
+	const selected = items[index];
+	useEffect(() => {
+		const node = listRef.current;
+		if (!node || scrolling.current) return;
+		const target = index * 40;
+		if (Math.abs(node.scrollTop - target) > 1) node.scrollTop = target;
+	}, [index, items.length]);
+	useEffect(() => () => {
+		window.clearTimeout(settleTimer.current);
+		if (frame.current !== void 0) window.cancelAnimationFrame(frame.current);
+	}, []);
+	const reportPosition = () => {
+		frame.current = void 0;
+		const node = listRef.current;
+		const { items: list, value: current, onChange: emit } = latest.current;
+		if (!node || list.length === 0) return;
+		const item = list[clamp(Math.round(node.scrollTop / 40), list.length - 1)];
+		if (item && item.value !== current) emit(item.value);
+	};
+	const handleScroll = () => {
+		scrolling.current = true;
+		window.clearTimeout(settleTimer.current);
+		settleTimer.current = window.setTimeout(() => {
+			scrolling.current = false;
+		}, SETTLE_DELAY);
+		if (frame.current === void 0) frame.current = window.requestAnimationFrame(reportPosition);
+	};
+	const select = (next) => {
+		const item = items[next];
+		if (!item || next === index) return;
+		onChange(item.value);
+	};
+	const handleKeyDown = (event) => {
+		const next = {
+			ArrowUp: index - 1,
+			ArrowDown: index + 1,
+			PageUp: index - VISIBLE_ROWS,
+			PageDown: index + VISIBLE_ROWS,
+			Home: 0,
+			End: items.length - 1
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		select(clamp(next, items.length - 1));
+	};
+	const spacer = /* @__PURE__ */ jsx("div", {
+		className: "wheel__spacer",
+		style: { height: 40 * Math.floor(VISIBLE_ROWS / 2) },
+		"aria-hidden": true
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "wheel-frame",
+		style: { "--wheel-item-height": `40px` },
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: listRef,
+			role: "spinbutton",
+			"aria-label": label,
+			"aria-valuemin": items[0]?.value,
+			"aria-valuemax": items.at(-1)?.value,
+			"aria-valuenow": selected?.value,
+			"aria-valuetext": selected?.label,
+			tabIndex: 0,
+			className: cn("wheel", className),
+			style: { height: 200 },
+			onScroll: handleScroll,
+			onKeyDown: handleKeyDown,
+			children: [
+				spacer,
+				items.map((item, i) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					className: cn("wheel__item", when(i === index, "wheel__item--active")),
+					style: { height: 40 },
+					onClick: () => select(i),
+					children: item.label
+				}, item.value)),
+				spacer
+			]
+		})
+	});
+};
+export { WheelColumn };
+
+//# sourceMappingURL=wheel-column.js.map

package/dist/components/birthday-picker/wheel-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wheel-column.js","names":[],"sources":["../../../src/components/birthday-picker/wheel-column.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type KeyboardEvent,\n} from 'react';\n\nimport { cn, when } from '@/lib/cn';\nimport './wheel-column.scss';\n\nexport const WHEEL_ITEM_HEIGHT = 40;\nconst VISIBLE_ROWS = 5;\n/** Пауза после последнего scroll-события, по которой считаем колесо остановленным. */\nconst SETTLE_DELAY = 120;\n\nexport interface WheelItem {\n  value: number;\n  label: string;\n}\n\nexport interface WheelColumnProps {\n  /** Подпись для вспомогательных технологий. */\n  label: string;\n  items: WheelItem[];\n  value: number;\n  onChange: (value: number) => void;\n  className?: string;\n}\n\nconst clamp = (index: number, max: number) => Math.min(Math.max(index, 0), max);\n\n/**\n * Колесо с прокруткой и snap. Выбранный пункт — тот, что посередине окна.\n * Колесо мыши, тач и стрелки меняют значение, клик по пункту выбирает его.\n */\nexport const WheelColumn = ({\n  label,\n  items,\n  value,\n  onChange,\n  className,\n}: WheelColumnProps) => {\n  const listRef = useRef<HTMLDivElement>(null);\n  const settleTimer = useRef<number | undefined>(undefined);\n  const frame = useRef<number | undefined>(undefined);\n  const scrolling = useRef(false);\n  // Обработчики из таймера видят актуальные значения, а не замыкание на момент скролла.\n  const latest = useRef({ items, value, onChange });\n  useEffect(() => {\n    latest.current = { items, value, onChange };\n  });\n\n  const index = Math.max(\n    0,\n    items.findIndex(item => item.value === value),\n  );\n  const selected = items[index];\n\n  // Значение пришло снаружи или список сократился: докручиваем колесо.\n  // Во время жеста пользователя не трогаем, иначе колесо дёргается под пальцем.\n  useEffect(() => {\n    const node = listRef.current;\n    if (!node || scrolling.current) return;\n\n    const target = index * WHEEL_ITEM_HEIGHT;\n    if (Math.abs(node.scrollTop - target) > 1) node.scrollTop = target;\n  }, [index, items.length]);\n\n  useEffect(\n    () => () => {\n      window.clearTimeout(settleTimer.current);\n      if (frame.current !== undefined)\n        window.cancelAnimationFrame(frame.current);\n    },\n    [],\n  );\n\n  // Выбор идёт за прокруткой, а не после остановки: тап по «Применить» во время\n  // инерции не должен отстать от того, что видно на колесе.\n  const reportPosition = () => {\n    frame.current = undefined;\n    const node = listRef.current;\n    const { items: list, value: current, onChange: emit } = latest.current;\n    if (!node || list.length === 0) return;\n\n    const item =\n      list[\n        clamp(Math.round(node.scrollTop / WHEEL_ITEM_HEIGHT), list.length - 1)\n      ];\n    if (item && item.value !== current) emit(item.value);\n  };\n\n  const handleScroll = () => {\n    scrolling.current = true;\n    window.clearTimeout(settleTimer.current);\n    settleTimer.current = window.setTimeout(() => {\n      scrolling.current = false;\n    }, SETTLE_DELAY);\n\n    if (frame.current === undefined) {\n      frame.current = window.requestAnimationFrame(reportPosition);\n    }\n  };\n\n  const select = (next: number) => {\n    const item = items[next];\n    if (!item || next === index) return;\n    onChange(item.value);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const steps: Record<string, number> = {\n      ArrowUp: index - 1,\n      ArrowDown: index + 1,\n      PageUp: index - VISIBLE_ROWS,\n      PageDown: index + VISIBLE_ROWS,\n      Home: 0,\n      End: items.length - 1,\n    };\n\n    const next = steps[event.key];\n    if (next === undefined) return;\n\n    event.preventDefault();\n    select(clamp(next, items.length - 1));\n  };\n\n  const spacer = (\n    <div\n      className=\"wheel__spacer\"\n      style={{ height: WHEEL_ITEM_HEIGHT * Math.floor(VISIBLE_ROWS / 2) }}\n      aria-hidden\n    />\n  );\n\n  return (\n    <div\n      className=\"wheel-frame\"\n      style={\n        { '--wheel-item-height': `${WHEEL_ITEM_HEIGHT}px` } as CSSProperties\n      }\n    >\n      <div\n        ref={listRef}\n        // У колеса нет нативного тега; spinbutton — ближайшая роль с aria-valuenow.\n        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role\n        role=\"spinbutton\"\n        aria-label={label}\n        aria-valuemin={items[0]?.value}\n        aria-valuemax={items.at(-1)?.value}\n        aria-valuenow={selected?.value}\n        aria-valuetext={selected?.label}\n        tabIndex={0}\n        className={cn('wheel', className)}\n        style={{ height: WHEEL_ITEM_HEIGHT * VISIBLE_ROWS }}\n        onScroll={handleScroll}\n        onKeyDown={handleKeyDown}\n      >\n        {spacer}\n        {items.map((item, i) => (\n          <button\n            key={item.value}\n            type=\"button\"\n            tabIndex={-1}\n            className={cn(\n              'wheel__item',\n              when(i === index, 'wheel__item--active'),\n            )}\n            style={{ height: WHEEL_ITEM_HEIGHT }}\n            onClick={() => select(i)}\n          >\n            {item.label}\n          </button>\n        ))}\n        {spacer}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/birthday-picker/wheel-column.scss

@@ -0,0 +1,61 @@
+.wheel-frame {
+  position: relative;
+}
+
+// Полоса выбранного пункта посередине окна. Поверх колеса, не перехватывает клики.
+.wheel-frame::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  height: var(--wheel-item-height);
+  transform: translateY(-50%);
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+  pointer-events: none;
+}
+
+.wheel {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-snap-type: y mandatory;
+  scrollbar-width: none;
+  font-size: var(--text-sm);
+  outline: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
+    border-radius: var(--radius-sm);
+  }
+}
+
+.wheel__spacer {
+  flex: none;
+  pointer-events: none;
+}
+
+.wheel__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--color-muted-foreground);
+  font: inherit;
+  scroll-snap-align: center;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.wheel__item--active {
+  color: var(--color-foreground);
+  font-weight: 700;
+}

package/dist/components/form/form.cjs

@@ -0,0 +1,124 @@
+const require_cn = require("../../lib/cn.cjs");
+const require_button = require("../button/button.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./form.scss");
+// src/components/form/form.tsx
+const FormPendingContext = (0, react.createContext)(false);
+const useFormPending = () => (0, react.useContext)(FormPendingContext);
+const isThenable = (value) => (typeof value === "object" || typeof value === "function") && value !== null && "then" in value && typeof value.then === "function";
+const toMessage = (reason) => {
+	if (typeof reason === "string" && reason.trim()) return reason;
+	if (typeof reason === "object" && reason !== null && "message" in reason && typeof reason.message === "string" && reason.message.trim()) return reason.message;
+	return "Не получилось отправить. Попробуйте ещё раз";
+};
+const Form = (0, react.forwardRef)(function Form({ children, className, error, onSubmit, pending = false, ...props }, ref) {
+	const [busy, setBusy] = (0, react.useState)(false);
+	const [failure, setFailure] = (0, react.useState)(null);
+	const formNode = (0, react.useRef)(null);
+	const busyRef = (0, react.useRef)(false);
+	const requestId = (0, react.useRef)(0);
+	const live = (0, react.useRef)(true);
+	const submitting = pending || busy;
+	const shownError = error ?? failure;
+	(0, react.useEffect)(() => {
+		live.current = true;
+		return () => {
+			live.current = false;
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		const node = formNode.current;
+		if (!node) return;
+		let firstInvalid = null;
+		const handleInvalid = (event) => {
+			const target = event.target;
+			if (!(target instanceof HTMLElement) || !target.closest(".field")) return;
+			event.preventDefault();
+			if (firstInvalid) return;
+			firstInvalid = target;
+			queueMicrotask(() => {
+				firstInvalid?.focus();
+				firstInvalid = null;
+			});
+		};
+		node.addEventListener("invalid", handleInvalid, true);
+		return () => node.removeEventListener("invalid", handleInvalid, true);
+	}, []);
+	const setNode = (0, react.useCallback)((node) => {
+		formNode.current = node;
+		if (typeof ref === "function") {
+			ref(node);
+			return;
+		}
+		if (ref) ref.current = node;
+	}, [ref]);
+	const handleSubmit = (event) => {
+		if (!onSubmit) return;
+		event.preventDefault();
+		if (busyRef.current || pending) return;
+		const data = new FormData(event.currentTarget);
+		setFailure(null);
+		let result;
+		try {
+			result = onSubmit(data, event);
+		} catch (reason) {
+			setFailure(toMessage(reason));
+			return;
+		}
+		if (!isThenable(result)) return;
+		const id = ++requestId.current;
+		busyRef.current = true;
+		setBusy(true);
+		const finish = () => {
+			if (!live.current || requestId.current !== id) return;
+			busyRef.current = false;
+			setBusy(false);
+		};
+		Promise.resolve(result).then(() => {
+			finish();
+		}, (reason) => {
+			finish();
+			if (!live.current || requestId.current !== id) return;
+			setFailure(toMessage(reason));
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+		...props,
+		ref: setNode,
+		className: require_cn.cn("form", className),
+		onSubmit: handleSubmit,
+		"aria-busy": submitting || void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FormPendingContext.Provider, {
+			value: submitting,
+			children: [children, shownError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "form__error",
+				role: "alert",
+				children: shownError
+			}) : null]
+		})
+	});
+});
+const FormActions = ({ children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: require_cn.cn("form__buttons", className),
+	children
+});
+const FormConsent = ({ children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: require_cn.cn("form__consent", className),
+	children
+});
+const FormSubmit = ({ loading = false, children, ...props }) => {
+	const pending = useFormPending();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+		...props,
+		type: "submit",
+		loading: loading || pending,
+		children
+	});
+};
+exports.Form = Form;
+exports.FormActions = FormActions;
+exports.FormConsent = FormConsent;
+exports.FormSubmit = FormSubmit;
+
+//# sourceMappingURL=form.cjs.map

package/dist/components/form/form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.cjs","names":["createContext","useContext","forwardRef","useState","useRef","useCallback","cn","Button"],"sources":["../../../src/components/form/form.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type FormEvent,\n  type FormHTMLAttributes,\n  type ForwardedRef,\n  type ReactNode,\n} from 'react';\n\nimport { Button, type ButtonProps } from '@/components/button';\nimport { cn } from '@/lib/cn';\nimport './form.scss';\n\nconst FormPendingContext = createContext(false);\n\nconst useFormPending = () => useContext(FormPendingContext);\n\nconst isThenable = (value: unknown): value is PromiseLike<void> =>\n  (typeof value === 'object' || typeof value === 'function') &&\n  value !== null &&\n  'then' in value &&\n  typeof value.then === 'function';\n\nconst toMessage = (reason: unknown) => {\n  if (typeof reason === 'string' && reason.trim()) return reason;\n  // Error и объекты вида `{ message }` из API-клиентов.\n  if (\n    typeof reason === 'object' &&\n    reason !== null &&\n    'message' in reason &&\n    typeof reason.message === 'string' &&\n    reason.message.trim()\n  ) {\n    return reason.message;\n  }\n  return 'Не получилось отправить. Попробуйте ещё раз';\n};\n\nexport interface FormProps extends Omit<\n  FormHTMLAttributes<HTMLFormElement>,\n  'onSubmit'\n> {\n  /**\n   * Вызывается после нативной проверки. `FormData` — по `name` контролов.\n   * Промис держит кнопку, пока не осядет. Синхронный throw и reject — ошибка под полями.\n   */\n  onSubmit?: (\n    data: FormData,\n    event: FormEvent<HTMLFormElement>,\n  ) => void | Promise<void>;\n  /**\n   * Запрос снаружи формы: `onSubmit` ничего не вернул, крутилку держит стор.\n   * Складывается с ожиданием промиса.\n   */\n  pending?: boolean;\n  /** Пока задана — она вместо текста из упавшего `onSubmit`. */\n  error?: ReactNode;\n}\n\nexport interface FormActionsProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport interface FormConsentProps {\n  /** Текст рядом с кнопкой: оферта, согласие. Ссылки можно класть внутрь. */\n  children: ReactNode;\n  className?: string;\n}\n\nexport const Form = forwardRef(function Form(\n  {\n    children,\n    className,\n    error,\n    onSubmit,\n    pending = false,\n    ...props\n  }: FormProps,\n  ref: ForwardedRef<HTMLFormElement>,\n) {\n  const [busy, setBusy] = useState(false);\n  const [failure, setFailure] = useState<string | null>(null);\n  const formNode = useRef<HTMLFormElement | null>(null);\n  const busyRef = useRef(false);\n  const requestId = useRef(0);\n  const live = useRef(true);\n  const submitting = pending || busy;\n  const shownError = error ?? failure;\n\n  useEffect(() => {\n    live.current = true;\n    return () => {\n      live.current = false;\n    };\n  }, []);\n\n  useEffect(() => {\n    const node = formNode.current;\n    if (!node) return;\n\n    // Бабл браузера английский и перекрывает подсказку. Field уже рисует\n    // ошибку. Отмена `invalid` убирает контрол из списка, которому браузер\n    // показывает бабл. Сама проверка остаётся отрицательной, сабмит не уходит.\n    let firstInvalid: HTMLElement | null = null;\n\n    const handleInvalid = (event: Event) => {\n      const target = event.target;\n      if (!(target instanceof HTMLElement) || !target.closest('.field')) return;\n\n      event.preventDefault();\n      if (firstInvalid) return;\n\n      // Браузер фокусит только контролы, чей `invalid` не отменён.\n      // Первый в дереве — тот, с которого он начал бы сам.\n      firstInvalid = target;\n      queueMicrotask(() => {\n        firstInvalid?.focus();\n        firstInvalid = null;\n      });\n    };\n\n    node.addEventListener('invalid', handleInvalid, true);\n    return () => node.removeEventListener('invalid', handleInvalid, true);\n  }, []);\n\n  // Стабильная ссылка: иначе React на каждом рендере отцепляет и вешает ref заново.\n  const setNode = useCallback(\n    (node: HTMLFormElement | null) => {\n      formNode.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n        return;\n      }\n      if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    // Без своего onSubmit остаётся нативный action/method.\n    if (!onSubmit) return;\n\n    event.preventDefault();\n    // Кнопка заблокирована, но requestSubmit и Enter её обходят.\n    if (busyRef.current || pending) return;\n\n    const data = new FormData(event.currentTarget);\n    setFailure(null);\n\n    let result: void | Promise<void>;\n    try {\n      result = onSubmit(data, event);\n    } catch (reason) {\n      setFailure(toMessage(reason));\n      return;\n    }\n\n    if (!isThenable(result)) return;\n\n    const id = ++requestId.current;\n    busyRef.current = true;\n    setBusy(true);\n\n    const finish = () => {\n      if (!live.current || requestId.current !== id) return;\n      busyRef.current = false;\n      setBusy(false);\n    };\n\n    void Promise.resolve(result).then(\n      () => {\n        finish();\n      },\n      (reason: unknown) => {\n        finish();\n        if (!live.current || requestId.current !== id) return;\n        setFailure(toMessage(reason));\n      },\n    );\n  };\n\n  return (\n    <form\n      {...props}\n      ref={setNode}\n      className={cn('form', className)}\n      onSubmit={handleSubmit}\n      aria-busy={submitting || undefined}\n    >\n      <FormPendingContext.Provider value={submitting}>\n        {children}\n        {shownError ? (\n          <p className=\"form__error\" role=\"alert\">\n            {shownError}\n          </p>\n        ) : null}\n      </FormPendingContext.Provider>\n    </form>\n  );\n});\n\nexport const FormActions = ({ children, className }: FormActionsProps) => (\n  <div className={cn('form__buttons', className)}>{children}</div>\n);\n\nexport const FormConsent = ({ children, className }: FormConsentProps) => (\n  <div className={cn('form__consent', className)}>{children}</div>\n);\n\nexport const FormSubmit = ({\n  loading = false,\n  children,\n  ...props\n}: Omit<ButtonProps, 'type' | 'asChild'>) => {\n  const pending = useFormPending();\n\n  return (\n    <Button {...props} type=\"submit\" loading={loading || pending}>\n      {children}\n    </Button>\n  );\n};\n"],"mappings":"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"}

package/dist/components/form/form.d.cts

@@ -0,0 +1,31 @@
+import { ButtonProps } from "../button/button.cjs";
+import "../button/index.cjs";
+import { FormEvent, FormHTMLAttributes, ReactNode } from "react";
+export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+  /**
+   * Вызывается после нативной проверки. `FormData` — по `name` контролов.
+   * Промис держит кнопку, пока не осядет. Синхронный throw и reject — ошибка под полями.
+   */
+  onSubmit?: (data: FormData, event: FormEvent<HTMLFormElement>) => void | Promise<void>;
+  /**
+   * Запрос снаружи формы: `onSubmit` ничего не вернул, крутилку держит стор.
+   * Складывается с ожиданием промиса.
+   */
+  pending?: boolean;
+  /** Пока задана — она вместо текста из упавшего `onSubmit`. */
+  error?: ReactNode;
+}
+export interface FormActionsProps {
+  children: ReactNode;
+  className?: string;
+}
+export interface FormConsentProps {
+  /** Текст рядом с кнопкой: оферта, согласие. Ссылки можно класть внутрь. */
+  children: ReactNode;
+  className?: string;
+}
+export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLFormElement>>;
+export declare const FormActions: ({ children, className }: FormActionsProps) => import("react").JSX.Element;
+export declare const FormConsent: ({ children, className }: FormConsentProps) => import("react").JSX.Element;
+export declare const FormSubmit: ({ loading, children, ...props }: Omit<ButtonProps, "type" | "asChild">) => import("react").JSX.Element;
+//# sourceMappingURL=form.d.cts.map

package/dist/components/form/form.d.ts

@@ -0,0 +1,31 @@
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { FormEvent, FormHTMLAttributes, ReactNode } from "react";
+export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+  /**
+   * Вызывается после нативной проверки. `FormData` — по `name` контролов.
+   * Промис держит кнопку, пока не осядет. Синхронный throw и reject — ошибка под полями.
+   */
+  onSubmit?: (data: FormData, event: FormEvent<HTMLFormElement>) => void | Promise<void>;
+  /**
+   * Запрос снаружи формы: `onSubmit` ничего не вернул, крутилку держит стор.
+   * Складывается с ожиданием промиса.
+   */
+  pending?: boolean;
+  /** Пока задана — она вместо текста из упавшего `onSubmit`. */
+  error?: ReactNode;
+}
+export interface FormActionsProps {
+  children: ReactNode;
+  className?: string;
+}
+export interface FormConsentProps {
+  /** Текст рядом с кнопкой: оферта, согласие. Ссылки можно класть внутрь. */
+  children: ReactNode;
+  className?: string;
+}
+export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLFormElement>>;
+export declare const FormActions: ({ children, className }: FormActionsProps) => import("react").JSX.Element;
+export declare const FormConsent: ({ children, className }: FormConsentProps) => import("react").JSX.Element;
+export declare const FormSubmit: ({ loading, children, ...props }: Omit<ButtonProps, "type" | "asChild">) => import("react").JSX.Element;
+//# sourceMappingURL=form.d.ts.map