@de-kit/st-ui 0.1.11 → 0.1.14

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/button/button.scss

@@ -5,7 +5,7 @@
   width: fit-content;
   display: flex;
   align-items: center;
-  padding: 8px 18px;
+  padding: 8px 16px;
   border-radius: 30px;
   font-size: var(--text-sm);
   line-height: var(--text-sm--line-height);
@@ -18,7 +18,7 @@
   flex-shrink: 0;
   cursor: pointer;
   transition: none;
-  gap: 8px;
+  gap: 5px;
   text-decoration: none;
 
   &:hover:not(:active, [data-active], :disabled, [aria-disabled='true']) {

package/dist/components/field/field.cjs

@@ -12,7 +12,8 @@ const requiredText = (label, message) => {
 };
 const Field = ({ label, hint, hintPlacement = "bottom", error, required = false, requiredMessage, className, children }) => {
 	const inputId = (0, react.useId)();
-	const labelId = `${inputId}-label`;
+	const hasLabel = Boolean(label);
+	const labelId = hasLabel ? `${inputId}-label` : void 0;
 	const rootRef = (0, react.useRef)(null);
 	const hadValueRef = (0, react.useRef)(false);
 	const [showRequired, setShowRequired] = (0, react.useState)(false);
@@ -79,12 +80,12 @@ const Field = ({ label, hint, hintPlacement = "bottom", error, required = false,
 		ref: rootRef,
 		className: require_cn.cn("field", className, require_cn.when(Boolean(hint) && hintPlacement === "label", "field--hint-label")),
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			hasLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 				id: labelId,
 				className: "field__label",
 				htmlFor: inputId,
 				children: label
-			}),
+			}) : null,
 			hintByPlacement.label,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_context.FieldControlProvider, {
 				value: contextValue,

package/dist/components/field/field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"field.cjs","names":["useId","useRef","useState","useCallback","useMemo","cn","when","FieldControlProvider"],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { cn, when } from '@/lib/cn';\nimport {\n  FieldControlProvider,\n  type FieldControlContext,\n} from './field-context';\nimport './field.scss';\n\nexport type FieldHintPlacement = 'bottom' | 'label';\n\nexport interface FieldProps {\n  label: ReactNode;\n  hint?: ReactNode;\n  /** `bottom` — под полем, `label` — сразу под лейблом. */\n  hintPlacement?: FieldHintPlacement;\n  error?: ReactNode;\n  /** Пустое значение после того, как в поле уже что-то было. */\n  required?: boolean;\n  /**\n   * По умолчанию «Поле «{label}» обязательно», если лейбл — строка.\n   * Слово «поле» среднего рода, поэтому формулировка не зависит от рода лейбла.\n   */\n  requiredMessage?: ReactNode;\n  className?: string;\n  /**\n   * Один контрол: id он берёт у поля, поэтому свой `id` на ребёнке\n   * перебивается, а два контрола внутри получат одинаковый.\n   */\n  children: ReactNode;\n}\n\nconst isFilled = (value: string) => value.trim() !== '';\n\nconst requiredText = (label: ReactNode, message: ReactNode | undefined) => {\n  if (message) return message;\n  if (typeof label === 'string') return `Поле «${label}» обязательно`;\n  return 'Обязательное поле';\n};\n\nexport const Field = ({\n  label,\n  hint,\n  hintPlacement = 'bottom',\n  error,\n  required = false,\n  requiredMessage,\n  className,\n  children,\n}: FieldProps) => {\n  const inputId = useId();\n  const labelId = `${inputId}-label`;\n  const rootRef = useRef<HTMLDivElement>(null);\n  // ponytail: value/defaultValue больше не читаем с ребёнка. Контрол зовёт\n  // reportValue из эффекта — до первого эффекта hadValue ещё false.\n  const hadValueRef = useRef(false);\n  const [showRequired, setShowRequired] = useState(false);\n  const requiredError =\n    required && showRequired ? requiredText(label, requiredMessage) : null;\n  const visibleError = error ?? requiredError;\n  const invalid = Boolean(visibleError);\n  const hintId = hint ? `${inputId}-hint` : undefined;\n  const errorId = invalid ? `${inputId}-error` : undefined;\n  const describedBy = [errorId, hintId].filter(Boolean).join(' ');\n\n  const reportValue = useCallback(\n    (value: string) => {\n      if (!required) return;\n\n      if (isFilled(value)) {\n        hadValueRef.current = true;\n        setShowRequired(false);\n        return;\n      }\n\n      if (hadValueRef.current) setShowRequired(true);\n    },\n    [required],\n  );\n\n  /**\n   * Второй повод пожаловаться — неудачная проверка формы. Нужен для контролов,\n   * которые нельзя опустошить: радиогруппу обратно не снимут, и до отправки\n   * момента для ошибки нет. `invalid` не всплывает, но проходит фазу захвата,\n   * поэтому одного слушателя на корне поля хватает на любой контрол внутри.\n   * Реагируем только на пустое значение: формат, длина и прочие нарушения\n   * обязательности не касаются, и чужую ошибку выдавать за неё нельзя.\n   */\n  useEffect(() => {\n    const node = rootRef.current;\n    if (!node || !required) return;\n\n    const handleInvalid = (event: Event) => {\n      const target = event.target;\n      const missing =\n        (target instanceof HTMLInputElement ||\n          target instanceof HTMLTextAreaElement ||\n          target instanceof HTMLSelectElement) &&\n        target.validity.valueMissing;\n\n      if (missing) setShowRequired(true);\n    };\n\n    node.addEventListener('invalid', handleInvalid, true);\n    return () => node.removeEventListener('invalid', handleInvalid, true);\n  }, [required]);\n\n  const contextValue = useMemo<FieldControlContext>(\n    () => ({\n      id: inputId,\n      labelId,\n      invalid,\n      required,\n      describedBy: describedBy || undefined,\n      errorId,\n      reportValue,\n    }),\n    [describedBy, errorId, inputId, invalid, labelId, reportValue, required],\n  );\n\n  const hintByPlacement: Record<FieldHintPlacement, ReactNode> = {\n    label: null,\n    bottom: null,\n  };\n\n  if (hint) {\n    hintByPlacement[hintPlacement] = (\n      <p\n        id={hintId}\n        className={cn(\n          'field__hint',\n          when(hintPlacement === 'label', 'field__hint--label'),\n        )}\n      >\n        {hint}\n      </p>\n    );\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      className={cn(\n        'field',\n        className,\n        when(Boolean(hint) && hintPlacement === 'label', 'field--hint-label'),\n      )}\n    >\n      <label id={labelId} className=\"field__label\" htmlFor={inputId}>\n        {label}\n      </label>\n      {hintByPlacement.label}\n      <FieldControlProvider value={contextValue}>\n        {children}\n      </FieldControlProvider>\n      {visibleError ? (\n        <p id={errorId} className=\"field__error\" role=\"alert\">\n          {visibleError}\n        </p>\n      ) : null}\n      {hintByPlacement.bottom}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAwCA,MAAM,YAAY,UAAkB,MAAM,KAAK,MAAM;AAErD,MAAM,gBAAgB,OAAkB,YAAmC;CACzE,IAAI,SAAS,OAAO;CACpB,IAAI,OAAO,UAAU,UAAU,OAAO,SAAS,MAAM;CACrD,OAAO;AACT;AAEA,MAAa,SAAS,EACpB,OACA,MACA,gBAAgB,UAChB,OACA,WAAW,OACX,iBACA,WACA,eACgB;CAChB,MAAM,WAAA,GAAUA,MAAAA,MAAAA,CAAM;CACtB,MAAM,UAAU,GAAG,QAAQ;CAC3B,MAAM,WAAA,GAAUC,MAAAA,OAAAA,CAAuB,IAAI;CAG3C,MAAM,eAAA,GAAcA,MAAAA,OAAAA,CAAO,KAAK;CAChC,MAAM,CAAC,cAAc,oBAAA,GAAmBC,MAAAA,SAAAA,CAAS,KAAK;CACtD,MAAM,gBACJ,YAAY,eAAe,aAAa,OAAO,eAAe,IAAI;CACpE,MAAM,eAAe,SAAS;CAC9B,MAAM,UAAU,QAAQ,YAAY;CACpC,MAAM,SAAS,OAAO,GAAG,QAAQ,SAAS,KAAA;CAC1C,MAAM,UAAU,UAAU,GAAG,QAAQ,UAAU,KAAA;CAC/C,MAAM,cAAc,CAAC,SAAS,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE9D,MAAM,eAAA,GAAcC,MAAAA,YAAAA,EACjB,UAAkB;EACjB,IAAI,CAAC,UAAU;EAEf,IAAI,SAAS,KAAK,GAAG;GACnB,YAAY,UAAU;GACtB,gBAAgB,KAAK;GACrB;EACF;EAEA,IAAI,YAAY,SAAS,gBAAgB,IAAI;CAC/C,GACA,CAAC,QAAQ,CACX;;;;;;;;;CAUA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,QAAQ,CAAC,UAAU;EAExB,MAAM,iBAAiB,UAAiB;GACtC,MAAM,SAAS,MAAM;GAOrB,KALG,kBAAkB,oBACjB,kBAAkB,uBAClB,kBAAkB,sBACpB,OAAO,SAAS,cAEL,gBAAgB,IAAI;EACnC;EAEA,KAAK,iBAAiB,WAAW,eAAe,IAAI;EACpD,aAAa,KAAK,oBAAoB,WAAW,eAAe,IAAI;CACtE,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,gBAAA,GAAeC,MAAAA,QAAAA,QACZ;EACL,IAAI;EACJ;EACA;EACA;EACA,aAAa,eAAe,KAAA;EAC5B;EACA;CACF,IACA;EAAC;EAAa;EAAS;EAAS;EAAS;EAAS;EAAa;CAAQ,CACzE;CAEA,MAAM,kBAAyD;EAC7D,OAAO;EACP,QAAQ;CACV;CAEA,IAAI,MACF,gBAAgB,iBACd,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACE,IAAI;EACJ,WAAWC,WAAAA,GACT,eACAC,WAAAA,KAAK,kBAAkB,SAAS,oBAAoB,CACtD;EAEC,UAAA;CACA,CAAA;CAIP,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,KAAK;EACL,WAAWD,WAAAA,GACT,SACA,WACAC,WAAAA,KAAK,QAAQ,IAAI,KAAK,kBAAkB,SAAS,mBAAmB,CACtE;EANF,UAAA;GAQE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;IAAO,IAAI;IAAS,WAAU;IAAe,SAAS;IACnD,UAAA;GACI,CAAA;GACN,gBAAgB;GACjB,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACrB,eACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IAAG,IAAI;IAAS,WAAU;IAAe,MAAK;IAC3C,UAAA;GACA,CAAA,IACD;GACH,gBAAgB;EACd;;AAET"}
+{"version":3,"file":"field.cjs","names":["useId","useRef","useState","useCallback","useMemo","cn","when","FieldControlProvider"],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { cn, when } from '@/lib/cn';\nimport {\n  FieldControlProvider,\n  type FieldControlContext,\n} from './field-context';\nimport './field.scss';\n\nexport type FieldHintPlacement = 'bottom' | 'label';\n\nexport interface FieldProps {\n  label?: ReactNode;\n  hint?: ReactNode;\n  /** `bottom` — под полем, `label` — сразу под лейблом. */\n  hintPlacement?: FieldHintPlacement;\n  error?: ReactNode;\n  /** Пустое значение после того, как в поле уже что-то было. */\n  required?: boolean;\n  /**\n   * По умолчанию «Поле «{label}» обязательно», если лейбл — строка.\n   * Слово «поле» среднего рода, поэтому формулировка не зависит от рода лейбла.\n   */\n  requiredMessage?: ReactNode;\n  className?: string;\n  /**\n   * Один контрол: id он берёт у поля, поэтому свой `id` на ребёнке\n   * перебивается, а два контрола внутри получат одинаковый.\n   */\n  children: ReactNode;\n}\n\nconst isFilled = (value: string) => value.trim() !== '';\n\nconst requiredText = (label: ReactNode, message: ReactNode | undefined) => {\n  if (message) return message;\n  if (typeof label === 'string') return `Поле «${label}» обязательно`;\n  return 'Обязательное поле';\n};\n\nexport const Field = ({\n  label,\n  hint,\n  hintPlacement = 'bottom',\n  error,\n  required = false,\n  requiredMessage,\n  className,\n  children,\n}: FieldProps) => {\n  const inputId = useId();\n  const hasLabel = Boolean(label);\n  const labelId = hasLabel ? `${inputId}-label` : undefined;\n  const rootRef = useRef<HTMLDivElement>(null);\n  // ponytail: value/defaultValue больше не читаем с ребёнка. Контрол зовёт\n  // reportValue из эффекта — до первого эффекта hadValue ещё false.\n  const hadValueRef = useRef(false);\n  const [showRequired, setShowRequired] = useState(false);\n  const requiredError =\n    required && showRequired ? requiredText(label, requiredMessage) : null;\n  const visibleError = error ?? requiredError;\n  const invalid = Boolean(visibleError);\n  const hintId = hint ? `${inputId}-hint` : undefined;\n  const errorId = invalid ? `${inputId}-error` : undefined;\n  const describedBy = [errorId, hintId].filter(Boolean).join(' ');\n\n  const reportValue = useCallback(\n    (value: string) => {\n      if (!required) return;\n\n      if (isFilled(value)) {\n        hadValueRef.current = true;\n        setShowRequired(false);\n        return;\n      }\n\n      if (hadValueRef.current) setShowRequired(true);\n    },\n    [required],\n  );\n\n  /**\n   * Второй повод пожаловаться — неудачная проверка формы. Нужен для контролов,\n   * которые нельзя опустошить: радиогруппу обратно не снимут, и до отправки\n   * момента для ошибки нет. `invalid` не всплывает, но проходит фазу захвата,\n   * поэтому одного слушателя на корне поля хватает на любой контрол внутри.\n   * Реагируем только на пустое значение: формат, длина и прочие нарушения\n   * обязательности не касаются, и чужую ошибку выдавать за неё нельзя.\n   */\n  useEffect(() => {\n    const node = rootRef.current;\n    if (!node || !required) return;\n\n    const handleInvalid = (event: Event) => {\n      const target = event.target;\n      const missing =\n        (target instanceof HTMLInputElement ||\n          target instanceof HTMLTextAreaElement ||\n          target instanceof HTMLSelectElement) &&\n        target.validity.valueMissing;\n\n      if (missing) setShowRequired(true);\n    };\n\n    node.addEventListener('invalid', handleInvalid, true);\n    return () => node.removeEventListener('invalid', handleInvalid, true);\n  }, [required]);\n\n  const contextValue = useMemo<FieldControlContext>(\n    () => ({\n      id: inputId,\n      labelId,\n      invalid,\n      required,\n      describedBy: describedBy || undefined,\n      errorId,\n      reportValue,\n    }),\n    [describedBy, errorId, inputId, invalid, labelId, reportValue, required],\n  );\n\n  const hintByPlacement: Record<FieldHintPlacement, ReactNode> = {\n    label: null,\n    bottom: null,\n  };\n\n  if (hint) {\n    hintByPlacement[hintPlacement] = (\n      <p\n        id={hintId}\n        className={cn(\n          'field__hint',\n          when(hintPlacement === 'label', 'field__hint--label'),\n        )}\n      >\n        {hint}\n      </p>\n    );\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      className={cn(\n        'field',\n        className,\n        when(Boolean(hint) && hintPlacement === 'label', 'field--hint-label'),\n      )}\n    >\n      {hasLabel ? (\n        <label id={labelId} className=\"field__label\" htmlFor={inputId}>\n          {label}\n        </label>\n      ) : null}\n      {hintByPlacement.label}\n      <FieldControlProvider value={contextValue}>\n        {children}\n      </FieldControlProvider>\n      {visibleError ? (\n        <p id={errorId} className=\"field__error\" role=\"alert\">\n          {visibleError}\n        </p>\n      ) : null}\n      {hintByPlacement.bottom}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/field/field.d.cts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 export type FieldHintPlacement = 'bottom' | 'label';
 export interface FieldProps {
-  label: ReactNode;
+  label?: ReactNode;
   hint?: ReactNode;
   /** `bottom` — под полем, `label` — сразу под лейблом. */
   hintPlacement?: FieldHintPlacement;

package/dist/components/field/field.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 export type FieldHintPlacement = 'bottom' | 'label';
 export interface FieldProps {
-  label: ReactNode;
+  label?: ReactNode;
   hint?: ReactNode;
   /** `bottom` — под полем, `label` — сразу под лейблом. */
   hintPlacement?: FieldHintPlacement;

package/dist/components/field/field.js

@@ -12,7 +12,8 @@ const requiredText = (label, message) => {
 };
 const Field = ({ label, hint, hintPlacement = "bottom", error, required = false, requiredMessage, className, children }) => {
 	const inputId = useId();
-	const labelId = `${inputId}-label`;
+	const hasLabel = Boolean(label);
+	const labelId = hasLabel ? `${inputId}-label` : void 0;
 	const rootRef = useRef(null);
 	const hadValueRef = useRef(false);
 	const [showRequired, setShowRequired] = useState(false);
@@ -79,12 +80,12 @@ const Field = ({ label, hint, hintPlacement = "bottom", error, required = false,
 		ref: rootRef,
 		className: cn("field", className, when(Boolean(hint) && hintPlacement === "label", "field--hint-label")),
 		children: [
-			/* @__PURE__ */ jsx("label", {
+			hasLabel ? /* @__PURE__ */ jsx("label", {
 				id: labelId,
 				className: "field__label",
 				htmlFor: inputId,
 				children: label
-			}),
+			}) : null,
 			hintByPlacement.label,
 			/* @__PURE__ */ jsx(FieldControlProvider, {
 				value: contextValue,

package/dist/components/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":[],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { cn, when } from '@/lib/cn';\nimport {\n  FieldControlProvider,\n  type FieldControlContext,\n} from './field-context';\nimport './field.scss';\n\nexport type FieldHintPlacement = 'bottom' | 'label';\n\nexport interface FieldProps {\n  label: ReactNode;\n  hint?: ReactNode;\n  /** `bottom` — под полем, `label` — сразу под лейблом. */\n  hintPlacement?: FieldHintPlacement;\n  error?: ReactNode;\n  /** Пустое значение после того, как в поле уже что-то было. */\n  required?: boolean;\n  /**\n   * По умолчанию «Поле «{label}» обязательно», если лейбл — строка.\n   * Слово «поле» среднего рода, поэтому формулировка не зависит от рода лейбла.\n   */\n  requiredMessage?: ReactNode;\n  className?: string;\n  /**\n   * Один контрол: id он берёт у поля, поэтому свой `id` на ребёнке\n   * перебивается, а два контрола внутри получат одинаковый.\n   */\n  children: ReactNode;\n}\n\nconst isFilled = (value: string) => value.trim() !== '';\n\nconst requiredText = (label: ReactNode, message: ReactNode | undefined) => {\n  if (message) return message;\n  if (typeof label === 'string') return `Поле «${label}» обязательно`;\n  return 'Обязательное поле';\n};\n\nexport const Field = ({\n  label,\n  hint,\n  hintPlacement = 'bottom',\n  error,\n  required = false,\n  requiredMessage,\n  className,\n  children,\n}: FieldProps) => {\n  const inputId = useId();\n  const labelId = `${inputId}-label`;\n  const rootRef = useRef<HTMLDivElement>(null);\n  // ponytail: value/defaultValue больше не читаем с ребёнка. Контрол зовёт\n  // reportValue из эффекта — до первого эффекта hadValue ещё false.\n  const hadValueRef = useRef(false);\n  const [showRequired, setShowRequired] = useState(false);\n  const requiredError =\n    required && showRequired ? requiredText(label, requiredMessage) : null;\n  const visibleError = error ?? requiredError;\n  const invalid = Boolean(visibleError);\n  const hintId = hint ? `${inputId}-hint` : undefined;\n  const errorId = invalid ? `${inputId}-error` : undefined;\n  const describedBy = [errorId, hintId].filter(Boolean).join(' ');\n\n  const reportValue = useCallback(\n    (value: string) => {\n      if (!required) return;\n\n      if (isFilled(value)) {\n        hadValueRef.current = true;\n        setShowRequired(false);\n        return;\n      }\n\n      if (hadValueRef.current) setShowRequired(true);\n    },\n    [required],\n  );\n\n  /**\n   * Второй повод пожаловаться — неудачная проверка формы. Нужен для контролов,\n   * которые нельзя опустошить: радиогруппу обратно не снимут, и до отправки\n   * момента для ошибки нет. `invalid` не всплывает, но проходит фазу захвата,\n   * поэтому одного слушателя на корне поля хватает на любой контрол внутри.\n   * Реагируем только на пустое значение: формат, длина и прочие нарушения\n   * обязательности не касаются, и чужую ошибку выдавать за неё нельзя.\n   */\n  useEffect(() => {\n    const node = rootRef.current;\n    if (!node || !required) return;\n\n    const handleInvalid = (event: Event) => {\n      const target = event.target;\n      const missing =\n        (target instanceof HTMLInputElement ||\n          target instanceof HTMLTextAreaElement ||\n          target instanceof HTMLSelectElement) &&\n        target.validity.valueMissing;\n\n      if (missing) setShowRequired(true);\n    };\n\n    node.addEventListener('invalid', handleInvalid, true);\n    return () => node.removeEventListener('invalid', handleInvalid, true);\n  }, [required]);\n\n  const contextValue = useMemo<FieldControlContext>(\n    () => ({\n      id: inputId,\n      labelId,\n      invalid,\n      required,\n      describedBy: describedBy || undefined,\n      errorId,\n      reportValue,\n    }),\n    [describedBy, errorId, inputId, invalid, labelId, reportValue, required],\n  );\n\n  const hintByPlacement: Record<FieldHintPlacement, ReactNode> = {\n    label: null,\n    bottom: null,\n  };\n\n  if (hint) {\n    hintByPlacement[hintPlacement] = (\n      <p\n        id={hintId}\n        className={cn(\n          'field__hint',\n          when(hintPlacement === 'label', 'field__hint--label'),\n        )}\n      >\n        {hint}\n      </p>\n    );\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      className={cn(\n        'field',\n        className,\n        when(Boolean(hint) && hintPlacement === 'label', 'field--hint-label'),\n      )}\n    >\n      <label id={labelId} className=\"field__label\" htmlFor={inputId}>\n        {label}\n      </label>\n      {hintByPlacement.label}\n      <FieldControlProvider value={contextValue}>\n        {children}\n      </FieldControlProvider>\n      {visibleError ? (\n        <p id={errorId} className=\"field__error\" role=\"alert\">\n          {visibleError}\n        </p>\n      ) : null}\n      {hintByPlacement.bottom}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAwCA,MAAM,YAAY,UAAkB,MAAM,KAAK,MAAM;AAErD,MAAM,gBAAgB,OAAkB,YAAmC;CACzE,IAAI,SAAS,OAAO;CACpB,IAAI,OAAO,UAAU,UAAU,OAAO,SAAS,MAAM;CACrD,OAAO;AACT;AAEA,MAAa,SAAS,EACpB,OACA,MACA,gBAAgB,UAChB,OACA,WAAW,OACX,iBACA,WACA,eACgB;CAChB,MAAM,UAAU,MAAM;CACtB,MAAM,UAAU,GAAG,QAAQ;CAC3B,MAAM,UAAU,OAAuB,IAAI;CAG3C,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,gBACJ,YAAY,eAAe,aAAa,OAAO,eAAe,IAAI;CACpE,MAAM,eAAe,SAAS;CAC9B,MAAM,UAAU,QAAQ,YAAY;CACpC,MAAM,SAAS,OAAO,GAAG,QAAQ,SAAS,KAAA;CAC1C,MAAM,UAAU,UAAU,GAAG,QAAQ,UAAU,KAAA;CAC/C,MAAM,cAAc,CAAC,SAAS,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE9D,MAAM,cAAc,aACjB,UAAkB;EACjB,IAAI,CAAC,UAAU;EAEf,IAAI,SAAS,KAAK,GAAG;GACnB,YAAY,UAAU;GACtB,gBAAgB,KAAK;GACrB;EACF;EAEA,IAAI,YAAY,SAAS,gBAAgB,IAAI;CAC/C,GACA,CAAC,QAAQ,CACX;;;;;;;;;CAUA,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,QAAQ,CAAC,UAAU;EAExB,MAAM,iBAAiB,UAAiB;GACtC,MAAM,SAAS,MAAM;GAOrB,KALG,kBAAkB,oBACjB,kBAAkB,uBAClB,kBAAkB,sBACpB,OAAO,SAAS,cAEL,gBAAgB,IAAI;EACnC;EAEA,KAAK,iBAAiB,WAAW,eAAe,IAAI;EACpD,aAAa,KAAK,oBAAoB,WAAW,eAAe,IAAI;CACtE,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,eACZ;EACL,IAAI;EACJ;EACA;EACA;EACA,aAAa,eAAe,KAAA;EAC5B;EACA;CACF,IACA;EAAC;EAAa;EAAS;EAAS;EAAS;EAAS;EAAa;CAAQ,CACzE;CAEA,MAAM,kBAAyD;EAC7D,OAAO;EACP,QAAQ;CACV;CAEA,IAAI,MACF,gBAAgB,iBACd,oBAAC,KAAD;EACE,IAAI;EACJ,WAAW,GACT,eACA,KAAK,kBAAkB,SAAS,oBAAoB,CACtD;EAEC,UAAA;CACA,CAAA;CAIP,OACE,qBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,SACA,WACA,KAAK,QAAQ,IAAI,KAAK,kBAAkB,SAAS,mBAAmB,CACtE;EANF,UAAA;GAQE,oBAAC,SAAD;IAAO,IAAI;IAAS,WAAU;IAAe,SAAS;IACnD,UAAA;GACI,CAAA;GACN,gBAAgB;GACjB,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACrB,eACC,oBAAC,KAAD;IAAG,IAAI;IAAS,WAAU;IAAe,MAAK;IAC3C,UAAA;GACA,CAAA,IACD;GACH,gBAAgB;EACd;;AAET"}
+{"version":3,"file":"field.js","names":[],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { cn, when } from '@/lib/cn';\nimport {\n  FieldControlProvider,\n  type FieldControlContext,\n} from './field-context';\nimport './field.scss';\n\nexport type FieldHintPlacement = 'bottom' | 'label';\n\nexport interface FieldProps {\n  label?: ReactNode;\n  hint?: ReactNode;\n  /** `bottom` — под полем, `label` — сразу под лейблом. */\n  hintPlacement?: FieldHintPlacement;\n  error?: ReactNode;\n  /** Пустое значение после того, как в поле уже что-то было. */\n  required?: boolean;\n  /**\n   * По умолчанию «Поле «{label}» обязательно», если лейбл — строка.\n   * Слово «поле» среднего рода, поэтому формулировка не зависит от рода лейбла.\n   */\n  requiredMessage?: ReactNode;\n  className?: string;\n  /**\n   * Один контрол: id он берёт у поля, поэтому свой `id` на ребёнке\n   * перебивается, а два контрола внутри получат одинаковый.\n   */\n  children: ReactNode;\n}\n\nconst isFilled = (value: string) => value.trim() !== '';\n\nconst requiredText = (label: ReactNode, message: ReactNode | undefined) => {\n  if (message) return message;\n  if (typeof label === 'string') return `Поле «${label}» обязательно`;\n  return 'Обязательное поле';\n};\n\nexport const Field = ({\n  label,\n  hint,\n  hintPlacement = 'bottom',\n  error,\n  required = false,\n  requiredMessage,\n  className,\n  children,\n}: FieldProps) => {\n  const inputId = useId();\n  const hasLabel = Boolean(label);\n  const labelId = hasLabel ? `${inputId}-label` : undefined;\n  const rootRef = useRef<HTMLDivElement>(null);\n  // ponytail: value/defaultValue больше не читаем с ребёнка. Контрол зовёт\n  // reportValue из эффекта — до первого эффекта hadValue ещё false.\n  const hadValueRef = useRef(false);\n  const [showRequired, setShowRequired] = useState(false);\n  const requiredError =\n    required && showRequired ? requiredText(label, requiredMessage) : null;\n  const visibleError = error ?? requiredError;\n  const invalid = Boolean(visibleError);\n  const hintId = hint ? `${inputId}-hint` : undefined;\n  const errorId = invalid ? `${inputId}-error` : undefined;\n  const describedBy = [errorId, hintId].filter(Boolean).join(' ');\n\n  const reportValue = useCallback(\n    (value: string) => {\n      if (!required) return;\n\n      if (isFilled(value)) {\n        hadValueRef.current = true;\n        setShowRequired(false);\n        return;\n      }\n\n      if (hadValueRef.current) setShowRequired(true);\n    },\n    [required],\n  );\n\n  /**\n   * Второй повод пожаловаться — неудачная проверка формы. Нужен для контролов,\n   * которые нельзя опустошить: радиогруппу обратно не снимут, и до отправки\n   * момента для ошибки нет. `invalid` не всплывает, но проходит фазу захвата,\n   * поэтому одного слушателя на корне поля хватает на любой контрол внутри.\n   * Реагируем только на пустое значение: формат, длина и прочие нарушения\n   * обязательности не касаются, и чужую ошибку выдавать за неё нельзя.\n   */\n  useEffect(() => {\n    const node = rootRef.current;\n    if (!node || !required) return;\n\n    const handleInvalid = (event: Event) => {\n      const target = event.target;\n      const missing =\n        (target instanceof HTMLInputElement ||\n          target instanceof HTMLTextAreaElement ||\n          target instanceof HTMLSelectElement) &&\n        target.validity.valueMissing;\n\n      if (missing) setShowRequired(true);\n    };\n\n    node.addEventListener('invalid', handleInvalid, true);\n    return () => node.removeEventListener('invalid', handleInvalid, true);\n  }, [required]);\n\n  const contextValue = useMemo<FieldControlContext>(\n    () => ({\n      id: inputId,\n      labelId,\n      invalid,\n      required,\n      describedBy: describedBy || undefined,\n      errorId,\n      reportValue,\n    }),\n    [describedBy, errorId, inputId, invalid, labelId, reportValue, required],\n  );\n\n  const hintByPlacement: Record<FieldHintPlacement, ReactNode> = {\n    label: null,\n    bottom: null,\n  };\n\n  if (hint) {\n    hintByPlacement[hintPlacement] = (\n      <p\n        id={hintId}\n        className={cn(\n          'field__hint',\n          when(hintPlacement === 'label', 'field__hint--label'),\n        )}\n      >\n        {hint}\n      </p>\n    );\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      className={cn(\n        'field',\n        className,\n        when(Boolean(hint) && hintPlacement === 'label', 'field--hint-label'),\n      )}\n    >\n      {hasLabel ? (\n        <label id={labelId} className=\"field__label\" htmlFor={inputId}>\n          {label}\n        </label>\n      ) : null}\n      {hintByPlacement.label}\n      <FieldControlProvider value={contextValue}>\n        {children}\n      </FieldControlProvider>\n      {visibleError ? (\n        <p id={errorId} className=\"field__error\" role=\"alert\">\n          {visibleError}\n        </p>\n      ) : null}\n      {hintByPlacement.bottom}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAwCA,MAAM,YAAY,UAAkB,MAAM,KAAK,MAAM;AAErD,MAAM,gBAAgB,OAAkB,YAAmC;CACzE,IAAI,SAAS,OAAO;CACpB,IAAI,OAAO,UAAU,UAAU,OAAO,SAAS,MAAM;CACrD,OAAO;AACT;AAEA,MAAa,SAAS,EACpB,OACA,MACA,gBAAgB,UAChB,OACA,WAAW,OACX,iBACA,WACA,eACgB;CAChB,MAAM,UAAU,MAAM;CACtB,MAAM,WAAW,QAAQ,KAAK;CAC9B,MAAM,UAAU,WAAW,GAAG,QAAQ,UAAU,KAAA;CAChD,MAAM,UAAU,OAAuB,IAAI;CAG3C,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,gBACJ,YAAY,eAAe,aAAa,OAAO,eAAe,IAAI;CACpE,MAAM,eAAe,SAAS;CAC9B,MAAM,UAAU,QAAQ,YAAY;CACpC,MAAM,SAAS,OAAO,GAAG,QAAQ,SAAS,KAAA;CAC1C,MAAM,UAAU,UAAU,GAAG,QAAQ,UAAU,KAAA;CAC/C,MAAM,cAAc,CAAC,SAAS,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE9D,MAAM,cAAc,aACjB,UAAkB;EACjB,IAAI,CAAC,UAAU;EAEf,IAAI,SAAS,KAAK,GAAG;GACnB,YAAY,UAAU;GACtB,gBAAgB,KAAK;GACrB;EACF;EAEA,IAAI,YAAY,SAAS,gBAAgB,IAAI;CAC/C,GACA,CAAC,QAAQ,CACX;;;;;;;;;CAUA,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,QAAQ,CAAC,UAAU;EAExB,MAAM,iBAAiB,UAAiB;GACtC,MAAM,SAAS,MAAM;GAOrB,KALG,kBAAkB,oBACjB,kBAAkB,uBAClB,kBAAkB,sBACpB,OAAO,SAAS,cAEL,gBAAgB,IAAI;EACnC;EAEA,KAAK,iBAAiB,WAAW,eAAe,IAAI;EACpD,aAAa,KAAK,oBAAoB,WAAW,eAAe,IAAI;CACtE,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,eACZ;EACL,IAAI;EACJ;EACA;EACA;EACA,aAAa,eAAe,KAAA;EAC5B;EACA;CACF,IACA;EAAC;EAAa;EAAS;EAAS;EAAS;EAAS;EAAa;CAAQ,CACzE;CAEA,MAAM,kBAAyD;EAC7D,OAAO;EACP,QAAQ;CACV;CAEA,IAAI,MACF,gBAAgB,iBACd,oBAAC,KAAD;EACE,IAAI;EACJ,WAAW,GACT,eACA,KAAK,kBAAkB,SAAS,oBAAoB,CACtD;EAEC,UAAA;CACA,CAAA;CAIP,OACE,qBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,SACA,WACA,KAAK,QAAQ,IAAI,KAAK,kBAAkB,SAAS,mBAAmB,CACtE;EANF,UAAA;GAQG,WACC,oBAAC,SAAD;IAAO,IAAI;IAAS,WAAU;IAAe,SAAS;IACnD,UAAA;GACI,CAAA,IACL;GACH,gBAAgB;GACjB,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACrB,eACC,oBAAC,KAAD;IAAG,IAAI;IAAS,WAAU;IAAe,MAAK;IAC3C,UAAA;GACA,CAAA,IACD;GACH,gBAAgB;EACd;;AAET"}