@orcestr/ui 0.0.3 → 0.1.1

package/dist/components/Tabs/Tabs.js

@@ -1,9 +1,22 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { LuChevronLeft, LuChevronRight } from 'react-icons/lu';
 import { cn } from '../../utils/cn';
 import { Collapse } from '../Collapse/Collapse';
-export function Tabs({ items, value, onValueChange, className, listClassName, contentClassName, testId, }) {
+import { IconButton } from '../IconButton/IconButton';
+function stableTabRect(current, next) {
+    if (!current || !next)
+        return next;
+    if (current.left === next.left &&
+        current.top === next.top &&
+        current.width === next.width &&
+        current.height === next.height) {
+        return current;
+    }
+    return next;
+}
+function ItemTabs({ items, value, onValueChange, className, listClassName, contentClassName, testId, }) {
     const active = items.find((item) => item.value === value) ?? items[0];
     const listRef = useRef(null);
     const triggerRefs = useRef(new Map());
@@ -28,9 +41,10 @@ export function Tabs({ items, value, onValueChange, className, listClassName, co
                 height: trigger.offsetHeight,
             };
         };
-        setActiveRect(readRect(active?.value));
-        setHoverRect((current) => readRect(hoveredValue) ?? current);
-        setHoverVisible(Boolean(hoveredValue && readRect(hoveredValue)));
+        setActiveRect((current) => stableTabRect(current, readRect(active?.value)));
+        const nextHoverRect = readRect(hoveredValue);
+        setHoverRect((current) => (nextHoverRect ? stableTabRect(current, nextHoverRect) : current));
+        setHoverVisible(Boolean(hoveredValue && nextHoverRect && hoveredValue !== active?.value));
     }, [active?.value, hoveredValue]);
     const moveFocus = (currentValue, direction) => {
         const currentIndex = items.findIndex((item) => item.value === currentValue);
@@ -94,6 +108,174 @@ export function Tabs({ items, value, onValueChange, className, listClassName, co
                     return (_jsx(Collapse, { open: open, children: _jsx("div", { role: 'tabpanel', className: 'oui-tabs-panel', "data-active": open ? 'true' : undefined, "data-testid": testId ? `${testId}-${item.value}-panel` : undefined, children: item.content }) }, item.value));
                 }) })] }));
 }
+const TabsCtx = createContext(null);
+function useTabsCtx() {
+    const ctx = useContext(TabsCtx);
+    if (!ctx)
+        throw new Error('Tabs.* must be used inside <Tabs.Root>.');
+    return ctx;
+}
+function Root({ value, defaultValue, onValueChange, children, className, ...props }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : uncontrolled;
+    const [hoveredValue, setHoveredValue] = useState(null);
+    const triggersRef = useRef(new Map());
+    const [, setTriggersVersion] = useState(0);
+    const registerTrigger = useCallback((nextValue, element) => {
+        const triggers = triggersRef.current;
+        if (element) {
+            if (triggers.get(nextValue) === element)
+                return;
+            triggers.set(nextValue, element);
+        }
+        else {
+            if (!triggers.has(nextValue))
+                return;
+            triggers.delete(nextValue);
+        }
+        setTriggersVersion((current) => current + 1);
+    }, []);
+    const handleChange = useCallback((nextValue) => {
+        if (!isControlled)
+            setUncontrolled(nextValue);
+        onValueChange?.(nextValue);
+    }, [isControlled, onValueChange]);
+    const ctxValue = useMemo(() => ({
+        activeValue: currentValue,
+        hoveredValue,
+        setHoveredValue,
+        setActiveValue: handleChange,
+        registerTrigger,
+    }), [currentValue, handleChange, hoveredValue, registerTrigger]);
+    return (_jsx(TabsCtx.Provider, { value: ctxValue, children: _jsx("div", { className: cn('oui-tabs-compound', className), "data-tabs-root": true, "data-value": currentValue, ...props, children: children }) }));
+}
+function List({ children, indicatorPaddingY = 4, className, style, ...props }) {
+    const ctx = useTabsCtx();
+    const listRef = useRef(null);
+    const [hoverRect, setHoverRect] = useState(null);
+    const [hoverVisible, setHoverVisible] = useState(false);
+    const [activeRect, setActiveRect] = useState(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const measure = useCallback(() => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const triggers = list.querySelectorAll('[data-tabs-trigger]');
+        let hover = null;
+        let active = null;
+        triggers.forEach((element) => {
+            const nextValue = element.dataset.tabsTrigger;
+            if (!nextValue)
+                return;
+            const rect = {
+                left: element.offsetLeft,
+                top: element.offsetTop,
+                width: element.offsetWidth,
+                height: element.offsetHeight,
+            };
+            if (nextValue === ctx.hoveredValue)
+                hover = rect;
+            if (nextValue === ctx.activeValue)
+                active = rect;
+        });
+        setHoverRect((current) => (hover ? stableTabRect(current, hover) : current));
+        setHoverVisible(Boolean(hover && ctx.hoveredValue !== ctx.activeValue));
+        setActiveRect((current) => stableTabRect(current, active));
+        setCanScrollLeft(list.scrollLeft > 1);
+        setCanScrollRight(list.scrollLeft + list.clientWidth < list.scrollWidth - 1);
+    }, [ctx.activeValue, ctx.hoveredValue]);
+    useLayoutEffect(() => {
+        measure();
+    }, [measure]);
+    useEffect(() => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const observer = new ResizeObserver(() => measure());
+        observer.observe(list);
+        list.querySelectorAll('[data-tabs-trigger]').forEach((element) => observer.observe(element));
+        list.addEventListener('scroll', measure, { passive: true });
+        return () => {
+            observer.disconnect();
+            list.removeEventListener('scroll', measure);
+        };
+    }, [children, measure]);
+    const scrollList = (direction) => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        list.scrollBy({
+            left: direction * Math.max(Math.round(list.clientWidth * 0.6), 160),
+            behavior: 'smooth',
+        });
+    };
+    const handleWheel = useCallback((event) => {
+        if (event.defaultPrevented)
+            return;
+        const list = listRef.current;
+        if (!list || list.scrollWidth <= list.clientWidth + 1)
+            return;
+        const rawDelta = Math.abs(event.deltaY) >= Math.abs(event.deltaX)
+            ? event.deltaY
+            : event.deltaX;
+        if (rawDelta === 0)
+            return;
+        const delta = event.deltaMode === 1
+            ? rawDelta * 32
+            : event.deltaMode === 2
+                ? rawDelta * list.clientWidth
+                : rawDelta;
+        const maxScrollLeft = list.scrollWidth - list.clientWidth;
+        const canScroll = delta < 0 ? list.scrollLeft > 1 : list.scrollLeft < maxScrollLeft - 1;
+        if (!canScroll)
+            return;
+        event.preventDefault();
+        list.scrollBy({ left: delta, behavior: 'smooth' });
+    }, []);
+    useEffect(() => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        list.addEventListener('wheel', handleWheel, { passive: false });
+        return () => list.removeEventListener('wheel', handleWheel);
+    }, [handleWheel]);
+    const hasOverflowControls = canScrollLeft || canScrollRight;
+    return (_jsxs("div", { className: 'oui-tabs-compound-shell', children: [canScrollLeft ? (_jsx("span", { "aria-hidden": true, className: 'oui-tabs-edge oui-tabs-edge-left' })) : null, canScrollRight ? (_jsx("span", { "aria-hidden": true, className: 'oui-tabs-edge oui-tabs-edge-right' })) : null, canScrollLeft ? (_jsx(IconButton, { type: 'button', v: 'soft', tone: 'neutral', round: true, size: 1, onClick: () => scrollList(-1), "aria-label": 'Scroll tabs left', className: 'oui-tabs-scroll-button oui-tabs-scroll-button-left', children: _jsx(LuChevronLeft, { size: 16 }) })) : null, canScrollRight ? (_jsx(IconButton, { type: 'button', v: 'soft', tone: 'neutral', round: true, size: 1, onClick: () => scrollList(1), "aria-label": 'Scroll tabs right', className: 'oui-tabs-scroll-button oui-tabs-scroll-button-right', children: _jsx(LuChevronRight, { size: 16 }) })) : null, _jsxs("div", { ref: listRef, role: 'tablist', onMouseLeave: () => ctx.setHoveredValue(null), className: cn('oui-tabs-list-scroll', className), "data-overflow": hasOverflowControls ? 'true' : undefined, style: style, ...props, children: [activeRect ? (_jsx("span", { "aria-hidden": true, className: 'oui-tabs-compound-active-indicator', style: compoundIndicatorStyle(activeRect, indicatorPaddingY) })) : null, hoverRect ? (_jsx("span", { "aria-hidden": true, className: 'oui-tabs-compound-hover-indicator', "data-visible": hoverVisible ? 'true' : undefined, style: compoundIndicatorStyle(hoverRect, indicatorPaddingY) })) : null, children] })] }));
+}
+function Trigger({ value, children, icon, size = '2', className, onMouseEnter, onClick, ...props }) {
+    const ctx = useTabsCtx();
+    const ref = useRef(null);
+    const isActive = ctx.activeValue === value;
+    useEffect(() => {
+        ctx.registerTrigger(value, ref.current);
+        return () => ctx.registerTrigger(value, null);
+    }, [ctx, value]);
+    return (_jsxs("button", { ref: ref, type: 'button', role: 'tab', "aria-selected": isActive, className: cn('oui-tabs-trigger', className), "data-active": isActive ? 'true' : undefined, "data-size": size, "data-tabs-trigger": value, onMouseEnter: (event) => {
+            ctx.setHoveredValue(value);
+            onMouseEnter?.(event);
+        }, onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            ctx.setHoveredValue(value);
+            ctx.setActiveValue(value);
+        }, ...props, children: [icon ? (_jsx("span", { className: 'oui-tabs-trigger-icon', "aria-hidden": true, children: icon })) : null, children] }));
+}
+function Content({ value, children, className, mountOnActive = false, ...props }) {
+    const ctx = useTabsCtx();
+    const open = ctx.activeValue === value;
+    const [mounted, setMounted] = useState(open);
+    useEffect(() => {
+        if (!open || mounted)
+            return;
+        const frameId = window.requestAnimationFrame(() => setMounted(true));
+        return () => window.cancelAnimationFrame(frameId);
+    }, [mounted, open]);
+    const shouldRenderChildren = !mountOnActive || mounted || open;
+    return (_jsx("div", { role: 'tabpanel', className: cn('oui-tabs-compound-panel', className), "data-tabs-content": value, hidden: !open, ...props, children: _jsx(Collapse, { open: open, children: _jsx("div", { className: 'oui-tabs-compound-panel-inner', children: shouldRenderChildren ? children : null }) }) }));
+}
 function indicatorStyle(rect) {
     return {
         left: rect.left,
@@ -102,3 +284,17 @@ function indicatorStyle(rect) {
         height: Math.max(0, rect.height - 8),
     };
 }
+function compoundIndicatorStyle(rect, paddingY) {
+    return {
+        left: rect.left,
+        top: rect.top + paddingY,
+        width: rect.width,
+        height: Math.max(0, rect.height - paddingY * 2),
+    };
+}
+export const Tabs = Object.assign(ItemTabs, {
+    Root,
+    List,
+    Trigger,
+    Content,
+});

package/dist/components/Text/Text.d.ts

@@ -1,13 +1,23 @@
 import { type ComponentPropsWithoutRef, type ElementType } from 'react';
-import { type SystemProps, type Tone } from '../../theme/systemProps';
+import { type SystemProps, type ToneInput } from '../../theme/systemProps';
 export type TextProps = ComponentPropsWithoutRef<'span'> & SystemProps & {
     as?: ElementType;
-    tone?: Tone | 'muted';
+    tone?: ToneInput;
+    asChild?: boolean;
+    href?: string;
+    target?: string;
+    rel?: string;
+    trim?: string;
     testId?: string;
 };
 export declare const Text: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SystemProps & {
     as?: ElementType;
-    tone?: Tone | "muted";
+    tone?: ToneInput;
+    asChild?: boolean;
+    href?: string;
+    target?: string;
+    rel?: string;
+    trim?: string;
     testId?: string;
 } & import("react").RefAttributes<HTMLElement>>;
 //# sourceMappingURL=Text.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EACnB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,IAAI,EAAC,MAAM,yBAAyB,CAAC;AAEtF,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC,MAAM,CAAC,GACpD,WAAW,GAAG;IACV,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,IAAI;SALJ,WAAW;WACT,IAAI,GAAG,OAAO;aACZ,MAAM;+CAiBrB,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEnB,MAAM,OAAO,CAAC;AAGf,OAAO,EAGH,KAAK,WAAW,EAChB,KAAK,SAAS,EACjB,MAAM,yBAAyB,CAAC;AAGjC,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC,MAAM,CAAC,GACpD,WAAW,GAAG;IACV,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,IAAI;SAVJ,WAAW;WACT,SAAS;cACN,OAAO;WACV,MAAM;aACJ,MAAM;UACT,MAAM;WACL,MAAM;aACJ,MAAM;+CA2CrB,CAAC"}

package/dist/components/Text/Text.js

@@ -1,8 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
 import { cn } from '../../utils/cn';
-import { splitSystemProps } from '../../theme/systemProps';
-export const Text = forwardRef(function Text({ as: Component = 'span', className, style, tone, testId, ...props }, ref) {
+import { normalizeTone, splitSystemProps, } from '../../theme/systemProps';
+import { renderSlot } from '../../utils/slot';
+export const Text = forwardRef(function Text({ as: Component = 'span', className, style, tone, asChild = false, testId, children, ...props }, ref) {
     const { systemStyle, restProps } = splitSystemProps(props);
-    return (_jsx(Component, { ref: ref, className: cn('oui-text', tone && `oui-text-${tone}`, className), "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps }));
+    const commonProps = {
+        className: cn('oui-text', tone && `oui-text-${tone === 'muted' ? 'muted' : normalizeTone(tone)}`, className),
+        '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/TextArea/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,sBAAsB,EAC9B,MAAM,OAAO,CAAC;AAIf,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,MAAM,EACd,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,aAAa,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,GACnE,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,QAAQ;WANN,MAAM;cACH,OAAO;iBACJ,OAAO;aACX,MAAM;uDAwCtB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,sBAAsB,EAC9B,MAAM,OAAO,CAAC;AAIf,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,MAAM,EACd,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,aAAa,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,GACnE,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,QAAQ;WANN,MAAM;cACH,OAAO;iBACJ,OAAO;aACX,MAAM;uDA0CtB,CAAC"}

package/dist/components/TextArea/TextArea.js

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

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

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

package/dist/components/TextField/TextField.js

@@ -6,7 +6,7 @@ import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
 import { cn } from '../../utils/cn';
 import { composeRefs } from '../../utils/composeRefs';
 import { splitSystemProps, } from '../../theme/systemProps';
-export const TextField = forwardRef(function TextField({ className, style, size = 3, invalid = false, fullWidth = true, leftSlot, rightSlot, clearable = false, onClear, clearLabel, testId, value, defaultValue, onChange, disabled, id, ...props }, ref) {
+export const TextField = forwardRef(function TextField({ className, style, size = 3, invalid = false, fullWidth = true, leftSlot, rightSlot, clearable = false, onClear, clearLabel, testId, value, defaultValue, onChange, disabled, id, children: _children, dangerouslySetInnerHTML: _dangerouslySetInnerHTML, ...props }, ref) {
     const { copy } = useOrcestrUiLocale();
     const generatedId = useId();
     const inputId = id ?? generatedId;

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

@@ -10,11 +10,8 @@ export type ToastOptions = {
     title: ReactNode;
     message?: ReactNode;
     tone?: ToastTone;
+    icon?: ReactNode | false;
     position?: ToastPosition;
-    background?: string;
-    blur?: number | string | false;
-    borderColor?: string;
-    shadow?: string;
     progressColor?: string;
     action?: ToastAction;
     duration?: number | null;

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

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

package/dist/components/Toast/Toast.js

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

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,10 +1,18 @@
 import { type ReactNode } from 'react';
-import { type FloatingSide } from '../../hooks/useFloatingPosition';
-export declare function Tooltip({ content, children, side, className, testId, }: {
+import { type FloatingAlign, type FloatingSide } from '../../hooks/useFloatingPosition';
+export type TooltipProps = {
     content: ReactNode;
     children: ReactNode;
     side?: FloatingSide;
+    align?: FloatingAlign;
+    sideOffset?: number;
+    avoidCollisions?: boolean;
+    collisionPadding?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
     className?: string;
     testId?: string;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLElement>>;
 //# sourceMappingURL=Tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAC,KAAK,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAMlE,wBAAgB,OAAO,CAAC,EACpB,OAAO,EACP,QAAQ,EACR,IAAY,EACZ,SAAS,EACT,MAAM,GACT,EAAE;IACC,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAmDA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,SAAS,EAEjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAqBtF,MAAM,MAAM,YAAY,GAAG;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,OAAO,sGA0FlB,CAAC"}