@orcestr/ui 0.0.1

package/dist/example/CodePreview.js

@@ -0,0 +1,93 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { LuInfo } from 'react-icons/lu';
+import { Flex, IconButton, Modal, ScrollArea } from '..';
+import { cn } from '../utils/cn';
+import {} from './codeSamples';
+function highlightedCode(code) {
+    const tokenPattern = /(\/\/.*|'.*?'|".*?"|`.*?`|\b(?:import|from|const|let|function|return|true|false|null|undefined|type|satisfies)\b|<\/?[A-Z][A-Za-z0-9.]*)/g;
+    return code.split('\n').flatMap((line, lineIndex) => {
+        const parts = line.split(tokenPattern).filter(Boolean);
+        const rendered = parts.map((part, partIndex) => {
+            let className = 'oui-code-token';
+            if (/^\/\//.test(part))
+                className += ' oui-code-comment';
+            else if (/^['"`]/.test(part))
+                className += ' oui-code-string';
+            else if (/^(import|from|const|let|function|return|true|false|null|undefined|type|satisfies)$/.test(part)) {
+                className += ' oui-code-keyword';
+            }
+            else if (/^<\/?[A-Z]/.test(part))
+                className += ' oui-code-component';
+            return (_jsx("span", { className: className, children: part }, `${lineIndex}-${partIndex}`));
+        });
+        return [
+            _jsx("span", { className: 'oui-code-line', children: rendered.length > 0 ? rendered : ' ' }, `line-${lineIndex}`),
+        ];
+    });
+}
+export function CodeInfoButton({ title, code, onOpen, }) {
+    return (_jsx(IconButton, { className: 'oui-code-info-button', size: 1, v: 'pad', tone: 'info', icon: _jsx(LuInfo, { size: 14 }), "aria-label": `Show ${title} code`, onClick: () => onOpen({ title, code }) }));
+}
+export function ExampleTileHeader({ title, code, onOpen, }) {
+    return (_jsx(Flex, { className: 'oui-ui-tile-head', a: 's', g: 1, wrap: true, children: _jsx(CodeInfoButton, { title: title, code: code, onOpen: onOpen }) }));
+}
+export function ExampleTile({ id, title, code, onOpen, className, children, }) {
+    return (_jsxs("div", { id: id, className: cn('oui-section oui-ui-tile', className), children: [_jsxs("div", { className: 'oui-ui-tile-body', children: [_jsx(ExampleTileHeader, { title: title, code: code, onOpen: onOpen }), children] }), _jsx(InlineCodeBlock, { code: code })] }));
+}
+export function InlineCodeBlock({ code }) {
+    const [expanded, setExpanded] = useState(false);
+    const [contentHeight, setContentHeight] = useState(0);
+    const contentRef = useRef(null);
+    const collapsedHeight = 180;
+    const collapsible = contentHeight > collapsedHeight;
+    const panelHeight = collapsible
+        ? expanded ? contentHeight + 38 : collapsedHeight
+        : contentHeight;
+    const measure = useCallback(() => {
+        const element = contentRef.current;
+        if (!element)
+            return;
+        const nextHeight = element.scrollHeight;
+        setContentHeight((current) => current === nextHeight ? current : nextHeight);
+    }, []);
+    useLayoutEffect(() => {
+        measure();
+    }, [code, measure]);
+    useLayoutEffect(() => {
+        const element = contentRef.current;
+        if (!element || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(() => measure());
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [measure]);
+    const handleWheelCapture = useCallback((event) => {
+        if (event.ctrlKey || event.shiftKey || Math.abs(event.deltaY) <= Math.abs(event.deltaX))
+            return;
+        const scrollRoot = document.querySelector('.oui-app-shell-content-scroll .oui-scroll-area-viewport');
+        if (!scrollRoot)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        scrollRoot.scrollTop += normalizedWheelDeltaY(event);
+    }, []);
+    return (_jsxs("div", { className: 'oui-code-inline-panel', "data-expanded": expanded ? 'true' : 'false', "data-collapsible": collapsible ? 'true' : 'false', style: { height: panelHeight || undefined }, onWheelCapture: handleWheelCapture, children: [_jsx("div", { ref: contentRef, className: 'oui-code-inline-content', children: _jsx(CodeBlock, { code: code }) }), collapsible && !expanded ? _jsx("div", { className: 'oui-code-inline-fade', "aria-hidden": true }) : null, collapsible ? (_jsx("button", { type: 'button', className: 'oui-code-inline-toggle', "aria-expanded": expanded, onClick: () => setExpanded((current) => !current), children: expanded ? 'Hide code' : 'Show code' })) : null] }));
+}
+function normalizedWheelDeltaY(event) {
+    if (event.deltaMode === 1)
+        return event.deltaY * 16;
+    if (event.deltaMode === 2)
+        return event.deltaY * window.innerHeight;
+    return event.deltaY;
+}
+export function CodeBlock({ code }) {
+    return (_jsx(ScrollArea, { className: 'oui-code-preview-scroll', children: _jsx("pre", { className: 'oui-code-preview', children: _jsx("code", { children: highlightedCode(code) }) }) }));
+}
+export function CodePreviewModal({ example, onClose, }) {
+    return (_jsx(Modal, { open: example !== null, onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        }, title: example?.title ?? 'Component code', description: 'Import and usage example.', maxWidth: 760, children: example ? _jsx(CodeBlock, { code: example.code }) : null }));
+}

package/dist/example/ExampleActionsSection.d.ts

@@ -0,0 +1,10 @@
+import { type MenuItem } from '..';
+import { type CodeExample } from './codeSamples';
+type ActionsSectionProps = {
+    menuItems: ReadonlyArray<MenuItem>;
+    onOpenCode: (example: CodeExample) => void;
+    onOpenPalette: () => void;
+};
+export declare function ActionsSection({ menuItems, onOpenCode, onOpenPalette, }: ActionsSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExampleActionsSection.d.ts.map

package/dist/example/ExampleActionsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleActionsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleActionsSection.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAmD,KAAK,QAAQ,EAAC,MAAM,IAAI,CAAC;AAEnF,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,mBAAmB,GAAG;IACvB,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACnC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC3B,SAAS,EACT,UAAU,EACV,aAAa,GAChB,EAAE,mBAAmB,2CA6GrB"}

package/dist/example/ExampleActionsSection.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LuBell, LuCheck, LuCommand, LuEllipsis, LuInfo, LuTrash2, LuTriangleAlert, } from 'react-icons/lu';
+import { Button, Flex, IconButton, Menu, Spinner, Tooltip } from '..';
+import { ExampleTile } from './CodePreview';
+import { codeSamples } from './codeSamples';
+import { UiExampleSection } from './UiExampleSection';
+export function ActionsSection({ menuItems, onOpenCode, onOpenPalette, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'buttons-example', title: 'Buttons', description: 'Button variants, tones, sizes, loading states and press animation.', children: _jsxs(ExampleTile, { title: 'Buttons', code: codeSamples.buttons, onOpen: onOpenCode, children: [_jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 3, children: "Solid" }), _jsx(Button, { size: 3, v: 'soft', children: "Soft" }), _jsx(Button, { size: 3, v: 'surface', children: "Surface" }), _jsx(Button, { size: 3, v: 'pad', children: "Pad" }), _jsx(Button, { size: 3, v: 'outline', children: "Outline" }), _jsx(Button, { size: 3, v: 'ghost', children: "Ghost" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 3, tone: 'success', leftIcon: _jsx(LuCheck, { size: 16 }), children: "Success" }), _jsx(Button, { size: 3, tone: 'warning', v: 'soft', leftIcon: _jsx(LuTriangleAlert, { size: 16 }), children: "Warning" }), _jsx(Button, { size: 3, tone: 'info', v: 'soft', leftIcon: _jsx(LuInfo, { size: 16 }), children: "Info" }), _jsx(Button, { size: 3, tone: 'danger', v: 'soft', leftIcon: _jsx(LuTrash2, { size: 16 }), children: "Delete" }), _jsx(Button, { size: 3, loading: true, children: "Loading" }), _jsx(Button, { size: 3, v: 'surface', loading: true, leftIcon: _jsx(LuCheck, { size: 16 }), children: "Save" }), _jsx(Button, { size: 3, tone: 'success', loading: true, leftIcon: _jsx(LuCheck, { size: 16 }), children: "Success" }), _jsx(Spinner, {})] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 1, v: 'surface', children: "Size 1" }), _jsx(Button, { size: 2, v: 'surface', children: "Size 2" }), _jsx(Button, { size: 3, v: 'surface', children: "Size 3" }), _jsx(Button, { size: 4, v: 'surface', children: "Size 4" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 1, children: "Solid 1" }), _jsx(Button, { size: 2, v: 'soft', children: "Soft 2" }), _jsx(Button, { size: 3, v: 'surface', children: "Surface 3" }), _jsx(Button, { size: 3, v: 'pad', children: "Pad 3" }), _jsx(Button, { size: 4, v: 'outline', children: "Outline 4" }), _jsx(Button, { size: 2, v: 'ghost', children: "Ghost 2" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { v: 'surface', pressAnimation: 'translate', children: "Press translate" }), _jsx(Button, { v: 'surface', pressAnimation: 'scale', children: "Press scale" }), _jsx(Button, { v: 'surface', pressAnimation: 'soft', children: "Press soft" }), _jsx(Button, { v: 'surface', pressAnimation: 'none', children: "Press none" })] })] }) }), _jsx(UiExampleSection, { id: 'icon-buttons-example', title: 'Icon buttons', description: 'Icon-only actions, loading state, menu trigger and command entry.', children: _jsxs(ExampleTile, { title: 'Icon buttons', code: codeSamples.iconButtons, onOpen: onOpenCode, children: [_jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { v: 'solid', icon: _jsx(LuCheck, { size: 17 }), "aria-label": 'Solid icon' }), _jsx(IconButton, { v: 'soft', icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Soft icon' }), _jsx(IconButton, { v: 'surface', icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Surface icon' }), _jsx(IconButton, { v: 'pad', icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Pad icon' }), _jsx(IconButton, { v: 'outline', icon: _jsx(LuInfo, { size: 17 }), "aria-label": 'Outline icon' }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": 'Ghost icon' })] }), _jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { size: 1, v: 'surface', icon: _jsx(LuBell, { size: 13 }), "aria-label": 'Size 1 icon' }), _jsx(IconButton, { size: 2, v: 'surface', icon: _jsx(LuBell, { size: 15 }), "aria-label": 'Size 2 icon' }), _jsx(IconButton, { size: 3, v: 'surface', icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Size 3 icon' }), _jsx(IconButton, { size: 4, v: 'surface', icon: _jsx(LuBell, { size: 19 }), "aria-label": 'Size 4 icon' }), _jsx(IconButton, { size: 3, v: 'pad', round: false, r: 3, icon: _jsx(LuCommand, { size: 17 }), "aria-label": 'Square pad icon' }), _jsx(IconButton, { size: 3, v: 'outline', loading: true, icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Loading icon' })] }), _jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { size: 1, v: 'ghost', icon: _jsx(LuEllipsis, { size: 13 }), "aria-label": 'Ghost size 1' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuEllipsis, { size: 15 }), "aria-label": 'Ghost size 2' }), _jsx(IconButton, { size: 3, v: 'ghost', icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": 'Ghost size 3' }), _jsx(IconButton, { size: 4, v: 'ghost', icon: _jsx(LuEllipsis, { size: 19 }), "aria-label": 'Ghost size 4' })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Tooltip, { content: 'Notifications', children: _jsx(IconButton, { v: 'surface', icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Notifications' }) }), _jsx(IconButton, { v: 'surface', loading: true, icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Loading action' }), _jsx(IconButton, { v: 'pad', icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Pad action' }), _jsx(Menu, { trigger: _jsx(IconButton, { v: 'surface', icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": 'Actions' }), items: menuItems }), _jsx(Button, { v: 'surface', leftIcon: _jsx(LuCommand, { size: 16 }), onClick: onOpenPalette, children: "Commands" })] })] }) })] }));
+}

package/dist/example/ExampleBasicsSections.d.ts

@@ -0,0 +1,8 @@
+import { type CodeExample } from './codeSamples';
+type ExampleSectionProps = {
+    onOpenCode: (example: CodeExample) => void;
+};
+export declare function TypographySection({ onOpenCode }: ExampleSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutSection({ onOpenCode }: ExampleSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExampleBasicsSections.d.ts.map

package/dist/example/ExampleBasicsSections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleBasicsSections.d.ts","sourceRoot":"","sources":["../../src/example/ExampleBasicsSections.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,mBAAmB,GAAG;IACvB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAAC,UAAU,EAAC,EAAE,mBAAmB,2CAwElE;AAED,wBAAgB,aAAa,CAAC,EAAC,UAAU,EAAC,EAAE,mBAAmB,2CA2U9D"}

package/dist/example/ExampleBasicsSections.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AppShellNav, Badge, Box, Button, Collapse, Flex, Grid, PageTitleBlock, ScrollArea, Skeleton, Stack, Text, TopHighlight, BottomHighlight, } from '..';
+import { ExampleTile } from './CodePreview';
+import { codeSamples } from './codeSamples';
+import { UiExampleSection } from './UiExampleSection';
+export function TypographySection({ onOpenCode }) {
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'typography', title: 'Typography', description: 'Text and shared system props.', children: _jsx(ExampleTile, { title: 'Typography', code: codeSamples.typography, onOpen: onOpenCode, children: _jsxs(Stack, { g: 3, children: [_jsxs(Stack, { g: 1, children: [_jsx(Text, { as: 'h1', fs: '28px', fw: 780, lh: 1.1, children: "Workflow review" }), _jsx(Text, { as: 'h2', fs: '20px', fw: 720, lh: 1.2, children: "Review window and status" }), _jsx(Text, { tone: 'muted', fs: '13px', lh: 1.5, children: "Compact operational text with muted metadata and predictable line height." })] }), _jsxs(Stack, { g: 1, children: [_jsx(Text, { fs: '15px', fw: 700, children: "Body strong text" }), _jsx(Text, { fs: '14px', lh: 1.55, children: "Body regular text for dense forms and tables." }), _jsx(Text, { fs: '12px', tone: 'muted', lh: 1.4, children: "Caption text, helper text and quiet labels." })] }), _jsxs(Flex, { g: 2, wrap: true, children: [_jsx(Text, { tone: 'brand', fw: 700, children: "Brand" }), _jsx(Text, { tone: 'success', fw: 700, children: "Success" }), _jsx(Text, { tone: 'warning', fw: 700, children: "Warning" }), _jsx(Text, { tone: 'danger', fw: 700, children: "Danger" }), _jsx(Text, { tone: 'info', fw: 700, children: "Info" })] }), _jsx(Box, { w: '100%', p: 2, r: 3, style: { background: 'var(--oui-gray-a3)' }, children: _jsx(Text, { display: 'block', truncate: true, children: "This is a long single line value that truncates cleanly inside a constrained row." }) }), _jsxs(Flex, { g: 2, wrap: true, children: [_jsx(Badge, { children: "Neutral" }), _jsx(Badge, { tone: 'brand', children: "Brand" }), _jsx(Badge, { tone: 'success', children: "Success" }), _jsx(Badge, { tone: 'warning', children: "Warning" }), _jsx(Badge, { tone: 'danger', children: "Danger" }), _jsx(Badge, { tone: 'info', children: "Info" })] })] }) }) }), _jsx(UiExampleSection, { id: 'skeleton-example', title: 'Skeleton', description: 'Loading placeholder primitives.', children: _jsx(ExampleTile, { title: 'Skeleton', code: codeSamples.skeleton, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsx(Skeleton, { h: 16, w: '80%' }), _jsx(Skeleton, { h: 16, w: '64%' }), _jsx(Skeleton, { h: 36 })] }) }) })] }));
+}
+export function LayoutSection({ onOpenCode }) {
+    const [detailsOpen, setDetailsOpen] = useState(true);
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'app-shell-example', title: 'AppShell', description: 'Shared module frame primitives.', children: _jsx(ExampleTile, { title: 'AppShell primitives', code: codeSamples.appShell, onOpen: onOpenCode, children: _jsxs(Stack, { g: 3, children: [_jsx(PageTitleBlock, { title: 'Operations', caption: 'Shared module frame with themed navigation and page actions.', badge: 'shell', action: _jsx(Button, { size: 1, children: "Create" }) }), _jsx(AppShellNav, { items: [
+                                    { key: 'queue', label: 'Queue', caption: 'Daily operations', active: true },
+                                    { key: 'status', label: 'Status', caption: 'Inventory control', badge: 12 },
+                                    { key: 'reports', label: 'Reports', caption: 'Exports and analytics' },
+                                ] })] }) }) }), _jsx(UiExampleSection, { id: 'flex-example', title: 'Flex', description: 'Row and column alignment primitive.', children: _jsx(ExampleTile, { title: 'Flex', code: codeSamples.layoutFlex, onOpen: onOpenCode, children: _jsxs(Flex, { col: true, g: 3, children: [_jsxs(Flex, { row: true, g: 2, a: 'c', j: 'sb', wrap: true, children: [_jsxs(Flex, { row: true, g: 2, a: 'c', wrap: true, children: [_jsx(Badge, { tone: 'brand', children: "status" }), _jsx(Text, { fw: 700, children: "Task TASK-2048" })] }), _jsxs(Flex, { row: true, g: 1, a: 'c', children: [_jsx(Button, { size: 1, v: 'surface', children: "Cancel" }), _jsx(Button, { size: 1, children: "Apply" })] })] }), _jsx(Flex, { row: true, g: 2, wrap: true, children: ['Intake', 'Review', 'Complete'].map((item, index) => (_jsxs(Flex, { col: true, g: 1, p: 2, r: 3, flex: '1 1 150px', style: { background: 'var(--oui-gray-a3)' }, children: [_jsxs(Text, { fs: '12px', tone: 'muted', children: ["Step ", index + 1] }), _jsx(Text, { fw: 700, children: item })] }, item))) })] }) }) }), _jsx(UiExampleSection, { id: 'stack-example', title: 'Stack', description: 'Vertical spacing primitive.', children: _jsx(ExampleTile, { title: 'Stack', code: codeSamples.layoutStack, onOpen: onOpenCode, children: _jsx(Stack, { g: 2, children: [
+                            ['Created', 'Draft created from intake'],
+                            ['Reserved', 'Capacity is reserved for review'],
+                            ['Scheduled', 'Review window is confirmed'],
+                        ].map(([title, description]) => (_jsxs(Flex, { row: true, g: 2, p: 2, r: 3, a: 's', style: { background: 'var(--oui-gray-a3)' }, children: [_jsx(Box, { size: 8, r: 7, mt: 1, style: { background: 'var(--oui-brand)' } }), _jsxs(Stack, { g: 0, children: [_jsx(Text, { fs: '13px', fw: 700, children: title }), _jsx(Text, { fs: '12px', tone: 'muted', lh: 1.45, children: description })] })] }, title))) }) }) }), _jsx(UiExampleSection, { id: 'collapse-example', title: 'Collapse', description: 'Expandable content primitive.', children: _jsx(ExampleTile, { title: 'Collapse', code: codeSamples.layoutCollapse, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsxs(Flex, { row: true, g: 2, a: 'c', j: 'sb', children: [_jsx(Text, { fw: 700, children: "Item details" }), _jsx(Button, { size: 1, v: 'surface', onClick: () => setDetailsOpen((open) => !open), children: detailsOpen ? 'Hide' : 'Show' })] }), _jsx(Collapse, { open: detailsOpen, children: _jsxs(Stack, { g: 2, p: 2, r: 3, style: { background: 'var(--oui-gray-a3)' }, children: [_jsxs(Flex, { row: true, g: 2, j: 'sb', children: [_jsx(Text, { tone: 'muted', children: "Owner" }), _jsx(Text, { fw: 700, children: "Core team" })] }), _jsxs(Flex, { row: true, g: 2, j: 'sb', children: [_jsx(Text, { tone: 'muted', children: "Window" }), _jsx(Text, { fw: 700, children: "09:00 - 12:00" })] }), _jsxs(Flex, { row: true, g: 2, j: 'sb', children: [_jsx(Text, { tone: 'muted', children: "Priority" }), _jsx(Badge, { tone: 'warning', children: "High" })] })] }) })] }) }) }), _jsx(UiExampleSection, { id: 'grid-example', title: 'Grid', description: 'Grid layout primitive.', children: _jsx(ExampleTile, { title: 'Grid', code: codeSamples.layoutGrid, onOpen: onOpenCode, children: _jsx(Grid, { columns: 'repeat(3, minmax(0, 1fr))', g: 2, children: ['A', 'B', 'C', 'D', 'E', 'F'].map((item) => (_jsx(Box, { p: 2, r: 3, ta: 'center', style: { background: 'var(--oui-gray-a3)' }, children: _jsx(Text, { fs: '13px', fw: 700, children: item }) }, item))) }) }) }), _jsx(UiExampleSection, { id: 'highlight-primitives-example', title: 'Highlight primitives', description: 'Standalone edge mask primitives.', children: _jsx(ExampleTile, { title: 'Highlight primitives', code: codeSamples.highlights, onOpen: onOpenCode, children: _jsxs("div", { className: 'oui-highlight-demo-surface', style: { background: 'var(--oui-section-nested-solid-bg)' }, children: [_jsx(TopHighlight, { h: 32, color: 'var(--oui-section-nested-solid-bg)', position: 'absolute' }), _jsx(Text, { fs: '13px', fw: 700, children: "Top and bottom highlights" }), _jsx(Text, { fs: '12px', tone: 'muted', children: "One surface shows both edge masks at the same time." }), _jsx(BottomHighlight, { h: 32, color: 'var(--oui-section-nested-solid-bg)', position: 'absolute' })] }) }) }), _jsx(UiExampleSection, { id: 'scroll-area-example', title: 'ScrollArea', description: 'Themed scroll container with optional edge highlights.', children: _jsx(ExampleTile, { title: 'ScrollArea', code: codeSamples.scrollArea, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsx(ScrollArea, { h: 116, pr: 1, children: _jsx(Stack, { g: 1, children: Array.from({ length: 10 }, (_, index) => (_jsx(Box, { p: 2, r: 3, style: { background: 'var(--oui-gray-a3)' }, children: _jsxs(Text, { fs: '13px', children: ["Scroll row ", index + 1] }) }, index))) }) }), _jsx(ScrollArea, { h: 112, pr: 1, highlights: true, highlightColor: 'var(--oui-section-nested-solid-bg)', highlightTop: { h: 28, mode: 'static', maxOpacity: 0.96 }, highlightBottom: { h: 28, mode: 'static', maxOpacity: 0.96 }, children: _jsx(Stack, { g: 1, children: Array.from({ length: 8 }, (_, index) => (_jsx(Box, { p: 2, r: 3, style: { background: 'var(--oui-gray-a3)' }, children: _jsxs(Text, { fs: '13px', children: ["Both edges row ", index + 1] }) }, index))) }) }), _jsx(ScrollArea, { h: 176, pr: 1, highlights: true, highlightColor: 'var(--oui-section-nested-solid-bg)', highlightTop: {
+                                    h: 42,
+                                    mode: 'scroll',
+                                    start: 50,
+                                    fadeDistance: 160,
+                                    maxOpacity: 0.94,
+                                }, highlightBottom: {
+                                    h: 34,
+                                    mode: 'scroll',
+                                    start: 12,
+                                    fadeDistance: 96,
+                                    maxOpacity: 0.9,
+                                }, children: _jsx(Stack, { g: 1, children: [
+                                        ['Queued', 'No top shade at the initial position.'],
+                                        ['Reserved', 'The top shade starts after 50px.'],
+                                        ['Packed', 'Opacity reaches maximum over 160px.'],
+                                        ['Labeled', 'Bottom shade fades near the end.'],
+                                        ['Reviewed', 'Each edge has its own configuration.'],
+                                        ['Delivered', 'The gradient uses the solid surface color.'],
+                                        ['Checked', 'Content remains readable under the fade.'],
+                                        ['Archived', 'The bottom edge disappears at the end.'],
+                                    ].map(([title, description], index) => (_jsxs(Flex, { row: true, g: 2, p: 2, r: 3, a: 'c', style: { background: 'var(--oui-gray-a3)' }, children: [_jsx(Badge, { tone: index < 3 ? 'brand' : 'info', children: index + 1 }), _jsxs(Stack, { g: 0, children: [_jsx(Text, { fs: '13px', fw: 700, children: title }), _jsx(Text, { fs: '12px', tone: 'muted', children: description })] })] }, title))) }) })] }) }) }), _jsx(UiExampleSection, { id: 'system-radius-example', title: 'System radius', description: 'Radius system prop scale.', children: _jsxs(ExampleTile, { title: 'System radius', code: codeSamples.systemRadius, onOpen: onOpenCode, children: [_jsx(Flex, { g: 2, a: 'c', wrap: true, children: [0, 2, 4, 6, 7].map((radius) => (_jsx(Box, { size: 32, r: radius, display: 'flex', a: 'c', j: 'c', style: { background: 'var(--oui-gray-a3)' }, children: _jsx(Text, { fs: '12px', fw: 700, children: radius }) }, radius))) }), _jsx(Button, { mt: 2, v: 'pad', r: 7, children: "Button r=7" })] }) })] }));
+}

package/dist/example/ExampleDataSection.d.ts

@@ -0,0 +1,7 @@
+import { type CodeExample } from './codeSamples';
+type DataSectionProps = {
+    onOpenCode: (example: CodeExample) => void;
+};
+export declare function DataSection({ onOpenCode }: DataSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExampleDataSection.d.ts.map

package/dist/example/ExampleDataSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleDataSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleDataSection.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,gBAAgB,GAAG;IACpB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AA2DF,wBAAgB,WAAW,CAAC,EAAC,UAAU,EAAC,EAAE,gBAAgB,2CAuHzD"}

package/dist/example/ExampleDataSection.js

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Badge, Button, DataTable, Text, TextField, } from '..';
+import { ExampleTile } from './CodePreview';
+import { codeSamples } from './codeSamples';
+import { UiExampleSection } from './UiExampleSection';
+const rows = [
+    { name: 'Review item', status: 'Done', owner: 'Team C', quantity: 128 },
+    { name: 'Review task', status: 'Working', owner: 'Team B', quantity: 42 },
+    { name: 'Complete', status: 'Blocked', owner: 'Team A', quantity: 12 },
+    { name: 'Return', status: 'Working', owner: 'Team C', quantity: 7 },
+    { name: 'Audit task', status: 'Done', owner: 'Team B', quantity: 64 },
+    { name: 'Sync task', status: 'Blocked', owner: 'Team A', quantity: 18 },
+];
+const columns = [
+    {
+        key: 'name',
+        title: 'Name',
+        sortable: true,
+        resizable: true,
+        minWidth: 170,
+        render: (row) => row.name,
+    },
+    {
+        key: 'status',
+        title: 'Status',
+        sortable: true,
+        resizable: true,
+        width: 150,
+        render: (row) => _jsx(Badge, { tone: statusTone(row.status), children: row.status }),
+    },
+    {
+        key: 'owner',
+        title: 'Owner',
+        sortable: true,
+        resizable: true,
+        width: 180,
+        render: (row) => row.owner,
+    },
+    {
+        key: 'quantity',
+        title: 'Qty',
+        sortable: true,
+        align: 'right',
+        width: 90,
+        hideable: true,
+        render: (row) => row.quantity,
+    },
+];
+const defaultVisibleColumnKeys = columns
+    .filter((column) => column.defaultVisible !== false)
+    .map((column) => column.key);
+const defaultColumnOrder = columns.map((column) => column.key);
+export function DataSection({ onOpenCode }) {
+    const [query, setQuery] = useState('');
+    const [sort, setSort] = useState({
+        key: 'name',
+        direction: 'asc',
+    });
+    const [selectedRowKeys, setSelectedRowKeys] = useState(['Review item']);
+    const [visibleColumnKeys, setVisibleColumnKeys] = useState(defaultVisibleColumnKeys);
+    const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
+    const [columnWidths, setColumnWidths] = useState({});
+    const filteredRows = useMemo(() => sortRows(rows.filter((row) => rowMatches(row, query)), sort), [query, sort]);
+    return (_jsx(UiExampleSection, { id: 'data-table-example', title: 'DataTable', description: 'Reusable DataTable without CRUD or page-level entity logic.', children: _jsx(ExampleTile, { className: 'oui-ui-table-tile', title: 'DataTable', code: codeSamples.data, onOpen: onOpenCode, children: _jsxs("div", { className: 'oui-ui-table-demo', children: [_jsx(DataTable, { toolbar: (_jsxs(_Fragment, { children: [_jsx(TextField, { value: query, placeholder: 'Filter rows', clearable: true, onChange: (event) => setQuery(event.target.value), onClear: () => setQuery('') }), _jsx(Button, { size: 3, v: 'surface', onClick: () => {
+                                        setVisibleColumnKeys(defaultVisibleColumnKeys);
+                                        setColumnOrder(defaultColumnOrder);
+                                        setColumnWidths({});
+                                    }, children: "Reset" })] })), rowKey: (row) => row.name, rows: filteredRows, columns: columns, sort: sort, onSortChange: (nextSort) => setSort(Array.isArray(nextSort) ? nextSort[0] ?? null : nextSort), selectable: true, selectedRowKeys: selectedRowKeys, onSelectedRowKeysChange: setSelectedRowKeys, total: rows.length, emptyText: 'No rows match the filter.', columnSettings: {
+                            columns,
+                            visibleColumnKeys,
+                            onVisibleColumnKeysChange: setVisibleColumnKeys,
+                            columnOrder,
+                            onColumnOrderChange: setColumnOrder,
+                            columnWidths,
+                            onColumnWidthsChange: setColumnWidths,
+                            onReset: () => {
+                                setVisibleColumnKeys(defaultVisibleColumnKeys);
+                                setColumnOrder(defaultColumnOrder);
+                                setColumnWidths({});
+                            },
+                        }, rowContextMenuActions: (row) => [
+                            {
+                                key: 'open',
+                                label: `Open ${row.name}`,
+                                onSelect: () => undefined,
+                            },
+                            {
+                                key: 'archive',
+                                label: 'Archive',
+                                tone: 'danger',
+                                onSelect: () => undefined,
+                            },
+                        ] }), _jsx("div", { className: 'oui-ui-table-variants', children: _jsxs("div", { className: 'oui-ui-table-variant', children: [_jsx(Text, { fs: '13px', fw: 760, children: "Plain table" }), _jsx(DataTable, { rowKey: (row) => row.name, rows: rows.slice(0, 4), columns: columns, sort: sort, onSortChange: (nextSort) => setSort(Array.isArray(nextSort)
+                                        ? nextSort[0] ?? null
+                                        : nextSort), total: rows.length, emptyText: 'No rows.' })] }) })] }) }) }));
+}
+function sortRows(rows, sort) {
+    if (!sort)
+        return rows;
+    const sign = sort.direction === 'asc' ? 1 : -1;
+    return [...rows].sort((left, right) => {
+        const leftValue = left[sort.key];
+        const rightValue = right[sort.key];
+        if (typeof leftValue === 'number' && typeof rightValue === 'number') {
+            return (leftValue - rightValue) * sign;
+        }
+        return String(leftValue).localeCompare(String(rightValue)) * sign;
+    });
+}
+function rowMatches(row, query) {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized)
+        return true;
+    return `${row.name} ${row.owner} ${row.status}`.toLowerCase().includes(normalized);
+}
+function statusTone(status) {
+    if (status === 'Done')
+        return 'success';
+    if (status === 'Blocked')
+        return 'danger';
+    return 'warning';
+}

package/dist/example/ExampleFieldsSection.d.ts

@@ -0,0 +1,17 @@
+import { type CodeExample } from './codeSamples';
+type DateRangeValue = {
+    from: string;
+    to: string;
+};
+type FieldsSectionProps = {
+    stepperValue: number;
+    onStepperValueChange: (value: number) => void;
+    dateValue: string;
+    onDateValueChange: (value: string) => void;
+    dateRange: DateRangeValue;
+    onDateRangeChange: (value: DateRangeValue) => void;
+    onOpenCode: (example: CodeExample) => void;
+};
+export declare function FieldsSection({ stepperValue, onStepperValueChange, dateValue, onDateValueChange, dateRange, onDateRangeChange, onOpenCode, }: FieldsSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExampleFieldsSection.d.ts.map

package/dist/example/ExampleFieldsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleFieldsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleFieldsSection.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,cAAc,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC1B,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,UAAU,GACb,EAAE,kBAAkB,2CA2HpB"}

package/dist/example/ExampleFieldsSection.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LuSearch } from 'react-icons/lu';
+import { Button, DatePicker, DateRangePicker, DateRangePresetPicker, Flex, Field, Grid, NumberField, Section, Stack, StepperInput, Text, TextArea, TextField, } from '..';
+import { ExampleTile } from './CodePreview';
+import { codeSamples } from './codeSamples';
+import { UiExampleSection } from './UiExampleSection';
+export function FieldsSection({ stepperValue, onStepperValueChange, dateValue, onDateValueChange, dateRange, onDateRangeChange, onOpenCode, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'text-fields-example', title: 'Text fields', description: 'TextField and TextArea inside Field.', children: _jsxs(ExampleTile, { title: 'Text fields', code: codeSamples.textFields, onOpen: onOpenCode, children: [_jsx(Field, { label: 'Search', helperText: 'Clearable field with left slot.', children: _jsxs(Flex, { g: 2, a: 'c', children: [_jsx(TextField, { size: 2, placeholder: 'Search item', clearable: true, leftSlot: _jsx(LuSearch, { size: 16 }) }), _jsx(Button, { size: 2, v: 'surface', children: "Search" })] }) }), _jsx(Field, { label: 'Comment', children: _jsx(TextArea, { rows: 4, placeholder: 'Internal note' }) })] }) }), _jsx(UiExampleSection, { id: 'grouped-fields-example', title: 'Grouped fields', description: 'Layout primitives group fields without owning form state.', children: _jsx(ExampleTile, { title: 'Grouped fields', code: codeSamples.groupedFields, onOpen: onOpenCode, children: _jsxs(Section, { g: 3, children: [_jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Request details" }), _jsx(Text, { fs: '12px', tone: 'muted', children: "Layout primitives group fields without owning state." })] }), _jsxs(Stack, { g: 3, children: [_jsxs(Grid, { columns: 'repeat(auto-fit, minmax(min(100%, 180px), 1fr))', g: 3, children: [_jsx(Field, { label: 'Source', required: true, error: 'Choose a source', children: _jsx(TextField, { placeholder: 'Search source', invalid: true }) }), _jsx(Field, { label: 'Contact', children: _jsx(TextField, { placeholder: 'Name or email' }) })] }), _jsx(Field, { label: 'Review note', helperText: 'Visible to operators.', children: _jsx(TextArea, { rows: 3, placeholder: 'Internal instructions' }) }), _jsxs(Flex, { g: 2, j: 'e', wrap: true, children: [_jsx(Button, { type: 'button', v: 'surface', children: "Cancel" }), _jsx(Button, { type: 'button', children: "Save request" })] })] })] }) }) }), _jsx(UiExampleSection, { id: 'number-date-fields-example', title: 'Number and date fields', description: 'StepperInput, NumberField and DatePicker.', children: _jsxs(ExampleTile, { title: 'Number and date fields', code: codeSamples.numberAndDateFields, onOpen: onOpenCode, children: [_jsx(Field, { label: 'Quantity', children: _jsx(StepperInput, { value: stepperValue, onChange: onStepperValueChange, min: 0, max: 200 }) }), _jsx(Field, { label: 'Price', children: _jsx(NumberField, { defaultValue: 1250, min: 0 }) }), _jsx(Field, { label: 'Date', children: _jsx(DatePicker, { value: dateValue, onValueChange: onDateValueChange }) })] }) }), _jsx(UiExampleSection, { id: 'date-range-example', title: 'Date range', description: 'DateRangePicker and preset helper.', children: _jsxs(ExampleTile, { title: 'Date range', code: codeSamples.dateRangeFields, onOpen: onOpenCode, children: [_jsx(Field, { label: 'Range', children: _jsx(DateRangePicker, { value: dateRange, onValueChange: onDateRangeChange }) }), _jsx(DateRangePresetPicker, { today: '2026-06-26', onValueChange: onDateRangeChange }), _jsx(Text, { fs: '12px', tone: 'muted', children: "Date inputs stay as controls. Form ownership belongs to the application." })] }) })] }));
+}

package/dist/example/ExampleFoundationsSection.d.ts

@@ -0,0 +1,5 @@
+import { type CodeExample } from './codeSamples';
+export declare function FoundationsSection({ onOpenCode, }: {
+    onOpenCode: (example: CodeExample) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExampleFoundationsSection.d.ts.map

package/dist/example/ExampleFoundationsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleFoundationsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleFoundationsSection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAe/C,wBAAgB,kBAAkB,CAAC,EAC/B,UAAU,GACb,EAAE;IACC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,2CAiCA"}

package/dist/example/ExampleFoundationsSection.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Stack, Text } from '..';
+import { ExampleTile } from './CodePreview';
+import {} from './codeSamples';
+import { UiExampleSection } from './UiExampleSection';
+const providerSample = {
+    title: 'OrcestrUiProvider',
+    code: `import {OrcestrUiProvider} from '@orcestr/ui';
+
+<OrcestrUiProvider
+    surface='operations'
+    locale='ru'
+>
+    <App />
+</OrcestrUiProvider>`,
+};
+export function FoundationsSection({ onOpenCode, }) {
+    return (_jsx(UiExampleSection, { id: 'foundations', title: '\u041A\u043E\u043D\u0442\u0440\u0430\u043A\u0442\u044B \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0438', description: '\u0411\u0430\u0437\u043E\u0432\u044B\u0435 \u043F\u0440\u0430\u0432\u0438\u043B\u0430 \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F Orcestr UI: provider, \u043F\u0443\u0431\u043B\u0438\u0447\u043D\u044B\u0439 API, \u0442\u043E\u043A\u0435\u043D\u044B \u0438 \u043F\u0440\u043E\u0432\u0435\u0440\u043A\u0438.', children: _jsx(Stack, { g: 3, children: _jsx(ExampleTile, { id: 'provider-contract-example', title: 'OrcestrUiProvider', code: providerSample.code, onOpen: onOpenCode, children: _jsx("div", { className: 'oui-ui-contract-grid', children: [
+                        ['Provider', 'theme, locale, portal, overlays, toast'],
+                        ['Публичный API', 'size, tone, v, disabled, loading, invalid, testId'],
+                        ['Стили', 'только oui-* классы внутри @orcestr/ui/styles.css'],
+                        ['Проверки', 'tsc, contract tests, diff check, /ui smoke'],
+                    ].map(([title, description]) => (_jsxs("div", { className: 'oui-ui-contract-item', children: [_jsx(Badge, { tone: 'brand', children: title }), _jsx(Text, { fs: '12px', tone: 'muted', children: description })] }, title))) }) }) }) }));
+}

package/dist/example/ExampleOverlays.d.ts

@@ -0,0 +1,30 @@
+import { type OrcestrUiLocale } from '..';
+type ToastTone = 'info' | 'success' | 'danger';
+type SetOpen = (open: boolean) => void;
+type ExampleOverlaysProps = {
+    locale: OrcestrUiLocale;
+    modalOpen: boolean;
+    setModalOpen: SetOpen;
+    nestedOpen: boolean;
+    setNestedOpen: SetOpen;
+    blurModalOpen: boolean;
+    setBlurModalOpen: SetOpen;
+    blurNestedOpen: boolean;
+    setBlurNestedOpen: SetOpen;
+    blurFinalOpen: boolean;
+    setBlurFinalOpen: SetOpen;
+    fastModalOpen: boolean;
+    setFastModalOpen: SetOpen;
+    slowModalOpen: boolean;
+    setSlowModalOpen: SetOpen;
+    riseModalOpen: boolean;
+    setRiseModalOpen: SetOpen;
+    dangerModalOpen: boolean;
+    setDangerModalOpen: SetOpen;
+    paletteOpen: boolean;
+    setPaletteOpen: SetOpen;
+    onToast: (title: string, tone?: ToastTone) => void;
+};
+export declare function ExampleOverlays({ locale, modalOpen, setModalOpen, nestedOpen, setNestedOpen, blurModalOpen, setBlurModalOpen, blurNestedOpen, setBlurNestedOpen, blurFinalOpen, setBlurFinalOpen, fastModalOpen, setFastModalOpen, slowModalOpen, setSlowModalOpen, riseModalOpen, setRiseModalOpen, dangerModalOpen, setDangerModalOpen, paletteOpen, setPaletteOpen, onToast, }: ExampleOverlaysProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExampleOverlays.d.ts.map

package/dist/example/ExampleOverlays.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleOverlays.d.ts","sourceRoot":"","sources":["../../src/example/ExampleOverlays.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,IAAI,CAAC;AAExC,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,KAAK,OAAO,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;AAEvC,KAAK,oBAAoB,GAAG;IACxB,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,OAAO,GACV,EAAE,oBAAoB,2CAgOtB"}

package/dist/example/ExampleOverlays.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, CommandPalette, Flex, Field, Modal, Stack, Text, TextField } from '..';
+import { getCommandItems } from './exampleData';
+import {} from '..';
+export function ExampleOverlays({ locale, modalOpen, setModalOpen, nestedOpen, setNestedOpen, blurModalOpen, setBlurModalOpen, blurNestedOpen, setBlurNestedOpen, blurFinalOpen, setBlurFinalOpen, fastModalOpen, setFastModalOpen, slowModalOpen, setSlowModalOpen, riseModalOpen, setRiseModalOpen, dangerModalOpen, setDangerModalOpen, paletteOpen, setPaletteOpen, onToast, }) {
+    const commandItems = getCommandItems(locale);
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { open: modalOpen, onOpenChange: setModalOpen, title: 'Custom modal', description: 'First modal layer with the default theme blur backdrop.', footer: _jsxs(Flex, { g: 2, j: 'e', w: '100%', children: [_jsx(Button, { v: 'surface', onClick: () => setModalOpen(false), children: "Close" }), _jsx(Button, { onClick: () => setNestedOpen(true), children: "Open nested" })] }), children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "Nested modals stack above the previous layer and keep independent smooth open and close animations." }), _jsx(Field, { label: 'Modal field', children: _jsx(TextField, { placeholder: 'Focus stays inside modal' }) })] }) }), _jsx(Modal, { open: nestedOpen, onOpenChange: setNestedOpen, title: 'Nested modal', description: 'Second layer with the same default modal animation.', maxWidth: 440, children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "This checks layer indexes, focus trap and escape handling." }), _jsx(Button, { onClick: () => onToast('Nested modal action completed', 'success'), children: "Show toast" })] }) }), _jsx(Modal, { open: blurModalOpen, onOpenChange: setBlurModalOpen, title: 'Blur modal', description: 'Default modal surface with pure backdrop blur and no overlay tint.', maxWidth: 560, overlayColor: 'transparent', overlayOpacity: 0, overlayBlur: 10, borderColor: 'color-mix(in srgb, var(--oui-brand) 34%, var(--oui-border))', radius: 10, shadow: '0 24px 90px rgb(0 0 0 / 44%)', footer: _jsxs(Flex, { g: 2, j: 'e', w: '100%', children: [_jsx(Button, { v: 'surface', onClick: () => setBlurModalOpen(false), children: "Close" }), _jsx(Button, { onClick: () => setBlurNestedOpen(true), children: "Open nested blur" })] }), children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "This variant checks a strong backdrop blur while the overlay tint stays fully transparent." }), _jsx(Field, { label: 'Reference', children: _jsx(TextField, { placeholder: 'ORD-2048' }) })] }) }), _jsx(Modal, { open: blurNestedOpen, onOpenChange: setBlurNestedOpen, title: 'Nested blur modal', description: 'Second blur layer without overlay tint.', maxWidth: 500, overlayColor: 'transparent', overlayOpacity: 0, overlayBlur: 8, borderColor: 'color-mix(in srgb, var(--oui-brand) 38%, var(--oui-border))', radius: 10, footer: _jsxs(Flex, { g: 2, j: 'e', w: '100%', children: [_jsx(Button, { v: 'surface', onClick: () => setBlurNestedOpen(false), children: "Close" }), _jsx(Button, { onClick: () => setBlurFinalOpen(true), children: "Open final blur" })] }), children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "This layer keeps the backdrop blur transparent while stacking above the first blur modal." }), _jsx(TextField, { placeholder: 'Nested value' })] }) }), _jsx(Modal, { open: blurFinalOpen, onOpenChange: setBlurFinalOpen, title: 'Final blur modal', description: 'Top blur layer. Toast must appear above this modal.', maxWidth: 440, overlayColor: 'transparent', overlayOpacity: 0, overlayBlur: 6, borderColor: 'color-mix(in srgb, var(--oui-brand) 42%, var(--oui-border))', radius: 10, children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "Use this modal to verify blur stacking and toast z-index." }), _jsx(Button, { onClick: () => onToast('Toast above nested blur modals', 'success'), children: "Show toast" })] }) }), _jsx(Modal, { open: fastModalOpen, onOpenChange: setFastModalOpen, title: 'Fast modal', description: 'Short animationDuration passed directly to the modal.', maxWidth: 460, overlayColor: '#0b1020', overlayOpacity: 0.28, overlayBlur: 4, animationDuration: '160ms', children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "This variant opens and closes quickly while still animating the backdrop blur." }), _jsx(Button, { onClick: () => setFastModalOpen(false), children: "Close" })] }) }), _jsx(Modal, { open: slowModalOpen, onOpenChange: setSlowModalOpen, title: 'Very slow modal', description: 'Long animationDuration for checking smooth blur ramp.', maxWidth: 520, overlayColor: 'transparent', overlayOpacity: 0, overlayBlur: 14, animationDuration: '1200ms', borderColor: 'color-mix(in srgb, var(--oui-brand) 42%, var(--oui-border))', radius: 10, children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "The backdrop blur should build up and fade out gradually during the whole animation." }), _jsx(Button, { onClick: () => setSlowModalOpen(false), children: "Close" })] }) }), _jsx(Modal, { open: riseModalOpen, onOpenChange: setRiseModalOpen, title: 'Rise modal', description: 'Legacy rise animation kept as an explicit modal animation variant.', maxWidth: 480, overlayColor: '#0b1020', overlayOpacity: 0.28, overlayBlur: 4, animation: 'rise', children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "This keeps the previous small scale and vertical movement without content blur." }), _jsx(Button, { onClick: () => setRiseModalOpen(false), children: "Close" })] }) }), _jsx(Modal, { open: dangerModalOpen, onOpenChange: setDangerModalOpen, title: 'Danger modal', description: 'Strong colored overlay, danger border and compact radius.', maxWidth: 500, overlayColor: '#3b0712', overlayOpacity: 0.48, overlayBlur: 3, borderColor: 'color-mix(in srgb, var(--oui-danger) 46%, var(--oui-border))', radius: 8, footer: _jsxs(Flex, { g: 2, j: 'e', w: '100%', children: [_jsx(Button, { v: 'surface', onClick: () => setDangerModalOpen(false), children: "Cancel" }), _jsx(Button, { tone: 'danger', onClick: () => {
+                                setDangerModalOpen(false);
+                                onToast('Danger action confirmed', 'danger');
+                            }, children: "Confirm" })] }), children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "This variant checks a colored backdrop without a hard flash on open or close." }), _jsx(TextField, { value: 'Archive selected record', readOnly: true })] }) }), _jsx(CommandPalette, { open: paletteOpen, onOpenChange: setPaletteOpen, items: commandItems, recentItems: commandItems.slice(1, 3), globalOpenEvents: ['orcestr:open-command-palette'], onSelect: (value) => onToast(`Command selected: ${value}`, 'info') })] }));
+}

package/dist/example/ExampleOverlaysSection.d.ts

@@ -0,0 +1,14 @@
+import { type CodeExample } from './codeSamples';
+type SetOpen = (open: boolean) => void;
+type OverlaysSectionProps = {
+    setModalOpen: SetOpen;
+    setBlurModalOpen: SetOpen;
+    setFastModalOpen: SetOpen;
+    setRiseModalOpen: SetOpen;
+    setSlowModalOpen: SetOpen;
+    setDangerModalOpen: SetOpen;
+    onOpenCode: (example: CodeExample) => void;
+};
+export declare function OverlaysSection({ setModalOpen, setBlurModalOpen, setFastModalOpen, setRiseModalOpen, setSlowModalOpen, setDangerModalOpen, onOpenCode, }: OverlaysSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExampleOverlaysSection.d.ts.map

package/dist/example/ExampleOverlaysSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleOverlaysSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleOverlaysSection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,OAAO,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;AAEvC,KAAK,oBAAoB,GAAG;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAgEF,wBAAgB,eAAe,CAAC,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,GACb,EAAE,oBAAoB,2CA+OtB"}