@orcestr/ui 0.1.1 → 0.2.0

package/dist/components/TextArea/TextArea.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useLayoutEffect, useRef, } from 'react';
+import { forwardRef, useLayoutEffect, useRef } from 'react';
 import { cn } from '../../utils/cn';
 import { composeRefs } from '../../utils/composeRefs';
-import { splitSystemProps, } from '../../theme/systemProps';
+import { splitSystemProps } from '../../theme/systemProps';
 export const TextArea = forwardRef(function TextArea({ className, style, size = 2, invalid = false, autoResize = false, value, testId, children: _children, dangerouslySetInnerHTML: _dangerouslySetInnerHTML, ...props }, ref) {
     const localRef = useRef(null);
     const { systemStyle, restProps } = splitSystemProps(props);

package/dist/components/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAMf,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,MAAM,EACd,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,cAAc,GAAG,IAAI,CAC7B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACT,GACG,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,SAAS;WAXP,MAAM;cACH,OAAO;gBACL,OAAO;eACR,SAAS;gBACR,SAAS;gBACT,OAAO;cACT,MAAM,IAAI;iBACP,MAAM;aACV,MAAM;oDA8FtB,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAoB,KAAK,WAAW,EAAE,KAAK,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAE1F,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAC5E,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,SAAS;WAXP,MAAM;cACH,OAAO;gBACL,OAAO;eACR,SAAS;gBACR,SAAS;gBACT,OAAO;cACT,MAAM,IAAI;iBACP,MAAM;aACV,MAAM;oDAkFrB,CAAC"}

package/dist/components/TextField/TextField.js

@@ -5,7 +5,7 @@ import { LuX } from 'react-icons/lu';
 import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
 import { cn } from '../../utils/cn';
 import { composeRefs } from '../../utils/composeRefs';
-import { splitSystemProps, } from '../../theme/systemProps';
+import { splitSystemProps } from '../../theme/systemProps';
 export const TextField = forwardRef(function TextField({ className, style, size = 3, invalid = false, fullWidth = true, leftSlot, rightSlot, clearable = false, onClear, clearLabel, testId, value, defaultValue, onChange, disabled, id, children: _children, dangerouslySetInnerHTML: _dangerouslySetInnerHTML, ...props }, ref) {
     const { copy } = useOrcestrUiLocale();
     const generatedId = useId();
@@ -20,12 +20,12 @@ export const TextField = forwardRef(function TextField({ className, style, size
             setInternalValue(event.target.value);
         onChange?.(event);
     };
-    return (_jsxs("span", { className: cn('oui-text-field', fullWidth && 'oui-text-field-full', className), "data-size": size, "data-invalid": invalid ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, style: { ...systemStyle, ...style }, children: [leftSlot ? (_jsx("span", { className: 'oui-text-field-slot', children: leftSlot })) : null, _jsx("input", { ref: composeRefs(ref, localRef), id: inputId, className: 'oui-text-field-input', "data-testid": testId, value: actualValue, onChange: handleChange, disabled: disabled, "aria-invalid": invalid || undefined, ...restProps }), canClear ? (_jsx("button", { type: 'button', className: 'oui-text-field-clear', "aria-label": clearLabel ?? copy.common.clear, onClick: (event) => {
+    return (_jsxs("span", { className: cn('oui-text-field', fullWidth && 'oui-text-field-full', className), "data-size": size, "data-invalid": invalid ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, style: { ...systemStyle, ...style }, children: [leftSlot ? _jsx("span", { className: "oui-text-field-slot", children: leftSlot }) : null, _jsx("input", { ref: composeRefs(ref, localRef), id: inputId, className: "oui-text-field-input", "data-testid": testId, value: actualValue, onChange: handleChange, disabled: disabled, "aria-invalid": invalid || undefined, ...restProps }), canClear ? (_jsx("button", { type: "button", className: "oui-text-field-clear", "aria-label": clearLabel ?? copy.common.clear, onClick: (event) => {
                     event.preventDefault();
                     event.stopPropagation();
                     if (value === undefined)
                         setInternalValue('');
                     localRef.current?.focus();
                     onClear?.();
-                }, children: _jsx(LuX, { size: 14 }) })) : null, rightSlot ? (_jsx("span", { className: 'oui-text-field-slot', children: rightSlot })) : null] }));
+                }, children: _jsx(LuX, { size: 14 }) })) : null, rightSlot ? _jsx("span", { className: "oui-text-field-slot", children: rightSlot }) : null] }));
 });

package/dist/components/Toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EASH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAClE,MAAM,MAAM,aAAa,GACnB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAErB,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,CAAC;AAe/C,KAAK,iBAAiB,GAAG;IACrB,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,MAAM,CAAC;IACtD,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;IACvC,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;IACrC,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;IACvC,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;IACpC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAmCF,wBAAgB,aAAa,CAAC,EAC1B,QAAQ,EACR,eAAwC,EACxC,UAA+B,EAC/B,MAAM,GACT,EAAE;IACC,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CA8LA;AAED,wBAAgB,QAAQ,sBAMvB"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EASH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAClE,MAAM,MAAM,aAAa,GACrB,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC;AAE/F,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,CAAC;AAe/C,KAAK,iBAAiB,GAAG;IACrB,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,MAAM,CAAC;IACtD,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;IACvC,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;IACrC,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;IACvC,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;IACpC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAmCF,wBAAgB,aAAa,CAAC,EAC1B,QAAQ,EACR,eAAwC,EACxC,UAA+B,EAC/B,MAAM,GACT,EAAE;IACC,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAsMA;AAED,wBAAgB,QAAQ,sBAMvB"}

package/dist/components/Toast/Toast.js

@@ -78,7 +78,7 @@ export function ToastProvider({ children, defaultPosition = DEFAULT_TOAST_POSITI
     }, [clearRemovalTimer, clearTimer, setToastItems]);
     const dismiss = useCallback((id) => {
         clearTimer(id);
-        setToastItems((current) => current.map((item) => item.id === id ? { ...item, state: 'closing' } : item));
+        setToastItems((current) => current.map((item) => (item.id === id ? { ...item, state: 'closing' } : item)));
         clearRemovalTimer(id);
         const removalId = window.setTimeout(() => {
             removeToast(id);
@@ -151,13 +151,7 @@ export function ToastProvider({ children, defaultPosition = DEFAULT_TOAST_POSITI
         });
         scheduleDismiss(item);
         return item.id;
-    }, [
-        clearRemovalTimer,
-        defaultPosition,
-        maxVisible,
-        scheduleDismiss,
-        setToastItems,
-    ]);
+    }, [clearRemovalTimer, defaultPosition, maxVisible, scheduleDismiss, setToastItems]);
     const value = useMemo(() => ({
         push,
         success: (input) => push(input, 'success'),
@@ -172,7 +166,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-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));
+                    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() {
@@ -186,27 +180,27 @@ 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 icon = item.icon === false ? null : (item.icon ?? toastIcon(item.tone));
     const style = {
         ...(item.progressColor ? { '--oui-toast-progress-color': item.progressColor } : null),
     };
-    return (_jsx("div", { className: 'oui-toast-viewport 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: _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: () => {
+        }, 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) => {
+            }, 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) => {
+                                    }, 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] }) }));
+                    } })) : 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/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,SAAS,EAEjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAqBtF,MAAM,MAAM,YAAY,GAAG;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,OAAO,sGA0FlB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,SAAS,EAEjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAqBxF,MAAM,MAAM,YAAY,GAAG;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,OAAO,sGAmFlB,CAAC"}

package/dist/components/Tooltip/Tooltip.js

@@ -16,7 +16,7 @@ export const Tooltip = forwardRef(function Tooltip({ content, children, side = '
             setInternalOpen(nextOpen);
         onOpenChange?.(nextOpen);
     };
-    const { triggerRef, contentRef, present, state, style, } = useFloatingLayer({
+    const { triggerRef, contentRef, present, state, style } = useFloatingLayer({
         open: actualOpen,
         presenceDuration: 140,
         side,
@@ -33,14 +33,12 @@ export const Tooltip = forwardRef(function Tooltip({ content, children, side = '
         },
         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: {
+    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: overlayLayerZIndex(overlay.zIndex, 'dropdown', layerIndex),
                     }, children: content }) })) : null] }));

package/dist/components/VisuallyHidden/VisuallyHidden.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAIhE,MAAM,MAAM,mBAAmB,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAAG;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc;aAHd,MAAM;mDAclB,CAAC"}
+{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAIlE,MAAM,MAAM,mBAAmB,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAAG;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc;aAHd,MAAM;mDAclB,CAAC"}

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,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"}
+{"version":3,"file":"CodePreview.d.ts","sourceRoot":"","sources":["../../src/example/CodePreview.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9E,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAmCjD,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,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,2CA4BzD;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,IAAe,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAAE,2CA0ChG;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,OAAO,EACP,OAAO,GACV,EAAE;IACC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB,2CAwBA"}

package/dist/example/CodePreview.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState, } from 'react';
+import { useMemo, useState } from 'react';
 import { LuInfo, LuX } from 'react-icons/lu';
 import { CopyIconButton, Flex, IconButton, Modal, ScrollArea } from '..';
 import { cn } from '../utils/cn';
@@ -23,36 +23,36 @@ function highlightedCode(code) {
             return (_jsx("span", { className: className, children: part }, `${lineIndex}-${partIndex}`));
         });
         return [
-            _jsx("span", { className: 'oui-code-line', children: rendered.length > 0 ? rendered : ' ' }, `line-${lineIndex}`),
+            _jsx("span", { className: "oui-code-line", children: rendered.length > 0 ? rendered : ' ' }, `line-${lineIndex}`),
         ];
     });
 }
 export function CodeInfoButton({ title, code, onOpen, }) {
-    return (_jsx(IconButton, { className: 'oui-code-info-button', size: 1, v: 'pad', tone: 'info', icon: _jsx(LuInfo, { size: 14 }), "aria-label": `Show ${title} code`, onClick: () => onOpen({ title, code }) }));
+    return (_jsx(IconButton, { className: "oui-code-info-button", size: 1, v: "pad", tone: "info", icon: _jsx(LuInfo, { size: 14 }), "aria-label": `Show ${title} code`, onClick: () => onOpen({ title, code }) }));
 }
 export function ExampleTileHeader({ title, code, onOpen, }) {
-    return (_jsx(Flex, { className: 'oui-ui-tile-head', a: 's', g: 1, wrap: true, children: _jsx(CodeInfoButton, { title: title, code: code, onOpen: onOpen }) }));
+    return (_jsx(Flex, { className: "oui-ui-tile-head", a: "s", g: 1, wrap: true, children: _jsx(CodeInfoButton, { title: title, code: code, onOpen: onOpen }) }));
 }
 export function ExampleTile({ id, title, code, onOpen, className, children, }) {
-    return (_jsxs("div", { id: id, className: cn('oui-section oui-ui-tile', className), children: [_jsxs("div", { className: 'oui-ui-tile-body', children: [_jsx(ExampleTileHeader, { title: title, code: code, onOpen: onOpen }), children] }), _jsx(InlineCodeBlock, { code: code })] }));
+    return (_jsxs("div", { id: id, className: cn('oui-section oui-ui-tile', className), children: [_jsxs("div", { className: "oui-ui-tile-body", children: [_jsx(ExampleTileHeader, { title: title, code: code, onOpen: onOpen }), children] }), _jsx(InlineCodeBlock, { code: code })] }));
 }
 export function InlineCodeBlock({ code }) {
     const [expanded, setExpanded] = useState(false);
     const 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] }));
+    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 }) }));
+    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 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 })] }));
+    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) => {
             if (!open)
                 onClose();
-        }, 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 })] }));
+        }, 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

@@ -5,6 +5,6 @@ type ActionsSectionProps = {
     onOpenCode: (example: CodeExample) => void;
     onOpenPalette: () => void;
 };
-export declare function ActionsSection({ menuItems, onOpenCode, onOpenPalette, }: ActionsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ActionsSection({ menuItems, onOpenCode, onOpenPalette }: ActionsSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ExampleActionsSection.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"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,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,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,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,mBAAmB,2CA6V3F"}

package/dist/example/ExampleActionsSection.js

@@ -5,6 +5,6 @@ import { Button, ContextMenu, CopyButton, CopyIconButton, Flex, IconButton, Icon
 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" })] }), _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." })] }) }) }) })] }));
+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" })] }), _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":"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"}
+{"version":3,"file":"ExampleApplicationSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleApplicationSection.tsx"],"names":[],"mappings":"AAgDA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,KAAK,mBAAmB,GAAG;IACvB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAIF,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,EAAE,mBAAmB,2CA4RrE"}

package/dist/example/ExampleApplicationSection.js

@@ -18,49 +18,97 @@ export function ApplicationSection({ onOpenCode }) {
         {
             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: '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',
+            key: 'inventory',
             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' },
+                {
+                    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: () => {
+    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: [
+                                                }, 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: '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 },
+                                        {
+                                            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" })] }) })] })] })] }));
+                            ], 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, {})] }) }));
+    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" })] }));
+    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');
@@ -78,11 +126,11 @@ function DemoHeaderActions() {
             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' })] }));
+    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" })] }));
+    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)))] }));
+    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.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,WAAW,CAAC,EAAC,UAAU,EAAC,EAAE,mBAAmB,2CAwE5D;AAED,wBAAgB,aAAa,CAAC,EAAC,UAAU,EAAC,EAAE,mBAAmB,2CAoW9D"}
+{"version":3,"file":"ExampleBasicsSections.d.ts","sourceRoot":"","sources":["../../src/example/ExampleBasicsSections.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,KAAK,mBAAmB,GAAG;IACvB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,EAAE,mBAAmB,2CA8E9D;AAED,wBAAgB,aAAa,CAAC,EAAE,UAAU,EAAE,EAAE,mBAAmB,2CAgXhE"}