import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-GmIo3IOR.js";import{E as n,a as r,d as i,f as a,l as o,m as s,n as c,p as l,r as u,u as d}from"./blocks-0RiOsxIK.js";import{t as f}from"./mdx-react-shim-DQ40dZsI.js";import{AllAllowedOptionsDisabled as p,AutoSwitchByRange as m,Controlled as h,Disabled as g,MonthAndYear as _,n as v,t as y}from"./PeriodSelect.stories-D12q6-YO.js";function b(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(o,{of:y,parameters:{docs:{toc:!0}}}),`
`,(0,S.jsx)(l,{children:`PeriodSelect`}),`
`,(0,S.jsx)(a,{children:`Выбор периода детализации дат с ограничением вариантов по связанному диапазону`}),`
`,(0,S.jsxs)(t.p,{children:[`PeriodSelect используется для выбора уровня детализации: `,(0,S.jsx)(t.code,{children:`day`}),`, `,(0,S.jsx)(t.code,{children:`week`}),`, `,(0,S.jsx)(t.code,{children:`month`}),` или `,(0,S.jsx)(t.code,{children:`year`}),`. Компонент хранит только id выбранного периода, а недоступность вариантов вычисляет по переданному `,(0,S.jsx)(t.code,{children:`dateRange`}),` и порогам `,(0,S.jsx)(t.code,{children:`maxDayRangeDays`}),` / `,(0,S.jsx)(t.code,{children:`maxWeekRangeWeeks`}),`.`]}),`
`,(0,S.jsxs)(t.p,{children:[`Prop `,(0,S.jsx)(t.code,{children:`presetIds`}),` ограничивает встроенный каталог разрешенными вариантами. Независимо от порядка id в конфигурации контрол отображает их в каноническом порядке `,(0,S.jsx)(t.code,{children:`day → week → month → year`}),`. Отсутствующий, пустой или полностью невалидный список безопасно заменяется полным встроенным набором. Собственный `,(0,S.jsx)(t.code,{children:`options`}),` имеет приоритет над `,(0,S.jsx)(t.code,{children:`presetIds`}),`.`]}),`
`,(0,S.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
`,(0,S.jsx)(d,{}),`
`,(0,S.jsx)(r,{of:h}),`
`,(0,S.jsx)(t.pre,{children:(0,S.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"]}
			dateRange={dateRange}
			maxDayRangeDays={31}
		/>
	);
}
`})}),`
`,(0,S.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
`,(0,S.jsxs)(t.ul,{children:[`
`,(0,S.jsxs)(t.li,{children:[`Передавайте `,(0,S.jsx)(t.code,{children:`dateRange`}),`, если период должен зависеть от выбранного диапазона дат.`]}),`
`,(0,S.jsxs)(t.li,{children:[`Используйте `,(0,S.jsx)(t.code,{children:`presetIds`}),`, когда runtime должен предлагать только разрешенные уровни детализации; порядок массива не управляет порядком Select.`]}),`
`,(0,S.jsxs)(t.li,{children:[`Настраивайте `,(0,S.jsx)(t.code,{children:`maxDayRangeDays`}),` и `,(0,S.jsx)(t.code,{children:`maxWeekRangeWeeks`}),` в конфиге параметрического контрола, а не в потребителях runtime.`]}),`
`,(0,S.jsxs)(t.li,{children:[`Если `,(0,S.jsx)(t.code,{children:`dateRange`}),` временно блокирует все разрешенные варианты, Select показывает пустое значение, но не очищает внешний controlled-id. После появления доступного варианта отображение восстанавливается без потери runtime-параметра.`]}),`
`,(0,S.jsxs)(t.li,{children:[`В story `,(0,S.jsx)(t.code,{children:`Controlled`}),` значения обновляются через `,(0,S.jsx)(t.code,{children:`useArgs`}),`, поэтому Controls и сам Select остаются синхронизированы.`]}),`
`]}),`
`,(0,S.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
`,(0,S.jsx)(t.h3,{id:`контролируемый-выбор-с-редактированием-props-через-storybook-controls`,children:`Контролируемый выбор с редактированием props через Storybook Controls`}),`
`,(0,S.jsx)(u,{of:h}),`
`,(0,S.jsx)(t.h3,{id:`автопереключение-при-слишком-большом-диапазоне`,children:`Автопереключение при слишком большом диапазоне`}),`
`,(0,S.jsx)(u,{of:m}),`
`,(0,S.jsx)(t.h3,{id:`ограничение-выбора-месяцами-и-годами`,children:`Ограничение выбора месяцами и годами`}),`
`,(0,S.jsx)(u,{of:_}),`
`,(0,S.jsx)(t.h3,{id:`временно-недоступны-все-разрешенные-варианты`,children:`Временно недоступны все разрешенные варианты`}),`
`,(0,S.jsx)(u,{of:p}),`
`,(0,S.jsx)(t.h3,{id:`заблокированное-состояние`,children:`Заблокированное состояние`}),`
`,(0,S.jsx)(u,{of:g}),`
`,(0,S.jsx)(t.h2,{id:`api`,children:`API`}),`
`,(0,S.jsx)(c,{of:y}),`
`,(0,S.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
`,(0,S.jsx)(i,{includePrimary:!1})]})}function x(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,S.jsx)(t,{...e,children:(0,S.jsx)(b,{...e})}):b(e)}var S;e((()=>{S=t(),f(),s(),v()}))();export{x as default};