@zvk/ui 0.1.0 → 0.1.1

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

@@ -1,11 +1,16 @@
 import * as React from "react";
+import type { PortalProps } from "../../internal/portal/index.js";
 import type { FloatingPlacement } from "../../internal/floating/floating-types.js";
 export type SelectSize = "sm" | "md" | "lg";
-export interface SelectProps extends React.HTMLAttributes<HTMLDivElement> {
+export type SelectValue = string | null;
+export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
     name?: string;
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
+    value?: SelectValue;
+    defaultValue?: SelectValue;
+    onValueChange?: (value: SelectValue) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
@@ -21,6 +26,7 @@ export interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement>
     collisionPadding?: number;
     matchTriggerWidth?: boolean;
     forceMount?: boolean;
+    container?: PortalProps["container"];
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -32,14 +38,34 @@ export interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement>
     placeholder?: React.ReactNode;
     ref?: React.Ref<HTMLSpanElement>;
 }
-declare function SelectRoot({ children, className, defaultValue, disabled, invalid, name, onValueChange, placeholder, placement, required, size, value, ...props }: SelectProps): React.JSX.Element;
+export interface SelectGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface SelectLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface SelectSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface SelectClearProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+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, forceMount, matchTriggerWidth, onKeyDown, ref, sideOffset, style, ...props }: SelectContentProps): React.JSX.Element | null;
+declare function SelectContent({ children, className, collisionPadding, container, forceMount, matchTriggerWidth, 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;
+declare function SelectSeparator({ className, ref, ...props }: SelectSeparatorProps): React.JSX.Element;
+declare function SelectClear({ className, disabled, onClick, ref, type, ...props }: SelectClearProps): React.JSX.Element;
 export declare const Select: typeof SelectRoot & {
     Content: typeof SelectContent;
+    Clear: typeof SelectClear;
+    Group: typeof SelectGroup;
     Item: typeof SelectItem;
+    Label: typeof SelectLabel;
+    Separator: typeof SelectSeparator;
     Trigger: typeof SelectTrigger;
     Value: typeof SelectValue;
 };

package/dist/components/select/select.js

@@ -35,7 +35,7 @@ function composeRefs(...refs) {
 function getTextLabel(node) {
     return node;
 }
-function SelectRoot({ children, className, defaultValue = "", disabled, invalid, name, onValueChange, placeholder, placement = "bottom-start", required, size = "md", value, ...props }) {
+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`;
     const contentId = `${instanceId}-content`;
@@ -43,7 +43,11 @@ function SelectRoot({ children, className, defaultValue = "", disabled, invalid,
     const itemRegistry = React.useRef(new Map());
     const itemOrder = React.useRef([]);
     const wasOpenRef = React.useRef(false);
-    const [open, setOpen] = React.useState(false);
+    const [open, setOpen] = useControllableState({
+        ...(openProp !== undefined ? { value: openProp } : {}),
+        defaultValue: defaultOpen,
+        ...(onOpenChange ? { onChange: onOpenChange } : {})
+    });
     const [itemsVersion, setItemsVersion] = React.useState(0);
     const [currentValue, setCurrentValue] = useControllableState({
         ...(value !== undefined ? { value } : {}),
@@ -80,7 +84,7 @@ function SelectRoot({ children, className, defaultValue = "", disabled, invalid,
     const selectValue = React.useCallback((nextValue) => {
         setCurrentValue(nextValue);
         setOpen(false);
-    }, [setCurrentValue]);
+    }, [setCurrentValue, setOpen]);
     const selectedLabel = React.useMemo(() => getOrderedItems().find((item) => item.value === currentValue)?.label, [currentValue, getOrderedItems, itemsVersion]);
     React.useEffect(() => {
         if (wasOpenRef.current && !open) {
@@ -108,8 +112,8 @@ function SelectRoot({ children, className, defaultValue = "", disabled, invalid,
         referenceRef: floating.referenceRef,
         floatingRef: floating.floatingRef,
         floatingStyle: floating.floatingStyle
-    }), [contentId, currentValue, disabled, floating.floatingRef, floating.floatingStyle, floating.referenceRef, getEnabledItems, invalid, open, placeholder, registerItem, required, selectValue, selectedLabel, triggerId, unregisterItem]);
-    return (_jsx(SelectContext.Provider, { value: context, children: _jsxs("div", { ...props, className: cn("liano-select", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalid ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, "data-state": open ? "open" : "closed", children: [name ? _jsx("input", { type: "hidden", name: name, value: currentValue }) : null, children] }) }));
+    }), [contentId, currentValue, disabled, floating.floatingRef, floating.floatingStyle, floating.referenceRef, getEnabledItems, invalid, open, placeholder, registerItem, required, selectValue, selectedLabel, setOpen, triggerId, unregisterItem]);
+    return (_jsx(SelectContext.Provider, { value: context, children: _jsxs("div", { ...props, className: cn("liano-select", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalid ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, "data-state": open ? "open" : "closed", children: [name ? _jsx("input", { type: "hidden", name: name, value: currentValue ?? "" }) : null, children] }) }));
 }
 function focusItem(items, index) {
     if (items.length === 0) {
@@ -156,7 +160,7 @@ function SelectValue({ className, placeholder, ref, ...props }) {
     const displayPlaceholder = context.selectedLabel === undefined;
     return (_jsx("span", { ...props, ref: ref, className: cn("liano-select__value", className), "data-placeholder": displayPlaceholder ? "true" : undefined, children: displayPlaceholder ? placeholder ?? context.placeholder : context.selectedLabel }));
 }
-function SelectContent({ children, className, collisionPadding = defaultContentPositioning.collisionPadding, 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, onKeyDown, ref, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
     const context = useSelectContext("Select.Content");
     React.useEffect(() => {
         context.updateContentPositioning({
@@ -200,9 +204,9 @@ function SelectContent({ children, className, collisionPadding = defaultContentP
             }
         }), role: "listbox", style: { ...context.floatingStyle, ...style }, tabIndex: -1, children: children }));
     if (!context.open) {
-        return _jsx(Portal, { children: content });
+        return _jsx(Portal, { ...(container === undefined ? {} : { container }), children: content });
     }
-    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: true, onDismiss: () => context.setOpen(false), children: content }) }));
+    return (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: _jsx(DismissableLayer, { open: true, onDismiss: () => context.setOpen(false), children: content }) }));
 }
 function SelectItem({ children, className, disabled = false, onClick, onKeyDown, ref, value, ...props }) {
     const context = useSelectContext("Select.Item");
@@ -231,9 +235,31 @@ function SelectItem({ children, className, disabled = false, onClick, onKeyDown,
             }
         }), role: "option", tabIndex: disabled ? undefined : -1, children: [_jsx("span", { className: "liano-select__item-indicator", "aria-hidden": "true", children: selected ? "✓" : "" }), _jsx("span", { className: "liano-select__item-label", children: children })] }));
 }
+function SelectGroup({ children, className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("liano-select__group", className), role: "group", children: children }));
+}
+function SelectLabel({ className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("liano-select__label", className) }));
+}
+function SelectSeparator({ className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, "aria-hidden": "true", className: cn("liano-select__separator", className), role: "separator" }));
+}
+function SelectClear({ className, disabled, onClick, ref, type = "button", ...props }) {
+    const context = useSelectContext("Select.Clear");
+    const isDisabled = Boolean(context.disabled) || Boolean(disabled);
+    return (_jsx("button", { ...props, ref: ref, type: type, className: cn("liano-select__clear", className), "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => {
+            if (!isDisabled) {
+                context.selectValue(null);
+            }
+        }) }));
+}
 export const Select = Object.assign(SelectRoot, {
     Content: SelectContent,
+    Clear: SelectClear,
+    Group: SelectGroup,
     Item: SelectItem,
+    Label: SelectLabel,
+    Separator: SelectSeparator,
     Trigger: SelectTrigger,
     Value: SelectValue
 });

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

@@ -1,7 +1,11 @@
 import * as React from "react";
+import type { PortalProps } from "../../internal/portal/index.js";
 export type SheetSide = "left" | "right" | "top" | "bottom";
 export interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {
+    container?: PortalProps["container"];
     defaultOpen?: boolean;
+    disableEscapeKeyDown?: boolean;
+    disableOutsidePointerDown?: boolean;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
     side?: SheetSide;
@@ -11,6 +15,7 @@ export interface SheetTriggerProps extends React.ButtonHTMLAttributes<HTMLButton
     ref?: React.Ref<HTMLButtonElement>;
 }
 export interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    forceMount?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -28,9 +33,9 @@ export interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface SheetCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     ref?: React.Ref<HTMLButtonElement>;
 }
-declare function SheetRoot({ children, className, defaultOpen, onOpenChange, open: openProp, ref, side, ...props }: SheetProps): React.JSX.Element;
+declare function SheetRoot({ children, className, container, defaultOpen, disableEscapeKeyDown, disableOutsidePointerDown, onOpenChange, open: openProp, ref, side, ...props }: SheetProps): React.JSX.Element;
 declare function SheetTrigger({ className, disabled, onClick, ref, type, ...props }: SheetTriggerProps): React.JSX.Element;
-declare function SheetContent({ children, className, ref, ...props }: SheetContentProps): React.JSX.Element | null;
+declare function SheetContent({ children, className, forceMount, 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

@@ -28,7 +28,7 @@ function composeRefs(...refs) {
         }
     };
 }
-function SheetRoot({ children, className, defaultOpen = false, onOpenChange, open: openProp, ref, side = "right", ...props }) {
+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 } : {}),
         defaultValue: defaultOpen,
@@ -55,9 +55,12 @@ function SheetRoot({ children, className, defaultOpen = false, onOpenChange, ope
     }, [open]);
     return (_jsx(SheetContext.Provider, { value: {
             close: () => setOpen(false),
+            ...(container === undefined ? {} : { container }),
             contentId: `${instanceId}-content`,
             descriptionId: `${instanceId}-description`,
             describedBy,
+            disableEscapeKeyDown,
+            disableOutsidePointerDown,
             labelledBy,
             open,
             registerDescription,
@@ -76,12 +79,16 @@ function SheetTrigger({ className, disabled, onClick, ref, type = "button", ...p
             }
         }) }));
 }
-function SheetContent({ children, className, ref, ...props }) {
-    const { close, contentId, describedBy, labelledBy, open, side } = useSheetContext("Sheet.Content");
-    if (!open) {
+function SheetContent({ children, className, forceMount = false, ref, ...props }) {
+    const { close, container, contentId, describedBy, disableEscapeKeyDown, disableOutsidePointerDown, labelledBy, open, side } = useSheetContext("Sheet.Content");
+    if (!open && !forceMount) {
         return null;
     }
-    return (_jsxs(Portal, { children: [_jsx("div", { "aria-hidden": "true", className: "liano-sheet__overlay" }), _jsx(DismissableLayer, { open: open, onDismiss: close, children: _jsx(FocusScope, { active: open, trapped: true, children: _jsx("div", { ...props, ref: ref, id: contentId, role: "dialog", "aria-modal": "true", "aria-describedby": describedBy, "aria-labelledby": labelledBy, className: cn("liano-sheet__content", className), "data-side": side, "data-state": open ? "open" : "closed", children: children }) }) })] }));
+    const content = (_jsx("div", { ...props, ref: ref, id: contentId, role: "dialog", "aria-modal": "true", "aria-describedby": describedBy, "aria-labelledby": labelledBy, className: cn("liano-sheet__content", className), "data-side": side, "data-state": open ? "open" : "closed", hidden: open ? undefined : true, children: children }));
+    if (!open) {
+        return (_jsxs(Portal, { ...(container === undefined ? {} : { container }), children: [_jsx("div", { "aria-hidden": "true", className: "liano-sheet__overlay", hidden: true }), content] }));
+    }
+    return (_jsxs(Portal, { ...(container === undefined ? {} : { container }), children: [_jsx("div", { "aria-hidden": "true", className: "liano-sheet__overlay" }), _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("liano-sheet__header", className) });

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

@@ -1,2 +1,2 @@
 export { Tooltip } from "./tooltip.js";
-export type { TooltipProps } from "./tooltip.js";
+export type { TooltipContentProps, TooltipProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps } from "./tooltip.js";

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { PortalProps } from "../../internal/portal/index.js";
 import type { FloatingPlacement } from "../../internal/floating/index.js";
 export interface TooltipProps {
     children: React.ReactElement;
@@ -7,4 +8,39 @@ export interface TooltipProps {
     delay?: number;
     disabled?: boolean;
 }
-export declare function Tooltip({ children, content, delay, disabled, placement }: TooltipProps): React.JSX.Element;
+export interface TooltipProviderProps {
+    children?: React.ReactNode;
+    delayDuration?: number;
+}
+export interface TooltipRootProps {
+    children?: React.ReactNode;
+    content?: React.ReactNode;
+    placement?: FloatingPlacement;
+    delay?: number;
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface TooltipTriggerProps {
+    children: React.ReactElement;
+}
+export interface TooltipContentProps extends React.HTMLAttributes<HTMLSpanElement> {
+    sideOffset?: number;
+    collisionPadding?: number;
+    forceMount?: boolean;
+    container?: PortalProps["container"];
+    ref?: React.Ref<HTMLSpanElement>;
+}
+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 }: TooltipTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function TooltipContent({ children, className, collisionPadding, container, forceMount, ref, 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;
+    Provider: typeof TooltipProvider;
+    Root: typeof TooltipRoot;
+    Trigger: typeof TooltipTrigger;
+};
+export {};

package/dist/components/tooltip/tooltip.js

@@ -1,9 +1,26 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Portal } from "../../internal/portal/index.js";
 import { useFloatingPosition } from "../../internal/floating/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { cn } from "../../utils/cn.js";
+const defaultContentPositioning = {
+    sideOffset: 8,
+    collisionPadding: 0
+};
+const TooltipProviderContext = React.createContext({
+    delayDuration: 0
+});
+const TooltipRootContext = React.createContext(null);
+function useTooltipRootContext(calledBy) {
+    const context = React.useContext(TooltipRootContext);
+    if (context === null) {
+        throw new Error(`"${calledBy}" must be used within a <Tooltip.Root />`);
+    }
+    return context;
+}
 function composeRefs(...refs) {
     return (node) => {
         for (const ref of refs) {
@@ -24,15 +41,27 @@ function getPlacementParts(placement) {
     const [side, align = "center"] = placement.split("-");
     return { side, align };
 }
-export function Tooltip({ children, content, delay = 0, disabled = false, placement = "bottom" }) {
+function TooltipProvider({ children, delayDuration = 0 }) {
+    const contextValue = React.useMemo(() => ({ delayDuration }), [delayDuration]);
+    return (_jsx(TooltipProviderContext.Provider, { value: contextValue, children: children }));
+}
+function TooltipRoot({ children, defaultOpen = false, delay, disabled = false, onOpenChange, open: openProp, placement = "bottom" }) {
+    const provider = React.useContext(TooltipProviderContext);
     const tooltipId = React.useId();
     const tooltipElementId = `${tooltipId}-content`;
-    const [open, setOpen] = React.useState(false);
+    const resolvedDelay = delay ?? provider.delayDuration;
+    const [open, setOpen] = useControllableState({
+        ...(openProp !== undefined ? { value: openProp } : {}),
+        defaultValue: defaultOpen,
+        ...(onOpenChange ? { onChange: onOpenChange } : {})
+    });
+    const [contentPositioning, setContentPositioning] = React.useState(defaultContentPositioning);
     const openTimeoutRef = React.useRef(null);
     const { floatingRef, floatingStyle, placement: resolvedPlacement, referenceRef, updatePosition } = useFloatingPosition({
         open,
         placement,
-        offset: 8,
+        offset: contentPositioning.sideOffset,
+        collisionPadding: contentPositioning.collisionPadding,
         flip: true,
         shift: true
     });
@@ -48,53 +77,115 @@ export function Tooltip({ children, content, delay = 0, disabled = false, placem
             return;
         }
         clearOpenTimeout();
-        if (delay > 0) {
+        if (resolvedDelay > 0) {
             openTimeoutRef.current = window.setTimeout(() => {
                 setOpen(true);
-            }, delay);
+            }, resolvedDelay);
             return;
         }
         setOpen(true);
-    }, [clearOpenTimeout, delay, disabled]);
+    }, [clearOpenTimeout, disabled, resolvedDelay, setOpen]);
     const closeTooltip = React.useCallback(() => {
         clearOpenTimeout();
         setOpen(false);
-    }, [clearOpenTimeout]);
+    }, [clearOpenTimeout, setOpen]);
     React.useEffect(() => {
         if (!open) {
             return;
         }
         updatePosition();
-    }, [open, content, updatePosition]);
+    }, [open, updatePosition]);
     React.useEffect(() => {
         if (disabled) {
             closeTooltip();
         }
     }, [closeTooltip, disabled]);
+    React.useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                closeTooltip();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [closeTooltip, open]);
     React.useEffect(() => () => clearOpenTimeout(), [clearOpenTimeout]);
-    if (!React.isValidElement(children) || disabled) {
+    const contextValue = React.useMemo(() => ({
+        closeTooltip,
+        contentId: tooltipElementId,
+        disabled,
+        floatingRef,
+        floatingStyle,
+        open,
+        openWithDelay,
+        referenceRef,
+        resolvedPlacement,
+        setContentPositioning
+    }), [
+        closeTooltip,
+        disabled,
+        floatingRef,
+        floatingStyle,
+        open,
+        openWithDelay,
+        referenceRef,
+        resolvedPlacement,
+        tooltipElementId
+    ]);
+    return (_jsx(TooltipRootContext.Provider, { value: contextValue, children: children }));
+}
+function TooltipTrigger({ children }) {
+    const context = useTooltipRootContext("Tooltip.Trigger");
+    if (!React.isValidElement(children) || context.disabled) {
         return children;
     }
     const trigger = children;
     const childProps = trigger.props;
     const childAriaDescribedBy = childProps["aria-describedby"];
-    const triggerAriaDescribedBy = joinIds(typeof childAriaDescribedBy === "string" ? childAriaDescribedBy : undefined, open ? tooltipElementId : undefined);
-    const mergedRef = composeRefs(childProps.ref, referenceRef);
-    const placementParts = getPlacementParts(resolvedPlacement);
-    return (_jsxs(_Fragment, { children: [React.cloneElement(trigger, {
-                ...childProps,
-                ref: mergedRef,
-                "aria-describedby": triggerAriaDescribedBy,
-                onMouseEnter: composeEventHandlers(childProps.onMouseEnter, openWithDelay),
-                onPointerEnter: composeEventHandlers(childProps.onPointerEnter, openWithDelay),
-                onMouseLeave: composeEventHandlers(childProps.onMouseLeave, closeTooltip),
-                onPointerLeave: composeEventHandlers(childProps.onPointerLeave, closeTooltip),
-                onFocus: composeEventHandlers(childProps.onFocus, openWithDelay),
-                onBlur: composeEventHandlers(childProps.onBlur, closeTooltip),
-                onKeyDown: composeEventHandlers(childProps.onKeyDown, (event) => {
-                    if (event.key === "Escape") {
-                        closeTooltip();
-                    }
-                }, { checkDefaultPrevented: false })
-            }), open ? (_jsx(Portal, { children: _jsx("span", { id: tooltipElementId, className: "liano-tooltip", "data-align": placementParts.align, "data-side": placementParts.side, role: "tooltip", ref: floatingRef, style: floatingStyle, children: content }) })) : null] }));
+    const triggerAriaDescribedBy = joinIds(typeof childAriaDescribedBy === "string" ? childAriaDescribedBy : undefined, context.open ? context.contentId : undefined);
+    const mergedRef = composeRefs(childProps.ref, context.referenceRef);
+    return React.cloneElement(trigger, {
+        ...childProps,
+        ref: mergedRef,
+        "aria-describedby": triggerAriaDescribedBy,
+        onMouseEnter: composeEventHandlers(childProps.onMouseEnter, context.openWithDelay),
+        onPointerEnter: composeEventHandlers(childProps.onPointerEnter, context.openWithDelay),
+        onMouseLeave: composeEventHandlers(childProps.onMouseLeave, context.closeTooltip),
+        onPointerLeave: composeEventHandlers(childProps.onPointerLeave, context.closeTooltip),
+        onFocus: composeEventHandlers(childProps.onFocus, context.openWithDelay),
+        onBlur: composeEventHandlers(childProps.onBlur, context.closeTooltip),
+        onKeyDown: composeEventHandlers(childProps.onKeyDown, (event) => {
+            if (event.key === "Escape") {
+                context.closeTooltip();
+            }
+        }, { checkDefaultPrevented: false })
+    });
+}
+function TooltipContent({ children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, ref, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
+    const context = useTooltipRootContext("Tooltip.Content");
+    React.useEffect(() => {
+        context.setContentPositioning({
+            sideOffset,
+            collisionPadding
+        });
+        return () => context.setContentPositioning(defaultContentPositioning);
+    }, [collisionPadding, context, sideOffset]);
+    if (!context.open && !forceMount) {
+        return null;
+    }
+    const placementParts = getPlacementParts(context.resolvedPlacement);
+    const content = (_jsx("span", { ...props, ref: composeRefs(ref, context.floatingRef), id: context.contentId, className: cn("liano-tooltip", className), "data-align": placementParts.align, "data-side": placementParts.side, hidden: context.open ? undefined : true, role: "tooltip", style: { ...context.floatingStyle, ...style }, children: children }));
+    return (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: content }));
+}
+function TooltipWrapper({ children, content, delay = 0, disabled = false, placement = "bottom" }) {
+    return (_jsxs(TooltipRoot, { delay: delay, disabled: disabled, placement: placement, children: [_jsx(TooltipTrigger, { children: children }), _jsx(TooltipContent, { children: content })] }));
 }
+export const Tooltip = Object.assign(TooltipWrapper, {
+    Content: TooltipContent,
+    Provider: TooltipProvider,
+    Root: TooltipRoot,
+    Trigger: TooltipTrigger
+});

package/dist/internal/floating/use-floating-position.js

@@ -73,6 +73,7 @@ export function useFloatingPosition(options) {
             left: `${computed.x}px`,
             top: `${computed.y}px`,
             width: matchReferenceWidth ? `${referenceEl?.offsetWidth ?? computed.referenceWidth}px` : "auto",
+            "--liano-floating-reference-width": `${computed.referenceWidth}px`,
             "--liano-floating-available-width": `${computed.availableWidth}px`,
             "--liano-floating-available-height": `${computed.availableHeight}px`
         });