@ryuzaki13/react-foundation-ui 3.1.9 → 3.1.10

package/storybook-static/project.json

@@ -1 +1 @@
-{"generatedAt":1789300101045,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"metaFramework":{"name":"tanstack-react","packageName":"@tanstack/react-router","version":"1.170.32"},"knownPackages":{"testPackages":{"@chromatic-com/storybook":"5.3.0","@storybook/addon-vitest":"10.5.10","@testing-library/dom":"10.4.1","@testing-library/react":"16.3.3","@testing-library/user-event":"^14.6.1","@vitest/browser":"4.1.11","playwright":"1.62.1","vitest":"4.1.11"},"stateManagementPackages":{"zustand":"5.0.0"},"dataFetchingPackages":{"@tanstack/react-query":"5.101.4"},"routerPackages":{"@tanstack/react-router":"1.170.23"}},"hasRouterPackage":false,"packageManager":{"type":"npm","version":"11.7.0","agent":"npm","nodeLinker":"node_modules"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":1,"applicationFileCount":9,"storybookVersion":"10.5.10","storybookVersionSpecifier":"^10.5.5","language":"typescript","storybookPackages":{"@storybook/react-vite":{"version":"10.5.10"},"storybook":{}},"addons":{"@chromatic-com/storybook":{"version":"5.3.0"},"@storybook/addon-docs":{"version":"10.5.10"},"@storybook/addon-a11y":{"version":"10.5.10"},"@storybook/addon-vitest":{"version":"10.5.10"}},"packageJsonType":"module"}
+{"generatedAt":1789305570846,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"metaFramework":{"name":"tanstack-react","packageName":"@tanstack/react-router","version":"1.170.32"},"knownPackages":{"testPackages":{"@chromatic-com/storybook":"5.3.0","@storybook/addon-vitest":"10.5.10","@testing-library/dom":"10.4.1","@testing-library/react":"16.3.3","@testing-library/user-event":"^14.6.1","@vitest/browser":"4.1.11","playwright":"1.62.1","vitest":"4.1.11"},"stateManagementPackages":{"zustand":"5.0.0"},"dataFetchingPackages":{"@tanstack/react-query":"5.101.4"},"routerPackages":{"@tanstack/react-router":"1.170.23"}},"hasRouterPackage":false,"packageManager":{"type":"npm","version":"11.7.0","agent":"npm","nodeLinker":"node_modules"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":1,"applicationFileCount":9,"storybookVersion":"10.5.10","storybookVersionSpecifier":"^10.5.5","language":"typescript","storybookPackages":{"@storybook/react-vite":{"version":"10.5.10"},"storybook":{}},"addons":{"@chromatic-com/storybook":{"version":"5.3.0"},"@storybook/addon-docs":{"version":"10.5.10"},"@storybook/addon-a11y":{"version":"10.5.10"},"@storybook/addon-vitest":{"version":"10.5.10"}},"packageJsonType":"module"}

package/dist/chunks/dialog-UwEmYlQ0.js

@@ -1,54 +0,0 @@
-import { useId as e } from "react";
-import { getOrCreatePortalRoot as t, useEscapeDismiss as n, useOverlayFocus as r } from "@ryuzaki13/react-foundation-lib/dom";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { createPortal as o } from "react-dom";
-var s = {
-	overlay: "CAE3zd",
-	panel: "DFvpTa"
-};
-//#endregion
-//#region src/dialog/Dialog.tsx
-function c({ title: c, description: l, open: u, onClose: d, minWidth: f, children: p }) {
-	let m = e(), h = e(), g = { "--dialog-min-width": typeof f == "number" ? `${f}px` : f }, _ = r({
-		active: u,
-		trapFocus: !0,
-		restoreFocus: !0,
-		initialFocus: "container"
-	});
-	if (n({
-		active: u,
-		onDismiss: d,
-		containerRef: _
-	}), !u || typeof document > "u") return null;
-	let v = t("dialog-root");
-	return v ? o(/* @__PURE__ */ i("div", {
-		className: `${s.overlay} surfaceBackdrop`,
-		onMouseDown: (e) => e.target === e.currentTarget && d(),
-		children: /* @__PURE__ */ a("div", {
-			ref: _,
-			role: "dialog",
-			"aria-modal": "true",
-			"aria-labelledby": c ? m : void 0,
-			"aria-describedby": l ? h : void 0,
-			tabIndex: -1,
-			className: `${s.panel} scrollable overscroll surface0 shadowMd paddingLg radiusMd`,
-			style: g,
-			children: [
-				c && /* @__PURE__ */ i("h2", {
-					id: m,
-					className: "margin0",
-					children: c
-				}),
-				l && /* @__PURE__ */ i("p", {
-					id: h,
-					children: l
-				}),
-				p
-			]
-		})
-	}), v) : null;
-}
-//#endregion
-export { c as t };
-
-//# sourceMappingURL=dialog-UwEmYlQ0.js.map

package/dist/chunks/dialog-UwEmYlQ0.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog-UwEmYlQ0.js","names":[],"sources":["../../src/dialog/Dialog.module.scss","../../src/dialog/Dialog.tsx"],"sourcesContent":[".overlay {\n\tz-index: var(--z-dialog);\n\tposition: fixed;\n\tinset: 0;\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgrid-template-rows: minmax(0, 1fr);\n\tplace-items: center;\n\tbox-sizing: border-box;\n\twidth: 100%;\n\theight: 100vh;\n\theight: 100dvh;\n\tpadding-block: max(var(--space-md), env(safe-area-inset-top, 0px)) max(var(--space-md), env(safe-area-inset-bottom, 0px));\n\tpadding-inline: max(var(--space-md), env(safe-area-inset-left, 0px)) max(var(--space-md), env(safe-area-inset-right, 0px));\n\toverflow: hidden;\n}\n\n.panel {\n\t--dialog-min-width: 0px;\n\n\t/*\n\t * Панель может расти по содержимому только в пределах grid-track overlay. Это сохраняет\n\t * компактный desktop-диалог, а на узком или низком viewport отдаёт прокрутку самой панели.\n\t */\n\tbox-sizing: border-box;\n\tmin-width: min(var(--dialog-min-width), 100%);\n\tmax-width: 100%;\n\tmax-height: 100%;\n\toverflow-wrap: anywhere;\n}\n","import { type CSSProperties, type PropsWithChildren, type ReactNode, useId } from \"react\";\n\nimport { getOrCreatePortalRoot, useEscapeDismiss, useOverlayFocus } from \"@ryuzaki13/react-foundation-lib/dom\";\nimport { createPortal } from \"react-dom\";\n\nimport styles from \"./Dialog.module.scss\";\n\ntype DialogProps = PropsWithChildren<{\n\ttitle: ReactNode;\n\tdescription: string;\n\topen: boolean;\n\tonClose: () => void;\n\tminWidth?: string | number;\n}>;\n\ntype DialogStyle = CSSProperties & {\n\t\"--dialog-min-width\"?: string;\n};\n\n/**\n * Модальное диалоговое окно для важных подтверждений и пользовательских сценариев.\n * Ограничивает панель доступной областью viewport и прокручивает большое содержимое.\n */\nexport function Dialog({ title, description, open, onClose, minWidth, children }: DialogProps) {\n\tconst titleId = useId();\n\tconst descriptionId = useId();\n\tconst dialogStyle: DialogStyle = {\n\t\t\"--dialog-min-width\": typeof minWidth === \"number\" ? `${minWidth}px` : minWidth\n\t};\n\tconst panelRef = useOverlayFocus<HTMLDivElement>({\n\t\tactive: open,\n\t\ttrapFocus: true,\n\t\trestoreFocus: true,\n\t\tinitialFocus: \"container\"\n\t});\n\n\tuseEscapeDismiss({\n\t\tactive: open,\n\t\tonDismiss: onClose,\n\t\tcontainerRef: panelRef\n\t});\n\n\tif (!open) {\n\t\treturn null;\n\t}\n\n\tif (typeof document === \"undefined\") {\n\t\treturn null;\n\t}\n\n\tconst portalTarget = getOrCreatePortalRoot(\"dialog-root\");\n\n\tif (!portalTarget) {\n\t\treturn null;\n\t}\n\n\treturn createPortal(\n\t\t<div className={`${styles.overlay} surfaceBackdrop`} onMouseDown={(event) => event.target === event.currentTarget && onClose()}>\n\t\t\t<div\n\t\t\t\tref={panelRef}\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\taria-labelledby={title ? titleId : undefined}\n\t\t\t\taria-describedby={description ? descriptionId : undefined}\n\t\t\t\ttabIndex={-1}\n\t\t\t\tclassName={`${styles.panel} scrollable overscroll surface0 shadowMd paddingLg radiusMd`}\n\t\t\t\tstyle={dialogStyle}>\n\t\t\t\t{title && (\n\t\t\t\t\t<h2 id={titleId} className=\"margin0\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h2>\n\t\t\t\t)}\n\t\t\t\t{description && <p id={descriptionId}>{description}</p>}\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>,\n\t\tportalTarget\n\t);\n}\n"],"mappings":";;;;;;;;;;ACuBA,SAAgB,EAAO,EAAE,UAAO,gBAAa,SAAM,YAAS,aAAU,eAAyB;CAC9F,IAAM,IAAU,EAAM,GAChB,IAAgB,EAAM,GACtB,IAA2B,EAChC,sBAAsB,OAAO,KAAa,WAAW,GAAG,EAAS,MAAM,EACxE,GACM,IAAW,EAAgC;EAChD,QAAQ;EACR,WAAW;EACX,cAAc;EACd,cAAc;CACf,CAAC;CAYD,IAVA,EAAiB;EAChB,QAAQ;EACR,WAAW;EACX,cAAc;CACf,CAAC,GAEG,CAAC,KAID,OAAO,WAAa,KACvB,OAAO;CAGR,IAAM,IAAe,EAAsB,aAAa;CAMxD,OAJK,IAIE,EACN,kBAAC,OAAD;EAAK,WAAW,GAAG,EAAO,QAAQ;EAAmB,cAAc,MAAU,EAAM,WAAW,EAAM,iBAAiB,EAAQ;EAC5H,UAAA,kBAAC,OAAD;GACC,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,oBAAkB,IAAc,IAAgB,KAAA;GAChD,UAAU;GACV,WAAW,GAAG,EAAO,MAAM;GAC3B,OAAO;GARR,UAAA;IASE,KACA,kBAAC,MAAD;KAAI,IAAI;KAAS,WAAU;KACzB,UAAA;IACE,CAAA;IAEJ,KAAe,kBAAC,KAAD;KAAG,IAAI;KAAgB,UAAA;IAAe,CAAA;IACrD;GACG;;CACD,CAAA,GACL,CACD,IAxBQ;AAyBT"}

package/storybook-static/assets/Dialog-7LtWvEGc.js

@@ -1,44 +0,0 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-C7Kz5KQm.js";import{i as n,r}from"./react-Bl2r1tuC.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-D3JUer2A.js";import{a as p,i as m,n as h,r as g,t as _}from"./Dialog.stories-st_xEXXE.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:h,parameters:{docs:{toc:!0}}}),`
-`,(0,b.jsx)(u,{children:`Dialog`}),`
-`,(0,b.jsx)(o,{children:`Легковесное диалоговое окно для коротких подтверждений и критичных действий`}),`
-`,(0,b.jsx)(t.p,{children:`Dialog уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
-Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны контролируемые сценарии.`}),`
-`,(0,b.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,b.jsx)(f,{}),`
-`,(0,b.jsx)(i,{of:_}),`
-`,(0,b.jsx)(t.pre,{children:(0,b.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
-
-import { Button, Dialog } from "@ryuzaki13/react-foundation-ui";
-
-export function Example() {
-	const [open, setOpen] = useState(false);
-
-	return (
-		<>
-			<Button onClick={() => setOpen(true)}>Удалить</Button>
-			<Dialog title="Подтверждение" description="Действие нельзя отменить" open={open} onClose={() => setOpen(false)}>
-				<Button onClick={() => setOpen(false)}>Понятно</Button>
-			</Dialog>
-		</>
-	);
-}
-`})}),`
-`,(0,b.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
-`,(0,b.jsxs)(t.ul,{children:[`
-`,(0,b.jsx)(t.li,{children:`Если состояние должно жить во внешней форме или модели, ориентируйтесь на контролируемый режим из документации.`}),`
-`]}),`
-`,(0,b.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
-`,(0,b.jsx)(t.h3,{id:`компонент-работает-в-контролируемом-режиме-когда-состояние-хранится-во-внешнем-компоненте`,children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте`}),`
-`,(0,b.jsx)(t.p,{children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте.`}),`
-`,(0,b.jsx)(d,{of:_}),`
-`,(0,b.jsx)(t.h3,{id:`компонент-открыт-сразу-при-первом-рендере`,children:`Компонент открыт сразу при первом рендере`}),`
-`,(0,b.jsx)(t.p,{children:`Компонент открыт сразу при первом рендере.`}),`
-`,(0,b.jsx)(d,{of:m}),`
-`,(0,b.jsx)(t.h3,{id:`большой-контент-на-низком-или-узком-экране`,children:`Большой контент на низком или узком экране`}),`
-`,(0,b.jsx)(t.p,{children:`Диалог ограничивает размеры доступной областью viewport. Если контент не помещается, прокручивается панель диалога, а заголовок,
-описание и управляющие элементы остаются достижимыми.`}),`
-`,(0,b.jsx)(d,{of:g}),`
-`,(0,b.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,b.jsx)(l,{of:h}),`
-`,(0,b.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
-`,(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/Dialog-BJSZeEzK.css

@@ -1 +0,0 @@
-.CAE3zd{z-index:var(--z-dialog);box-sizing:border-box;width:100%;height:100vh;height:100dvh;padding-block:max(var(--space-md), env(safe-area-inset-top,0px)) max(var(--space-md), env(safe-area-inset-bottom,0px));padding-inline:max(var(--space-md), env(safe-area-inset-left,0px)) max(var(--space-md), env(safe-area-inset-right,0px));grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;display:grid;position:fixed;inset:0;overflow:hidden}.DFvpTa{--dialog-min-width:0px;box-sizing:border-box;min-width:min(var(--dialog-min-width), 100%);overflow-wrap:anywhere;max-width:100%;max-height:100%}

package/storybook-static/assets/Dialog-CBUnMYDs.js

@@ -1 +0,0 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n}from"./iframe-C7Kz5KQm.js";import{t as r}from"./react-dom-BzEl8usk.js";import{a as i,n as a,r as o,t as s}from"./dom-DBd_DWF8.js";var c,l,u;function d(){return(d=e((()=>{c=`CAE3zd`,l=`DFvpTa`,u={overlay:c,panel:l}})))()}function f({title:e,description:t,open:n,onClose:r,minWidth:o,children:c}){let l=(0,p.useId)(),d=(0,p.useId)(),f={"--dialog-min-width":typeof o==`number`?`${o}px`:o},g=i({active:n,trapFocus:!0,restoreFocus:!0,initialFocus:`container`});if(a({active:n,onDismiss:r,containerRef:g}),!n||typeof document>`u`)return null;let _=s(`dialog-root`);return _?(0,m.createPortal)((0,h.jsx)(`div`,{className:`${u.overlay} surfaceBackdrop`,onMouseDown:e=>e.target===e.currentTarget&&r(),children:(0,h.jsxs)(`div`,{ref:g,role:`dialog`,"aria-modal":`true`,"aria-labelledby":e?l:void 0,"aria-describedby":t?d:void 0,tabIndex:-1,className:`${u.panel} scrollable overscroll surface0 shadowMd paddingLg radiusMd`,style:f,children:[e&&(0,h.jsx)(`h2`,{id:l,className:`margin0`,children:e}),t&&(0,h.jsx)(`p`,{id:d,children:t}),c]})}),_):null}var p,m,h;function g(){return(g=e((()=>{p=t(),o(),m=r(),d(),h=n()})))()}export{g as n,f as t};

package/storybook-static/assets/Dialog.stories-st_xEXXE.js

@@ -1,36 +0,0 @@
-import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{n}from"./iframe-C7Kz5KQm.js";import{n as r,t as i}from"./Button-CwkuEJRI.js";import{n as a,t as o}from"./createControlledStoryRender-BouhvX-R.js";import{n as s,t as c}from"./Dialog-CBUnMYDs.js";var l=t({Controlled:()=>h,LongContent:()=>_,Opened:()=>g,__namedExportsOrder:()=>v,default:()=>m});function u({args:e,updateArgs:t,children:n}){let r=()=>{e.onClose(),t({open:!1})};return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(i,{onClick:()=>t({open:!0}),children:`Открыть диалог`}),(0,f.jsx)(c,{...e,open:e.open,onClose:r,children:e.children??n(r)})]})}function d(e){return o((t,n)=>(0,f.jsx)(u,{args:t,updateArgs:n,children:e}))}var f,p,m,h,g,_,v;function y(){return(y=e((()=>{r(),a(),s(),f=n(),{fn:p}=__STORYBOOK_MODULE_TEST__,m={title:`UI/Dialog`,component:c,args:{title:`Подтверждение операции`,description:`Проверьте параметры перед выполнением действия.`,open:!1,onClose:p(),minWidth:360,children:null},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{title:{description:`Заголовок диалогового окна.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},open:{description:`Управляет видимостью диалога.`,control:`boolean`},onClose:{description:`Вызывается при закрытии диалога.`,control:!1},minWidth:{description:`Желаемая минимальная ширина панели в CSS-единицах или пикселях; ограничивается доступной шириной viewport.`,control:`text`},children:{description:`Контент внутри диалогового окна.`,control:!1}}},h={render:d(e=>(0,f.jsxs)(`div`,{children:[(0,f.jsx)(`p`,{children:`Подтвердите выполнение действия.`}),(0,f.jsxs)(`div`,{style:{display:`flex`,gap:8,justifyContent:`flex-end`},children:[(0,f.jsx)(i,{variant:`transparent`,onClick:e,children:`Отмена`}),(0,f.jsx)(i,{variant:`success`,onClick:e,children:`Подтвердить`})]})]}))},g={args:{open:!0},render:d(()=>(0,f.jsx)(`div`,{children:`Диалог изначально открыт для демонстрации верстки.`}))},_={args:{open:!0,minWidth:640},render:d(e=>(0,f.jsxs)(`div`,{children:[Array.from({length:24},(e,t)=>(0,f.jsxs)(`p`,{children:[`Строка `,t+1,`. Большой контент остаётся внутри доступной области экрана, а диалог прокручивается независимо от страницы.`]},t)),(0,f.jsx)(i,{onClick:e,children:`Закрыть диалог`})]}))},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
-  render: createDialogStoryRender(close => <div>
-            <p>Подтвердите выполнение действия.</p>
-            <div style={{
-      display: "flex",
-      gap: 8,
-      justifyContent: "flex-end"
-    }}>
-                <Button variant="transparent" onClick={close}>
-                    Отмена
-                </Button>
-                <Button variant="success" onClick={close}>
-                    Подтвердить
-                </Button>
-            </div>
-        </div>)
-}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
-  args: {
-    open: true
-  },
-  render: createDialogStoryRender(() => <div>Диалог изначально открыт для демонстрации верстки.</div>)
-}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
-  args: {
-    open: true,
-    minWidth: 640
-  },
-  render: createDialogStoryRender(close => <div>
-            {Array.from({
-      length: 24
-    }, (_, index) => <p key={index}>
-                    Строка {index + 1}. Большой контент остаётся внутри доступной области экрана, а диалог прокручивается независимо от
-                    страницы.
-                </p>)}
-            <Button onClick={close}>Закрыть диалог</Button>
-        </div>)
-}`,..._.parameters?.docs?.source}}},v=[`Controlled`,`Opened`,`LongContent`]})))()}export{y as a,g as i,l as n,_ as r,h as t};

package/storybook-static/assets/iframe-qGC25hE8.js

@@ -1 +0,0 @@
-import{t as e}from"./iframe-C7Kz5KQm.js";e();