@zvk/ui 0.1.8 → 0.1.9

package/dist/components/popover/popover.js

@@ -7,7 +7,9 @@ import { cn } from "../../utils/cn.js";
 import { Portal } from "../../internal/portal/index.js";
 import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
 import { useFloatingPosition } from "../../internal/floating/index.js";
+import { getFloatingTransformOrigin } from "../../internal/floating/transform-origin.js";
 import { placementFromSideAlign } from "../../internal/floating/placement-aliases.js";
+import { usePresence } from "../../internal/presence/index.js";
 import { Slot } from "../../internal/slot/index.js";
 const defaultPositioning = {
     sideOffset: 0,
@@ -15,6 +17,7 @@ const defaultPositioning = {
     collisionPadding: 0,
     matchTriggerWidth: false
 };
+const popoverExitDurationMs = 120;
 const PopoverContext = React.createContext(null);
 function usePopoverContext(calledBy) {
     const context = React.useContext(PopoverContext);
@@ -32,26 +35,6 @@ function mergeRef(ref, node) {
         ref.current = node;
     }
 }
-function getTransformOrigin(placement) {
-    const [side, align = "center"] = placement.split("-");
-    const anchor = side === "top" ? "bottom" : side === "bottom" ? "top" : side === "left" ? "right" : "left";
-    if (side === "top" || side === "bottom") {
-        if (align === "start") {
-            return `${anchor} left`;
-        }
-        if (align === "end") {
-            return `${anchor} right`;
-        }
-        return `${anchor} center`;
-    }
-    if (align === "start") {
-        return `${anchor} top`;
-    }
-    if (align === "end") {
-        return `${anchor} bottom`;
-    }
-    return `${anchor} center`;
-}
 function getPlacementParts(placement) {
     const [side, align = "center"] = placement.split("-");
     return { side, align };
@@ -132,10 +115,13 @@ function PopoverTrigger({ asChild = false, className, disabled, onClick, ref, ty
     }
     return (_jsx("button", { ...props, ref: handleRef, type: type, disabled: disabled, className: cn("zvk-ui-popover__trigger", className), "aria-expanded": context.open, "aria-controls": context.contentId, "aria-haspopup": "dialog", "data-state": context.open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
 }
-function PopoverContent({ align, alignOffset = defaultPositioning.alignOffset, className, container, forceMount = false, id, disableEscapeKeyDown = false, disableOutsidePointerDown = false, ref, placement, side, sideOffset = 0, collisionPadding = 0, matchTriggerWidth = false, style, ...props }) {
+function PopoverContent({ align, alignOffset = defaultPositioning.alignOffset, className, container, forceMount = false, id, disableEscapeKeyDown = false, disableOutsidePointerDown = false, onAnimationEnd, ref, placement, side, sideOffset = 0, collisionPadding = 0, matchTriggerWidth = false, style, ...props }) {
     const context = usePopoverContext("Popover.Content");
     const { defaultContentId, setContentId } = context;
-    const transformOrigin = getTransformOrigin(context.floatingPlacement);
+    const presence = usePresence({ open: context.open, forceMount, exitDurationMs: popoverExitDurationMs });
+    const wasOpenRef = React.useRef(context.open);
+    const isClosing = wasOpenRef.current && !context.open;
+    const transformOrigin = getFloatingTransformOrigin(context.floatingPlacement);
     const placementParts = getPlacementParts(context.floatingPlacement);
     const contentId = id ?? defaultContentId;
     const handleRef = React.useCallback((node) => {
@@ -153,6 +139,9 @@ function PopoverContent({ align, alignOffset = defaultPositioning.alignOffset, c
             setContentId(defaultContentId);
         };
     }, [contentId, defaultContentId, setContentId]);
+    React.useEffect(() => {
+        wasOpenRef.current = context.open;
+    }, [context.open]);
     const close = () => {
         context.setOpen(false);
     };
@@ -176,10 +165,11 @@ function PopoverContent({ align, alignOffset = defaultPositioning.alignOffset, c
             context.updateContentPositioning(defaultPositioning);
         };
     }, [align, alignOffset, context.updateContentPositioning, collisionPadding, matchTriggerWidth, placement, side, sideOffset]);
-    if (!forceMount && !context.open) {
+    if (!presence.present) {
         return null;
     }
-    const content = (_jsx("div", { ...props, ref: handleRef, id: contentId, role: "dialog", className: cn("zvk-ui-popover__content", className), "data-align": placementParts.align, "data-side": placementParts.side, "data-state": context.open ? "open" : "closed", hidden: context.open ? undefined : true, style: contentStyle }));
+    const hidden = presence.inert && !isClosing && presence.motionState !== "exiting" ? true : undefined;
+    const content = (_jsx("div", { ...props, ref: handleRef, "aria-hidden": presence.inert ? true : undefined, id: contentId, inert: presence.inert ? true : undefined, role: "dialog", className: cn("zvk-ui-popover__content", className), "data-align": placementParts.align, "data-side": placementParts.side, "data-state": presence.state, hidden: hidden, onAnimationEnd: composeEventHandlers(onAnimationEnd, presence.onExitComplete), style: contentStyle }));
     if (context.open &&
         props["aria-label"] === undefined &&
         props["aria-labelledby"] === undefined &&

package/dist/components/select/select.d.ts

@@ -53,7 +53,7 @@ export interface SelectClearProps extends React.ButtonHTMLAttributes<HTMLButtonE
 declare function SelectRoot({ children, className, defaultOpen, defaultValue, disabled, invalid, name, onOpenChange, onValueChange, open: openProp, placeholder, placement, required, size, value, ...props }: SelectProps): React.JSX.Element;
 declare function SelectTrigger({ children, className, disabled, onClick, onKeyDown, ref, type, ...props }: SelectTriggerProps): React.JSX.Element;
 declare function SelectValue({ className, placeholder, ref, ...props }: SelectValueProps): React.JSX.Element;
-declare function SelectContent({ children, className, collisionPadding, container, forceMount, matchTriggerWidth, onKeyDown, ref, sideOffset, style, ...props }: SelectContentProps): React.JSX.Element | null;
+declare function SelectContent({ children, className, collisionPadding, container, forceMount, matchTriggerWidth, onAnimationEnd, onKeyDown, ref, sideOffset, style, ...props }: SelectContentProps): React.JSX.Element | null;
 declare function SelectItem({ children, className, disabled, onClick, onKeyDown, ref, value, ...props }: SelectItemProps): React.JSX.Element;
 declare function SelectGroup({ children, className, ref, ...props }: SelectGroupProps): React.JSX.Element;
 declare function SelectLabel({ className, ref, ...props }: SelectLabelProps): React.JSX.Element;

package/dist/components/select/select.js

@@ -7,6 +7,8 @@ import { cn } from "../../utils/cn.js";
 import { Portal } from "../../internal/portal/index.js";
 import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
 import { useFloatingPosition } from "../../internal/floating/index.js";
+import { placementParts } from "../../internal/floating/placement-aliases.js";
+import { usePresence } from "../../internal/presence/index.js";
 const nativeSelectStyle = {
     position: "absolute",
     width: 1,
@@ -20,6 +22,8 @@ const defaultContentPositioning = {
     collisionPadding: 0,
     matchTriggerWidth: true
 };
+const selectExitDurationMs = 120;
+const selectTypeaheadTimeoutMs = 700;
 const SelectContext = React.createContext(null);
 function useSelectContext(calledBy) {
     const context = React.useContext(SelectContext);
@@ -43,6 +47,18 @@ function composeRefs(...refs) {
 function getTextLabel(node) {
     return node;
 }
+function getTypeaheadLabel(node, fallback) {
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map((child) => getTypeaheadLabel(child, "")).join(" ").trim() || fallback;
+    }
+    if (React.isValidElement(node)) {
+        return getTypeaheadLabel(node.props.children, fallback);
+    }
+    return fallback;
+}
 function getNativeOptionLabel(label, value) {
     if (typeof label === "string" || typeof label === "number") {
         return String(label);
@@ -70,6 +86,30 @@ function collectNativeOptions(children) {
     visit(children);
     return options;
 }
+function isPrintableTypeaheadKey(event) {
+    return event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey;
+}
+function getTypeaheadSearch(buffer) {
+    const normalized = buffer.toLocaleLowerCase();
+    if (normalized.length > 1 && normalized.split("").every((character) => character === normalized[0])) {
+        return normalized[0] ?? "";
+    }
+    return normalized;
+}
+function findTypeaheadMatch(items, search, activeElement) {
+    if (items.length === 0 || search.length === 0) {
+        return undefined;
+    }
+    const activeIndex = items.findIndex((item) => item.element === activeElement);
+    const startIndex = activeIndex >= 0 ? activeIndex + 1 : 0;
+    for (let offset = 0; offset < items.length; offset += 1) {
+        const item = items[(startIndex + offset) % items.length];
+        if (item?.labelText.toLocaleLowerCase().startsWith(search)) {
+            return item;
+        }
+    }
+    return undefined;
+}
 function SelectRoot({ children, className, defaultOpen = false, defaultValue = null, disabled, invalid, name, onOpenChange, onValueChange, open: openProp, placeholder, placement = "bottom-start", required, size = "md", value, ...props }) {
     const instanceId = React.useId();
     const triggerId = `${instanceId}-trigger`;
@@ -77,6 +117,8 @@ function SelectRoot({ children, className, defaultOpen = false, defaultValue = n
     const triggerRef = React.useRef(null);
     const itemRegistry = React.useRef(new Map());
     const itemOrder = React.useRef([]);
+    const typeaheadBuffer = React.useRef("");
+    const typeaheadTimer = React.useRef(null);
     const wasOpenRef = React.useRef(false);
     const [open, setOpen] = useControllableState({
         ...(openProp !== undefined ? { value: openProp } : {}),
@@ -122,6 +164,26 @@ function SelectRoot({ children, className, defaultOpen = false, defaultValue = n
         setCurrentValue(nextValue);
         setOpen(false);
     }, [setCurrentValue, setOpen]);
+    const resetTypeahead = React.useCallback(() => {
+        typeaheadBuffer.current = "";
+        if (typeaheadTimer.current !== null) {
+            clearTimeout(typeaheadTimer.current);
+            typeaheadTimer.current = null;
+        }
+    }, []);
+    const focusTypeaheadMatch = React.useCallback((key) => {
+        typeaheadBuffer.current += key;
+        if (typeaheadTimer.current !== null) {
+            clearTimeout(typeaheadTimer.current);
+        }
+        typeaheadTimer.current = setTimeout(resetTypeahead, selectTypeaheadTimeoutMs);
+        const match = findTypeaheadMatch(getEnabledItems(), getTypeaheadSearch(typeaheadBuffer.current), document.activeElement);
+        if (!match?.element) {
+            return false;
+        }
+        match.element.focus();
+        return true;
+    }, [getEnabledItems, resetTypeahead]);
     const orderedItems = React.useMemo(() => getOrderedItems(), [getOrderedItems, itemsVersion]);
     const selectedLabel = React.useMemo(() => orderedItems.find((item) => item.value === currentValue)?.label ??
         nativeOptions.find((item) => item.value === currentValue)?.label, [currentValue, nativeOptions, orderedItems]);
@@ -133,13 +195,17 @@ function SelectRoot({ children, className, defaultOpen = false, defaultValue = n
         if (wasOpenRef.current && !open) {
             triggerRef.current?.focus();
         }
+        if (!open) {
+            resetTypeahead();
+        }
         wasOpenRef.current = open;
-    }, [open]);
+    }, [open, resetTypeahead]);
     React.useEffect(() => {
         if (!required || currentValue !== null) {
             setNativeInvalid(false);
         }
     }, [currentValue, required]);
+    React.useEffect(() => resetTypeahead, [resetTypeahead]);
     const handleNativeInvalid = React.useCallback((event) => {
         event.preventDefault();
         setNativeInvalid(true);
@@ -147,6 +213,7 @@ function SelectRoot({ children, className, defaultOpen = false, defaultValue = n
     }, []);
     const context = React.useMemo(() => ({
         contentId,
+        focusTypeaheadMatch,
         ...(disabled !== undefined ? { disabled } : {}),
         getEnabledItems,
         ...(resolvedInvalid ? { invalid: true } : {}),
@@ -164,8 +231,9 @@ function SelectRoot({ children, className, defaultOpen = false, defaultValue = n
         setOpen,
         referenceRef: floating.referenceRef,
         floatingRef: floating.floatingRef,
+        floatingPlacement: floating.placement,
         floatingStyle: floating.floatingStyle
-    }), [contentId, currentValue, disabled, floating.floatingRef, floating.floatingStyle, floating.referenceRef, getEnabledItems, open, placeholder, registerItem, required, resolvedInvalid, selectValue, selectedLabel, setOpen, triggerId, unregisterItem]);
+    }), [contentId, currentValue, disabled, floating.floatingRef, floating.floatingStyle, floating.placement, floating.referenceRef, focusTypeaheadMatch, getEnabledItems, open, placeholder, registerItem, required, resolvedInvalid, selectValue, selectedLabel, setOpen, triggerId, unregisterItem]);
     return (_jsx(SelectContext.Provider, { value: context, children: _jsxs("div", { ...props, className: cn("zvk-ui-select", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": resolvedInvalid ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, "data-state": open ? "open" : "closed", children: [name ? (_jsxs("select", { "aria-hidden": "true", disabled: disabled, name: name, onChange: () => undefined, onInvalid: handleNativeInvalid, required: required, style: nativeSelectStyle, tabIndex: -1, value: nativeValue, children: [_jsx("option", { value: "" }), nativeOptions.map((item) => (_jsx("option", { disabled: item.disabled, value: item.value, children: item.label }, item.value)))] })) : null, children] }) }));
 }
 function focusItem(items, index) {
@@ -190,7 +258,7 @@ function SelectTrigger({ children, className, disabled, onClick, onKeyDown, ref,
             focusItem(items, selectedIndex >= 0 ? selectedIndex : 0);
         });
     }, [context]);
-    return (_jsx("button", { ...props, ref: composeRefs(ref, context.triggerRef, context.referenceRef), "aria-controls": context.contentId, "aria-expanded": context.open ? "true" : "false", "aria-haspopup": "listbox", "aria-invalid": context.invalid ? "true" : undefined, "aria-required": context.required ? "true" : undefined, className: cn("zvk-ui-select__trigger", className), "data-disabled": isDisabled ? "true" : undefined, "data-invalid": context.invalid ? "true" : undefined, "data-state": context.open ? "open" : "closed", disabled: isDisabled, id: context.triggerId, onClick: composeEventHandlers(onClick, () => {
+    return (_jsxs("button", { ...props, ref: composeRefs(ref, context.triggerRef, context.referenceRef), "aria-controls": context.contentId, "aria-expanded": context.open ? "true" : "false", "aria-haspopup": "listbox", "aria-invalid": context.invalid ? "true" : undefined, "aria-required": context.required ? "true" : undefined, className: cn("zvk-ui-select__trigger", className), "data-disabled": isDisabled ? "true" : undefined, "data-invalid": context.invalid ? "true" : undefined, "data-state": context.open ? "open" : "closed", disabled: isDisabled, id: context.triggerId, onClick: composeEventHandlers(onClick, () => {
             if (!isDisabled) {
                 context.setOpen(!context.open);
             }
@@ -206,15 +274,19 @@ function SelectTrigger({ children, className, disabled, onClick, onKeyDown, ref,
                 event.preventDefault();
                 openAndFocus("last");
             }
-        }), type: type, children: children }));
+        }), type: type, children: [children, _jsx("span", { className: "zvk-ui-select__indicator", "aria-hidden": "true" })] }));
 }
 function SelectValue({ className, placeholder, ref, ...props }) {
     const context = useSelectContext("Select.Value");
     const displayPlaceholder = context.selectedLabel === undefined;
     return (_jsx("span", { ...props, ref: ref, className: cn("zvk-ui-select__value", className), "data-placeholder": displayPlaceholder ? "true" : undefined, children: displayPlaceholder ? placeholder ?? context.placeholder : context.selectedLabel }));
 }
-function SelectContent({ children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, matchTriggerWidth = defaultContentPositioning.matchTriggerWidth, onKeyDown, ref, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
+function SelectContent({ children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, matchTriggerWidth = defaultContentPositioning.matchTriggerWidth, onAnimationEnd, onKeyDown, ref, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
     const context = useSelectContext("Select.Content");
+    const presence = usePresence({ open: context.open, forceMount, exitDurationMs: selectExitDurationMs });
+    const wasOpenRef = React.useRef(context.open);
+    const isClosing = wasOpenRef.current && !context.open;
+    const resolvedPlacement = placementParts(context.floatingPlacement);
     React.useEffect(() => {
         context.updateContentPositioning({
             sideOffset,
@@ -223,6 +295,9 @@ function SelectContent({ children, className, collisionPadding = defaultContentP
         });
         return () => context.updateContentPositioning(defaultContentPositioning);
     }, [collisionPadding, context, matchTriggerWidth, sideOffset]);
+    React.useEffect(() => {
+        wasOpenRef.current = context.open;
+    }, [context.open]);
     const moveFocus = React.useCallback((direction) => {
         const items = context.getEnabledItems();
         const currentIndex = items.findIndex((item) => item.element === document.activeElement);
@@ -232,10 +307,11 @@ function SelectContent({ children, className, collisionPadding = defaultContentP
         const items = context.getEnabledItems();
         focusItem(items, end ? items.length - 1 : 0);
     }, [context]);
-    if (!context.open && !forceMount) {
+    if (!presence.present) {
         return null;
     }
-    const content = (_jsx("div", { ...props, ref: composeRefs(ref, context.floatingRef), "aria-labelledby": context.triggerId, className: cn("zvk-ui-select__content", className), "data-state": context.open ? "open" : "closed", hidden: context.open ? undefined : true, id: context.contentId, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+    const hidden = presence.inert && !isClosing && presence.motionState !== "exiting" ? true : undefined;
+    const content = (_jsx("div", { ...props, ref: composeRefs(ref, context.floatingRef), "aria-hidden": presence.inert ? true : undefined, "aria-labelledby": context.triggerId, className: cn("zvk-ui-select__content", className), "data-align": resolvedPlacement.align, "data-side": resolvedPlacement.side, "data-state": presence.state, hidden: hidden, id: context.contentId, inert: presence.inert ? true : undefined, onAnimationEnd: composeEventHandlers(onAnimationEnd, presence.onExitComplete), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
             if (event.key === "ArrowDown") {
                 event.preventDefault();
                 moveFocus("next");
@@ -255,11 +331,14 @@ function SelectContent({ children, className, collisionPadding = defaultContentP
             if (event.key === "Escape") {
                 context.setOpen(false);
             }
+            if (isPrintableTypeaheadKey(event) && context.focusTypeaheadMatch(event.key)) {
+                event.preventDefault();
+            }
         }), role: "listbox", style: { ...context.floatingStyle, ...style }, tabIndex: -1, children: children }));
     if (!context.open) {
         return _jsx(Portal, { ...(container === undefined ? {} : { container }), children: content });
     }
-    return (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: _jsx(DismissableLayer, { open: true, onDismiss: () => context.setOpen(false), children: content }) }));
+    return (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: _jsx(DismissableLayer, { open: context.open, onDismiss: () => context.setOpen(false), children: content }) }));
 }
 function SelectItem({ children, className, disabled = false, onClick, onKeyDown, ref, value, ...props }) {
     const context = useSelectContext("Select.Item");
@@ -272,6 +351,7 @@ function SelectItem({ children, className, disabled = false, onClick, onKeyDown,
             element: itemRef.current,
             id: itemId,
             label: getTextLabel(children),
+            labelText: getTypeaheadLabel(children, value),
             value
         });
         return () => context.unregisterItem(itemId);

package/dist/components/sheet/sheet.d.ts

@@ -37,7 +37,7 @@ export interface SheetCloseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
 }
 declare function SheetRoot({ children, className, container, defaultOpen, disableEscapeKeyDown, disableOutsidePointerDown, onOpenChange, open: openProp, ref, side, ...props }: SheetProps): React.JSX.Element;
 declare function SheetTrigger({ asChild, className, disabled, onClick, ref, type, ...props }: SheetTriggerProps): React.JSX.Element;
-declare function SheetContent({ children, className, forceMount, ref, ...props }: SheetContentProps): React.JSX.Element | null;
+declare function SheetContent({ children, className, forceMount, onAnimationEnd, onTransitionEnd, ref, ...props }: SheetContentProps): React.JSX.Element | null;
 declare function SheetHeader({ className, ref, ...props }: SheetHeaderProps): React.JSX.Element;
 declare function SheetTitle({ className, ref, ...props }: SheetTitleProps): React.JSX.Element;
 declare function SheetDescription({ className, ref, ...props }: SheetDescriptionProps): React.JSX.Element;

package/dist/components/sheet/sheet.js

@@ -6,6 +6,7 @@ import { cn } from "../../utils/cn.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
 import { FocusScope } from "../../internal/focus/index.js";
+import { usePresence } from "../../internal/presence/index.js";
 import { Portal } from "../../internal/portal/index.js";
 import { lockScroll, unlockScroll } from "../../internal/scroll-lock/index.js";
 import { Slot } from "../../internal/slot/index.js";
@@ -29,6 +30,7 @@ function composeRefs(...refs) {
         }
     };
 }
+const sheetExitDurationMs = 240;
 function SheetRoot({ children, className, container, defaultOpen = false, disableEscapeKeyDown = false, disableOutsidePointerDown = false, onOpenChange, open: openProp, ref, side = "right", ...props }) {
     const [open, setOpen] = useControllableState({
         ...(openProp !== undefined ? { value: openProp } : {}),
@@ -47,13 +49,6 @@ function SheetRoot({ children, className, container, defaultOpen = false, disabl
         setDescribedBy(id);
         return () => setDescribedBy((current) => (current === id ? undefined : current));
     }, []);
-    React.useLayoutEffect(() => {
-        if (!open) {
-            return;
-        }
-        lockScroll();
-        return () => unlockScroll();
-    }, [open]);
     return (_jsx(SheetContext.Provider, { value: {
             close: () => setOpen(false),
             ...(container === undefined ? {} : { container }),
@@ -84,16 +79,26 @@ function SheetTrigger({ asChild = false, className, disabled, onClick, ref, type
     }
     return (_jsx("button", { ...props, ref: composeRefs(ref, triggerRef), type: type, disabled: disabled, "aria-controls": contentId, "aria-expanded": open ? "true" : "false", className: cn("zvk-ui-sheet__trigger", className), "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
 }
-function SheetContent({ children, className, forceMount = false, ref, ...props }) {
+function SheetContent({ children, className, forceMount = false, onAnimationEnd, onTransitionEnd, ref, ...props }) {
     const { close, container, contentId, describedBy, disableEscapeKeyDown, disableOutsidePointerDown, labelledBy, open, side } = useSheetContext("Sheet.Content");
-    if (!open && !forceMount) {
+    const presence = usePresence({ open, forceMount, exitDurationMs: sheetExitDurationMs });
+    const hidden = !open && forceMount && presence.motionState === "idle";
+    const shouldLockScroll = presence.present && (!presence.inert || presence.motionState === "exiting");
+    React.useLayoutEffect(() => {
+        if (!shouldLockScroll) {
+            return;
+        }
+        lockScroll();
+        return () => unlockScroll();
+    }, [shouldLockScroll]);
+    if (!presence.present) {
         return null;
     }
-    const content = (_jsx("div", { ...props, ref: ref, id: contentId, role: "dialog", "aria-modal": "true", "aria-describedby": describedBy, "aria-labelledby": labelledBy, className: cn("zvk-ui-sheet__content", className), "data-side": side, "data-state": open ? "open" : "closed", hidden: open ? undefined : true, children: children }));
+    const content = (_jsx("div", { ...props, ref: ref, id: contentId, role: "dialog", "aria-hidden": presence.inert ? true : undefined, "aria-modal": open ? true : undefined, "aria-describedby": describedBy, "aria-labelledby": labelledBy, className: cn("zvk-ui-sheet__content", className), "data-motion-state": presence.motionState, "data-side": side, "data-state": presence.state, hidden: hidden ? true : undefined, inert: presence.inert ? true : undefined, onAnimationEnd: composeEventHandlers(onAnimationEnd, presence.onExitComplete, { checkDefaultPrevented: false }), onTransitionEnd: composeEventHandlers(onTransitionEnd, presence.onExitComplete, { checkDefaultPrevented: false }), children: children }));
     if (!open) {
-        return (_jsxs(Portal, { ...(container === undefined ? {} : { container }), children: [_jsx("div", { "aria-hidden": "true", className: "zvk-ui-sheet__overlay", hidden: true }), content] }));
+        return (_jsxs(Portal, { ...(container === undefined ? {} : { container }), children: [_jsx("div", { "aria-hidden": "true", className: "zvk-ui-sheet__overlay", "data-state": presence.state, hidden: hidden ? true : undefined }), content] }));
     }
-    return (_jsxs(Portal, { ...(container === undefined ? {} : { container }), children: [_jsx("div", { "aria-hidden": "true", className: "zvk-ui-sheet__overlay" }), _jsx(DismissableLayer, { open: open, disableEscapeKeyDown: disableEscapeKeyDown, disableOutsidePointerDown: disableOutsidePointerDown, onDismiss: close, children: _jsx(FocusScope, { active: open, trapped: true, children: content }) })] }));
+    return (_jsxs(Portal, { ...(container === undefined ? {} : { container }), children: [_jsx("div", { "aria-hidden": "true", className: "zvk-ui-sheet__overlay", "data-state": presence.state }), _jsx(DismissableLayer, { open: open, disableEscapeKeyDown: disableEscapeKeyDown, disableOutsidePointerDown: disableOutsidePointerDown, onDismiss: close, children: _jsx(FocusScope, { active: open, trapped: true, children: content }) })] }));
 }
 function SheetHeader({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-sheet__header", className) });

package/dist/components/table/index.d.ts

@@ -1,2 +1,2 @@
 export { Table } from "./table.js";
-export type { TableBodyProps, TableCaptionProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps } from "./table.js";
+export type { TableBodyProps, TableCaptionProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableSelectionCellProps, TableSortButtonProps, TableStateRowProps, TableToolbarActionsProps, TableToolbarProps, TableToolbarTitleProps } from "./table.js";

package/dist/components/table/table.d.ts

@@ -28,6 +28,31 @@ export interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableHeaderCe
 export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     ref?: React.Ref<HTMLTableCellElement>;
 }
+export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface TableToolbarTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    ref?: React.Ref<HTMLHeadingElement>;
+}
+export interface TableToolbarActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface TableSelectionCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "children"> {
+    checked: boolean;
+    disabled?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    ref?: React.Ref<HTMLTableCellElement>;
+    "aria-label": string;
+}
+export interface TableSortButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    direction?: "ascending" | "descending" | "none";
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface TableStateRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    colSpan: number;
+    tone?: "empty" | "loading" | "error";
+    ref?: React.Ref<HTMLTableRowElement>;
+}
 declare function TableRoot({ className, density, ref, variant, ...props }: TableProps): React.JSX.Element;
 declare function TableCaption({ className, ref, ...props }: TableCaptionProps): React.JSX.Element;
 declare function TableHeader({ className, ref, ...props }: TableHeaderProps): React.JSX.Element;
@@ -36,6 +61,12 @@ declare function TableFooter({ className, ref, ...props }: TableFooterProps): Re
 declare function TableRow({ className, ref, ...props }: TableRowProps): React.JSX.Element;
 declare function TableHead({ className, ref, scope, ...props }: TableHeadProps): React.JSX.Element;
 declare function TableCell({ className, ref, ...props }: TableCellProps): React.JSX.Element;
+declare function TableToolbar({ className, ref, ...props }: TableToolbarProps): React.JSX.Element;
+declare function TableToolbarTitle({ className, ref, ...props }: TableToolbarTitleProps): React.JSX.Element;
+declare function TableToolbarActions({ className, ref, ...props }: TableToolbarActionsProps): React.JSX.Element;
+declare function TableSelectionCell({ checked, className, disabled, onCheckedChange, ref, "aria-label": ariaLabel, ...props }: TableSelectionCellProps): React.JSX.Element;
+declare function TableSortButton({ children, className, direction, ref, type, ...props }: TableSortButtonProps): React.JSX.Element;
+declare function TableStateRow({ children, className, colSpan, ref, tone, ...props }: TableStateRowProps): React.JSX.Element;
 declare function TableContainer({ className, ref, ...props }: TableContainerProps): React.JSX.Element;
 export declare const Table: typeof TableRoot & {
     Container: typeof TableContainer;
@@ -46,5 +77,11 @@ export declare const Table: typeof TableRoot & {
     Row: typeof TableRow;
     Head: typeof TableHead;
     Cell: typeof TableCell;
+    Toolbar: typeof TableToolbar;
+    ToolbarTitle: typeof TableToolbarTitle;
+    ToolbarActions: typeof TableToolbarActions;
+    SelectionCell: typeof TableSelectionCell;
+    SortButton: typeof TableSortButton;
+    StateRow: typeof TableStateRow;
 };
 export {};

package/dist/components/table/table.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Checkbox } from "../checkbox/checkbox.js";
 import { cn } from "../../utils/cn.js";
 function TableRoot({ className, density = "default", ref, variant = "plain", ...props }) {
     return (_jsx("table", { ...props, ref: ref, className: cn("zvk-ui-table", className), "data-density": density, "data-variant": variant }));
@@ -25,6 +26,27 @@ function TableHead({ className, ref, scope = "col", ...props }) {
 function TableCell({ className, ref, ...props }) {
     return _jsx("td", { ...props, ref: ref, className: cn("zvk-ui-table__cell", className) });
 }
+function TableToolbar({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-table__toolbar", className) });
+}
+function TableToolbarTitle({ className, ref, ...props }) {
+    return _jsx("h3", { ...props, ref: ref, className: cn("zvk-ui-table__toolbar-title", className) });
+}
+function TableToolbarActions({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-table__toolbar-actions", className) });
+}
+function TableSelectionCell({ checked, className, disabled, onCheckedChange, ref, "aria-label": ariaLabel, ...props }) {
+    return (_jsx("td", { ...props, ref: ref, className: cn("zvk-ui-table__cell", "zvk-ui-table__selection-cell", className), "data-disabled": disabled ? "true" : undefined, children: _jsx(Checkbox, { "aria-label": ariaLabel, checked: checked, className: "zvk-ui-table__selection-checkbox", disabled: disabled, onChange: (event) => onCheckedChange?.(event.currentTarget.checked) }) }));
+}
+function TableSortButton({ children, className, direction = "none", ref, type = "button", ...props }) {
+    const directionLabel = direction === "ascending" ? "sorted ascending" : direction === "descending" ? "sorted descending" : "not sorted";
+    const visibleDirection = direction === "ascending" ? "Asc" : direction === "descending" ? "Desc" : "Sort";
+    const accessibleLabel = props["aria-label"] ?? (typeof children === "string" ? `${children} ${directionLabel}` : undefined);
+    return (_jsxs("button", { ...props, "aria-label": accessibleLabel, ref: ref, className: cn("zvk-ui-table__sort-button", className), "data-direction": direction, type: type, children: [_jsx("span", { className: "zvk-ui-table__sort-label", children: children }), _jsxs("span", { className: "zvk-ui-sr-only", children: [" ", directionLabel] }), _jsx("span", { "aria-hidden": "true", className: "zvk-ui-table__sort-direction", children: visibleDirection })] }));
+}
+function TableStateRow({ children, className, colSpan, ref, tone = "empty", ...props }) {
+    return (_jsx("tr", { ...props, ref: ref, className: cn("zvk-ui-table__row", "zvk-ui-table__state-row", className), "data-state": tone, children: _jsx("td", { className: "zvk-ui-table__cell zvk-ui-table__state-cell", colSpan: colSpan, children: children }) }));
+}
 function TableContainer({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-table-container", className) });
 }
@@ -36,5 +58,11 @@ export const Table = Object.assign(TableRoot, {
     Footer: TableFooter,
     Row: TableRow,
     Head: TableHead,
-    Cell: TableCell
+    Cell: TableCell,
+    Toolbar: TableToolbar,
+    ToolbarTitle: TableToolbarTitle,
+    ToolbarActions: TableToolbarActions,
+    SelectionCell: TableSelectionCell,
+    SortButton: TableSortButton,
+    StateRow: TableStateRow
 });

package/dist/components/toast/index.d.ts

@@ -1,2 +1,2 @@
 export { createToastController, toast, Toast, Toaster, ToastProvider, ToastViewport, useToast } from "./toast.js";
-export type { ToasterPosition, ToasterProps, ToastActionInput, ToastActionProps, ToastCloseProps, ToastController, ToastInput, ToastOptions, ToastPlacement, ToastProviderProps, ToastProps, ToastTextProps, ToastTone, ToastViewportProps } from "./toast.js";
+export type { ToasterPosition, ToasterProps, ToastActionInput, ToastActionProps, ToastCloseProps, ToastController, ToastInput, ToastOptions, ToastPlacement, ToastPromiseMessages, ToastPromiseOptions, ToastProviderProps, ToastProps, ToastTextProps, ToastTone, ToastUpdateOptions, ToastUpdateType, ToastViewportProps } from "./toast.js";

package/dist/components/toast/toast.d.ts

@@ -17,12 +17,30 @@ export type ToastOptions = {
     action?: ToastActionInput;
     cancel?: ToastActionInput;
 };
+export type ToastUpdateType = "default" | "success" | "error" | "warning" | "info";
+export type ToastUpdateOptions = Omit<ToastOptions, "id"> & {
+    type?: ToastUpdateType;
+    message?: ToastInput;
+};
+export type ToastPromiseMessages<T> = {
+    loading: ToastInput;
+    success: ToastInput | ((value: T) => ToastInput);
+    error: ToastInput | ((error: unknown) => ToastInput);
+};
+export type ToastPromiseOptions<T> = ToastPromiseMessages<T> & {
+    loadingOptions?: ToastOptions;
+    successOptions?: Omit<ToastUpdateOptions, "message" | "type">;
+    errorOptions?: Omit<ToastUpdateOptions, "message" | "type">;
+};
 export type ToastController = {
     (input: ToastInput, options?: ToastOptions): string;
     success: (input: ToastInput, options?: ToastOptions) => string;
     error: (input: ToastInput, options?: ToastOptions) => string;
     warning: (input: ToastInput, options?: ToastOptions) => string;
     info: (input: ToastInput, options?: ToastOptions) => string;
+    loading: (input: ToastInput, options?: ToastOptions) => string;
+    update: (id: string, options: ToastUpdateOptions) => string;
+    promise: <T>(promise: Promise<T>, options: ToastPromiseOptions<T>) => Promise<T>;
     dismiss: (id?: string) => void;
 };
 export interface ToastViewportProps extends React.HTMLAttributes<HTMLDivElement> {

package/dist/components/toast/toast.js

@@ -45,6 +45,18 @@ function toastTypeFromTone(tone) {
     }
     return tone;
 }
+function toastToneFromUpdateType(type) {
+    if (type === "success" || type === "warning" || type === "info") {
+        return type;
+    }
+    if (type === "error") {
+        return "destructive";
+    }
+    return "neutral";
+}
+function resolveToastPromiseMessage(message, value) {
+    return typeof message === "function" ? message(value) : message;
+}
 function isToastActionObject(input) {
     return typeof input === "object" && input !== null && !React.isValidElement(input) && "label" in input && "onClick" in input;
 }
@@ -89,6 +101,54 @@ export function createToastController() {
     controller.error = (input, options) => show("destructive", input, options);
     controller.warning = (input, options) => show("warning", input, options);
     controller.info = (input, options) => show("info", input, options);
+    controller.loading = (input, options) => show("neutral", input, { ...options, duration: options?.duration ?? Infinity });
+    controller.update = (id, options) => {
+        const existingRecord = records.find((record) => record.id === id);
+        if (!existingRecord) {
+            return id;
+        }
+        const { message, type, ...toastOptions } = options;
+        const { title, description } = message === undefined
+            ? {
+                title: existingRecord.title,
+                description: toastOptions.description ?? existingRecord.description
+            }
+            : resolveToastContent(message, toastOptions);
+        toastVersionCounter += 1;
+        const nextRecord = {
+            id,
+            tone: type === undefined ? existingRecord.tone : toastToneFromUpdateType(type),
+            duration: toastOptions.duration ?? DEFAULT_TOAST_DURATION,
+            version: toastVersionCounter,
+            ...(title !== undefined ? { title } : {}),
+            ...(description !== undefined ? { description } : {}),
+            ...(toastOptions.action !== undefined ? { action: toastOptions.action } : {}),
+            ...(toastOptions.cancel !== undefined ? { cancel: toastOptions.cancel } : {})
+        };
+        records = records.map((record) => (record.id === id ? nextRecord : record));
+        notify();
+        return id;
+    };
+    controller.promise = async (promise, options) => {
+        const id = controller.loading(options.loading, options.loadingOptions);
+        try {
+            const value = await promise;
+            controller.update(id, {
+                ...options.successOptions,
+                type: "success",
+                message: resolveToastPromiseMessage(options.success, value)
+            });
+            return value;
+        }
+        catch (error) {
+            controller.update(id, {
+                ...options.errorOptions,
+                type: "error",
+                message: resolveToastPromiseMessage(options.error, error)
+            });
+            throw error;
+        }
+    };
     controller.dismiss = (id) => {
         records = id ? records.filter((toast) => toast.id !== id) : [];
         notify();

package/dist/components/tooltip/tooltip.d.ts

@@ -41,7 +41,7 @@ export interface TooltipContentProps extends React.HTMLAttributes<HTMLSpanElemen
 declare function TooltipProvider({ children, delayDuration }: TooltipProviderProps): React.JSX.Element;
 declare function TooltipRoot({ children, defaultOpen, delay, disabled, onOpenChange, open: openProp, placement }: TooltipRootProps): React.JSX.Element;
 declare function TooltipTrigger({ children, asChild: _asChild }: TooltipTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function TooltipContent({ align, alignOffset, children, className, collisionPadding, container, forceMount, placement, ref, side, sideOffset, style, ...props }: TooltipContentProps): React.JSX.Element | null;
+declare function TooltipContent({ align, alignOffset, children, className, collisionPadding, container, forceMount, onAnimationEnd, placement, ref, side, sideOffset, style, ...props }: TooltipContentProps): React.JSX.Element | null;
 declare function TooltipWrapper({ children, content, delay, disabled, placement }: TooltipProps): React.JSX.Element;
 export declare const Tooltip: typeof TooltipWrapper & {
     Content: typeof TooltipContent;