@orcestr/ui 0.1.0 → 0.1.1

package/dist/components/Toast/Toast.js

@@ -41,6 +41,7 @@ export function ToastProvider({ children, defaultPosition = DEFAULT_TOAST_POSITI
     const nextId = useRef(1);
     const timeoutIds = useRef(new Map());
     const removalIds = useRef(new Map());
+    const timers = useRef(new Map());
     const setToastItems = useCallback((update) => {
         setItems((current) => {
             const next = update(current);
@@ -54,6 +55,14 @@ export function ToastProvider({ children, defaultPosition = DEFAULT_TOAST_POSITI
             window.clearTimeout(timeoutId);
             timeoutIds.current.delete(id);
         }
+        timers.current.delete(id);
+    }, []);
+    const stopTimer = useCallback((id) => {
+        const timeoutId = timeoutIds.current.get(id);
+        if (timeoutId !== undefined) {
+            window.clearTimeout(timeoutId);
+            timeoutIds.current.delete(id);
+        }
     }, []);
     const clearRemovalTimer = useCallback((id) => {
         const timeoutId = removalIds.current.get(id);
@@ -63,9 +72,10 @@ export function ToastProvider({ children, defaultPosition = DEFAULT_TOAST_POSITI
         }
     }, []);
     const removeToast = useCallback((id) => {
+        clearTimer(id);
         clearRemovalTimer(id);
         setToastItems((current) => current.filter((item) => item.id !== id));
-    }, [clearRemovalTimer, setToastItems]);
+    }, [clearRemovalTimer, clearTimer, setToastItems]);
     const dismiss = useCallback((id) => {
         clearTimer(id);
         setToastItems((current) => current.map((item) => item.id === id ? { ...item, state: 'closing' } : item));
@@ -78,20 +88,48 @@ export function ToastProvider({ children, defaultPosition = DEFAULT_TOAST_POSITI
     const clear = useCallback(() => {
         timeoutIds.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
         timeoutIds.current.clear();
+        timers.current.clear();
         removalIds.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
         removalIds.current.clear();
         setToastItems(() => []);
     }, [setToastItems]);
-    const scheduleDismiss = useCallback((item) => {
-        clearTimer(item.id);
-        if (item.duration === null)
+    const scheduleDismiss = useCallback((item, remainingMs) => {
+        stopTimer(item.id);
+        if (item.duration === null) {
+            timers.current.delete(item.id);
             return;
-        const duration = item.duration ?? DEFAULT_TOAST_DURATION;
-        if (duration <= 0)
+        }
+        const duration = remainingMs ?? item.duration ?? DEFAULT_TOAST_DURATION;
+        if (duration <= 0) {
+            dismiss(item.id);
             return;
+        }
+        timers.current.set(item.id, {
+            startedAt: Date.now(),
+            remaining: duration,
+        });
         const timeoutId = window.setTimeout(() => dismiss(item.id), duration);
         timeoutIds.current.set(item.id, timeoutId);
-    }, [clearTimer, dismiss]);
+    }, [dismiss, stopTimer]);
+    const pauseDismiss = useCallback((id) => {
+        const timer = timers.current.get(id);
+        if (!timer || !timeoutIds.current.has(id))
+            return;
+        stopTimer(id);
+        timers.current.set(id, {
+            startedAt: timer.startedAt,
+            remaining: Math.max(0, timer.remaining - (Date.now() - timer.startedAt)),
+        });
+    }, [stopTimer]);
+    const resumeDismiss = useCallback((id) => {
+        if (timeoutIds.current.has(id))
+            return;
+        const item = itemsRef.current.find((currentItem) => currentItem.id === id);
+        const timer = timers.current.get(id);
+        if (!item || !timer || item.state === 'closing')
+            return;
+        scheduleDismiss(item, timer.remaining);
+    }, [scheduleDismiss]);
     const push = useCallback((input, tone) => {
         const normalized = normalizeToast(input, tone, defaultPosition);
         const existingItem = normalized.dedupeKey
@@ -134,7 +172,7 @@ export function ToastProvider({ children, defaultPosition = DEFAULT_TOAST_POSITI
                     const positionItems = items.filter((item) => item.position === position);
                     if (positionItems.length === 0)
                         return null;
-                    return (_jsx("div", { className: 'oui-toast-viewport', "data-position": position, "data-testid": testId ? `${testId}-${position}` : undefined, "aria-live": 'polite', "aria-relevant": 'additions text', style: { zIndex: overlay.zIndex.toast }, children: positionItems.map((item) => (_jsx(ToastCard, { item: item, onDismiss: dismiss, onExited: removeToast, testId: testId ? `${testId}-${item.id}` : undefined }, item.id))) }, position));
+                    return (_jsx("div", { className: 'oui-toast-stack', "data-position": position, "data-testid": testId ? `${testId}-${position}` : undefined, "aria-live": 'polite', "aria-relevant": 'additions text', style: { zIndex: overlay.zIndex.toast }, children: positionItems.map((item) => (_jsx(ToastCard, { item: item, onDismiss: dismiss, onPause: pauseDismiss, onResume: resumeDismiss, onExited: removeToast, testId: testId ? `${testId}-${item.id}` : undefined }, item.id))) }, position));
                 }) })] }));
 }
 export function useToast() {
@@ -144,45 +182,31 @@ export function useToast() {
     }
     return context;
 }
-function ToastCard({ item, onDismiss, onExited, testId, }) {
+function ToastCard({ item, onDismiss, onPause, onResume, onExited, testId, }) {
     const { copy } = useOrcestrUiLocale();
     const duration = toastDuration(item);
     const hasProgress = item.duration !== null && duration > 0;
     const icon = item.icon === false ? null : item.icon ?? toastIcon(item.tone);
-    const effectiveBlur = item.blur !== undefined ? cssLength(item.blur) : 'var(--oui-toast-blur, 14px)';
     const style = {
-        ...(item.background ? { '--oui-toast-bg': item.background } : null),
-        '--oui-toast-effective-blur': effectiveBlur,
-        ...(item.borderColor ? { '--oui-toast-custom-border-color': item.borderColor } : null),
-        ...(item.shadow ? { '--oui-toast-shadow': item.shadow } : null),
         ...(item.progressColor ? { '--oui-toast-progress-color': item.progressColor } : null),
     };
-    const blurStyle = {
-        backdropFilter: `blur(${effectiveBlur})`,
-        WebkitBackdropFilter: `blur(${effectiveBlur})`,
-    };
-    return (_jsxs("div", { className: 'oui-toast-frame', "data-position": item.position, "data-state": item.state, style: style, onAnimationEnd: (event) => {
+    return (_jsx("div", { className: 'oui-toast-viewport oui-toast-frame', "data-position": item.position, "data-state": item.state, style: style, onAnimationEnd: (event) => {
             if (event.animationName === 'ouiToastOut') {
                 onExited(item.id);
             }
-        }, children: [_jsx("span", { className: 'oui-toast-backdrop', "aria-hidden": 'true', style: blurStyle }), _jsxs("div", { className: 'oui-toast', "data-tone": item.tone, "data-state": item.state, "data-position": item.position, "data-clickable": item.dismissible === false ? undefined : 'true', "data-testid": testId, role: item.tone === 'danger' ? 'alert' : 'status', style: blurStyle, onClick: () => {
-                    if (item.dismissible !== false)
+        }, children: _jsxs("div", { className: 'oui-toast', "data-tone": item.tone, "data-state": item.state, "data-position": item.position, "data-clickable": item.dismissible === false ? undefined : 'true', "data-testid": testId, role: item.tone === 'danger' ? 'alert' : 'status', onMouseEnter: () => onPause(item.id), onMouseLeave: () => onResume(item.id), onClick: () => {
+                if (item.dismissible !== false)
+                    onDismiss(item.id);
+            }, children: [_jsxs("div", { className: 'oui-toast-content', children: [icon ? (_jsx("span", { className: 'oui-toast-icon', "data-tone": item.tone, children: icon })) : null, _jsxs("div", { className: 'oui-toast-main', children: [_jsx("div", { className: 'oui-toast-title', children: item.title }), item.message ? (_jsx("div", { className: 'oui-toast-message', children: item.message })) : null, item.action ? (_jsx(Button, { className: 'oui-toast-action', size: 1, v: 'surface', tone: item.tone, onClick: (event) => {
+                                        event.stopPropagation();
+                                        item.action?.onClick();
+                                        if (item.action?.closeOnClick !== false) {
+                                            onDismiss(item.id);
+                                        }
+                                    }, children: item.action.label })) : null] })] }), item.closeButton ? (_jsx(IconButton, { className: 'oui-toast-close', size: 1, v: 'ghost', icon: _jsx(LuX, { size: 14 }), "aria-label": copy.common.dismissNotification, onClick: (event) => {
+                        event.stopPropagation();
                         onDismiss(item.id);
-                }, children: [_jsxs("div", { className: 'oui-toast-content', children: [icon ? (_jsx("span", { className: 'oui-toast-icon', "data-tone": item.tone, children: icon })) : null, _jsxs("div", { className: 'oui-toast-main', children: [_jsx("div", { className: 'oui-toast-title', children: item.title }), item.message ? (_jsx("div", { className: 'oui-toast-message', children: item.message })) : null, item.action ? (_jsx(Button, { className: 'oui-toast-action', size: 1, v: 'surface', tone: item.tone, onClick: (event) => {
-                                            event.stopPropagation();
-                                            item.action?.onClick();
-                                            if (item.action?.closeOnClick !== false) {
-                                                onDismiss(item.id);
-                                            }
-                                        }, children: item.action.label })) : null] })] }), item.closeButton ? (_jsx(IconButton, { className: 'oui-toast-close', size: 1, v: 'ghost', icon: _jsx(LuX, { size: 14 }), "aria-label": copy.common.dismissNotification, onClick: (event) => {
-                            event.stopPropagation();
-                            onDismiss(item.id);
-                        } })) : null, hasProgress ? (_jsx("span", { className: 'oui-toast-progress', style: { '--oui-toast-duration': `${duration}ms` } }, item.createdAt)) : null] })] }));
-}
-function cssLength(value) {
-    if (value === false)
-        return '0px';
-    return typeof value === 'number' ? `${value}px` : value;
+                    } })) : null, hasProgress ? (_jsx("span", { className: 'oui-toast-progress', style: { '--oui-toast-duration': `${duration}ms` } }, item.createdAt)) : null] }) }));
 }
 function toastDuration(item) {
     return item.duration ?? DEFAULT_TOAST_DURATION;

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,2CA8BA"}
+{"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 { useMemo, useState, } from 'react';
 import { LuInfo, LuX } from 'react-icons/lu';
-import { Flex, IconButton, Modal, ScrollArea } from '..';
+import { CopyIconButton, Flex, IconButton, Modal, ScrollArea } from '..';
 import { cn } from '../utils/cn';
 import {} from './codeSamples';
 function highlightedCode(code) {
@@ -38,52 +38,17 @@ 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 (_jsxs(Modal, { open: example !== null, onOpenChange: (open) => {

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleActionsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleActionsSection.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAUH,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,2CA6KrB"}
+{"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, LuCopy, LuDownload, LuEllipsis, LuExternalLink, LuInfo, LuMessageSquare, LuPackagePlus, LuRefreshCw, LuSearch, LuSettings, LuShield, LuTrash2, LuTriangleAlert, LuUpload, } from 'react-icons/lu';
-import { Button, ContextMenu, Flex, IconButton, IconTextButton, Menu, Spinner, Text, Tooltip, } from '..';
+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-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." })] }) }) }) })] }));
+    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.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleApplicationSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleApplicationSection.tsx"],"names":[],"mappings":"AA2CA,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,2CAyOnE"}
+{"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

@@ -1,14 +1,15 @@
 '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, 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, PageTitleBlock, SpecialModal, Stack, Text, } from '..';
+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');
@@ -30,12 +31,12 @@ export function ApplicationSection({ onOpenCode }) {
             ],
         },
     ];
-    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: [_jsxs(Flex, { a: 'c', g: 2, minW: 0, children: [_jsx(Text, { fw: 760, children: "AppShell preview" }), _jsx(Badge, { tone: 'primary', children: appShellPreviewMode === 'desktop' ? 'Desktop' : 'Phone' })] }), _jsxs(Flex, { a: 'c', g: 1, children: [_jsx(Button, { className: 'oui-ui-app-shell-mode-toggle', size: 2, v: 'surface', onClick: () => {
+    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, 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: [
+                                                    : '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: [
@@ -53,12 +54,31 @@ export function ApplicationSection({ onOpenCode }) {
                                 },
                             ], 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, groups, onNavigate, }) {
+function DemoAppShellPreview({ mode, mobileOpen, onMobileOpenChange, sidebarSide, onToggleSidebarSide, groups, onNavigate, }) {
     const isPhone = mode === 'phone';
-    return (_jsx(AppShell, { className: 'oui-ui-app-shell-preview', sidebarMode: isPhone ? 'mobile' : 'desktop', sidebarWidth: 300, maxWidth: '100%', contentInset: 0, sidebarOpen: mobileOpen, onSidebarOpenChange: onMobileOpenChange, header: (_jsx(AppShellHeader, { visibility: 'always', sidebarOpen: mobileOpen, onSidebarOpenChange: isPhone ? onMobileOpenChange : undefined, actions: _jsx(DemoHeaderActions, {}), children: _jsxs(Flex, { className: 'oui-ui-app-shell-header-main', a: 'c', g: 2, children: [!isPhone ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuArrowLeft, { size: 17 }), "aria-label": 'Back' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuArrowLeftRight, { size: 17 }), "aria-label": 'Move sidebar' })] })) : null, _jsx(Text, { fw: 760, children: "Deliveries" })] }) })), sidebar: (_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: 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.', badge: 'shell', action: (_jsx(IconButton, { size: 2, v: 'pad', icon: _jsx(LuEllipsis, { size: 16 }), "aria-label": 'More actions' })) }), _jsx(TableLikePreview, {})] }) }));
+    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() {
-    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(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuLanguages, { size: 18 }), "aria-label": 'Language' }), _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' })] }));
+    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" })] }));

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":"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,iBAAiB,CAAC,EAAC,UAAU,EAAC,EAAE,mBAAmB,2CAwElE;AAED,wBAAgB,aAAa,CAAC,EAAC,UAAU,EAAC,EAAE,mBAAmB,2CAyV9D"}
+{"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

@@ -5,16 +5,22 @@ import { Alert, Badge, Box, Button, Card, Collapse, Flex, Grid, ScrollArea, Sect
 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: "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 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: '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: [
-                            ['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-primary-base)' } }), _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: {
+                            ['/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,

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;AAgEF,wBAAgB,eAAe,CAAC,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,GACb,EAAE,oBAAoB,2CA8RtB"}
+{"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"}