@orcestr/ui 0.0.3 → 0.1.1

package/dist/components/Tooltip/Tooltip.js

@@ -1,24 +1,73 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { cloneElement, forwardRef, isValidElement, useState, } from 'react';
 import {} from '../../hooks/useFloatingPosition';
 import { useFloatingLayer } from '../../hooks/useFloatingLayer';
+import { composeRefs } from '../../utils/composeRefs';
 import { cn } from '../../utils/cn';
-import { useOverlayContext, useOverlayLayerIndex } from '../Overlay/OverlayProvider';
+import { overlayLayerZIndex, useOverlayContext, useOverlayLayerIndex, } from '../Overlay/OverlayProvider';
 import { Portal } from '../Portal/Portal';
-export function Tooltip({ content, children, side = 'top', className, testId, }) {
+export const Tooltip = forwardRef(function Tooltip({ content, children, side = 'top', align = 'center', sideOffset = 8, avoidCollisions: _avoidCollisions, collisionPadding: _collisionPadding, open, defaultOpen = false, onOpenChange, className, testId, }, ref) {
     const overlay = useOverlayContext();
-    const [open, setOpen] = useState(false);
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const actualOpen = open ?? internalOpen;
+    const setOpen = (nextOpen) => {
+        if (open === undefined)
+            setInternalOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    };
     const { triggerRef, contentRef, present, state, style, } = useFloatingLayer({
-        open,
+        open: actualOpen,
         presenceDuration: 140,
         side,
-        align: 'center',
-        sideOffset: 8,
+        align,
+        sideOffset,
     });
     const layerIndex = useOverlayLayerIndex(present);
-    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: triggerRef, className: 'oui-tooltip-trigger', "data-testid": testId, onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), onFocus: () => setOpen(true), onBlur: () => setOpen(false), children: children }), present ? (_jsx(Portal, { children: _jsx("div", { ref: contentRef, role: 'tooltip', className: cn('oui-tooltip-content', className), "data-state": state, "data-layer": 'dropdown', "data-testid": testId ? `${testId}-content` : undefined, style: {
+    const triggerHandlers = {
+        onMouseEnter: () => setOpen(true),
+        onMouseLeave: () => setOpen(false),
+        onFocus: (event) => {
+            if (isKeyboardFocus(event.currentTarget))
+                setOpen(true);
+        },
+        onBlur: () => setOpen(false),
+    };
+    const trigger = isValidElement(children)
+        ? cloneTooltipTrigger(children, {
+            ref: composeRefs(triggerRef, ref),
+            testId,
+            ...triggerHandlers,
+        })
+        : (_jsx("span", { ref: composeRefs(triggerRef, ref), className: 'oui-tooltip-trigger', "data-testid": testId, ...triggerHandlers, children: children }));
+    return (_jsxs(_Fragment, { children: [trigger, present ? (_jsx(Portal, { children: _jsx("div", { ref: contentRef, role: 'tooltip', className: cn('oui-tooltip-content', className), "data-state": state, "data-layer": 'dropdown', "data-testid": testId ? `${testId}-content` : undefined, style: {
                         ...style,
-                        zIndex: overlay.zIndex.dropdown + layerIndex * 10,
+                        zIndex: overlayLayerZIndex(overlay.zIndex, 'dropdown', layerIndex),
                     }, children: content }) })) : null] }));
+});
+function cloneTooltipTrigger(trigger, { ref, testId, onMouseEnter, onMouseLeave, onFocus, onBlur, }) {
+    return cloneElement(trigger, {
+        ref: composeRefs(trigger.props.ref, ref),
+        className: cn('oui-tooltip-trigger', trigger.props.className),
+        'data-testid': testId,
+        onMouseEnter: (event) => {
+            trigger.props.onMouseEnter?.(event);
+            onMouseEnter?.(event);
+        },
+        onMouseLeave: (event) => {
+            trigger.props.onMouseLeave?.(event);
+            onMouseLeave?.(event);
+        },
+        onFocus: (event) => {
+            trigger.props.onFocus?.(event);
+            onFocus?.(event);
+        },
+        onBlur: (event) => {
+            trigger.props.onBlur?.(event);
+            onBlur?.(event);
+        },
+    });
+}
+function isKeyboardFocus(element) {
+    return element.matches(':focus-visible');
 }

package/dist/example/CodePreview.d.ts

@@ -15,8 +15,9 @@ export declare function ExampleTile({ id, title, code, onOpen, className, childr
 export declare function InlineCodeBlock({ code }: {
     code: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function CodeBlock({ code }: {
+export declare function CodeBlock({ code, mode }: {
     code: string;
+    mode?: 'scroll' | 'inline';
 }): import("react/jsx-runtime").JSX.Element;
 export declare function CodePreviewModal({ example, onClose, }: {
     example: CodeExample | null;

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

@@ -1 +1 @@
-{"version":3,"file":"CodePreview.d.ts","sourceRoot":"","sources":["../../src/example/CodePreview.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKH,KAAK,SAAS,EAEjB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AA+B/C,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,MAAM,GACT,EAAE,WAAW,GAAG;IACb,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C,2CAYA;AAED,wBAAgB,iBAAiB,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,MAAM,GACT,EAAE,WAAW,GAAG;IACb,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C,2CAMA;AAED,wBAAgB,WAAW,CAAC,EACxB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,GACX,EAAE,WAAW,GAAG;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB,2CAUA;AAED,wBAAgB,eAAe,CAAC,EAAC,IAAI,EAAC,EAAE;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,2CA+DrD;AAQD,wBAAgB,SAAS,CAAC,EAAC,IAAI,EAAC,EAAE;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,2CAQ/C;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,OAAO,EACP,OAAO,GACV,EAAE;IACC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB,2CAcA"}
+{"version":3,"file":"CodePreview.d.ts","sourceRoot":"","sources":["../../src/example/CodePreview.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AA+B/C,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,MAAM,GACT,EAAE,WAAW,GAAG;IACb,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C,2CAYA;AAED,wBAAgB,iBAAiB,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,MAAM,GACT,EAAE,WAAW,GAAG;IACb,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C,2CAMA;AAED,wBAAgB,WAAW,CAAC,EACxB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,GACX,EAAE,WAAW,GAAG;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB,2CAUA;AAED,wBAAgB,eAAe,CAAC,EAAC,IAAI,EAAC,EAAE;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,2CA4BrD;AAED,wBAAgB,SAAS,CAAC,EAAC,IAAI,EAAE,IAAe,EAAC,EAAE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAAC,2CA4C5F;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,OAAO,EACP,OAAO,GACV,EAAE;IACC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB,2CA8BA"}

package/dist/example/CodePreview.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
-import { LuInfo } from 'react-icons/lu';
-import { Flex, IconButton, Modal, ScrollArea } from '..';
+import { useMemo, useState, } from 'react';
+import { LuInfo, LuX } from 'react-icons/lu';
+import { CopyIconButton, Flex, IconButton, Modal, ScrollArea } from '..';
 import { cn } from '../utils/cn';
 import {} from './codeSamples';
 function highlightedCode(code) {
@@ -38,56 +38,21 @@ export function ExampleTile({ id, title, code, onOpen, className, children, }) {
 }
 export function InlineCodeBlock({ code }) {
     const [expanded, setExpanded] = useState(false);
-    const [contentHeight, setContentHeight] = useState(0);
-    const contentRef = useRef(null);
-    const collapsedHeight = 180;
-    const collapsible = contentHeight > collapsedHeight;
-    const panelHeight = collapsible
-        ? expanded ? contentHeight + 38 : collapsedHeight
-        : contentHeight;
-    const measure = useCallback(() => {
-        const element = contentRef.current;
-        if (!element)
-            return;
-        const nextHeight = element.scrollHeight;
-        setContentHeight((current) => current === nextHeight ? current : nextHeight);
-    }, []);
-    useLayoutEffect(() => {
-        measure();
-    }, [code, measure]);
-    useLayoutEffect(() => {
-        const element = contentRef.current;
-        if (!element || typeof ResizeObserver === 'undefined')
-            return;
-        const observer = new ResizeObserver(() => measure());
-        observer.observe(element);
-        return () => observer.disconnect();
-    }, [measure]);
-    const handleWheelCapture = useCallback((event) => {
-        if (event.ctrlKey || event.shiftKey || Math.abs(event.deltaY) <= Math.abs(event.deltaX))
-            return;
-        const scrollRoot = document.querySelector('.oui-app-shell-content-scroll .oui-scroll-area-viewport');
-        if (!scrollRoot)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        scrollRoot.scrollTop += normalizedWheelDeltaY(event);
-    }, []);
-    return (_jsxs("div", { className: 'oui-code-inline-panel', "data-expanded": expanded ? 'true' : 'false', "data-collapsible": collapsible ? 'true' : 'false', style: { height: panelHeight || undefined }, onWheelCapture: handleWheelCapture, children: [_jsx("div", { ref: contentRef, className: 'oui-code-inline-content', children: _jsx(CodeBlock, { code: code }) }), collapsible && !expanded ? _jsx("div", { className: 'oui-code-inline-fade', "aria-hidden": true }) : null, collapsible ? (_jsx("button", { type: 'button', className: 'oui-code-inline-toggle', "aria-expanded": expanded, onClick: () => setExpanded((current) => !current), children: expanded ? 'Hide code' : 'Show code' })) : null] }));
-}
-function normalizedWheelDeltaY(event) {
-    if (event.deltaMode === 1)
-        return event.deltaY * 16;
-    if (event.deltaMode === 2)
-        return event.deltaY * window.innerHeight;
-    return event.deltaY;
-}
-export function CodeBlock({ code }) {
-    return (_jsx(ScrollArea, { className: 'oui-code-preview-scroll', children: _jsx("pre", { className: 'oui-code-preview', children: _jsx("code", { children: highlightedCode(code) }) }) }));
+    const lineCount = code.split('\n').length;
+    const collapsible = lineCount > 9;
+    return (_jsxs("div", { className: 'oui-code-inline-panel', "data-expanded": expanded ? 'true' : 'false', "data-collapsible": collapsible ? 'true' : 'false', style: { '--oui-code-lines': lineCount }, children: [_jsx("div", { className: 'oui-code-inline-content', children: _jsx(CodeBlock, { code: code, mode: 'inline' }) }), collapsible ? _jsx("div", { className: 'oui-code-inline-fade', "aria-hidden": true }) : null, collapsible ? (_jsx("button", { type: 'button', className: 'oui-code-inline-toggle', "aria-expanded": expanded, onClick: () => setExpanded((current) => !current), children: expanded ? 'Hide code' : 'Show code' })) : null] }));
+}
+export function CodeBlock({ code, mode = 'scroll' }) {
+    const content = useMemo(() => highlightedCode(code), [code]);
+    const codeNode = (_jsx("pre", { className: 'oui-code-preview', children: _jsx("code", { children: content }) }));
+    if (mode === 'inline') {
+        return (_jsxs("div", { className: 'oui-code-preview-wrap', children: [_jsx(CopyIconButton, { className: 'oui-code-preview-copy', text: code, label: 'Copy code', successMessage: 'Code copied', size: 1, v: 'soft' }), _jsx(ScrollArea, { className: 'oui-code-preview-scroll oui-code-preview-scroll-inline', scrollbars: 'horizontal', children: codeNode })] }));
+    }
+    return (_jsxs("div", { className: 'oui-code-preview-wrap', children: [_jsx(CopyIconButton, { className: 'oui-code-preview-copy', text: code, label: 'Copy code', successMessage: 'Code copied', size: 1, v: 'soft' }), _jsx(ScrollArea, { className: 'oui-code-preview-scroll', children: codeNode })] }));
 }
 export function CodePreviewModal({ example, onClose, }) {
-    return (_jsx(Modal, { open: example !== null, onOpenChange: (open) => {
+    return (_jsxs(Modal, { open: example !== null, onOpenChange: (open) => {
             if (!open)
                 onClose();
-        }, title: example?.title ?? 'Component code', description: 'Import and usage example.', maxWidth: 760, children: example ? _jsx(CodeBlock, { code: example.code }) : null }));
+        }, maxWidth: 760, children: [_jsxs(Modal.Header, { children: [_jsxs("div", { className: 'oui-modal-title-wrap', children: [_jsx("h2", { className: 'oui-modal-title', children: example?.title ?? 'Component code' }), _jsx("p", { className: 'oui-modal-description', children: "Import and usage example." })] }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuX, { size: 18 }), "aria-label": 'Close', onClick: onClose })] }), _jsx(Modal.Body, { children: example ? _jsx(CodeBlock, { code: example.code }) : null })] }));
 }

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

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

package/dist/example/ExampleActionsSection.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { LuBell, LuCheck, LuCommand, LuEllipsis, LuInfo, LuTrash2, LuTriangleAlert, } from 'react-icons/lu';
-import { Button, Flex, IconButton, Menu, Spinner, Tooltip } from '..';
+import { LuBell, LuCheck, LuCommand, LuCopy, LuDownload, LuEllipsis, LuExternalLink, LuInfo, LuMessageSquare, LuPackagePlus, LuRefreshCw, LuSearch, LuSettings, LuShield, LuTrash2, LuTriangleAlert, LuUpload, } from 'react-icons/lu';
+import { Button, ContextMenu, CopyButton, CopyIconButton, Flex, IconButton, IconTextButton, Menu, Spinner, Text, Tooltip, } from '..';
 import { ExampleTile } from './CodePreview';
 import { codeSamples } from './codeSamples';
 import { UiExampleSection } from './UiExampleSection';
 export function ActionsSection({ menuItems, onOpenCode, onOpenPalette, }) {
-    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'buttons-example', title: 'Buttons', description: 'Button variants, tones, sizes, loading states and press animation.', children: _jsxs(ExampleTile, { title: 'Buttons', code: codeSamples.buttons, onOpen: onOpenCode, children: [_jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 3, children: "Solid" }), _jsx(Button, { size: 3, v: 'soft', children: "Soft" }), _jsx(Button, { size: 3, v: 'surface', children: "Surface" }), _jsx(Button, { size: 3, v: 'pad', children: "Pad" }), _jsx(Button, { size: 3, v: 'outline', children: "Outline" }), _jsx(Button, { size: 3, v: 'ghost', children: "Ghost" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 3, tone: 'success', leftIcon: _jsx(LuCheck, { size: 16 }), children: "Success" }), _jsx(Button, { size: 3, tone: 'warning', v: 'soft', leftIcon: _jsx(LuTriangleAlert, { size: 16 }), children: "Warning" }), _jsx(Button, { size: 3, tone: 'info', v: 'soft', leftIcon: _jsx(LuInfo, { size: 16 }), children: "Info" }), _jsx(Button, { size: 3, tone: 'danger', v: 'soft', leftIcon: _jsx(LuTrash2, { size: 16 }), children: "Delete" }), _jsx(Button, { size: 3, loading: true, children: "Loading" }), _jsx(Button, { size: 3, v: 'surface', loading: true, leftIcon: _jsx(LuCheck, { size: 16 }), children: "Save" }), _jsx(Button, { size: 3, tone: 'success', loading: true, leftIcon: _jsx(LuCheck, { size: 16 }), children: "Success" }), _jsx(Spinner, {})] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 1, v: 'surface', children: "Size 1" }), _jsx(Button, { size: 2, v: 'surface', children: "Size 2" }), _jsx(Button, { size: 3, v: 'surface', children: "Size 3" }), _jsx(Button, { size: 4, v: 'surface', children: "Size 4" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 1, children: "Solid 1" }), _jsx(Button, { size: 2, v: 'soft', children: "Soft 2" }), _jsx(Button, { size: 3, v: 'surface', children: "Surface 3" }), _jsx(Button, { size: 3, v: 'pad', children: "Pad 3" }), _jsx(Button, { size: 4, v: 'outline', children: "Outline 4" }), _jsx(Button, { size: 2, v: 'ghost', children: "Ghost 2" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { v: 'surface', pressAnimation: 'translate', children: "Press translate" }), _jsx(Button, { v: 'surface', pressAnimation: 'scale', children: "Press scale" }), _jsx(Button, { v: 'surface', pressAnimation: 'soft', children: "Press soft" }), _jsx(Button, { v: 'surface', pressAnimation: 'none', children: "Press none" })] })] }) }), _jsx(UiExampleSection, { id: 'icon-buttons-example', title: 'Icon buttons', description: 'Icon-only actions, loading state, menu trigger and command entry.', children: _jsxs(ExampleTile, { title: 'Icon buttons', code: codeSamples.iconButtons, onOpen: onOpenCode, children: [_jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { v: 'solid', icon: _jsx(LuCheck, { size: 17 }), "aria-label": 'Solid icon' }), _jsx(IconButton, { v: 'soft', icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Soft icon' }), _jsx(IconButton, { v: 'surface', icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Surface icon' }), _jsx(IconButton, { v: 'pad', icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Pad icon' }), _jsx(IconButton, { v: 'outline', icon: _jsx(LuInfo, { size: 17 }), "aria-label": 'Outline icon' }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": 'Ghost icon' })] }), _jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { size: 1, v: 'surface', icon: _jsx(LuBell, { size: 13 }), "aria-label": 'Size 1 icon' }), _jsx(IconButton, { size: 2, v: 'surface', icon: _jsx(LuBell, { size: 15 }), "aria-label": 'Size 2 icon' }), _jsx(IconButton, { size: 3, v: 'surface', icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Size 3 icon' }), _jsx(IconButton, { size: 4, v: 'surface', icon: _jsx(LuBell, { size: 19 }), "aria-label": 'Size 4 icon' }), _jsx(IconButton, { size: 3, v: 'pad', round: false, r: 3, icon: _jsx(LuCommand, { size: 17 }), "aria-label": 'Square pad icon' }), _jsx(IconButton, { size: 3, v: 'outline', loading: true, icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Loading icon' })] }), _jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { size: 1, v: 'ghost', icon: _jsx(LuEllipsis, { size: 13 }), "aria-label": 'Ghost size 1' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuEllipsis, { size: 15 }), "aria-label": 'Ghost size 2' }), _jsx(IconButton, { size: 3, v: 'ghost', icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": 'Ghost size 3' }), _jsx(IconButton, { size: 4, v: 'ghost', icon: _jsx(LuEllipsis, { size: 19 }), "aria-label": 'Ghost size 4' })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Tooltip, { content: 'Notifications', children: _jsx(IconButton, { v: 'surface', icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Notifications' }) }), _jsx(IconButton, { v: 'surface', loading: true, icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Loading action' }), _jsx(IconButton, { v: 'pad', icon: _jsx(LuBell, { size: 17 }), "aria-label": 'Pad action' }), _jsx(Menu, { trigger: _jsx(IconButton, { v: 'surface', icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": 'Actions' }), items: menuItems }), _jsx(Button, { v: 'surface', leftIcon: _jsx(LuCommand, { size: 16 }), onClick: onOpenPalette, children: "Commands" })] })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'buttons-example', title: 'Buttons', description: 'Button variants, tones, sizes, loading states and press animation.', children: _jsxs(ExampleTile, { title: 'Buttons', code: codeSamples.buttons, onOpen: onOpenCode, children: [_jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 3, children: "Solid" }), _jsx(Button, { size: 3, v: 'soft', children: "Soft" }), _jsx(Button, { size: 3, v: 'surface', children: "Surface" }), _jsx(Button, { size: 3, v: 'pad', children: "Pad" }), _jsx(Button, { size: 3, v: 'outline', children: "Outline" }), _jsx(Button, { size: 3, v: 'ghost', children: "Ghost" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 3, tone: 'success', leftIcon: _jsx(LuCheck, { size: 16 }), children: "Success" }), _jsx(Button, { size: 3, tone: 'warning', v: 'soft', leftIcon: _jsx(LuTriangleAlert, { size: 16 }), children: "Warning" }), _jsx(Button, { size: 3, tone: 'info', v: 'soft', leftIcon: _jsx(LuInfo, { size: 16 }), children: "Info" }), _jsx(Button, { size: 3, tone: 'danger', v: 'soft', leftIcon: _jsx(LuTrash2, { size: 16 }), children: "Delete" }), _jsx(Button, { size: 3, loading: true, children: "Loading" }), _jsx(Button, { size: 3, v: 'surface', loading: true, leftIcon: _jsx(LuCheck, { size: 16 }), children: "Save" }), _jsx(Button, { size: 3, tone: 'success', loading: true, leftIcon: _jsx(LuCheck, { size: 16 }), children: "Success" }), _jsx(Spinner, {})] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 1, v: 'surface', children: "Size 1" }), _jsx(Button, { size: 2, v: 'surface', children: "Size 2" }), _jsx(Button, { size: 3, v: 'surface', children: "Size 3" }), _jsx(Button, { size: 4, v: 'surface', children: "Size 4" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 1, children: "Solid 1" }), _jsx(Button, { size: 2, v: 'soft', children: "Soft 2" }), _jsx(Button, { size: 3, v: 'surface', children: "Surface 3" }), _jsx(Button, { size: 3, v: 'pad', children: "Pad 3" }), _jsx(Button, { size: 4, v: 'outline', children: "Outline 4" }), _jsx(Button, { size: 2, v: 'ghost', children: "Ghost 2" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { v: 'surface', pressAnimation: 'translate', children: "Press translate" }), _jsx(Button, { v: 'surface', pressAnimation: 'scale', children: "Press scale" }), _jsx(Button, { v: 'surface', pressAnimation: 'soft', children: "Press soft" }), _jsx(Button, { v: 'surface', pressAnimation: 'none', children: "Press none" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(CopyButton, { text: 'https://orcestr.dev/requests/PR-2026-0900', label: 'Copy link', successMessage: 'Link copied', v: 'surface' }), _jsx(CopyIconButton, { text: 'PR-2026-0900', label: 'Copy request number', successMessage: 'Request number copied', v: 'surface' })] })] }) }), _jsx(UiExampleSection, { id: 'icon-text-buttons-example', title: 'Icon text buttons', description: 'Button and link-button behavior with library-owned icon spacing.', children: _jsx(ExampleTile, { title: 'IconTextButton', code: codeSamples.iconTextButton, onOpen: onOpenCode, children: _jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconTextButton, { icon: _jsx(LuPackagePlus, { size: 16 }), children: "Create PO" }), _jsx(IconTextButton, { v: 'soft', tone: 'info', icon: _jsx(LuCopy, { size: 16 }), children: "Duplicate" }), _jsx(IconTextButton, { href: '#icon-text-buttons-example', v: 'surface', icon: _jsx(LuExternalLink, { size: 16 }), children: "Link action" }), _jsx(IconTextButton, { v: 'outline', iconSide: 'end', icon: _jsx(LuExternalLink, { size: 16 }), children: "Open details" })] }) }) }), _jsx(UiExampleSection, { id: 'icon-buttons-example', title: 'Icon buttons', description: 'Icon-only actions, loading state, menu trigger and command entry.', children: _jsxs(ExampleTile, { title: 'Icon buttons', code: codeSamples.iconButtons, onOpen: onOpenCode, children: [_jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { v: 'solid', icon: _jsx(LuCheck, { size: 17 }), "aria-label": 'Solid icon' }), _jsx(IconButton, { v: 'soft', icon: _jsx(LuSearch, { size: 17 }), "aria-label": 'Search icon' }), _jsx(IconButton, { v: 'surface', icon: _jsx(LuUpload, { size: 17 }), "aria-label": 'Upload icon' }), _jsx(IconButton, { v: 'pad', icon: _jsx(LuShield, { size: 17 }), "aria-label": 'Security icon' }), _jsx(IconButton, { v: 'outline', icon: _jsx(LuInfo, { size: 17 }), "aria-label": 'Outline icon' }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": 'Ghost icon' })] }), _jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { size: 1, v: 'surface', icon: _jsx(LuSearch, { size: 13 }), "aria-label": 'Size 1 search' }), _jsx(IconButton, { size: 2, v: 'surface', icon: _jsx(LuDownload, { size: 15 }), "aria-label": 'Size 2 download' }), _jsx(IconButton, { size: 3, v: 'surface', icon: _jsx(LuRefreshCw, { size: 17 }), "aria-label": 'Size 3 refresh' }), _jsx(IconButton, { size: 4, v: 'surface', icon: _jsx(LuSettings, { size: 19 }), "aria-label": 'Size 4 settings' }), _jsx(IconButton, { size: 3, v: 'pad', round: false, r: 3, icon: _jsx(LuCommand, { size: 17 }), "aria-label": 'Square pad icon' }), _jsx(IconButton, { size: 3, v: 'outline', loading: true, icon: _jsx(LuRefreshCw, { size: 17 }), "aria-label": 'Loading icon' })] }), _jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { v: 'surface', icon: _jsx(LuBell, { size: 17 }), badge: 64, "aria-label": 'Notifications' }), _jsx(IconButton, { v: 'surface', icon: _jsx(LuMessageSquare, { size: 17 }), badge: 99, "aria-label": 'Unread chats' }), _jsx(IconButton, { v: 'pad', icon: _jsx(LuShield, { size: 17 }), badge: 3, badgeTone: 'warning', "aria-label": 'Security warnings' }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuDownload, { size: 17 }), badge: 'new', badgeTone: 'info', "aria-label": 'New export' })] }), _jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { size: 1, v: 'ghost', icon: _jsx(LuEllipsis, { size: 13 }), "aria-label": 'Ghost size 1' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuEllipsis, { size: 15 }), "aria-label": 'Ghost size 2' }), _jsx(IconButton, { size: 3, v: 'ghost', icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": 'Ghost size 3' }), _jsx(IconButton, { size: 4, v: 'ghost', icon: _jsx(LuEllipsis, { size: 19 }), "aria-label": 'Ghost size 4' })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Tooltip, { content: 'Notifications', children: _jsx(IconButton, { v: 'surface', icon: _jsx(LuBell, { size: 17 }), badge: 8, "aria-label": 'Notifications' }) }), _jsx(IconButton, { v: 'surface', loading: true, icon: _jsx(LuRefreshCw, { size: 17 }), "aria-label": 'Loading action' }), _jsx(IconButton, { v: 'pad', icon: _jsx(LuSettings, { size: 17 }), "aria-label": 'Pad action' }), _jsx(Menu, { trigger: _jsx(IconButton, { v: 'surface', icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": 'Actions' }), items: menuItems }), _jsx(Button, { v: 'surface', leftIcon: _jsx(LuCommand, { size: 16 }), onClick: onOpenPalette, children: "Commands" })] })] }) }), _jsx(UiExampleSection, { id: 'context-menu-example', title: 'Context menu', description: 'Right-click menu layer using shared action menu items.', children: _jsx(ExampleTile, { title: 'ContextMenu', code: codeSamples.contextMenu, onOpen: onOpenCode, children: _jsx(ContextMenu, { items: menuItems, children: _jsxs("div", { className: 'oui-ui-context-menu-demo', children: [_jsx(Text, { fs: '13px', fw: 760, children: "Right-click this row" }), _jsx(Text, { fs: '12px', tone: 'muted', children: "ContextMenu reuses Menu item sizing, tones and confirm actions." })] }) }) }) })] }));
 }

package/dist/example/ExampleApplicationSection.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleApplicationSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleApplicationSection.tsx"],"names":[],"mappings":"AAgDA,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,mBAAmB,GAAG;IACvB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAIF,wBAAgB,kBAAkB,CAAC,EAAC,UAAU,EAAC,EAAE,mBAAmB,2CA8OnE"}

package/dist/example/ExampleApplicationSection.js

@@ -0,0 +1,88 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LuArrowLeft, LuArrowLeftRight, LuBell, LuBox, LuBraces, LuCalendar, LuCheck, LuClipboardList, LuCog, LuEllipsis, LuFlaskConical, LuHeadphones, LuLanguages, LuLayoutDashboard, LuMessageSquare, LuSearch, LuSettings, LuShield, LuSun, LuTruck, } from 'react-icons/lu';
+import { AppShell, AppShellContent, AppShellHeader, AppSidebar, Badge, Button, Flex, IconButton, IconTextButton, Menu, PageTitleBlock, SpecialModal, Stack, Text, Tooltip, } from '..';
+import { ExampleTile } from './CodePreview';
+import { codeSamples } from './codeSamples';
+import { UiExampleSection } from './UiExampleSection';
+export function ApplicationSection({ onOpenCode }) {
+    const [appShellOpen, setAppShellOpen] = useState(false);
+    const [appShellPreviewMode, setAppShellPreviewMode] = useState('desktop');
+    const [appShellSidebarSide, setAppShellSidebarSide] = useState('left');
+    const [specialModalOpen, setSpecialModalOpen] = useState(false);
+    const [shellMobileOpen, setShellMobileOpen] = useState(false);
+    const [shellActiveKey, setShellActiveKey] = useState('requests');
+    const [sidebarActiveKey, setSidebarActiveKey] = useState('requests');
+    const shellGroups = [
+        {
+            key: 'demand',
+            items: [
+                { key: 'overview', label: 'Overview', icon: _jsx(LuLayoutDashboard, { size: 17 }), active: shellActiveKey === 'overview' },
+                { key: 'requests', label: 'Requests', icon: _jsx(LuTruck, { size: 17 }), active: shellActiveKey === 'requests' },
+                { key: 'orders', label: 'Supplier orders', icon: _jsx(LuClipboardList, { size: 17 }), active: shellActiveKey === 'orders' },
+            ],
+        },
+        {
+            key: 'operations',
+            items: [
+                { key: 'products', label: 'Products', icon: _jsx(LuBox, { size: 17 }), active: shellActiveKey === 'products' },
+                { key: 'calendar', label: 'Calendar', icon: _jsx(LuCalendar, { size: 17 }), active: shellActiveKey === 'calendar' },
+            ],
+        },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsxs(UiExampleSection, { id: 'app-shell-example', title: 'AppShell', description: 'Application shell primitives for module frames.', children: [_jsx(ExampleTile, { title: 'Fullscreen AppShell preview', code: codeSamples.appShell, onOpen: onOpenCode, children: _jsx(IconTextButton, { icon: _jsx(LuLayoutDashboard, { size: 16 }), onClick: () => setAppShellOpen(true), children: "Open AppShell preview" }) }), _jsxs(SpecialModal, { open: appShellOpen, onOpenChange: setAppShellOpen, size: 'full', scroll: 'body', density: 'compact', contentClassName: 'oui-ui-app-shell-modal', children: [_jsxs(SpecialModal.Header, { className: 'oui-ui-app-shell-modal-header', children: [_jsx(Flex, { a: 'c', g: 2, minW: 0, children: _jsx(Text, { fw: 760, children: "AppShell preview" }) }), _jsxs(Flex, { a: 'c', g: 1, children: [_jsx(Button, { className: 'oui-ui-app-shell-mode-toggle', size: 2, v: 'surface', onClick: () => {
+                                                    setShellMobileOpen(false);
+                                                    setAppShellPreviewMode((mode) => mode === 'desktop' ? 'phone' : 'desktop');
+                                                }, children: appShellPreviewMode === 'desktop'
+                                                    ? 'Phone view'
+                                                    : 'Desktop view' }), _jsx(SpecialModal.Close, {})] })] }), _jsx(SpecialModal.Body, { className: 'oui-ui-app-shell-modal-body', children: _jsx("div", { className: 'oui-ui-app-shell-preview-stage', "data-mode": appShellPreviewMode, children: _jsx(DemoAppShellPreview, { mode: appShellPreviewMode, mobileOpen: shellMobileOpen, onMobileOpenChange: setShellMobileOpen, sidebarSide: appShellSidebarSide, onToggleSidebarSide: () => setAppShellSidebarSide((side) => side === 'left' ? 'right' : 'left'), groups: shellGroups, onNavigate: (item) => setShellActiveKey(item.key) }) }) })] })] }), _jsx(UiExampleSection, { id: 'app-sidebar-example', title: 'AppSidebar', description: 'Deliveries-style sidebar with active indicator and footer actions.', children: _jsx(ExampleTile, { title: 'AppSidebar', code: codeSamples.appSidebar, onOpen: onOpenCode, children: _jsx("div", { className: 'oui-ui-app-sidebar-demo', children: _jsx(AppSidebar, { header: (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'oui-app-sidebar-brand', children: [_jsx("span", { className: 'oui-app-sidebar-logo', children: _jsx("span", { className: 'oui-ui-demo-logo', children: "O" }) }), _jsx("span", { className: 'oui-app-sidebar-title', children: "Deliveries" })] }), _jsx("div", { className: 'oui-app-sidebar-actions', children: _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuEllipsis, { size: 16 }), "aria-label": 'Sidebar actions' }) })] })), itemH: 38, onNavigate: (item) => setSidebarActiveKey(item.key), groups: [
+                                {
+                                    key: 'main',
+                                    items: [
+                                        { key: 'overview', label: 'Overview', icon: _jsx(LuLayoutDashboard, { size: 17 }), active: sidebarActiveKey === 'overview' },
+                                        { key: 'requests', label: 'Requests', icon: _jsx(LuTruck, { size: 17 }), active: sidebarActiveKey === 'requests' },
+                                        { key: 'orders', label: 'Supplier orders', icon: _jsx(LuClipboardList, { size: 17 }), active: sidebarActiveKey === 'orders' },
+                                    ],
+                                },
+                                {
+                                    key: 'inventory',
+                                    items: [
+                                        { key: 'products', label: 'Products', icon: _jsx(LuBox, { size: 17 }), active: sidebarActiveKey === 'products' },
+                                        { key: 'calendar', label: 'Calendar', icon: _jsx(LuCalendar, { size: 17 }), disabled: true },
+                                    ],
+                                },
+                            ], footer: (_jsxs(Flex, { col: true, g: 2, children: [_jsxs(Flex, { g: 1, a: 'c', children: [_jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuBell, { size: 15 }), badge: 64, "aria-label": 'Notifications' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuSettings, { size: 15 }), "aria-label": 'Settings' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuCog, { size: 15 }), "aria-label": 'Developer tools' })] }), _jsx(Text, { fs: '12px', tone: 'muted', children: "Admin workspace" })] })) }) }) }) }), _jsxs(UiExampleSection, { id: 'special-modal-example', title: 'SpecialModal', description: 'Large entity modal shell for rich operational dialogs.', children: [_jsx(ExampleTile, { title: 'SpecialModal', code: codeSamples.specialModal, onOpen: onOpenCode, children: _jsx(Button, { onClick: () => setSpecialModalOpen(true), children: "Open special modal" }) }), _jsxs(SpecialModal, { open: specialModalOpen, onOpenChange: setSpecialModalOpen, size: 'lg', scroll: 'body', children: [_jsx(SpecialModal.Header, { title: 'Request PR-2026-0900', meta: (_jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(Badge, { tone: 'success', children: "Closed" }), _jsx(Badge, { tone: 'neutral', children: "RUB" })] })), actions: _jsx(SpecialModal.Close, {}) }), _jsx(SpecialModal.Body, { children: _jsxs(Stack, { g: 3, children: [_jsxs(Flex, { g: 4, wrap: true, children: [_jsxs(Stack, { g: 0, w: 'min(100%, 220px)', children: [_jsx(Text, { fs: '12px', tone: 'muted', children: "Supplier" }), _jsx(Text, { fw: 760, children: "Northwind Trading LLC" })] }), _jsxs(Stack, { g: 0, w: 'min(100%, 180px)', children: [_jsx(Text, { fs: '12px', tone: 'muted', children: "Plan arrival" }), _jsx(Text, { fw: 760, children: "25.06.2026" })] })] }), _jsx(TableLikePreview, {})] }) }), _jsx(SpecialModal.Footer, { children: _jsxs(Flex, { g: 2, j: 'e', w: '100%', children: [_jsx(Button, { v: 'surface', onClick: () => setSpecialModalOpen(false), children: "Close" }), _jsx(Button, { children: "Save" })] }) })] })] })] }));
+}
+function DemoAppShellPreview({ mode, mobileOpen, onMobileOpenChange, sidebarSide, onToggleSidebarSide, groups, onNavigate, }) {
+    const isPhone = mode === 'phone';
+    const isRight = sidebarSide === 'right';
+    return (_jsx(AppShell, { className: 'oui-ui-app-shell-preview', sidebarMode: isPhone ? 'mobile' : 'desktop', sidebarSide: sidebarSide, sidebarWidth: 300, maxWidth: '100%', contentInset: 0, sidebarOpen: mobileOpen, desktopSidebarOpen: true, onSidebarOpenChange: onMobileOpenChange, header: (_jsx(AppShellHeader, { visibility: 'always', sidebarOpen: mobileOpen, onSidebarOpenChange: onMobileOpenChange, navigationVisibility: 'mobile', actions: _jsx(DemoHeaderActions, {}) })), sidebar: (_jsx(AppSidebar, { side: sidebarSide, header: (_jsxs(_Fragment, { children: [_jsx(DemoShellBrand, {}), _jsxs("div", { className: 'oui-app-sidebar-actions', children: [_jsx(Tooltip, { content: 'Back', children: _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuArrowLeft, { size: 17 }), "aria-label": 'Back' }) }), _jsx(Tooltip, { content: isRight ? 'Move sidebar left' : 'Move sidebar right', children: _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuArrowLeftRight, { size: 17 }), "aria-label": isRight ? 'Move sidebar left' : 'Move sidebar right', onClick: onToggleSidebarSide }) }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuEllipsis, { size: 16 }), "aria-label": 'Sidebar actions' })] })] })), itemH: 38, onNavigate: onNavigate, groups: groups, footer: _jsx(DemoSidebarFooter, {}) })), children: _jsxs(AppShellContent, { scroll: false, children: [_jsx(PageTitleBlock, { title: 'Requests', caption: 'Module workspace with responsive header and AppSidebar navigation.', action: (_jsx(IconButton, { size: 2, v: 'pad', icon: _jsx(LuEllipsis, { size: 16 }), "aria-label": 'More actions' })) }), _jsx(TableLikePreview, {})] }) }));
+}
+function DemoShellBrand() {
+    return (_jsxs("div", { className: 'oui-app-sidebar-brand', children: [_jsx("span", { className: 'oui-app-sidebar-logo', children: _jsx("span", { className: 'oui-ui-demo-logo', children: "O" }) }), _jsx("span", { className: 'oui-app-sidebar-title', children: "Deliveries" })] }));
+}
+function DemoHeaderActions() {
+    const [locale, setLocale] = useState('en');
+    const languageItems = [
+        {
+            key: 'ru',
+            label: 'RU',
+            icon: locale === 'ru' ? _jsx(LuCheck, { size: 14 }) : undefined,
+            onSelect: () => setLocale('ru'),
+        },
+        {
+            key: 'en',
+            label: 'EN',
+            icon: locale === 'en' ? _jsx(LuCheck, { size: 14 }) : undefined,
+            onSelect: () => setLocale('en'),
+        },
+    ];
+    return (_jsxs(Flex, { className: 'oui-ui-app-shell-header-actions-demo', a: 'c', g: 1, children: [_jsx(IconTextButton, { className: 'oui-ui-app-shell-quick-jump', size: 2, v: 'soft', tone: 'neutral', icon: _jsx(LuSearch, { size: 14 }), children: "Quick jump" }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuBell, { size: 18 }), badge: 64, "aria-label": 'Notifications' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuMessageSquare, { size: 18 }), badge: 99, "aria-label": 'Messages' }), _jsx(Menu, { align: 'end', items: languageItems, trigger: _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuLanguages, { size: 18 }), "aria-label": `Language: ${locale.toUpperCase()}` }) }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuSun, { size: 18 }), "aria-label": 'Theme' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuShield, { size: 18 }), "aria-label": 'Admin' })] }));
+}
+function DemoSidebarFooter() {
+    return (_jsxs(Flex, { col: true, g: 2, children: [_jsxs(Flex, { g: 1, a: 'c', children: [_jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuHeadphones, { size: 15 }), "aria-label": 'Support' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuBell, { size: 15 }), badge: 64, "aria-label": 'Notifications' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuSettings, { size: 15 }), "aria-label": 'Settings' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuFlaskConical, { size: 15 }), "aria-label": 'Demo data' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuBraces, { size: 15 }), "aria-label": 'API' })] }), _jsx(Text, { fs: '12px', tone: 'muted', children: "Admin workspace" })] }));
+}
+function TableLikePreview() {
+    return (_jsxs("div", { className: 'oui-ui-application-table-preview', children: [['Brand', 'Name', 'Article', 'Qty', 'Price'].map((item) => (_jsx(Text, { fs: '12px', fw: 760, children: item }, item))), ['Stalex', 'Lathe machine', 'LATHE-8191', '22', '1250'].map((item) => (_jsx(Text, { fs: '13px', children: item }, item)))] }));
+}

package/dist/example/ExampleBasicsSections.d.ts

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

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

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

package/dist/example/ExampleBasicsSections.js

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

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

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

package/dist/example/ExampleDataSection.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { Badge, Button, DataTable, Text, TextField, } from '..';
+import { Badge, Button, DataTable, Flex, Pagination, Stack, Table, Text, TextField, } from '..';
 import { ExampleTile } from './CodePreview';
 import { codeSamples } from './codeSamples';
 import { UiExampleSection } from './UiExampleSection';
@@ -62,39 +62,40 @@ export function DataSection({ onOpenCode }) {
     const [visibleColumnKeys, setVisibleColumnKeys] = useState(defaultVisibleColumnKeys);
     const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
     const [columnWidths, setColumnWidths] = useState({});
+    const [page, setPage] = useState(2);
     const filteredRows = useMemo(() => sortRows(rows.filter((row) => rowMatches(row, query)), sort), [query, sort]);
-    return (_jsx(UiExampleSection, { id: 'data-table-example', title: 'DataTable', description: 'Reusable DataTable without CRUD or page-level entity logic.', children: _jsx(ExampleTile, { className: 'oui-ui-table-tile', title: 'DataTable', code: codeSamples.data, onOpen: onOpenCode, children: _jsxs("div", { className: 'oui-ui-table-demo', children: [_jsx(DataTable, { toolbar: (_jsxs(_Fragment, { children: [_jsx(TextField, { value: query, placeholder: 'Filter rows', clearable: true, onChange: (event) => setQuery(event.target.value), onClear: () => setQuery('') }), _jsx(Button, { size: 3, v: 'surface', onClick: () => {
+    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: {
+                                    columns,
+                                    visibleColumnKeys,
+                                    onVisibleColumnKeysChange: setVisibleColumnKeys,
+                                    columnOrder,
+                                    onColumnOrderChange: setColumnOrder,
+                                    columnWidths,
+                                    onColumnWidthsChange: setColumnWidths,
+                                    onReset: () => {
                                         setVisibleColumnKeys(defaultVisibleColumnKeys);
                                         setColumnOrder(defaultColumnOrder);
                                         setColumnWidths({});
-                                    }, children: "Reset" })] })), rowKey: (row) => row.name, rows: filteredRows, columns: columns, sort: sort, onSortChange: (nextSort) => setSort(Array.isArray(nextSort) ? nextSort[0] ?? null : nextSort), selectable: true, selectedRowKeys: selectedRowKeys, onSelectedRowKeysChange: setSelectedRowKeys, total: rows.length, emptyText: 'No rows match the filter.', columnSettings: {
-                            columns,
-                            visibleColumnKeys,
-                            onVisibleColumnKeysChange: setVisibleColumnKeys,
-                            columnOrder,
-                            onColumnOrderChange: setColumnOrder,
-                            columnWidths,
-                            onColumnWidthsChange: setColumnWidths,
-                            onReset: () => {
-                                setVisibleColumnKeys(defaultVisibleColumnKeys);
-                                setColumnOrder(defaultColumnOrder);
-                                setColumnWidths({});
-                            },
-                        }, rowContextMenuActions: (row) => [
-                            {
-                                key: 'open',
-                                label: `Open ${row.name}`,
-                                onSelect: () => undefined,
-                            },
-                            {
-                                key: 'archive',
-                                label: 'Archive',
-                                tone: 'danger',
-                                onSelect: () => undefined,
-                            },
-                        ] }), _jsx("div", { className: 'oui-ui-table-variants', children: _jsxs("div", { className: 'oui-ui-table-variant', children: [_jsx(Text, { fs: '13px', fw: 760, children: "Plain table" }), _jsx(DataTable, { rowKey: (row) => row.name, rows: rows.slice(0, 4), columns: columns, sort: sort, onSortChange: (nextSort) => setSort(Array.isArray(nextSort)
-                                        ? nextSort[0] ?? null
-                                        : nextSort), total: rows.length, emptyText: 'No rows.' })] }) })] }) }) }));
+                                    },
+                                }, rowContextMenuActions: (row) => [
+                                    {
+                                        key: 'open',
+                                        label: `Open ${row.name}`,
+                                        onSelect: () => undefined,
+                                    },
+                                    {
+                                        key: 'archive',
+                                        label: 'Archive',
+                                        tone: 'danger',
+                                        onSelect: () => undefined,
+                                    },
+                                ] }), _jsx("div", { className: 'oui-ui-table-variants', children: _jsxs("div", { className: 'oui-ui-table-variant', children: [_jsx(Text, { fs: '13px', fw: 760, children: "Plain table" }), _jsx(DataTable, { rowKey: (row) => row.name, rows: rows.slice(0, 4), columns: columns, sort: sort, onSortChange: (nextSort) => setSort(Array.isArray(nextSort)
+                                                ? nextSort[0] ?? null
+                                                : nextSort), total: rows.length, emptyText: 'No rows.' })] }) })] }) }) }), _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":"AAqBA,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,cAAc,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC1B,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,UAAU,GACb,EAAE,kBAAkB,2CA2HpB"}
+{"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"}