@ryuzaki13/react-foundation-ui 1.2.7 → 1.2.9

package/storybook-static/assets/Select.stories-CWn3P7Lf.js

@@ -0,0 +1,46 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{pn as r,t as i}from"./iframe-NOj5DEP4.js";import{n as a,t as o}from"./Select-DbumJ08V.js";var s=e({ControlledObjects:()=>p,CustomOptionLayout:()=>_,Disabled:()=>v,GroupedOptions:()=>g,Placeholder:()=>h,PrimitiveOptions:()=>m,__namedExportsOrder:()=>y,default:()=>f}),c,l,u,d,f,p,m,h,g,_,v,y,b=n((()=>{c=t(r(),1),a(),l=i(),u=[{id:1,name:`Отдел продаж`,code:`SLS`,manager:`Елена Миронова`,direction:`Коммерческий блок`},{id:2,name:`Закупки`,code:`PRC`,manager:`Антон Мелихов`,direction:`Коммерческий блок`},{id:3,name:`Логистика`,code:`LGS`,manager:`Мария Климова`,direction:`Операционный блок`,disabled:!0},{id:4,name:`Поддержка клиентов`,code:`SUP`,manager:`Ирина Белова`,direction:`Операционный блок`}],d=[`Новый`,`В работе`,`Завершён`,`Архив`],f={title:`Shared/UI/Select`,component:o,args:{label:`Подразделение`,description:`Выберите подразделение из списка.`,placeholder:`Не выбрано`,value:void 0,options:u,onChange:()=>{},getOptionKey:e=>e.id,getOptionLabel:e=>e.name,getOptionCode:e=>e.code,getOptionDisabled:e=>e.disabled??!1,size:`md`},parameters:{atomicCanvas:!0,layout:`padded`,docs:{description:{component:`Низкоуровневый getter-based select. Подходит для произвольных структур данных, примитивов и сложного кастомного рендера. Компонент возвращает наружу саму выбранную option. Для сериализуемых конфигов и сценариев с optionKey/optionLabel используйте SerializableSelect.`}}},argTypes:{label:{description:`Заголовок поля.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Текст, когда значение ещё не выбрано.`,control:`text`},value:{description:`Текущая выбранная option целиком.`,control:!1},options:{description:`Массив опций любого поддерживаемого формата.`,control:!1},onChange:{description:`Вызывается с выбранной option.`,control:!1},getOptionKey:{description:`Функция получения уникального ключа option.`,control:!1},getOptionLabel:{description:`Функция получения основного текста option.`,control:!1},getOptionCode:{description:`Опциональный рендер дополнительного кода справа.`,control:!1},getOptionDisabled:{description:`Опциональная функция блокировки отдельных option.`,control:!1},getOptionAriaLabel:{description:`Опциональная функция для aria-label option.`,control:!1},getOptionGroup:{description:`Опциональная функция, которая объединяет соседние option под доступным заголовком группы.`,control:!1},getOptionClassName:{description:`Опциональная функция CSS-класса option по её состоянию.`,control:!1},renderOption:{description:`Полностью кастомный рендер option в списке.`,control:!1},renderValue:{description:`Кастомный рендер выбранного значения в кнопке.`,control:!1},className:{description:`Дополнительный CSS-класс корневого контейнера.`,control:`text`},buttonClassName:{description:`Дополнительный CSS-класс кнопки выбора.`,control:`text`},optionsClassName:{description:`Дополнительный CSS-класс контейнера списка.`,control:`text`},optionsMaxWidth:{description:`Максимальная ширина выпадающего списка в любом допустимом CSS-формате.`,control:`text`},size:{description:`Размер поля и подписей.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},placement:{description:`Позиционирование выпадающего списка.`,control:`select`,options:[`bottom-start`,`bottom-end`,`top-start`,`top-end`]},disabled:{description:`Блокирует взаимодействие с полем.`,control:`boolean`}}},p={name:`Объекты`,render:e=>{let[t,n]=(0,c.useState)(u[1]);return(0,l.jsx)(o,{...e,value:t,onChange:n})}},m={name:`Примитивы`,render:()=>{let[e,t]=(0,c.useState)(d[1]);return(0,l.jsx)(o,{label:`Статус`,description:`Пример использования низкоуровневого Select со строковыми значениями.`,placeholder:`Выберите статус`,options:d,value:e,onChange:t,getOptionKey:e=>e,getOptionLabel:e=>e,size:`md`})}},h={render:e=>{let[t,n]=(0,c.useState)(void 0);return(0,l.jsx)(o,{...e,value:t,onChange:n})}},g={name:`Группированные опции`,render:e=>{let[t,n]=(0,c.useState)();return(0,l.jsx)(o,{...e,value:t,onChange:n,getOptionGroup:e=>({key:e.direction,label:e.direction}),optionsMaxWidth:`40rem`})}},_={name:`Кастомный рендер`,render:e=>{let[t,n]=(0,c.useState)(u[0]);return(0,l.jsx)(o,{...e,value:t,onChange:n,renderValue:e=>`${e.code} · ${e.name}`,renderOption:(e,t)=>(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(`div`,{className:`flexEllipsis`,children:[(0,l.jsx)(`div`,{children:e.name}),(0,l.jsx)(`div`,{className:`fontSizeSm content2`,children:e.manager})]}),(0,l.jsx)(`div`,{style:{opacity:t.selected?1:.5},children:e.code})]})})}},v={args:{disabled:!0,value:u[0]}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  name: "Объекты",
+  render: args => {
+    const [value, setValue] = useState<DepartmentOption | undefined>(departmentOptions[1]);
+    return <Select {...args} value={value} onChange={setValue} />;
+  }
+}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  name: "Примитивы",
+  render: () => {
+    const [value, setValue] = useState<(typeof primitiveOptions)[number] | undefined>(primitiveOptions[1]);
+    return <Select label="Статус" description="Пример использования низкоуровневого Select со строковыми значениями." placeholder="Выберите статус" options={primitiveOptions} value={value} onChange={setValue} getOptionKey={option => option} getOptionLabel={option => option} size="md" />;
+  }
+}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<DepartmentOption | undefined>(undefined);
+    return <Select {...args} value={value} onChange={setValue} />;
+  }
+}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  name: "Группированные опции",
+  render: args => {
+    const [value, setValue] = useState<DepartmentOption | undefined>();
+    return <Select {...args} value={value} onChange={setValue} getOptionGroup={option => ({
+      key: option.direction,
+      label: option.direction
+    })} optionsMaxWidth="40rem" />;
+  }
+}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+  name: "Кастомный рендер",
+  render: args => {
+    const [value, setValue] = useState<DepartmentOption | undefined>(departmentOptions[0]);
+    return <Select {...args} value={value} onChange={setValue} renderValue={option => \`\${option.code} · \${option.name}\`} renderOption={(option, state) => <>
+                        <div className="flexEllipsis">
+                            <div>{option.name}</div>
+                            <div className="fontSizeSm content2">{option.manager}</div>
+                        </div>
+                        <div style={{
+        opacity: state.selected ? 1 : 0.5
+      }}>{option.code}</div>
+                    </>} />;
+  }
+}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true,
+    value: departmentOptions[0]
+  }
+}`,...v.parameters?.docs?.source}}},y=[`ControlledObjects`,`PrimitiveOptions`,`Placeholder`,`GroupedOptions`,`CustomOptionLayout`,`Disabled`]}));b();export{p as ControlledObjects,_ as CustomOptionLayout,v as Disabled,g as GroupedOptions,h as Placeholder,m as PrimitiveOptions,y as __namedExportsOrder,f as default,b as n,s as t};

package/storybook-static/assets/SelectOptionContent-CT7aD3ZF.js

@@ -0,0 +1 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-NOj5DEP4.js";import{a as n,i as r}from"./utils-C5_R17vJ.js";import{o as i,t as a}from"./text-CvgXrEkI.js";import{n as o,t as s}from"./ui.module-wFHXkJzp.js";function c({label:e,code:t,highlight:r}){return(0,l.jsxs)(`div`,{className:o.uiOptionBase,children:[(0,l.jsx)(`div`,{className:n(o.uiOptionText,`flexEllipsis`),children:(0,l.jsx)(i,{text:e,highlight:r})}),t&&(0,l.jsx)(`div`,{className:o.uiOptionCode,children:(0,l.jsx)(i,{text:t,highlight:r})})]})}var l,u=e((()=>{r(),a(),s(),l=t(),c.__docgenInfo={description:`Универсальный рендерер опции. Используется и в single-select, и в multi-select.`,methods:[],displayName:`SelectOptionContent`,props:{label:{required:!0,tsType:{name:`string`},description:``},code:{required:!1,tsType:{name:`string`},description:``},highlight:{required:!1,tsType:{name:`string`},description:``}}}}));export{u as n,c as t};

package/storybook-static/assets/SerializableSelect-B5-dIYx-.js

@@ -0,0 +1,4 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-NOj5DEP4.js";import{n,t as r}from"./Select-DbumJ08V.js";function i(e,t){return e[t]}function a(e,t,n){let r=e[t];if(typeof r==`string`||typeof r==`number`)return r;let a=i(e,n);return typeof a==`string`||typeof a==`number`?a:String(a)}function o({label:e,description:t,disabled:n,placeholder:o,size:c,options:l,value:u,onChange:d,optionKey:f,optionLabel:p,renderCode:m,className:h,clearable:g}){return(0,s.jsx)(r,{label:e,description:t,disabled:n,placeholder:o,size:c,options:l,value:u===void 0?void 0:l.find(e=>i(e,f)===u),onChange:e=>d(e?i(e,f):void 0),getOptionKey:e=>i(e,f),getOptionLabel:e=>a(e,p,f),getOptionCode:m?e=>i(e,f):void 0,className:h,clearable:g})}var s,c=e((()=>{n(),s=t(),o.__docgenInfo={description:``,methods:[],displayName:`SerializableSelect`,props:{options:{required:!0,tsType:{name:`unknown`},description:``},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: SerializableOptionValue<TOption, TOptionKey> | undefined) => void`,signature:{arguments:[{type:{name:`union`,raw:`SerializableOptionValue<TOption, TOptionKey> | undefined`,elements:[{name:`Extract`,elements:[{name:`TOption[TOptionKey]`,raw:`TOption[TOptionKey]`},{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]}],raw:`Extract<
+	TOption[TOptionKey],
+	SelectOptionKey
+>`},{name:`undefined`}]},name:`value`}],return:{name:`void`}}},description:``},optionKey:{required:!0,tsType:{name:`TOptionKey`},description:``},optionLabel:{required:!0,tsType:{name:`TOptionLabel`},description:``},renderCode:{required:!1,tsType:{name:`literal`,value:`true`},description:``},className:{required:!1,tsType:{name:`string`},description:``},clearable:{required:!1,tsType:{name:`boolean`},description:``}},composes:[`Omit`]}}));export{c as n,o as t};

package/storybook-static/assets/{SerializableSelect-BFMP4RoU.js → SerializableSelect-CEx1Oqn3.js}

@@ -1,12 +1,12 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{AsyncReloadLike as p,Controlled as m,Disabled as h,Placeholder as g,WithCode as _,n as v,t as y}from"./SerializableSelect.stories-Cwk9kf8V.js";function b(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(a,{of:y,parameters:{docs:{toc:!0}}}),`
-`,(0,S.jsx)(c,{children:`SerializableSelect`}),`
-`,(0,S.jsx)(i,{children:`Select для сериализуемых значений и конфигурационных сценариев с key/label описанием option`}),`
-`,(0,S.jsx)(o.p,{children:`SerializableSelect уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-NOj5DEP4.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-DBO0IAf-.js";import{t as f}from"./mdx-react-shim-BgV0cHDR.js";import{AsyncReloadLike as p,Controlled as m,Disabled as h,Placeholder as g,WithCode as _,n as v,t as y}from"./SerializableSelect.stories-C76GF_jT.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:`SerializableSelect`}),`
+`,(0,S.jsx)(a,{children:`Select для сериализуемых значений и конфигурационных сценариев с key/label описанием option`}),`
+`,(0,S.jsx)(t.p,{children:`SerializableSelect уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
 Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны контролируемые сценарии, заблокированные состояния.`}),`
-`,(0,S.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,S.jsx)(u,{}),`
-`,(0,S.jsx)(n,{of:m}),`
-`,(0,S.jsx)(o.pre,{children:(0,S.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
+`,(0,S.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,S.jsx)(d,{}),`
+`,(0,S.jsx)(r,{of:m}),`
+`,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
 
 import { SerializableSelect } from "@/shared/ui";
 
@@ -21,28 +21,28 @@ export function Example() {
 	return <SerializableSelect label="Статус" value={value} onChange={setValue} options={options} optionKey="key" optionLabel="label" />;
 }
 `})}),`
-`,(0,S.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
-`,(0,S.jsxs)(o.ul,{children:[`
-`,(0,S.jsx)(o.li,{children:`Если состояние должно жить во внешней форме или модели, ориентируйтесь на контролируемый режим из документации.`}),`
-`,(0,S.jsx)(o.li,{children:`Заблокированное состояние лучше проверять отдельно, чтобы убедиться, что визуально и поведенчески оно остается понятным.`}),`
+`,(0,S.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,S.jsxs)(t.ul,{children:[`
+`,(0,S.jsx)(t.li,{children:`Если состояние должно жить во внешней форме или модели, ориентируйтесь на контролируемый режим из документации.`}),`
+`,(0,S.jsx)(t.li,{children:`Заблокированное состояние лучше проверять отдельно, чтобы убедиться, что визуально и поведенчески оно остается понятным.`}),`
 `]}),`
-`,(0,S.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
-`,(0,S.jsx)(o.h3,{id:`компонент-работает-в-контролируемом-режиме-когда-состояние-хранится-во-внешнем-компоненте`,children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте`}),`
-`,(0,S.jsx)(o.p,{children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте.`}),`
-`,(0,S.jsx)(l,{of:m}),`
-`,(0,S.jsx)(o.h3,{id:`поведение-без-выбранного-значения`,children:`Поведение без выбранного значения`}),`
-`,(0,S.jsx)(o.p,{children:`Поведение без выбранного значения.`}),`
-`,(0,S.jsx)(l,{of:g}),`
-`,(0,S.jsx)(o.h3,{id:`with-code`,children:`With Code`}),`
-`,(0,S.jsxs)(o.p,{children:[`Сценарий демонстрирует вариант `,(0,S.jsx)(o.code,{children:`WithCode`}),` и помогает быстро сравнить его с остальными режимами компонента.`]}),`
-`,(0,S.jsx)(l,{of:_}),`
-`,(0,S.jsx)(o.h3,{id:`сценарий-близкий-к-асинхронной-перезагрузке-данных`,children:`Сценарий, близкий к асинхронной перезагрузке данных`}),`
-`,(0,S.jsx)(o.p,{children:`Сценарий, близкий к асинхронной перезагрузке данных.`}),`
-`,(0,S.jsx)(l,{of:p}),`
-`,(0,S.jsx)(o.h3,{id:`проверка-поведения-в-заблокированном-состоянии`,children:`Проверка поведения в заблокированном состоянии`}),`
-`,(0,S.jsx)(o.p,{children:`Проверка поведения в заблокированном состоянии.`}),`
-`,(0,S.jsx)(l,{of:h}),`
-`,(0,S.jsx)(o.h2,{id:`api`,children:`API`}),`
-`,(0,S.jsx)(s,{of:y}),`
-`,(0,S.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
-`,(0,S.jsx)(r,{includePrimary:!1})]})}function x(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,S.jsx)(n,{...e,children:(0,S.jsx)(b,{...e})}):b(e)}var S;e((()=>{S=d(),f(),o(),v()}))();export{x as default};
+`,(0,S.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,S.jsx)(t.h3,{id:`компонент-работает-в-контролируемом-режиме-когда-состояние-хранится-во-внешнем-компоненте`,children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте`}),`
+`,(0,S.jsx)(t.p,{children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте.`}),`
+`,(0,S.jsx)(u,{of:m}),`
+`,(0,S.jsx)(t.h3,{id:`поведение-без-выбранного-значения`,children:`Поведение без выбранного значения`}),`
+`,(0,S.jsx)(t.p,{children:`Поведение без выбранного значения.`}),`
+`,(0,S.jsx)(u,{of:g}),`
+`,(0,S.jsx)(t.h3,{id:`with-code`,children:`With Code`}),`
+`,(0,S.jsxs)(t.p,{children:[`Сценарий демонстрирует вариант `,(0,S.jsx)(t.code,{children:`WithCode`}),` и помогает быстро сравнить его с остальными режимами компонента.`]}),`
+`,(0,S.jsx)(u,{of:_}),`
+`,(0,S.jsx)(t.h3,{id:`сценарий-близкий-к-асинхронной-перезагрузке-данных`,children:`Сценарий, близкий к асинхронной перезагрузке данных`}),`
+`,(0,S.jsx)(t.p,{children:`Сценарий, близкий к асинхронной перезагрузке данных.`}),`
+`,(0,S.jsx)(u,{of:p}),`
+`,(0,S.jsx)(t.h3,{id:`проверка-поведения-в-заблокированном-состоянии`,children:`Проверка поведения в заблокированном состоянии`}),`
+`,(0,S.jsx)(t.p,{children:`Проверка поведения в заблокированном состоянии.`}),`
+`,(0,S.jsx)(u,{of:h}),`
+`,(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};

package/storybook-static/assets/SerializableSelect.stories-C76GF_jT.js

@@ -0,0 +1,43 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{pn as r,t as i}from"./iframe-NOj5DEP4.js";import{n as a,t as o}from"./SerializableSelect-B5-dIYx-.js";var s=e({AsyncReloadLike:()=>h,Controlled:()=>f,Disabled:()=>g,Placeholder:()=>p,WithCode:()=>m,__namedExportsOrder:()=>_,default:()=>d}),c,l,u,d,f,p,m,h,g,_,v=n((()=>{c=t(r(),1),a(),l=i(),u=[{id:10,name:`Продажи`,code:`SLS`,branch:`Екатеринбург`},{id:20,name:`Закупки`,code:`PRC`,branch:`Челябинск`},{id:30,name:`Логистика`,code:`LGS`,branch:`Новосибирск`},{id:40,name:`Сервис`,code:`SRV`,branch:`Москва`}],d={title:`Shared/UI/SerializableSelect`,component:o,args:{label:`Подразделение`,description:`Сериализуемая обёртка над Select для object-options и field-based конфигурации.`,placeholder:`Выберите подразделение`,options:u,optionKey:`id`,optionLabel:`name`,value:void 0,onChange:()=>{},size:`md`},parameters:{atomicCanvas:!0,layout:`padded`,docs:{description:{component:`Высокоуровневая обёртка над low-level Select. Принимает массив объектов, получает key и label по именам полей, а наружу возвращает только значение ключа. Нужна для сериализуемых конфигов, в том числе в src/shared/ui/controls/*.`}}},argTypes:{label:{description:`Заголовок поля.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Текст, когда ключ ещё не выбран.`,control:`text`},options:{description:`Массив объектных option.`,control:!1},optionKey:{description:`Поле объекта, значение которого используется как ключ и отдаётся наружу через onChange.`,control:!1},optionLabel:{description:`Поле объекта, значение которого отображается как основной текст option.`,control:!1},renderCode:{description:`Если включено, справа от текста будет показан ключ optionKey.`,control:`boolean`},value:{description:`Текущий выбранный ключ option, а не вся option целиком.`,control:!1},onChange:{description:`Вызывается с новым значением optionKey.`,control:!1},size:{description:`Размер поля и подписей.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},disabled:{description:`Блокирует взаимодействие с полем.`,control:`boolean`},className:{description:`Дополнительный CSS-класс корневого контейнера.`,control:`text`}}},f={name:`Выбор по ключу`,render:e=>{let[t,n]=(0,c.useState)(20);return(0,l.jsx)(o,{...e,value:t,onChange:n})}},p={render:e=>{let[t,n]=(0,c.useState)(void 0);return(0,l.jsx)(o,{...e,value:t,onChange:n})}},m={name:`С кодом`,render:e=>{let[t,n]=(0,c.useState)(10);return(0,l.jsx)(o,{...e,value:t,onChange:n,renderCode:!0})},args:{renderCode:!0}},h={name:`Смена набора опций`,render:e=>{let[t,n]=(0,c.useState)(30),[r,i]=(0,c.useState)(!1),a=(0,c.useMemo)(()=>r?u.filter(e=>e.id!==20):u,[r]);return(0,l.jsxs)(`div`,{style:{display:`grid`,gap:`12px`,maxWidth:`320px`},children:[(0,l.jsx)(`button`,{type:`button`,onClick:()=>i(e=>!e),children:r?`Показать полный список`:`Скрыть одну опцию`}),(0,l.jsx)(o,{...e,options:a,value:t,onChange:n})]})}},g={args:{disabled:!0,value:10}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  name: "Выбор по ключу",
+  render: args => {
+    const [value, setValue] = useState<number | undefined>(20);
+    return <SerializableSelect {...args} value={value} onChange={setValue} />;
+  }
+}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<number | undefined>(undefined);
+    return <SerializableSelect {...args} value={value} onChange={setValue} />;
+  }
+}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  name: "С кодом",
+  render: args => {
+    const [value, setValue] = useState<number | undefined>(10);
+    return <SerializableSelect {...args} value={value} onChange={setValue} renderCode />;
+  },
+  args: {
+    renderCode: true
+  }
+}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  name: "Смена набора опций",
+  render: args => {
+    const [value, setValue] = useState<number | undefined>(30);
+    const [showShortList, setShowShortList] = useState(false);
+    const options = useMemo(() => showShortList ? departmentOptions.filter(option => option.id !== 20) : departmentOptions, [showShortList]);
+    return <div style={{
+      display: "grid",
+      gap: "12px",
+      maxWidth: "320px"
+    }}>
+                <button type="button" onClick={() => setShowShortList(current => !current)}>
+                    {showShortList ? "Показать полный список" : "Скрыть одну опцию"}
+                </button>
+                <SerializableSelect {...args} options={options} value={value} onChange={setValue} />
+            </div>;
+  }
+}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true,
+    value: 10
+  }
+}`,...g.parameters?.docs?.source}}},_=[`Controlled`,`Placeholder`,`WithCode`,`AsyncReloadLike`,`Disabled`]}));v();export{h as AsyncReloadLike,f as Controlled,g as Disabled,p as Placeholder,m as WithCode,_ as __namedExportsOrder,d as default,v as n,s as t};

package/storybook-static/assets/SingleDateTimeInput-BXaQYdrE.js

@@ -0,0 +1,53 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-NOj5DEP4.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-DBO0IAf-.js";import{t as f}from"./mdx-react-shim-BgV0cHDR.js";import{Default as p,Empty as m,TimeOnly as h,WithLimits as g,WithRightPanel as _,n as v,t as y}from"./SingleDateTimeInput.stories-s-QOcqZY.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:`SingleDateTimeInput`}),`
+`,(0,S.jsx)(a,{children:`Строгий сегментный ввод даты-времени и времени с popover picker`}),`
+`,(0,S.jsxs)(t.p,{children:[(0,S.jsx)(t.code,{children:`SingleDateTimeInput`}),` объединяет два сценария:`]}),`
+`,(0,S.jsxs)(t.ul,{children:[`
+`,(0,S.jsxs)(t.li,{children:[`ручной ввод по фиксированной маске `,(0,S.jsx)(t.code,{children:`dd.MM.yyyy HH:mm`}),`;`]}),`
+`,(0,S.jsx)(t.li,{children:`выбор даты и времени через popover picker с wheel-прокруткой;`}),`
+`,(0,S.jsxs)(t.li,{children:[`выбор только времени по маске `,(0,S.jsx)(t.code,{children:`HH:mm`}),` с технической датой `,(0,S.jsx)(t.code,{children:`1970-01-01`}),`.`]}),`
+`]}),`
+`,(0,S.jsx)(t.p,{children:`Семантика компонента фиксирована и отличается от существующих компонентов так:`}),`
+`,(0,S.jsxs)(t.ul,{children:[`
+`,(0,S.jsxs)(t.li,{children:[`до: `,(0,S.jsx)(t.code,{children:`DateInput`}),` работал только с календарной датой и нормализовал значение к границам суток;`]}),`
+`,(0,S.jsxs)(t.li,{children:[`до: `,(0,S.jsx)(t.code,{children:`InputDateTime`}),` давал сегментный ввод, но без picker и без опоры на shared date-formatters;`]}),`
+`,(0,S.jsxs)(t.li,{children:[`после: `,(0,S.jsx)(t.code,{children:`SingleDateTimeInput`}),` хранит дату-время с точностью до минуты и использует строгий parse/format через общие date-formatters.`]}),`
+`]}),`
+`,(0,S.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,S.jsx)(d,{}),`
+`,(0,S.jsx)(r,{of:p}),`
+`,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { SingleDateTimeInput } from "@/shared/ui";
+
+export function Example() {
+	const [value, setValue] = useState<Date | null>(null);
+
+	return <SingleDateTimeInput label="Дата и время" value={value} onChange={setValue} />;
+}
+`})}),`
+`,(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:`onChange`}),` только для полной и валидной даты-времени.`]}),`
+`,(0,S.jsx)(t.li,{children:`Неполный или невалидный ручной ввод при потере фокуса откатывается к последнему committed значению.`}),`
+`,(0,S.jsxs)(t.li,{children:[`Полностью очищенные сегменты трактуются как `,(0,S.jsx)(t.code,{children:`null`}),`.`]}),`
+`,(0,S.jsxs)(t.li,{children:[`Ограничения `,(0,S.jsx)(t.code,{children:`minDate`}),` и `,(0,S.jsx)(t.code,{children:`maxDate`}),` применяются и к календарю, и к времени внутри того же дня.`]}),`
+`,(0,S.jsxs)(t.li,{children:[`В режиме `,(0,S.jsx)(t.code,{children:`mode="time"`}),` компонент возвращает `,(0,S.jsx)(t.code,{children:`Date`}),` на технической дате `,(0,S.jsx)(t.code,{children:`1970-01-01`}),`, а `,(0,S.jsx)(t.code,{children:`minDate`}),` и `,(0,S.jsx)(t.code,{children:`maxDate`}),` сравниваются только по `,(0,S.jsx)(t.code,{children:`HH:mm`}),`.`]}),`
+`,(0,S.jsx)(t.li,{children:`Wheel-панель блокирует прокрутку страницы во время взаимодействия и доводит выбранное значение в центр.`}),`
+`,(0,S.jsxs)(t.li,{children:[`Размещение панели времени управляется через `,(0,S.jsx)(t.code,{children:`timePanelPlacement="bottom" | "right"`}),`.`]}),`
+`]}),`
+`,(0,S.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(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:m}),`
+`,(0,S.jsx)(t.h3,{id:`ограниченный-диапазон`,children:`Ограниченный диапазон`}),`
+`,(0,S.jsx)(u,{of:g}),`
+`,(0,S.jsx)(t.h3,{id:`панель-времени-справа`,children:`Панель времени справа`}),`
+`,(0,S.jsx)(u,{of:_}),`
+`,(0,S.jsx)(t.h3,{id:`только-время`,children:`Только время`}),`
+`,(0,S.jsx)(u,{of:h}),`
+`,(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};

package/storybook-static/assets/SingleDateTimeInput.stories-s-QOcqZY.js

@@ -0,0 +1,78 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{jt as r,n as i,pn as a,t as o,tt as ee}from"./iframe-NOj5DEP4.js";import{a as s,i as c}from"./utils-C5_R17vJ.js";import{J as l,K as u,_ as d,b as te,t as f,z as p}from"./formatters-B2V6HAWH.js";import{i as m,t as h}from"./popover-C_RA1r_Q.js";import{n as g,t as _}from"./ui.module-wFHXkJzp.js";import{t as v}from"./Button-CqbxyL6u.js";import{i as y}from"./DateInput-CEdRCXUW.js";import{t as b}from"./button-DorJdQ5y.js";import{o as ne,r as re,u as ie}from"./Input-CtFBsQ8Z.js";import{t as ae}from"./input-BtunpXs_.js";import{t as oe}from"./ui-ep9HlY5u.js";import{a as x,i as se,n as S,r as C,t as w}from"./date-segments-CzU9k5bl.js";import{a as ce,c as le,d as ue,i as T,l as de,n as E,o as D,r as fe,s as O,t as pe,u as me}from"./TimePanel-BFMm_u5N.js";var k=n((()=>{D()}));function he(e){let t=[];return e.forEach((e,n)=>{e.kind===`editable`&&t.push(n)}),t}function ge({value:e,onChange:t,onClearError:n,disabled:r,minDate:i,maxDate:a,mode:o=`date-time`}){let ee=(0,A.useMemo)(()=>ce(o),[o]),s=(0,A.useMemo)(()=>se(ee),[ee]),c=(0,A.useMemo)(()=>he(s),[s]),l=(0,A.useMemo)(()=>S(e??null,s),[s,e]),[u,d]=(0,A.useState)(null),te=e?.getTime()??null,f=(0,A.useEffectEvent)(e=>d(e));(0,A.useEffect)(()=>{f(null)},[te,o]);let p=u??l,m=(0,A.useRef)(new Map),h=(0,A.useRef)(0),g=(0,A.useCallback)(n=>{if(w(s,n))return t(null),null;let r=x(s,n,{defaultDate:o===`time`?me(e,`time`)??T():void 0});return!r||!O(r,i,a,o)?null:(t(r),r)},[a,i,o,t,s,e]),_=(0,A.useCallback)((e,t=!0)=>{let n=m.current.get(e);n&&(n.focus(),t&&requestAnimationFrame(()=>n.select()))},[]),v=(0,A.useCallback)(e=>{let t=c.indexOf(e);return t<c.length-1?c[t+1]:null},[c]),y=(0,A.useCallback)(e=>{let t=c.indexOf(e);return t>0?c[t-1]:null},[c]),b=(0,A.useCallback)((e,t)=>e.padStart(t.length,`0`),[]);return{segments:s,segmentValues:p,registerRef:(0,A.useCallback)(e=>t=>{if(t){m.current.set(e,t);return}m.current.delete(e)},[]),handleInput:(0,A.useCallback)(e=>t=>{if(r)return;let i=s[e];if(i.kind!==`editable`)return;let a=t.target.value.replace(/\D/g,``).slice(0,i.length),o=new Map(p);if(o.set(e,a),d(o),n?.(),a.length===i.length){let t=v(e);t!==null&&requestAnimationFrame(()=>_(t))}g(o)},[r,_,v,n,p,s,g]),handleKeyDown:(0,A.useCallback)(e=>t=>{if(r)return;let n=s[e];if(n.kind!==`editable`)return;let i=p.get(e)??``,a=t.currentTarget;switch(t.key){case`ArrowRight`:if(a.selectionStart===i.length||i===``){t.preventDefault();let n=v(e);n!==null&&_(n)}break;case`ArrowLeft`:if(a.selectionStart===0||i===``){t.preventDefault();let n=y(e);n!==null&&_(n)}break;case`ArrowUp`:{t.preventDefault();let r=i===``?n.min:Number.parseInt(i,10)+1;r>n.max&&(r=n.min);let o=new Map(p);o.set(e,b(String(r),n)),d(o),g(o),requestAnimationFrame(()=>a.select());break}case`ArrowDown`:{t.preventDefault();let r=i===``?n.max:Number.parseInt(i,10)-1;r<n.min&&(r=n.max);let o=new Map(p);o.set(e,b(String(r),n)),d(o),g(o),requestAnimationFrame(()=>a.select());break}case`Backspace`:if(i===``){t.preventDefault();let n=y(e);n!==null&&_(n)}break;case`Delete`:{t.preventDefault();let n=new Map(p);n.set(e,``),d(n),g(n);break}}},[r,_,v,y,b,p,s,g]),handleFocus:(0,A.useCallback)(()=>e=>{e.target.select()},[]),handleContainerFocus:(0,A.useCallback)(()=>{clearTimeout(h.current)},[]),handleContainerBlur:(0,A.useCallback)(()=>{let n=new Map(p);h.current=window.setTimeout(()=>{if(w(s,n)){t(null),d(n);return}let r=x(s,n,{defaultDate:o===`time`?me(e,`time`)??T():void 0});if(!r||!O(r,i,a,o)){d(null);return}d(n)},0)},[a,i,o,t,p,s,e]),focusFirstEmpty:(0,A.useCallback)(()=>{let e=c.find(e=>!(p.get(e)??``))??c[c.length-1];e!==void 0&&_(e)},[c,_,p])}}var A,_e=n((()=>{A=t(a(),1),C(),k()})),ve=n((()=>{_e()})),j,M,N,P,F,I,L,R,z,B,V,H,ye=n((()=>{j=`AvG-mf`,M=`ig7KtT`,N=`RTruv0`,P=`YQHPZa`,F=`-RZe-i`,I=`Ox0SRE`,L=`gfaRup`,R=`_59kEea`,z=`Jjdu1Q`,B=`Q8Y2xS`,V=`XxZYTW`,H={segmentInput:j,separator:M,calendarButton:N,popoverContent:P,bottom:F,right:I,calendarPane:L,timePanelPane:R,timeOnlyPopoverContent:z,timePanelPaneBottom:B,timePanelPaneRight:V}}));function U({value:e,onChange:t,label:n,description:i,placeholder:a,disabled:o,size:c,error:l,onClearError:u,minDate:f,maxDate:p,timePanelPlacement:h=`right`,mode:_=`date-time`}){let b=me(e,_),ae=b?.getTime()??null,oe=(0,W.useMemo)(()=>d(new Date),[]),[x,se]=(0,W.useState)(!1),[S,C]=(0,W.useState)(b??null),[w,ce]=(0,W.useState)(`day`),[T,E]=(0,W.useState)(()=>ue(b,oe,_)),{controlId:D,labelId:k,descriptionId:he,errorId:A,describedBy:_e}=ie({hasLabel:n!=null,hasDescription:!!i,hasError:!!l}),ve=(0,W.useEffectEvent)(e=>C(e)),j=(0,W.useEffectEvent)(e=>E(e));(0,W.useEffect)(()=>{x||ve(b??null),b&&j(b)},[b,ae,x]),(0,W.useEffect)(()=>{b&&j(b)},[b,ae]);let{segments:M,segmentValues:N,registerRef:P,handleInput:F,handleKeyDown:I,handleFocus:L,handleContainerFocus:R,handleContainerBlur:z,focusFirstEmpty:B}=ge({value:b,onChange:t,onClearError:u,disabled:o,minDate:f,maxDate:p,mode:_}),V=e=>{if(_===`time`||te(e)||o)return;let t=le(e,S??b??T),{hours:n,minutes:r}=fe(e,t.getHours(),t.getMinutes(),f,p,_),i=de(e,n,r);O(i,f,p,_)&&(u?.(),C(i),E(i))},ye=(e,t)=>{if(o)return;let n=S??b??T,r=fe(n,e,t,f,p,_),i=de(n,r.hours,r.minutes,_);O(i,f,p,_)&&(u?.(),C(i),E(i))},U=e=>{e&&(C(b??null),E(ue(b,oe,_))),se(e)},be=()=>{(b?.getTime()??null)!==(S?.getTime()??null)&&t(S)},xe=h===`right`?H.timePanelPaneRight:H.timePanelPaneBottom,K=_===`time`?`Открыть выбор времени`:`Открыть календарь даты и времени`,q=a??(_===`time`?`чч:мм`:`дд.мм.гггг чч:мм`),J=S??b??T;return(0,G.jsxs)(m,{open:x,onOpenChange:U,children:[(0,G.jsx)(ne,{label:n,description:i,disabled:o,size:c,error:l,controlId:D,labelId:k,descriptionId:he,errorId:A,children:(0,G.jsx)(re,{endAdornmentWidth:`var(--control-height)`,endAdornment:(0,G.jsx)(m.Trigger,{children:(0,G.jsx)(v,{variant:`transparent`,disabled:o,className:H.calendarButton,icon:_===`time`?(0,G.jsx)(ee,{}):(0,G.jsx)(r,{}),"aria-label":K})}),children:({controlClassName:e})=>(0,G.jsx)(`div`,{id:D,className:s(g.uiInputControlFake,e),"data-disabled":o||void 0,"data-invalid":l?``:void 0,role:`group`,"aria-invalid":!!l||void 0,"aria-placeholder":q,"aria-labelledby":k,"aria-describedby":_e,onFocus:R,onBlur:z,onClick:e=>{e.target===e.currentTarget&&B()},children:M.map((e,t)=>e.kind===`literal`?(0,G.jsx)(`span`,{className:H.separator,"data-disabled":o||void 0,children:e.text},t):(0,G.jsx)(`input`,{ref:P(t),type:`text`,inputMode:`numeric`,className:H.segmentInput,style:{width:`${e.length+.5}ch`},value:N.get(t)??``,placeholder:e.placeholder,maxLength:e.length,disabled:o,"aria-label":e.ariaLabel,autoComplete:`off`,onChange:F(t),onKeyDown:I(t),onFocus:L()},t))})})}),(0,G.jsx)(m.Content,{background:`primary`,onClose:be,children:_===`time`?(0,G.jsx)(`div`,{className:H.timeOnlyPopoverContent,children:(0,G.jsx)(pe,{value:J,disabled:o,minDate:f,maxDate:p,mode:_,onChange:ye})}):(0,G.jsxs)(`div`,{className:s(H.popoverContent,H[h]),children:[(0,G.jsx)(`div`,{className:H.calendarPane,children:(0,G.jsx)(y,{view:w,datePickerLevel:`day`,selectionMode:`day`,onViewChange:ce,value:J,onChange:V,minDate:f,maxDate:p,currentDate:T,onCurrentDateChange:E})}),(0,G.jsx)(`div`,{className:s(H.timePanelPane,xe),children:(0,G.jsx)(pe,{value:J,disabled:o,minDate:f,maxDate:p,mode:_,onChange:ye})})]})})]})}var W,G,be=n((()=>{W=t(a(),1),f(),c(),i(),b(),oe(),ae(),h(),_(),k(),ve(),ye(),E(),G=o(),U.__docgenInfo={description:`Поле выбора даты-времени со строгой сегментной маской и popover-пикером.`,methods:[],displayName:`SingleDateTimeInput`,props:{error:{required:!1,tsType:{name:`string`},description:``},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},minDate:{required:!1,tsType:{name:`Date`},description:``},maxDate:{required:!1,tsType:{name:`Date`},description:``},timePanelPlacement:{required:!1,tsType:{name:`union`,raw:`"bottom" | "right"`,elements:[{name:`literal`,value:`"bottom"`},{name:`literal`,value:`"right"`}]},description:``,defaultValue:{value:`"right"`,computed:!1}},mode:{required:!1,tsType:{name:`union`,raw:`"date-time" | "time"`,elements:[{name:`literal`,value:`"date-time"`},{name:`literal`,value:`"time"`}]},description:``,defaultValue:{value:`"date-time"`,computed:!1}},label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``},value:{required:!0,tsType:{name:`V`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``}}}})),xe=e({Default:()=>Y,Empty:()=>Z,TimeOnly:()=>X,WithLimits:()=>Q,WithRightPanel:()=>$,__namedExportsOrder:()=>Se,default:()=>J}),K,q,J,Y,X,Z,Q,$,Se,Ce=n((()=>{K=t(a(),1),f(),be(),q=o(),J={title:`Shared/UI/SingleDateTimeInput`,component:U,args:{value:null,onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок поля даты и времени.`,control:`text`},description:{description:`Описание под заголовком поля.`,control:`text`},placeholder:{description:`Текстовая подсказка для сегментного ввода.`,control:`text`},value:{description:"Текущее значение в виде `Date | null`.",control:!1},onChange:{description:`Вызывается при вводе или выборе валидной даты-времени.`,control:!1},minDate:{description:`Минимально допустимая дата-время.`,control:`date`},maxDate:{description:`Максимально допустимая дата-время.`,control:`date`},error:{description:`Текст внешней ошибки под полем.`,control:`text`},onClearError:{description:`Сбрасывает внешнюю ошибку при ручном вводе и выборе в picker.`,control:!1},size:{description:`Размер поля и подписи.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},disabled:{description:`Блокирует сегментный ввод и popover picker.`,control:`boolean`},timePanelPlacement:{description:`Размещение панели выбора времени относительно календаря.`,control:`inline-radio`,options:[`bottom`,`right`]},mode:{description:`Режим работы поля: дата-время или только время.`,control:`inline-radio`,options:[`date-time`,`time`]}}},Y={render:e=>{let[t,n]=(0,K.useState)(e.value??new Date(2026,2,5,9,15,0,0));return(0,q.jsxs)(`div`,{children:[(0,q.jsx)(U,{...e,value:t,onChange:n}),(0,q.jsxs)(`p`,{children:[`Вывод значения через `,(0,q.jsx)(`code`,{className:`statusInfo`,children:`formatDateAsDateTime(value)`}),`:`]}),(0,q.jsx)(`pre`,{children:l(t)}),(0,q.jsxs)(`p`,{children:[`Вывод значения через `,(0,q.jsx)(`code`,{className:`statusInfo`,children:`formatDateAsODataDatetime(value)`}),`:`]}),(0,q.jsx)(`pre`,{children:p(t)})]})},args:{label:`Дата и время`,description:`Фиксированный формат: дд.мм.гггг чч:мм`,placeholder:`дд.мм.гггг чч:мм`,timePanelPlacement:`bottom`}},X={render:e=>{let[t,n]=(0,K.useState)(new Date(1970,0,1,9,15,0,0));return(0,q.jsxs)(`div`,{children:[(0,q.jsx)(U,{...e,value:t,onChange:n}),(0,q.jsxs)(`p`,{children:[`Вывод значения через `,(0,q.jsx)(`code`,{className:`statusInfo`,children:`formatDateAsTime(value)`}),`:`]}),(0,q.jsx)(`pre`,{children:u(t)}),(0,q.jsx)(`p`,{children:`Техническая дата значения всегда фиксируется как 01.01.1970.`}),(0,q.jsx)(`pre`,{children:t?t.toISOString():``})]})},args:{label:`Время`,description:`Режим только времени с маской чч:мм и wheel-picker без календаря.`,placeholder:`чч:мм`,mode:`time`,minDate:new Date(2026,2,10,9,15,0,0),maxDate:new Date(2026,2,10,18,30,0,0)}},Z={render:e=>{let[t,n]=(0,K.useState)(null);return(0,q.jsx)(U,{...e,value:t,onChange:n})},args:{label:`Пустое значение`,description:`Поле можно заполнить вручную или через popover picker.`,placeholder:`дд.мм.гггг чч:мм`,timePanelPlacement:`bottom`}},Q={render:e=>{let[t,n]=(0,K.useState)(new Date(2026,2,10,12,30,0,0));return(0,q.jsx)(U,{...e,value:t,onChange:n})},args:{label:`Дата отгрузки`,description:`Доступен только интервал с 10 по 12 марта 2026 года.`,minDate:new Date(2026,2,10,9,0,0,0),maxDate:new Date(2026,2,12,18,30,0,0),timePanelPlacement:`bottom`}},$={render:e=>{let[t,n]=(0,K.useState)(new Date(2026,2,10,12,30,0,0));return(0,q.jsx)(U,{...e,value:t,onChange:n})},args:{label:`Дата и время`,description:`Wheel-панель времени расположена справа от календаря.`,timePanelPlacement:`right`}},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<Date | null>(args.value ?? new Date(2026, 2, 5, 9, 15, 0, 0));
+    return <div>
+                <SingleDateTimeInput {...args} value={value} onChange={setValue} />
+
+                <p>
+                    Вывод значения через <code className="statusInfo">formatDateAsDateTime(value)</code>:
+                </p>
+                <pre>{formatDateAsDateTime(value)}</pre>
+                <p>
+                    Вывод значения через <code className="statusInfo">formatDateAsODataDatetime(value)</code>:
+                </p>
+                <pre>{formatDateAsODataDatetime(value)}</pre>
+            </div>;
+  },
+  args: {
+    label: "Дата и время",
+    description: "Фиксированный формат: дд.мм.гггг чч:мм",
+    placeholder: "дд.мм.гггг чч:мм",
+    timePanelPlacement: "bottom"
+  }
+}`,...Y.parameters?.docs?.source},description:{story:`Демонстрирует основной сценарий выбора даты и времени с точностью до минуты.`,...Y.parameters?.docs?.description}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<Date | null>(new Date(1970, 0, 1, 9, 15, 0, 0));
+    return <div>
+                <SingleDateTimeInput {...args} value={value} onChange={setValue} />
+
+                <p>
+                    Вывод значения через <code className="statusInfo">formatDateAsTime(value)</code>:
+                </p>
+                <pre>{formatDateAsTime(value)}</pre>
+                <p>Техническая дата значения всегда фиксируется как 01.01.1970.</p>
+                <pre>{value ? value.toISOString() : ""}</pre>
+            </div>;
+  },
+  args: {
+    label: "Время",
+    description: "Режим только времени с маской чч:мм и wheel-picker без календаря.",
+    placeholder: "чч:мм",
+    mode: "time",
+    minDate: new Date(2026, 2, 10, 9, 15, 0, 0),
+    maxDate: new Date(2026, 2, 10, 18, 30, 0, 0)
+  }
+}`,...X.parameters?.docs?.source},description:{story:"Демонстрирует режим выбора только времени на технической дате `1970-01-01`.",...X.parameters?.docs?.description}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<Date | null>(null);
+    return <SingleDateTimeInput {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    label: "Пустое значение",
+    description: "Поле можно заполнить вручную или через popover picker.",
+    placeholder: "дд.мм.гггг чч:мм",
+    timePanelPlacement: "bottom"
+  }
+}`,...Z.parameters?.docs?.source},description:{story:`Показывает пустое контролируемое значение.`,...Z.parameters?.docs?.description}}},Q.parameters={...Q.parameters,docs:{...Q.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<Date | null>(new Date(2026, 2, 10, 12, 30, 0, 0));
+    return <SingleDateTimeInput {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    label: "Дата отгрузки",
+    description: "Доступен только интервал с 10 по 12 марта 2026 года.",
+    minDate: new Date(2026, 2, 10, 9, 0, 0, 0),
+    maxDate: new Date(2026, 2, 12, 18, 30, 0, 0),
+    timePanelPlacement: "bottom"
+  }
+}`,...Q.parameters?.docs?.source},description:{story:`Демонстрирует ограничение диапазона и синхронизацию календаря со временем.`,...Q.parameters?.docs?.description}}},$.parameters={...$.parameters,docs:{...$.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<Date | null>(new Date(2026, 2, 10, 12, 30, 0, 0));
+    return <SingleDateTimeInput {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    label: "Дата и время",
+    description: "Wheel-панель времени расположена справа от календаря.",
+    timePanelPlacement: "right"
+  }
+}`,...$.parameters?.docs?.source},description:{story:`Демонстрирует размещение wheel-панели справа от календаря.`,...$.parameters?.docs?.description}}},Se=[`Default`,`TimeOnly`,`Empty`,`WithLimits`,`WithRightPanel`]}));Ce();export{Y as Default,Z as Empty,X as TimeOnly,Q as WithLimits,$ as WithRightPanel,Se as __namedExportsOrder,J as default,Ce as n,xe as t};

package/storybook-static/assets/Slider-CJI8uj6D.js

@@ -0,0 +1,63 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-NOj5DEP4.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-DBO0IAf-.js";import{t as f}from"./mdx-react-shim-BgV0cHDR.js";import{Disabled as p,MonthsIndexMarks as m,RangeMonthToDaysOutput as h,RangeOpenMonthToDaysOutput as g,RangeOpenWithoutExplicitMiddleOutput as _,RangePlain as v,SingleStep as y,SingleWithMarks as b,n as x,t as S}from"./Slider.stories-XznJbVtO.js";function C(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(o,{of:S,parameters:{docs:{toc:!0}}}),`
+`,(0,T.jsx)(l,{children:`Slider`}),`
+`,(0,T.jsx)(a,{children:`Компактные single и range слайдеры с marks, tooltip и открытыми границами`}),`
+`,(0,T.jsxs)(t.p,{children:[(0,T.jsx)(t.code,{children:`Slider`}),` и `,(0,T.jsx)(t.code,{children:`SliderRange`}),` — отдельные публичные компоненты. Оба используют общую числовую шкалу, но не смешивают single/range через prop.`]}),`
+`,(0,T.jsxs)(t.ul,{children:[`
+`,(0,T.jsxs)(t.li,{children:[(0,T.jsx)(t.code,{children:`Slider`}),` возвращает одно finite-число;`]}),`
+`,(0,T.jsxs)(t.li,{children:[(0,T.jsx)(t.code,{children:`SliderRange`}),` возвращает `,(0,T.jsx)(t.code,{children:`[number | null, number | null]`}),`;`]}),`
+`,(0,T.jsxs)(t.li,{children:[(0,T.jsx)(t.code,{children:`null`}),` в range означает открытую границу;`]}),`
+`,(0,T.jsxs)(t.li,{children:[(0,T.jsx)(t.code,{children:`marks`}),` всегда задают snap-домен;`]}),`
+`,(0,T.jsxs)(t.li,{children:[(0,T.jsx)(t.code,{children:`marksPosition="index"`}),` размещает marks с равным визуальным шагом.`]}),`
+`]}),`
+`,(0,T.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,T.jsx)(d,{}),`
+`,(0,T.jsx)(r,{of:y}),`
+`,(0,T.jsx)(t.pre,{children:(0,T.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { Slider } from "@/shared/ui";
+
+export function Example() {
+	const [value, setValue] = useState<number | undefined>(35);
+
+	return <Slider label="Громкость" min={0} max={100} step={5} value={value} onChange={setValue} />;
+}
+`})}),`
+`,(0,T.jsx)(t.h2,{id:`range-с-открытой-границей`,children:`Range с открытой границей`}),`
+`,(0,T.jsx)(t.pre,{children:(0,T.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { SliderRange, type SliderRangeValue } from "@/shared/ui";
+
+const marks = [
+	{ value: 0, label: "До 3 мес.", outputValue: null },
+	{ value: 3, label: "3 мес." },
+	{ value: 6, label: "6 мес." },
+	{ value: 24, label: "От 24 мес.", outputValue: null }
+] as const;
+
+export function Example() {
+	const [value, setValue] = useState<SliderRangeValue | undefined>([null, 6]);
+
+	return <SliderRange label="Период" min={0} max={24} marks={marks} marksPosition="index" value={value} onChange={setValue} />;
+}
+`})}),`
+`,(0,T.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,T.jsx)(t.h3,{id:`single-со-step`,children:`Single со step`}),`
+`,(0,T.jsx)(u,{of:y}),`
+`,(0,T.jsx)(t.h3,{id:`single-с-compact-marks`,children:`Single с compact marks`}),`
+`,(0,T.jsx)(u,{of:b}),`
+`,(0,T.jsx)(t.h3,{id:`равные-расстояния-между-неравномерными-значениями`,children:`Равные расстояния между неравномерными значениями`}),`
+`,(0,T.jsx)(u,{of:m}),`
+`,(0,T.jsx)(t.h3,{id:`range-без-outputvalue`,children:`Range без outputValue`}),`
+`,(0,T.jsx)(u,{of:v}),`
+`,(0,T.jsx)(t.h3,{id:`range-с-открытыми-границами-без-outputvalue-у-обычных-marks`,children:`Range с открытыми границами без outputValue у обычных marks`}),`
+`,(0,T.jsx)(u,{of:_}),`
+`,(0,T.jsx)(t.h3,{id:`range-с-outputvalue-месяцы-на-шкале-дни-в-фильтре`,children:`Range с outputValue: месяцы на шкале, дни в фильтре`}),`
+`,(0,T.jsx)(u,{of:h}),`
+`,(0,T.jsx)(t.h3,{id:`range-с-outputvalue-и-открытыми-границами`,children:`Range с outputValue и открытыми границами`}),`
+`,(0,T.jsx)(u,{of:g}),`
+`,(0,T.jsx)(t.h3,{id:`disabled`,children:`Disabled`}),`
+`,(0,T.jsx)(u,{of:p}),`
+`,(0,T.jsx)(t.h2,{id:`api`,children:`API`}),`
+`,(0,T.jsx)(c,{of:S}),`
+`,(0,T.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,T.jsx)(i,{includePrimary:!1})]})}function w(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,T.jsx)(t,{...e,children:(0,T.jsx)(C,{...e})}):C(e)}var T;e((()=>{T=t(),f(),s(),x()}))();export{w as default};

package/storybook-static/assets/Slider.stories-XznJbVtO.js

@@ -0,0 +1,77 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{pn as r,t as i}from"./iframe-NOj5DEP4.js";import{a,o,t as s}from"./slider-B5mloux6.js";var c=e({Disabled:()=>D,MonthsIndexMarks:()=>S,RangeMonthToDaysOutput:()=>T,RangeOpenMonthToDaysOutput:()=>E,RangeOpenWithoutExplicitMiddleOutput:()=>w,RangePlain:()=>C,SingleStep:()=>b,SingleWithMarks:()=>x,__namedExportsOrder:()=>O,default:()=>y});function l(e,t){return e===null?`null`:`${e}${t}`}function u(e,t,n=``){let[r,i]=e??[null,null],a=[];return r!==null&&a.push(`${t} >= ${r}${n}`),i!==null&&a.push(`${t} <= ${i}${n}`),a.length>0?a.join(` AND `):`Фильтр не ограничивает значение`}function d({value:e,field:t,unit:n=``,children:r}){let[i,a]=e??[null,null];return(0,p.jsxs)(`div`,{className:`marginTopMd`,children:[(0,p.jsx)(`div`,{className:`textSm сontent2`,children:`Preview фильтра`}),(0,p.jsx)(`pre`,{children:JSON.stringify({value:[i,a],human:`${l(i,n)} — ${l(a,n)}`,filter:u(e,t,n)},null,2)}),r]})}var f,p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k=n((()=>{f=t(r(),1),s(),p=i(),m=[{value:0,label:`0`},{value:25,label:`25`},{value:50,label:`50`},{value:75,label:`75`},{value:100,label:`100`}],h=[{value:1,label:`1 мес.`},{value:3,label:`3 мес.`},{value:6,label:`6 мес.`},{value:9,label:`9 мес.`},{value:12,label:`12 мес.`},{value:18,label:`18 мес.`},{value:24,label:`24 мес.`}],g=[{value:0,label:`Без нижней границы`,outputValue:null},{value:1,label:`1 мес.`},{value:3,label:`3 мес.`},{value:6,label:`6 мес.`},{value:12,label:`12 мес.`},{value:24,label:`24 мес.`},{value:25,label:`Без верхней границы`,outputValue:null}],_=[{value:1,label:`1 мес.`,outputValue:30},{value:3,label:`3 мес.`,outputValue:90},{value:6,label:`6 мес.`,outputValue:180},{value:12,label:`12 мес.`,outputValue:360},{value:24,label:`24 мес.`,outputValue:720}],v=[{value:0,label:`Без нижней границы`,outputValue:null},{value:1,label:`1 мес.`,outputValue:30},{value:3,label:`3 мес.`,outputValue:90},{value:6,label:`6 мес.`,outputValue:180},{value:12,label:`12 мес.`,outputValue:360},{value:24,label:`24 мес.`,outputValue:720},{value:25,label:`Без верхней границы`,outputValue:null}],y={title:`Shared/UI/Slider`,component:a,args:{value:30,onChange:()=>{},min:0,max:100,step:5},parameters:{atomicCanvas:!0,layout:`padded`}},b={render:e=>{let t=e,[n,r]=(0,f.useState)(e.value);return(0,p.jsx)(a,{...t,label:`Громкость`,value:n,onChange:r})},args:{description:`Компактный single-value слайдер со step=5.`,value:35,step:5}},x={render:e=>{let t=e,[n,r]=(0,f.useState)(50);return(0,p.jsx)(a,{...t,label:`Процент выполнения`,value:n,onChange:r})},args:{description:`Marks активны, кликабельны и показывают подписи через tooltip.`,value:50,marks:m}},S={render:e=>{let t=e,[n,r]=(0,f.useState)(6);return(0,p.jsx)(a,{...t,label:`Срок`,value:n,onChange:r})},args:{min:1,max:24,value:6,marks:h,marksPosition:`index`,description:`Неравномерные значения месяцев расположены с равным визуальным шагом.`}},C={render:()=>{let[e,t]=(0,f.useState)([25,75]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(o,{label:`Процент выполнения`,description:"Обычный range: `value` mark является и координатой шкалы, и значением фильтра.",min:0,max:100,marks:m,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`progress`,unit:`%`})]})}},w={render:()=>{let[e,t]=(0,f.useState)([null,12]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(o,{label:`Срок в месяцах`,description:"Открытые границы задаются только крайними `outputValue:null`; у обычных marks outputValue не указан и берётся `value`.",min:0,max:25,marks:g,marksPosition:`index`,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`months`,unit:` мес.`})]})}},T={render:()=>{let[e,t]=(0,f.useState)([90,360]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(o,{label:`Срок: месяцы на шкале, дни в фильтре`,description:"`value` хранит координату/месяцы, `outputValue` отдаёт наружу дни.",min:1,max:24,marks:_,marksPosition:`index`,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`days`,unit:` дн.`})]})}},E={render:()=>{let[e,t]=(0,f.useState)([null,720]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(o,{label:`Срок: открытые границы и дни в фильтре`,description:"Крайние marks отдают null, обычные marks отдают дни через `outputValue`.",min:0,max:25,marks:v,marksPosition:`index`,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`days`,unit:` дн.`})]})}},D={args:{label:`Недоступно`,description:`Состояние без интеракций.`,value:40,disabled:!0,marks:m}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const sliderArgs = args as SliderProps;
+    const [value, setValue] = useState<number | undefined>(args.value as number | undefined);
+    return <Slider {...sliderArgs} label="Громкость" value={value} onChange={setValue} />;
+  },
+  args: {
+    description: "Компактный single-value слайдер со step=5.",
+    value: 35,
+    step: 5
+  }
+}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const sliderArgs = args as SliderProps;
+    const [value, setValue] = useState<number | undefined>(50);
+    return <Slider {...sliderArgs} label="Процент выполнения" value={value} onChange={setValue} />;
+  },
+  args: {
+    description: "Marks активны, кликабельны и показывают подписи через tooltip.",
+    value: 50,
+    marks: percentMarks
+  }
+}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const sliderArgs = args as SliderProps;
+    const [value, setValue] = useState<number | undefined>(6);
+    return <Slider {...sliderArgs} label="Срок" value={value} onChange={setValue} />;
+  },
+  args: {
+    min: 1,
+    max: 24,
+    value: 6,
+    marks: monthMarks,
+    marksPosition: "index",
+    description: "Неравномерные значения месяцев расположены с равным визуальным шагом."
+  }
+}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<SliderRangeValue | undefined>([25, 75]);
+    return <>
+                <SliderRange label="Процент выполнения" description="Обычный range: \`value\` mark является и координатой шкалы, и значением фильтра." min={0} max={100} marks={percentMarks} value={value} onChange={setValue} />
+                <RangePreview value={value} field="progress" unit="%" />
+            </>;
+  }
+}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<SliderRangeValue | undefined>([null, 12]);
+    return <>
+                <SliderRange label="Срок в месяцах" description="Открытые границы задаются только крайними \`outputValue:null\`; у обычных marks outputValue не указан и берётся \`value\`." min={0} max={25} marks={openMonthMarks} marksPosition="index" value={value} onChange={setValue} />
+                <RangePreview value={value} field="months" unit=" мес." />
+            </>;
+  }
+}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<SliderRangeValue | undefined>([90, 360]);
+    return <>
+                <SliderRange label="Срок: месяцы на шкале, дни в фильтре" description="\`value\` хранит координату/месяцы, \`outputValue\` отдаёт наружу дни." min={1} max={24} marks={monthToDayMarks} marksPosition="index" value={value} onChange={setValue} />
+                <RangePreview value={value} field="days" unit=" дн." />
+            </>;
+  }
+}`,...T.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<SliderRangeValue | undefined>([null, 720]);
+    return <>
+                <SliderRange label="Срок: открытые границы и дни в фильтре" description="Крайние marks отдают null, обычные marks отдают дни через \`outputValue\`." min={0} max={25} marks={openMonthToDayMarks} marksPosition="index" value={value} onChange={setValue} />
+                <RangePreview value={value} field="days" unit=" дн." />
+            </>;
+  }
+}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: "Недоступно",
+    description: "Состояние без интеракций.",
+    value: 40,
+    disabled: true,
+    marks: percentMarks
+  }
+}`,...D.parameters?.docs?.source}}},O=[`SingleStep`,`SingleWithMarks`,`MonthsIndexMarks`,`RangePlain`,`RangeOpenWithoutExplicitMiddleOutput`,`RangeMonthToDaysOutput`,`RangeOpenMonthToDaysOutput`,`Disabled`]}));k();export{D as Disabled,S as MonthsIndexMarks,T as RangeMonthToDaysOutput,E as RangeOpenMonthToDaysOutput,w as RangeOpenWithoutExplicitMiddleOutput,C as RangePlain,b as SingleStep,x as SingleWithMarks,O as __namedExportsOrder,y as default,k as n,c as t};

package/storybook-static/assets/SliderInput-CRdXiEUu.js

@@ -0,0 +1,58 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-NOj5DEP4.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-DBO0IAf-.js";import{t as f}from"./mdx-react-shim-BgV0cHDR.js";import{Basic as p,DecimalManualInput as m,Disabled as h,MarksSnap as g,RangeInputMonthToDaysOutput as _,RangeInputOpenMonthToDaysOutput as v,RangeInputOpenWithoutExplicitMiddleOutput as y,RangeInputPlain as b,RangeInputReadonlyText as x,n as S,t as C}from"./SliderInput.stories-BK5zJTQY.js";function w(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(o,{of:C,parameters:{docs:{toc:!0}}}),`
+`,(0,E.jsx)(l,{children:`SliderInput`}),`
+`,(0,E.jsx)(a,{children:`Поля ввода для single и range с popover slider`}),`
+`,(0,E.jsxs)(t.p,{children:[(0,E.jsx)(t.code,{children:`SliderInput`}),` работает с одним числом, а `,(0,E.jsx)(t.code,{children:`SliderRangeInput`}),` — с диапазоном `,(0,E.jsx)(t.code,{children:`[number | null, number | null]`}),`.`]}),`
+`,(0,E.jsxs)(t.ul,{children:[`
+`,(0,E.jsxs)(t.li,{children:[`ручной ввод коммитится на `,(0,E.jsx)(t.code,{children:`blur`}),` и `,(0,E.jsx)(t.code,{children:`Enter`}),`;`]}),`
+`,(0,E.jsx)(t.li,{children:`невалидный draft откатывается к последнему committed значению;`}),`
+`,(0,E.jsx)(t.li,{children:`popover показывает полные подписи marks;`}),`
+`,(0,E.jsxs)(t.li,{children:[(0,E.jsx)(t.code,{children:`SliderRangeInput`}),` выглядит как один control с двумя сегментами;`]}),`
+`,(0,E.jsxs)(t.li,{children:[`пустой range-сегмент коммитится как `,(0,E.jsx)(t.code,{children:`null`}),` и отображается как `,(0,E.jsx)(t.code,{children:`-∞`}),` или `,(0,E.jsx)(t.code,{children:`∞`}),`.`]}),`
+`]}),`
+`,(0,E.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,E.jsx)(d,{}),`
+`,(0,E.jsx)(r,{of:p}),`
+`,(0,E.jsx)(t.pre,{children:(0,E.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { SliderInput } from "@/shared/ui";
+
+export function Example() {
+	const [value, setValue] = useState<number | undefined>(12);
+
+	return <SliderInput label="Порог" min={0} max={100} step={0.5} value={value} onChange={setValue} />;
+}
+`})}),`
+`,(0,E.jsx)(t.h2,{id:`rangeinput`,children:`RangeInput`}),`
+`,(0,E.jsx)(t.pre,{children:(0,E.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { SliderRangeInput, type SliderRangeValue } from "@/shared/ui";
+
+export function Example() {
+	const [value, setValue] = useState<SliderRangeValue | undefined>([null, 12]);
+
+	return <SliderRangeInput label="Период" min={0} max={24} value={value} onChange={setValue} />;
+}
+`})}),`
+`,(0,E.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,E.jsx)(t.h3,{id:`базовый-single-input`,children:`Базовый single input`}),`
+`,(0,E.jsx)(u,{of:p}),`
+`,(0,E.jsx)(t.h3,{id:`snap-по-marks`,children:`Snap по marks`}),`
+`,(0,E.jsx)(u,{of:g}),`
+`,(0,E.jsx)(t.h3,{id:`десятичный-ручной-ввод`,children:`Десятичный ручной ввод`}),`
+`,(0,E.jsx)(u,{of:m}),`
+`,(0,E.jsx)(t.h3,{id:`rangeinput-без-outputvalue`,children:`RangeInput без outputValue`}),`
+`,(0,E.jsx)(u,{of:b}),`
+`,(0,E.jsx)(t.h3,{id:`rangeinput-с-открытыми-границами-без-outputvalue-у-обычных-marks`,children:`RangeInput с открытыми границами без outputValue у обычных marks`}),`
+`,(0,E.jsx)(u,{of:y}),`
+`,(0,E.jsx)(t.h3,{id:`rangeinput-с-outputvalue-месяцы-на-шкале-дни-в-фильтре`,children:`RangeInput с outputValue: месяцы на шкале, дни в фильтре`}),`
+`,(0,E.jsx)(u,{of:_}),`
+`,(0,E.jsx)(t.h3,{id:`rangeinput-с-outputvalue-и-открытыми-границами`,children:`RangeInput с outputValue и открытыми границами`}),`
+`,(0,E.jsx)(u,{of:v}),`
+`,(0,E.jsx)(t.h3,{id:`rangeinput-с-текстом-вместо-ручного-ввода`,children:`RangeInput с текстом вместо ручного ввода`}),`
+`,(0,E.jsx)(u,{of:x}),`
+`,(0,E.jsx)(t.h3,{id:`disabled`,children:`Disabled`}),`
+`,(0,E.jsx)(u,{of:h}),`
+`,(0,E.jsx)(t.h2,{id:`api`,children:`API`}),`
+`,(0,E.jsx)(c,{of:C}),`
+`,(0,E.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,E.jsx)(i,{includePrimary:!1})]})}function T(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,E.jsx)(t,{...e,children:(0,E.jsx)(w,{...e})}):w(e)}var E;e((()=>{E=t(),f(),s(),S()}))();export{T as default};