import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-GrlyTB2d.js";import{i as n,r}from"./react-qN2cStNd.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-DkLPipTQ.js";import{a as p,c as m,i as h,n as g,o as _,r as v,s as y,t as b}from"./PeriodSelect.stories-BRIzJUwe.js";function x(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(s,{of:y,parameters:{docs:{toc:!0}}}),`
`,(0,C.jsx)(u,{children:`PeriodSelect`}),`
`,(0,C.jsx)(o,{children:`Выбор периода детализации дат с ограничением вариантов по связанному диапазону`}),`
`,(0,C.jsxs)(t.p,{children:[`PeriodSelect используется для выбора уровня детализации: `,(0,C.jsx)(t.code,{children:`day`}),`, `,(0,C.jsx)(t.code,{children:`week`}),`, `,(0,C.jsx)(t.code,{children:`month`}),` или `,(0,C.jsx)(t.code,{children:`year`}),`. Компонент хранит только id выбранного периода, а недоступность вариантов вычисляет по переданному `,(0,C.jsx)(t.code,{children:`dateRange`}),` и порогам `,(0,C.jsx)(t.code,{children:`maxDayRangeDays`}),` / `,(0,C.jsx)(t.code,{children:`maxWeekRangeWeeks`}),`.`]}),`
`,(0,C.jsxs)(t.p,{children:[`Prop `,(0,C.jsx)(t.code,{children:`presetIds`}),` ограничивает встроенный каталог разрешенными вариантами. Независимо от порядка id в конфигурации контрол отображает их в каноническом порядке `,(0,C.jsx)(t.code,{children:`day → week → month → year`}),`. Отсутствующий, пустой или полностью невалидный список безопасно заменяется полным встроенным набором.`]}),`
`,(0,C.jsxs)(t.p,{children:[`Prop `,(0,C.jsx)(t.code,{children:`labels`}),` частично заменяет подписи встроенных вариантов, не меняя их id, порядок и ограничения диапазона. Для отсутствующих ключей сохраняются канонические подписи. Собственный `,(0,C.jsx)(t.code,{children:`options`}),` является полным override и имеет приоритет над `,(0,C.jsx)(t.code,{children:`presetIds`}),`, `,(0,C.jsx)(t.code,{children:`labels`}),`, `,(0,C.jsx)(t.code,{children:`maxDayRangeDays`}),` и `,(0,C.jsx)(t.code,{children:`maxWeekRangeWeeks`}),`.`]}),`
`,(0,C.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
`,(0,C.jsx)(f,{}),`
`,(0,C.jsx)(i,{of:h}),`
`,(0,C.jsx)(t.pre,{children:(0,C.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";

import { PeriodSelect, type PeriodSelectPresetId } from "@ryuzaki13/react-foundation-ui/period-select";

export function Example() {
	const [value, setValue] = useState<PeriodSelectPresetId | undefined>("month");
	const dateRange = [new Date(2026, 2, 1), new Date(2026, 2, 14)] as const;

	return (
		<PeriodSelect
			label="Период"
			value={value}
			onChange={setValue}
			presetIds={["month", "year"]}
			labels={{ month: "за месяц", year: "за год" }}
			dateRange={dateRange}
			maxDayRangeDays={31}
		/>
	);
}
`})}),`
`,(0,C.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
`,(0,C.jsxs)(t.ul,{children:[`
`,(0,C.jsxs)(t.li,{children:[`Передавайте `,(0,C.jsx)(t.code,{children:`dateRange`}),`, если период должен зависеть от выбранного диапазона дат.`]}),`
`,(0,C.jsxs)(t.li,{children:[`Используйте `,(0,C.jsx)(t.code,{children:`presetIds`}),`, когда runtime должен предлагать только разрешенные уровни детализации; порядок массива не управляет порядком Select.`]}),`
`,(0,C.jsxs)(t.li,{children:[`Передавайте `,(0,C.jsx)(t.code,{children:`labels`}),`, когда требуется изменить только текст встроенных вариантов. Для собственного каталога с другими id или правилами используйте `,(0,C.jsx)(t.code,{children:`options`}),`.`]}),`
`,(0,C.jsxs)(t.li,{children:[`Настраивайте `,(0,C.jsx)(t.code,{children:`maxDayRangeDays`}),` и `,(0,C.jsx)(t.code,{children:`maxWeekRangeWeeks`}),` в конфиге параметрического контрола, а не в потребителях runtime.`]}),`
`,(0,C.jsxs)(t.li,{children:[`Если `,(0,C.jsx)(t.code,{children:`dateRange`}),` временно блокирует все разрешенные варианты, Select показывает пустое значение, но не очищает внешний controlled-id. После появления доступного варианта отображение восстанавливается без потери runtime-параметра.`]}),`
`,(0,C.jsxs)(t.li,{children:[`В story `,(0,C.jsx)(t.code,{children:`Controlled`}),` значения обновляются через `,(0,C.jsx)(t.code,{children:`useArgs`}),`, поэтому Controls и сам Select остаются синхронизированы.`]}),`
`]}),`
`,(0,C.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
`,(0,C.jsx)(t.h3,{id:`контролируемый-выбор-с-редактированием-props-через-storybook-controls`,children:`Контролируемый выбор с редактированием props через Storybook Controls`}),`
`,(0,C.jsx)(d,{of:h}),`
`,(0,C.jsx)(t.h3,{id:`автопереключение-при-слишком-большом-диапазоне`,children:`Автопереключение при слишком большом диапазоне`}),`
`,(0,C.jsx)(d,{of:v}),`
`,(0,C.jsx)(t.h3,{id:`ограничение-выбора-месяцами-и-годами`,children:`Ограничение выбора месяцами и годами`}),`
`,(0,C.jsx)(d,{of:_}),`
`,(0,C.jsx)(t.h3,{id:`альтернативные-подписи-встроенных-вариантов`,children:`Альтернативные подписи встроенных вариантов`}),`
`,(0,C.jsx)(d,{of:g}),`
`,(0,C.jsx)(t.h3,{id:`временно-недоступны-все-разрешенные-варианты`,children:`Временно недоступны все разрешенные варианты`}),`
`,(0,C.jsx)(d,{of:b}),`
`,(0,C.jsx)(t.h3,{id:`заблокированное-состояние`,children:`Заблокированное состояние`}),`
`,(0,C.jsx)(d,{of:p}),`
`,(0,C.jsx)(t.h2,{id:`api`,children:`API`}),`
`,(0,C.jsx)(l,{of:y}),`
`,(0,C.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
`,(0,C.jsx)(a,{includePrimary:!1})]})}function S(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,C.jsx)(t,{...e,children:(0,C.jsx)(x,{...e})}):x(e)}var C;function w(){return(w=e((()=>{C=t(),r(),c(),m()})))()}w();export{S as default};