@ryuzaki13/react-foundation-ui 1.2.7 → 1.2.8

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

@@ -1,63 +0,0 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{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-AFZ3sK6N.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};

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

@@ -1,77 +0,0 @@
-import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,o,t as s}from"./slider-D7YUv9lW.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-CEmHsnm3.js

@@ -1,58 +0,0 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{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-CDS4YS_3.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/Sortable-BwTtVBVt.js

@@ -1,72 +0,0 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{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--yPzhn7U.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/Splitter.stories-BLDqjnbb.js

@@ -1,22 +0,0 @@
-import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,i as o}from"./utils-DKOsD-4R.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};

package/storybook-static/assets/Switch-cwvSIlOe.js

@@ -1,36 +0,0 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{BiState as p,Disabled as m,TriState as h,n as g,t as _}from"./Switch.stories-BNMmFr3z.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:`Switch`}),`
-`,(0,b.jsx)(i,{children:`Переключатель в виде слайдера для быстрых включений, отключений и tri-state сценариев`}),`
-`,(0,b.jsx)(o.p,{children:`Switch уже имеет живые 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 { Switch } from "@/shared/ui";
-
-export function Example() {
-	const [value, setValue] = useState(undefined);
-
-	return <Switch triState label="Автовыбор" value={value} onChange={setValue} />;
-}
-`})}),`
-`,(0,b.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
-`,(0,b.jsxs)(o.ul,{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/Switch.stories-BNMmFr3z.js

@@ -1,26 +0,0 @@
-import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,i as o}from"./utils-DKOsD-4R.js";import{It as s,ct as c,t as l}from"./lucide-react-DiTL2FZl.js";import{n as u,t as d}from"./ui.module-wFHXkJzp.js";var f,p,m,h,g,_=n((()=>{f=`Or5LYA`,p=`w0AMfA`,m=`P1x4lq`,h=`-ZVOZo`,g={switchWrapper:f,switch:`qge3io`,iconWrapper:p,auto:m,checked:h}}));function v(e){let{label:t,description:n,disabled:r,checkedIcon:i=(0,b.jsx)(c,{}),uncheckedIcon:o=(0,b.jsx)(s,{}),className:l,type:d,id:f,size:p,placeholder:m,onChange:h,value:_,triState:v,...x}=e,S=(0,y.useId)(),C=f??S,w=n?`${C}-description`:void 0,T=t?`${C}-label`:void 0,E=()=>{if(!e.triState){e.onChange(!e.value);return}if(e.value===void 0){e.onChange(!0);return}if(e.value===!0){e.onChange(!1);return}e.value===!1&&e.onChange(void 0)},D=typeof e.value==`boolean`?e.value:!1,O=e.triState&&typeof e.value!=`boolean`,k=x[`aria-label`]??(t?void 0:`Переключатель`);return(0,b.jsxs)(`div`,{className:a(u.uiElement,r&&u.disabled),"aria-disabled":r||void 0,children:[t&&(0,b.jsxs)(`div`,{id:T,className:u.uiLabel,children:[t,`:`]}),n&&(0,b.jsx)(`p`,{id:w,className:u.uiDescription,children:n}),(0,b.jsx)(`button`,{...x,id:C,type:d??`button`,role:`switch`,disabled:r,"aria-checked":D,"aria-describedby":w,"aria-labelledby":T,"aria-label":k,"aria-disabled":r,"data-ui":`switch`,"data-action":`toggle-switch`,onClick:E,className:a(u.uiInputControl,g.switchWrapper,l),children:(0,b.jsx)(`div`,{className:g.switch,"data-disabled":r||void 0,children:O?(0,b.jsx)(`div`,{className:a(g.iconWrapper,g.auto,g.checked),children:`Auto`}):(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(`div`,{className:a(g.iconWrapper,!e.value&&g.checked),children:o}),(0,b.jsx)(`div`,{className:a(g.iconWrapper,e.value&&g.checked),children:i})]})})})]})}var y,b,x=n((()=>{y=t(r(),1),o(),l(),d(),_(),b=i(),v.__docgenInfo={description:`Переключатель boolean-состояния в виде слайдера. Подходит для быстрых настроек и включения/отключения опций.`,methods:[],displayName:`Switch`}})),S=e({BiState:()=>E,Disabled:()=>O,TriState:()=>D,__namedExportsOrder:()=>k,default:()=>T}),C,w,T,E,D,O,k,A=n((()=>{C=t(r(),1),x(),w=i(),T={title:`Shared/UI/Switch`,component:v,args:{label:`Режим обработки`,description:`Переключение состояния`,value:!1,onChange:()=>{},triState:!1,disabled:!1},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок переключателя.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},value:{description:"Текущее значение (`boolean` или `undefined` в tri-state).",control:!1},onChange:{description:`Вызывается при изменении состояния.`,control:!1},triState:{description:"Включает трехсостоянный режим (`undefined → true → false`).",control:`boolean`},checkedIcon:{description:"Кастомная иконка для состояния `true`.",control:!1},uncheckedIcon:{description:"Кастомная иконка для состояния `false`.",control:!1},disabled:{description:`Блокирует переключение.`,control:`boolean`}}},E={render:e=>{let[t,n]=(0,C.useState)(!1);return(0,w.jsx)(v,{...e,value:t,onChange:n,triState:!1})}},D={render:e=>{let[t,n]=(0,C.useState)(void 0);return(0,w.jsxs)(`div`,{style:{display:`grid`,gap:8},children:[(0,w.jsx)(v,{...e,value:t,onChange:n,triState:!0}),(0,w.jsxs)(`div`,{children:[`Текущее значение: `,String(t)]})]})},args:{triState:!0,value:void 0}},O={args:{disabled:!0,value:!0}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
-  render: args => {
-    const [value, setValue] = useState(false);
-    return <Switch {...args} value={value} onChange={setValue} triState={false} />;
-  }
-}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
-  render: args => {
-    const [value, setValue] = useState<boolean | undefined>(undefined);
-    return <div style={{
-      display: "grid",
-      gap: 8
-    }}>
-                <Switch {...args} value={value} onChange={setValue} triState />
-                <div>Текущее значение: {String(value)}</div>
-            </div>;
-  },
-  args: {
-    triState: true,
-    value: undefined
-  }
-}`,...D.parameters?.docs?.source}}},O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
-  args: {
-    disabled: true,
-    value: true
-  }
-}`,...O.parameters?.docs?.source}}},k=[`BiState`,`TriState`,`Disabled`]}));A();export{E as BiState,O as Disabled,D as TriState,k as __namedExportsOrder,T as default,A as n,S as t};

package/storybook-static/assets/Table-BScnaCwl.js

@@ -1,197 +0,0 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{Basic as p,Empty as m,Fetching as h,Loading as g,MultiSelect as _,ReachEnd as v,WithColumnPinning as y,WithDisabledRows as b,WithFormattingPipeline as x,WithFormulaColumn as S,WithHiddenZero as C,WithMergedDuplicates as w,WithODataMetadataAdapter as T,WithUseODataTableColumnsBuildHook as E,WithUseODataTableColumnsEnrichHook as D,n as O,t as k}from"./Table.stories-BZOmuXFd.js";function A(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(a,{of:k,parameters:{docs:{toc:!0}}}),`
-`,(0,M.jsx)(c,{children:`Table`}),`
-`,(0,M.jsxs)(i,{children:[`Плоская таблица как React-альтернатива `,(0,M.jsx)(o.code,{children:`sap.m.Table`})]}),`
-`,(0,M.jsxs)(o.p,{children:[(0,M.jsx)(o.code,{children:`Table`}),` предназначен для плоских данных и по поведению осознанно сближен с `,(0,M.jsx)(o.code,{children:`TreeTable`}),`.
-Оба компонента используют общий табличный каркас, поэтому здесь совпадают states загрузки, визуальная структура, обработка выбора строк и клавиатурная активация.
-`,(0,M.jsx)(o.code,{children:`Table`}),` также поддерживает декларативное форматирование через `,(0,M.jsx)(o.code,{children:`meta.formatting`}),`, formulas, безопасное pipeline-formatting и optional OData adapter.`]}),`
-`,(0,M.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,M.jsx)(u,{}),`
-`,(0,M.jsx)(n,{of:p}),`
-`,(0,M.jsx)(o.pre,{children:(0,M.jsx)(o.code,{className:`language-tsx`,children:`import { Table, type TableColumnDef } from "@/shared/ui";
-
-interface DealRow {
-	id: string;
-	number: string;
-	client: string;
-	amount: string;
-}
-
-const columns: TableColumnDef<DealRow>[] = [
-	{
-		id: "number",
-		accessorKey: "number",
-		header: "Номер",
-		meta: { width: "9em" }
-	},
-	{
-		id: "client",
-		accessorKey: "client",
-		header: "Клиент",
-		meta: { width: "14em" }
-	},
-	{
-		id: "amount",
-		accessorKey: "amount",
-		header: "Сумма",
-		meta: { width: "10em", align: "right" }
-	}
-];
-
-export function Example({ rows }: { rows: DealRow[] }) {
-	return <Table data={rows} columns={columns} getRowId={(row) => row.id} selectionMode="single" height="20em" />;
-}
-`})}),`
-`,(0,M.jsx)(o.h2,{id:`форматирование-ячеек`,children:`Форматирование ячеек`}),`
-`,(0,M.jsxs)(o.p,{children:[(0,M.jsx)(o.code,{children:`meta.formatting`}),` добавляет к колонке декларативный runtime-контракт:`]}),`
-`,(0,M.jsxs)(o.ul,{children:[`
-`,(0,M.jsxs)(o.li,{children:[`typed formatting по `,(0,M.jsx)(o.code,{children:`role/type`}),`;`]}),`
-`,(0,M.jsx)(o.li,{children:`formula-based вычисление значения;`}),`
-`,(0,M.jsxs)(o.li,{children:[`pipeline display-formatting (`,(0,M.jsx)(o.code,{children:`normalizeLeadingZeros`}),`, `,(0,M.jsx)(o.code,{children:`resolveValueState`}),`, `,(0,M.jsx)(o.code,{children:`typedValueFormat`}),`);`]}),`
-`,(0,M.jsxs)(o.li,{children:[(0,M.jsx)(o.code,{children:`emptyWhenZero`}),` для скрытия нулевых значений;`]}),`
-`,(0,M.jsxs)(o.li,{children:[(0,M.jsx)(o.code,{children:`overflowTooltip`}),` для длинного текста.`]}),`
-`]}),`
-`,(0,M.jsx)(o.p,{children:`Важно:`}),`
-`,(0,M.jsxs)(o.ul,{children:[`
-`,(0,M.jsxs)(o.li,{children:[(0,M.jsx)(o.code,{children:`meta.formatting`}),` применяется только если у колонки нет кастомного `,(0,M.jsx)(o.code,{children:`cell`}),`;`]}),`
-`,(0,M.jsx)(o.li,{children:`formulas и pipeline компилируются один раз на снимок колонок;`}),`
-`,(0,M.jsxs)(o.li,{children:[`ошибки formula/pipeline не роняют таблицу и не подставляют универсальный `,(0,M.jsx)(o.code,{children:`0`}),`;`]}),`
-`,(0,M.jsxs)(o.li,{children:[`OData adapter остаётся внешней прослойкой, а не частью `,(0,M.jsx)(o.code,{children:`Table`}),`.`]}),`
-`]}),`
-`,(0,M.jsx)(o.pre,{children:(0,M.jsx)(o.code,{className:`language-tsx`,children:`const columns: TableColumnDef<Row>[] = [
-	{
-		id: "amount",
-		accessorKey: "amount",
-		header: "Сумма",
-		meta: {
-			align: "right",
-			formatting: {
-				role: "measure",
-				type: "decimal",
-				emptyWhenZero: true
-			}
-		}
-	}
-];
-`})}),`
-`,(0,M.jsxs)(o.p,{children:[`Для OData-сценариев можно не прописывать `,(0,M.jsx)(o.code,{children:`role/type`}),` вручную, а обогатить колонки через adapter:`]}),`
-`,(0,M.jsx)(o.pre,{children:(0,M.jsx)(o.code,{className:`language-tsx`,children:`import { enrichTableColumnsWithODataFormatting } from "@ryuzaki13/react-foundation-lib/table";
-
-const columns = enrichTableColumnsWithODataFormatting(manualColumns, metadata.columns);
-`})}),`
-`,(0,M.jsx)(o.h2,{id:`слияние-дубликатов`,children:`Слияние дубликатов`}),`
-`,(0,M.jsxs)(o.p,{children:[(0,M.jsx)(o.code,{children:`meta.mergeDuplicates`}),` включает display-only слияние подряд идущих одинаковых raw-значений без изменения структуры строк.`]}),`
-`,(0,M.jsx)(o.p,{children:`Важно:`}),`
-`,(0,M.jsxs)(o.ul,{children:[`
-`,(0,M.jsxs)(o.li,{children:[`сравнение идёт по `,(0,M.jsx)(o.code,{children:`cell.getValue()`}),`, а не по formatted display;`]}),`
-`,(0,M.jsx)(o.li,{children:`объединяются только подряд идущие строки;`}),`
-`,(0,M.jsxs)(o.li,{children:[(0,M.jsx)(o.code,{children:`null`}),`, `,(0,M.jsx)(o.code,{children:`undefined`}),` и пустая строка `,(0,M.jsx)(o.code,{children:`""`}),` не объединяются;`]}),`
-`,(0,M.jsx)(o.li,{children:`повторяющееся значение остаётся только в первой строке группы, а ниже рендерятся пустые ячейки;`}),`
-`,(0,M.jsx)(o.li,{children:`если сервер не отсортировал данные так, чтобы дубликаты шли подряд, слияния не будет.`}),`
-`]}),`
-`,(0,M.jsx)(o.pre,{children:(0,M.jsx)(o.code,{className:`language-tsx`,children:`const columns: TableColumnDef<Row>[] = [
-	{
-		id: "division",
-		accessorKey: "division",
-		header: "Дивизион",
-		meta: {
-			mergeDuplicates: true
-		}
-	}
-];
-`})}),`
-`,(0,M.jsxs)(o.h2,{id:`хук-useodatatablecolumns`,children:[`Хук `,(0,M.jsx)(o.code,{children:`useODataTableColumns`})]}),`
-`,(0,M.jsxs)(o.p,{children:[`Наиболее частый кейс - работать не с pure-helper напрямую, а с hook-слоем `,(0,M.jsx)(o.code,{children:`useODataTableColumns(...)`}),`.`]}),`
-`,(0,M.jsxs)(o.p,{children:[(0,M.jsx)(o.code,{children:`build`}),` стоит выбирать, когда колонки можно полностью собрать из `,(0,M.jsx)(o.code,{children:`metadata.columns`}),`:`]}),`
-`,(0,M.jsx)(o.pre,{children:(0,M.jsx)(o.code,{className:`language-tsx`,children:`import { useODataTableColumns } from "@ryuzaki13/react-foundation-api/odata";
-import { Table } from "@/shared/ui";
-
-function DealsTable({ rows }: { rows: DealRow[] }) {
-	const { columns, metadata, isLoading } = useODataTableColumns<DealRow>({
-		service: "ZSD_SALES_SRV",
-		entity: "DealSet",
-		mode: "build"
-	});
-
-	return (
-		<Table
-			title={metadata?.title ?? "Сделки"}
-			data={rows}
-			columns={columns}
-			isLoading={isLoading}
-			getRowId={(row) => row.id}
-			selectionMode="single"
-		/>
-	);
-}
-`})}),`
-`,(0,M.jsxs)(o.p,{children:[(0,M.jsx)(o.code,{children:`enrich`}),` подходит, когда колонки уже описаны вручную и нужно только дозаполнить `,(0,M.jsx)(o.code,{children:`meta.formatting.role/type`}),`:`]}),`
-`,(0,M.jsx)(o.pre,{children:(0,M.jsx)(o.code,{className:`language-tsx`,children:`import { useODataTableColumns } from "@ryuzaki13/react-foundation-api/odata";
-import { Table } from "@/shared/ui";
-
-const manualColumns: TableColumnDef<DealRow>[] = [
-	{ id: "product", accessorKey: "product", header: "Позиция" },
-	{ id: "createdAt", accessorKey: "createdAt", header: "Создано" },
-	{ id: "totalAmount", accessorKey: "totalAmount", header: "Итог", meta: { align: "right" } }
-];
-
-function DealsTable({ rows }: { rows: DealRow[] }) {
-	const { columns, isLoading } = useODataTableColumns<DealRow>({
-		service: "ZSD_SALES_SRV",
-		entity: "DealSet",
-		mode: "enrich",
-		columns: manualColumns
-	});
-
-	return <Table data={rows} columns={columns} isLoading={isLoading} getRowId={(row) => row.id} selectionMode="single" />;
-}
-`})}),`
-`,(0,M.jsx)(o.p,{children:`Практическая семантика хука:`}),`
-`,(0,M.jsxs)(o.ul,{children:[`
-`,(0,M.jsxs)(o.li,{children:[(0,M.jsx)(o.code,{children:`columns`}),` уже готовы для прямой передачи в `,(0,M.jsx)(o.code,{children:`Table`}),`;`]}),`
-`,(0,M.jsxs)(o.li,{children:[(0,M.jsx)(o.code,{children:`metadata`}),` можно использовать для заголовка, пустых состояний или дополнительной UI-подписи;`]}),`
-`,(0,M.jsxs)(o.li,{children:[(0,M.jsx)(o.code,{children:`isLoading`}),` нужно прокидывать в `,(0,M.jsx)(o.code,{children:`Table`}),`, чтобы сохранить единое табличное состояние загрузки;`]}),`
-`,(0,M.jsxs)(o.li,{children:[`сам `,(0,M.jsx)(o.code,{children:`Table`}),` остаётся OData-независимым и получает только готовые `,(0,M.jsx)(o.code,{children:`columns`}),`.`]}),`
-`]}),`
-`,(0,M.jsx)(o.h2,{id:`что-важно-знать`,children:`Что важно знать`}),`
-`,(0,M.jsxs)(o.ul,{children:[`
-`,(0,M.jsx)(o.li,{children:`Компонент принимает именно плоский массив строк и не содержит древовидной логики.`}),`
-`,(0,M.jsxs)(o.li,{children:[`Поведение `,(0,M.jsx)(o.code,{children:`selectionMode`}),` идентично `,(0,M.jsx)(o.code,{children:`TreeTable`}),`: `,(0,M.jsx)(o.code,{children:`single`}),` не снимает выбор повторным кликом по уже выбранной строке.`]}),`
-`,(0,M.jsxs)(o.li,{children:[(0,M.jsx)(o.code,{children:`height`}),` и ширины колонок можно задавать строками в `,(0,M.jsx)(o.code,{children:`em`}),`, `,(0,M.jsx)(o.code,{children:`rem`}),`, `,(0,M.jsx)(o.code,{children:`%`}),` и других CSS-единицах; числовые значения трактуются как `,(0,M.jsx)(o.code,{children:`em`}),`.`]}),`
-`,(0,M.jsxs)(o.li,{children:[(0,M.jsx)(o.code,{children:`onReachEnd`}),` срабатывает внутри scroll-контейнера и подходит для постепенной догрузки длинного списка.`]}),`
-`,(0,M.jsxs)(o.li,{children:[(0,M.jsx)(o.code,{children:`Table`}),` не зависит от OData напрямую и продолжает работать на plain local data без metadata.`]}),`
-`]}),`
-`,(0,M.jsx)(o.h2,{id:`сценарии`,children:`Сценарии`}),`
-`,(0,M.jsx)(o.h3,{id:`базовый-режим`,children:`Базовый режим`}),`
-`,(0,M.jsx)(l,{of:p}),`
-`,(0,M.jsx)(o.h3,{id:`left-pinning-столбцов`,children:`Left-pinning столбцов`}),`
-`,(0,M.jsx)(l,{of:y}),`
-`,(0,M.jsx)(o.h3,{id:`множественный-выбор`,children:`Множественный выбор`}),`
-`,(0,M.jsx)(l,{of:_}),`
-`,(0,M.jsx)(o.h3,{id:`строки-с-ограничением-выбора`,children:`Строки с ограничением выбора`}),`
-`,(0,M.jsx)(l,{of:b}),`
-`,(0,M.jsx)(o.h3,{id:`фоновое-обновление-данных`,children:`Фоновое обновление данных`}),`
-`,(0,M.jsx)(l,{of:h}),`
-`,(0,M.jsx)(o.h3,{id:`пустая-таблица`,children:`Пустая таблица`}),`
-`,(0,M.jsx)(l,{of:m}),`
-`,(0,M.jsx)(o.h3,{id:`достижение-конца-списка`,children:`Достижение конца списка`}),`
-`,(0,M.jsx)(l,{of:v}),`
-`,(0,M.jsx)(o.h3,{id:`первичная-загрузка`,children:`Первичная загрузка`}),`
-`,(0,M.jsx)(l,{of:g}),`
-`,(0,M.jsx)(o.h3,{id:`formula-based-колонка`,children:`Formula-based колонка`}),`
-`,(0,M.jsx)(l,{of:S}),`
-`,(0,M.jsx)(o.h3,{id:`pipeline-display-formatting`,children:`Pipeline display-formatting`}),`
-`,(0,M.jsx)(l,{of:x}),`
-`,(0,M.jsx)(o.h3,{id:`скрытие-нулевых-значений`,children:`Скрытие нулевых значений`}),`
-`,(0,M.jsx)(l,{of:C}),`
-`,(0,M.jsx)(o.h3,{id:`слияние-дубликатов-1`,children:`Слияние дубликатов`}),`
-`,(0,M.jsx)(l,{of:w}),`
-`,(0,M.jsx)(o.h3,{id:`odata-metadata-adapter`,children:`OData metadata adapter`}),`
-`,(0,M.jsx)(l,{of:T}),`
-`,(0,M.jsx)(o.h3,{id:`useodatatablecolumns-build`,children:`useODataTableColumns: build`}),`
-`,(0,M.jsx)(l,{of:E}),`
-`,(0,M.jsx)(o.h3,{id:`useodatatablecolumns-enrich`,children:`useODataTableColumns: enrich`}),`
-`,(0,M.jsx)(l,{of:D}),`
-`,(0,M.jsx)(o.h2,{id:`api`,children:`API`}),`
-`,(0,M.jsx)(s,{of:k}),`
-`,(0,M.jsx)(o.h2,{id:`все-stories`,children:`Все stories`}),`
-`,(0,M.jsx)(r,{includePrimary:!1})]})}function j(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,M.jsx)(n,{...e,children:(0,M.jsx)(A,{...e})}):A(e)}var M;e((()=>{M=d(),f(),o(),O()}))();export{j as default};