@orcestr/ui 0.1.1 → 0.2.0

package/dist/example/ExampleBasicsSections.js

@@ -6,21 +6,29 @@ import { ExampleTile } from './CodePreview';
 import { codeSamples } from './codeSamples';
 import { UiExampleSection } from './UiExampleSection';
 export function TextSection({ onOpenCode }) {
-    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'text', title: 'Text', description: 'Text and shared system props.', children: _jsx(ExampleTile, { title: 'Text', code: codeSamples.text, 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: "Operations 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: 'primary', fw: 700, children: "Primary" }), _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: 'primary', children: "Primary" }), _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 })] }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: "text", title: "Text", description: "Text and shared system props.", children: _jsx(ExampleTile, { title: "Text", code: codeSamples.text, 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: "Operations 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: "primary", fw: 700, children: "Primary" }), _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-pad-bg)' }, 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: "primary", children: "Primary" }), _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: '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: 'primary', 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: [
-                            ['/gallery/cyberpunk-rain.webp', 'Created', 'Draft created from intake'],
-                            ['/gallery/hollywood-star.webp', 'Reserved', 'Capacity is reserved for review'],
+    return (_jsxs(_Fragment, { children: [_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: "primary", 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-pad-bg)' }, 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: [
+                            [
+                                '/gallery/cyberpunk-rain.webp',
+                                'Created',
+                                'Draft created from intake',
+                            ],
+                            [
+                                '/gallery/hollywood-star.webp',
+                                'Reserved',
+                                'Capacity is reserved for review',
+                            ],
                             ['/gallery/ice-cave.webp', 'Scheduled', 'Review window is confirmed'],
-                        ].map(([image, title, description]) => (_jsxs(Flex, { row: true, g: 2, a: 'c', w: 'min(100%, 360px)', p: '8px 10px', r: 2, style: { background: 'var(--oui-gray-a3)' }, children: [_jsx("img", { src: image, alt: '', style: {
+                        ].map(([image, title, description]) => (_jsxs(Flex, { row: true, g: 2, a: "c", w: "min(100%, 360px)", p: "8px 10px", r: 2, style: { background: 'var(--oui-pad-bg)' }, children: [_jsx("img", { src: image, alt: "", style: {
                                         width: 34,
                                         height: 34,
                                         flex: '0 0 34px',
                                         borderRadius: 999,
                                         objectFit: 'cover',
-                                    } }), _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: 'surfaces-example', title: 'Surfaces', description: 'Card, Section, Separator and Alert primitives.', children: _jsx(ExampleTile, { title: 'Surfaces', code: codeSamples.surfaces, onOpen: onOpenCode, children: _jsxs(Section, { g: 3, children: [_jsxs(Grid, { columns: 'repeat(auto-fit, minmax(min(100%, 180px), 1fr))', g: 2, children: [_jsx(Card, { v: 'surface', interactive: true, children: _jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Surface card" }), _jsx(Text, { fs: '12px', tone: 'muted', children: "Default operational surface." })] }) }), _jsx(Card, { v: 'soft', children: _jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Soft card" }), _jsx(Text, { fs: '12px', tone: 'muted', children: "Quiet grouped content." })] }) }), _jsx(Card, { v: 'classic', children: _jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Classic card" }), _jsx(Text, { fs: '12px', tone: 'muted', children: "More explicit border and background." })] }) })] }), _jsx(Separator, {}), _jsx(Alert, { title: 'Inventory sync delayed', action: _jsx(Button, { size: 1, v: 'surface', children: "Retry" }), children: "Check this status before creating the next shipment." })] }) }) }), _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: {
+                                    } }), _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-pad-bg)' }, 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: "surfaces-example", title: "Surfaces", description: "Card, Section, Separator and Alert primitives.", children: _jsx(ExampleTile, { title: "Surfaces", code: codeSamples.surfaces, onOpen: onOpenCode, children: _jsxs(Section, { g: 3, children: [_jsxs(Grid, { columns: "repeat(auto-fit, minmax(min(100%, 180px), 1fr))", g: 2, children: [_jsx(Card, { v: "surface", interactive: true, children: _jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Surface card" }), _jsx(Text, { fs: "12px", tone: "muted", children: "Default operational surface." })] }) }), _jsx(Card, { v: "soft", children: _jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Soft card" }), _jsx(Text, { fs: "12px", tone: "muted", children: "Quiet grouped content." })] }) }), _jsx(Card, { v: "classic", children: _jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Classic card" }), _jsx(Text, { fs: "12px", tone: "muted", children: "More explicit border and background." })] }) })] }), _jsx(Separator, {}), _jsx(Alert, { title: "Inventory sync delayed", action: _jsx(Button, { size: 1, v: "surface", children: "Retry" }), children: "Check this status before creating the next shipment." })] }) }) }), _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-pad-bg)' }, 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-pad-bg)' }, 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-pad-bg)' }, 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,
@@ -41,5 +49,5 @@ export function LayoutSection({ onOpenCode }) {
                                         ['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 ? 'primary' : '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" })] }) })] }));
+                                    ].map(([title, description], index) => (_jsxs(Flex, { row: true, g: 2, p: 2, r: 3, a: "c", style: { background: 'var(--oui-pad-bg)' }, children: [_jsx(Badge, { tone: index < 3 ? 'primary' : '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-pad-bg)' }, 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.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleDataSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleDataSection.tsx"],"names":[],"mappings":"AAkBA,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,2CA0KzD"}
+{"version":3,"file":"ExampleDataSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleDataSection.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,KAAK,gBAAgB,GAAG;IACpB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AA2DF,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,EAAE,gBAAgB,2CAwK3D"}

package/dist/example/ExampleDataSection.js

@@ -64,11 +64,11 @@ export function DataSection({ onOpenCode }) {
     const [columnWidths, setColumnWidths] = useState({});
     const [page, setPage] = useState(2);
     const filteredRows = useMemo(() => sortRows(rows.filter((row) => rowMatches(row, query)), sort), [query, sort]);
-    return (_jsxs(_Fragment, { children: [_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: () => {
+    return (_jsxs(_Fragment, { children: [_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: {
+                                            }, 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,
@@ -93,9 +93,9 @@ export function DataSection({ onOpenCode }) {
                                         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.' })] }) })] }) }) }), _jsx(UiExampleSection, { id: 'table-primitives-example', title: 'Table and pagination', description: 'Low-level Table primitive and page navigation.', children: _jsx(ExampleTile, { title: 'Table and pagination', code: codeSamples.tablePagination, onOpen: onOpenCode, children: _jsxs(Stack, { g: 3, children: [_jsxs(Table, { v: 'surface', w: '100%', children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.ColumnHeaderCell, { children: "Document" }), _jsx(Table.ColumnHeaderCell, { children: "Status" }), _jsx(Table.ColumnHeaderCell, { align: 'right', children: "Qty" })] }) }), _jsx(Table.Body, { children: rows.slice(0, 3).map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.RowHeaderCell, { children: row.name }), _jsx(Table.Cell, { children: _jsx(Badge, { tone: statusTone(row.status), children: row.status }) }), _jsx(Table.Cell, { align: 'right', children: row.quantity })] }, row.name))) })] }), _jsxs(Flex, { j: 'sb', a: 'c', wrap: true, g: 2, children: [_jsx(Text, { fs: '13px', tone: 'muted', children: "Showing 25 items per page" }), _jsx(Pagination, { page: page, pageCount: 4, onPageChange: setPage })] })] }) }) })] }));
+                                ] }), _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." })] }) })] }) }) }), _jsx(UiExampleSection, { id: "table-primitives-example", title: "Table and pagination", description: "Low-level Table primitive and page navigation.", children: _jsx(ExampleTile, { title: "Table and pagination", code: codeSamples.tablePagination, onOpen: onOpenCode, children: _jsxs(Stack, { g: 3, children: [_jsxs(Table, { v: "surface", w: "100%", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.ColumnHeaderCell, { children: "Document" }), _jsx(Table.ColumnHeaderCell, { children: "Status" }), _jsx(Table.ColumnHeaderCell, { align: "right", children: "Qty" })] }) }), _jsx(Table.Body, { children: rows.slice(0, 3).map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.RowHeaderCell, { children: row.name }), _jsx(Table.Cell, { children: _jsx(Badge, { tone: statusTone(row.status), children: row.status }) }), _jsx(Table.Cell, { align: "right", children: row.quantity })] }, row.name))) })] }), _jsxs(Flex, { j: "sb", a: "c", wrap: true, g: 2, children: [_jsx(Text, { fs: "13px", tone: "muted", children: "Showing 25 items per page" }), _jsx(Pagination, { page: page, pageCount: 4, onPageChange: setPage })] })] }) }) })] }));
 }
 function sortRows(rows, sort) {
     if (!sort)

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleFieldsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleFieldsSection.tsx"],"names":[],"mappings":"AA4BA,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;AAqBF,wBAAgB,aAAa,CAAC,EAC1B,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,UAAU,GACb,EAAE,kBAAkB,2CA4SpB"}
+{"version":3,"file":"ExampleFieldsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleFieldsSection.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,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;AAqBF,wBAAgB,aAAa,CAAC,EAC1B,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,UAAU,GACb,EAAE,kBAAkB,2CA4RpB"}

package/dist/example/ExampleFieldsSection.js

@@ -33,26 +33,24 @@ export function FieldsSection({ stepperValue, onStepperValueChange, dateValue, o
     const selectedPaymentTerm = inlinePaymentTermOptions.find((item) => item.key === paymentTermKey);
     const selectedOwners = useMemo(() => inlineOwnerOptions.filter((item) => ownerKeys.includes(item.key)), [ownerKeys]);
     const toggleOwner = (key) => {
-        setOwnerKeys((current) => current.includes(key)
-            ? current.filter((item) => item !== key)
-            : [...current, key]);
+        setOwnerKeys((current) => current.includes(key) ? current.filter((item) => item !== key) : [...current, key]);
     };
-    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: 'inline-edit-example', title: 'Inline edit', description: 'Compact value displays for editable entity fields.', children: _jsx(ExampleTile, { title: 'Inline edit', code: codeSamples.inlineEdit, onOpen: onOpenCode, children: _jsxs(Stack, { g: 3, children: [_jsx(Field, { label: 'Single value', children: _jsx(InlineEditField, { label: selectedSupplier?.label ?? 'Choose supplier', meta: 'Supplier', onOpen: () => setSupplierOpen(true), action: (_jsx(Popover, { open: supplierOpen, onOpenChange: setSupplierOpen, trigger: (_jsx(IconButton, { size: 1, v: 'ghost', icon: _jsx(LuPencil, { size: 13 }), "aria-label": 'Edit supplier' })), className: 'oui-combobox-content oui-ui-inline-edit-popover', sideOffset: 4, children: _jsx(Listbox, { className: 'oui-combobox-options', items: inlineSupplierOptions.map((item) => ({
+    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: "inline-edit-example", title: "Inline edit", description: "Compact value displays for editable entity fields.", children: _jsx(ExampleTile, { title: "Inline edit", code: codeSamples.inlineEdit, onOpen: onOpenCode, children: _jsxs(Stack, { g: 3, children: [_jsx(Field, { label: "Single value", children: _jsx(InlineEditField, { label: selectedSupplier?.label ?? 'Choose supplier', meta: "Supplier", onOpen: () => setSupplierOpen(true), action: _jsx(Popover, { open: supplierOpen, onOpenChange: setSupplierOpen, trigger: _jsx(IconButton, { size: 1, v: "ghost", icon: _jsx(LuPencil, { size: 13 }), "aria-label": "Edit supplier" }), className: "oui-combobox-content oui-ui-inline-edit-popover", sideOffset: 4, children: _jsx(Listbox, { className: "oui-combobox-options", items: inlineSupplierOptions.map((item) => ({
                                                 value: item.key,
                                                 label: item.label,
                                             })), value: supplierKey, onValueChange: (nextKey) => {
                                                 setSupplierKey(nextKey);
                                                 setSupplierOpen(false);
-                                            } }) })), clearable: Boolean(selectedSupplier), onClear: () => setSupplierKey(null) }) }), _jsx(Field, { label: 'Single value without meta', children: _jsx(InlineEditField, { label: selectedPaymentTerm?.label ?? 'Choose payment terms', onOpen: () => setPaymentOpen(true), action: (_jsx(Popover, { open: paymentOpen, onOpenChange: setPaymentOpen, trigger: (_jsx(IconButton, { size: 1, v: 'ghost', icon: _jsx(LuPencil, { size: 13 }), "aria-label": 'Edit payment terms' })), className: 'oui-combobox-content oui-ui-inline-edit-popover', sideOffset: 4, children: _jsx(Listbox, { className: 'oui-combobox-options', items: inlinePaymentTermOptions.map((item) => ({
+                                            } }) }), clearable: Boolean(selectedSupplier), onClear: () => setSupplierKey(null) }) }), _jsx(Field, { label: "Single value without meta", children: _jsx(InlineEditField, { label: selectedPaymentTerm?.label ?? 'Choose payment terms', onOpen: () => setPaymentOpen(true), action: _jsx(Popover, { open: paymentOpen, onOpenChange: setPaymentOpen, trigger: _jsx(IconButton, { size: 1, v: "ghost", icon: _jsx(LuPencil, { size: 13 }), "aria-label": "Edit payment terms" }), className: "oui-combobox-content oui-ui-inline-edit-popover", sideOffset: 4, children: _jsx(Listbox, { className: "oui-combobox-options", items: inlinePaymentTermOptions.map((item) => ({
                                                 value: item.key,
                                                 label: item.label,
                                             })), value: paymentTermKey, onValueChange: (nextKey) => {
                                                 setPaymentTermKey(nextKey);
                                                 setPaymentOpen(false);
-                                            } }) })), clearable: Boolean(selectedPaymentTerm), onClear: () => setPaymentTermKey(null) }) }), _jsx(Field, { label: 'Multiple values', children: _jsx(InlineEditMultiField, { onOpen: () => setOwnerOpen(true), action: (_jsx("span", { onClick: (event) => event.stopPropagation(), children: _jsx(Popover, { open: ownerOpen, onOpenChange: setOwnerOpen, trigger: (_jsx(IconButton, { size: 1, v: 'ghost', icon: _jsx(LuPencil, { size: 13 }), "aria-label": 'Edit owners' })), className: 'oui-combobox-content oui-ui-inline-edit-popover', sideOffset: 4, children: _jsx(Stack, { g: 1, p: 1, children: inlineOwnerOptions.map((item) => {
+                                            } }) }), clearable: Boolean(selectedPaymentTerm), onClear: () => setPaymentTermKey(null) }) }), _jsx(Field, { label: "Multiple values", children: _jsx(InlineEditMultiField, { onOpen: () => setOwnerOpen(true), action: _jsx("span", { onClick: (event) => event.stopPropagation(), children: _jsx(Popover, { open: ownerOpen, onOpenChange: setOwnerOpen, trigger: _jsx(IconButton, { size: 1, v: "ghost", icon: _jsx(LuPencil, { size: 13 }), "aria-label": "Edit owners" }), className: "oui-combobox-content oui-ui-inline-edit-popover", sideOffset: 4, children: _jsx(Stack, { g: 1, p: 1, children: inlineOwnerOptions.map((item) => {
                                                     const selected = ownerKeys.includes(item.key);
-                                                    return (_jsxs("button", { type: 'button', className: 'oui-combobox-option oui-ui-inline-edit-option', "data-selected": selected ? 'true' : 'false', onClick: () => toggleOwner(item.key), children: [_jsx("span", { className: 'oui-multi-select-check', children: selected ? _jsx(LuCheck, { size: 13 }) : null }), _jsx("span", { className: 'oui-combobox-option-main', children: item.label })] }, item.key));
-                                                }) }) }) })), col: true, empty: 'No owners selected', children: selectedOwners.length
-                                        ? selectedOwners.map((item, index) => (_jsx(Badge, { tone: index === 0 ? 'info' : 'neutral', v: 'soft', children: item.label }, item.key)))
-                                        : null }) }), _jsx(Field, { label: 'Pending update', children: _jsx(InlineEditField, { label: 'Payment terms', meta: 'Saving', busy: true }) })] }) }) }), _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." })] }) })] }));
+                                                    return (_jsxs("button", { type: "button", className: "oui-combobox-option oui-ui-inline-edit-option", "data-selected": selected ? 'true' : 'false', onClick: () => toggleOwner(item.key), children: [_jsx("span", { className: "oui-multi-select-check", children: selected ? (_jsx(LuCheck, { size: 13 })) : null }), _jsx("span", { className: "oui-combobox-option-main", children: item.label })] }, item.key));
+                                                }) }) }) }), col: true, empty: "No owners selected", children: selectedOwners.length
+                                        ? selectedOwners.map((item, index) => (_jsx(Badge, { tone: index === 0 ? 'info' : 'neutral', v: "soft", children: item.label }, item.key)))
+                                        : null }) }), _jsx(Field, { label: "Pending update", children: _jsx(InlineEditField, { label: "Payment terms", meta: "Saving", busy: true }) })] }) }) }), _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

@@ -1,5 +1,5 @@
 import { type CodeExample } from './codeSamples';
-export declare function FoundationsSection({ onOpenCode, }: {
+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

@@ -1 +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"}
+{"version":3,"file":"ExampleFoundationsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleFoundationsSection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAejD,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAA;CAAE,2CAiChG"}

package/dist/example/ExampleFoundationsSection.js

@@ -9,17 +9,17 @@ const providerSample = {
     code: `import {OrcestrUiProvider} from '@orcestr/ui';
 
 <OrcestrUiProvider
-    surface='operations'
+    surface='deliveries'
     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: [
+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: 'primary', children: title }), _jsx(Text, { fs: '12px', tone: 'muted', children: description })] }, title))) }) }) }) }));
+                    ].map(([title, description]) => (_jsxs("div", { className: "oui-ui-contract-item", children: [_jsx(Badge, { tone: "primary", children: title }), _jsx(Text, { fs: "12px", tone: "muted", children: description })] }, title))) }) }) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleOverlays.d.ts","sourceRoot":"","sources":["../../src/example/ExampleOverlays.tsx"],"names":[],"mappings":"AAOA,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;AAuCvC,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"}
+{"version":3,"file":"ExampleOverlays.d.ts","sourceRoot":"","sources":["../../src/example/ExampleOverlays.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,IAAI,CAAC;AAE1C,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,KAAK,OAAO,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;AAqCvC,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,2CA+OtB"}

package/dist/example/ExampleOverlays.js

@@ -2,16 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import {} from 'react';
 import { LuX } from 'react-icons/lu';
-import { Button, CommandPalette, Flex, Field, IconButton, Modal, Stack, Text, TextField } from '..';
+import { Button, CommandPalette, Flex, Field, IconButton, Modal, Stack, Text, TextField, } from '..';
 import { getCommandItems } from './exampleData';
 import {} from '..';
 function ExampleModal({ title, description, footer, children, onOpenChange, ...props }) {
-    return (_jsxs(Modal, { ...props, onOpenChange: onOpenChange, children: [_jsxs(Modal.Header, { children: [_jsxs("div", { className: 'oui-modal-title-wrap', children: [_jsx("h2", { className: 'oui-modal-title', children: title }), description ? (_jsx("p", { className: 'oui-modal-description', children: description })) : null] }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuX, { size: 18 }), "aria-label": 'Close', onClick: () => onOpenChange(false) })] }), _jsx(Modal.Body, { children: children }), footer ? _jsx(Modal.Footer, { children: footer }) : null] }));
+    return (_jsxs(Modal, { ...props, onOpenChange: onOpenChange, children: [_jsxs(Modal.Header, { children: [_jsxs("div", { className: "oui-modal-title-wrap", children: [_jsx("h2", { className: "oui-modal-title", children: title }), description ? _jsx("p", { className: "oui-modal-description", children: description }) : null] }), _jsx(IconButton, { v: "ghost", icon: _jsx(LuX, { size: 18 }), "aria-label": "Close", onClick: () => onOpenChange(false) })] }), _jsx(Modal.Body, { children: children }), footer ? _jsx(Modal.Footer, { children: footer }) : null] }));
 }
 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(ExampleModal, { 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(ExampleModal, { 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(ExampleModal, { 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-primary-base) 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(ExampleModal, { 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-primary-base) 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(ExampleModal, { 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-primary-base) 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(ExampleModal, { 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(ExampleModal, { 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-primary-base) 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(ExampleModal, { 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(ExampleModal, { 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-base) 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: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(ExampleModal, { 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(ExampleModal, { 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(ExampleModal, { 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-primary-base) 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(ExampleModal, { 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-primary-base) 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(ExampleModal, { 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-primary-base) 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(ExampleModal, { 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(ExampleModal, { 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-primary-base) 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(ExampleModal, { 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(ExampleModal, { 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-base) 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') })] }));
+                            }, 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.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleOverlaysSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleOverlaysSection.tsx"],"names":[],"mappings":"AAmBA,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;AAuDF,wBAAgB,eAAe,CAAC,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,GACb,EAAE,oBAAoB,2CAyRtB"}
+{"version":3,"file":"ExampleOverlaysSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleOverlaysSection.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,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;AAuDF,wBAAgB,eAAe,CAAC,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,GACb,EAAE,oBAAoB,2CAyRtB"}

package/dist/example/ExampleOverlaysSection.js

@@ -56,22 +56,22 @@ export function OverlaysSection({ setModalOpen, setBlurModalOpen, setFastModalOp
     const toast = useToast();
     const [dialogOpen, setDialogOpen] = useState(false);
     const [drawerOpen, setDrawerOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'overlay-primitives-example', title: 'Overlay primitives', description: 'Popover, Tooltip and Modal entry points.', children: _jsxs(ExampleTile, { title: 'Popover, tooltip and modal', code: codeSamples.overlays, onOpen: onOpenCode, children: [_jsxs("div", { className: 'oui-ui-row', children: [_jsx(Popover, { trigger: _jsx(Button, { v: 'surface', rightIcon: _jsx(LuChevronDown, { size: 16 }), children: "Open popover" }), children: _jsxs(Stack, { g: 2, p: 1, children: [_jsx(Text, { fw: 700, children: "Popover content" }), _jsx(Text, { color: 'var(--oui-muted)', fs: '13px', children: "Shared positioning and presence." })] }) }), _jsx(Tooltip, { content: 'Tooltip uses the same floating layer', children: _jsx(Button, { v: 'outline', children: "Hover me" }) }), _jsx(Button, { v: 'surface', onClick: () => setDialogOpen(true), children: "Dialog" }), _jsx(Button, { v: 'surface', onClick: () => setDrawerOpen(true), children: "Drawer" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { onClick: () => setModalOpen(true), children: "Default modal" }), _jsx(Button, { v: 'surface', onClick: () => setBlurModalOpen(true), children: "Blur modal" }), _jsx(Button, { v: 'outline', onClick: () => setFastModalOpen(true), children: "Fast modal" }), _jsx(Button, { v: 'outline', onClick: () => setRiseModalOpen(true), children: "Rise modal" }), _jsx(Button, { v: 'outline', onClick: () => setSlowModalOpen(true), children: "Very slow modal" }), _jsx(Button, { v: 'soft', tone: 'danger', onClick: () => setDangerModalOpen(true), children: "Danger modal" })] })] }) }), _jsx(Dialog.Root, { open: dialogOpen, onOpenChange: setDialogOpen, children: _jsx(Dialog.Content, { maxWidth: 460, children: _jsxs(Stack, { g: 3, children: [_jsxs(Stack, { g: 1, children: [_jsx(Dialog.Title, { children: "Dialog title" }), _jsx(Dialog.Description, { children: "Dialog keeps the Modal layer but owns accessible title and description." })] }), _jsxs(Flex, { g: 2, j: 'e', children: [_jsx(Dialog.Close, { children: _jsx(Button, { v: 'surface', children: "Cancel" }) }), _jsx(Button, { onClick: () => setDialogOpen(false), children: "Confirm" })] })] }) }) }), _jsx(Drawer, { open: drawerOpen, onOpenChange: setDrawerOpen, title: 'Drawer title', description: 'Drawer uses the same overlay stack and focus behavior.', footer: (_jsxs(Flex, { g: 2, j: 'e', children: [_jsx(Button, { v: 'surface', onClick: () => setDrawerOpen(false), children: "Close" }), _jsx(Button, { children: "Apply" })] })), children: _jsxs(Stack, { g: 2, children: [_jsx(Text, { tone: 'muted', fs: '13px', children: "Use Drawer for side panels and contextual forms." }), _jsx(Button, { v: 'soft', children: "Panel action" })] }) }), _jsx(UiExampleSection, { id: 'toast-example', title: 'Toast', description: 'Toast positions, actions, progress, dedupe and glass background.', children: _jsx(ExampleTile, { title: 'Toast', code: codeSamples.toast, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { v: 'soft', tone: 'success', onClick: () => toast.success({
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: "overlay-primitives-example", title: "Overlay primitives", description: "Popover, Tooltip and Modal entry points.", children: _jsxs(ExampleTile, { title: "Popover, tooltip and modal", code: codeSamples.overlays, onOpen: onOpenCode, children: [_jsxs("div", { className: "oui-ui-row", children: [_jsx(Popover, { trigger: _jsx(Button, { v: "surface", rightIcon: _jsx(LuChevronDown, { size: 16 }), children: "Open popover" }), children: _jsxs(Stack, { g: 2, p: 1, children: [_jsx(Text, { fw: 700, children: "Popover content" }), _jsx(Text, { color: "var(--oui-muted)", fs: "13px", children: "Shared positioning and presence." })] }) }), _jsx(Tooltip, { content: "Tooltip uses the same floating layer", children: _jsx(Button, { v: "outline", children: "Hover me" }) }), _jsx(Button, { v: "surface", onClick: () => setDialogOpen(true), children: "Dialog" }), _jsx(Button, { v: "surface", onClick: () => setDrawerOpen(true), children: "Drawer" })] }), _jsxs("div", { className: "oui-ui-row", children: [_jsx(Button, { onClick: () => setModalOpen(true), children: "Default modal" }), _jsx(Button, { v: "surface", onClick: () => setBlurModalOpen(true), children: "Blur modal" }), _jsx(Button, { v: "outline", onClick: () => setFastModalOpen(true), children: "Fast modal" }), _jsx(Button, { v: "outline", onClick: () => setRiseModalOpen(true), children: "Rise modal" }), _jsx(Button, { v: "outline", onClick: () => setSlowModalOpen(true), children: "Very slow modal" }), _jsx(Button, { v: "soft", tone: "danger", onClick: () => setDangerModalOpen(true), children: "Danger modal" })] })] }) }), _jsx(Dialog.Root, { open: dialogOpen, onOpenChange: setDialogOpen, children: _jsx(Dialog.Content, { maxWidth: 460, children: _jsxs(Stack, { g: 3, children: [_jsxs(Stack, { g: 1, children: [_jsx(Dialog.Title, { children: "Dialog title" }), _jsx(Dialog.Description, { children: "Dialog keeps the Modal layer but owns accessible title and description." })] }), _jsxs(Flex, { g: 2, j: "e", children: [_jsx(Dialog.Close, { children: _jsx(Button, { v: "surface", children: "Cancel" }) }), _jsx(Button, { onClick: () => setDialogOpen(false), children: "Confirm" })] })] }) }) }), _jsx(Drawer, { open: drawerOpen, onOpenChange: setDrawerOpen, title: "Drawer title", description: "Drawer uses the same overlay stack and focus behavior.", footer: _jsxs(Flex, { g: 2, j: "e", children: [_jsx(Button, { v: "surface", onClick: () => setDrawerOpen(false), children: "Close" }), _jsx(Button, { children: "Apply" })] }), children: _jsxs(Stack, { g: 2, children: [_jsx(Text, { tone: "muted", fs: "13px", children: "Use Drawer for side panels and contextual forms." }), _jsx(Button, { v: "soft", children: "Panel action" })] }) }), _jsx(UiExampleSection, { id: "toast-example", title: "Toast", description: "Toast positions, actions, progress, dedupe and glass background.", children: _jsx(ExampleTile, { title: "Toast", code: codeSamples.toast, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsxs("div", { className: "oui-ui-row", children: [_jsx(Button, { v: "soft", tone: "success", onClick: () => toast.success({
                                             title: 'Saved successfully',
                                             message: 'The settings are synced with the current theme.',
                                             position: 'bottom-right',
-                                        }), children: "Success" }), _jsx(Button, { v: 'soft', tone: 'success', onClick: () => toast.success({
+                                        }), children: "Success" }), _jsx(Button, { v: "soft", tone: "success", onClick: () => toast.success({
                                             title: 'Endless',
                                             message: 'This success toast stays until you click it.',
                                             position: 'bottom-right',
                                             duration: null,
                                             dedupeKey: 'endless-success-toast',
-                                        }), children: "Endless" }), _jsx(Button, { v: 'soft', tone: 'warning', onClick: () => toast.warning({
+                                        }), children: "Endless" }), _jsx(Button, { v: "soft", tone: "warning", onClick: () => toast.warning({
                                             title: 'Needs attention',
                                             message: 'Only 4 items need attention in this view.',
                                             dedupeKey: 'needs-attention',
                                             position: 'top-right',
-                                        }), children: "Warning dedupe" }), _jsx(Button, { v: 'soft', tone: 'danger', onClick: () => toast.error({
+                                        }), children: "Warning dedupe" }), _jsx(Button, { v: "soft", tone: "danger", onClick: () => toast.error({
                                             title: 'Export failed',
                                             message: 'The report can be retried without closing this page.',
                                             position: 'bottom-right',
@@ -79,23 +79,23 @@ export function OverlaysSection({ setModalOpen, setBlurModalOpen, setFastModalOp
                                                 label: 'Retry',
                                                 onClick: () => toast.info('Retry queued'),
                                             },
-                                        }), children: "Error action" }), _jsx(Button, { v: 'surface', onClick: () => toast.info({
+                                        }), children: "Error action" }), _jsx(Button, { v: "surface", onClick: () => toast.info({
                                             title: 'Pinned note',
                                             message: 'duration: null keeps this toast visible.',
                                             position: 'top-center',
                                             duration: null,
                                             closeButton: true,
-                                        }), children: "Pinned" }), _jsx(Button, { v: 'surface', onClick: () => toast.info({
+                                        }), children: "Pinned" }), _jsx(Button, { v: "surface", onClick: () => toast.info({
                                             title: 'Glass background',
                                             message: 'Theme blur and translucent background.',
                                             position: 'bottom-right',
                                             duration: 5200,
-                                        }), children: "Glass" })] }), _jsx(Text, { color: 'var(--oui-muted)', fs: '13px', lh: 1.45, children: "Toasts support typed helpers, controlled position, progress line, dedupe keys, actions and fixed viewport above modals." }), _jsx("div", { className: 'oui-ui-row', children: toastPositions.map((item) => (_jsx(Button, { size: 1, v: 'surface', onClick: () => toast.info({
+                                        }), children: "Glass" })] }), _jsx(Text, { color: "var(--oui-muted)", fs: "13px", lh: 1.45, children: "Toasts support typed helpers, controlled position, progress line, dedupe keys, actions and fixed viewport above modals." }), _jsx("div", { className: "oui-ui-row", children: toastPositions.map((item) => (_jsx(Button, { size: 1, v: "surface", onClick: () => toast.info({
                                         title: item.label,
                                         message: 'Positioned toast with the default glass surface.',
                                         position: item.position,
                                         duration: 3600,
-                                    }), children: item.label }, item.position))) }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 1, tone: 'success', v: 'soft', onClick: () => {
+                                    }), children: item.label }, item.position))) }), _jsxs("div", { className: "oui-ui-row", children: [_jsx(Button, { size: 1, tone: "success", v: "soft", onClick: () => {
                                             toastPositionVariants.forEach((item, index) => {
                                                 window.setTimeout(() => {
                                                     toast.push({
@@ -107,10 +107,10 @@ export function OverlaysSection({ setModalOpen, setBlurModalOpen, setFastModalOp
                                                     });
                                                 }, index * 120);
                                             });
-                                        }, children: "Show all positions" }), _jsx(Button, { size: 1, tone: 'warning', v: 'soft', onClick: () => toast.warning({
+                                        }, children: "Show all positions" }), _jsx(Button, { size: 1, tone: "warning", v: "soft", onClick: () => toast.warning({
                                             title: 'Long task queued',
                                             message: 'A longer duration shows the progress strip clearly.',
                                             position: 'bottom-center',
                                             duration: 9000,
-                                        }), children: "Long progress" })] })] }) }) }), _jsx(UiExampleSection, { id: 'overlay-settings-example', title: 'Overlay settings', description: 'Modal overlay color, opacity, blur and animation settings.', children: _jsx(ExampleTile, { title: 'Overlay settings', code: codeSamples.overlaySettings, onOpen: onOpenCode, children: _jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "The modal accepts overlay color, opacity, blur, animation and animationDuration props. Default animation and duration come from the theme." }) }) })] }));
+                                        }), children: "Long progress" })] })] }) }) }), _jsx(UiExampleSection, { id: "overlay-settings-example", title: "Overlay settings", description: "Modal overlay color, opacity, blur and animation settings.", children: _jsx(ExampleTile, { title: "Overlay settings", code: codeSamples.overlaySettings, onOpen: onOpenCode, children: _jsx(Text, { color: "var(--oui-muted)", lh: 1.5, children: "The modal accepts overlay color, opacity, blur, animation and animationDuration props. Default animation and duration come from the theme." }) }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleSelectionSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleSelectionSection.tsx"],"names":[],"mappings":"AAKA,OAAO,EAYH,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AAEZ,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAC5D,OAAO,EAIH,KAAK,YAAY,EACpB,MAAM,eAAe,CAAC;AAGvB,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,KAAK,qBAAqB,GAAG;IACzB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,4BAA4B,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,wBAAwB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,YAAY,GAAG,IAAI,CAAC;IACjC,mBAAmB,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1D,cAAc,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,sBAAsB,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,eAAe,EACf,WAAW,EACX,mBAAmB,EACnB,oBAAoB,EACpB,4BAA4B,EAC5B,gBAAgB,EAChB,wBAAwB,EACxB,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,mBAAmB,EACnB,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,OAAO,GACV,EAAE,qBAAqB,2CAqMvB"}
+{"version":3,"file":"ExampleSelectionSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleSelectionSection.tsx"],"names":[],"mappings":"AAKA,OAAO,EAYH,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AAEZ,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAiD,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGjG,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,KAAK,qBAAqB,GAAG;IACzB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,4BAA4B,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,wBAAwB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,YAAY,GAAG,IAAI,CAAC;IACjC,mBAAmB,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1D,cAAc,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,sBAAsB,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,eAAe,EACf,WAAW,EACX,mBAAmB,EACnB,oBAAoB,EACpB,4BAA4B,EAC5B,gBAAgB,EAChB,wBAAwB,EACxB,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,mBAAmB,EACnB,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,OAAO,GACV,EAAE,qBAAqB,2CAmLvB"}

package/dist/example/ExampleSelectionSection.js

@@ -5,23 +5,23 @@ import { LuHistory, LuListChecks, LuPlus } from 'react-icons/lu';
 import { Checkbox, Combobox, EntityPicker, MultiSelect, PaginatedCombobox, RadioGroup, SegmentedControl, Select, Switch, Tabs, Text, } from '..';
 import { ExampleTile } from './CodePreview';
 import { codeSamples } from './codeSamples';
-import { getOptionItems, getOwnerItems, loadEntityPage, } from './exampleData';
+import { getOptionItems, getOwnerItems, loadEntityPage } from './exampleData';
 import { UiExampleSection } from './UiExampleSection';
 export function SelectionSection({ locale, segment, onSegmentChange, selectValue, onSelectValueChange, selectNoChevronValue, onSelectNoChevronValueChange, selectPlainValue, onSelectPlainValueChange, comboValue, onComboValueChange, entityValue, onEntityValueChange, paginatedValue, onPaginatedValueChange, ownerValues, onOwnerValuesChange, radioValue, onRadioValueChange, tabValue, onTabValueChange, onOpenCode, onToast, }) {
     const optionItems = getOptionItems(locale);
     const ownerItems = getOwnerItems(locale);
     const copy = selectionCopy[locale];
     const loadLocalizedEntityPage = useCallback((page, search) => loadEntityPage(locale, page, search), [locale]);
-    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'selects-example', title: 'Selects', description: 'Select, Combobox, MultiSelect, EntityPicker wrapper, lower-level PaginatedCombobox and SegmentedControl.', children: _jsxs(ExampleTile, { title: 'Selects and comboboxes', code: codeSamples.selection, onOpen: onOpenCode, children: [_jsx(Select, { items: optionItems, value: selectValue, onValueChange: onSelectValueChange, clearable: true }), _jsx(Select, { items: optionItems, value: selectNoChevronValue, onValueChange: onSelectNoChevronValueChange, clearable: true, showChevron: false, placeholder: 'Clearable without chevron' }), _jsx(Select, { items: optionItems, value: selectPlainValue, onValueChange: onSelectPlainValueChange, clearable: false, showChevron: false, placeholder: 'Plain select' }), _jsx(Combobox, { items: optionItems, value: comboValue, onValueChange: onComboValueChange, placeholder: 'Find status' }), _jsx(MultiSelect, { items: ownerItems, value: ownerValues, onValueChange: onOwnerValuesChange, placeholder: copy.responsibleUsers, clearable: true, renderValue: (items) => items.length === 1
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: "selects-example", title: "Selects", description: "Select, Combobox, MultiSelect, EntityPicker wrapper, lower-level PaginatedCombobox and SegmentedControl.", children: _jsxs(ExampleTile, { title: "Selects and comboboxes", code: codeSamples.selection, onOpen: onOpenCode, children: [_jsx(Select, { items: optionItems, value: selectValue, onValueChange: onSelectValueChange, clearable: true }), _jsx(Select, { items: optionItems, value: selectNoChevronValue, onValueChange: onSelectNoChevronValueChange, clearable: true, showChevron: false, placeholder: "Clearable without chevron" }), _jsx(Select, { items: optionItems, value: selectPlainValue, onValueChange: onSelectPlainValueChange, clearable: false, showChevron: false, placeholder: "Plain select" }), _jsx(Combobox, { items: optionItems, value: comboValue, onValueChange: onComboValueChange, placeholder: "Find status" }), _jsx(MultiSelect, { items: ownerItems, value: ownerValues, onValueChange: onOwnerValuesChange, placeholder: copy.responsibleUsers, clearable: true, renderValue: (items) => items.length === 1
                                 ? items[0]?.label
-                                : copy.responsibleCount(items.length) }), _jsx(EntityPicker, { value: entityValue, onValueChange: onEntityValueChange, loadPage: loadLocalizedEntityPage, getEntityId: (item) => item.id, renderValue: (item) => item.article, renderEntity: (item) => (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'oui-entity-option-main', children: [_jsx("span", { className: 'oui-entity-option-code', children: item.article }), _jsx("span", { className: 'oui-entity-option-meta', children: item.name })] }), _jsx("span", { className: 'oui-entity-option-badge', children: item.status })] })), placeholder: copy.entityPicker, clearable: true, createAction: {
+                                : copy.responsibleCount(items.length) }), _jsx(EntityPicker, { value: entityValue, onValueChange: onEntityValueChange, loadPage: loadLocalizedEntityPage, getEntityId: (item) => item.id, renderValue: (item) => item.article, renderEntity: (item) => (_jsxs(_Fragment, { children: [_jsxs("span", { className: "oui-entity-option-main", children: [_jsx("span", { className: "oui-entity-option-code", children: item.article }), _jsx("span", { className: "oui-entity-option-meta", children: item.name })] }), _jsx("span", { className: "oui-entity-option-badge", children: item.status })] })), placeholder: copy.entityPicker, clearable: true, createAction: {
                                 label: copy.createEntityFromSearch,
                                 onCreate: (search) => onToast(copy.createEntityToast(search), 'info'),
                             }, optionAction: {
                                 icon: _jsx(LuPlus, { size: 14 }),
                                 label: (item) => copy.addEntity(item.article),
                                 onClick: (item) => onToast(copy.entityAction(item.article), 'success'),
-                            } }), _jsx(PaginatedCombobox, { value: paginatedValue, onChange: onPaginatedValueChange, loadPage: loadLocalizedEntityPage, getItemId: (item) => item.id, renderSelectedLabel: (item) => item.article, renderOption: (item) => (_jsxs("span", { className: 'oui-entity-option-main', children: [_jsx("span", { className: 'oui-entity-option-code', children: item.article }), _jsx("span", { className: 'oui-entity-option-meta', children: item.name })] })), placeholder: 'Paginated combobox', clearable: true, searchAction: {
+                            } }), _jsx(PaginatedCombobox, { value: paginatedValue, onChange: onPaginatedValueChange, loadPage: loadLocalizedEntityPage, getItemId: (item) => item.id, renderSelectedLabel: (item) => item.article, renderOption: (item) => (_jsxs("span", { className: "oui-entity-option-main", children: [_jsx("span", { className: "oui-entity-option-code", children: item.article }), _jsx("span", { className: "oui-entity-option-meta", children: item.name })] })), placeholder: "Paginated combobox", clearable: true, searchAction: {
                                 label: copy.createEntityFromSearch,
                                 onClick: (search) => onToast(copy.createEntityToast(search), 'info'),
                             }, optionAction: {
@@ -32,22 +32,22 @@ export function SelectionSection({ locale, segment, onSegmentChange, selectValue
                                 { value: 'active', label: 'Active' },
                                 { value: 'drafts', label: 'Drafts' },
                                 { value: 'archive', label: 'Archive' },
-                            ], value: segment, onValueChange: onSegmentChange })] }) }), _jsx(UiExampleSection, { id: 'choice-controls-example', title: 'Checkbox, switch and radio', description: 'Binary and single-choice controls.', children: _jsxs(ExampleTile, { title: 'Checkbox, switch and radio', code: codeSamples.selectionGroup, onOpen: onOpenCode, children: [_jsx(Checkbox, { defaultChecked: true, children: "Confirmed" }), _jsx(Checkbox, { children: "Needs review" }), _jsx(Checkbox, { disabled: true, children: "Locked option" }), _jsx(Switch, { defaultChecked: true, children: "Auto updates" }), _jsx(Switch, { children: "Manual mode" }), _jsx(Switch, { disabled: true, children: "Disabled switch" }), _jsx(RadioGroup, { value: radioValue, onValueChange: onRadioValueChange, name: 'oui-example-mode', items: [
+                            ], value: segment, onValueChange: onSegmentChange })] }) }), _jsx(UiExampleSection, { id: "choice-controls-example", title: "Checkbox, switch and radio", description: "Binary and single-choice controls.", children: _jsxs(ExampleTile, { title: "Checkbox, switch and radio", code: codeSamples.selectionGroup, onOpen: onOpenCode, children: [_jsx(Checkbox, { defaultChecked: true, children: "Confirmed" }), _jsx(Checkbox, { children: "Needs review" }), _jsx(Checkbox, { disabled: true, children: "Locked option" }), _jsx(Switch, { defaultChecked: true, children: "Auto updates" }), _jsx(Switch, { children: "Manual mode" }), _jsx(Switch, { disabled: true, children: "Disabled switch" }), _jsx(RadioGroup, { value: radioValue, onValueChange: onRadioValueChange, name: "oui-example-mode", items: [
                                 { value: 'manual', label: 'Manual' },
                                 { value: 'auto', label: 'Automatic' },
-                            ] })] }) }), _jsx(UiExampleSection, { id: 'tabs-example', title: 'Tabs', description: 'Segmented content navigation with icons, badges and controlled value.', children: _jsx(ExampleTile, { title: 'Tabs', code: codeSamples.tabs, onOpen: onOpenCode, children: _jsx(Tabs, { value: tabValue, onValueChange: onTabValueChange, items: [
+                            ] })] }) }), _jsx(UiExampleSection, { id: "tabs-example", title: "Tabs", description: "Segmented content navigation with icons, badges and controlled value.", children: _jsx(ExampleTile, { title: "Tabs", code: codeSamples.tabs, onOpen: onOpenCode, children: _jsx(Tabs, { value: tabValue, onValueChange: onTabValueChange, items: [
                             {
                                 value: 'overview',
                                 label: 'Overview',
                                 icon: _jsx(LuListChecks, { size: 16 }),
                                 badge: '12',
-                                content: _jsx(Text, { color: 'var(--oui-muted)', children: "Main summary tab." }),
+                                content: _jsx(Text, { color: "var(--oui-muted)", children: "Main summary tab." }),
                             },
                             {
                                 value: 'history',
                                 label: 'History',
                                 icon: _jsx(LuHistory, { size: 16 }),
-                                content: _jsx(Text, { color: 'var(--oui-muted)', children: "History and changes." }),
+                                content: _jsx(Text, { color: "var(--oui-muted)", children: "History and changes." }),
                             },
                         ] }) }) })] }));
 }

package/dist/example/ExampleStateSection.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleStateSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleStateSection.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAoH/C,wBAAgB,YAAY,CAAC,EACzB,UAAU,GACb,EAAE;IACC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,2CAoCA;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,UAAU,GACb,EAAE;IACC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,2CAsEA;AAED,wBAAgB,eAAe,CAAC,EAC5B,UAAU,GACb,EAAE;IACC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,2CAgCA"}
+{"version":3,"file":"ExampleStateSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleStateSection.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAoHjD,wBAAgB,YAAY,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAA;CAAE,2CA4C1F;AAED,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAA;CAAE,2CAqE9F;AAED,wBAAgB,eAAe,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAA;CAAE,2CA4B7F"}