@de-kit/st-ui 0.1.13 → 0.1.15

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

@@ -0,0 +1,245 @@
+const require_cn = require("../../lib/cn.cjs");
+const require_button = require("../button/button.cjs");
+const require_input = require("../input/input.cjs");
+const require_icon_calendar = require("../../icons/icon-calendar.cjs");
+const require_icon_correct = require("../../icons/icon-correct.cjs");
+const require_wheel_column = require("./wheel-column.cjs");
+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
+const MONTH_NAMES = [
+	"январь",
+	"февраль",
+	"март",
+	"апрель",
+	"май",
+	"июнь",
+	"июль",
+	"август",
+	"сентябрь",
+	"октябрь",
+	"ноябрь",
+	"декабрь"
+];
+const MONTH_NAMES_GENITIVE = [
+	"января",
+	"февраля",
+	"марта",
+	"апреля",
+	"мая",
+	"июня",
+	"июля",
+	"августа",
+	"сентября",
+	"октября",
+	"ноября",
+	"декабря"
+];
+const daysInMonth = (year, month) => new Date(year, month, 0).getDate();
+const partsOf = (date) => ({
+	day: date.getDate(),
+	month: date.getMonth() + 1,
+	year: date.getFullYear()
+});
+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()}`;
+/** Сегодня минус `minAge` лет. 29 февраля в невисокосном году уходит на 28-е. */
+const maxBirthDate = (minAge, today) => {
+	const year = today.getFullYear() - minAge;
+	const month = today.getMonth();
+	const day = Math.min(today.getDate(), daysInMonth(year, month + 1));
+	return new Date(year, month, day);
+};
+/** Подрезает день под длину месяца и не даёт выбрать дату позже максимальной. */
+const clampParts = (parts, max) => {
+	const next = {
+		...parts,
+		day: Math.min(parts.day, daysInMonth(parts.year, parts.month))
+	};
+	return toDate(next) > max ? partsOf(max) : next;
+};
+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 [today] = (0, react.useState)(() => /* @__PURE__ */ new Date());
+	const [open, setOpen] = (0, react.useState)(false);
+	const maxBirth = maxBirthDate(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);
+	const sheetRef = (0, react.useRef)(null);
+	const titleId = (0, react.useId)();
+	const years = range(Math.min(minYear, draft.year), lastYear);
+	const days = range(1, daysInMonth(draft.year, draft.month));
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const { position, top, width } = document.body.style;
+		const scrollY = window.scrollY;
+		document.body.style.position = "fixed";
+		document.body.style.top = `-${scrollY}px`;
+		document.body.style.width = "100%";
+		sheetRef.current?.querySelector("[role=\"spinbutton\"]")?.focus();
+		const handleKeyDown = (event) => {
+			if (event.key !== "Escape") return;
+			setOpen(false);
+			triggerRef.current?.focus();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+			document.body.style.position = position;
+			document.body.style.top = top;
+			document.body.style.width = width;
+			window.scrollTo(0, scrollY);
+		};
+	}, [open]);
+	const openSheet = () => {
+		if (disabled) return;
+		setDraft(clampParts(partsOf(value ?? maxBirth), maxBirth));
+		setOpen(true);
+	};
+	const close = () => {
+		setOpen(false);
+		triggerRef.current?.focus();
+	};
+	const updateDraft = (patch) => {
+		setDraft((prev) => clampParts({
+			...prev,
+			...patch
+		}, maxBirth));
+	};
+	const apply = () => {
+		onChange?.(toDate(draft));
+		close();
+	};
+	const handleTriggerKeyDown = (event) => {
+		if (event.key === "Tab") return;
+		event.preventDefault();
+		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),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+				ref: triggerRef,
+				className: "birthday-picker__trigger",
+				value: value ? formatBirthday(value) : "",
+				onChange: () => {},
+				onClick: openSheet,
+				onKeyDown: handleTriggerKeyDown,
+				onPaste: (event) => event.preventDefault(),
+				inputMode: "none",
+				autoComplete: "off",
+				"aria-haspopup": "dialog",
+				"aria-expanded": open,
+				placeholder: placeholder ?? `Возраст от ${minAge} лет`,
+				disabled,
+				error
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_calendar.IconCalendar, {
+				className: "birthday-picker__icon",
+				"aria-hidden": true
+			}),
+			name ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name,
+				value: value ? toIsoDate(value) : ""
+			}) : null,
+			open ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "birthday-picker__layer",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "birthday-picker__mask",
+					"aria-label": "Закрыть",
+					onClick: close
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dialog", {
+					ref: sheetRef,
+					open: true,
+					"aria-modal": "true",
+					"aria-labelledby": titleId,
+					className: "birthday-picker__sheet",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+							id: titleId,
+							className: "birthday-picker__title",
+							children: "Дата рождения"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "birthday-picker__columns",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "birthday-picker__column",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "birthday-picker__caption",
+										children: "День"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_wheel_column.WheelColumn, {
+										label: "День",
+										items: days.map((day) => ({
+											value: day,
+											label: String(day)
+										})),
+										value: draft.day,
+										onChange: (day) => updateDraft({ day })
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "birthday-picker__column",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "birthday-picker__caption",
+										children: "Месяц"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_wheel_column.WheelColumn, {
+										label: "Месяц",
+										items: MONTH_NAMES.map((month, index) => ({
+											value: index + 1,
+											label: month
+										})),
+										value: draft.month,
+										onChange: (month) => updateDraft({ month })
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "birthday-picker__column",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "birthday-picker__caption",
+										children: "Год"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_wheel_column.WheelColumn, {
+										label: "Год",
+										items: years.map((year) => ({
+											value: year,
+											label: String(year)
+										})),
+										value: draft.year,
+										onChange: (year) => updateDraft({ year })
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "birthday-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, {}), "Применить"]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+								variant: "link",
+								onClick: close,
+								children: "Отмена"
+							})]
+						})
+					]
+				})]
+			}), document.body) : null
+		]
+	});
+};
+exports.BirthdayPicker = BirthdayPicker;
+
+//# sourceMappingURL=birthday-picker.cjs.map

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

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

@@ -0,0 +1,23 @@
+export interface BirthdayPickerProps {
+  value?: Date | null;
+  onChange?: (date: Date) => void;
+  /** Самый ранний год в списке. */
+  minYear?: number;
+  /** Самый поздний год в списке. По умолчанию — текущий. */
+  maxYear?: number;
+  /** Минимальный возраст: позже этой даты выбрать нельзя. */
+  minAge?: number;
+  disabled?: boolean;
+  /** Имя для FormData: уходит дата в формате `YYYY-MM-DD`. */
+  name?: string;
+  placeholder?: 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

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

@@ -0,0 +1,23 @@
+export interface BirthdayPickerProps {
+  value?: Date | null;
+  onChange?: (date: Date) => void;
+  /** Самый ранний год в списке. */
+  minYear?: number;
+  /** Самый поздний год в списке. По умолчанию — текущий. */
+  maxYear?: number;
+  /** Минимальный возраст: позже этой даты выбрать нельзя. */
+  minAge?: number;
+  disabled?: boolean;
+  /** Имя для FormData: уходит дата в формате `YYYY-MM-DD`. */
+  name?: string;
+  placeholder?: 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

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

@@ -0,0 +1,245 @@
+import { cn } from "../../lib/cn.js";
+import { Button } from "../button/button.js";
+import { Input } from "../input/input.js";
+import { IconCalendar } from "../../icons/icon-calendar.js";
+import { IconCorrect } from "../../icons/icon-correct.js";
+import { WheelColumn } from "./wheel-column.js";
+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
+const MONTH_NAMES = [
+	"январь",
+	"февраль",
+	"март",
+	"апрель",
+	"май",
+	"июнь",
+	"июль",
+	"август",
+	"сентябрь",
+	"октябрь",
+	"ноябрь",
+	"декабрь"
+];
+const MONTH_NAMES_GENITIVE = [
+	"января",
+	"февраля",
+	"марта",
+	"апреля",
+	"мая",
+	"июня",
+	"июля",
+	"августа",
+	"сентября",
+	"октября",
+	"ноября",
+	"декабря"
+];
+const daysInMonth = (year, month) => new Date(year, month, 0).getDate();
+const partsOf = (date) => ({
+	day: date.getDate(),
+	month: date.getMonth() + 1,
+	year: date.getFullYear()
+});
+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()}`;
+/** Сегодня минус `minAge` лет. 29 февраля в невисокосном году уходит на 28-е. */
+const maxBirthDate = (minAge, today) => {
+	const year = today.getFullYear() - minAge;
+	const month = today.getMonth();
+	const day = Math.min(today.getDate(), daysInMonth(year, month + 1));
+	return new Date(year, month, day);
+};
+/** Подрезает день под длину месяца и не даёт выбрать дату позже максимальной. */
+const clampParts = (parts, max) => {
+	const next = {
+		...parts,
+		day: Math.min(parts.day, daysInMonth(parts.year, parts.month))
+	};
+	return toDate(next) > max ? partsOf(max) : next;
+};
+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 [today] = useState(() => /* @__PURE__ */ new Date());
+	const [open, setOpen] = useState(false);
+	const maxBirth = maxBirthDate(minAge, today);
+	const lastYear = Math.min(maxYear ?? today.getFullYear(), maxBirth.getFullYear());
+	const [draft, setDraft] = useState(() => clampParts(partsOf(value ?? maxBirth), maxBirth));
+	const triggerRef = useRef(null);
+	const sheetRef = useRef(null);
+	const titleId = useId();
+	const years = range(Math.min(minYear, draft.year), lastYear);
+	const days = range(1, daysInMonth(draft.year, draft.month));
+	useEffect(() => {
+		if (!open) return;
+		const { position, top, width } = document.body.style;
+		const scrollY = window.scrollY;
+		document.body.style.position = "fixed";
+		document.body.style.top = `-${scrollY}px`;
+		document.body.style.width = "100%";
+		sheetRef.current?.querySelector("[role=\"spinbutton\"]")?.focus();
+		const handleKeyDown = (event) => {
+			if (event.key !== "Escape") return;
+			setOpen(false);
+			triggerRef.current?.focus();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+			document.body.style.position = position;
+			document.body.style.top = top;
+			document.body.style.width = width;
+			window.scrollTo(0, scrollY);
+		};
+	}, [open]);
+	const openSheet = () => {
+		if (disabled) return;
+		setDraft(clampParts(partsOf(value ?? maxBirth), maxBirth));
+		setOpen(true);
+	};
+	const close = () => {
+		setOpen(false);
+		triggerRef.current?.focus();
+	};
+	const updateDraft = (patch) => {
+		setDraft((prev) => clampParts({
+			...prev,
+			...patch
+		}, maxBirth));
+	};
+	const apply = () => {
+		onChange?.(toDate(draft));
+		close();
+	};
+	const handleTriggerKeyDown = (event) => {
+		if (event.key === "Tab") return;
+		event.preventDefault();
+		if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") openSheet();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("birthday-picker", className),
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				ref: triggerRef,
+				className: "birthday-picker__trigger",
+				value: value ? formatBirthday(value) : "",
+				onChange: () => {},
+				onClick: openSheet,
+				onKeyDown: handleTriggerKeyDown,
+				onPaste: (event) => event.preventDefault(),
+				inputMode: "none",
+				autoComplete: "off",
+				"aria-haspopup": "dialog",
+				"aria-expanded": open,
+				placeholder: placeholder ?? `Возраст от ${minAge} лет`,
+				disabled,
+				error
+			}),
+			/* @__PURE__ */ jsx(IconCalendar, {
+				className: "birthday-picker__icon",
+				"aria-hidden": true
+			}),
+			name ? /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: value ? toIsoDate(value) : ""
+			}) : null,
+			open ? createPortal(/* @__PURE__ */ jsxs("div", {
+				className: "birthday-picker__layer",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "birthday-picker__mask",
+					"aria-label": "Закрыть",
+					onClick: close
+				}), /* @__PURE__ */ jsxs("dialog", {
+					ref: sheetRef,
+					open: true,
+					"aria-modal": "true",
+					"aria-labelledby": titleId,
+					className: "birthday-picker__sheet",
+					children: [
+						/* @__PURE__ */ jsx("h2", {
+							id: titleId,
+							className: "birthday-picker__title",
+							children: "Дата рождения"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "birthday-picker__columns",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "birthday-picker__column",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "birthday-picker__caption",
+										children: "День"
+									}), /* @__PURE__ */ jsx(WheelColumn, {
+										label: "День",
+										items: days.map((day) => ({
+											value: day,
+											label: String(day)
+										})),
+										value: draft.day,
+										onChange: (day) => updateDraft({ day })
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "birthday-picker__column",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "birthday-picker__caption",
+										children: "Месяц"
+									}), /* @__PURE__ */ jsx(WheelColumn, {
+										label: "Месяц",
+										items: MONTH_NAMES.map((month, index) => ({
+											value: index + 1,
+											label: month
+										})),
+										value: draft.month,
+										onChange: (month) => updateDraft({ month })
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "birthday-picker__column",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "birthday-picker__caption",
+										children: "Год"
+									}), /* @__PURE__ */ jsx(WheelColumn, {
+										label: "Год",
+										items: years.map((year) => ({
+											value: year,
+											label: String(year)
+										})),
+										value: draft.year,
+										onChange: (year) => updateDraft({ year })
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "birthday-picker__actions",
+							children: [/* @__PURE__ */ jsxs(Button, {
+								onClick: apply,
+								children: [/* @__PURE__ */ jsx(IconCorrect, {}), "Применить"]
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "link",
+								onClick: close,
+								children: "Отмена"
+							})]
+						})
+					]
+				})]
+			}), document.body) : null
+		]
+	});
+};
+export { BirthdayPicker };
+
+//# sourceMappingURL=birthday-picker.js.map

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

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