@orcestr/ui 0.0.3 → 0.1.1

package/dist/components/Modal/Modal.js

@@ -1,23 +1,18 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useId, useLayoutEffect, useRef, } from 'react';
-import { LuX } from 'react-icons/lu';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, } from 'react';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { usePresence } from '../../hooks/usePresence';
-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 Modal({ open, onOpenChange, title, description, children, footer, maxWidth, minHeight, overlayColor, overlayOpacity, overlayBlur, borderColor, radius, shadow, animationDuration, animation, overlayClassName, overlayStyle, className, contentClassName, bodyClassName, closeOnOverlayClick = true, testId, }) {
-    const { copy } = useOrcestrUiLocale();
+const ModalContext = createContext(null);
+function ModalRoot({ open, onOpenChange, children, maxWidth, minHeight, overlayColor, overlayOpacity, overlayBlur, borderColor, radius, shadow, animationDuration, animation, overlayClassName, overlayStyle, className, contentClassName, contentStyle, onKeyDown, onOpenAutoFocus, closeOnOverlayClick = true, ariaLabel, ariaLabelledBy, ariaDescribedBy, testId, }) {
     const themeContext = useContext(OrcestrThemeContext);
     const overlayContext = useOverlayContext();
     const layerRef = useRef(null);
     const contentRef = useRef(null);
-    const titleId = useId();
-    const descriptionId = useId();
     const actualAnimationDuration = animationDuration ?? themeContext?.theme.motion.modalDuration ?? '380ms';
     const actualAnimation = animation ?? themeContext?.theme.motion.modalAnimation ?? 'zoom-blur';
     const actualMaxWidth = maxWidth ?? themeContext?.theme.components.modalMaxWidth ?? 680;
@@ -28,7 +23,7 @@ export function Modal({ open, onOpenChange, title, description, children, footer
     const actualAnimationEase = themeContext?.theme.motion.ease ?? 'cubic-bezier(0.22, 1, 0.36, 1)';
     const { present, state } = usePresence(open, actualAnimationMs);
     const layerIndex = useOverlayLayerIndex(present);
-    const zIndex = overlayContext.zIndex.modal + layerIndex * 20;
+    const zIndex = overlayLayerZIndex(overlayContext.zIndex, 'modal', layerIndex);
     const overlayBlurValue = cssLength(actualOverlayBlur) ?? '10px';
     const overlayBackdropFilter = `blur(${overlayBlurValue})`;
     const overlayBackground = modalOverlayBackground(actualOverlayColor, actualOverlayOpacity);
@@ -38,6 +33,11 @@ export function Modal({ open, onOpenChange, title, description, children, footer
             return;
         return lockOverlayScroll();
     }, [open]);
+    useEffect(() => {
+        if (!open || !onOpenAutoFocus)
+            return;
+        onOpenAutoFocus({ preventDefault: () => undefined });
+    }, [onOpenAutoFocus, open]);
     useLayoutEffect(() => {
         const layer = layerRef.current;
         if (!present || !layer || !layer.animate)
@@ -89,7 +89,7 @@ export function Modal({ open, onOpenChange, title, description, children, footer
                     if (closeOnOverlayClick)
                         onOpenChange(false);
                 }
-            }, children: _jsxs("div", { ref: contentRef, role: 'dialog', "aria-modal": 'true', "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, className: cn('oui-modal-content', contentClassName), "data-state": state, "data-animation": actualAnimation, "data-testid": testId ? `${testId}-content` : undefined, style: {
+            }, children: _jsx("div", { ref: contentRef, role: 'dialog', "aria-modal": 'true', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className: cn('oui-modal-content', contentClassName), "data-state": state, "data-animation": actualAnimation, "data-testid": testId ? `${testId}-content` : undefined, style: {
                     width: typeof actualMaxWidth === 'number'
                         ? `min(calc(100vw - 24px), ${actualMaxWidth}px)`
                         : `min(calc(100vw - 24px), ${actualMaxWidth})`,
@@ -99,7 +99,8 @@ export function Modal({ open, onOpenChange, title, description, children, footer
                     '--oui-modal-border-color': borderColor,
                     '--oui-modal-radius': cssLength(radius),
                     '--oui-modal-shadow': shadow,
-                }, children: [_jsxs("div", { className: 'oui-modal-header', children: [_jsxs("div", { className: 'oui-modal-title-wrap', children: [title ? (_jsx("h2", { id: titleId, className: 'oui-modal-title', children: title })) : null, description ? (_jsx("p", { id: descriptionId, className: 'oui-modal-description', children: description })) : null] }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuX, { size: 18 }), "aria-label": copy.common.close, onClick: () => onOpenChange(false) })] }), _jsx("div", { className: cn('oui-modal-body', bodyClassName), children: children }), footer ? _jsx("div", { className: 'oui-modal-footer', children: footer }) : null] }) }) }));
+                    ...contentStyle,
+                }, onKeyDown: onKeyDown, children: _jsx(ModalContext.Provider, { value: { onOpenChange }, children: children }) }) }) }));
 }
 function cssLength(value) {
     if (value === undefined)
@@ -153,3 +154,26 @@ function hexToRgb(value) {
     }
     return null;
 }
+function ModalHeader({ children, className, style }) {
+    return (_jsx("div", { className: cn('oui-modal-header', className), style: style, children: children }));
+}
+function ModalBody({ children, className, style }) {
+    return (_jsx("div", { className: cn('oui-modal-body', className), style: style, children: children }));
+}
+function ModalFooter({ children, className, style }) {
+    return (_jsx("div", { className: cn('oui-modal-footer', className), style: style, children: children }));
+}
+function ModalClose({ onClick, ...props }) {
+    const context = useContext(ModalContext);
+    return (_jsx("button", { type: 'button', ...props, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                context?.onOpenChange(false);
+        } }));
+}
+export const Modal = Object.assign(ModalRoot, {
+    Header: ModalHeader,
+    Body: ModalBody,
+    Footer: ModalFooter,
+    Close: ModalClose,
+});

package/dist/components/Overlay/OverlayProvider.d.ts

@@ -14,6 +14,7 @@ export type OverlayProviderProps = {
 export declare function OverlayProvider({ children, container, zIndex, testId, }: OverlayProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useOverlayContext(): OverlayContextValue;
 export declare function useOverlayLayerIndex(active: boolean): number;
+export declare function overlayLayerZIndex(zIndex: OverlayZIndex, kind: OverlayLayerKind, layerIndex: number): number;
 export declare function lockOverlayScroll(): () => void;
 export {};
 //# sourceMappingURL=OverlayProvider.d.ts.map

package/dist/components/Overlay/OverlayProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/OverlayProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACvB,eAAe,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAqBF,wBAAgB,eAAe,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,GACT,EAAE,oBAAoB,2CAiCtB;AAED,wBAAgB,iBAAiB,wBAEhC;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,OAAO,UAsBnD;AAKD,wBAAgB,iBAAiB,eAYhC"}
+{"version":3,"file":"OverlayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/OverlayProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACvB,eAAe,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAwBF,wBAAgB,eAAe,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,GACT,EAAE,oBAAoB,2CAiCtB;AAED,wBAAgB,iBAAiB,wBAEhC;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,OAAO,UA4BnD;AAED,wBAAgB,kBAAkB,CAC9B,MAAM,EAAE,aAAa,EACrB,IAAI,EAAE,gBAAgB,EACtB,UAAU,EAAE,MAAM,UAQrB;AAKD,wBAAgB,iBAAiB,eAYhC"}

package/dist/components/Overlay/OverlayProvider.js

@@ -7,6 +7,8 @@ const defaultZIndex = {
     modal: 1000,
     toast: 2147483000,
 };
+const OVERLAY_LAYER_STEP = 20;
+const DROPDOWN_LAYER_OFFSET = 10;
 const OverlayContext = createContext({
     portalContainer: null,
     zIndex: defaultZIndex,
@@ -36,6 +38,12 @@ export function useOverlayContext() {
 export function useOverlayLayerIndex(active) {
     const [id] = useState(() => Symbol('oui-layer'));
     const [index, setIndex] = useState(0);
+    const currentIndex = layerIds.indexOf(id);
+    const optimisticIndex = active
+        ? currentIndex === -1
+            ? layerIds.length
+            : currentIndex
+        : index;
     useEffect(() => {
         if (!active)
             return;
@@ -54,7 +62,16 @@ export function useOverlayLayerIndex(active) {
             emitLayerChange();
         };
     }, [active, id]);
-    return index;
+    return optimisticIndex;
+}
+export function overlayLayerZIndex(zIndex, kind, layerIndex) {
+    if (kind === 'toast')
+        return zIndex.toast;
+    if (kind === 'dropdown') {
+        const base = Math.max(zIndex.dropdown, zIndex.modal, zIndex.overlay);
+        return base + layerIndex * OVERLAY_LAYER_STEP + DROPDOWN_LAYER_OFFSET;
+    }
+    return zIndex[kind] + layerIndex * OVERLAY_LAYER_STEP;
 }
 let scrollLockCount = 0;
 let previousBodyOverflow = '';

package/dist/components/PaginatedCombobox/PaginatedCombobox.d.ts

@@ -29,6 +29,7 @@ export type PaginatedComboboxProps<T> = {
     disabled?: boolean;
     clearable?: boolean;
     showChevron?: boolean;
+    trigger?: ReactNode;
     size?: UiSize;
     maxHeight?: number;
     closeOnSelect?: boolean;
@@ -44,5 +45,5 @@ export type PaginatedComboboxProps<T> = {
     debounceMs?: number;
     testId?: string;
 };
-export declare function PaginatedCombobox<T>({ loadPage, getItemId, renderOption, renderSelectedLabel, value, onChange, placeholder, emptyText, loadingText, errorText, retryLabel, searchPlaceholder, clearLabel, disabled, clearable, showChevron, size, maxHeight, closeOnSelect, isItemSelected, searchAction, optionAction, resetKey, debounceMs, testId, }: PaginatedComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function PaginatedCombobox<T>({ loadPage, getItemId, renderOption, renderSelectedLabel, value, onChange, placeholder, emptyText, loadingText, errorText, retryLabel, searchPlaceholder, clearLabel, disabled, clearable, showChevron, trigger, size, maxHeight, closeOnSelect, isItemSelected, searchAction, optionAction, resetKey, debounceMs, testId, }: PaginatedComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PaginatedCombobox.d.ts.map

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

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

package/dist/components/PaginatedCombobox/PaginatedCombobox.js

@@ -11,7 +11,7 @@ import { Spinner } from '../Spinner/Spinner';
 import { TextField } from '../TextField/TextField';
 import { Tooltip } from '../Tooltip/Tooltip';
 const DEFAULT_DEBOUNCE_MS = 200;
-export function PaginatedCombobox({ loadPage, getItemId, renderOption, renderSelectedLabel, value, onChange, placeholder, emptyText, loadingText, errorText, retryLabel, searchPlaceholder, clearLabel, disabled = false, clearable = false, showChevron = true, size = 3, maxHeight = 280, closeOnSelect = true, isItemSelected, searchAction, optionAction, resetKey, debounceMs = DEFAULT_DEBOUNCE_MS, testId, }) {
+export function PaginatedCombobox({ loadPage, getItemId, renderOption, renderSelectedLabel, value, onChange, placeholder, emptyText, loadingText, errorText, retryLabel, searchPlaceholder, clearLabel, disabled = false, clearable = false, showChevron = true, trigger, size = 3, maxHeight = 280, closeOnSelect = true, isItemSelected, searchAction, optionAction, resetKey, debounceMs = DEFAULT_DEBOUNCE_MS, testId, }) {
     const { copy } = useOrcestrUiLocale();
     const actualPlaceholder = placeholder ?? copy.common.selectValue;
     const actualEmptyText = emptyText ?? copy.common.noOptions;
@@ -191,14 +191,14 @@ export function PaginatedCombobox({ loadPage, getItemId, renderOption, renderSel
             if (!next) {
                 navigation.reset();
             }
-        }, trigger: _jsx(Button, { type: 'button', v: 'surface', size: size, disabled: disabled, fullWidth: true, pressAnimation: 'none', className: 'oui-combobox-trigger', "data-testid": testId, "data-state": open ? 'open' : 'closed', onKeyDown: handleKeyDown, rightIcon: _jsxs("span", { className: 'oui-combobox-trigger-actions', children: [canClear ? (_jsx("span", { "aria-label": clearLabel ?? copy.common.clear, className: 'oui-combobox-clear', onPointerDown: (event) => {
+        }, trigger: trigger ?? (_jsx(Button, { type: 'button', v: 'surface', size: size, disabled: disabled, fullWidth: true, pressAnimation: 'none', className: 'oui-combobox-trigger', "data-testid": testId, "data-state": open ? 'open' : 'closed', onKeyDown: handleKeyDown, rightIcon: _jsxs("span", { className: 'oui-combobox-trigger-actions', children: [canClear ? (_jsx("span", { "aria-label": clearLabel ?? copy.common.clear, className: 'oui-combobox-clear', onPointerDown: (event) => {
                             event.preventDefault();
                             event.stopPropagation();
                         }, onClick: (event) => {
                             event.preventDefault();
                             event.stopPropagation();
                             clear();
-                        }, children: _jsx(LuX, { size: 14 }) })) : null, showChevron ? _jsx(LuChevronsUpDown, { size: 15 }) : null] }), children: _jsx("span", { className: triggerLabel ? 'oui-combobox-trigger-label' : 'oui-combobox-placeholder', children: triggerLabel ?? actualPlaceholder }) }), className: 'oui-combobox-content', align: 'start', sideOffset: 4, matchTriggerWidth: true, disabled: disabled, children: [_jsxs("div", { className: 'oui-combobox-search-wrap', children: [_jsx(TextField, { autoFocus: true, size: 2, placeholder: actualSearchPlaceholder, value: searchInput, onChange: (event) => setSearchInput(event.target.value), onKeyDown: handleKeyDown }), searchAction ? (_jsx(Tooltip, { content: actualSearchActionLabel, children: _jsx(IconButton, { size: 2, v: 'soft', icon: _jsx(LuPlus, { size: 14 }), className: 'oui-combobox-search-action', "aria-label": actualSearchActionLabel, disabled: searchAction.disabled, onClick: () => {
+                        }, children: _jsx(LuX, { size: 14 }) })) : null, showChevron ? _jsx(LuChevronsUpDown, { size: 15 }) : null] }), children: _jsx("span", { className: triggerLabel ? 'oui-combobox-trigger-label' : 'oui-combobox-placeholder', children: triggerLabel ?? actualPlaceholder }) })), className: 'oui-combobox-content', align: 'start', sideOffset: 4, matchTriggerWidth: true, disabled: disabled, children: [_jsxs("div", { className: 'oui-combobox-search-wrap', children: [_jsx(TextField, { autoFocus: true, size: 2, placeholder: actualSearchPlaceholder, value: searchInput, onChange: (event) => setSearchInput(event.target.value), onKeyDown: handleKeyDown }), searchAction ? (_jsx(Tooltip, { content: actualSearchActionLabel, children: _jsx(IconButton, { size: 2, v: 'soft', icon: _jsx(LuPlus, { size: 14 }), className: 'oui-combobox-search-action', "aria-label": actualSearchActionLabel, disabled: searchAction.disabled, onClick: () => {
                                 setOpen(false);
                                 searchAction.onClick(searchInput);
                             } }) })) : null] }), _jsx("div", { ref: scrollRef, className: 'oui-combobox-scroll', style: { maxHeight }, tabIndex: -1, onKeyDown: handleKeyDown, children: isInitialLoading ? (_jsxs("div", { className: 'oui-combobox-state', children: [_jsx(Spinner, {}), _jsx("span", { className: 'oui-visually-hidden', children: actualLoadingText })] })) : error ? (_jsxs("div", { className: 'oui-combobox-state', children: [_jsx("span", { children: actualErrorText }), _jsx(Button, { size: 1, v: 'surface', onClick: () => void fetchPage(1, debouncedSearch), children: actualRetryLabel })] })) : items.length === 0 ? (_jsx("div", { className: 'oui-combobox-empty', children: actualEmptyText })) : (_jsxs("div", { className: 'oui-combobox-options', children: [items.map((item) => {

package/dist/components/Popover/Popover.d.ts

@@ -1,6 +1,7 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { type FloatingAlign, type FloatingSide } from '../../hooks/useFloatingPosition';
-export type PopoverProps = {
+import { type SystemProps } from '../../theme/systemProps';
+export type PopoverProps = SystemProps & Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     trigger: ReactNode;
     children: ReactNode;
     open?: boolean;
@@ -13,7 +14,40 @@ export type PopoverProps = {
     matchTriggerWidth?: boolean;
     disabled?: boolean;
     className?: string;
+    contentStyle?: CSSProperties;
+    contentRef?: Ref<HTMLDivElement>;
+    onOpenAutoFocus?: (event: {
+        preventDefault: () => void;
+    }) => void;
+    onInteractOutside?: (event: Event) => void;
     testId?: string;
 };
-export declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, side, align, sideOffset, collisionPadding, matchTriggerWidth, disabled, className, testId, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, side, align, sideOffset, collisionPadding, matchTriggerWidth, disabled, className, contentStyle, contentRef: externalContentRef, style: contentStyleProp, onOpenAutoFocus, onInteractOutside, testId, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+type PopoverRootProps = Pick<PopoverProps, 'open' | 'defaultOpen' | 'onOpenChange'> & {
+    children: ReactNode;
+};
+type PopoverTriggerProps = {
+    children: ReactNode;
+};
+declare function PopoverRoot({ children, ...props }: PopoverRootProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PopoverTrigger(_props: PopoverTriggerProps): null;
+export declare namespace Popover {
+    const Root: typeof PopoverRoot;
+    const Trigger: typeof PopoverTrigger;
+    const Content: import("react").ForwardRefExoticComponent<SystemProps & Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        children: ReactNode;
+        width?: number | string;
+        size?: number | string;
+        align?: FloatingAlign;
+        side?: FloatingSide;
+        sideOffset?: number;
+        matchTriggerWidth?: boolean;
+        className?: string;
+        onOpenAutoFocus?: (event: {
+            preventDefault: () => void;
+        }) => void;
+        onInteractOutside?: (event: Event) => void;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+}
+export {};
 //# sourceMappingURL=Popover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EASH,KAAK,SAAS,EAEjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAkBtF,MAAM,MAAM,YAAY,GAAG;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,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,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACpB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,IAAe,EACf,KAAe,EACf,UAAc,EACd,gBAAoB,EACpB,iBAAyB,EACzB,QAAgB,EAChB,SAAS,EACT,MAAM,GACT,EAAE,YAAY,2CAsGd"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAWH,KAAK,aAAa,EAClB,KAAK,cAAc,EAEnB,KAAK,SAAS,EACd,KAAK,GAAG,EACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAGtF,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAqB3E,MAAM,MAAM,YAAY,GAAG,WAAW,GAClC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACnD,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,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,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,cAAc,EAAE,MAAM,IAAI,CAAA;KAAC,KAAK,IAAI,CAAC;IAChE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACpB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,IAAe,EACf,KAAe,EACf,UAAc,EACd,gBAAoB,EACpB,iBAAyB,EACzB,QAAgB,EAChB,SAAS,EACT,YAAY,EACZ,UAAU,EAAE,kBAAkB,EAC9B,KAAK,EAAE,gBAAgB,EACvB,eAAe,EACf,iBAAiB,EACjB,MAAM,EACN,GAAG,KAAK,EACX,EAAE,YAAY,2CA2Hd;AAED,KAAK,gBAAgB,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC,GAAG;IAClF,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAgBF,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,gBAAgB,kDAuB1D;AAED,iBAAS,cAAc,CAAC,MAAM,EAAE,mBAAmB,QAElD;AA2BD,yBAAiB,OAAO,CAAC;IACd,MAAM,IAAI,oBAAc,CAAC;IACzB,MAAM,OAAO,uBAAiB,CAAC;IAC/B,MAAM,OAAO;kBArEV,SAAS;gBACX,MAAM,GAAG,MAAM;eAChB,MAAM,GAAG,MAAM;gBACd,aAAa;eACd,YAAY;qBACN,MAAM;4BACC,OAAO;oBACf,MAAM;0BACA,CAAC,KAAK,EAAE;YAAC,cAAc,EAAE,MAAM,IAAI,CAAA;SAAC,KAAK,IAAI;4BAC3C,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;sDA4DL,CAAC;CACzC"}

package/dist/components/Popover/Popover.js

@@ -1,16 +1,19 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useCallback, useEffect, useRef, } from 'react';
+import { cloneElement, Children, forwardRef, isValidElement, useCallback, useContext, useEffect, useRef, } from 'react';
 import { useDisclosure } from '../../hooks/useDisclosure';
 import {} from '../../hooks/useFloatingPosition';
 import { useFloatingLayer } from '../../hooks/useFloatingLayer';
 import { useOutsidePointerDown } from '../../hooks/useOutsidePointerDown';
+import { splitSystemProps } from '../../theme/systemProps';
+import { OrcestrThemeContext } from '../../theme/useTheme';
 import { composeRefs } from '../../utils/composeRefs';
 import { cn } from '../../utils/cn';
-import { useOverlayContext, useOverlayLayerIndex } from '../Overlay/OverlayProvider';
+import { overlayLayerZIndex, useOverlayContext, useOverlayLayerIndex, } from '../Overlay/OverlayProvider';
 import { Portal } from '../Portal/Portal';
-export function Popover({ trigger, children, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, matchTriggerWidth = false, disabled = false, className, testId, }) {
+export function Popover({ trigger, children, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, matchTriggerWidth = false, disabled = false, className, contentStyle, contentRef: externalContentRef, style: contentStyleProp, onOpenAutoFocus, onInteractOutside, testId, ...props }) {
     const overlay = useOverlayContext();
+    const themeContext = useContext(OrcestrThemeContext);
     const disclosure = useDisclosure({ open, defaultOpen, onOpenChange });
     const { open: isOpen, close: closeDisclosure, toggle } = disclosure;
     const previousFocusRef = useRef(null);
@@ -22,12 +25,19 @@ export function Popover({ trigger, children, open, defaultOpen, onOpenChange, si
         collisionPadding,
         matchTriggerWidth,
     });
-    const close = useCallback(() => closeDisclosure(), [closeDisclosure]);
     const layerIndex = useOverlayLayerIndex(present);
-    useOutsidePointerDown([triggerRef, contentRef], isOpen, close);
+    const { systemStyle, restProps } = splitSystemProps(props);
+    const handleOutsidePointerDown = useCallback((event) => {
+        onInteractOutside?.(event);
+        if (event.defaultPrevented)
+            return;
+        closeDisclosure();
+    }, [closeDisclosure, onInteractOutside]);
+    useOutsidePointerDown([triggerRef, contentRef], isOpen, handleOutsidePointerDown);
     useEffect(() => {
         if (!isOpen)
             return;
+        onOpenAutoFocus?.({ preventDefault: () => undefined });
         previousFocusRef.current =
             document.activeElement instanceof HTMLElement ? document.activeElement : null;
         const onKeyDown = (event) => {
@@ -41,7 +51,7 @@ export function Popover({ trigger, children, open, defaultOpen, onOpenChange, si
             document.removeEventListener('keydown', onKeyDown, true);
             previousFocusRef.current?.focus?.();
         };
-    }, [closeDisclosure, isOpen]);
+    }, [closeDisclosure, isOpen, onOpenAutoFocus]);
     const handleTriggerClick = useCallback((event) => {
         if (event.defaultPrevented || disabled)
             return;
@@ -63,11 +73,48 @@ export function Popover({ trigger, children, open, defaultOpen, onOpenChange, si
                     toggle();
                 }
             }, children: trigger }));
-    return (_jsxs(_Fragment, { children: [triggerNode, present ? (_jsx(Portal, { children: _jsx("div", { ref: contentRef, className: cn('oui-popover-content', className), "data-state": state, "data-layer": 'dropdown', "data-testid": testId ? `${testId}-content` : undefined, style: {
+    return (_jsxs(_Fragment, { children: [triggerNode, present ? (_jsx(Portal, { children: _jsx("div", { ref: composeRefs(contentRef, externalContentRef), className: cn('oui-popover-content', className), "data-state": state, "data-layer": 'dropdown', "data-oui-theme": themeContext?.mode, "data-oui-surface": themeContext?.surface, "data-testid": testId ? `${testId}-content` : undefined, style: {
+                        ...themeContext?.cssVariables,
                         ...style,
-                        zIndex: overlay.zIndex.dropdown + layerIndex * 10,
-                    }, children: children }) })) : null] }));
+                        ...systemStyle,
+                        ...contentStyle,
+                        ...contentStyleProp,
+                        zIndex: overlayLayerZIndex(overlay.zIndex, 'dropdown', layerIndex),
+                    }, ...restProps, children: children }) })) : null] }));
+}
+function PopoverRoot({ children, ...props }) {
+    const trigger = findPopoverChild(children, PopoverTrigger);
+    const content = findPopoverChild(children, PopoverContent);
+    if (!trigger || !content)
+        return null;
+    const { children: contentChildren, width, size: _size, ref: contentRef, ...contentProps } = content.props;
+    return (_jsx(Popover, { ...props, ...contentProps, w: width, contentRef: contentRef, trigger: trigger.props.children, children: contentChildren }));
+}
+function PopoverTrigger(_props) {
+    return null;
+}
+const PopoverContent = forwardRef(function PopoverContent(_props, _ref) {
+    return null;
+});
+function findPopoverChild(children, type) {
+    let found = null;
+    Children.forEach(children, (child) => {
+        if (!found && isValidElement(child) && child.type === type) {
+            found = child;
+        }
+    });
+    return found;
 }
+Object.assign(Popover, {
+    Root: PopoverRoot,
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+});
+(function (Popover) {
+    Popover.Root = PopoverRoot;
+    Popover.Trigger = PopoverTrigger;
+    Popover.Content = PopoverContent;
+})(Popover || (Popover = {}));
 function clonePopoverTrigger(trigger, { ref, open, disabled, testId, onClick, }) {
     return cloneElement(trigger, {
         ref: composeRefs(trigger.props.ref, ref),

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -10,6 +10,8 @@ export type ScrollHighlightConfig = {
     maxOpacity?: number;
 };
 export type ScrollAreaProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
+    scrollbars?: 'vertical' | 'horizontal' | 'both';
+    type?: 'auto' | 'always' | 'scroll' | 'hover';
     highlights?: boolean;
     highlightH?: number | string;
     highlightColor?: string;
@@ -22,6 +24,8 @@ export type ScrollAreaProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
     testId?: string;
 };
 export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SystemProps & {
+    scrollbars?: "vertical" | "horizontal" | "both";
+    type?: "auto" | "always" | "scroll" | "hover";
     highlights?: boolean;
     highlightH?: number | string;
     highlightColor?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,wBAAwB,EAChC,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,qBAAqB,GAAG;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACzD,WAAW,GAAG;IACV,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,UAAU;iBAZF,OAAO;iBACP,MAAM,GAAG,MAAM;qBACX,MAAM;uBACJ,OAAO;qBACT,MAAM;4BACC,MAAM;0BACR,MAAM;mBACb,qBAAqB;sBAClB,qBAAqB;aAC9B,MAAM;kDA4KtB,CAAC"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,wBAAwB,EAChC,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,qBAAqB,GAAG;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACzD,WAAW,GAAG;IACV,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,UAAU;iBAdF,UAAU,GAAG,YAAY,GAAG,MAAM;WACxC,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO;iBAChC,OAAO;iBACP,MAAM,GAAG,MAAM;qBACX,MAAM;uBACJ,OAAO;qBACT,MAAM;4BACC,MAAM;0BACR,MAAM;mBACb,qBAAqB;sBAClB,qBAAqB;aAC9B,MAAM;kDAuNtB,CAAC"}

package/dist/components/ScrollArea/ScrollArea.js

@@ -4,13 +4,14 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRe
 import { cn } from '../../utils/cn';
 import { splitSystemProps } from '../../theme/systemProps';
 import { BottomHighlight, TopHighlight } from '../Highlight/Highlight';
-export const ScrollArea = forwardRef(function ScrollArea({ className, style, children, highlights = false, highlightH = 32, highlightColor, highlightVisible = true, highlightStart = 0, highlightFadeDistance = 100, highlightMaxOpacity = 1, highlightTop, highlightBottom, testId, ...props }, ref) {
+export const ScrollArea = forwardRef(function ScrollArea({ className, style, children, highlights = false, highlightH = 32, highlightColor, highlightVisible = true, highlightStart = 0, highlightFadeDistance = 100, highlightMaxOpacity = 1, highlightTop, highlightBottom, scrollbars = 'both', type = 'auto', testId, ...props }, ref) {
     const { systemStyle, restProps } = splitSystemProps(props);
     const { onScroll, ...outerProps } = restProps;
     const showHighlights = highlights && highlightVisible;
     const scrollRef = useRef(null);
     const frameRef = useRef(null);
     const [opacity, setOpacity] = useState({ top: 0, bottom: 0 });
+    const [overflow, setOverflow] = useState({ x: false, y: false });
     const topConfig = useMemo(() => normalizeHighlightConfig({
         h: highlightH,
         color: highlightColor,
@@ -46,8 +47,24 @@ export const ScrollArea = forwardRef(function ScrollArea({ className, style, chi
     useImperativeHandle(ref, () => scrollRef.current, []);
     const updateOpacity = useCallback(() => {
         const node = scrollRef.current;
-        if (!node || !showHighlights) {
-            setOpacity({ top: 0, bottom: 0 });
+        if (!node) {
+            setOpacity((current) => current.top === 0 && current.bottom === 0
+                ? current
+                : { top: 0, bottom: 0 });
+            setOverflow((current) => !current.x && !current.y ? current : { x: false, y: false });
+            return;
+        }
+        const nextOverflow = {
+            x: node.scrollWidth > node.clientWidth + 1,
+            y: node.scrollHeight > node.clientHeight + 1,
+        };
+        setOverflow((current) => current.x === nextOverflow.x && current.y === nextOverflow.y
+            ? current
+            : nextOverflow);
+        if (!showHighlights) {
+            setOpacity((current) => current.top === 0 && current.bottom === 0
+                ? current
+                : { top: 0, bottom: 0 });
             return;
         }
         const maxScroll = Math.max(0, node.scrollHeight - node.clientHeight);
@@ -79,6 +96,9 @@ export const ScrollArea = forwardRef(function ScrollArea({ className, style, chi
         const observer = typeof ResizeObserver === 'undefined'
             ? null
             : new ResizeObserver(scheduleUpdate);
+        const mutationObserver = typeof MutationObserver === 'undefined'
+            ? null
+            : new MutationObserver(scheduleUpdate);
         observer?.observe(node);
         Array.from(node.children).forEach((child) => {
             if (child instanceof HTMLElement &&
@@ -86,9 +106,15 @@ export const ScrollArea = forwardRef(function ScrollArea({ className, style, chi
                 observer?.observe(child);
             }
         });
+        mutationObserver?.observe(node, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
         window.addEventListener('resize', scheduleUpdate);
         return () => {
             observer?.disconnect();
+            mutationObserver?.disconnect();
             window.removeEventListener('resize', scheduleUpdate);
             if (frameRef.current !== null) {
                 window.cancelAnimationFrame(frameRef.current);
@@ -96,7 +122,7 @@ export const ScrollArea = forwardRef(function ScrollArea({ className, style, chi
             }
         };
     }, [scheduleUpdate]);
-    return (_jsxs("div", { className: cn('oui-scroll-area', className), "data-testid": testId, style: { ...systemStyle, ...style }, ...outerProps, children: [_jsx("div", { ref: scrollRef, className: 'oui-scroll-area-viewport', "data-testid": testId ? `${testId}-viewport` : undefined, onScroll: (event) => {
+    return (_jsxs("div", { className: cn('oui-scroll-area', className), "data-scrollbars": scrollbars, "data-type": type, "data-overflow-x": overflow.x ? 'true' : undefined, "data-overflow-y": overflow.y ? 'true' : undefined, "data-testid": testId, style: { ...systemStyle, ...style }, ...outerProps, children: [_jsx("div", { ref: scrollRef, className: 'oui-scroll-area-viewport', "data-testid": testId ? `${testId}-viewport` : undefined, onScroll: (event) => {
                     onScroll?.(event);
                     scheduleUpdate();
                 }, children: children }), showHighlights ? (_jsxs("div", { className: 'oui-scroll-area-highlight-overlay', "aria-hidden": 'true', children: [topConfig.visible ? (_jsx(TopHighlight, { h: topConfig.h, color: topConfig.color, style: { opacity: opacity.top } })) : null, bottomConfig.visible ? (_jsx(BottomHighlight, { h: bottomConfig.h, color: bottomConfig.color, style: { opacity: opacity.bottom } })) : null] })) : null] }));

package/dist/components/Section/Section.d.ts

@@ -5,6 +5,8 @@ export type SectionProps = FlexProps & {
     testId?: string;
 };
 export declare const Section: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../..").SystemProps & {
+    as?: import("react").ElementType;
+    asChild?: boolean;
     testId?: string;
 } & {
     sectionColor?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/components/Section/Section.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,cAAc,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAaF,eAAO,MAAM,OAAO;;;mBAhBD,MAAM;qBACJ,MAAM,GAAG,MAAM;aACvB,MAAM;kDAuCjB,CAAC"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/components/Section/Section.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,cAAc,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAaF,eAAO,MAAM,OAAO;;;;;mBAhBD,MAAM;qBACJ,MAAM,GAAG,MAAM;aACvB,MAAM;kDAuCjB,CAAC"}

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -1,13 +1,36 @@
+import { type ReactNode } from 'react';
+import type { UiSize } from '../../theme/systemProps';
 export type SegmentedControlItem = {
     value: string;
     label: string;
     disabled?: boolean;
 };
-export declare function SegmentedControl({ value, onValueChange, items, className, testId, }: {
+export declare function SegmentedControl({ value, onValueChange, items, size, className, testId, }: {
     value: string;
     onValueChange: (value: string) => void;
     items: ReadonlyArray<SegmentedControlItem>;
+    size?: UiSize;
     className?: string;
     testId?: string;
 }): import("react/jsx-runtime").JSX.Element;
+type SegmentedRootProps = {
+    value: string;
+    onValueChange: (value: string) => void;
+    children: ReactNode;
+    size?: UiSize;
+    className?: string;
+    testId?: string;
+};
+type SegmentedItemProps = {
+    value: string;
+    disabled?: boolean;
+    children: ReactNode;
+};
+declare function SegmentedRoot({ value, onValueChange, children, size, className, testId, }: SegmentedRootProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedItem(_props: SegmentedItemProps): null;
+export declare namespace SegmentedControl {
+    const Root: typeof SegmentedRoot;
+    const Item: typeof SegmentedItem;
+}
+export {};
 //# sourceMappingURL=SegmentedControl.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC7B,KAAK,EACL,aAAa,EACb,KAAK,EACL,SAAS,EACT,MAAM,GACT,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAkBA"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAGpD,MAAM,MAAM,oBAAoB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC7B,KAAK,EACL,aAAa,EACb,KAAK,EACL,IAAI,EACJ,SAAS,EACT,MAAM,GACT,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAkBA;AAED,KAAK,kBAAkB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,iBAAS,aAAa,CAAC,EACnB,KAAK,EACL,aAAa,EACb,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,MAAM,GACT,EAAE,kBAAkB,2CAsBpB;AAED,iBAAS,aAAa,CAAC,MAAM,EAAE,kBAAkB,QAEhD;AAOD,yBAAiB,gBAAgB,CAAC;IACvB,MAAM,IAAI,sBAAgB,CAAC;IAC3B,MAAM,IAAI,sBAAgB,CAAC;CACrC"}

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -1,6 +1,32 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
 import { cn } from '../../utils/cn';
-export function SegmentedControl({ value, onValueChange, items, className, testId, }) {
-    return (_jsx("div", { className: cn('oui-segmented', className), "data-testid": testId, children: items.map((item) => (_jsx("button", { type: 'button', className: 'oui-segmented-item', "data-active": value === item.value ? 'true' : undefined, "data-testid": testId ? `${testId}-${item.value}` : undefined, disabled: item.disabled, onClick: () => onValueChange(item.value), children: item.label }, item.value))) }));
+export function SegmentedControl({ value, onValueChange, items, size, className, testId, }) {
+    return (_jsx("div", { className: cn('oui-segmented', className), "data-size": size, "data-testid": testId, children: items.map((item) => (_jsx("button", { type: 'button', className: 'oui-segmented-item', "data-active": value === item.value ? 'true' : undefined, "data-testid": testId ? `${testId}-${item.value}` : undefined, disabled: item.disabled, onClick: () => onValueChange(item.value), children: item.label }, item.value))) }));
 }
+function SegmentedRoot({ value, onValueChange, children, size, className, testId, }) {
+    const items = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child) || child.type !== SegmentedItem)
+            return;
+        const props = child.props;
+        items.push({
+            value: props.value,
+            label: String(props.children ?? ''),
+            disabled: props.disabled,
+        });
+    });
+    return (_jsx(SegmentedControl, { value: value, onValueChange: onValueChange, items: items, size: size, className: className, testId: testId }));
+}
+function SegmentedItem(_props) {
+    return null;
+}
+Object.assign(SegmentedControl, {
+    Root: SegmentedRoot,
+    Item: SegmentedItem,
+});
+(function (SegmentedControl) {
+    SegmentedControl.Root = SegmentedRoot;
+    SegmentedControl.Item = SegmentedItem;
+})(SegmentedControl || (SegmentedControl = {}));