@ryuzaki13/react-foundation-ui 1.0.8 → 1.0.11

package/storybook-static/assets/RadioGroup-DR0H6Z0w.js

@@ -0,0 +1,42 @@
+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-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.js";import{Controlled as p,Disabled as m,Vertical as h,n as g,t as _}from"./RadioGroup.stories-FEqmkrs7.js";function v(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{of:_,parameters:{docs:{toc:!0}}}),`
+`,(0,b.jsx)(c,{children:`RadioGroup`}),`
+`,(0,b.jsx)(i,{children:`Группа взаимоисключающих опций с поддержкой горизонтальной и вертикальной раскладки`}),`
+`,(0,b.jsx)(o.p,{children:`RadioGroup уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны контролируемые сценарии, заблокированные состояния.`}),`
+`,(0,b.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,b.jsx)(u,{}),`
+`,(0,b.jsx)(n,{of:p}),`
+`,(0,b.jsx)(o.pre,{children:(0,b.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { RadioGroup } from "@/shared/ui";
+
+export function Example() {
+	const [value, setValue] = useState("email");
+
+	return (
+		<RadioGroup label="Канал" value={value} onChange={setValue}>
+			<RadioGroup.Option value="email" label="Email" />
+			<RadioGroup.Option value="sms" label="SMS" />
+		</RadioGroup>
+	);
+}
+`})}),`
+`,(0,b.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,b.jsxs)(o.ul,{children:[`
+`,(0,b.jsx)(o.li,{children:`Если состояние должно жить во внешней форме или модели, ориентируйтесь на контролируемый режим из документации.`}),`
+`,(0,b.jsx)(o.li,{children:`Заблокированное состояние лучше проверять отдельно, чтобы убедиться, что визуально и поведенчески оно остается понятным.`}),`
+`]}),`
+`,(0,b.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,b.jsx)(o.h3,{id:`компонент-работает-в-контролируемом-режиме-когда-состояние-хранится-во-внешнем-компоненте`,children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте`}),`
+`,(0,b.jsx)(o.p,{children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте.`}),`
+`,(0,b.jsx)(l,{of:p}),`
+`,(0,b.jsx)(o.h3,{id:`вертикальная-ориентация-или-вертикальный-режим`,children:`Вертикальная ориентация или вертикальный режим`}),`
+`,(0,b.jsx)(o.p,{children:`Вертикальная ориентация или вертикальный режим.`}),`
+`,(0,b.jsx)(l,{of:h}),`
+`,(0,b.jsx)(o.h3,{id:`проверка-поведения-в-заблокированном-состоянии`,children:`Проверка поведения в заблокированном состоянии`}),`
+`,(0,b.jsx)(o.p,{children:`Проверка поведения в заблокированном состоянии.`}),`
+`,(0,b.jsx)(l,{of:m}),`
+`,(0,b.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,b.jsx)(s,{of:_}),`
+`,(0,b.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,b.jsx)(r,{includePrimary:!1})]})}function y(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,b.jsx)(n,{...e,children:(0,b.jsx)(v,{...e})}):v(e)}var b;e((()=>{b=d(),f(),o(),g()}))();export{y as default};

package/storybook-static/assets/RadioGroup.stories-FEqmkrs7.js

@@ -0,0 +1,42 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-SfMJGCsn.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{n as a,t as o}from"./RadioGroup-BtNCd3Je.js";var s=e({Controlled:()=>f,Disabled:()=>m,Vertical:()=>p,__namedExportsOrder:()=>h,default:()=>d});function c(e){return(0,u.jsx)(o,{...e})}var l,u,d,f,p,m,h,g=n((()=>{l=t(r(),1),a(),u=i(),d={title:`Shared/UI/RadioGroup`,component:c,args:{value:`email`,onChange:()=>{},orientation:`horizontal`,label:`Канал уведомлений`,description:`Выберите основной канал доставки`,disabled:!1},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{value:{description:`Текущее выбранное значение.`,control:`text`},onChange:{description:`Вызывается при смене выбранной опции.`,control:!1},label:{description:`Заголовок группы опций.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},disabled:{description:`Блокирует выбор опций.`,control:`boolean`},noWrap:{description:`Запрещает перенос опций на новую строку.`,control:`boolean`},orientation:{description:`Ориентация расположения опций.`,control:`inline-radio`,options:[`horizontal`,`vertical`]},className:{description:`Дополнительный CSS-класс контейнера.`,control:`text`},children:{description:"Элементы `RadioGroup.Option` внутри группы.",control:!1}}},f={render:e=>{let[t,n]=(0,l.useState)(`email`);return(0,u.jsxs)(`div`,{style:{display:`grid`,gap:10},children:[(0,u.jsxs)(c,{...e,value:t,onChange:n,children:[(0,u.jsx)(o.Option,{value:`email`,label:`Email`,description:`Письма на корпоративную почту`}),(0,u.jsx)(o.Option,{value:`sms`,label:`SMS`,description:`Сообщения на телефон`}),(0,u.jsx)(o.Option,{value:`push`,label:`Push`,description:`Уведомления в приложении`})]}),(0,u.jsxs)(`div`,{children:[`Выбрано: `,t]})]})},args:{children:void 0}},p={render:e=>{let[t,n]=(0,l.useState)(`draft`);return(0,u.jsxs)(c,{...e,value:t,onChange:n,orientation:`vertical`,label:`Статус документа`,children:[(0,u.jsx)(o.Option,{value:`draft`,label:`Черновик`}),(0,u.jsx)(o.Option,{value:`review`,label:`На согласовании`}),(0,u.jsx)(o.Option,{value:`approved`,label:`Утвержден`})]})},args:{orientation:`vertical`,children:void 0}},m={render:e=>(0,u.jsxs)(c,{...e,disabled:!0,children:[(0,u.jsx)(o.Option,{value:`yes`,label:`Да`}),(0,u.jsx)(o.Option,{value:`no`,label:`Нет`})]}),args:{disabled:!0,value:`yes`,children:void 0}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState("email");
+    return <div style={{
+      display: "grid",
+      gap: 10
+    }}>
+                <StringRadioGroup {...args} value={value} onChange={setValue}>
+                    <RadioGroup.Option value="email" label="Email" description="Письма на корпоративную почту" />
+                    <RadioGroup.Option value="sms" label="SMS" description="Сообщения на телефон" />
+                    <RadioGroup.Option value="push" label="Push" description="Уведомления в приложении" />
+                </StringRadioGroup>
+                <div>Выбрано: {value}</div>
+            </div>;
+  },
+  args: {
+    children: undefined
+  }
+}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState("draft");
+    return <StringRadioGroup {...args} value={value} onChange={setValue} orientation="vertical" label="Статус документа">
+                <RadioGroup.Option value="draft" label="Черновик" />
+                <RadioGroup.Option value="review" label="На согласовании" />
+                <RadioGroup.Option value="approved" label="Утвержден" />
+            </StringRadioGroup>;
+  },
+  args: {
+    orientation: "vertical",
+    children: undefined
+  }
+}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: args => <StringRadioGroup {...args} disabled>
+            <RadioGroup.Option value="yes" label="Да" />
+            <RadioGroup.Option value="no" label="Нет" />
+        </StringRadioGroup>,
+  args: {
+    disabled: true,
+    value: "yes",
+    children: undefined
+  }
+}`,...m.parameters?.docs?.source}}},h=[`Controlled`,`Vertical`,`Disabled`]}));g();export{f as Controlled,m as Disabled,p as Vertical,h as __namedExportsOrder,d as default,g as n,s as t};

package/storybook-static/assets/Select-CO4ZHP9h.css

@@ -0,0 +1 @@
+.aEEqH1{color:#0000;caret-color:#0000}._4HQKa7{inset:0 calc(var(--control-height) + var(--space-xs)) 0 var(--space-md);pointer-events:none;align-items:center;display:flex;position:absolute;overflow:hidden}

package/storybook-static/assets/Select-CUAevk01.js

@@ -0,0 +1,57 @@
+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-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.js";import{ControlledObjects as p,CustomOptionLayout as m,Disabled as h,Placeholder as g,PrimitiveOptions as _,n as v,t as y}from"./Select.stories-Df_c0IfC.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:`Select`}),`
+`,(0,S.jsx)(i,{children:`Getter-based select для примитивов и сложных объектных option`}),`
+`,(0,S.jsx)(o.p,{children:`Select уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны заблокированные состояния.`}),`
+`,(0,S.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,S.jsx)(u,{}),`
+`,(0,S.jsx)(n,{of:p}),`
+`,(0,S.jsx)(o.pre,{children:(0,S.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { Select } from "@/shared/ui";
+
+const options = [
+	{ id: 1, name: "Отдел продаж", code: "SLS" },
+	{ id: 2, name: "Закупки", code: "PRC" }
+];
+
+export function Example() {
+	const [value, setValue] = useState(undefined);
+
+	return (
+		<Select
+			label="Подразделение"
+			value={value}
+			onChange={setValue}
+			options={options}
+			getOptionKey={(option) => option.id}
+			getOptionLabel={(option) => option.name}
+			getOptionCode={(option) => option.code}
+		/>
+	);
+}
+`})}),`
+`,(0,S.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,S.jsxs)(o.ul,{children:[`
+`,(0,S.jsx)(o.li,{children:`Заблокированное состояние лучше проверять отдельно, чтобы убедиться, что визуально и поведенчески оно остается понятным.`}),`
+`]}),`
+`,(0,S.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,S.jsx)(o.h3,{id:`работа-с-объектами-как-со-значениями-option`,children:`Работа с объектами как со значениями option`}),`
+`,(0,S.jsx)(o.p,{children:`Работа с объектами как со значениями option.`}),`
+`,(0,S.jsx)(l,{of:p}),`
+`,(0,S.jsx)(o.h3,{id:`работа-с-примитивными-option`,children:`Работа с примитивными option`}),`
+`,(0,S.jsx)(o.p,{children:`Работа с примитивными option.`}),`
+`,(0,S.jsx)(l,{of:_}),`
+`,(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:`кастомный-рендер-option-и-выбранного-значения`,children:`Кастомный рендер option и выбранного значения`}),`
+`,(0,S.jsx)(o.p,{children:`Кастомный рендер option и выбранного значения.`}),`
+`,(0,S.jsx)(l,{of:m}),`
+`,(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};

package/storybook-static/assets/Select-DYVS7SCZ.js

@@ -0,0 +1,9 @@
+import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{C as n}from"./iframe-SfMJGCsn.js";import{t as r}from"./jsx-runtime-BBQGix-2.js";import{a as i,i as a}from"./utils-CReRlw17.js";import{n as o,t as s,ut as c}from"./lucide-react-CK2oyDtF.js";import{n as l,t as u}from"./ui.module-DS2qtZts.js";import{T as ee,b as te,d as ne,f as d,g as re,l as ie,m as ae,r as oe,s as se,t as f,v as p}from"./picker-De4ZbESe.js";function m({option:e,getOptionLabel:t,getOptionCode:n}){return[d(t(e)),d(n?.(e))].filter(e=>!!e).join(` `).toLowerCase()}var h=t((()=>{f()})),g=t((()=>{h()})),_,v,y,b=t((()=>{_=`aEEqH1`,v=`_4HQKa7`,y={inputWithOverlay:_,valueOverlay:v}}));function x(e){let{label:t,description:n,disabled:r,placeholder:a,size:s,options:u,value:f,onChange:h,getOptionKey:g,getOptionLabel:_,getOptionCode:v,getOptionDisabled:b,getOptionAriaLabel:x,getOptionClassName:w,renderOption:T,renderValue:E,className:D,buttonClassName:O,optionsClassName:k,optionsContentClassName:ce,searchable:A=!1,defaultFilter:le=!0,query:ue,defaultQuery:de,onQuery:fe,renderPopupHeader:pe,emptyState:j,loadingState:M,errorState:N,placement:P=`bottom-start`,clearable:F=!1}=e,I=h,L=(0,S.useRef)(null),[R,z]=(0,S.useState)(!1),B=A?`search-single`:`display`,V=f===void 0?void 0:g(f),H=V===void 0?void 0:u.find(e=>g(e)===V)??f,{query:U,setQuery:W}=se({open:R,query:ue,defaultQuery:de,onQuery:fe,triggerMode:B}),G=ne({options:u,query:U,enabled:A&&le,getSearchText:e=>m({option:e,getOptionLabel:_,getOptionCode:v})}),{activeIndex:me,context:he,floatingStyles:ge,getFloatingProps:_e,setReference:ve,setFloating:ye,setOptionRef:be,close:K,openList:xe,toggleOpen:Se,selectOption:Ce,selectActiveOption:we,handleReferenceKeyDown:Te,handleFloatingKeyDown:Ee,getOptionId:De,getActiveOptionId:q}=ie({options:G,selectedIndex:V===void 0?-1:G.findIndex(e=>g(e)===V),open:R,onOpenChange:z,getOptionDisabled:b,onSelect:I,disabled:r,placement:P,triggerMode:B}),J=G.length>0,Y=H===void 0?void 0:_(H),X=H===void 0?void 0:E?E(H):Y,Oe=d(Y),ke=H===void 0?void 0:d(v?.(H)),Ae=d(X)??Oe??ke??(V===void 0?``:String(V)),Z=A&&(R||U.length>0),je=Z?U:H===void 0?``:Ae,Q=H!==void 0&&X!==void 0&&d(X)===void 0&&!Z,$=oe({mode:B,open:R,currentQuery:U,hasDisplayValue:H!==void 0,inputRef:L,setQuery:W,openList:xe,close:K,toggleOpen:Se}),Me=e=>{L.current=e},Ne=()=>{F&&I(void 0),W(``),K()};return(0,C.jsx)(ee,{label:t,description:n,disabled:r,placeholder:a,size:s,className:D,children:({controlId:e,labelId:t,describedBy:n})=>{let s=`${e}-listbox`;return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(ae,{ref:Me,rootRef:ve,id:e,type:`text`,disabled:r,readOnly:!A,autoComplete:`off`,role:`combobox`,value:je,placeholder:H===void 0||Z?a:void 0,"aria-labelledby":t,"aria-describedby":n,"aria-haspopup":`listbox`,"aria-expanded":R,"aria-controls":R?s:void 0,"aria-autocomplete":A?`list`:`none`,"aria-activedescendant":R?q(s):void 0,inputClassName:i(Q&&y.inputWithOverlay,O,`textOverflow`),overlay:Q?(0,C.jsx)(`div`,{className:y.valueOverlay,children:X}):void 0,endAdornment:(0,C.jsx)(re,{open:R,disabled:r,onToggleMouseDown:$.handleToggleMouseDown,onToggleClick:$.handleToggleClick,children:F&&H!==void 0&&!r?(0,C.jsx)(`button`,{type:`button`,className:l.uiClearButton,"data-ui":`select-clear-button`,"data-action":`clear-select`,onMouseDown:e=>{e.preventDefault(),e.stopPropagation()},onClick:e=>{e.preventDefault(),e.stopPropagation(),Ne()},"aria-label":`Очистить выбор`,children:(0,C.jsx)(o,{})}):null}),onChange:e=>{A&&$.handleTriggerInputChange(e.target.value)},onClick:$.handleTriggerClick,onFocus:e=>{$.handleTriggerFocus(e.currentTarget)},onKeyDown:e=>{Te(e),!e.defaultPrevented&&$.handleTriggerKeyDown({event:e,onActivateWhenOpen:we,enableSpaceActivation:!A})}}),(0,C.jsx)(te,{open:R,context:he,floatingStyles:ge,listId:s,labelId:t,descriptionId:n,activeOptionId:J?q(s):void 0,setFloating:ye,getFloatingProps:_e,onKeyDown:Ee,className:i(l.uiPopupOptions,k),header:pe,children:(0,C.jsx)(`div`,{className:i(ce,`h100 scrollable`),children:J?G.map((e,t)=>{let n=g(e),r=V!==void 0&&n===V,a=t===me,o=b?.(e)??!1,u={active:a,selected:r,disabled:o};return(0,C.jsx)(`div`,{id:De(s,t),ref:e=>be(t,e),role:`option`,"aria-selected":r,"aria-disabled":o||void 0,"aria-label":x?.(e),className:i(l.uiPopupOption,o&&l.disabled,a&&l.uiPopupOptionActive,r&&l.selected,w?.(e,u)),onClick:()=>Ce(e),children:T?T(e,u):(0,C.jsxs)(C.Fragment,{children:[r?(0,C.jsx)(c,{className:l.uiPopupOptionIcon}):(0,C.jsx)(`span`,{className:l.uiPopupOptionIcon}),(0,C.jsx)(`div`,{className:l.uiOptionText,children:_(e)}),v&&(0,C.jsx)(`div`,{className:l.uiOptionCode,children:v(e)})]})},n)}):(0,C.jsx)(p,{emptyState:j,loadingState:M,errorState:N})})})]})}})}var S,C,w=t((()=>{S=e(n(),1),a(),s(),f(),u(),g(),b(),C=r(),x.__docgenInfo={description:`Выпадающий список выбора значения из набора опций. Подходит для форм, фильтров и простых справочников.`,methods:[],displayName:`Select`,props:{options:{required:!0,tsType:{name:`unknown`},description:``},getOptionKey:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(option: TOption) => SelectOptionKey`,signature:{arguments:[{type:{name:`TOption`},name:`option`}],return:{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]}}},description:``},getOptionLabel:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(option: TOption) => ReactNode`,signature:{arguments:[{type:{name:`TOption`},name:`option`}],return:{name:`ReactNode`}}},description:``},getOptionCode:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(option: TOption) => ReactNode`,signature:{arguments:[{type:{name:`TOption`},name:`option`}],return:{name:`ReactNode`}}},description:``},getOptionDisabled:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(option: TOption) => boolean`,signature:{arguments:[{type:{name:`TOption`},name:`option`}],return:{name:`boolean`}}},description:``},getOptionAriaLabel:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(option: TOption) => string`,signature:{arguments:[{type:{name:`TOption`},name:`option`}],return:{name:`string`}}},description:``},getOptionClassName:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(option: TOption, state: SelectOptionState) => string | undefined`,signature:{arguments:[{type:{name:`TOption`},name:`option`},{type:{name:`signature`,type:`object`,raw:`{
+	active: boolean;
+	selected: boolean;
+	disabled: boolean;
+}`,signature:{properties:[{key:`active`,value:{name:`boolean`,required:!0}},{key:`selected`,value:{name:`boolean`,required:!0}},{key:`disabled`,value:{name:`boolean`,required:!0}}]}},name:`state`}],return:{name:`union`,raw:`string | undefined`,elements:[{name:`string`},{name:`undefined`}]}}},description:``},renderOption:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(option: TOption, state: SelectOptionState) => ReactNode`,signature:{arguments:[{type:{name:`TOption`},name:`option`},{type:{name:`signature`,type:`object`,raw:`{
+	active: boolean;
+	selected: boolean;
+	disabled: boolean;
+}`,signature:{properties:[{key:`active`,value:{name:`boolean`,required:!0}},{key:`selected`,value:{name:`boolean`,required:!0}},{key:`disabled`,value:{name:`boolean`,required:!0}}]}},name:`state`}],return:{name:`ReactNode`}}},description:``},renderValue:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(option: TOption) => ReactNode`,signature:{arguments:[{type:{name:`TOption`},name:`option`}],return:{name:`ReactNode`}}},description:``},className:{required:!1,tsType:{name:`string`},description:``},buttonClassName:{required:!1,tsType:{name:`string`},description:``},optionsClassName:{required:!1,tsType:{name:`string`},description:``},optionsContentClassName:{required:!1,tsType:{name:`string`},description:``},searchable:{required:!1,tsType:{name:`boolean`},description:``},query:{required:!1,tsType:{name:`string`},description:``},defaultQuery:{required:!1,tsType:{name:`string`},description:``},onQuery:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string) => void`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`void`}}},description:``},defaultFilter:{required:!1,tsType:{name:`boolean`},description:``},renderPopupHeader:{required:!1,tsType:{name:`ReactNode`},description:``},emptyState:{required:!1,tsType:{name:`ReactNode`},description:``},loadingState:{required:!1,tsType:{name:`ReactNode`},description:``},errorState:{required:!1,tsType:{name:`ReactNode`},description:``},placement:{required:!1,tsType:{name:`Placement`},description:``},clearable:{required:!1,tsType:{name:`TClearable`},description:``},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`unknown`},name:`value`}],return:{name:`void`}}},description:``}}}}));export{w as n,x as t};

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

@@ -0,0 +1,37 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-SfMJGCsn.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{n as a,t as o}from"./Select-DYVS7SCZ.js";var s=e({ControlledObjects:()=>p,CustomOptionLayout:()=>g,Disabled:()=>_,Placeholder:()=>h,PrimitiveOptions:()=>m,__namedExportsOrder:()=>v,default:()=>f}),c,l,u,d,f,p,m,h,g,_,v,y=n((()=>{c=t(r(),1),a(),l=i(),u=[{id:1,name:`Отдел продаж`,code:`SLS`,manager:`Елена Миронова`},{id:2,name:`Закупки`,code:`PRC`,manager:`Антон Мелихов`},{id:3,name:`Логистика`,code:`LGS`,manager:`Мария Климова`,disabled:!0},{id:4,name:`Поддержка клиентов`,code:`SUP`,manager:`Ирина Белова`}],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},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`},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)(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})]})})}},_={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>(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>
+                    </>} />;
+  }
+}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true,
+    value: departmentOptions[0]
+  }
+}`,..._.parameters?.docs?.source}}},v=[`ControlledObjects`,`PrimitiveOptions`,`Placeholder`,`CustomOptionLayout`,`Disabled`]}));y();export{p as ControlledObjects,g as CustomOptionLayout,_ as Disabled,h as Placeholder,m as PrimitiveOptions,v as __namedExportsOrder,f as default,y as n,s as t};

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

@@ -0,0 +1 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./jsx-runtime-BBQGix-2.js";import{a as n,i as r}from"./utils-CReRlw17.js";import{o as i,t as a}from"./text-BxA8yj6Z.js";import{n as o,t as s}from"./ui.module-DS2qtZts.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-D63xBqOT.js

@@ -0,0 +1,48 @@
+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-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.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-BLPXVOtP.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.
+Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны контролируемые сценарии, заблокированные состояния.`}),`
+`,(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";
+
+import { SerializableSelect } from "@/shared/ui";
+
+const options = [
+	{ key: "draft", label: "Черновик" },
+	{ key: "done", label: "Завершен" }
+];
+
+export function Example() {
+	const [value, setValue] = useState(undefined);
+
+	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)(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};

package/storybook-static/assets/SerializableSelect-DwCnuBgv.js

@@ -0,0 +1,4 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./jsx-runtime-BBQGix-2.js";import{n,t as r}from"./Select-DYVS7SCZ.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.stories-BLPXVOtP.js

@@ -0,0 +1,43 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-SfMJGCsn.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{n as a,t as o}from"./SerializableSelect-DwCnuBgv.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-mOllNfg2.css

@@ -0,0 +1 @@
+.AvG-mf{border-radius:var(--radius-xs);font-family:var(--font-family-mono);color:inherit;text-align:center;caret-color:var(--content-0);font-variant-numeric:tabular-nums;background:0 0;border:none;outline:none;margin:0;padding:0}.AvG-mf::placeholder{color:var(--content-2)}.AvG-mf::selection{background-color:var(--focus-ring);color:var(--surface-0)}.AvG-mf:disabled{opacity:.25}.ig7KtT{-webkit-user-select:none;user-select:none;color:var(--content-1);flex-shrink:0}.ig7KtT[data-disabled]{opacity:.25}.RTruv0:hover{color:var(--focus-ring)}.YQHPZa{gap:var(--space-md);display:grid}.-RZe-i{grid-template-columns:minmax(0,1fr)}.Ox0SRE{grid-template-columns:auto calc(9em + var(--width-add));align-items:stretch}.gfaRup,._59kEea{min-width:0}.Jjdu1Q{min-width:calc(9em + var(--width-add))}.Q8Y2xS{padding-top:var(--space-md);border-top:var(--border)}.XxZYTW{padding-left:var(--space-md);border-left:var(--border)}

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

@@ -0,0 +1,53 @@
+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-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.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-kcuSwx76.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:`SingleDateTimeInput`}),`
+`,(0,S.jsx)(i,{children:`Строгий сегментный ввод даты-времени и времени с popover picker`}),`
+`,(0,S.jsxs)(o.p,{children:[(0,S.jsx)(o.code,{children:`SingleDateTimeInput`}),` объединяет два сценария:`]}),`
+`,(0,S.jsxs)(o.ul,{children:[`
+`,(0,S.jsxs)(o.li,{children:[`ручной ввод по фиксированной маске `,(0,S.jsx)(o.code,{children:`dd.MM.yyyy HH:mm`}),`;`]}),`
+`,(0,S.jsx)(o.li,{children:`выбор даты и времени через popover picker с wheel-прокруткой;`}),`
+`,(0,S.jsxs)(o.li,{children:[`выбор только времени по маске `,(0,S.jsx)(o.code,{children:`HH:mm`}),` с технической датой `,(0,S.jsx)(o.code,{children:`1970-01-01`}),`.`]}),`
+`]}),`
+`,(0,S.jsx)(o.p,{children:`Семантика компонента фиксирована и отличается от существующих компонентов так:`}),`
+`,(0,S.jsxs)(o.ul,{children:[`
+`,(0,S.jsxs)(o.li,{children:[`до: `,(0,S.jsx)(o.code,{children:`DateInput`}),` работал только с календарной датой и нормализовал значение к границам суток;`]}),`
+`,(0,S.jsxs)(o.li,{children:[`до: `,(0,S.jsx)(o.code,{children:`InputDateTime`}),` давал сегментный ввод, но без picker и без опоры на shared date-formatters;`]}),`
+`,(0,S.jsxs)(o.li,{children:[`после: `,(0,S.jsx)(o.code,{children:`SingleDateTimeInput`}),` хранит дату-время с точностью до минуты и использует строгий parse/format через общие date-formatters.`]}),`
+`]}),`
+`,(0,S.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,S.jsx)(u,{}),`
+`,(0,S.jsx)(n,{of:p}),`
+`,(0,S.jsx)(o.pre,{children:(0,S.jsx)(o.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)(o.h2,{id:`практические-замечания`,children:`Практические замечания`}),`
+`,(0,S.jsxs)(o.ul,{children:[`
+`,(0,S.jsxs)(o.li,{children:[`Поле вызывает `,(0,S.jsx)(o.code,{children:`onChange`}),` только для полной и валидной даты-времени.`]}),`
+`,(0,S.jsx)(o.li,{children:`Неполный или невалидный ручной ввод при потере фокуса откатывается к последнему committed значению.`}),`
+`,(0,S.jsxs)(o.li,{children:[`Полностью очищенные сегменты трактуются как `,(0,S.jsx)(o.code,{children:`null`}),`.`]}),`
+`,(0,S.jsxs)(o.li,{children:[`Ограничения `,(0,S.jsx)(o.code,{children:`minDate`}),` и `,(0,S.jsx)(o.code,{children:`maxDate`}),` применяются и к календарю, и к времени внутри того же дня.`]}),`
+`,(0,S.jsxs)(o.li,{children:[`В режиме `,(0,S.jsx)(o.code,{children:`mode="time"`}),` компонент возвращает `,(0,S.jsx)(o.code,{children:`Date`}),` на технической дате `,(0,S.jsx)(o.code,{children:`1970-01-01`}),`, а `,(0,S.jsx)(o.code,{children:`minDate`}),` и `,(0,S.jsx)(o.code,{children:`maxDate`}),` сравниваются только по `,(0,S.jsx)(o.code,{children:`HH:mm`}),`.`]}),`
+`,(0,S.jsx)(o.li,{children:`Wheel-панель блокирует прокрутку страницы во время взаимодействия и доводит выбранное значение в центр.`}),`
+`,(0,S.jsxs)(o.li,{children:[`Размещение панели времени управляется через `,(0,S.jsx)(o.code,{children:`timePanelPlacement="bottom" | "right"`}),`.`]}),`
+`]}),`
+`,(0,S.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,S.jsx)(o.h3,{id:`базовый-сценарий`,children:`Базовый сценарий`}),`
+`,(0,S.jsx)(l,{of:p}),`
+`,(0,S.jsx)(o.h3,{id:`пустое-значение`,children:`Пустое значение`}),`
+`,(0,S.jsx)(l,{of:m}),`
+`,(0,S.jsx)(o.h3,{id:`ограниченный-диапазон`,children:`Ограниченный диапазон`}),`
+`,(0,S.jsx)(l,{of:g}),`
+`,(0,S.jsx)(o.h3,{id:`панель-времени-справа`,children:`Панель времени справа`}),`
+`,(0,S.jsx)(l,{of:_}),`
+`,(0,S.jsx)(o.h3,{id:`только-время`,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};

package/storybook-static/assets/SingleDateTimeInput.stories-kcuSwx76.js

@@ -0,0 +1,78 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-SfMJGCsn.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,i as o}from"./utils-CReRlw17.js";import{B as ee,ft as s,t as c}from"./lucide-react-CK2oyDtF.js";import{J as l,K as u,_ as d,b as te,t as f,z as p}from"./formatters-yIBztcem.js";import{i as m,t as h}from"./popover-DWA5VOMQ.js";import{n as g,t as _}from"./ui.module-DS2qtZts.js";import{t as v}from"./Button-BUkCW8Zg.js";import{i as y}from"./DateInput-C72jV86j.js";import{t as b}from"./button-Bl3Hu8CS.js";import{o as ne,r as re,u as ie}from"./Input-B7DWcGCL.js";import{t as ae}from"./input-Be5K9_B7.js";import{t as oe}from"./ui-CmVy0trY.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-0-mzaXky.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(r(),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:r,placeholder:i,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:!!r,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=i??(_===`time`?`чч:мм`:`дд.мм.гггг чч:мм`),J=S??b??T;return(0,G.jsxs)(m,{open:x,onOpenChange:U,children:[(0,G.jsx)(ne,{label:n,description:r,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)(s,{}),"aria-label":K})}),children:({controlClassName:e})=>(0,G.jsx)(`div`,{id:D,className:a(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:a(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:a(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(r(),1),f(),o(),c(),b(),oe(),ae(),h(),_(),k(),ve(),ye(),E(),G=i(),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(r(),1),f(),be(),q=i(),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-BHZgpCjC.js

@@ -0,0 +1,63 @@
+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-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.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-Bias_Soq.js";function C(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(a,{of:S,parameters:{docs:{toc:!0}}}),`
+`,(0,T.jsx)(c,{children:`Slider`}),`
+`,(0,T.jsx)(i,{children:`Компактные single и range слайдеры с marks, tooltip и открытыми границами`}),`
+`,(0,T.jsxs)(o.p,{children:[(0,T.jsx)(o.code,{children:`Slider`}),` и `,(0,T.jsx)(o.code,{children:`SliderRange`}),` — отдельные публичные компоненты. Оба используют общую числовую шкалу, но не смешивают single/range через prop.`]}),`
+`,(0,T.jsxs)(o.ul,{children:[`
+`,(0,T.jsxs)(o.li,{children:[(0,T.jsx)(o.code,{children:`Slider`}),` возвращает одно finite-число;`]}),`
+`,(0,T.jsxs)(o.li,{children:[(0,T.jsx)(o.code,{children:`SliderRange`}),` возвращает `,(0,T.jsx)(o.code,{children:`[number | null, number | null]`}),`;`]}),`
+`,(0,T.jsxs)(o.li,{children:[(0,T.jsx)(o.code,{children:`null`}),` в range означает открытую границу;`]}),`
+`,(0,T.jsxs)(o.li,{children:[(0,T.jsx)(o.code,{children:`marks`}),` всегда задают snap-домен;`]}),`
+`,(0,T.jsxs)(o.li,{children:[(0,T.jsx)(o.code,{children:`marksPosition="index"`}),` размещает marks с равным визуальным шагом.`]}),`
+`]}),`
+`,(0,T.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,T.jsx)(u,{}),`
+`,(0,T.jsx)(n,{of:y}),`
+`,(0,T.jsx)(o.pre,{children:(0,T.jsx)(o.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)(o.h2,{id:`range-с-открытой-границей`,children:`Range с открытой границей`}),`
+`,(0,T.jsx)(o.pre,{children:(0,T.jsx)(o.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)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,T.jsx)(o.h3,{id:`single-со-step`,children:`Single со step`}),`
+`,(0,T.jsx)(l,{of:y}),`
+`,(0,T.jsx)(o.h3,{id:`single-с-compact-marks`,children:`Single с compact marks`}),`
+`,(0,T.jsx)(l,{of:b}),`
+`,(0,T.jsx)(o.h3,{id:`равные-расстояния-между-неравномерными-значениями`,children:`Равные расстояния между неравномерными значениями`}),`
+`,(0,T.jsx)(l,{of:m}),`
+`,(0,T.jsx)(o.h3,{id:`range-без-outputvalue`,children:`Range без outputValue`}),`
+`,(0,T.jsx)(l,{of:v}),`
+`,(0,T.jsx)(o.h3,{id:`range-с-открытыми-границами-без-outputvalue-у-обычных-marks`,children:`Range с открытыми границами без outputValue у обычных marks`}),`
+`,(0,T.jsx)(l,{of:_}),`
+`,(0,T.jsx)(o.h3,{id:`range-с-outputvalue-месяцы-на-шкале-дни-в-фильтре`,children:`Range с outputValue: месяцы на шкале, дни в фильтре`}),`
+`,(0,T.jsx)(l,{of:h}),`
+`,(0,T.jsx)(o.h3,{id:`range-с-outputvalue-и-открытыми-границами`,children:`Range с outputValue и открытыми границами`}),`
+`,(0,T.jsx)(l,{of:g}),`
+`,(0,T.jsx)(o.h3,{id:`disabled`,children:`Disabled`}),`
+`,(0,T.jsx)(l,{of:p}),`
+`,(0,T.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,T.jsx)(s,{of:S}),`
+`,(0,T.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,T.jsx)(r,{includePrimary:!1})]})}function w(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,T.jsx)(n,{...e,children:(0,T.jsx)(C,{...e})}):C(e)}var T;e((()=>{T=d(),f(),o(),x()}))();export{w as default};