@ryuzaki13/react-foundation-ui 1.0.8 → 1.0.11

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

@@ -0,0 +1,77 @@
+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,o,t as s}from"./slider-39Mty47U.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-jzFZcWr7.js

@@ -0,0 +1,58 @@
+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{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-B7w8bp86.js";function w(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(a,{of:C,parameters:{docs:{toc:!0}}}),`
+`,(0,E.jsx)(c,{children:`SliderInput`}),`
+`,(0,E.jsx)(i,{children:`Поля ввода для single и range с popover slider`}),`
+`,(0,E.jsxs)(o.p,{children:[(0,E.jsx)(o.code,{children:`SliderInput`}),` работает с одним числом, а `,(0,E.jsx)(o.code,{children:`SliderRangeInput`}),` — с диапазоном `,(0,E.jsx)(o.code,{children:`[number | null, number | null]`}),`.`]}),`
+`,(0,E.jsxs)(o.ul,{children:[`
+`,(0,E.jsxs)(o.li,{children:[`ручной ввод коммитится на `,(0,E.jsx)(o.code,{children:`blur`}),` и `,(0,E.jsx)(o.code,{children:`Enter`}),`;`]}),`
+`,(0,E.jsx)(o.li,{children:`невалидный draft откатывается к последнему committed значению;`}),`
+`,(0,E.jsx)(o.li,{children:`popover показывает полные подписи marks;`}),`
+`,(0,E.jsxs)(o.li,{children:[(0,E.jsx)(o.code,{children:`SliderRangeInput`}),` выглядит как один control с двумя сегментами;`]}),`
+`,(0,E.jsxs)(o.li,{children:[`пустой range-сегмент коммитится как `,(0,E.jsx)(o.code,{children:`null`}),` и отображается как `,(0,E.jsx)(o.code,{children:`-∞`}),` или `,(0,E.jsx)(o.code,{children:`∞`}),`.`]}),`
+`]}),`
+`,(0,E.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,E.jsx)(u,{}),`
+`,(0,E.jsx)(n,{of:p}),`
+`,(0,E.jsx)(o.pre,{children:(0,E.jsx)(o.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)(o.h2,{id:`rangeinput`,children:`RangeInput`}),`
+`,(0,E.jsx)(o.pre,{children:(0,E.jsx)(o.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)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,E.jsx)(o.h3,{id:`базовый-single-input`,children:`Базовый single input`}),`
+`,(0,E.jsx)(l,{of:p}),`
+`,(0,E.jsx)(o.h3,{id:`snap-по-marks`,children:`Snap по marks`}),`
+`,(0,E.jsx)(l,{of:g}),`
+`,(0,E.jsx)(o.h3,{id:`десятичный-ручной-ввод`,children:`Десятичный ручной ввод`}),`
+`,(0,E.jsx)(l,{of:m}),`
+`,(0,E.jsx)(o.h3,{id:`rangeinput-без-outputvalue`,children:`RangeInput без outputValue`}),`
+`,(0,E.jsx)(l,{of:b}),`
+`,(0,E.jsx)(o.h3,{id:`rangeinput-с-открытыми-границами-без-outputvalue-у-обычных-marks`,children:`RangeInput с открытыми границами без outputValue у обычных marks`}),`
+`,(0,E.jsx)(l,{of:y}),`
+`,(0,E.jsx)(o.h3,{id:`rangeinput-с-outputvalue-месяцы-на-шкале-дни-в-фильтре`,children:`RangeInput с outputValue: месяцы на шкале, дни в фильтре`}),`
+`,(0,E.jsx)(l,{of:_}),`
+`,(0,E.jsx)(o.h3,{id:`rangeinput-с-outputvalue-и-открытыми-границами`,children:`RangeInput с outputValue и открытыми границами`}),`
+`,(0,E.jsx)(l,{of:v}),`
+`,(0,E.jsx)(o.h3,{id:`rangeinput-с-текстом-вместо-ручного-ввода`,children:`RangeInput с текстом вместо ручного ввода`}),`
+`,(0,E.jsx)(l,{of:x}),`
+`,(0,E.jsx)(o.h3,{id:`disabled`,children:`Disabled`}),`
+`,(0,E.jsx)(l,{of:h}),`
+`,(0,E.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,E.jsx)(s,{of:C}),`
+`,(0,E.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,E.jsx)(r,{includePrimary:!1})]})}function T(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,E.jsx)(n,{...e,children:(0,E.jsx)(w,{...e})}):w(e)}var E;e((()=>{E=d(),f(),o(),S()}))();export{T as default};

package/storybook-static/assets/SliderInput.stories-B7w8bp86.js

@@ -0,0 +1,67 @@
+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{j as a}from"./formatters-yIBztcem.js";import{t as o}from"./odata-service-8sDCOQ3I.js";import{n as s,r as c,t as l}from"./slider-39Mty47U.js";var u=e({Basic:()=>y,DecimalManualInput:()=>x,Disabled:()=>D,MarksSnap:()=>b,RangeInputMonthToDaysOutput:()=>w,RangeInputOpenMonthToDaysOutput:()=>T,RangeInputOpenWithoutExplicitMiddleOutput:()=>C,RangeInputPlain:()=>S,RangeInputReadonlyText:()=>E,__namedExportsOrder:()=>O,default:()=>v});function d({value:e,field:t,children:n}){let[r,i]=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:[r,i],filter:a(t,e)},null,2)}),n]})}var f,p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k=n((()=>{f=t(r(),1),o(),l(),p=i(),m=[{value:0,label:`0`},{value:20,label:`20`},{value:40,label:`40`},{value:60,label:`60`},{value:80,label:`80`},{value:100,label:`100`}],h=[{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}],g=[{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: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:`1г.`,outputValue:360},{value:18,label:`1.5г.`,outputValue:540},{value:24,label:`2г.`,outputValue:720},{value:25,label:`-`,outputValue:null}],v={title:`Shared/UI/SliderInput`,component:s,args:{value:12,onChange:()=>{},min:0,max:100,step:.5},parameters:{atomicCanvas:!0,layout:`padded`}},y={render:e=>{let[t,n]=(0,f.useState)(e.value);return(0,p.jsx)(s,{...e,label:`Порог`,description:`Ручной ввод и popover slider работают с одним значением.`,value:t,onChange:n})}},b={render:e=>{let[t,n]=(0,f.useState)(40);return(0,p.jsx)(s,{...e,label:`Готовый пресет`,marks:m,value:t,onChange:n})}},x={render:e=>{let[t,n]=(0,f.useState)(17.5);return(0,p.jsx)(s,{...e,label:`Десятичное значение`,value:t,onChange:n})},args:{step:.5}},S={render:()=>{let[e,t]=(0,f.useState)([20,80]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Процент выполнения`,description:"RangeInput без outputValue: наружу отдаётся координата `value`.",min:0,max:100,marks:m,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`progress`,unit:`%`})]})}},C={render:()=>{let[e,t]=(0,f.useState)([null,12]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Срок в месяцах`,description:"У крайних marks `outputValue:null`; у обычных marks outputValue не указан и берётся `value`.",min:0,max:25,marks:h,marksPosition:`index`,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`months`,unit:` мес.`})]})}},w={render:()=>{let[e,t]=(0,f.useState)([90,360]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Срок: месяцы на шкале, дни в фильтре`,description:`В поле и фильтре видны дни, а popover показывает месячные marks.`,min:1,max:24,marks:g,marksPosition:`index`,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`days`,unit:` дн.`})]})}},T={render:()=>{let[e,t]=(0,f.useState)([null,720]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Срок: открытые границы и дни в фильтре`,description:"Крайние marks отдают null, обычные marks отдают дни через `outputValue`.",min:0,max:25,marks:_,marksPosition:`index`,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`days`,unit:` дн.`})]})}},E={render:()=>{let[e,t]=(0,f.useState)([90,180]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Срок текстом`,description:`В поле выводится готовый текст по marks, а изменение через popover коммитится при закрытии.`,min:0,max:25,marks:_,marksPosition:`index`,value:e,onChange:t,readonlyValueText:!0,placeholder:`Любой срок`}),(0,p.jsx)(d,{value:e,field:`days`,unit:` дн.`})]})}},D={args:{label:`Недоступно`,description:`Поле и popover отключены.`,value:20,disabled:!0,marks:m}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<number>(args.value);
+    return <SliderInput {...args} label="Порог" description="Ручной ввод и popover slider работают с одним значением." value={value} onChange={setValue} />;
+  }
+}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<number>(40);
+    return <SliderInput {...args} label="Готовый пресет" marks={percentMarks} value={value} onChange={setValue} />;
+  }
+}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<number>(17.5);
+    return <SliderInput {...args} label="Десятичное значение" value={value} onChange={setValue} />;
+  },
+  args: {
+    step: 0.5
+  }
+}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<SliderRangeValue>([20, 80]);
+    return <>
+                <SliderRangeInput label="Процент выполнения" description="RangeInput без outputValue: наружу отдаётся координата \`value\`." min={0} max={100} marks={percentMarks} value={value} onChange={setValue} />
+                <RangePreview value={value} field="progress" unit="%" />
+            </>;
+  }
+}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<SliderRangeValue>([null, 12]);
+    return <>
+                <SliderRangeInput label="Срок в месяцах" description="У крайних marks \`outputValue:null\`; у обычных marks outputValue не указан и берётся \`value\`." min={0} max={25} marks={openMonthMarks} marksPosition="index" value={value} onChange={setValue} />
+                <RangePreview value={value} field="months" unit=" мес." />
+            </>;
+  }
+}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<SliderRangeValue>([90, 360]);
+    return <>
+                <SliderRangeInput label="Срок: месяцы на шкале, дни в фильтре" description="В поле и фильтре видны дни, а popover показывает месячные marks." min={1} max={24} marks={monthToDayMarks} marksPosition="index" value={value} onChange={setValue} />
+                <RangePreview value={value} field="days" unit=" дн." />
+            </>;
+  }
+}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<SliderRangeValue>([null, 720]);
+    return <>
+                <SliderRangeInput label="Срок: открытые границы и дни в фильтре" description="Крайние marks отдают null, обычные marks отдают дни через \`outputValue\`." min={0} max={25} marks={openMonthToDayMarks} 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>([90, 180]);
+    return <>
+                <SliderRangeInput label="Срок текстом" description="В поле выводится готовый текст по marks, а изменение через popover коммитится при закрытии." min={0} max={25} marks={openMonthToDayMarks} marksPosition="index" value={value} onChange={setValue} readonlyValueText placeholder="Любой срок" />
+                <RangePreview value={value} field="days" unit=" дн." />
+            </>;
+  }
+}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: "Недоступно",
+    description: "Поле и popover отключены.",
+    value: 20,
+    disabled: true,
+    marks: percentMarks
+  }
+}`,...D.parameters?.docs?.source}}},O=[`Basic`,`MarksSnap`,`DecimalManualInput`,`RangeInputPlain`,`RangeInputOpenWithoutExplicitMiddleOutput`,`RangeInputMonthToDaysOutput`,`RangeInputOpenMonthToDaysOutput`,`RangeInputReadonlyText`,`Disabled`]}));k();export{y as Basic,x as DecimalManualInput,D as Disabled,b as MarksSnap,w as RangeInputMonthToDaysOutput,T as RangeInputOpenMonthToDaysOutput,C as RangeInputOpenWithoutExplicitMiddleOutput,S as RangeInputPlain,E as RangeInputReadonlyText,O as __namedExportsOrder,v as default,k as n,u as t};

package/storybook-static/assets/Sortable-DcmDaPBw.js

@@ -0,0 +1,72 @@
+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{Basic as p,DisabledItems as m,GridCards as h,HandleOnly as g,HorizontalList as _,NestedContainers as v,n as y,t as b}from"./Sortable.stories-CwhHGCih.js";function x(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(a,{of:b,parameters:{docs:{toc:!0}}}),`
+`,(0,C.jsx)(c,{children:`Sortable`}),`
+`,(0,C.jsxs)(i,{children:[`Headless-набор для сортируемых коллекций на базе `,(0,C.jsx)(o.code,{children:`dnd-kit`}),` с поддержкой list, horizontal и grid-layout`]}),`
+`,(0,C.jsxs)(o.p,{children:[(0,C.jsx)(o.code,{children:`Sortable`}),` не навязывает визуальный вид элементов и используется как композиционный слой поверх `,(0,C.jsx)(o.code,{children:`dnd-kit`}),`.
+Он дает единый API для `,(0,C.jsx)(o.code,{children:`DndContext`}),`, `,(0,C.jsx)(o.code,{children:`SortableContext`}),`, sortable-item и drag-handle, а бизнес-логика reorder остается у потребителя.
+Для типовой визуальной ручки есть `,(0,C.jsx)(o.code,{children:`Sortable.DragHandle`}),`; низкоуровневый `,(0,C.jsx)(o.code,{children:`Sortable.Handle`}),` нужен, когда внешний вид полностью задает потребитель.`]}),`
+`,(0,C.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,C.jsx)(u,{}),`
+`,(0,C.jsx)(n,{of:p}),`
+`,(0,C.jsx)(o.pre,{children:(0,C.jsx)(o.code,{className:`language-tsx`,children:`import { Sortable, getSortableReorderResult } from "@/shared/ui";
+
+function Example({ items, setItems }: { items: string[]; setItems: (next: string[]) => void }) {
+	return (
+		<Sortable.Root
+			onDragEnd={(event) => {
+				const reorder = getSortableReorderResult({
+					event,
+					items: {
+						list: items
+					}
+				});
+				if (!reorder) return;
+
+				const next = [...items];
+				const [moved] = next.splice(reorder.fromIndex, 1);
+				next.splice(reorder.toIndex, 0, moved!);
+				setItems(next);
+			}}>
+			<Sortable.Container containerId="list" items={items} layout="vertical">
+				{items.map((item) => (
+					<Sortable.Item key={item} id={item}>
+						<Sortable.DragHandle title={\`Перетащить \${item}\`} />
+						<span>{item}</span>
+					</Sortable.Item>
+				))}
+			</Sortable.Container>
+		</Sortable.Root>
+	);
+}
+`})}),`
+`,(0,C.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,C.jsxs)(o.ul,{children:[`
+`,(0,C.jsxs)(o.li,{children:[`Используйте `,(0,C.jsx)(o.code,{children:`Sortable.Root`}),` как общий контекст drag-and-drop для одного сценария взаимодействия.`]}),`
+`,(0,C.jsxs)(o.li,{children:[`Для нескольких независимых списков внутри одного экрана задавайте отдельные `,(0,C.jsx)(o.code,{children:`containerId`}),` через `,(0,C.jsx)(o.code,{children:`Sortable.Container`}),`.`]}),`
+`,(0,C.jsxs)(o.li,{children:[`Логику reorder удобнее выносить в helper `,(0,C.jsx)(o.code,{children:`getSortableReorderResult`}),`, если перенос между контейнерами не нужен.`]}),`
+`,(0,C.jsxs)(o.li,{children:[`Для вложенных сценариев размещайте несколько `,(0,C.jsx)(o.code,{children:`Sortable.Container`}),` внутри одного `,(0,C.jsx)(o.code,{children:`Sortable.Root`}),`.`]}),`
+`,(0,C.jsxs)(o.li,{children:[(0,C.jsx)(o.code,{children:`Sortable.Item`}),` отвечает только за DnD-bindings и inline-style трансформации; визуальный каркас строки или карточки должен оставаться у потребителя.`]}),`
+`,(0,C.jsxs)(o.li,{children:[`Используйте `,(0,C.jsx)(o.code,{children:`Sortable.DragHandle`}),` для стандартной ручки с `,(0,C.jsx)(o.code,{children:`GripIcon`}),`, локальными стилями и состояниями disabled/dragging.`]}),`
+`]}),`
+`,(0,C.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,C.jsx)(o.h3,{id:`базовый-вертикальный-список`,children:`Базовый вертикальный список`}),`
+`,(0,C.jsx)(o.p,{children:`Базовый headless-сценарий сортировки элементов по вертикали.`}),`
+`,(0,C.jsx)(l,{of:p}),`
+`,(0,C.jsx)(o.h3,{id:`горизонтальный-список`,children:`Горизонтальный список`}),`
+`,(0,C.jsxs)(o.p,{children:[`Использование `,(0,C.jsx)(o.code,{children:`layout="horizontal"`}),` для toolbar, чипов и полос вкладок.`]}),`
+`,(0,C.jsx)(l,{of:_}),`
+`,(0,C.jsx)(o.h3,{id:`grid-карточки`,children:`Grid-карточки`}),`
+`,(0,C.jsxs)(o.p,{children:[`Использование `,(0,C.jsx)(o.code,{children:`layout="grid"`}),` для карточек и flow-раскладок.`]}),`
+`,(0,C.jsx)(l,{of:h}),`
+`,(0,C.jsx)(o.h3,{id:`отключенные-элементы`,children:`Отключенные элементы`}),`
+`,(0,C.jsx)(o.p,{children:`Проверка поведения для элементов, которые видны в списке, но не должны перетаскиваться.`}),`
+`,(0,C.jsx)(l,{of:m}),`
+`,(0,C.jsx)(o.h3,{id:`handle-only-drag`,children:`Handle-only drag`}),`
+`,(0,C.jsx)(o.p,{children:`Перетаскивание доступно только через handle, а не через весь элемент.`}),`
+`,(0,C.jsx)(l,{of:g}),`
+`,(0,C.jsx)(o.h3,{id:`вложенные-контейнеры`,children:`Вложенные контейнеры`}),`
+`,(0,C.jsxs)(o.p,{children:[`Два уровня `,(0,C.jsx)(o.code,{children:`Sortable.Container`}),` внутри одного `,(0,C.jsx)(o.code,{children:`Sortable.Root`}),` без переноса между контейнерами.`]}),`
+`,(0,C.jsx)(l,{of:v}),`
+`,(0,C.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,C.jsx)(s,{of:b}),`
+`,(0,C.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,C.jsx)(r,{includePrimary:!1})]})}function S(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,C.jsx)(n,{...e,children:(0,C.jsx)(x,{...e})}):x(e)}var C;e((()=>{C=d(),f(),o(),y()}))();export{S as default};

package/storybook-static/assets/Sortable.stories-CwhHGCih.js

@@ -0,0 +1,141 @@
+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{i as a,n as o,r as s,t as c}from"./sortable-CgCCp3dq.js";var l=e({Basic:()=>b,DisabledItems:()=>C,GridCards:()=>S,HandleOnly:()=>w,HorizontalList:()=>x,NestedContainers:()=>T,SortablePreview:()=>f,__namedExportsOrder:()=>E,default:()=>y});function u(e,t,n){let r=[...e],[i]=r.splice(t,1);return r.splice(n,0,i),r}function d(e){switch(e){case`horizontal`:return{display:`flex`,gap:`var(--space-sm)`,overflowX:`auto`};case`grid`:return{display:`grid`,gap:`var(--space-sm)`,gridTemplateColumns:`repeat(auto-fill, minmax(12rem, 1fr))`};default:return{display:`grid`,gap:`var(--space-sm)`}}}function f(e){let[t,n]=(0,p.useState)(e.initialItems),r=new Set(e.disabledIds??[]);return(0,m.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,m.jsx)(c.Root,{onDragEnd:r=>{let i=s({event:r,items:{[e.containerId]:t}});i&&n(e=>u(e,i.fromIndex,i.toIndex))},children:(0,m.jsx)(c.Container,{containerId:e.containerId,items:t,layout:e.layout,children:(0,m.jsx)(`div`,{style:d(e.layout),children:t.map(t=>(0,m.jsxs)(c.Item,{id:t,disabled:r.has(t),style:{...h,minWidth:e.itemWidth},children:[(0,m.jsx)(c.DragHandle,{title:`Перетащить ${t}`}),(0,m.jsx)(`div`,{children:t})]},t))})})}),(0,m.jsx)(`div`,{style:{fontSize:14,opacity:.8},children:`Порядок элементов изменяется локально в рамках story.`})]})}var p,m,h,g,_,v,y,b,x,S,C,w,T,E,D=n((()=>{p=t(r(),1),o(),a(),m=i(),h={display:`grid`,gridTemplateColumns:`var(--control-height) 1fr`,alignItems:`center`,gap:`var(--space-sm)`,padding:`var(--space-sm)`,border:`var(--border)`,borderRadius:`var(--radius-sm)`,background:`var(--surface-0)`},g=[`Alpha`,`Bravo`,`Charlie`,`Delta`],_=[`Фильтры`,`Графики`,`Сводка`,`История`],v=[`Карточка 1`,`Карточка 2`,`Карточка 3`,`Карточка 4`,`Карточка 5`,`Карточка 6`],y={title:`Shared/UI/Sortable`,component:f,args:{containerId:`sortable-demo`,layout:`vertical`,initialItems:g,itemWidth:void 0,disabledIds:[]},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{containerId:{description:"Идентификатор `SortableContext`, который используется для вычисления reorder внутри контейнера.",control:`text`},layout:{description:`Режим раскладки и стратегия сортировки: вертикальный список, горизонтальный список или grid.`,control:`inline-radio`,options:[`vertical`,`horizontal`,`grid`]},initialItems:{description:`Начальный набор элементов. Внутри story состояние управляется локально.`,control:!1},itemWidth:{description:`Минимальная ширина карточки; полезна для горизонтального режима.`,control:`text`},disabledIds:{description:`Список id, для которых drag-handle отключен.`,control:!1}}},b={},x={args:{containerId:`sortable-horizontal`,layout:`horizontal`,initialItems:_,itemWidth:`12rem`}},S={args:{containerId:`sortable-grid`,layout:`grid`,initialItems:v}},C={args:{containerId:`sortable-disabled`,layout:`vertical`,initialItems:g,disabledIds:[`Bravo`,`Delta`]}},w={args:{containerId:`sortable-handle-only`,layout:`vertical`,initialItems:[`Пункт 1`,`Пункт 2`,`Пункт 3`,`Пункт 4`]}},T={args:{containerId:`top`,layout:`vertical`,initialItems:[`Группа A`,`Группа B`]},render:()=>{let[e,t]=(0,p.useState)([`Группа A`,`Группа B`]),[n,r]=(0,p.useState)({"Группа A":[`A.1`,`A.2`,`A.3`],"Группа B":[`B.1`,`B.2`]});return(0,m.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,m.jsx)(c.Root,{onDragEnd:i=>{let a=s({event:i,items:{top:e,...Object.fromEntries(e.map(e=>[`parent:${e}`,n[e]??[]]))}});if(!a)return;if(a.containerId===`top`){t(e=>u(e,a.fromIndex,a.toIndex));return}let o=String(a.containerId).slice(7);r(e=>({...e,[o]:u(e[o]??[],a.fromIndex,a.toIndex)}))},children:(0,m.jsx)(c.Container,{containerId:`top`,items:e,children:(0,m.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-md)`},children:e.map(e=>(0,m.jsxs)(c.Item,{id:e,style:{...h,gridTemplateColumns:`var(--control-height) 1fr`,alignItems:`start`},children:[(0,m.jsx)(c.DragHandle,{title:`Перетащить ${e}`}),(0,m.jsxs)(`div`,{style:{display:`grid`,gap:`var(--space-sm)`},children:[(0,m.jsx)(`strong`,{children:e}),(0,m.jsx)(c.Container,{containerId:`parent:${e}`,items:n[e]??[],children:(0,m.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-xs)`},children:(n[e]??[]).map(e=>(0,m.jsxs)(c.Item,{id:e,style:{...h,background:`var(--surface-1)`},children:[(0,m.jsx)(c.DragHandle,{title:`Перетащить ${e}`}),(0,m.jsx)(`div`,{children:e})]},e))})})]})]},e))})})}),(0,m.jsx)(`div`,{style:{fontSize:14,opacity:.8},children:"Вложенные контейнеры сортируются независимо и используют общий `Sortable.Root`."})]})}},f.__docgenInfo={description:``,methods:[],displayName:`SortablePreview`,props:{containerId:{required:!0,tsType:{name:`string`},description:``},layout:{required:!0,tsType:{name:`union`,raw:`"vertical" | "horizontal" | "grid"`,elements:[{name:`literal`,value:`"vertical"`},{name:`literal`,value:`"horizontal"`},{name:`literal`,value:`"grid"`}]},description:``},initialItems:{required:!0,tsType:{name:`Array`,elements:[{name:`string`}],raw:`string[]`},description:``},itemWidth:{required:!1,tsType:{name:`string`},description:``},disabledIds:{required:!1,tsType:{name:`Array`,elements:[{name:`string`}],raw:`string[]`},description:``}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`function SortablePreview(props: SortablePreviewProps) {
+  const [items, setItems] = useState(props.initialItems);
+  const disabledIdSet = new Set(props.disabledIds ?? []);
+  return <div style={{
+    display: "grid",
+    gap: 12
+  }}>
+            <Sortable.Root onDragEnd={event => {
+      const reorder = getSortableReorderResult({
+        event,
+        items: {
+          [props.containerId]: items
+        }
+      });
+      if (!reorder) return;
+      setItems(prev => reorderItems(prev, reorder.fromIndex, reorder.toIndex) as string[]);
+    }}>
+                <Sortable.Container containerId={props.containerId} items={items} layout={props.layout}>
+                    <div style={getContainerStyle(props.layout)}>
+                        {items.map(item => <Sortable.Item key={item} id={item} disabled={disabledIdSet.has(item)} style={{
+            ...itemStyle,
+            minWidth: props.itemWidth
+          }}>
+                                <Sortable.DragHandle title={\`Перетащить \${item}\`} />
+                                <div>{item}</div>
+                            </Sortable.Item>)}
+                    </div>
+                </Sortable.Container>
+            </Sortable.Root>
+
+            <div style={{
+      fontSize: 14,
+      opacity: 0.8
+    }}>Порядок элементов изменяется локально в рамках story.</div>
+        </div>;
+}`,...f.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  args: {
+    containerId: "sortable-horizontal",
+    layout: "horizontal",
+    initialItems: horizontalItems,
+    itemWidth: "12rem"
+  }
+}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  args: {
+    containerId: "sortable-grid",
+    layout: "grid",
+    initialItems: gridItems
+  }
+}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  args: {
+    containerId: "sortable-disabled",
+    layout: "vertical",
+    initialItems: verticalItems,
+    disabledIds: ["Bravo", "Delta"]
+  }
+}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  args: {
+    containerId: "sortable-handle-only",
+    layout: "vertical",
+    initialItems: ["Пункт 1", "Пункт 2", "Пункт 3", "Пункт 4"]
+  }
+}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+  args: {
+    containerId: "top",
+    layout: "vertical",
+    initialItems: ["Группа A", "Группа B"]
+  },
+  render: () => {
+    const [topItems, setTopItems] = useState(["Группа A", "Группа B"]);
+    const [childItemsByGroup, setChildItemsByGroup] = useState<Record<string, string[]>>({
+      "Группа A": ["A.1", "A.2", "A.3"],
+      "Группа B": ["B.1", "B.2"]
+    });
+    return <div style={{
+      display: "grid",
+      gap: 12
+    }}>
+                <Sortable.Root onDragEnd={event => {
+        const reorder = getSortableReorderResult({
+          event,
+          items: {
+            top: topItems,
+            ...Object.fromEntries(topItems.map(item => [\`parent:\${item}\`, childItemsByGroup[item] ?? []]))
+          }
+        });
+        if (!reorder) return;
+        if (reorder.containerId === "top") {
+          setTopItems(prev => reorderItems(prev, reorder.fromIndex, reorder.toIndex) as string[]);
+          return;
+        }
+        const parentId = String(reorder.containerId).slice("parent:".length);
+        setChildItemsByGroup(prev => ({
+          ...prev,
+          [parentId]: reorderItems(prev[parentId] ?? [], reorder.fromIndex, reorder.toIndex) as string[]
+        }));
+      }}>
+                    <Sortable.Container containerId="top" items={topItems}>
+                        <div style={{
+            display: "grid",
+            gap: "var(--space-md)"
+          }}>
+                            {topItems.map(groupId => <Sortable.Item key={groupId} id={groupId} style={{
+              ...itemStyle,
+              gridTemplateColumns: "var(--control-height) 1fr",
+              alignItems: "start"
+            }}>
+                                    <Sortable.DragHandle title={\`Перетащить \${groupId}\`} />
+                                    <div style={{
+                display: "grid",
+                gap: "var(--space-sm)"
+              }}>
+                                        <strong>{groupId}</strong>
+                                        <Sortable.Container containerId={\`parent:\${groupId}\`} items={childItemsByGroup[groupId] ?? []}>
+                                            <div style={{
+                    display: "grid",
+                    gap: "var(--space-xs)"
+                  }}>
+                                                {(childItemsByGroup[groupId] ?? []).map(item => <Sortable.Item key={item} id={item} style={{
+                      ...itemStyle,
+                      background: "var(--surface-1)"
+                    }}>
+                                                        <Sortable.DragHandle title={\`Перетащить \${item}\`} />
+                                                        <div>{item}</div>
+                                                    </Sortable.Item>)}
+                                            </div>
+                                        </Sortable.Container>
+                                    </div>
+                                </Sortable.Item>)}
+                        </div>
+                    </Sortable.Container>
+                </Sortable.Root>
+
+                <div style={{
+        fontSize: 14,
+        opacity: 0.8
+      }}>
+                    Вложенные контейнеры сортируются независимо и используют общий \`Sortable.Root\`.
+                </div>
+            </div>;
+  }
+}`,...T.parameters?.docs?.source}}},E=[`SortablePreview`,`Basic`,`HorizontalList`,`GridCards`,`DisabledItems`,`HandleOnly`,`NestedContainers`]}));D();export{b as Basic,C as DisabledItems,S as GridCards,w as HandleOnly,x as HorizontalList,T as NestedContainers,f as SortablePreview,E as __namedExportsOrder,y as default,D as n,l as t};

package/storybook-static/assets/Splitter-Bn7AJiD_.js

@@ -0,0 +1,83 @@
+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{Basic as p,Constrained as m,Horizontal as h,NestedFourPanels as g,n as _,t as v}from"./Splitter.stories-CSvjKF-O.js";function y(e){let o={code:`code`,h2:`h2`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(a,{of:v,parameters:{docs:{toc:!0}}}),`
+`,(0,x.jsx)(c,{children:`Splitter`}),`
+`,(0,x.jsx)(i,{children:(0,x.jsx)(o.p,{children:`Компонент для интерактивного разделения рабочей области на две панели с поддержкой вложенности, клавиатуры и ограничений по размеру`})}),`
+`,(0,x.jsxs)(o.p,{children:[(0,x.jsx)(o.code,{children:`Splitter`}),` подходит для интерфейсов, где пользователь должен самостоятельно перераспределять пространство между соседними областями: навигацией и контентом, таблицей и деталями, превью и журналом событий.`]}),`
+`,(0,x.jsxs)(o.p,{children:[`Компонент ожидает ровно два прямых дочерних элемента. Если нужно больше областей, их лучше собирать через вложенные `,(0,x.jsx)(o.code,{children:`Splitter`}),`, чтобы сохранить простую модель поведения и предсказуемый resize.`]}),`
+`,(0,x.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,x.jsx)(u,{}),`
+`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { Splitter } from "@/shared/ui";
+
+export function Example() {
+	return (
+		<div style={{ height: 420 }}>
+			<Splitter initial={0.45}>
+				<div>Левая панель</div>
+				<div>Правая панель</div>
+			</Splitter>
+		</div>
+	);
+}
+`})}),`
+`,(0,x.jsx)(n,{of:p}),`
+`,(0,x.jsx)(o.h2,{id:`что-важно-про-поведение`,children:`Что важно про поведение`}),`
+`,(0,x.jsxs)(o.ul,{children:[`
+`,(0,x.jsx)(o.li,{children:`Во время перетаскивания компонент обновляет размеры панелей напрямую через DOM, а состояние React фиксирует только после завершения drag. Это уменьшает число лишних перерендеров и делает resize заметно плавнее.`}),`
+`,(0,x.jsxs)(o.li,{children:[`Значения `,(0,x.jsx)(o.code,{children:`initial`}),`, `,(0,x.jsx)(o.code,{children:`min`}),` и `,(0,x.jsx)(o.code,{children:`max`}),` автоматически нормализуются в диапазон `,(0,x.jsx)(o.code,{children:`0..1`}),`.`]}),`
+`,(0,x.jsxs)(o.li,{children:[`Если `,(0,x.jsx)(o.code,{children:`min`}),` и `,(0,x.jsx)(o.code,{children:`max`}),` заданы в обратном порядке, компонент сам исправляет диапазон.`]}),`
+`,(0,x.jsxs)(o.li,{children:[`Разделитель управляется клавиатурой: стрелки двигают границу пошагово, `,(0,x.jsx)(o.code,{children:`Home`}),` переводит в минимум, `,(0,x.jsx)(o.code,{children:`End`}),` в максимум.`]}),`
+`]}),`
+`,(0,x.jsx)(o.h2,{id:`разделение-на-2-части`,children:`Разделение на 2 части`}),`
+`,(0,x.jsx)(o.p,{children:`Это базовый и самый частый сценарий: левая панель под навигацию, правая под основное содержимое.`}),`
+`,(0,x.jsx)(l,{of:p}),`
+`,(0,x.jsx)(o.h2,{id:`горизонтальное-разделение`,children:`Горизонтальное разделение`}),`
+`,(0,x.jsx)(o.p,{children:`Горизонтальный режим полезен для layout вида "контент сверху, журнал или детали снизу".`}),`
+`,(0,x.jsx)(l,{of:h}),`
+`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { Splitter } from "@/shared/ui";
+
+export function HorizontalLayout() {
+	return (
+		<div style={{ height: 420 }}>
+			<Splitter direction="horizontal" initial={0.55}>
+				<div>Верхняя панель</div>
+				<div>Нижняя панель</div>
+			</Splitter>
+		</div>
+	);
+}
+`})}),`
+`,(0,x.jsx)(o.h2,{id:`разделение-на-4-части`,children:`Разделение на 4 части`}),`
+`,(0,x.jsxs)(o.p,{children:[`Чтобы собрать четыре независимые области, используйте `,(0,x.jsx)(o.code,{children:`Splitter`}),` внутри `,(0,x.jsx)(o.code,{children:`Splitter`}),`. Такой подход даёт предсказуемую вложенную структуру и хорошо масштабируется для сложных рабочих экранов.`]}),`
+`,(0,x.jsx)(l,{of:g}),`
+`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { Splitter } from "@/shared/ui";
+
+export function FourPaneLayout() {
+	return (
+		<div style={{ height: 420 }}>
+			<Splitter initial={0.48} min={0.25} max={0.75}>
+				<Splitter direction="horizontal" initial={0.58}>
+					<div>Левая верхняя панель</div>
+					<div>Левая нижняя панель</div>
+				</Splitter>
+				<Splitter direction="horizontal" initial={0.36}>
+					<div>Правая верхняя панель</div>
+					<div>Правая нижняя панель</div>
+				</Splitter>
+			</Splitter>
+		</div>
+	);
+}
+`})}),`
+`,(0,x.jsx)(o.h2,{id:`ограничения-и-клавиатура`,children:`Ограничения и клавиатура`}),`
+`,(0,x.jsx)(o.p,{children:`В этом сценарии удобно проверять, что пользователь не может схлопнуть область сильнее допустимого минимума, а разделитель стабильно работает не только мышью, но и с клавиатуры.`}),`
+`,(0,x.jsx)(l,{of:m}),`
+`,(0,x.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,x.jsxs)(o.ul,{children:[`
+`,(0,x.jsxs)(o.li,{children:[`Родительский контейнер должен иметь явную высоту, иначе `,(0,x.jsx)(o.code,{children:`Splitter`}),` не сможет корректно распределить пространство по вертикали.`]}),`
+`,(0,x.jsxs)(o.li,{children:[`Держите в `,(0,x.jsx)(o.code,{children:`Splitter`}),` только два прямых потомка. Для трёх и более областей используйте вложенность.`]}),`
+`,(0,x.jsx)(o.li,{children:`Если в панелях живут тяжёлые таблицы, графики или сложные формы, лучше избегать лишней бизнес-логики, завязанной на каждое движение разделителя.`}),`
+`,(0,x.jsx)(o.li,{children:`Для touch-сценариев разделитель уже блокирует нативный скролл жеста на самом handle, поэтому drag остаётся предсказуемым.`}),`
+`]}),`
+`,(0,x.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,x.jsx)(s,{of:v}),`
+`,(0,x.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,x.jsx)(r,{includePrimary:!1})]})}function b(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,x.jsx)(n,{...e,children:(0,x.jsx)(y,{...e})}):y(e)}var x;e((()=>{x=d(),f(),o(),_()}))();export{b as default};

package/storybook-static/assets/Splitter-D-LmmQad.css

@@ -0,0 +1 @@
+.wAovST{width:100%;height:100%;display:flex;overflow:hidden}.wAovST.QVVMwe{flex-direction:row}.wAovST.QVVMwe .H43AJ8{cursor:col-resize;border-left:var(--border);border-right:var(--border);margin-inline:var(--space-md)}.wAovST.pgo8sW{flex-direction:column}.wAovST.pgo8sW .H43AJ8{cursor:row-resize;margin-block:var(--space-md)}._8fCvqA{flex-grow:0;flex-shrink:0}.t6RFcI{flex-grow:1}._8fCvqA,.t6RFcI{min-width:0;min-height:0;overflow:auto}.H43AJ8{flex-basis:var(--space-sm);border-radius:var(--radius-sm);border:var(--border);background-color:var(--border-0);-webkit-user-select:none;user-select:none;touch-action:none;flex-grow:0;flex-shrink:0;position:relative}.H43AJ8:hover{border-color:var(--border-1);background-color:var(--border-1)}.H43AJ8:active{border-color:var(--border-2);background-color:var(--border-2)}

package/storybook-static/assets/Splitter.stories-CSvjKF-O.js

@@ -0,0 +1,22 @@
+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";var s,c,l,u,d,f,p,m=n((()=>{s=`wAovST`,c=`QVVMwe`,l=`H43AJ8`,u=`pgo8sW`,d=`_8fCvqA`,f=`t6RFcI`,p={splitter:s,vertical:c,separator:l,horizontal:u,topLeft:d,bottomRight:f}}));function h(e,t,n){return Math.min(n,Math.max(t,e))}function g(e,t){return Number.isFinite(e)?h(e,0,1):t}function _(e,t){let n=g(e,D),r=g(t,O);return n<=r?[n,r]:[r,n]}function v(e,t){return e===`vertical`?t.clientX:t.clientY}function y(e,t){return e===`vertical`?t.width:t.height}function b(e,t){if(e===`vertical`){if(t===`ArrowLeft`)return-.02;if(t===`ArrowRight`)return A}if(e===`horizontal`){if(t===`ArrowUp`)return-.02;if(t===`ArrowDown`)return A}return null}function x(e,t){return t===`start`?0:t===`end`?1:e}function S({direction:e,initial:t,min:n,max:r,collapsedPane:i}){let[a,o]=_(n,r),s=(0,T.useRef)(null),c=(0,T.useRef)(null),l=(0,T.useRef)(null),u=(0,T.useRef)(null),d=(0,T.useRef)(null),f=(0,T.useRef)(null),p=(0,T.useRef)(0),m=(0,T.useRef)(h(g(t,k),a,o)),S=(0,T.useRef)(t),[C,w]=(0,T.useState)(()=>h(g(t,k),a,o)),E=(0,T.useRef)(C),D=(0,T.useCallback)(e=>{E.current=e,c.current?.style.setProperty(`flex-basis`,`${x(e,i)*100}%`),l.current?.setAttribute(`aria-valuenow`,`${Math.round(e*100)}`)},[i]),O=()=>{if(f.current!==null&&(cancelAnimationFrame(f.current),f.current=null),d.current===null)return E.current;let e=d.current;return d.current=null,D(e),e},A=e=>{d.current=e,f.current===null&&(f.current=requestAnimationFrame(()=>{f.current=null,d.current!==null&&D(d.current)}))},j=()=>{u.current?.(),u.current=null},M=e=>{O(),w(h(e,a,o))};return(0,T.useLayoutEffect)(()=>{D(C)},[D,C]),(0,T.useEffect)(()=>{w(e=>{let n=S.current!==t;return S.current=t,h(n?g(t,k):e,a,o)})},[t,a,o]),(0,T.useEffect)(()=>()=>{j(),f.current!==null&&cancelAnimationFrame(f.current)},[]),{containerRef:s,topLeftRef:c,separatorRef:l,ratio:C,minRatio:a,maxRatio:o,handleSeparatorPointerDown:t=>{if(t.button!==0)return;t.preventDefault();let n=s.current;if(!n)return;j();try{t.currentTarget.setPointerCapture?.(t.pointerId)}catch{}p.current=v(e,t),m.current=E.current;let r=t=>{let r=y(e,n.getBoundingClientRect());if(r<=0)return;let i=v(e,t)-p.current,s=h(m.current+i/r,a,o);A(s)},i=()=>{j(),w(O())};u.current=()=>{document.removeEventListener(`pointermove`,r),document.removeEventListener(`pointerup`,i),document.removeEventListener(`pointercancel`,i)},document.addEventListener(`pointermove`,r),document.addEventListener(`pointerup`,i),document.addEventListener(`pointercancel`,i)},handleSeparatorKeyDown:t=>{let n=b(e,t.key);if(n!==null){t.preventDefault(),M(E.current+n);return}if(t.key===`Home`){t.preventDefault(),M(a);return}t.key===`End`&&(t.preventDefault(),M(o))}}}function C({className:e,direction:t,left:n,right:r,collapsedPane:i,logic:o}){let{containerRef:s,topLeftRef:c,separatorRef:l,ratio:u,minRatio:d,maxRatio:f,handleSeparatorPointerDown:m,handleSeparatorKeyDown:h}=o,g=x(u,i),_=i===`start`,v=i===`end`,y=i===null;return(0,E.jsxs)(`div`,{ref:s,className:a(p.splitter,p[t],e),children:[(0,E.jsx)(`div`,{ref:c,className:p.topLeft,style:{flexBasis:`${g*100}%`},hidden:_,children:n}),(0,E.jsx)(`div`,{ref:l,hidden:!y,role:`separator`,"aria-orientation":t===`vertical`?`vertical`:`horizontal`,"aria-valuemin":Math.round(d*100),"aria-valuemax":Math.round(f*100),"aria-valuenow":Math.round(u*100),tabIndex:y?0:-1,onPointerDown:m,onKeyDown:h,className:p.separator}),(0,E.jsx)(`div`,{className:p.bottomRight,hidden:v,children:r})]})}function w({direction:e=`vertical`,initial:t=k,min:n=D,max:r=O,className:i,collapsedPane:a=null,children:o}){let[s,c]=T.Children.toArray(o),l=S({direction:e,initial:t,min:n,max:r,collapsedPane:a});return c?(0,E.jsx)(C,{className:i,direction:e,left:s,right:c,collapsedPane:a,logic:l}):s}var T,E,D,O,k,A,j=n((()=>{T=t(r(),1),o(),m(),E=i(),D=.1,O=.9,k=.7,A=.02,w.__docgenInfo={description:``,methods:[],displayName:`Splitter`,props:{direction:{defaultValue:{value:`"vertical"`,computed:!1},required:!1},initial:{defaultValue:{value:`0.7`,computed:!1},required:!1},min:{defaultValue:{value:`0.1`,computed:!1},required:!1},max:{defaultValue:{value:`0.9`,computed:!1},required:!1},collapsedPane:{defaultValue:{value:`null`,computed:!1},required:!1}}}})),M=e({Basic:()=>B,Constrained:()=>U,Horizontal:()=>V,NestedFourPanels:()=>H,__namedExportsOrder:()=>W,default:()=>z});function N({children:e}){return(0,R.jsx)(`div`,{style:{height:490},children:e})}function P({title:e,description:t,items:n=[]}){return(0,R.jsxs)(`div`,{style:{height:`100%`,padding:`var(--space-md)`,borderRadius:`var(--radius-md)`,border:`var(--border)`,display:`grid`,alignContent:`start`,gap:`var(--space-md)`},className:`scrollable`,children:[(0,R.jsxs)(`div`,{children:[(0,R.jsx)(`h2`,{children:e}),(0,R.jsx)(`p`,{children:t})]}),n.length>0&&(0,R.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-sm)`},children:n.map(e=>(0,R.jsx)(`div`,{style:{padding:`var(--space-sm) var(--space-md)`,borderRadius:`var(--radius-sm)`,background:`var(--surface-1)`},children:e},e))})]})}function F(e){return(0,R.jsx)(N,{children:(0,R.jsxs)(w,{...e,children:[(0,R.jsx)(P,{title:`Навигация`,description:`Левая панель подходит для фильтров, дерева разделов, списка сущностей или структуры документа.`,items:[`Раздел 1`,`Раздел 2`,`Раздел 3`,`Раздел 4`]}),(0,R.jsx)(P,{title:`Рабочая область`,description:`Правая панель обычно содержит детальный контент: таблицу, карточку объекта, форму или вкладки.`,items:[`Текущий документ`,`История изменений`,`Комментарии`,`Связанные объекты`,`Параметры отображения`]})]})})}function I(){return(0,R.jsx)(N,{children:(0,R.jsxs)(w,{initial:.48,min:.25,max:.75,children:[(0,R.jsxs)(w,{direction:`horizontal`,initial:.58,min:.25,max:.75,children:[(0,R.jsx)(P,{title:`Список`,description:`Верхняя левая панель может держать навигацию или результат поиска.`,items:[`Поиск`,`Фильтр по статусу`,`Группы`,`Быстрые действия`]}),(0,R.jsx)(P,{title:`Подробности`,description:`Нижняя левая панель подходит для связанного контента по выбранному элементу.`,items:[`Свойства`,`Ответственный`,`Теги`,`Контекст`]})]}),(0,R.jsxs)(w,{direction:`horizontal`,initial:.36,min:.2,max:.8,children:[(0,R.jsx)(P,{title:`Превью`,description:`Верхняя правая панель может содержать документ, схему, карту или live-просмотр.`,items:[`Предпросмотр файла`,`Масштаб 100%`,`Слой подсветки`]}),(0,R.jsx)(P,{title:`Журнал`,description:`Нижняя правая панель часто используется для событий, логов или вспомогательных данных.`,items:[`10:31 Импорт завершён`,`10:34 Индексация`,`10:36 Синхронизация`,`10:38 Проверка целостности`]})]})]})})}function L(e){return(0,R.jsx)(N,{children:(0,R.jsxs)(w,{...e,children:[(0,R.jsx)(P,{title:`Фиксированные ограничения`,description:"У этой панели ужаты границы `min` и `max`, поэтому splitter нельзя увести слишком далеко.",items:[`Нажмите на разделитель`,`Используйте стрелки`,`Home = минимум`,`End = максимум`]}),(0,R.jsx)(P,{title:`Проверка доступности`,description:`Сценарий помогает проверить клавиатурное управление, устойчивость границ и отсутствие рывков при drag.`,items:[`ArrowLeft / ArrowRight`,`ArrowUp / ArrowDown`,`Перетаскивание мышью`,`Перетаскивание на тач-устройстве`]})]})})}var R,z,B,V,H,U,W,G=n((()=>{j(),R=i(),z={title:`Shared/UI/Splitter`,component:w,parameters:{atomicCanvas:!0,layout:`padded`},args:{direction:`vertical`,initial:.45,min:.15,max:.85},argTypes:{direction:{description:`Направление разделения: вертикальное по ширине или горизонтальное по высоте.`,control:`inline-radio`,options:[`vertical`,`horizontal`]},initial:{description:`Начальная доля первой панели в диапазоне от 0 до 1.`,control:{type:`range`,min:0,max:1,step:.01}},min:{description:`Минимальная доля первой панели. Значение автоматически нормализуется в диапазон 0..1.`,control:{type:`range`,min:0,max:1,step:.01}},max:{description:"Максимальная доля первой панели. Если `min` и `max` перепутаны местами, компонент сам исправит диапазон.",control:{type:`range`,min:0,max:1,step:.01}},className:{description:`Дополнительный CSS-класс корневого контейнера.`,control:`text`},children:{description:`Splitter ожидает ровно два прямых дочерних элемента. Для большего количества областей используйте вложенные Splitter.`,control:!1}}},B={name:`Две панели`,render:e=>(0,R.jsx)(F,{...e})},V={name:`Горизонтальное разделение`,render:e=>(0,R.jsx)(F,{...e}),args:{direction:`horizontal`,initial:.55}},H={name:`Четыре панели через вложенность`,render:()=>(0,R.jsx)(I,{})},U={name:`Ограничения и клавиатура`,render:e=>(0,R.jsx)(L,{...e}),args:{initial:.35,min:.25,max:.55}},B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{
+  name: "Две панели",
+  render: args => <TwoPaneLayout {...args} />
+}`,...B.parameters?.docs?.source}}},V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
+  name: "Горизонтальное разделение",
+  render: args => <TwoPaneLayout {...args} />,
+  args: {
+    direction: "horizontal",
+    initial: 0.55
+  }
+}`,...V.parameters?.docs?.source}}},H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:`{
+  name: "Четыре панели через вложенность",
+  render: () => <NestedFourPaneLayout />
+}`,...H.parameters?.docs?.source}}},U.parameters={...U.parameters,docs:{...U.parameters?.docs,source:{originalSource:`{
+  name: "Ограничения и клавиатура",
+  render: args => <ConstrainedLayout {...args} />,
+  args: {
+    initial: 0.35,
+    min: 0.25,
+    max: 0.55
+  }
+}`,...U.parameters?.docs?.source}}},W=[`Basic`,`Horizontal`,`NestedFourPanels`,`Constrained`]}));G();export{B as Basic,U as Constrained,V as Horizontal,H as NestedFourPanels,W as __namedExportsOrder,z as default,G as n,M as t};