@ryuzaki13/react-foundation-ui 1.4.2 → 1.4.3

package/storybook-static/assets/InputFiles.stories-ffjxiHSh.js

@@ -0,0 +1,33 @@
+import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r}from"./iframe-CrnMVMTc.js";import{a as i,i as a,n as o}from"./utils-DUM89eIj.js";import{n as s,t as c}from"./ui.module-DoMIk8Oc.js";import{c as l,l as u,o as d,r as f,u as p}from"./Input-DtOsW7ur.js";import{a as m,i as h,o as g,r as _,s as v}from"./file-vPGnhPr-.js";import{i as y,n as b,r as x,t as S}from"./InputFilesList-D6B5g99M.js";function C(e){let{value:t,onReadError:n,accept:r,allowedMime:a,maxBytes:c,maxFiles:l,label:u,description:h,placeholder:y=`Выберите файлы`,disabled:b,size:C,error:E,onClearError:D,className:O}=e;m(a),g(r);let k=(0,w.useRef)(null),{controlId:A,labelId:j,descriptionId:M,errorId:N,describedBy:P}=p({hasLabel:u!=null,hasDescription:!!h,hasError:!!E}),F=typeof l==`number`&&t.length>=l,I=(0,w.useCallback)(async r=>{let i=r.target.files;if(!i||i.length===0)return;let o=Array.from(i);r.target.value=``,E&&D&&D();let s=typeof l==`number`?l-t.length:o.length,u=o.slice(0,s);if(e.readMode===`array-buffer`){let t=[];for(let e of u)try{let n=await v(e,{allowedMime:a,maxBytes:c,mode:`array-buffer`});t.push(n)}catch(e){e instanceof _&&n&&n(e)}t.length>0&&e.onChange([...e.value,...t]);return}let d=[];for(let e of u)try{let t=await v(e,{allowedMime:a,maxBytes:c});d.push(t)}catch(e){e instanceof _&&n&&n(e)}d.length>0&&e.onChange([...e.value,...d])},[e,l,t.length,a,c,n,E,D]),L=(0,w.useCallback)(()=>{k.current?.click()},[]),R=(e.readMode,(0,T.jsx)(S,{files:e.value,onChange:e.onChange}));return(0,T.jsxs)(d,{label:u,description:h,disabled:b,className:O,size:C,error:E,controlId:A,labelId:j,descriptionId:M,errorId:N,children:[(0,T.jsx)(`input`,{ref:k,id:A,type:`file`,accept:(r??a)?.join(`,`),multiple:!0,disabled:b||F,className:x.hiddenInput,onChange:I,tabIndex:-1}),(0,T.jsx)(f,{children:()=>(0,T.jsx)(`div`,{role:`button`,tabIndex:b||F?-1:0,onClick:L,onKeyDown:e=>o(e,L,{disabled:b||F}),className:i(s.uiInputControl,x.control,!!E&&`invalid`),"data-disabled":b||void 0,"aria-invalid":!!E||void 0,"aria-disabled":b||F,"aria-labelledby":j,"aria-describedby":P,children:(0,T.jsx)(`span`,{className:s.uiPlaceholder,children:F?`Максимум ${l} файлов`:y})})}),R]})}var w,T;function E(){return(E=e((()=>{w=n(),h(),a(),l(),u(),c(),y(),b(),T=r(),C.__docgenInfo={description:'InputFiles — компонент выбора нескольких файлов.\n\nПоле стилизовано как InputText. При клике открывается нативный\nдиалог с multiple. Каждый выбранный файл читается через readFile\nи добавляется в массив value.\n\nСписок выбранных файлов отображается под полем.\nКаждый файл можно удалить кнопкой «крестик».\n\nInputFiles типизирует массив по `readMode`.\nЕсли `readMode` не задан или равен `"data-url"`, в `value` и `onChange`\nиспользуется массив объектов с `dataUrl`. Если `readMode` равен\n`"array-buffer"`, используется массив объектов с `buffer`.',methods:[],displayName:`InputFiles`}})))()}var D=t({Controlled:()=>M,LimitReached:()=>P,WithInitialFiles:()=>N,__namedExportsOrder:()=>F,default:()=>j}),O,k,A,j,M,N,P,F;function I(){return(I=e((()=>{O=n(),E(),k=r(),A=(e,t=`application/pdf`)=>{let n=new File([`demo-file`],e,{type:t,lastModified:17040672e5});return{mode:`data-url`,meta:{name:n.name,mime:n.type,size:n.size,lastModified:n.lastModified},dataUrl:`data:${t};base64,ZGVtby1maWxl`,file:n}},j={title:`Shared/UI/InputFiles`,component:C,args:{value:[],onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок поля множественной загрузки.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Текст в поле, пока список файлов пуст.`,control:`text`},value:{description:`Массив результатов чтения выбранных файлов.`,control:!1},onChange:{description:`Вызывается с новым массивом файлов после добавления/удаления.`,control:!1},onReadError:{description:`Вызывается при ошибке чтения отдельного файла.`,control:!1},accept:{description:"HTML `accept` для диалога выбора файлов.",control:`text`},allowedMime:{description:`Список допустимых MIME-типов при валидации.`,control:!1},maxBytes:{description:`Максимальный размер одного файла в байтах.`,control:`number`},readMode:{description:`Режим чтения: data-url или array-buffer.`,control:`inline-radio`,options:[`data-url`,`array-buffer`]},maxFiles:{description:`Лимит количества файлов в списке.`,control:`number`},error:{description:`Текст ошибки под полем.`,control:`text`},onClearError:{description:`Вызывается при выборе новых файлов для сброса ошибки.`,control:!1},disabled:{description:`Полностью блокирует выбор файлов.`,control:`boolean`},size:{description:`Размер визуального контрола.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]}}},M={render:e=>{let[t,n]=(0,O.useState)([]);return(0,k.jsx)(C,{...e,readMode:`data-url`,value:t,onChange:n})},args:{label:`Вложения`,description:`Можно выбрать несколько файлов.`,placeholder:`Выберите файлы`,accept:[`.pdf`,`.png`,`.jpg`],maxFiles:5,value:[]}},N={render:e=>{let[t,n]=(0,O.useState)([A(`contract.pdf`),A(`diagram.png`,`image/png`)]);return(0,k.jsx)(C,{...e,readMode:`data-url`,value:t,onChange:n})},args:{label:`Предзаполненный список`,description:`Иллюстрация удаления файлов из уже заполненного значения.`}},P={render:e=>{let[t,n]=(0,O.useState)([A(`first.pdf`),A(`second.pdf`)]);return(0,k.jsx)(C,{...e,readMode:`data-url`,value:t,onChange:n})},args:{label:`Лимит файлов`,description:`После достижения лимита поле выбора блокируется.`,maxFiles:2}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<ReadFileAsDataUrlResult[]>([]);
+    return <InputFiles {...args} readMode="data-url" value={value} onChange={setValue} />;
+  },
+  args: {
+    label: "Вложения",
+    description: "Можно выбрать несколько файлов.",
+    placeholder: "Выберите файлы",
+    accept: [".pdf", ".png", ".jpg"],
+    maxFiles: 5,
+    value: []
+  }
+}`,...M.parameters?.docs?.source}}},N.parameters={...N.parameters,docs:{...N.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<ReadFileAsDataUrlResult[]>([createMockReadFileResult("contract.pdf"), createMockReadFileResult("diagram.png", "image/png")]);
+    return <InputFiles {...args} readMode="data-url" value={value} onChange={setValue} />;
+  },
+  args: {
+    label: "Предзаполненный список",
+    description: "Иллюстрация удаления файлов из уже заполненного значения."
+  }
+}`,...N.parameters?.docs?.source}}},P.parameters={...P.parameters,docs:{...P.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<ReadFileAsDataUrlResult[]>([createMockReadFileResult("first.pdf"), createMockReadFileResult("second.pdf")]);
+    return <InputFiles {...args} readMode="data-url" value={value} onChange={setValue} />;
+  },
+  args: {
+    label: "Лимит файлов",
+    description: "После достижения лимита поле выбора блокируется.",
+    maxFiles: 2
+  }
+}`,...P.parameters?.docs?.source}}},F=[`Controlled`,`WithInitialFiles`,`LimitReached`]})))()}export{I as a,N as i,D as n,P as r,M as t};

package/storybook-static/assets/InputFilesList-D6B5g99M.js

@@ -0,0 +1 @@
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{n,t as r}from"./x-CyFk00QC.js";import{n as i}from"./iframe-CrnMVMTc.js";import{a,i as o}from"./utils-DUM89eIj.js";var s,c,l,u,d,f,p;function m(){return(m=e((()=>{s=`h9SMea`,c=`rUyh0y`,l=`Q0CY1r`,u=`AJuYXd`,d=`CKKkOD`,f=`UgxhS1`,p={control:s,hiddenInput:c,fileList:l,fileItem:u,fileItemName:d,removeButton:f}})))()}function h({files:e,onChange:t}){let n=(0,g.useCallback)(n=>{t(e.filter((e,t)=>t!==n))},[e,t]);return!e||!e.length?null:(0,_.jsx)(`ul`,{className:p.fileList,children:e.map((e,t)=>(0,_.jsxs)(`li`,{className:p.fileItem,children:[(0,_.jsx)(`span`,{className:p.fileItemName,children:e.meta.name}),(0,_.jsx)(`button`,{type:`button`,className:a(p.removeButton,`flexCenter`),onClick:()=>n(t),"aria-label":`Удалить ${e.meta.name}`,children:(0,_.jsx)(r,{})})]},`${e.meta.name}-${e.meta.lastModified}`))})}var g,_;function v(){return(v=e((()=>{g=t(),o(),n(),m(),_=i(),h.__docgenInfo={description:``,methods:[],displayName:`InputFilesList`,props:{files:{required:!0,tsType:{name:`Array`,elements:[{name:`TFile`}],raw:`TFile[]`},description:``},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(files: TFile[]) => void`,signature:{arguments:[{type:{name:`Array`,elements:[{name:`TFile`}],raw:`TFile[]`},name:`files`}],return:{name:`void`}}},description:``}}}})))()}export{m as i,v as n,p as r,h as t};

package/storybook-static/assets/{InputImage--2PSB_E_.js → InputImage-Cd39V4Vc.js}

@@ -1,11 +1,11 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-BJGIOdSH.js";import{E as n,a as r,d as i,f as a,l as o,m as s,n as c,p as l,r as u,u as d}from"./blocks-ixiC6_NZ.js";import{t as f}from"./mdx-react-shim-CmoAsjhK.js";import{ArrayBufferMode as p,Controlled as m,WithInitialImage as h,n as g,t as _}from"./InputImage.stories-D__QcSho.js";function v(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(o,{of:_,parameters:{docs:{toc:!0}}}),`
-`,(0,b.jsx)(l,{children:`InputImage`}),`
-`,(0,b.jsx)(a,{children:`Контрол загрузки и предварительного просмотра изображения в формах и карточках`}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CrnMVMTc.js";import{i as n,r}from"./react-qN2cStNd.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-Dz3dJBcm.js";import{a as p,i as m,n as h,r as g,t as _}from"./InputImage.stories-n-tpY8OO.js";function v(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(s,{of:g,parameters:{docs:{toc:!0}}}),`
+`,(0,b.jsx)(u,{children:`InputImage`}),`
+`,(0,b.jsx)(o,{children:`Контрол загрузки и предварительного просмотра изображения в формах и карточках`}),`
 `,(0,b.jsx)(t.p,{children:`InputImage уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
 Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны контролируемые сценарии.`}),`
 `,(0,b.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,b.jsx)(d,{}),`
-`,(0,b.jsx)(r,{of:m}),`
+`,(0,b.jsx)(f,{}),`
+`,(0,b.jsx)(i,{of:h}),`
 `,(0,b.jsx)(t.pre,{children:(0,b.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
 
 import { InputImage } from "@/shared/ui";
@@ -24,14 +24,14 @@ export function Example() {
 `,(0,b.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
 `,(0,b.jsx)(t.h3,{id:`компонент-работает-в-контролируемом-режиме-когда-состояние-хранится-во-внешнем-компоненте`,children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте`}),`
 `,(0,b.jsx)(t.p,{children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте.`}),`
-`,(0,b.jsx)(u,{of:m}),`
+`,(0,b.jsx)(d,{of:h}),`
 `,(0,b.jsx)(t.h3,{id:`инициализация-заранее-загруженным-изображением`,children:`Инициализация заранее загруженным изображением`}),`
 `,(0,b.jsx)(t.p,{children:`Инициализация заранее загруженным изображением.`}),`
-`,(0,b.jsx)(u,{of:h}),`
+`,(0,b.jsx)(d,{of:m}),`
 `,(0,b.jsx)(t.h3,{id:`сценарий-работы-с-бинарными-данными`,children:`Сценарий работы с бинарными данными`}),`
 `,(0,b.jsx)(t.p,{children:`Сценарий работы с бинарными данными.`}),`
-`,(0,b.jsx)(u,{of:p}),`
+`,(0,b.jsx)(d,{of:_}),`
 `,(0,b.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,b.jsx)(c,{of:_}),`
+`,(0,b.jsx)(l,{of:g}),`
 `,(0,b.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
-`,(0,b.jsx)(i,{includePrimary:!1})]})}function y(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,b.jsx)(t,{...e,children:(0,b.jsx)(v,{...e})}):v(e)}var b;e((()=>{b=t(),f(),s(),g()}))();export{y as default};
+`,(0,b.jsx)(a,{includePrimary:!1})]})}function y(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,b.jsx)(t,{...e,children:(0,b.jsx)(v,{...e})}):v(e)}var b;function x(){return(x=e((()=>{b=t(),r(),c(),p()})))()}x();export{y as default};

package/storybook-static/assets/InputImage.stories-n-tpY8OO.js

@@ -0,0 +1,51 @@
+import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r}from"./iframe-CrnMVMTc.js";import{a as i,i as a,n as o}from"./utils-DUM89eIj.js";import{n as s,t as c}from"./ui.module-DoMIk8Oc.js";import{c as l,l as u,n as d,o as f,r as p,u as m}from"./Input-DtOsW7ur.js";import{i as h,n as g,t as _}from"./file-vPGnhPr-.js";var v,y,b,x;function S(){return(S=e((()=>{v=`EV-Vji`,y=`A5-T93`,b=`V1Rhiv`,x={control:v,fileName:y,hiddenInput:b}})))()}function C({value:e,onChange:t,onClear:n,onReadError:r,allowedMime:a,maxBytes:c,readMode:l,label:u,description:h,placeholder:v=`Выберите изображение`,disabled:y,size:b,error:S,onClearError:C,className:E}){let D=(0,w.useRef)(null),{controlId:O,labelId:k,descriptionId:A,errorId:j,describedBy:M}=m({hasLabel:u!=null,hasDescription:!!h,hasError:!!S}),N=(0,w.useCallback)(e=>l===`array-buffer`?_(e,{allowedMime:a,maxBytes:c,mode:`array-buffer`}):_(e,{allowedMime:a,maxBytes:c}),[a,c,l]),P=(0,w.useMemo)(()=>a&&a.length>0?a.join(`,`):`image/*`,[a]),F=(0,w.useCallback)(async e=>{let n=e.target.files?.[0];if(n){e.target.value=``,S&&C&&C();try{t(await N(n))}catch(e){e instanceof g&&r&&r(e)}}},[N,t,r,S,C]),I=(0,w.useCallback)(()=>{D.current?.click()},[]);return(0,T.jsxs)(f,{label:u,description:h,disabled:y,className:E,size:b,error:S,controlId:O,labelId:k,descriptionId:A,errorId:j,children:[(0,T.jsx)(`input`,{ref:D,id:O,type:`file`,accept:P,disabled:y,className:x.hiddenInput,onChange:F,tabIndex:-1}),(0,T.jsx)(p,{endAdornment:n?(0,T.jsx)(d,{onClick:n,disabled:y}):void 0,endAdornmentWidth:n?`var(--control-height)`:void 0,children:({controlClassName:t})=>(0,T.jsx)(`div`,{role:`button`,tabIndex:y?-1:0,onClick:I,onKeyDown:e=>o(e,I,{disabled:y}),className:i(s.uiInputControl,x.control,t,!!S&&`invalid`),"data-disabled":y||void 0,"aria-invalid":!!S||void 0,"aria-disabled":y,"aria-labelledby":k,"aria-describedby":M,children:e?(0,T.jsx)(`span`,{className:x.fileName,children:e.meta.name}):(0,T.jsx)(`span`,{className:s.uiPlaceholder,children:v})})})]})}var w,T;function E(){return(E=e((()=>{w=n(),h(),a(),l(),u(),c(),S(),T=r(),C.__docgenInfo={description:`InputImage — компонент выбора одного изображения.
+
+Визуально идентичен InputText. Под капотом использует readImageFile,
+который валидирует что файл — изображение и извлекает его размеры.
+
+HTML-атрибут accept формируется автоматически из allowedMime
+или по умолчанию равен "image/*".`,methods:[],displayName:`InputImage`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"Выберите изображение"`,computed:!1}},disabled:{required:!1,tsType:{name:`boolean`},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``},value:{required:!0,tsType:{name:`V`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},onClear:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:`Callback очистки выбранного изображения. Если передан — отображается кнопка «крестик»`},onReadError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(error: ReadImageError) => void`,signature:{arguments:[{type:{name:`ReadImageError`},name:`error`}],return:{name:`void`}}},description:`Callback ошибки чтения (невалидный формат, не изображение, превышение размера и т.д.)`},allowedMime:{required:!1,tsType:{name:`unknown`},description:`Допустимые MIME-типы изображений — передаётся в readImageFile`},maxBytes:{required:!1,tsType:{name:`number`},description:`Максимальный размер файла в байтах — передаётся в readImageFile`},readMode:{required:!1,tsType:{name:`ReadMode`},description:`Режим чтения: "data-url" (по умолчанию, с извлечением dimensions) или "array-buffer"`},error:{required:!1,tsType:{name:`string`},description:`Текст ошибки под полем`},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:`Callback сброса ошибки (вызывается при повторном выборе изображения)`},className:{required:!1,tsType:{name:`string`},description:`CSS-класс обёртки`}}}})))()}var D=t({ArrayBufferMode:()=>P,Controlled:()=>M,WithInitialImage:()=>N,__namedExportsOrder:()=>F,default:()=>j}),O,k,A,j,M,N,P,F;function I(){return(I=e((()=>{O=n(),E(),k=r(),A=(e=`avatar.png`)=>{let t=new File([`image-demo`],e,{type:`image/png`,lastModified:17040672e5});return{mode:`data-url`,meta:{name:t.name,mime:t.type,size:t.size,lastModified:t.lastModified},dataUrl:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9YxM9a0AAAAASUVORK5CYII=`,file:t,dimensions:{width:1,height:1}}},j={title:`Shared/UI/InputImage`,component:C,args:{value:void 0,onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок поля выбора изображения.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Текст до выбора изображения.`,control:`text`},value:{description:`Результат чтения выбранного изображения.`,control:!1},onChange:{description:`Вызывается после успешного чтения изображения.`,control:!1},onReadError:{description:`Вызывается при ошибке валидации или чтения изображения.`,control:!1},onClear:{description:`Очищает выбранное изображение.`,control:!1},allowedMime:{description:`Разрешенные MIME-типы изображений.`,control:!1},maxBytes:{description:`Максимальный размер изображения в байтах.`,control:`number`},readMode:{description:`Режим чтения: data-url или array-buffer.`,control:`inline-radio`,options:[`data-url`,`array-buffer`]},error:{description:`Текст ошибки под полем.`,control:`text`},onClearError:{description:`Сброс ошибки при повторном выборе изображения.`,control:!1},disabled:{description:`Блокирует взаимодействие с полем.`,control:`boolean`},size:{description:`Размер визуального контрола.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]}}},M={render:e=>{let[t,n]=(0,O.useState)(e.value);return(0,k.jsx)(C,{...e,value:t,onChange:n,onClear:()=>n(void 0)})},args:{label:`Аватар`,description:`Выберите одно изображение профиля.`,placeholder:`Выберите изображение`,readMode:`data-url`,allowedMime:[`image/png`,`image/jpeg`,`image/webp`],value:void 0}},N={render:e=>{let[t,n]=(0,O.useState)(A());return(0,k.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,k.jsx)(C,{...e,value:t,onChange:n,onClear:()=>n(void 0)}),t?.mode===`data-url`&&(0,k.jsx)(`img`,{src:t.dataUrl,alt:`Предпросмотр`,style:{width:96,height:96,objectFit:`cover`,border:`1px solid var(--border-0)`}})]})},args:{label:`Изображение с предпросмотром`,description:`Сторис показывает, что значение можно использовать для preview.`}},P={render:e=>{let[t,n]=(0,O.useState)(void 0);return(0,k.jsx)(C,{...e,value:t,onChange:n,onClear:()=>n(void 0)})},args:{label:`Двоичный режим`,description:`Используется, когда изображение нужно обработать как бинарные данные.`,readMode:`array-buffer`,value:void 0}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<ReadImageResult | undefined>(args.value);
+    return <InputImage {...args} value={value} onChange={setValue} onClear={() => setValue(undefined)} />;
+  },
+  args: {
+    label: "Аватар",
+    description: "Выберите одно изображение профиля.",
+    placeholder: "Выберите изображение",
+    readMode: "data-url",
+    allowedMime: ["image/png", "image/jpeg", "image/webp"],
+    value: undefined
+  }
+}`,...M.parameters?.docs?.source}}},N.parameters={...N.parameters,docs:{...N.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<ReadImageResult | undefined>(createMockReadImageResult());
+    return <div style={{
+      display: "grid",
+      gap: 12
+    }}>
+                <InputImage {...args} value={value} onChange={setValue} onClear={() => setValue(undefined)} />
+                {value?.mode === "data-url" && <img src={value.dataUrl} alt="Предпросмотр" style={{
+        width: 96,
+        height: 96,
+        objectFit: "cover",
+        border: "1px solid var(--border-0)"
+      }} />}
+            </div>;
+  },
+  args: {
+    label: "Изображение с предпросмотром",
+    description: "Сторис показывает, что значение можно использовать для preview."
+  }
+}`,...N.parameters?.docs?.source}}},P.parameters={...P.parameters,docs:{...P.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<ReadImageResult | undefined>(undefined);
+    return <InputImage {...args} value={value} onChange={setValue} onClear={() => setValue(undefined)} />;
+  },
+  args: {
+    label: "Двоичный режим",
+    description: "Используется, когда изображение нужно обработать как бинарные данные.",
+    readMode: "array-buffer",
+    value: undefined
+  }
+}`,...P.parameters?.docs?.source}}},F=[`Controlled`,`WithInitialImage`,`ArrayBufferMode`]})))()}export{I as a,N as i,M as n,D as r,P as t};

package/storybook-static/assets/{LayoutPicker-RZDisgZ_.js → LayoutPicker-CGQFfQk6.js}

@@ -1,12 +1,12 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-BJGIOdSH.js";import{E as n,a as r,d as i,f as a,l as o,m as s,n as c,p as l,r as u,u as d}from"./blocks-ixiC6_NZ.js";import{t as f}from"./mdx-react-shim-CmoAsjhK.js";import{Controlled as p,CustomPresets as m,Disabled as h,DisabledPresets as g,InToolbar as _,Placeholder as v,n as y,t as b}from"./LayoutPicker.stories-BCnR-zBu.js";function x(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(o,{of:b,parameters:{docs:{toc:!0}}}),`
-`,(0,C.jsx)(l,{children:`LayoutPicker`}),`
-`,(0,C.jsx)(a,{children:`Контролируемый выбор layout-пресета со схематичным превью`}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CrnMVMTc.js";import{i as n,r}from"./react-qN2cStNd.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-Dz3dJBcm.js";import{a as p,c as m,i as h,n as g,o as _,r as v,s as y,t as b}from"./LayoutPicker.stories-xSL2qafC.js";function x(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(s,{of:_,parameters:{docs:{toc:!0}}}),`
+`,(0,C.jsx)(u,{children:`LayoutPicker`}),`
+`,(0,C.jsx)(o,{children:`Контролируемый выбор layout-пресета со схематичным превью`}),`
 `,(0,C.jsxs)(t.p,{children:[(0,C.jsx)(t.code,{children:`LayoutPicker`}),` нужен для выбора схемы размещения независимых областей: графиков, панелей, секций дашборда или другого UI, где сама раскладка хранится во внешней модели.
 Компонент не знает, что будет внутри ячеек: он показывает только превью, принимает текущий `,(0,C.jsx)(t.code,{children:`value`}),` как ID пресета и возвращает выбранный ID через `,(0,C.jsx)(t.code,{children:`onChange`}),`.
 По умолчанию trigger отображает только иконку текущей раскладки. Чтобы добавить рядом поясняющий текст, передайте `,(0,C.jsx)(t.code,{children:`showPlaceholder`}),`: компонент покажет именно строку из `,(0,C.jsx)(t.code,{children:`placeholder`}),`, не заменяя её названием выбранного пресета.`]}),`
 `,(0,C.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,C.jsx)(d,{}),`
-`,(0,C.jsx)(r,{of:p}),`
+`,(0,C.jsx)(f,{}),`
+`,(0,C.jsx)(i,{of:b}),`
 `,(0,C.jsx)(t.pre,{children:(0,C.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
 
 import { LayoutPicker } from "@/shared/ui";
@@ -44,23 +44,23 @@ const dashboardPreset: LayoutPickerPreset = {
 `,(0,C.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
 `,(0,C.jsxs)(t.h3,{id:`контролируемый-выбор-синхронизирует-value-с-storybook-args`,children:[`Контролируемый выбор синхронизирует `,(0,C.jsx)(t.code,{children:`value`}),` с Storybook args`]}),`
 `,(0,C.jsxs)(t.p,{children:[`Главный story обновляет `,(0,C.jsx)(t.code,{children:`value`}),` через `,(0,C.jsx)(t.code,{children:`useArgs`}),`, поэтому Controls отражают выбранный layout.`]}),`
-`,(0,C.jsx)(u,{of:p}),`
+`,(0,C.jsx)(d,{of:b}),`
 `,(0,C.jsx)(t.h3,{id:`состояние-без-выбранного-значения`,children:`Состояние без выбранного значения`}),`
 `,(0,C.jsxs)(t.p,{children:[`Story явно включает `,(0,C.jsx)(t.code,{children:`showPlaceholder`}),`, поэтому trigger показывает переданный текст `,(0,C.jsx)(t.code,{children:`placeholder`}),` рядом с иконкой. Без этого пропса trigger остаётся icon-only независимо от наличия выбранного пресета.`]}),`
-`,(0,C.jsx)(u,{of:v}),`
+`,(0,C.jsx)(d,{of:y}),`
 `,(0,C.jsx)(t.h3,{id:`кастомный-набор-пресетов`,children:`Кастомный набор пресетов`}),`
 `,(0,C.jsxs)(t.p,{children:[`Компонент принимает произвольный список `,(0,C.jsx)(t.code,{children:`LayoutPickerPreset`}),`, пока каждая ячейка описана координатами grid.`]}),`
-`,(0,C.jsx)(u,{of:m}),`
+`,(0,C.jsx)(d,{of:g}),`
 `,(0,C.jsx)(t.h3,{id:`заблокированные-пресеты`,children:`Заблокированные пресеты`}),`
 `,(0,C.jsxs)(t.p,{children:[(0,C.jsx)(t.code,{children:`getPresetDisabled`}),` блокирует отдельные варианты, не отключая весь контрол.`]}),`
-`,(0,C.jsx)(u,{of:g}),`
+`,(0,C.jsx)(d,{of:h}),`
 `,(0,C.jsx)(t.h3,{id:`пример-в-панели-настройки`,children:`Пример в панели настройки`}),`
 `,(0,C.jsx)(t.p,{children:`Сценарий показывает типичную связку: выбор layout, сводку текущего пресета и превью областей, которые уже рендерит вызывающий слой.`}),`
-`,(0,C.jsx)(u,{of:_}),`
+`,(0,C.jsx)(d,{of:p}),`
 `,(0,C.jsx)(t.h3,{id:`заблокированный-контрол`,children:`Заблокированный контрол`}),`
 `,(0,C.jsxs)(t.p,{children:[`Полное `,(0,C.jsx)(t.code,{children:`disabled`}),`-состояние блокирует trigger и открытие popup.`]}),`
-`,(0,C.jsx)(u,{of:h}),`
+`,(0,C.jsx)(d,{of:v}),`
 `,(0,C.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,C.jsx)(c,{of:b}),`
+`,(0,C.jsx)(l,{of:_}),`
 `,(0,C.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
-`,(0,C.jsx)(i,{includePrimary:!1})]})}function S(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,C.jsx)(t,{...e,children:(0,C.jsx)(x,{...e})}):x(e)}var C;e((()=>{C=t(),f(),s(),y()}))();export{S as default};
+`,(0,C.jsx)(a,{includePrimary:!1})]})}function S(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,C.jsx)(t,{...e,children:(0,C.jsx)(x,{...e})}):x(e)}var C;function w(){return(w=e((()=>{C=t(),r(),c(),m()})))()}w();export{S as default};