@orcestr/ui 0.0.3 → 0.1.1

package/dist/components/Card/Card.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import { splitSystemProps } from '../../theme/systemProps';
+import { cn } from '../../utils/cn';
+import { renderSlot } from '../../utils/slot';
+export const Card = forwardRef(function Card({ as, className, style, size = 2, v = 'ghost', interactive = false, asChild = false, testId, children, ...props }, ref) {
+    const Component = as ?? 'div';
+    const { systemStyle, restProps } = splitSystemProps(props);
+    const commonProps = {
+        className: cn('oui-card', className),
+        'data-size': size,
+        'data-variant': v,
+        'data-interactive': interactive ? 'true' : undefined,
+        'data-testid': testId,
+        style: { ...systemStyle, ...style },
+        ...restProps,
+    };
+    if (asChild) {
+        return renderSlot(children, {
+            ...commonProps,
+            ref: ref,
+        });
+    }
+    return (_jsx(Component, { ref: ref, ...commonProps, children: children }));
+});

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,10 +1,14 @@
 import { type InputHTMLAttributes, type ReactNode } from 'react';
-export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked'> & {
     label?: ReactNode;
+    checked?: boolean | 'indeterminate';
+    onCheckedChange?: (checked: boolean) => void;
     testId?: string;
 };
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "checked"> & {
     label?: ReactNode;
+    checked?: boolean | "indeterminate";
+    onCheckedChange?: (checked: boolean) => void;
     testId?: string;
 } & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG;IAC9E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,QAAQ;YAJT,SAAS;aACR,MAAM;oDA+ClB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,GAAG;IAC1F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,QAAQ;YANT,SAAS;cACP,OAAO,GAAG,eAAe;sBACjB,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;aACnC,MAAM;oDA2DlB,CAAC"}

package/dist/components/Checkbox/Checkbox.js

@@ -1,15 +1,24 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, } from 'react';
-import { LuCheck } from 'react-icons/lu';
+import { forwardRef, useEffect, useRef, useState, } from 'react';
+import { LuCheck, LuMinus } from 'react-icons/lu';
 import { cn } from '../../utils/cn';
-export const Checkbox = forwardRef(function Checkbox({ className, label, children, checked, defaultChecked, disabled, onChange, testId, ...props }, ref) {
+import { composeRefs } from '../../utils/composeRefs';
+export const Checkbox = forwardRef(function Checkbox({ className, label, children, checked, defaultChecked, disabled, onChange, onCheckedChange, testId, dangerouslySetInnerHTML: _dangerouslySetInnerHTML, ...props }, ref) {
+    const inputRef = useRef(null);
     const [internalChecked, setInternalChecked] = useState(Boolean(defaultChecked));
     const actualChecked = checked ?? internalChecked;
+    const inputChecked = actualChecked === 'indeterminate' ? false : actualChecked;
     const handleChange = (event) => {
         if (checked === undefined)
             setInternalChecked(event.target.checked);
         onChange?.(event);
+        onCheckedChange?.(event.target.checked);
     };
-    return (_jsxs("label", { className: cn('oui-checkbox', className), "data-checked": actualChecked ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, "data-testid": testId, children: [_jsx("input", { ref: ref, type: 'checkbox', checked: actualChecked, disabled: disabled, onChange: handleChange, ...props }), _jsx("span", { className: 'oui-checkbox-box', children: _jsx(LuCheck, { size: 13 }) }), label || children ? _jsx("span", { children: label ?? children }) : null] }));
+    useEffect(() => {
+        if (!inputRef.current)
+            return;
+        inputRef.current.indeterminate = actualChecked === 'indeterminate';
+    }, [actualChecked]);
+    return (_jsxs("label", { className: cn('oui-checkbox', className), "data-checked": actualChecked === true ? 'true' : undefined, "data-indeterminate": actualChecked === 'indeterminate' ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, "data-testid": testId, children: [_jsx("input", { ref: composeRefs(inputRef, ref), type: 'checkbox', checked: inputChecked, disabled: disabled, onChange: handleChange, ...props }), _jsxs("span", { className: 'oui-checkbox-box', children: [_jsx(LuCheck, { className: 'oui-checkbox-check', size: 13 }), _jsx(LuMinus, { className: 'oui-checkbox-minus', size: 13 })] }), label || children ? _jsx("span", { children: label ?? children }) : null] }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Collapse.d.ts","sourceRoot":"","sources":["../../../src/components/Collapse/Collapse.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKH,KAAK,aAAa,EAClB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,aAAa,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,OAAc,EACd,SAAS,EACT,KAAK,EACL,MAAM,GACT,EAAE,aAAa,2CAyCf"}
+{"version":3,"file":"Collapse.d.ts","sourceRoot":"","sources":["../../../src/components/Collapse/Collapse.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIzD,MAAM,MAAM,aAAa,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,OAAc,EACd,SAAS,EACT,KAAK,EACL,MAAM,GACT,EAAE,aAAa,2CAoBf"}

package/dist/components/Collapse/Collapse.js

@@ -1,33 +1,13 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import {} from 'react';
 import { cn } from '../../utils/cn';
 export function Collapse({ open, children, animate = true, className, style, testId, }) {
-    const contentRef = useRef(null);
-    const [contentHeight, setContentHeight] = useState(null);
-    const measure = useCallback(() => {
-        const element = contentRef.current;
-        if (!element)
-            return;
-        const nextHeight = element.scrollHeight;
-        setContentHeight((current) => (current === nextHeight ? current : nextHeight));
-    }, []);
-    useLayoutEffect(() => {
-        measure();
-    }, [children, measure, open]);
-    useLayoutEffect(() => {
-        const element = contentRef.current;
-        if (!element || typeof ResizeObserver === 'undefined')
-            return;
-        const observer = new ResizeObserver(() => measure());
-        observer.observe(element);
-        return () => observer.disconnect();
-    }, [measure]);
-    return (_jsx("div", { className: cn('oui-collapse', className), "data-state": open ? 'open' : 'closed', "data-testid": testId, style: {
-            height: open ? (contentHeight ?? undefined) : 0,
+    return (_jsx("div", { className: cn('oui-collapse', className), "data-state": open ? 'open' : 'closed', "data-animate": animate ? 'true' : 'false', "data-testid": testId, style: {
+            gridTemplateRows: open ? '1fr' : '0fr',
             transition: animate
-                ? 'height 220ms cubic-bezier(0.22, 1, 0.36, 1)'
+                ? 'grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1)'
                 : 'none',
             ...style,
-        }, children: _jsx("div", { ref: contentRef, className: 'oui-collapse-content', children: children }) }));
+        }, children: _jsx("div", { className: 'oui-collapse-content', children: children }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../src/components/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAIf,OAAO,EAGH,KAAK,iBAAiB,EACzB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB,CAAC;AAQF,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAgB,EAChB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,gBAAqB,EACrB,MAAM,GACT,EAAE;IACC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CA2QA"}
+{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../src/components/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAIf,OAAO,EAGH,KAAK,iBAAiB,EACzB,MAAM,uBAAuB,CAAC;AAQ/B,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB,CAAC;AAQF,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAgB,EAChB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,gBAAqB,EACrB,MAAM,GACT,EAAE;IACC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAuRA"}

package/dist/components/CommandPalette/CommandPalette.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
-import { LuSearch } from 'react-icons/lu';
+import { LuSearch, LuX } from 'react-icons/lu';
 import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
 import { actionItemSearchText, isActionItemDisabled, } from '../Action/ActionTypes';
 import { ActionConfirmModal } from '../Action/ActionConfirmModal';
 import { Collapse } from '../Collapse/Collapse';
 import { Modal } from '../Modal/Modal';
+import { IconButton } from '../IconButton/IconButton';
 import { Spinner } from '../Spinner/Spinner';
 import { TextField } from '../TextField/TextField';
 export function CommandPalette({ open, onOpenChange, items, recentItems = [], onSelect, title, description, placeholder, emptyText, recentTitle, globalOpenEvents = [], testId, }) {
@@ -145,18 +146,18 @@ export function CommandPalette({ open, onOpenChange, items, recentItems = [], on
             setQuery('');
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Modal, { open: open, onOpenChange: (next) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Modal, { open: open, onOpenChange: (next) => {
                     if (next)
                         onOpenChange(true);
                     else
                         close();
-                }, title: actualTitle, description: actualDescription, maxWidth: 520, testId: testId, children: _jsxs("div", { className: 'oui-command-palette', "data-testid": testId ? `${testId}-panel` : undefined, onKeyDown: handleKeyDown, children: [_jsx(TextField, { autoFocus: true, className: 'oui-command-palette-search', leftSlot: _jsx(LuSearch, { size: 16 }), placeholder: actualPlaceholder, value: query, role: 'combobox', "aria-autocomplete": 'list', "aria-controls": listboxId, "aria-expanded": open, "aria-activedescendant": selectedItem
-                                ? commandOptionId(listboxId, actualSelectedIndex)
-                                : undefined, onChange: (event) => setQuery(event.target.value) }), _jsx("div", { ref: optionsRef, id: listboxId, className: 'oui-command-palette-results', role: 'listbox', "aria-label": copy.common.commandPaletteResults, children: _jsx(Collapse, { open: true, className: 'oui-command-palette-collapse', children: groups.length > 0 ? (groups.map((groupData) => (_jsxs("div", { className: 'oui-command-palette-group', children: [_jsx("div", { className: 'oui-command-palette-group-title', "data-recent": groupData.recent ? 'true' : undefined, children: groupData.group }), _jsx("div", { className: 'oui-command-palette-items', children: groupData.items.map((item) => {
-                                                const index = options.indexOf(item);
-                                                const selected = index === actualSelectedIndex;
-                                                return (_jsxs("button", { id: commandOptionId(listboxId, index), type: 'button', role: 'option', "aria-selected": selected, className: 'oui-command-palette-item', "data-selected": selected ? 'true' : undefined, "data-loading": item.loading ? 'true' : undefined, "data-tone": item.tone, "data-oui-command-index": index, "aria-busy": item.loading ? 'true' : undefined, disabled: isActionItemDisabled(item), onMouseEnter: () => setSelectedIndex(index), onClick: () => selectItem(item), children: [item.icon || item.loading ? (_jsx("span", { className: 'oui-command-palette-item-icon', children: item.loading ? _jsx(Spinner, { size: 1 }) : item.icon })) : null, _jsxs("span", { className: 'oui-command-palette-item-main', children: [_jsx("span", { className: 'oui-command-palette-item-label', children: item.label }), item.description ? (_jsx("span", { className: 'oui-command-palette-item-description', children: item.description })) : null] }), item.shortcut ? (_jsx("span", { className: 'oui-command-palette-shortcut', children: item.shortcut })) : null] }, `${groupData.group}-${item.key}`));
-                                            }) })] }, groupData.group)))) : (_jsx("div", { className: 'oui-command-palette-empty', children: actualEmptyText })) }) })] }) }), _jsx(ActionConfirmModal, { item: confirmItem, open: confirmItem !== null, onCancel: () => setConfirmItem(null), onConfirm: () => {
+                }, maxWidth: 520, testId: testId, children: [_jsxs(Modal.Header, { children: [_jsxs("div", { className: 'oui-modal-title-wrap', children: [_jsx("h2", { className: 'oui-modal-title', children: actualTitle }), _jsx("p", { className: 'oui-modal-description', children: actualDescription })] }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuX, { size: 18 }), "aria-label": copy.common.close, onClick: close })] }), _jsx(Modal.Body, { children: _jsxs("div", { className: 'oui-command-palette', "data-testid": testId ? `${testId}-panel` : undefined, onKeyDown: handleKeyDown, children: [_jsx(TextField, { autoFocus: true, className: 'oui-command-palette-search', leftSlot: _jsx(LuSearch, { size: 16 }), placeholder: actualPlaceholder, value: query, role: 'combobox', "aria-autocomplete": 'list', "aria-controls": listboxId, "aria-expanded": open, "aria-activedescendant": selectedItem
+                                        ? commandOptionId(listboxId, actualSelectedIndex)
+                                        : undefined, onChange: (event) => setQuery(event.target.value) }), _jsx("div", { ref: optionsRef, id: listboxId, className: 'oui-command-palette-results', role: 'listbox', "aria-label": copy.common.commandPaletteResults, children: _jsx(Collapse, { open: true, className: 'oui-command-palette-collapse', children: groups.length > 0 ? (groups.map((groupData) => (_jsxs("div", { className: 'oui-command-palette-group', children: [_jsx("div", { className: 'oui-command-palette-group-title', "data-recent": groupData.recent ? 'true' : undefined, children: groupData.group }), _jsx("div", { className: 'oui-command-palette-items', children: groupData.items.map((item) => {
+                                                        const index = options.indexOf(item);
+                                                        const selected = index === actualSelectedIndex;
+                                                        return (_jsxs("button", { id: commandOptionId(listboxId, index), type: 'button', role: 'option', "aria-selected": selected, className: 'oui-command-palette-item', "data-selected": selected ? 'true' : undefined, "data-loading": item.loading ? 'true' : undefined, "data-tone": item.tone, "data-oui-command-index": index, "aria-busy": item.loading ? 'true' : undefined, disabled: isActionItemDisabled(item), onMouseEnter: () => setSelectedIndex(index), onClick: () => selectItem(item), children: [item.icon || item.loading ? (_jsx("span", { className: 'oui-command-palette-item-icon', children: item.loading ? _jsx(Spinner, { size: 1 }) : item.icon })) : null, _jsxs("span", { className: 'oui-command-palette-item-main', children: [_jsx("span", { className: 'oui-command-palette-item-label', children: item.label }), item.description ? (_jsx("span", { className: 'oui-command-palette-item-description', children: item.description })) : null] }), item.shortcut ? (_jsx("span", { className: 'oui-command-palette-shortcut', children: item.shortcut })) : null] }, `${groupData.group}-${item.key}`));
+                                                    }) })] }, groupData.group)))) : (_jsx("div", { className: 'oui-command-palette-empty', children: actualEmptyText })) }) })] }) })] }), _jsx(ActionConfirmModal, { item: confirmItem, open: confirmItem !== null, onCancel: () => setConfirmItem(null), onConfirm: () => {
                     confirmItem?.onSelect?.();
                     if (confirmItem)
                         onSelect(confirmItem.key);

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrC,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,yBAAyB,CAAC;AAElD,OAAO,EAAQ,KAAK,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAGtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACnC,IAAI,EACJ,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CACxD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,IAAgB,EAChB,OAAe,EACf,eAAuB,EACvB,cAAsB,EACtB,mBAAmB,EACnB,QAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,GACX,EAAE,kBAAkB,2CAyDpB"}
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,yBAAyB,CAAC;AAIlD,OAAO,EAAQ,KAAK,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAGtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACnC,IAAI,EACJ,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CACxD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,IAAgB,EAChB,OAAe,EACf,eAAuB,EACvB,cAAsB,EACtB,mBAAmB,EACnB,QAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,GACX,EAAE,kBAAkB,2CA0EpB"}

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -1,7 +1,10 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LuX } from 'react-icons/lu';
 import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
 import { Button } from '../Button/Button';
+import { Flex } from '../Flex/Flex';
+import { IconButton } from '../IconButton/IconButton';
 import { Modal } from '../Modal/Modal';
 import { Text } from '../Text/Text';
 export function ConfirmDialog({ open, onOpenChange, title, description, message, children, confirmLabel, cancelLabel, tone = 'neutral', loading = false, confirmDisabled = false, cancelDisabled = false, closeOnOverlayClick, maxWidth = 420, testId, onConfirm, onCancel, }) {
@@ -21,5 +24,5 @@ export function ConfirmDialog({ open, onOpenChange, title, description, message,
                 return;
             }
             cancel();
-        }, title: title, description: description, maxWidth: maxWidth, closeOnOverlayClick: closeOnOverlayClick ?? canClose, testId: testId, footer: (_jsxs(_Fragment, { children: [_jsx(Button, { v: 'surface', onClick: cancel, disabled: !canClose, testId: testId ? `${testId}-cancel` : undefined, children: actualCancelLabel }), _jsx(Button, { tone: tone, loading: loading, disabled: confirmDisabled, onClick: onConfirm, testId: testId ? `${testId}-confirm` : undefined, children: actualConfirmLabel })] })), children: [message ? (_jsx(Text, { as: 'p', tone: 'muted', lh: 1.5, children: message })) : null, children] }));
+        }, maxWidth: maxWidth, closeOnOverlayClick: closeOnOverlayClick ?? canClose, testId: testId, children: [title || description ? (_jsxs(Modal.Header, { children: [_jsxs("div", { className: 'oui-modal-title-wrap', children: [title ? _jsx("h2", { className: 'oui-modal-title', children: title }) : null, description ? (_jsx("p", { className: 'oui-modal-description', children: description })) : null] }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuX, { size: 18 }), "aria-label": copy.common.close, disabled: !canClose, onClick: cancel })] })) : null, _jsxs(Modal.Body, { children: [message ? (_jsx(Text, { as: 'p', tone: 'muted', lh: 1.5, children: message })) : null, children] }), _jsx(Modal.Footer, { children: _jsxs(Flex, { g: 2, j: 'e', w: '100%', children: [_jsx(Button, { v: 'surface', onClick: cancel, disabled: !canClose, testId: testId ? `${testId}-cancel` : undefined, children: actualCancelLabel }), _jsx(Button, { tone: tone, loading: loading, disabled: confirmDisabled, onClick: onConfirm, testId: testId ? `${testId}-confirm` : undefined, children: actualConfirmLabel })] }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,UAAU,EACf,KAAK,YAAY,EACpB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AAK3C,wBAAgB,WAAW,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,GACT,EAAE;IACC,QAAQ,EAAE,YAAY,CAAC;QAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;KAAC,CAAC,CAAC;IACtE,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CA6EA"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,UAAU,EACf,KAAK,YAAY,EACpB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AAS3C,wBAAgB,WAAW,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,GACT,EAAE;IACC,QAAQ,EAAE,YAAY,CAAC;QAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;KAAC,CAAC,CAAC;IACtE,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAiFA"}

package/dist/components/ContextMenu/ContextMenu.js

@@ -4,7 +4,7 @@ import { cloneElement, useCallback, useEffect, useRef, useState, } from 'react';
 import { cn } from '../../utils/cn';
 import { ActionConfirmModal } from '../Action/ActionConfirmModal';
 import { isActionItemDisabled } from '../Action/ActionTypes';
-import { useOverlayContext, useOverlayLayerIndex } from '../Overlay/OverlayProvider';
+import { overlayLayerZIndex, useOverlayContext, useOverlayLayerIndex, } from '../Overlay/OverlayProvider';
 import { Portal } from '../Portal/Portal';
 import { Spinner } from '../Spinner/Spinner';
 export function ContextMenu({ children, items, className, testId, }) {
@@ -47,7 +47,7 @@ export function ContextMenu({ children, items, className, testId, }) {
     return (_jsxs(_Fragment, { children: [trigger, point ? (_jsx(Portal, { children: _jsx("div", { ref: layerRef, className: cn('oui-popover-content oui-menu oui-action-menu-content oui-context-menu-content', className), "data-state": 'opening', "data-layer": 'dropdown', "data-testid": testId, style: {
                         left: point.x,
                         top: point.y,
-                        zIndex: overlay.zIndex.dropdown + layerIndex * 10,
+                        zIndex: overlayLayerZIndex(overlay.zIndex, 'dropdown', layerIndex),
                     }, onClick: (event) => event.stopPropagation(), children: _jsx(ContextMenuContent, { items: items, close: close, requestConfirmation: setConfirmItem, testId: testId ? `${testId}-list` : undefined }) }) })) : null, _jsx(ActionConfirmModal, { item: confirmItem, open: confirmItem !== null, onCancel: () => setConfirmItem(null), onConfirm: () => {
                     confirmItem?.onSelect?.();
                     setConfirmItem(null);

package/dist/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,24 @@
+import { type ButtonProps } from '../Button/Button';
+import { type IconButtonProps } from '../IconButton/IconButton';
+export type CopyButtonProps = Omit<ButtonProps, 'children' | 'leftIcon' | 'loading' | 'onClick'> & {
+    text: string;
+    label?: string;
+    copiedLabel?: string;
+    successMessage?: string;
+    errorMessage?: string;
+    resetMs?: number;
+    onCopied?: () => void;
+    onCopyError?: (error: unknown) => void;
+};
+export type CopyIconButtonProps = Omit<IconButtonProps, 'children' | 'icon' | 'loading' | 'onClick'> & {
+    text: string;
+    label?: string;
+    successMessage?: string;
+    errorMessage?: string;
+    resetMs?: number;
+    onCopied?: () => void;
+    onCopyError?: (error: unknown) => void;
+};
+export declare function CopyButton({ text, label, copiedLabel, successMessage, errorMessage, resetMs, onCopied, onCopyError, className, disabled, ...props }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CopyIconButton({ text, label, successMessage, errorMessage, resetMs, onCopied, onCopyError, className, disabled, ...props }: CopyIconButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CopyButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../src/components/CopyButton/CopyButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAa,KAAK,eAAe,EAAC,MAAM,0BAA0B,CAAC;AAG1E,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC,GAAG;IAC/F,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC,GAAG;IACnG,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,KAAc,EACd,WAAsB,EACtB,cAAyB,EACzB,YAA4B,EAC5B,OAAc,EACd,QAAQ,EACR,WAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,eAAe,2CAsBjB;AAED,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,KAAc,EACd,cAAyB,EACzB,YAA4B,EAC5B,OAAc,EACd,QAAQ,EACR,WAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,mBAAmB,2CAqBrB"}

package/dist/components/CopyButton/CopyButton.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { LuCheck, LuCopy } from 'react-icons/lu';
+import { cn } from '../../utils/cn';
+import { Button } from '../Button/Button';
+import { IconButton } from '../IconButton/IconButton';
+import { useToast } from '../Toast/Toast';
+export function CopyButton({ text, label = 'Copy', copiedLabel = 'Copied', successMessage = 'Copied', errorMessage = 'Copy failed', resetMs = 1400, onCopied, onCopyError, className, disabled, ...props }) {
+    const { copied, pending, copy } = useCopyAction({
+        text,
+        successMessage,
+        errorMessage,
+        resetMs,
+        onCopied,
+        onCopyError,
+    });
+    return (_jsx(Button, { ...props, className: cn('oui-copy-button', className), disabled: disabled || pending, loading: pending, leftIcon: copied ? _jsx(LuCheck, { size: 15 }) : _jsx(LuCopy, { size: 15 }), onClick: copy, children: copied ? copiedLabel : label }));
+}
+export function CopyIconButton({ text, label = 'Copy', successMessage = 'Copied', errorMessage = 'Copy failed', resetMs = 1400, onCopied, onCopyError, className, disabled, ...props }) {
+    const { copied, pending, copy } = useCopyAction({
+        text,
+        successMessage,
+        errorMessage,
+        resetMs,
+        onCopied,
+        onCopyError,
+    });
+    return (_jsx(IconButton, { ...props, className: cn('oui-copy-icon-button', className), disabled: disabled || pending, loading: pending, icon: copied ? _jsx(LuCheck, { size: 15 }) : _jsx(LuCopy, { size: 15 }), "aria-label": label, onClick: copy }));
+}
+function useCopyAction({ text, successMessage, errorMessage, resetMs, onCopied, onCopyError, }) {
+    const toast = useToast();
+    const timerRef = useRef(null);
+    const [pending, setPending] = useState(false);
+    const [copied, setCopied] = useState(false);
+    useEffect(() => () => {
+        if (timerRef.current !== null)
+            window.clearTimeout(timerRef.current);
+    }, []);
+    async function copy(event) {
+        event.stopPropagation();
+        setPending(true);
+        try {
+            await writeClipboardText(text);
+            setCopied(true);
+            onCopied?.();
+            if (successMessage)
+                toast.success(successMessage);
+            if (timerRef.current !== null)
+                window.clearTimeout(timerRef.current);
+            timerRef.current = window.setTimeout(() => setCopied(false), resetMs);
+        }
+        catch (error) {
+            onCopyError?.(error);
+            if (errorMessage)
+                toast.error(errorMessage);
+        }
+        finally {
+            setPending(false);
+        }
+    }
+    return { copied, pending, copy };
+}
+async function writeClipboardText(text) {
+    if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        return;
+    }
+    const field = document.createElement('textarea');
+    field.value = text;
+    field.setAttribute('readonly', '');
+    field.style.position = 'fixed';
+    field.style.top = '-9999px';
+    field.style.left = '-9999px';
+    document.body.append(field);
+    field.select();
+    const copied = document.execCommand('copy');
+    field.remove();
+    if (!copied)
+        throw new Error('Clipboard copy failed');
+}

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQxD,OAAO,EAQH,KAAK,sBAAsB,EAC9B,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,GAAG,EACH,GAAG,EACH,YAAY,EACZ,WAAW,EACX,SAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,MAAM,EACN,MAAM,GACT,EAAE,eAAe,2CAiIjB"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQzE,OAAO,EAQH,KAAK,sBAAsB,EAC9B,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,GAAG,EACH,GAAG,EACH,YAAY,EACZ,WAAW,EACX,SAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,MAAM,EACN,MAAM,GACT,EAAE,eAAe,2CA2IjB"}

package/dist/components/DatePicker/DatePicker.js

@@ -26,13 +26,21 @@ export function DatePicker({ value, onValueChange, min, max, disabledDate, place
         onValueChange(clampDate(nextValue, min, max));
         setOpen(false);
     };
+    const openCalendar = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (disabled || readOnly)
+            return;
+        setCursorMonth(monthCursorForDate(value));
+        setOpen(true);
+    };
     return (_jsx(Popover, { open: open, onOpenChange: (nextOpen) => {
             if (readOnly && nextOpen)
                 return;
             if (nextOpen)
                 setCursorMonth(monthCursorForDate(value));
             setOpen(nextOpen);
-        }, disabled: disabled || readOnly, matchTriggerWidth: false, sideOffset: 6, testId: testId ? `${testId}-popover` : undefined, trigger: _jsx(TextField, { value: displayValue, placeholder: placeholder, readOnly: true, disabled: disabled, clearable: clearable && Boolean(value) && !readOnly, testId: testId, "aria-label": openCalendarLabel ?? copy.common.openCalendar, onClear: () => onValueChange(''), rightSlot: _jsx("span", { className: 'oui-date-picker-trigger', "aria-hidden": true, children: _jsx(LuCalendarDays, { size: 16 }) }) }), className: 'oui-date-picker-popover', children: _jsxs("div", { className: 'oui-date-picker-panel', children: [_jsxs("div", { className: 'oui-date-picker-head', children: [_jsx(IconButton, { size: 1, v: 'ghost', type: 'button', icon: _jsx(LuChevronLeft, { size: 16 }), "aria-label": previousMonthLabel ?? copy.common.previous, onClick: () => setCursorMonth((current) => shiftMonth(current, -1)) }), _jsx("strong", { children: formatMonthLabel(cursorMonth, actualLocale) }), _jsx(IconButton, { size: 1, v: 'ghost', type: 'button', icon: _jsx(LuChevronRight, { size: 16 }), "aria-label": nextMonthLabel ?? copy.common.next, onClick: () => setCursorMonth((current) => shiftMonth(current, 1)) })] }), _jsx("div", { className: 'oui-date-picker-weekdays', children: weekdays.map((weekday) => (_jsx("span", { children: weekday }, weekday))) }), _jsx("div", { className: 'oui-date-picker-grid', children: monthState.weeks.flatMap((week) => week.map((day) => (_jsx("button", { type: 'button', className: 'oui-date-picker-day', "data-outside": day.outsideMonth ? 'true' : undefined, "data-selected": day.selected ? 'true' : undefined, "data-today": day.today ? 'true' : undefined, disabled: day.disabled, "aria-pressed": day.selected, onClick: () => selectDate(day.date), children: day.day }, day.date)))) }), _jsxs("div", { className: 'oui-date-picker-foot', children: [_jsx(Button, { size: 1, v: 'ghost', type: 'button', onClick: () => selectDate(clampDate(new Date().toISOString().slice(0, 10), min, max)), children: todayLabel ?? copy.dates.today }), clearable ? (_jsx(Button, { size: 1, v: 'ghost', type: 'button', disabled: !value, onClick: () => {
+        }, disabled: disabled || readOnly, matchTriggerWidth: false, sideOffset: 6, testId: testId ? `${testId}-popover` : undefined, trigger: _jsx(TextField, { value: displayValue, placeholder: placeholder, readOnly: true, disabled: disabled, clearable: clearable && Boolean(value) && !readOnly, testId: testId, "aria-label": openCalendarLabel ?? copy.common.openCalendar, onClear: () => onValueChange(''), rightSlot: _jsx("button", { type: 'button', className: 'oui-date-picker-trigger', "aria-label": openCalendarLabel ?? copy.common.openCalendar, disabled: disabled || readOnly, onClick: openCalendar, children: _jsx(LuCalendarDays, { size: 16 }) }) }), className: 'oui-date-picker-popover', children: _jsxs("div", { className: 'oui-date-picker-panel', children: [_jsxs("div", { className: 'oui-date-picker-head', children: [_jsx(IconButton, { size: 1, v: 'ghost', type: 'button', icon: _jsx(LuChevronLeft, { size: 16 }), "aria-label": previousMonthLabel ?? copy.common.previous, onClick: () => setCursorMonth((current) => shiftMonth(current, -1)) }), _jsx("strong", { children: formatMonthLabel(cursorMonth, actualLocale) }), _jsx(IconButton, { size: 1, v: 'ghost', type: 'button', icon: _jsx(LuChevronRight, { size: 16 }), "aria-label": nextMonthLabel ?? copy.common.next, onClick: () => setCursorMonth((current) => shiftMonth(current, 1)) })] }), _jsx("div", { className: 'oui-date-picker-weekdays', children: weekdays.map((weekday) => (_jsx("span", { children: weekday }, weekday))) }), _jsx("div", { className: 'oui-date-picker-grid', children: monthState.weeks.flatMap((week) => week.map((day) => (_jsx("button", { type: 'button', className: 'oui-date-picker-day', "data-outside": day.outsideMonth ? 'true' : undefined, "data-selected": day.selected ? 'true' : undefined, "data-today": day.today ? 'true' : undefined, disabled: day.disabled, "aria-pressed": day.selected, onClick: () => selectDate(day.date), children: day.day }, day.date)))) }), _jsxs("div", { className: 'oui-date-picker-foot', children: [_jsx(Button, { size: 1, v: 'ghost', type: 'button', onClick: () => selectDate(clampDate(new Date().toISOString().slice(0, 10), min, max)), children: todayLabel ?? copy.dates.today }), clearable ? (_jsx(Button, { size: 1, v: 'ghost', type: 'button', disabled: !value, onClick: () => {
                                 onValueChange('');
                                 setOpen(false);
                             }, children: copy.common.clear })) : null] })] }) }));

package/dist/components/Dialog/Dialog.d.ts

@@ -1,2 +1,70 @@
-export { Modal as Dialog, type ModalProps as DialogProps } from '../Modal/Modal';
+import { type CSSProperties, type KeyboardEventHandler, type ReactNode } from 'react';
+import { type ModalProps } from '../Modal/Modal';
+import { type SystemProps } from '../../theme/systemProps';
+export type DialogProps = ModalProps;
+export declare const Dialog: (({ open, onOpenChange, children, maxWidth, minHeight, overlayColor, overlayOpacity, overlayBlur, borderColor, radius, shadow, animationDuration, animation, overlayClassName, overlayStyle, className, contentClassName, contentStyle, onKeyDown, onOpenAutoFocus, closeOnOverlayClick, ariaLabel, ariaLabelledBy, ariaDescribedBy, testId, }: ModalProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    Header: ({ children, className, style }: {
+        children: ReactNode;
+        className?: string;
+        style?: CSSProperties;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, className, style }: {
+        children: ReactNode;
+        className?: string;
+        style?: CSSProperties;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className, style }: {
+        children: ReactNode;
+        className?: string;
+        style?: CSSProperties;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Close: ({ onClick, ...props }: import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+        asChild?: false;
+    }) => import("react/jsx-runtime").JSX.Element;
+} & {
+    Root: typeof DialogRoot;
+    Content: typeof DialogContent;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Close: typeof DialogClose;
+};
+type DialogRootProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+};
+declare function DialogRoot({ open, onOpenChange, children }: DialogRootProps): import("react/jsx-runtime").JSX.Element;
+type DialogContentProps = Omit<ModalProps, 'open' | 'onOpenChange' | 'children' | 'ariaLabelledBy' | 'ariaDescribedBy'> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    onOpenAutoFocus?: (event: {
+        preventDefault: () => void;
+    }) => void;
+    onEscapeKeyDown?: (event: {
+        preventDefault: () => void;
+    }) => void;
+};
+declare function DialogContent({ children, className, style, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element | null;
+type DialogTitleProps = {
+    children: ReactNode;
+} & SystemProps & {
+    className?: string;
+    style?: CSSProperties;
+};
+declare function DialogTitle({ children, className, style, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+type DialogDescriptionProps = {
+    children: ReactNode;
+    size?: number | string;
+} & SystemProps & {
+    className?: string;
+    style?: CSSProperties;
+};
+declare function DialogDescription({ children, className, style, size: _size, ...props }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+type DialogCloseProps = {
+    children: ReactNode;
+};
+declare function DialogClose({ children }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=Dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,IAAI,MAAM,EAAE,KAAK,UAAU,IAAI,WAAW,EAAC,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAQ,KAAK,UAAU,EAAC,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC;AAErC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CAMjB,CAAC;AAWH,KAAK,eAAe,GAAG;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAAC,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAC,EAAE,eAAe,2CAMlE;AAED,KAAK,kBAAkB,GAAG,IAAI,CAC1B,UAAU,EACV,MAAM,GAAG,cAAc,GAAG,UAAU,GAAG,gBAAgB,GAAG,iBAAiB,CAC9E,GAAG;IACA,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACjD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,cAAc,EAAE,MAAM,IAAI,CAAA;KAAC,KAAK,IAAI,CAAC;IAChE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,cAAc,EAAE,MAAM,IAAI,CAAA;KAAC,KAAK,IAAI,CAAC;CACnE,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAC,EAAE,kBAAkB,kDA2BhF;AAED,KAAK,gBAAgB,GAAG;IACpB,QAAQ,EAAE,SAAS,CAAC;CACvB,GAAG,WAAW,GAAG;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAC,EAAE,gBAAgB,2CAa5E;AAED,KAAK,sBAAsB,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,GAAG,WAAW,GAAG;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,iBAAS,iBAAiB,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EAAE,KAAK,EACX,GAAG,KAAK,EACX,EAAE,sBAAsB,2CAaxB;AAED,KAAK,gBAAgB,GAAG;IACpB,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAC,EAAE,gBAAgB,2CAehD"}

package/dist/components/Dialog/Dialog.js

@@ -1 +1,48 @@
-export { Modal as Dialog } from '../Modal/Modal';
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId, } from 'react';
+import { Modal } from '../Modal/Modal';
+import { splitSystemProps } from '../../theme/systemProps';
+import { cn } from '../../utils/cn';
+export const Dialog = Object.assign(Modal, {
+    Root: DialogRoot,
+    Content: DialogContent,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    Close: DialogClose,
+});
+const DialogContext = createContext(null);
+function DialogRoot({ open, onOpenChange, children }) {
+    return (_jsx(DialogContext.Provider, { value: { open, onOpenChange }, children: children }));
+}
+function DialogContent({ children, className, style, ...props }) {
+    const context = useContext(DialogContext);
+    const titleId = useId();
+    const descriptionId = useId();
+    if (!context)
+        return null;
+    return (_jsx(DialogContext.Provider, { value: {
+            ...context,
+            titleId,
+            descriptionId,
+        }, children: _jsx(Modal, { ...props, open: context.open, onOpenChange: context.onOpenChange, ariaLabelledBy: titleId, ariaDescribedBy: descriptionId, contentClassName: className, contentStyle: style, children: children }) }));
+}
+function DialogTitle({ children, className, style, ...props }) {
+    const context = useContext(DialogContext);
+    const { systemStyle, restProps } = splitSystemProps(props);
+    return (_jsx("h2", { id: context?.titleId, className: cn('oui-modal-title', className), style: { ...systemStyle, ...style }, ...restProps, children: children }));
+}
+function DialogDescription({ children, className, style, size: _size, ...props }) {
+    const context = useContext(DialogContext);
+    const { systemStyle, restProps } = splitSystemProps(props);
+    return (_jsx("p", { id: context?.descriptionId, className: cn('oui-modal-description', className), style: { ...systemStyle, ...style }, ...restProps, children: children }));
+}
+function DialogClose({ children }) {
+    const context = useContext(DialogContext);
+    return (_jsx("span", { onClick: () => context?.onOpenChange(false), onKeyDown: (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                context?.onOpenChange(false);
+            }
+        }, children: children }));
+}

package/dist/components/Drawer/Drawer.d.ts

@@ -21,10 +21,11 @@ export type DrawerProps = {
     panelClassName?: string;
     bodyClassName?: string;
     backdropClassName?: string;
+    portalContainer?: HTMLElement | null;
     style?: CSSProperties;
     panelStyle?: CSSProperties;
     backdropStyle?: CSSProperties;
     testId?: string;
 };
-export declare function Drawer({ open, defaultOpen, onOpenChange, side, size, title, description, children, footer, modal, trapFocus, lockScroll, closeOnBackdropClick, closeOnEscape, showBackdrop, showCloseButton, className, panelClassName, bodyClassName, backdropClassName, style, panelStyle, backdropStyle, testId, }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Drawer({ open, defaultOpen, onOpenChange, side, size, title, description, children, footer, modal, trapFocus, lockScroll, closeOnBackdropClick, closeOnEscape, showBackdrop, showCloseButton, className, panelClassName, bodyClassName, backdropClassName, portalContainer, style, panelStyle, backdropStyle, testId, }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=Drawer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,aAAa,EAClB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAiBf,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACnB,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,IAAc,EACd,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,KAAY,EACZ,SAAiB,EACjB,UAAkB,EAClB,oBAA2B,EAC3B,aAAoB,EACpB,YAAoB,EACpB,eAAsB,EACtB,SAAS,EACT,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,KAAK,EACL,UAAU,EACV,aAAa,EACb,MAAM,GACT,EAAE,WAAW,kDAqHb"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,aAAa,EAClB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAkBf,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACnB,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,IAAc,EACd,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,KAAY,EACZ,SAAiB,EACjB,UAAkB,EAClB,oBAA2B,EAC3B,aAAoB,EACpB,YAAoB,EACpB,eAAsB,EACtB,SAAS,EACT,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,KAAK,EACL,UAAU,EACV,aAAa,EACb,MAAM,GACT,EAAE,WAAW,kDAqHb"}

package/dist/components/Drawer/Drawer.js

@@ -9,9 +9,9 @@ import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
 import { OrcestrThemeContext } from '../../theme/useTheme';
 import { cn } from '../../utils/cn';
 import { IconButton } from '../IconButton/IconButton';
-import { lockOverlayScroll, useOverlayContext, useOverlayLayerIndex, } from '../Overlay/OverlayProvider';
+import { lockOverlayScroll, overlayLayerZIndex, useOverlayContext, useOverlayLayerIndex, } from '../Overlay/OverlayProvider';
 import { Portal } from '../Portal/Portal';
-export function Drawer({ open, defaultOpen, onOpenChange, side = 'right', size, title, description, children, footer, modal = true, trapFocus = modal, lockScroll = modal, closeOnBackdropClick = true, closeOnEscape = true, showBackdrop = modal, showCloseButton = true, className, panelClassName, bodyClassName, backdropClassName, style, panelStyle, backdropStyle, testId, }) {
+export function Drawer({ open, defaultOpen, onOpenChange, side = 'right', size, title, description, children, footer, modal = true, trapFocus = modal, lockScroll = modal, closeOnBackdropClick = true, closeOnEscape = true, showBackdrop = modal, showCloseButton = true, className, panelClassName, bodyClassName, backdropClassName, portalContainer, style, panelStyle, backdropStyle, testId, }) {
     const { copy } = useOrcestrUiLocale();
     const themeContext = useContext(OrcestrThemeContext);
     const overlay = useOverlayContext();
@@ -22,7 +22,7 @@ export function Drawer({ open, defaultOpen, onOpenChange, side = 'right', size,
     const ease = themeContext?.theme.motion.ease ?? 'cubic-bezier(0.22, 1, 0.36, 1)';
     const { present, state } = usePresence(isOpen, durationMs);
     const layerIndex = useOverlayLayerIndex(present);
-    const zIndex = overlay.zIndex.modal + layerIndex * 20;
+    const zIndex = overlayLayerZIndex(overlay.zIndex, 'modal', layerIndex);
     const panelRef = useRef(null);
     const titleId = useId();
     const descriptionId = useId();
@@ -54,7 +54,7 @@ export function Drawer({ open, defaultOpen, onOpenChange, side = 'right', size,
     }, [lockScroll, present]);
     if (!present)
         return null;
-    return (_jsx(Portal, { children: _jsxs("div", { className: cn('oui-drawer-layer', className), "data-state": state, "data-side": side, "data-modal": modal ? 'true' : undefined, "data-testid": testId, style: drawerStyle, children: [showBackdrop ? (_jsx("button", { type: 'button', "aria-label": copy.common.close, className: cn('oui-drawer-backdrop', backdropClassName), "data-state": state, "data-testid": testId ? `${testId}-backdrop` : undefined, style: backdropStyle, onClick: () => {
+    return (_jsx(Portal, { container: portalContainer, children: _jsxs("div", { className: cn('oui-drawer-layer', className), "data-state": state, "data-side": side, "data-modal": modal ? 'true' : undefined, "data-testid": testId, style: drawerStyle, children: [showBackdrop ? (_jsx("button", { type: 'button', "aria-label": copy.common.close, className: cn('oui-drawer-backdrop', backdropClassName), "data-state": state, "data-testid": testId ? `${testId}-backdrop` : undefined, style: backdropStyle, onClick: () => {
                         if (closeOnBackdropClick)
                             setOpen(false);
                     } })) : null, _jsxs("div", { ref: panelRef, role: modal ? 'dialog' : 'complementary', "aria-modal": modal ? 'true' : undefined, "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, className: cn('oui-drawer-panel', panelClassName), "data-state": state, "data-side": side, "data-testid": testId ? `${testId}-panel` : undefined, style: panelStyle, children: [title || description || showCloseButton ? (_jsxs("div", { className: 'oui-drawer-header', children: [_jsxs("div", { className: 'oui-drawer-title-wrap', children: [title ? (_jsx("h2", { id: titleId, className: 'oui-drawer-title', children: title })) : null, description ? (_jsx("p", { id: descriptionId, className: 'oui-drawer-description', children: description })) : null] }), showCloseButton ? (_jsx(IconButton, { v: 'ghost', icon: _jsx(LuX, { size: 18 }), "aria-label": copy.common.close, onClick: () => setOpen(false) })) : null] })) : null, _jsx("div", { className: cn('oui-drawer-body', bodyClassName), children: children }), footer ? _jsx("div", { className: 'oui-drawer-footer', children: footer }) : null] })] }) }));

package/dist/components/EntityPicker/EntityPicker.d.ts

@@ -27,6 +27,7 @@ export type EntityPickerProps<T> = {
     disabled?: boolean;
     clearable?: boolean;
     showChevron?: boolean;
+    trigger?: ReactNode;
     size?: UiSize;
     maxHeight?: number;
     closeOnSelect?: boolean;
@@ -37,5 +38,5 @@ export type EntityPickerProps<T> = {
     debounceMs?: number;
     testId?: string;
 };
-export declare function EntityPicker<T>({ loadPage, getEntityId, renderEntity, renderValue, value, onValueChange, placeholder, emptyText, loadingText, errorText, retryLabel, disabled, clearable, showChevron, size, maxHeight, closeOnSelect, isEntitySelected, createAction, optionAction, resetKey, debounceMs, testId, }: EntityPickerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function EntityPicker<T>({ loadPage, getEntityId, renderEntity, renderValue, value, onValueChange, placeholder, emptyText, loadingText, errorText, retryLabel, disabled, clearable, showChevron, trigger, size, maxHeight, closeOnSelect, isEntitySelected, createAction, optionAction, resetKey, debounceMs, testId, }: EntityPickerProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EntityPicker.d.ts.map