@de-kit/st-ui 0.1.16 → 0.1.18

package/dist/components/{birthday-picker/birthday-picker.cjs → date-picker/date-picker.cjs}

@@ -8,8 +8,8 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_dom = require("react-dom");
 require("../input/input.scss");
-require("./birthday-picker.scss");
-// src/components/birthday-picker/birthday-picker.tsx
+require("./date-picker.scss");
+// src/components/date-picker/date-picker.tsx
 const MONTH_NAMES = [
 	"январь",
 	"февраль",
@@ -47,9 +47,9 @@ const partsOf = (date) => ({
 const toDate = ({ day, month, year }) => new Date(year, month - 1, day);
 const pad = (value) => String(value).padStart(2, "0");
 const toIsoDate = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-const formatBirthday = (date) => `${date.getDate()} ${MONTH_NAMES_GENITIVE[date.getMonth()]} ${date.getFullYear()}`;
+const formatDate = (date) => `${date.getDate()} ${MONTH_NAMES_GENITIVE[date.getMonth()]} ${date.getFullYear()}`;
 /** Сегодня минус `minAge` лет. 29 февраля в невисокосном году уходит на 28-е. */
-const maxBirthDate = (minAge, today) => {
+const maxAllowedDate = (minAge, today) => {
 	const year = today.getFullYear() - minAge;
 	const month = today.getMonth();
 	const day = Math.min(today.getDate(), daysInMonth(year, month + 1));
@@ -65,14 +65,14 @@ const clampParts = (parts, max) => {
 };
 const range = (from, to) => from > to ? [] : Array.from({ length: to - from + 1 }, (_, i) => from + i);
 /**
-* Дата рождения: поле открывает нижний лист с выбором дня, месяца и года.
+* Выбор даты: поле открывает нижний лист с выбором дня, месяца и года.
 * Поле только для чтения с клавиатуры, поэтому `required` из `Field` и
 * нативная проверка формы работают, а телефонная клавиатура не открывается.
 */
-const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18, disabled = false, name, placeholder, error, className }) => {
+const DatePicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 0, disabled = false, name, placeholder = "Выберите дату", title = "Выберите дату", error, className }) => {
 	const [today] = (0, react.useState)(() => /* @__PURE__ */ new Date());
 	const [open, setOpen] = (0, react.useState)(false);
-	const maxBirth = maxBirthDate(minAge, today);
+	const maxBirth = maxAllowedDate(minAge, today);
 	const lastYear = Math.min(maxYear ?? today.getFullYear(), maxBirth.getFullYear());
 	const [draft, setDraft] = (0, react.useState)(() => clampParts(partsOf(value ?? maxBirth), maxBirth));
 	const triggerRef = (0, react.useRef)(null);
@@ -127,12 +127,12 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 		if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") openSheet();
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_cn.cn("birthday-picker", className),
+		className: require_cn.cn("date-picker", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
 				ref: triggerRef,
-				className: "birthday-picker__trigger",
-				value: value ? formatBirthday(value) : "",
+				className: "date-picker__trigger",
+				value: value ? formatDate(value) : "",
 				onChange: () => {},
 				onClick: openSheet,
 				onKeyDown: handleTriggerKeyDown,
@@ -141,12 +141,12 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 				autoComplete: "off",
 				"aria-haspopup": "dialog",
 				"aria-expanded": open,
-				placeholder: placeholder ?? `Возраст от ${minAge} лет`,
+				placeholder,
 				disabled,
 				error
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_calendar.IconCalendar, {
-				className: "birthday-picker__icon",
+				className: "date-picker__icon",
 				"aria-hidden": true
 			}),
 			name ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -155,10 +155,10 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 				value: value ? toIsoDate(value) : ""
 			}) : null,
 			open ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "birthday-picker__layer",
+				className: "date-picker__layer",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
-					className: "birthday-picker__mask",
+					className: "date-picker__mask",
 					"aria-label": "Закрыть",
 					onClick: close
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dialog", {
@@ -166,20 +166,20 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 					open: true,
 					"aria-modal": "true",
 					"aria-labelledby": titleId,
-					className: "birthday-picker__sheet",
+					className: "date-picker__sheet",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
 							id: titleId,
-							className: "birthday-picker__title",
-							children: "Дата рождения"
+							className: "date-picker__title",
+							children: title
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "birthday-picker__columns",
+							className: "date-picker__columns",
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "birthday-picker__column",
+									className: "date-picker__column",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "birthday-picker__caption",
+										className: "date-picker__caption",
 										children: "День"
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_wheel_column.WheelColumn, {
 										label: "День",
@@ -192,9 +192,9 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 									})]
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "birthday-picker__column",
+									className: "date-picker__column",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "birthday-picker__caption",
+										className: "date-picker__caption",
 										children: "Месяц"
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_wheel_column.WheelColumn, {
 										label: "Месяц",
@@ -207,9 +207,9 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 									})]
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "birthday-picker__column",
+									className: "date-picker__column",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "birthday-picker__caption",
+										className: "date-picker__caption",
 										children: "Год"
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_wheel_column.WheelColumn, {
 										label: "Год",
@@ -224,7 +224,7 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 							]
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "birthday-picker__actions",
+							className: "date-picker__actions",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
 								onClick: apply,
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_correct.IconCorrect, {}), "Применить"]
@@ -240,6 +240,6 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 		]
 	});
 };
-exports.BirthdayPicker = BirthdayPicker;
+exports.DatePicker = DatePicker;
 
-//# sourceMappingURL=birthday-picker.cjs.map
+//# sourceMappingURL=date-picker.cjs.map

package/dist/components/date-picker/date-picker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.cjs","names":["useState","useRef","useId","cn","Input","IconCalendar","createPortal","WheelColumn","Button","IconCorrect"],"sources":["../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@/components/button';\nimport { Input } from '@/components/input';\nimport '../input/input.scss';\nimport { IconCalendar } from '@/icons/icon-calendar';\nimport { IconCorrect } from '@/icons/icon-correct';\nimport { cn } from '@/lib/cn';\nimport { WheelColumn } from './wheel-column';\nimport './date-picker.scss';\n\nconst MONTH_NAMES = [\n  'январь',\n  'февраль',\n  'март',\n  'апрель',\n  'май',\n  'июнь',\n  'июль',\n  'август',\n  'сентябрь',\n  'октябрь',\n  'ноябрь',\n  'декабрь',\n];\n\n// В дате пишется родительный падеж: «15 марта 1990».\nconst MONTH_NAMES_GENITIVE = [\n  'января',\n  'февраля',\n  'марта',\n  'апреля',\n  'мая',\n  'июня',\n  'июля',\n  'августа',\n  'сентября',\n  'октября',\n  'ноября',\n  'декабря',\n];\n\n/** Месяц здесь 1–12, как в календаре, а не индекс массива. */\ninterface DateParts {\n  day: number;\n  month: number;\n  year: number;\n}\n\nconst daysInMonth = (year: number, month: number) =>\n  new Date(year, month, 0).getDate();\n\nconst partsOf = (date: Date): DateParts => ({\n  day: date.getDate(),\n  month: date.getMonth() + 1,\n  year: date.getFullYear(),\n});\n\nconst toDate = ({ day, month, year }: DateParts) =>\n  new Date(year, month - 1, day);\n\nconst pad = (value: number) => String(value).padStart(2, '0');\n\nconst toIsoDate = (date: Date) =>\n  `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n\nconst formatDate = (date: Date) =>\n  `${date.getDate()} ${MONTH_NAMES_GENITIVE[date.getMonth()]} ${date.getFullYear()}`;\n\n/** Сегодня минус `minAge` лет. 29 февраля в невисокосном году уходит на 28-е. */\nconst maxAllowedDate = (minAge: number, today: Date) => {\n  const year = today.getFullYear() - minAge;\n  const month = today.getMonth();\n  const day = Math.min(today.getDate(), daysInMonth(year, month + 1));\n  return new Date(year, month, day);\n};\n\n/** Подрезает день под длину месяца и не даёт выбрать дату позже максимальной. */\nconst clampParts = (parts: DateParts, max: Date): DateParts => {\n  const next = {\n    ...parts,\n    day: Math.min(parts.day, daysInMonth(parts.year, parts.month)),\n  };\n\n  return toDate(next) > max ? partsOf(max) : next;\n};\n\nconst range = (from: number, to: number) =>\n  from > to ? [] : Array.from({ length: to - from + 1 }, (_, i) => from + i);\n\nexport interface DatePickerProps {\n  value?: Date | null;\n  onChange?: (date: Date) => void;\n  /** Самый ранний год в списке. */\n  minYear?: number;\n  /** Самый поздний год в списке. По умолчанию — текущий. */\n  maxYear?: number;\n  /** Минимальный возраст: позже сегодня минус столько лет выбрать нельзя. 0 — без ограничения. */\n  minAge?: number;\n  disabled?: boolean;\n  /** Имя для FormData: уходит дата в формате `YYYY-MM-DD`. */\n  name?: string;\n  /** Текст в поле, пока дата не выбрана. */\n  placeholder?: string;\n  /** Заголовок окна выбора. */\n  title?: string;\n  error?: boolean;\n  className?: string;\n}\n\n/**\n * Выбор даты: поле открывает нижний лист с выбором дня, месяца и года.\n * Поле только для чтения с клавиатуры, поэтому `required` из `Field` и\n * нативная проверка формы работают, а телефонная клавиатура не открывается.\n */\nexport const DatePicker = ({\n  value,\n  onChange,\n  minYear = 1930,\n  maxYear,\n  minAge = 0,\n  disabled = false,\n  name,\n  placeholder = 'Выберите дату',\n  title = 'Выберите дату',\n  error,\n  className,\n}: DatePickerProps) => {\n  const [today] = useState(() => new Date());\n  const [open, setOpen] = useState(false);\n  const maxBirth = maxAllowedDate(minAge, today);\n  const lastYear = Math.min(\n    maxYear ?? today.getFullYear(),\n    maxBirth.getFullYear(),\n  );\n  const [draft, setDraft] = useState<DateParts>(() =>\n    clampParts(partsOf(value ?? maxBirth), maxBirth),\n  );\n  const triggerRef = useRef<HTMLInputElement>(null);\n  const sheetRef = useRef<HTMLDialogElement>(null);\n  const titleId = useId();\n\n  const years = range(Math.min(minYear, draft.year), lastYear);\n  const days = range(1, daysInMonth(draft.year, draft.month));\n\n  // iOS: без position: fixed фон прокручивается под открытым листом.\n  useEffect(() => {\n    if (!open) return;\n\n    const { position, top, width } = document.body.style;\n    const scrollY = window.scrollY;\n    document.body.style.position = 'fixed';\n    document.body.style.top = `-${scrollY}px`;\n    document.body.style.width = '100%';\n    sheetRef.current\n      ?.querySelector<HTMLElement>('[role=\"spinbutton\"]')\n      ?.focus();\n\n    const handleKeyDown = (event: globalThis.KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n\n      setOpen(false);\n      triggerRef.current?.focus();\n    };\n    document.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.position = position;\n      document.body.style.top = top;\n      document.body.style.width = width;\n      window.scrollTo(0, scrollY);\n    };\n  }, [open]);\n\n  const openSheet = () => {\n    if (disabled) return;\n\n    setDraft(clampParts(partsOf(value ?? maxBirth), maxBirth));\n    setOpen(true);\n  };\n\n  const close = () => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  };\n\n  const updateDraft = (patch: Partial<DateParts>) => {\n    setDraft(prev => clampParts({ ...prev, ...patch }, maxBirth));\n  };\n\n  const apply = () => {\n    onChange?.(toDate(draft));\n    close();\n  };\n\n  // Текст не вводится: поле только выбирает дату через лист.\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Tab') return;\n\n    event.preventDefault();\n    if (\n      event.key === 'Enter' ||\n      event.key === ' ' ||\n      event.key === 'ArrowDown'\n    ) {\n      openSheet();\n    }\n  };\n\n  return (\n    <div className={cn('date-picker', className)}>\n      <Input\n        ref={triggerRef}\n        className=\"date-picker__trigger\"\n        value={value ? formatDate(value) : ''}\n        onChange={() => {}}\n        onClick={openSheet}\n        onKeyDown={handleTriggerKeyDown}\n        onPaste={event => event.preventDefault()}\n        inputMode=\"none\"\n        autoComplete=\"off\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n        placeholder={placeholder}\n        disabled={disabled}\n        error={error}\n      />\n      <IconCalendar className=\"date-picker__icon\" aria-hidden />\n      {name ? (\n        <input\n          type=\"hidden\"\n          name={name}\n          value={value ? toIsoDate(value) : ''}\n        />\n      ) : null}\n\n      {open\n        ? createPortal(\n            <div className=\"date-picker__layer\">\n              <button\n                type=\"button\"\n                className=\"date-picker__mask\"\n                aria-label=\"Закрыть\"\n                onClick={close}\n              />\n              <dialog\n                ref={sheetRef}\n                open\n                aria-modal=\"true\"\n                aria-labelledby={titleId}\n                className=\"date-picker__sheet\"\n              >\n                <h2 id={titleId} className=\"date-picker__title\">\n                  {title}\n                </h2>\n                <div className=\"date-picker__columns\">\n                  <div className=\"date-picker__column\">\n                    <span className=\"date-picker__caption\">День</span>\n                    <WheelColumn\n                      label=\"День\"\n                      items={days.map(day => ({\n                        value: day,\n                        label: String(day),\n                      }))}\n                      value={draft.day}\n                      onChange={day => updateDraft({ day })}\n                    />\n                  </div>\n                  <div className=\"date-picker__column\">\n                    <span className=\"date-picker__caption\">Месяц</span>\n                    <WheelColumn\n                      label=\"Месяц\"\n                      items={MONTH_NAMES.map((month, index) => ({\n                        value: index + 1,\n                        label: month,\n                      }))}\n                      value={draft.month}\n                      onChange={month => updateDraft({ month })}\n                    />\n                  </div>\n                  <div className=\"date-picker__column\">\n                    <span className=\"date-picker__caption\">Год</span>\n                    <WheelColumn\n                      label=\"Год\"\n                      items={years.map(year => ({\n                        value: year,\n                        label: String(year),\n                      }))}\n                      value={draft.year}\n                      onChange={year => updateDraft({ year })}\n                    />\n                  </div>\n                </div>\n                <div className=\"date-picker__actions\">\n                  <Button onClick={apply}>\n                    <IconCorrect />\n                    Применить\n                  </Button>\n                  <Button variant=\"link\" onClick={close}>\n                    Отмена\n                  </Button>\n                </div>\n              </dialog>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/{birthday-picker/birthday-picker.d.ts → date-picker/date-picker.d.cts}

@@ -1,23 +1,26 @@
-export interface BirthdayPickerProps {
+export interface DatePickerProps {
   value?: Date | null;
   onChange?: (date: Date) => void;
   /** Самый ранний год в списке. */
   minYear?: number;
   /** Самый поздний год в списке. По умолчанию — текущий. */
   maxYear?: number;
-  /** Минимальный возраст: позже этой даты выбрать нельзя. */
+  /** Минимальный возраст: позже сегодня минус столько лет выбрать нельзя. 0 — без ограничения. */
   minAge?: number;
   disabled?: boolean;
   /** Имя для FormData: уходит дата в формате `YYYY-MM-DD`. */
   name?: string;
+  /** Текст в поле, пока дата не выбрана. */
   placeholder?: string;
+  /** Заголовок окна выбора. */
+  title?: string;
   error?: boolean;
   className?: string;
 }
 /**
- * Дата рождения: поле открывает нижний лист с выбором дня, месяца и года.
+ * Выбор даты: поле открывает нижний лист с выбором дня, месяца и года.
  * Поле только для чтения с клавиатуры, поэтому `required` из `Field` и
  * нативная проверка формы работают, а телефонная клавиатура не открывается.
  */
-export declare const BirthdayPicker: ({ value, onChange, minYear, maxYear, minAge, disabled, name, placeholder, error, className }: BirthdayPickerProps) => import("react").JSX.Element;
-//# sourceMappingURL=birthday-picker.d.ts.map
+export declare const DatePicker: ({ value, onChange, minYear, maxYear, minAge, disabled, name, placeholder, title, error, className }: DatePickerProps) => import("react").JSX.Element;
+//# sourceMappingURL=date-picker.d.cts.map

package/dist/components/{birthday-picker/birthday-picker.d.cts → date-picker/date-picker.d.ts}

@@ -1,23 +1,26 @@
-export interface BirthdayPickerProps {
+export interface DatePickerProps {
   value?: Date | null;
   onChange?: (date: Date) => void;
   /** Самый ранний год в списке. */
   minYear?: number;
   /** Самый поздний год в списке. По умолчанию — текущий. */
   maxYear?: number;
-  /** Минимальный возраст: позже этой даты выбрать нельзя. */
+  /** Минимальный возраст: позже сегодня минус столько лет выбрать нельзя. 0 — без ограничения. */
   minAge?: number;
   disabled?: boolean;
   /** Имя для FormData: уходит дата в формате `YYYY-MM-DD`. */
   name?: string;
+  /** Текст в поле, пока дата не выбрана. */
   placeholder?: string;
+  /** Заголовок окна выбора. */
+  title?: string;
   error?: boolean;
   className?: string;
 }
 /**
- * Дата рождения: поле открывает нижний лист с выбором дня, месяца и года.
+ * Выбор даты: поле открывает нижний лист с выбором дня, месяца и года.
  * Поле только для чтения с клавиатуры, поэтому `required` из `Field` и
  * нативная проверка формы работают, а телефонная клавиатура не открывается.
  */
-export declare const BirthdayPicker: ({ value, onChange, minYear, maxYear, minAge, disabled, name, placeholder, error, className }: BirthdayPickerProps) => import("react").JSX.Element;
-//# sourceMappingURL=birthday-picker.d.cts.map
+export declare const DatePicker: ({ value, onChange, minYear, maxYear, minAge, disabled, name, placeholder, title, error, className }: DatePickerProps) => import("react").JSX.Element;
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/{birthday-picker/birthday-picker.js → date-picker/date-picker.js}

@@ -8,8 +8,8 @@ import { useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import "../input/input.scss";
-import "./birthday-picker.scss";
-// src/components/birthday-picker/birthday-picker.tsx
+import "./date-picker.scss";
+// src/components/date-picker/date-picker.tsx
 const MONTH_NAMES = [
 	"январь",
 	"февраль",
@@ -47,9 +47,9 @@ const partsOf = (date) => ({
 const toDate = ({ day, month, year }) => new Date(year, month - 1, day);
 const pad = (value) => String(value).padStart(2, "0");
 const toIsoDate = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-const formatBirthday = (date) => `${date.getDate()} ${MONTH_NAMES_GENITIVE[date.getMonth()]} ${date.getFullYear()}`;
+const formatDate = (date) => `${date.getDate()} ${MONTH_NAMES_GENITIVE[date.getMonth()]} ${date.getFullYear()}`;
 /** Сегодня минус `minAge` лет. 29 февраля в невисокосном году уходит на 28-е. */
-const maxBirthDate = (minAge, today) => {
+const maxAllowedDate = (minAge, today) => {
 	const year = today.getFullYear() - minAge;
 	const month = today.getMonth();
 	const day = Math.min(today.getDate(), daysInMonth(year, month + 1));
@@ -65,14 +65,14 @@ const clampParts = (parts, max) => {
 };
 const range = (from, to) => from > to ? [] : Array.from({ length: to - from + 1 }, (_, i) => from + i);
 /**
-* Дата рождения: поле открывает нижний лист с выбором дня, месяца и года.
+* Выбор даты: поле открывает нижний лист с выбором дня, месяца и года.
 * Поле только для чтения с клавиатуры, поэтому `required` из `Field` и
 * нативная проверка формы работают, а телефонная клавиатура не открывается.
 */
-const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18, disabled = false, name, placeholder, error, className }) => {
+const DatePicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 0, disabled = false, name, placeholder = "Выберите дату", title = "Выберите дату", error, className }) => {
 	const [today] = useState(() => /* @__PURE__ */ new Date());
 	const [open, setOpen] = useState(false);
-	const maxBirth = maxBirthDate(minAge, today);
+	const maxBirth = maxAllowedDate(minAge, today);
 	const lastYear = Math.min(maxYear ?? today.getFullYear(), maxBirth.getFullYear());
 	const [draft, setDraft] = useState(() => clampParts(partsOf(value ?? maxBirth), maxBirth));
 	const triggerRef = useRef(null);
@@ -127,12 +127,12 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 		if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") openSheet();
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("birthday-picker", className),
+		className: cn("date-picker", className),
 		children: [
 			/* @__PURE__ */ jsx(Input, {
 				ref: triggerRef,
-				className: "birthday-picker__trigger",
-				value: value ? formatBirthday(value) : "",
+				className: "date-picker__trigger",
+				value: value ? formatDate(value) : "",
 				onChange: () => {},
 				onClick: openSheet,
 				onKeyDown: handleTriggerKeyDown,
@@ -141,12 +141,12 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 				autoComplete: "off",
 				"aria-haspopup": "dialog",
 				"aria-expanded": open,
-				placeholder: placeholder ?? `Возраст от ${minAge} лет`,
+				placeholder,
 				disabled,
 				error
 			}),
 			/* @__PURE__ */ jsx(IconCalendar, {
-				className: "birthday-picker__icon",
+				className: "date-picker__icon",
 				"aria-hidden": true
 			}),
 			name ? /* @__PURE__ */ jsx("input", {
@@ -155,10 +155,10 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 				value: value ? toIsoDate(value) : ""
 			}) : null,
 			open ? createPortal(/* @__PURE__ */ jsxs("div", {
-				className: "birthday-picker__layer",
+				className: "date-picker__layer",
 				children: [/* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "birthday-picker__mask",
+					className: "date-picker__mask",
 					"aria-label": "Закрыть",
 					onClick: close
 				}), /* @__PURE__ */ jsxs("dialog", {
@@ -166,20 +166,20 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 					open: true,
 					"aria-modal": "true",
 					"aria-labelledby": titleId,
-					className: "birthday-picker__sheet",
+					className: "date-picker__sheet",
 					children: [
 						/* @__PURE__ */ jsx("h2", {
 							id: titleId,
-							className: "birthday-picker__title",
-							children: "Дата рождения"
+							className: "date-picker__title",
+							children: title
 						}),
 						/* @__PURE__ */ jsxs("div", {
-							className: "birthday-picker__columns",
+							className: "date-picker__columns",
 							children: [
 								/* @__PURE__ */ jsxs("div", {
-									className: "birthday-picker__column",
+									className: "date-picker__column",
 									children: [/* @__PURE__ */ jsx("span", {
-										className: "birthday-picker__caption",
+										className: "date-picker__caption",
 										children: "День"
 									}), /* @__PURE__ */ jsx(WheelColumn, {
 										label: "День",
@@ -192,9 +192,9 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 									})]
 								}),
 								/* @__PURE__ */ jsxs("div", {
-									className: "birthday-picker__column",
+									className: "date-picker__column",
 									children: [/* @__PURE__ */ jsx("span", {
-										className: "birthday-picker__caption",
+										className: "date-picker__caption",
 										children: "Месяц"
 									}), /* @__PURE__ */ jsx(WheelColumn, {
 										label: "Месяц",
@@ -207,9 +207,9 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 									})]
 								}),
 								/* @__PURE__ */ jsxs("div", {
-									className: "birthday-picker__column",
+									className: "date-picker__column",
 									children: [/* @__PURE__ */ jsx("span", {
-										className: "birthday-picker__caption",
+										className: "date-picker__caption",
 										children: "Год"
 									}), /* @__PURE__ */ jsx(WheelColumn, {
 										label: "Год",
@@ -224,7 +224,7 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 							]
 						}),
 						/* @__PURE__ */ jsxs("div", {
-							className: "birthday-picker__actions",
+							className: "date-picker__actions",
 							children: [/* @__PURE__ */ jsxs(Button, {
 								onClick: apply,
 								children: [/* @__PURE__ */ jsx(IconCorrect, {}), "Применить"]
@@ -240,6 +240,6 @@ const BirthdayPicker = ({ value, onChange, minYear = 1930, maxYear, minAge = 18,
 		]
 	});
 };
-export { BirthdayPicker };
+export { DatePicker };
 
-//# sourceMappingURL=birthday-picker.js.map
+//# sourceMappingURL=date-picker.js.map

package/dist/components/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","names":[],"sources":["../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@/components/button';\nimport { Input } from '@/components/input';\nimport '../input/input.scss';\nimport { IconCalendar } from '@/icons/icon-calendar';\nimport { IconCorrect } from '@/icons/icon-correct';\nimport { cn } from '@/lib/cn';\nimport { WheelColumn } from './wheel-column';\nimport './date-picker.scss';\n\nconst MONTH_NAMES = [\n  'январь',\n  'февраль',\n  'март',\n  'апрель',\n  'май',\n  'июнь',\n  'июль',\n  'август',\n  'сентябрь',\n  'октябрь',\n  'ноябрь',\n  'декабрь',\n];\n\n// В дате пишется родительный падеж: «15 марта 1990».\nconst MONTH_NAMES_GENITIVE = [\n  'января',\n  'февраля',\n  'марта',\n  'апреля',\n  'мая',\n  'июня',\n  'июля',\n  'августа',\n  'сентября',\n  'октября',\n  'ноября',\n  'декабря',\n];\n\n/** Месяц здесь 1–12, как в календаре, а не индекс массива. */\ninterface DateParts {\n  day: number;\n  month: number;\n  year: number;\n}\n\nconst daysInMonth = (year: number, month: number) =>\n  new Date(year, month, 0).getDate();\n\nconst partsOf = (date: Date): DateParts => ({\n  day: date.getDate(),\n  month: date.getMonth() + 1,\n  year: date.getFullYear(),\n});\n\nconst toDate = ({ day, month, year }: DateParts) =>\n  new Date(year, month - 1, day);\n\nconst pad = (value: number) => String(value).padStart(2, '0');\n\nconst toIsoDate = (date: Date) =>\n  `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n\nconst formatDate = (date: Date) =>\n  `${date.getDate()} ${MONTH_NAMES_GENITIVE[date.getMonth()]} ${date.getFullYear()}`;\n\n/** Сегодня минус `minAge` лет. 29 февраля в невисокосном году уходит на 28-е. */\nconst maxAllowedDate = (minAge: number, today: Date) => {\n  const year = today.getFullYear() - minAge;\n  const month = today.getMonth();\n  const day = Math.min(today.getDate(), daysInMonth(year, month + 1));\n  return new Date(year, month, day);\n};\n\n/** Подрезает день под длину месяца и не даёт выбрать дату позже максимальной. */\nconst clampParts = (parts: DateParts, max: Date): DateParts => {\n  const next = {\n    ...parts,\n    day: Math.min(parts.day, daysInMonth(parts.year, parts.month)),\n  };\n\n  return toDate(next) > max ? partsOf(max) : next;\n};\n\nconst range = (from: number, to: number) =>\n  from > to ? [] : Array.from({ length: to - from + 1 }, (_, i) => from + i);\n\nexport interface DatePickerProps {\n  value?: Date | null;\n  onChange?: (date: Date) => void;\n  /** Самый ранний год в списке. */\n  minYear?: number;\n  /** Самый поздний год в списке. По умолчанию — текущий. */\n  maxYear?: number;\n  /** Минимальный возраст: позже сегодня минус столько лет выбрать нельзя. 0 — без ограничения. */\n  minAge?: number;\n  disabled?: boolean;\n  /** Имя для FormData: уходит дата в формате `YYYY-MM-DD`. */\n  name?: string;\n  /** Текст в поле, пока дата не выбрана. */\n  placeholder?: string;\n  /** Заголовок окна выбора. */\n  title?: string;\n  error?: boolean;\n  className?: string;\n}\n\n/**\n * Выбор даты: поле открывает нижний лист с выбором дня, месяца и года.\n * Поле только для чтения с клавиатуры, поэтому `required` из `Field` и\n * нативная проверка формы работают, а телефонная клавиатура не открывается.\n */\nexport const DatePicker = ({\n  value,\n  onChange,\n  minYear = 1930,\n  maxYear,\n  minAge = 0,\n  disabled = false,\n  name,\n  placeholder = 'Выберите дату',\n  title = 'Выберите дату',\n  error,\n  className,\n}: DatePickerProps) => {\n  const [today] = useState(() => new Date());\n  const [open, setOpen] = useState(false);\n  const maxBirth = maxAllowedDate(minAge, today);\n  const lastYear = Math.min(\n    maxYear ?? today.getFullYear(),\n    maxBirth.getFullYear(),\n  );\n  const [draft, setDraft] = useState<DateParts>(() =>\n    clampParts(partsOf(value ?? maxBirth), maxBirth),\n  );\n  const triggerRef = useRef<HTMLInputElement>(null);\n  const sheetRef = useRef<HTMLDialogElement>(null);\n  const titleId = useId();\n\n  const years = range(Math.min(minYear, draft.year), lastYear);\n  const days = range(1, daysInMonth(draft.year, draft.month));\n\n  // iOS: без position: fixed фон прокручивается под открытым листом.\n  useEffect(() => {\n    if (!open) return;\n\n    const { position, top, width } = document.body.style;\n    const scrollY = window.scrollY;\n    document.body.style.position = 'fixed';\n    document.body.style.top = `-${scrollY}px`;\n    document.body.style.width = '100%';\n    sheetRef.current\n      ?.querySelector<HTMLElement>('[role=\"spinbutton\"]')\n      ?.focus();\n\n    const handleKeyDown = (event: globalThis.KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n\n      setOpen(false);\n      triggerRef.current?.focus();\n    };\n    document.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.position = position;\n      document.body.style.top = top;\n      document.body.style.width = width;\n      window.scrollTo(0, scrollY);\n    };\n  }, [open]);\n\n  const openSheet = () => {\n    if (disabled) return;\n\n    setDraft(clampParts(partsOf(value ?? maxBirth), maxBirth));\n    setOpen(true);\n  };\n\n  const close = () => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  };\n\n  const updateDraft = (patch: Partial<DateParts>) => {\n    setDraft(prev => clampParts({ ...prev, ...patch }, maxBirth));\n  };\n\n  const apply = () => {\n    onChange?.(toDate(draft));\n    close();\n  };\n\n  // Текст не вводится: поле только выбирает дату через лист.\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Tab') return;\n\n    event.preventDefault();\n    if (\n      event.key === 'Enter' ||\n      event.key === ' ' ||\n      event.key === 'ArrowDown'\n    ) {\n      openSheet();\n    }\n  };\n\n  return (\n    <div className={cn('date-picker', className)}>\n      <Input\n        ref={triggerRef}\n        className=\"date-picker__trigger\"\n        value={value ? formatDate(value) : ''}\n        onChange={() => {}}\n        onClick={openSheet}\n        onKeyDown={handleTriggerKeyDown}\n        onPaste={event => event.preventDefault()}\n        inputMode=\"none\"\n        autoComplete=\"off\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n        placeholder={placeholder}\n        disabled={disabled}\n        error={error}\n      />\n      <IconCalendar className=\"date-picker__icon\" aria-hidden />\n      {name ? (\n        <input\n          type=\"hidden\"\n          name={name}\n          value={value ? toIsoDate(value) : ''}\n        />\n      ) : null}\n\n      {open\n        ? createPortal(\n            <div className=\"date-picker__layer\">\n              <button\n                type=\"button\"\n                className=\"date-picker__mask\"\n                aria-label=\"Закрыть\"\n                onClick={close}\n              />\n              <dialog\n                ref={sheetRef}\n                open\n                aria-modal=\"true\"\n                aria-labelledby={titleId}\n                className=\"date-picker__sheet\"\n              >\n                <h2 id={titleId} className=\"date-picker__title\">\n                  {title}\n                </h2>\n                <div className=\"date-picker__columns\">\n                  <div className=\"date-picker__column\">\n                    <span className=\"date-picker__caption\">День</span>\n                    <WheelColumn\n                      label=\"День\"\n                      items={days.map(day => ({\n                        value: day,\n                        label: String(day),\n                      }))}\n                      value={draft.day}\n                      onChange={day => updateDraft({ day })}\n                    />\n                  </div>\n                  <div className=\"date-picker__column\">\n                    <span className=\"date-picker__caption\">Месяц</span>\n                    <WheelColumn\n                      label=\"Месяц\"\n                      items={MONTH_NAMES.map((month, index) => ({\n                        value: index + 1,\n                        label: month,\n                      }))}\n                      value={draft.month}\n                      onChange={month => updateDraft({ month })}\n                    />\n                  </div>\n                  <div className=\"date-picker__column\">\n                    <span className=\"date-picker__caption\">Год</span>\n                    <WheelColumn\n                      label=\"Год\"\n                      items={years.map(year => ({\n                        value: year,\n                        label: String(year),\n                      }))}\n                      value={draft.year}\n                      onChange={year => updateDraft({ year })}\n                    />\n                  </div>\n                </div>\n                <div className=\"date-picker__actions\">\n                  <Button onClick={apply}>\n                    <IconCorrect />\n                    Применить\n                  </Button>\n                  <Button variant=\"link\" onClick={close}>\n                    Отмена\n                  </Button>\n                </div>\n              </dialog>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/{birthday-picker/birthday-picker.scss → date-picker/date-picker.scss}

@@ -1,14 +1,14 @@
-.birthday-picker {
+.date-picker {
   position: relative;
   width: 100%;
 
-  .birthday-picker__trigger {
+  .date-picker__trigger {
     cursor: pointer;
     padding-right: 45px;
   }
 }
 
-.birthday-picker__icon {
+.date-picker__icon {
   position: absolute;
   top: 50%;
   right: var(--space-3);
@@ -16,13 +16,13 @@
   pointer-events: none;
 }
 
-.birthday-picker__layer {
+.date-picker__layer {
   position: fixed;
   inset: 0;
   z-index: 1000;
 }
 
-.birthday-picker__mask {
+.date-picker__mask {
   position: absolute;
   inset: 0;
   padding: 0;
@@ -31,7 +31,7 @@
   cursor: pointer;
 }
 
-.birthday-picker__sheet {
+.date-picker__sheet {
   box-sizing: border-box;
   position: absolute;
   right: 0;
@@ -49,7 +49,7 @@
   box-shadow: var(--shadow-xl);
 }
 
-.birthday-picker__title {
+.date-picker__title {
   margin: 0 0 var(--space-3);
   font-size: var(--text-sm);
   font-weight: 700;
@@ -57,26 +57,26 @@
   text-transform: uppercase;
 }
 
-.birthday-picker__columns {
+.date-picker__columns {
   display: grid;
   grid-template-columns: 1fr 1.5fr 1fr;
   gap: var(--space-2);
 }
 
-.birthday-picker__column {
+.date-picker__column {
   display: grid;
   gap: var(--space-1);
   min-width: 0;
 }
 
-.birthday-picker__caption {
+.date-picker__caption {
   font-size: var(--text-xs);
   color: var(--color-muted-foreground);
   text-align: center;
   text-transform: uppercase;
 }
 
-.birthday-picker__actions {
+.date-picker__actions {
   display: flex;
   justify-content: space-between;
   align-items: center;

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

@@ -0,0 +1,2 @@
+import { DatePicker, DatePickerProps } from "./date-picker.cjs";
+export { DatePicker, type DatePickerProps };

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

@@ -0,0 +1,2 @@
+import { DatePicker, DatePickerProps } from "./date-picker.js";
+export { DatePicker, type DatePickerProps };

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

@@ -0,0 +1 @@
+{"version":3,"file":"wheel-column.cjs","names":["useRef","cn","when"],"sources":["../../../src/components/date-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/date-picker/wheel-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wheel-column.js","names":[],"sources":["../../../src/components/date-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/field/field.scss

@@ -6,9 +6,9 @@
 
 .field__label {
   color: var(--color-foreground);
-  font-size: var(--text-lg);
-  font-weight: 900;
-  line-height: var(--text-lg--line-height);
+  font-size: var(--text-xl);
+  font-weight: var(--font-weight-black);
+  line-height: var(--text-xl--line-height);
   display: block;
   margin-bottom: var(--space-3);
   overflow-wrap: anywhere;

package/dist/components/input/input.scss

@@ -104,17 +104,18 @@
 .input__clear {
   position: absolute;
   top: 0;
-  right: 4px;
+  right: 5px;
   bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
+  width: 30px;
   margin: 0;
   padding: 0;
   border: 0;
   background: none;
   color: var(--color-muted-foreground);
+  cursor: pointer;
 
   &:hover {
     color: var(--color-foreground);

package/dist/index.cjs

@@ -4,16 +4,16 @@ const require_checkbox = require("./components/checkbox/checkbox.cjs");
 const require_field = require("./components/field/field.cjs");
 const require_form = require("./components/form/form.cjs");
 const require_input = require("./components/input/input.cjs");
-const require_birthday_picker = require("./components/birthday-picker/birthday-picker.cjs");
+const require_date_picker = require("./components/date-picker/date-picker.cjs");
 const require_hr = require("./components/hr/hr.cjs");
 const require_radio = require("./components/radio/radio.cjs");
 const require_phone_input = require("./components/phone-input/phone-input.cjs");
 const require_spinner = require("./components/spinner/spinner.cjs");
 const require_textarea = require("./components/textarea/textarea.cjs");
 require("./styles/vars.scss");
-exports.BirthdayPicker = require_birthday_picker.BirthdayPicker;
 exports.Button = require_button.Button;
 exports.CheckboxInput = require_checkbox.CheckboxInput;
+exports.DatePicker = require_date_picker.DatePicker;
 exports.Field = require_field.Field;
 exports.Form = require_form.Form;
 exports.FormActions = require_form.FormActions;

package/dist/index.d.cts

@@ -6,8 +6,8 @@ import { Field, FieldHintPlacement, FieldProps } from "./components/field/field.
 import "./components/field/index.cjs";
 import { Form, FormActions, FormActionsProps, FormConsent, FormConsentProps, FormProps, FormSubmit } from "./components/form/form.cjs";
 import "./components/form/index.cjs";
-import { BirthdayPicker, BirthdayPickerProps } from "./components/birthday-picker/birthday-picker.cjs";
-import "./components/birthday-picker/index.cjs";
+import { DatePicker, DatePickerProps } from "./components/date-picker/date-picker.cjs";
+import "./components/date-picker/index.cjs";
 import { HR, HRProps } from "./components/hr/hr.cjs";
 import "./components/hr/index.cjs";
 import { Input, InputProps, InputSize } from "./components/input/input.cjs";
@@ -20,4 +20,4 @@ import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spi
 import "./components/spinner/index.cjs";
 import { TextArea, TextAreaProps, TextAreaSize } from "./components/textarea/textarea.cjs";
 import "./components/textarea/index.cjs";
-export { BirthdayPicker, type BirthdayPickerProps, Button, type ButtonAsChildProps, type ButtonComponentProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, Field, type FieldHintPlacement, type FieldProps, Form, FormActions, type FormActionsProps, FormConsent, type FormConsentProps, type FormProps, FormSubmit, HR, type HRProps, Input, type InputProps, type InputSize, PHONE_MASK, PhoneInput, type PhoneInputProps, RadioGroup, type RadioGroupProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps, type TextAreaSize };
+export { Button, type ButtonAsChildProps, type ButtonComponentProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, DatePicker, type DatePickerProps, Field, type FieldHintPlacement, type FieldProps, Form, FormActions, type FormActionsProps, FormConsent, type FormConsentProps, type FormProps, FormSubmit, HR, type HRProps, Input, type InputProps, type InputSize, PHONE_MASK, PhoneInput, type PhoneInputProps, RadioGroup, type RadioGroupProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps, type TextAreaSize };

package/dist/index.d.ts

@@ -6,8 +6,8 @@ import { Field, FieldHintPlacement, FieldProps } from "./components/field/field.
 import "./components/field/index.js";
 import { Form, FormActions, FormActionsProps, FormConsent, FormConsentProps, FormProps, FormSubmit } from "./components/form/form.js";
 import "./components/form/index.js";
-import { BirthdayPicker, BirthdayPickerProps } from "./components/birthday-picker/birthday-picker.js";
-import "./components/birthday-picker/index.js";
+import { DatePicker, DatePickerProps } from "./components/date-picker/date-picker.js";
+import "./components/date-picker/index.js";
 import { HR, HRProps } from "./components/hr/hr.js";
 import "./components/hr/index.js";
 import { Input, InputProps, InputSize } from "./components/input/input.js";
@@ -20,4 +20,4 @@ import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spi
 import "./components/spinner/index.js";
 import { TextArea, TextAreaProps, TextAreaSize } from "./components/textarea/textarea.js";
 import "./components/textarea/index.js";
-export { BirthdayPicker, type BirthdayPickerProps, Button, type ButtonAsChildProps, type ButtonComponentProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, Field, type FieldHintPlacement, type FieldProps, Form, FormActions, type FormActionsProps, FormConsent, type FormConsentProps, type FormProps, FormSubmit, HR, type HRProps, Input, type InputProps, type InputSize, PHONE_MASK, PhoneInput, type PhoneInputProps, RadioGroup, type RadioGroupProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps, type TextAreaSize };
+export { Button, type ButtonAsChildProps, type ButtonComponentProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, DatePicker, type DatePickerProps, Field, type FieldHintPlacement, type FieldProps, Form, FormActions, type FormActionsProps, FormConsent, type FormConsentProps, type FormProps, FormSubmit, HR, type HRProps, Input, type InputProps, type InputSize, PHONE_MASK, PhoneInput, type PhoneInputProps, RadioGroup, type RadioGroupProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps, type TextAreaSize };

package/dist/index.js

@@ -3,11 +3,11 @@ import { CheckboxInput } from "./components/checkbox/checkbox.js";
 import { Field } from "./components/field/field.js";
 import { Form, FormActions, FormConsent, FormSubmit } from "./components/form/form.js";
 import { Input } from "./components/input/input.js";
-import { BirthdayPicker } from "./components/birthday-picker/birthday-picker.js";
+import { DatePicker } from "./components/date-picker/date-picker.js";
 import { HR } from "./components/hr/hr.js";
 import { RadioGroup, RadioInput } from "./components/radio/radio.js";
 import { PHONE_MASK, PhoneInput } from "./components/phone-input/phone-input.js";
 import { Spinner } from "./components/spinner/spinner.js";
 import { TextArea } from "./components/textarea/textarea.js";
 import "./styles/vars.scss";
-export { BirthdayPicker, Button, CheckboxInput, Field, Form, FormActions, FormConsent, FormSubmit, HR, Input, PHONE_MASK, PhoneInput, RadioGroup, RadioInput, Spinner, TextArea };
+export { Button, CheckboxInput, DatePicker, Field, Form, FormActions, FormConsent, FormSubmit, HR, Input, PHONE_MASK, PhoneInput, RadioGroup, RadioInput, Spinner, TextArea };

package/dist/styles/global.scss

@@ -1,6 +1,7 @@
 // База приложения. Шрифт Inter подключает хост — файлы лежат в splittest-frontend/src/app/fonts.
 // Токены (`--color-*`) подключает вход пакета, этот файл их не эмитит.
 @use './mixins.scss' as mixins;
+@use './typography.scss';
 
 :root {
   --window-max-height: 100vh;
@@ -167,35 +168,3 @@ table {
     padding: 15px 0;
   }
 }
-
-h1,
-h2,
-h3 {
-  text-align: left;
-  font-weight: 900;
-}
-
-h1 {
-  font-size: var(--text-2xl);
-  line-height: var(--text-2xl--line-height);
-
-  @include mixins.min-width(md) {
-    font-size: var(--text-3xl);
-    line-height: var(--text-3xl--line-height);
-  }
-}
-
-h2 {
-  font-size: var(--text-2xl);
-  line-height: var(--text-2xl--line-height);
-}
-
-h3 {
-  font-size: var(--text-lg);
-  line-height: var(--text-lg--line-height);
-}
-
-h4 {
-  font-size: var(--text-sm);
-  line-height: var(--text-sm--line-height);
-}

package/dist/styles/mixins.scss

@@ -49,3 +49,49 @@ $-length-units: 'px', 'em', 'rem';
     @content;
   }
 }
+
+/* Текст. Значения лежат в токенах vars.scss, миксины только подставляют их. */
+@mixin text-small {
+  font-size: var(--text-xs);
+  line-height: var(--text-xs--line-height);
+}
+
+@mixin text-regular {
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
+}
+
+@mixin text-medium {
+  font-size: var(--text-base);
+  line-height: var(--text-base--line-height);
+}
+
+@mixin text-large {
+  font-size: var(--text-lg);
+  line-height: var(--text-lg--line-height);
+}
+
+/* Заголовки */
+@mixin heading-h1 {
+  font-size: var(--text-4xl);
+  font-weight: var(--font-weight-black);
+  line-height: var(--text-4xl--line-height);
+}
+
+@mixin heading-h2 {
+  font-size: var(--text-3xl);
+  font-weight: var(--font-weight-black);
+  line-height: var(--text-3xl--line-height);
+}
+
+@mixin heading-h3 {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-weight-black);
+  line-height: var(--text-2xl--line-height);
+}
+
+@mixin heading-h4 {
+  font-size: var(--text-xl);
+  font-weight: var(--font-weight-black);
+  line-height: var(--text-xl--line-height);
+}

package/dist/styles/typography.scss

@@ -0,0 +1,70 @@
+@use './mixins.scss' as mixins;
+
+// Роли текста: класс задаёт вид, тег — семантику. Классы работают на любом элементе.
+.text-xs {
+  @include mixins.text-small;
+}
+
+.text-sm {
+  @include mixins.text-regular;
+}
+
+.text-base {
+  @include mixins.text-medium;
+}
+
+.text-lg {
+  @include mixins.text-large;
+}
+
+.heading-1 {
+  @include mixins.heading-h1;
+}
+
+.heading-2 {
+  @include mixins.heading-h2;
+}
+
+.heading-3 {
+  @include mixins.heading-h3;
+}
+
+.heading-4 {
+  @include mixins.heading-h4;
+}
+
+// Теги по умолчанию. h1–h3 меняются с 680px, как в вёрстке splittest.
+h1,
+h2,
+h3,
+h4 {
+  text-align: left;
+}
+
+h1 {
+  @include mixins.heading-h3;
+
+  @include mixins.min-width(md) {
+    @include mixins.heading-h1;
+  }
+}
+
+h2 {
+  @include mixins.heading-h3;
+
+  @include mixins.min-width(md) {
+    @include mixins.heading-h2;
+  }
+}
+
+h3 {
+  @include mixins.heading-h4;
+
+  @include mixins.min-width(md) {
+    @include mixins.heading-h3;
+  }
+}
+
+h4 {
+  @include mixins.heading-h4;
+}

package/dist/styles/vars.scss

@@ -48,9 +48,14 @@
   --radius-lg: 10px;
 
   --font-sans: 'Inter', sans-serif;
+  --font-weight-black: 900;
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
 
-  // Шкала текста: размер и парная к нему высота строки. Других размеров в splittest нет,
-  // по умолчанию почти везде --text-sm. Заголовки: h1 и h2 — 2xl (h1 с 680px — 3xl), h3 — lg, h4 — sm.
+  // Шкала текста в именах Tailwind: --text-<имя> и парная --text-<имя>--line-height.
+  // Размеры свои: 4xl — 45px, 3xl — 36px, 2xl — 27px, lg — 18px.
   --text-xs: 11px;
   --text-xs--line-height: 15px;
   --text-sm: 14px;
@@ -58,11 +63,15 @@
   --text-base: 16px;
   --text-base--line-height: 20px;
   --text-lg: 18px;
-  --text-lg--line-height: 20px;
-  --text-2xl: 28px;
+  --text-lg--line-height: 30px;
+  --text-xl: 18px;
+  --text-xl--line-height: 20px;
+  --text-2xl: 27px;
   --text-2xl--line-height: 30px;
-  --text-3xl: 45px;
-  --text-3xl--line-height: 50px;
+  --text-3xl: 36px;
+  --text-3xl--line-height: 40px;
+  --text-4xl: 45px;
+  --text-4xl--line-height: 50px;
 
   // Сетка 5px. Паддинги кнопки и инпута сняты с макета вне сетки и остаются литералами.
   --space-1: 5px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@de-kit/st-ui",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "React-компоненты splittest: глобальный SCSS и токены из основного фронтенда",
   "license": "UNLICENSED",
   "repository": {

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

@@ -1 +0,0 @@
-{"version":3,"file":"birthday-picker.cjs","names":["useState","useRef","useId","cn","Input","IconCalendar","createPortal","WheelColumn","Button","IconCorrect"],"sources":["../../../src/components/birthday-picker/birthday-picker.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@/components/button';\nimport { Input } from '@/components/input';\nimport '../input/input.scss';\nimport { IconCalendar } from '@/icons/icon-calendar';\nimport { IconCorrect } from '@/icons/icon-correct';\nimport { cn } from '@/lib/cn';\nimport { WheelColumn } from './wheel-column';\nimport './birthday-picker.scss';\n\nconst MONTH_NAMES = [\n  'январь',\n  'февраль',\n  'март',\n  'апрель',\n  'май',\n  'июнь',\n  'июль',\n  'август',\n  'сентябрь',\n  'октябрь',\n  'ноябрь',\n  'декабрь',\n];\n\n// В дате пишется родительный падеж: «15 марта 1990».\nconst MONTH_NAMES_GENITIVE = [\n  'января',\n  'февраля',\n  'марта',\n  'апреля',\n  'мая',\n  'июня',\n  'июля',\n  'августа',\n  'сентября',\n  'октября',\n  'ноября',\n  'декабря',\n];\n\n/** Месяц здесь 1–12, как в календаре, а не индекс массива. */\ninterface BirthdayParts {\n  day: number;\n  month: number;\n  year: number;\n}\n\nconst daysInMonth = (year: number, month: number) =>\n  new Date(year, month, 0).getDate();\n\nconst partsOf = (date: Date): BirthdayParts => ({\n  day: date.getDate(),\n  month: date.getMonth() + 1,\n  year: date.getFullYear(),\n});\n\nconst toDate = ({ day, month, year }: BirthdayParts) =>\n  new Date(year, month - 1, day);\n\nconst pad = (value: number) => String(value).padStart(2, '0');\n\nconst toIsoDate = (date: Date) =>\n  `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n\nconst formatBirthday = (date: Date) =>\n  `${date.getDate()} ${MONTH_NAMES_GENITIVE[date.getMonth()]} ${date.getFullYear()}`;\n\n/** Сегодня минус `minAge` лет. 29 февраля в невисокосном году уходит на 28-е. */\nconst maxBirthDate = (minAge: number, today: Date) => {\n  const year = today.getFullYear() - minAge;\n  const month = today.getMonth();\n  const day = Math.min(today.getDate(), daysInMonth(year, month + 1));\n  return new Date(year, month, day);\n};\n\n/** Подрезает день под длину месяца и не даёт выбрать дату позже максимальной. */\nconst clampParts = (parts: BirthdayParts, max: Date): BirthdayParts => {\n  const next = {\n    ...parts,\n    day: Math.min(parts.day, daysInMonth(parts.year, parts.month)),\n  };\n\n  return toDate(next) > max ? partsOf(max) : next;\n};\n\nconst range = (from: number, to: number) =>\n  from > to ? [] : Array.from({ length: to - from + 1 }, (_, i) => from + i);\n\nexport interface BirthdayPickerProps {\n  value?: Date | null;\n  onChange?: (date: Date) => void;\n  /** Самый ранний год в списке. */\n  minYear?: number;\n  /** Самый поздний год в списке. По умолчанию — текущий. */\n  maxYear?: number;\n  /** Минимальный возраст: позже этой даты выбрать нельзя. */\n  minAge?: number;\n  disabled?: boolean;\n  /** Имя для FormData: уходит дата в формате `YYYY-MM-DD`. */\n  name?: string;\n  placeholder?: string;\n  error?: boolean;\n  className?: string;\n}\n\n/**\n * Дата рождения: поле открывает нижний лист с выбором дня, месяца и года.\n * Поле только для чтения с клавиатуры, поэтому `required` из `Field` и\n * нативная проверка формы работают, а телефонная клавиатура не открывается.\n */\nexport const BirthdayPicker = ({\n  value,\n  onChange,\n  minYear = 1930,\n  maxYear,\n  minAge = 18,\n  disabled = false,\n  name,\n  placeholder,\n  error,\n  className,\n}: BirthdayPickerProps) => {\n  const [today] = useState(() => new Date());\n  const [open, setOpen] = useState(false);\n  const maxBirth = maxBirthDate(minAge, today);\n  const lastYear = Math.min(\n    maxYear ?? today.getFullYear(),\n    maxBirth.getFullYear(),\n  );\n  const [draft, setDraft] = useState<BirthdayParts>(() =>\n    clampParts(partsOf(value ?? maxBirth), maxBirth),\n  );\n  const triggerRef = useRef<HTMLInputElement>(null);\n  const sheetRef = useRef<HTMLDialogElement>(null);\n  const titleId = useId();\n\n  const years = range(Math.min(minYear, draft.year), lastYear);\n  const days = range(1, daysInMonth(draft.year, draft.month));\n\n  // iOS: без position: fixed фон прокручивается под открытым листом.\n  useEffect(() => {\n    if (!open) return;\n\n    const { position, top, width } = document.body.style;\n    const scrollY = window.scrollY;\n    document.body.style.position = 'fixed';\n    document.body.style.top = `-${scrollY}px`;\n    document.body.style.width = '100%';\n    sheetRef.current\n      ?.querySelector<HTMLElement>('[role=\"spinbutton\"]')\n      ?.focus();\n\n    const handleKeyDown = (event: globalThis.KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n\n      setOpen(false);\n      triggerRef.current?.focus();\n    };\n    document.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.position = position;\n      document.body.style.top = top;\n      document.body.style.width = width;\n      window.scrollTo(0, scrollY);\n    };\n  }, [open]);\n\n  const openSheet = () => {\n    if (disabled) return;\n\n    setDraft(clampParts(partsOf(value ?? maxBirth), maxBirth));\n    setOpen(true);\n  };\n\n  const close = () => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  };\n\n  const updateDraft = (patch: Partial<BirthdayParts>) => {\n    setDraft(prev => clampParts({ ...prev, ...patch }, maxBirth));\n  };\n\n  const apply = () => {\n    onChange?.(toDate(draft));\n    close();\n  };\n\n  // Текст не вводится: поле только выбирает дату через лист.\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Tab') return;\n\n    event.preventDefault();\n    if (\n      event.key === 'Enter' ||\n      event.key === ' ' ||\n      event.key === 'ArrowDown'\n    ) {\n      openSheet();\n    }\n  };\n\n  return (\n    <div className={cn('birthday-picker', className)}>\n      <Input\n        ref={triggerRef}\n        className=\"birthday-picker__trigger\"\n        value={value ? formatBirthday(value) : ''}\n        onChange={() => {}}\n        onClick={openSheet}\n        onKeyDown={handleTriggerKeyDown}\n        onPaste={event => event.preventDefault()}\n        inputMode=\"none\"\n        autoComplete=\"off\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n        placeholder={placeholder ?? `Возраст от ${minAge} лет`}\n        disabled={disabled}\n        error={error}\n      />\n      <IconCalendar className=\"birthday-picker__icon\" aria-hidden />\n      {name ? (\n        <input\n          type=\"hidden\"\n          name={name}\n          value={value ? toIsoDate(value) : ''}\n        />\n      ) : null}\n\n      {open\n        ? createPortal(\n            <div className=\"birthday-picker__layer\">\n              <button\n                type=\"button\"\n                className=\"birthday-picker__mask\"\n                aria-label=\"Закрыть\"\n                onClick={close}\n              />\n              <dialog\n                ref={sheetRef}\n                open\n                aria-modal=\"true\"\n                aria-labelledby={titleId}\n                className=\"birthday-picker__sheet\"\n              >\n                <h2 id={titleId} className=\"birthday-picker__title\">\n                  Дата рождения\n                </h2>\n                <div className=\"birthday-picker__columns\">\n                  <div className=\"birthday-picker__column\">\n                    <span className=\"birthday-picker__caption\">День</span>\n                    <WheelColumn\n                      label=\"День\"\n                      items={days.map(day => ({\n                        value: day,\n                        label: String(day),\n                      }))}\n                      value={draft.day}\n                      onChange={day => updateDraft({ day })}\n                    />\n                  </div>\n                  <div className=\"birthday-picker__column\">\n                    <span className=\"birthday-picker__caption\">Месяц</span>\n                    <WheelColumn\n                      label=\"Месяц\"\n                      items={MONTH_NAMES.map((month, index) => ({\n                        value: index + 1,\n                        label: month,\n                      }))}\n                      value={draft.month}\n                      onChange={month => updateDraft({ month })}\n                    />\n                  </div>\n                  <div className=\"birthday-picker__column\">\n                    <span className=\"birthday-picker__caption\">Год</span>\n                    <WheelColumn\n                      label=\"Год\"\n                      items={years.map(year => ({\n                        value: year,\n                        label: String(year),\n                      }))}\n                      value={draft.year}\n                      onChange={year => updateDraft({ year })}\n                    />\n                  </div>\n                </div>\n                <div className=\"birthday-picker__actions\">\n                  <Button onClick={apply}>\n                    <IconCorrect />\n                    Применить\n                  </Button>\n                  <Button variant=\"link\" onClick={close}>\n                    Отмена\n                  </Button>\n                </div>\n              </dialog>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"birthday-picker.js","names":[],"sources":["../../../src/components/birthday-picker/birthday-picker.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@/components/button';\nimport { Input } from '@/components/input';\nimport '../input/input.scss';\nimport { IconCalendar } from '@/icons/icon-calendar';\nimport { IconCorrect } from '@/icons/icon-correct';\nimport { cn } from '@/lib/cn';\nimport { WheelColumn } from './wheel-column';\nimport './birthday-picker.scss';\n\nconst MONTH_NAMES = [\n  'январь',\n  'февраль',\n  'март',\n  'апрель',\n  'май',\n  'июнь',\n  'июль',\n  'август',\n  'сентябрь',\n  'октябрь',\n  'ноябрь',\n  'декабрь',\n];\n\n// В дате пишется родительный падеж: «15 марта 1990».\nconst MONTH_NAMES_GENITIVE = [\n  'января',\n  'февраля',\n  'марта',\n  'апреля',\n  'мая',\n  'июня',\n  'июля',\n  'августа',\n  'сентября',\n  'октября',\n  'ноября',\n  'декабря',\n];\n\n/** Месяц здесь 1–12, как в календаре, а не индекс массива. */\ninterface BirthdayParts {\n  day: number;\n  month: number;\n  year: number;\n}\n\nconst daysInMonth = (year: number, month: number) =>\n  new Date(year, month, 0).getDate();\n\nconst partsOf = (date: Date): BirthdayParts => ({\n  day: date.getDate(),\n  month: date.getMonth() + 1,\n  year: date.getFullYear(),\n});\n\nconst toDate = ({ day, month, year }: BirthdayParts) =>\n  new Date(year, month - 1, day);\n\nconst pad = (value: number) => String(value).padStart(2, '0');\n\nconst toIsoDate = (date: Date) =>\n  `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n\nconst formatBirthday = (date: Date) =>\n  `${date.getDate()} ${MONTH_NAMES_GENITIVE[date.getMonth()]} ${date.getFullYear()}`;\n\n/** Сегодня минус `minAge` лет. 29 февраля в невисокосном году уходит на 28-е. */\nconst maxBirthDate = (minAge: number, today: Date) => {\n  const year = today.getFullYear() - minAge;\n  const month = today.getMonth();\n  const day = Math.min(today.getDate(), daysInMonth(year, month + 1));\n  return new Date(year, month, day);\n};\n\n/** Подрезает день под длину месяца и не даёт выбрать дату позже максимальной. */\nconst clampParts = (parts: BirthdayParts, max: Date): BirthdayParts => {\n  const next = {\n    ...parts,\n    day: Math.min(parts.day, daysInMonth(parts.year, parts.month)),\n  };\n\n  return toDate(next) > max ? partsOf(max) : next;\n};\n\nconst range = (from: number, to: number) =>\n  from > to ? [] : Array.from({ length: to - from + 1 }, (_, i) => from + i);\n\nexport interface BirthdayPickerProps {\n  value?: Date | null;\n  onChange?: (date: Date) => void;\n  /** Самый ранний год в списке. */\n  minYear?: number;\n  /** Самый поздний год в списке. По умолчанию — текущий. */\n  maxYear?: number;\n  /** Минимальный возраст: позже этой даты выбрать нельзя. */\n  minAge?: number;\n  disabled?: boolean;\n  /** Имя для FormData: уходит дата в формате `YYYY-MM-DD`. */\n  name?: string;\n  placeholder?: string;\n  error?: boolean;\n  className?: string;\n}\n\n/**\n * Дата рождения: поле открывает нижний лист с выбором дня, месяца и года.\n * Поле только для чтения с клавиатуры, поэтому `required` из `Field` и\n * нативная проверка формы работают, а телефонная клавиатура не открывается.\n */\nexport const BirthdayPicker = ({\n  value,\n  onChange,\n  minYear = 1930,\n  maxYear,\n  minAge = 18,\n  disabled = false,\n  name,\n  placeholder,\n  error,\n  className,\n}: BirthdayPickerProps) => {\n  const [today] = useState(() => new Date());\n  const [open, setOpen] = useState(false);\n  const maxBirth = maxBirthDate(minAge, today);\n  const lastYear = Math.min(\n    maxYear ?? today.getFullYear(),\n    maxBirth.getFullYear(),\n  );\n  const [draft, setDraft] = useState<BirthdayParts>(() =>\n    clampParts(partsOf(value ?? maxBirth), maxBirth),\n  );\n  const triggerRef = useRef<HTMLInputElement>(null);\n  const sheetRef = useRef<HTMLDialogElement>(null);\n  const titleId = useId();\n\n  const years = range(Math.min(minYear, draft.year), lastYear);\n  const days = range(1, daysInMonth(draft.year, draft.month));\n\n  // iOS: без position: fixed фон прокручивается под открытым листом.\n  useEffect(() => {\n    if (!open) return;\n\n    const { position, top, width } = document.body.style;\n    const scrollY = window.scrollY;\n    document.body.style.position = 'fixed';\n    document.body.style.top = `-${scrollY}px`;\n    document.body.style.width = '100%';\n    sheetRef.current\n      ?.querySelector<HTMLElement>('[role=\"spinbutton\"]')\n      ?.focus();\n\n    const handleKeyDown = (event: globalThis.KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n\n      setOpen(false);\n      triggerRef.current?.focus();\n    };\n    document.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.position = position;\n      document.body.style.top = top;\n      document.body.style.width = width;\n      window.scrollTo(0, scrollY);\n    };\n  }, [open]);\n\n  const openSheet = () => {\n    if (disabled) return;\n\n    setDraft(clampParts(partsOf(value ?? maxBirth), maxBirth));\n    setOpen(true);\n  };\n\n  const close = () => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  };\n\n  const updateDraft = (patch: Partial<BirthdayParts>) => {\n    setDraft(prev => clampParts({ ...prev, ...patch }, maxBirth));\n  };\n\n  const apply = () => {\n    onChange?.(toDate(draft));\n    close();\n  };\n\n  // Текст не вводится: поле только выбирает дату через лист.\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Tab') return;\n\n    event.preventDefault();\n    if (\n      event.key === 'Enter' ||\n      event.key === ' ' ||\n      event.key === 'ArrowDown'\n    ) {\n      openSheet();\n    }\n  };\n\n  return (\n    <div className={cn('birthday-picker', className)}>\n      <Input\n        ref={triggerRef}\n        className=\"birthday-picker__trigger\"\n        value={value ? formatBirthday(value) : ''}\n        onChange={() => {}}\n        onClick={openSheet}\n        onKeyDown={handleTriggerKeyDown}\n        onPaste={event => event.preventDefault()}\n        inputMode=\"none\"\n        autoComplete=\"off\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n        placeholder={placeholder ?? `Возраст от ${minAge} лет`}\n        disabled={disabled}\n        error={error}\n      />\n      <IconCalendar className=\"birthday-picker__icon\" aria-hidden />\n      {name ? (\n        <input\n          type=\"hidden\"\n          name={name}\n          value={value ? toIsoDate(value) : ''}\n        />\n      ) : null}\n\n      {open\n        ? createPortal(\n            <div className=\"birthday-picker__layer\">\n              <button\n                type=\"button\"\n                className=\"birthday-picker__mask\"\n                aria-label=\"Закрыть\"\n                onClick={close}\n              />\n              <dialog\n                ref={sheetRef}\n                open\n                aria-modal=\"true\"\n                aria-labelledby={titleId}\n                className=\"birthday-picker__sheet\"\n              >\n                <h2 id={titleId} className=\"birthday-picker__title\">\n                  Дата рождения\n                </h2>\n                <div className=\"birthday-picker__columns\">\n                  <div className=\"birthday-picker__column\">\n                    <span className=\"birthday-picker__caption\">День</span>\n                    <WheelColumn\n                      label=\"День\"\n                      items={days.map(day => ({\n                        value: day,\n                        label: String(day),\n                      }))}\n                      value={draft.day}\n                      onChange={day => updateDraft({ day })}\n                    />\n                  </div>\n                  <div className=\"birthday-picker__column\">\n                    <span className=\"birthday-picker__caption\">Месяц</span>\n                    <WheelColumn\n                      label=\"Месяц\"\n                      items={MONTH_NAMES.map((month, index) => ({\n                        value: index + 1,\n                        label: month,\n                      }))}\n                      value={draft.month}\n                      onChange={month => updateDraft({ month })}\n                    />\n                  </div>\n                  <div className=\"birthday-picker__column\">\n                    <span className=\"birthday-picker__caption\">Год</span>\n                    <WheelColumn\n                      label=\"Год\"\n                      items={years.map(year => ({\n                        value: year,\n                        label: String(year),\n                      }))}\n                      value={draft.year}\n                      onChange={year => updateDraft({ year })}\n                    />\n                  </div>\n                </div>\n                <div className=\"birthday-picker__actions\">\n                  <Button onClick={apply}>\n                    <IconCorrect />\n                    Применить\n                  </Button>\n                  <Button variant=\"link\" onClick={close}>\n                    Отмена\n                  </Button>\n                </div>\n              </dialog>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

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

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

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

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

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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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"}