@zvk/ui 0.1.3 → 0.1.5

package/dist/components/menubar/menubar.js

@@ -1,12 +1,14 @@
 "use client";
-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 { composeEventHandlers } from "../../utils/compose-event-handlers.js";
 import { cn } from "../../utils/cn.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { createCollection } from "../../internal/collection/index.js";
 import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
+import { placementFromSideAlign, placementParts } from "../../internal/floating/placement-aliases.js";
 import { Portal } from "../../internal/portal/index.js";
+import { Slot } from "../../internal/slot/index.js";
 const MenubarContext = React.createContext(null);
 const MenuContext = React.createContext(null);
 function useMenubarContext(calledBy) {
@@ -44,6 +46,18 @@ function activeIndex(records) {
     const enabled = records.filter((record) => record.data.disabled !== true && record.data.ref !== null);
     return enabled.findIndex((record) => record.data.ref === document.activeElement);
 }
+function setComposedRef(internalRef, externalRef, node) {
+    internalRef.current = node;
+    if (typeof externalRef === "function") {
+        externalRef(node);
+    }
+    else if (externalRef !== undefined && externalRef !== null) {
+        externalRef.current = node;
+    }
+}
+function isActivationKey(key) {
+    return key === "Enter" || key === " " || key === "Space" || key === "Spacebar";
+}
 function MenubarRoot({ children, className, defaultValue, onKeyDown, onValueChange, ref, value, ...props }) {
     const [openValue, setOpenValue] = useControllableState({
         ...(value !== undefined ? { value } : {}),
@@ -112,7 +126,7 @@ function MenubarMenu({ children, value }) {
     }, [getItems, open]);
     return _jsx(MenuContext.Provider, { value: contextValue, children: children });
 }
-function MenubarTrigger({ children, className, disabled, onClick, onKeyDown, ref, type = "button", ...props }) {
+function MenubarTrigger({ asChild = false, children, className, disabled, onClick, onKeyDown, ref, type = "button", ...props }) {
     const menubar = useMenubarContext("Menubar.Trigger");
     const menu = useMenuContext("Menubar.Trigger");
     const triggerRef = React.useRef(null);
@@ -123,32 +137,50 @@ function MenubarTrigger({ children, className, disabled, onClick, onKeyDown, ref
         menubar.registerTrigger(itemId, { disabled, ref: triggerRef.current, value: menu.value });
         return () => menubar.unregisterTrigger(itemId);
     }, [disabled, itemId, label, menu, menubar]);
+    const handleClick = () => {
+        if (!disabled) {
+            menubar.setOpenValue(menu.open ? undefined : menu.value);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "ArrowDown" || isActivationKey(event.key)) {
+            event.preventDefault();
+            menubar.setOpenValue(menu.value);
+        }
+    };
+    const triggerProps = {
+        ...props,
+        ref: (node) => {
+            setComposedRef(triggerRef, ref, node);
+        },
+        id: menu.triggerId,
+        role: "menuitem",
+        "aria-controls": menu.contentId,
+        "aria-disabled": disabled ? true : undefined,
+        "aria-expanded": menu.open,
+        "aria-haspopup": "menu",
+        className: cn("liano-menubar__trigger", className),
+        "data-disabled": disabled ? "true" : undefined,
+        "data-state": menu.open ? "open" : "closed",
+        onClick: composeEventHandlers(onClick, handleClick),
+        onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown)
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...triggerProps, children: children });
+    }
     return (_jsx("button", { ...props, ref: (node) => {
-            triggerRef.current = node;
-            if (typeof ref === "function") {
-                ref(node);
-            }
-            else if (ref) {
-                ref.current = node;
-            }
-        }, id: menu.triggerId, type: type, role: "menuitem", disabled: disabled, "aria-controls": menu.contentId, "aria-expanded": menu.open ? "true" : "false", "aria-haspopup": "menu", className: cn("liano-menubar__trigger", className), "data-state": menu.open ? "open" : "closed", onClick: composeEventHandlers(onClick, () => {
-            if (!disabled) {
-                menubar.setOpenValue(menu.open ? undefined : menu.value);
-            }
-        }), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
-            if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                menubar.setOpenValue(menu.value);
-            }
-        }), children: children }));
+            setComposedRef(triggerRef, ref, node);
+        }, id: menu.triggerId, type: type, role: "menuitem", disabled: disabled, "aria-controls": menu.contentId, "aria-expanded": menu.open ? "true" : "false", "aria-haspopup": "menu", className: cn("liano-menubar__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": menu.open ? "open" : "closed", onClick: triggerProps.onClick, onKeyDown: triggerProps.onKeyDown, children: children }));
 }
-function MenubarContent({ children, className, onKeyDown, ref, ...props }) {
+function MenubarContent({ align, alignOffset: _alignOffset, children, className, onKeyDown, ref, side, sideOffset: _sideOffset, ...props }) {
     const menubar = useMenubarContext("Menubar.Content");
     const menu = useMenuContext("Menubar.Content");
+    const contentPlacement = placementFromSideAlign(side, align, "bottom-start");
+    const contentPlacementParts = placementParts(contentPlacement);
     if (!menu.open) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: menu.open, onDismiss: () => menubar.setOpenValue(undefined), children: _jsx("div", { ...props, ref: ref, id: menu.contentId, role: "menu", "aria-label": menu.label, "aria-labelledby": menu.triggerId, className: cn("liano-menubar__content", className), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: menu.open, onDismiss: () => menubar.setOpenValue(undefined), children: _jsx("div", { ...props, ref: ref, id: menu.contentId, role: "menu", "aria-label": menu.label, "aria-labelledby": menu.triggerId, className: cn("liano-menubar__content", className), "data-align": contentPlacementParts.align, "data-side": contentPlacementParts.side, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
                     const items = menu.getItems();
                     const index = activeIndex(items);
                     if (event.key === "ArrowDown") {
@@ -166,7 +198,7 @@ function MenubarContent({ children, className, onKeyDown, ref, ...props }) {
                     }
                 }), children: children }) }) }));
 }
-function MenubarItem({ children, className, disabled, onClick, onKeyDown, onSelect, ref, type = "button", ...props }) {
+function MenubarItem({ asChild = false, children, className, disabled, onClick, onKeyDown, onSelect, ref, type = "button", ...props }) {
     const menubar = useMenubarContext("Menubar.Item");
     const menu = useMenuContext("Menubar.Item");
     const { getItems, open, registerItem, unregisterItem } = menu;
@@ -185,22 +217,137 @@ function MenubarItem({ children, className, disabled, onClick, onKeyDown, onSele
             return;
         }
         onSelect?.(event);
-        menubar.setOpenValue(undefined);
+        if (!event.defaultPrevented) {
+            menubar.setOpenValue(undefined);
+        }
     };
-    return (_jsx("button", { ...props, ref: (node) => {
-            itemRef.current = node;
-            if (typeof ref === "function") {
-                ref(node);
-            }
-            else if (ref) {
-                ref.current = node;
+    const itemProps = {
+        ...props,
+        ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        },
+        role: "menuitem",
+        "aria-disabled": disabled ? true : undefined,
+        className: cn("liano-menubar__item", className),
+        "data-disabled": disabled ? "true" : undefined,
+        onClick: composeEventHandlers(onClick, select),
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (isActivationKey(event.key)) {
+                select(event);
+                event.preventDefault();
             }
-        }, type: type, role: "menuitem", disabled: disabled, "aria-disabled": disabled ? "true" : undefined, className: cn("liano-menubar__item", className), "data-disabled": disabled ? "true" : undefined, onClick: composeEventHandlers(onClick, select), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
-            if (event.key === "Enter" || event.key === " ") {
+        })
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...itemProps, children: children });
+    }
+    return (_jsx("button", { ...props, ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        }, type: type, role: "menuitem", disabled: disabled, "aria-disabled": itemProps["aria-disabled"], className: itemProps.className, "data-disabled": itemProps["data-disabled"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: children }));
+}
+function MenubarCheckboxItem({ asChild = false, checked, children, className, defaultChecked = false, disabled, onCheckedChange, onClick, onKeyDown, onSelect, ref, type = "button", ...props }) {
+    const menubar = useMenubarContext("Menubar.CheckboxItem");
+    const menu = useMenuContext("Menubar.CheckboxItem");
+    const { getItems, open, registerItem, unregisterItem } = menu;
+    const itemId = React.useId();
+    const itemRef = React.useRef(null);
+    const [currentChecked, setCurrentChecked] = useControllableState({
+        ...(checked !== undefined ? { value: checked } : {}),
+        defaultValue: defaultChecked,
+        ...(onCheckedChange ? { onChange: onCheckedChange } : {})
+    });
+    React.useLayoutEffect(() => {
+        registerItem(itemId, { disabled, ref: itemRef.current });
+        const firstEnabled = getItems().find((item) => item.data.disabled !== true && item.data.ref !== null);
+        if (open && firstEnabled?.id === itemId) {
+            itemRef.current?.focus();
+        }
+        return () => unregisterItem(itemId);
+    }, [disabled, getItems, itemId, open, registerItem, unregisterItem]);
+    const select = (event) => {
+        if (disabled) {
+            return;
+        }
+        onSelect?.(event);
+        if (!event.defaultPrevented) {
+            setCurrentChecked((value) => !value);
+            menubar.setOpenValue(undefined);
+        }
+    };
+    const itemProps = {
+        ...props,
+        ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        },
+        role: "menuitemcheckbox",
+        "aria-checked": currentChecked,
+        "aria-disabled": disabled ? true : undefined,
+        className: cn("liano-menubar__item", "liano-menubar__checkbox-item", className),
+        "data-checked": currentChecked ? "true" : undefined,
+        "data-disabled": disabled ? "true" : undefined,
+        onClick: composeEventHandlers(onClick, select),
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (isActivationKey(event.key)) {
+                select(event);
                 event.preventDefault();
+            }
+        })
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...itemProps, children: children });
+    }
+    return (_jsxs("button", { ...props, ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        }, type: type, role: "menuitemcheckbox", disabled: disabled, "aria-checked": itemProps["aria-checked"], "aria-disabled": itemProps["aria-disabled"], className: itemProps.className, "data-checked": itemProps["data-checked"], "data-disabled": itemProps["data-disabled"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: [_jsx("span", { className: "liano-menubar__item-indicator", "aria-hidden": "true", children: currentChecked ? "✓" : "" }), _jsx("span", { className: "liano-menubar__item-label", children: children })] }));
+}
+function MenubarRadioItem({ asChild = false, checked = false, children, className, disabled, onClick, onKeyDown, onSelect, ref, type = "button", ...props }) {
+    const menubar = useMenubarContext("Menubar.RadioItem");
+    const menu = useMenuContext("Menubar.RadioItem");
+    const { getItems, open, registerItem, unregisterItem } = menu;
+    const itemId = React.useId();
+    const itemRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        registerItem(itemId, { disabled, ref: itemRef.current });
+        const firstEnabled = getItems().find((item) => item.data.disabled !== true && item.data.ref !== null);
+        if (open && firstEnabled?.id === itemId) {
+            itemRef.current?.focus();
+        }
+        return () => unregisterItem(itemId);
+    }, [disabled, getItems, itemId, open, registerItem, unregisterItem]);
+    const select = (event) => {
+        if (disabled) {
+            return;
+        }
+        onSelect?.(event);
+        if (!event.defaultPrevented) {
+            menubar.setOpenValue(undefined);
+        }
+    };
+    const itemProps = {
+        ...props,
+        ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        },
+        role: "menuitemradio",
+        "aria-checked": checked,
+        "aria-disabled": disabled ? true : undefined,
+        className: cn("liano-menubar__item", "liano-menubar__radio-item", className),
+        "data-checked": checked ? "true" : undefined,
+        "data-disabled": disabled ? "true" : undefined,
+        onClick: composeEventHandlers(onClick, select),
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (isActivationKey(event.key)) {
                 select(event);
+                event.preventDefault();
             }
-        }), children: children }));
+        })
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...itemProps, children: children });
+    }
+    return (_jsxs("button", { ...props, ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        }, type: type, role: "menuitemradio", disabled: disabled, "aria-checked": itemProps["aria-checked"], "aria-disabled": itemProps["aria-disabled"], className: itemProps.className, "data-checked": itemProps["data-checked"], "data-disabled": itemProps["data-disabled"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: [_jsx("span", { className: "liano-menubar__item-indicator", "aria-hidden": "true", children: checked ? "●" : "" }), _jsx("span", { className: "liano-menubar__item-label", children: children })] }));
 }
 function MenubarSeparator({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("liano-menubar__separator", className) });
@@ -212,10 +359,12 @@ function MenubarShortcut({ className, ref, ...props }) {
     return _jsx("span", { ...props, ref: ref, className: cn("liano-menubar__shortcut", className) });
 }
 export const Menubar = Object.assign(MenubarRoot, {
+    CheckboxItem: MenubarCheckboxItem,
     Content: MenubarContent,
     Item: MenubarItem,
     Label: MenubarLabel,
     Menu: MenubarMenu,
+    RadioItem: MenubarRadioItem,
     Separator: MenubarSeparator,
     Shortcut: MenubarShortcut,
     Trigger: MenubarTrigger

package/dist/components/popover/popover.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { PortalProps } from "../../internal/portal/index.js";
 import type { FloatingPlacement } from "../../internal/floating/floating-types.js";
+import type { FloatingAlign, FloatingSide } from "../../internal/floating/placement-aliases.js";
 export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     defaultOpen?: boolean;
@@ -10,10 +11,14 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
     placement?: FloatingPlacement;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    alignOffset?: number;
     sideOffset?: number;
     collisionPadding?: number;
     matchTriggerWidth?: boolean;
@@ -24,8 +29,8 @@ export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement
     ref?: React.Ref<HTMLDivElement>;
 }
 declare function PopoverRoot({ children, className, defaultOpen, modal, onOpenChange, open, placement, ref, ...props }: PopoverProps): React.JSX.Element;
-declare function PopoverTrigger({ className, onClick, ref, type, ...props }: PopoverTriggerProps): React.JSX.Element;
-declare function PopoverContent({ className, container, forceMount, id, disableEscapeKeyDown, disableOutsidePointerDown, ref, placement, sideOffset, collisionPadding, matchTriggerWidth, style, ...props }: PopoverContentProps): React.JSX.Element | null;
+declare function PopoverTrigger({ asChild, className, disabled, onClick, ref, type, ...props }: PopoverTriggerProps): React.JSX.Element;
+declare function PopoverContent({ align, alignOffset: _alignOffset, className, container, forceMount, id, disableEscapeKeyDown, disableOutsidePointerDown, ref, placement, side, sideOffset, collisionPadding, matchTriggerWidth, style, ...props }: PopoverContentProps): React.JSX.Element | null;
 export declare const Popover: typeof PopoverRoot & {
     Trigger: typeof PopoverTrigger;
     Content: typeof PopoverContent;

package/dist/components/popover/popover.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 { placementFromSideAlign } from "../../internal/floating/placement-aliases.js";
+import { Slot } from "../../internal/slot/index.js";
 const defaultPositioning = {
     sideOffset: 0,
     collisionPadding: 0,
@@ -97,18 +99,24 @@ function PopoverRoot({ children, className, defaultOpen = false, modal = false,
             updateContentPositioning
         }, children: _jsx("div", { ...props, ref: handleRef, className: cn("liano-popover", className), "data-state": isOpen ? "open" : "closed", children: children }) }));
 }
-function PopoverTrigger({ className, onClick, ref, type = "button", ...props }) {
+function PopoverTrigger({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const context = usePopoverContext("Popover.Trigger");
     const handleClick = () => {
+        if (disabled) {
+            return;
+        }
         context.setOpen((value) => !value);
     };
     const handleRef = React.useCallback((node) => {
         context.referenceRef(node);
         mergeRef(ref, node);
     }, [context.referenceRef, ref]);
-    return (_jsx("button", { ...props, ref: handleRef, type: type, className: cn("liano-popover__trigger", className), "aria-expanded": context.open, "aria-controls": context.contentId, "aria-haspopup": "dialog", "data-state": context.open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: handleRef, "aria-controls": context.contentId, "aria-disabled": disabled ? true : undefined, "aria-expanded": context.open, "aria-haspopup": "dialog", className: cn("liano-popover__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": context.open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick), children: props.children }));
+    }
+    return (_jsx("button", { ...props, ref: handleRef, type: type, disabled: disabled, className: cn("liano-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({ className, container, forceMount = false, id, disableEscapeKeyDown = false, disableOutsidePointerDown = false, ref, placement, sideOffset = 0, collisionPadding = 0, matchTriggerWidth = false, style, ...props }) {
+function PopoverContent({ align, alignOffset: _alignOffset, className, container, forceMount = false, id, disableEscapeKeyDown = false, disableOutsidePointerDown = false, 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);
@@ -140,8 +148,9 @@ function PopoverContent({ className, container, forceMount = false, id, disableE
         }
     }, [context.referenceElement]);
     React.useEffect(() => {
+        const resolvedPlacement = side === undefined ? placement : placementFromSideAlign(side, align, placement ?? "bottom");
         context.updateContentPositioning({
-            ...(placement === undefined ? {} : { placement }),
+            ...(resolvedPlacement === undefined ? {} : { placement: resolvedPlacement }),
             sideOffset,
             collisionPadding,
             matchTriggerWidth
@@ -149,7 +158,7 @@ function PopoverContent({ className, container, forceMount = false, id, disableE
         return () => {
             context.updateContentPositioning(defaultPositioning);
         };
-    }, [context.updateContentPositioning, collisionPadding, matchTriggerWidth, placement, sideOffset]);
+    }, [align, context.updateContentPositioning, collisionPadding, matchTriggerWidth, placement, side, sideOffset]);
     if (!forceMount && !context.open) {
         return null;
     }

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

@@ -12,7 +12,8 @@ export interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface SheetTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 export interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
     forceMount?: boolean;
@@ -31,16 +32,17 @@ export interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface SheetCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 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 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 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;
 declare function SheetFooter({ className, ref, ...props }: SheetFooterProps): React.JSX.Element;
-declare function SheetClose({ className, onClick, ref, type, ...props }: SheetCloseProps): React.JSX.Element;
+declare function SheetClose({ asChild, className, disabled, onClick, ref, type, ...props }: SheetCloseProps): React.JSX.Element;
 type SheetComponent = typeof SheetRoot & {
     Close: typeof SheetClose;
     Content: typeof SheetContent;

package/dist/components/sheet/sheet.js

@@ -8,6 +8,7 @@ import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
 import { FocusScope } from "../../internal/focus/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";
 const SheetContext = React.createContext(null);
 function useSheetContext(calledBy) {
     const context = React.useContext(SheetContext);
@@ -71,13 +72,17 @@ function SheetRoot({ children, className, container, defaultOpen = false, disabl
             triggerRef
         }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-sheet", className), "data-state": open ? "open" : "closed", children: children }) }));
 }
-function SheetTrigger({ className, disabled, onClick, ref, type = "button", ...props }) {
+function SheetTrigger({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const { contentId, open, setOpen, triggerRef } = useSheetContext("Sheet.Trigger");
-    return (_jsx("button", { ...props, ref: composeRefs(ref, triggerRef), type: type, disabled: disabled, "aria-controls": contentId, "aria-expanded": open ? "true" : "false", className: cn("liano-sheet__trigger", className), "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, () => {
-            if (!disabled) {
-                setOpen(true);
-            }
-        }) }));
+    const handleClick = () => {
+        if (!disabled) {
+            setOpen(true);
+        }
+    };
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: composeRefs(ref, triggerRef), "aria-controls": contentId, "aria-disabled": disabled ? true : undefined, "aria-expanded": open ? "true" : "false", className: cn("liano-sheet__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick), children: props.children }));
+    }
+    return (_jsx("button", { ...props, ref: composeRefs(ref, triggerRef), type: type, disabled: disabled, "aria-controls": contentId, "aria-expanded": open ? "true" : "false", className: cn("liano-sheet__trigger", className), "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
 }
 function SheetContent({ children, className, forceMount = false, ref, ...props }) {
     const { close, container, contentId, describedBy, disableEscapeKeyDown, disableOutsidePointerDown, labelledBy, open, side } = useSheetContext("Sheet.Content");
@@ -108,9 +113,17 @@ function SheetDescription({ className, ref, ...props }) {
 function SheetFooter({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, className: cn("liano-sheet__footer", className) });
 }
-function SheetClose({ className, onClick, ref, type = "button", ...props }) {
+function SheetClose({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const { close } = useSheetContext("Sheet.Close");
-    return (_jsx("button", { ...props, ref: ref, type: type, className: cn("liano-sheet__close", className), onClick: composeEventHandlers(onClick, close) }));
+    const handleClick = () => {
+        if (!disabled) {
+            close();
+        }
+    };
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: ref, "aria-disabled": disabled ? true : undefined, className: cn("liano-sheet__close", className), "data-disabled": disabled ? "true" : undefined, onClick: composeEventHandlers(onClick, handleClick), children: props.children }));
+    }
+    return (_jsx("button", { ...props, ref: ref, type: type, disabled: disabled, className: cn("liano-sheet__close", className), onClick: composeEventHandlers(onClick, handleClick) }));
 }
 export const Sheet = Object.assign(SheetRoot, {
     Close: SheetClose,

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

@@ -1,2 +1,2 @@
-export { createToastController, Toast, ToastProvider, ToastViewport, useToast } from "./toast.js";
-export type { ToastActionProps, ToastCloseProps, ToastController, ToastInput, ToastOptions, ToastPlacement, ToastProviderProps, ToastProps, ToastTextProps, ToastTone, ToastViewportProps } from "./toast.js";
+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";

package/dist/components/toast/index.js

@@ -1,2 +1,2 @@
 "use client";
-export { createToastController, Toast, ToastProvider, ToastViewport, useToast } from "./toast.js";
+export { createToastController, toast, Toast, Toaster, ToastProvider, ToastViewport, useToast } from "./toast.js";

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

@@ -1,16 +1,21 @@
 import * as React from "react";
 export type ToastTone = "neutral" | "success" | "warning" | "destructive" | "info";
 export type ToastPlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+export type ToasterPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export type ToastInput = string | {
     title?: React.ReactNode;
     description?: React.ReactNode;
 };
+export type ToastActionInput = React.ReactNode | {
+    label: React.ReactNode;
+    onClick: () => void;
+};
 export type ToastOptions = {
     id?: string;
     description?: React.ReactNode;
     duration?: number;
-    action?: React.ReactNode;
-    cancel?: React.ReactNode;
+    action?: ToastActionInput;
+    cancel?: ToastActionInput;
 };
 export type ToastController = {
     (input: ToastInput, options?: ToastOptions): string;
@@ -41,10 +46,19 @@ export interface ToastProviderProps extends Omit<ToastViewportProps, "children">
     children?: React.ReactNode;
     controller?: ToastController;
 }
+export interface ToasterProps extends Omit<ToastProviderProps, "placement"> {
+    position?: ToasterPosition;
+    richColors?: boolean;
+    expand?: boolean;
+    offset?: number | string;
+    toastOptions?: ToastOptions;
+}
 export declare function ToastViewport({ className, placement, ref, ...props }: ToastViewportProps): React.ReactElement;
 export declare function createToastController(): ToastController;
+export declare const toast: ToastController;
 export declare function useToast(): ToastController;
 export declare function ToastProvider({ children, controller, placement, ref, ...viewportProps }: ToastProviderProps): React.ReactElement;
+export declare function Toaster({ controller, expand: _expand, offset, position, richColors: _richColors, style, toastOptions: _toastOptions, ...props }: ToasterProps): React.ReactElement;
 declare function ToastRoot({ className, ref, role, tone, ...props }: ToastProps): React.JSX.Element;
 declare function ToastTitle({ className, ref, ...props }: ToastTextProps): React.JSX.Element;
 declare function ToastDescription({ className, ref, ...props }: ToastTextProps): React.JSX.Element;

package/dist/components/toast/toast.js

@@ -27,6 +27,36 @@ function resolveToastContent(input, options) {
         description: options.description ?? input.description
     };
 }
+function mapToPlacement(position) {
+    if (position === "top-center") {
+        return "top-right";
+    }
+    if (position === "bottom-center") {
+        return "bottom-right";
+    }
+    return position;
+}
+function toastTypeFromTone(tone) {
+    if (tone === "destructive") {
+        return "error";
+    }
+    if (tone === "neutral") {
+        return "default";
+    }
+    return tone;
+}
+function isToastActionObject(input) {
+    return typeof input === "object" && input !== null && !React.isValidElement(input) && "label" in input && "onClick" in input;
+}
+function renderToastControl(input) {
+    if (input === undefined) {
+        return null;
+    }
+    if (isToastActionObject(input)) {
+        return _jsx(Toast.Action, { onClick: input.onClick, children: input.label });
+    }
+    return input;
+}
 export function ToastViewport({ className, placement = "top-right", ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Notifications", className: cn("liano-toast-viewport", className), "data-placement": placement, role: "region" }));
 }
@@ -76,6 +106,7 @@ export function createToastController() {
     });
     return controller;
 }
+export const toast = createToastController();
 export function useToast() {
     const controller = React.useContext(ToastControllerContext);
     if (!controller) {
@@ -94,6 +125,16 @@ export function ToastProvider({ children, controller, placement = "top-right", r
     const viewportRefProps = ref ? { ref } : {};
     return (_jsxs(ToastControllerContext.Provider, { value: activeController, children: [children, _jsx(ToastViewport, { ...viewportProps, ...viewportRefProps, placement: placement, children: toasts.map((toast) => (_jsx(ToastProviderItem, { toast: toast, onDismiss: dismissToast }, toast.id))) })] }));
 }
+export function Toaster({ controller = toast, expand: _expand, offset, position = "top-right", richColors: _richColors, style, toastOptions: _toastOptions, ...props }) {
+    const placement = mapToPlacement(position);
+    const offsetStyle = offset === undefined
+        ? style
+        : {
+            ...style,
+            "--liano-toast-viewport-inset": typeof offset === "number" ? `${offset}px` : offset
+        };
+    return (_jsx(ToastProvider, { ...props, controller: controller, placement: placement, ...(offsetStyle === undefined ? {} : { style: offsetStyle }) }));
+}
 function ToastProviderItem({ onDismiss, toast }) {
     React.useEffect(() => {
         if (toast.duration === Infinity) {
@@ -102,10 +143,11 @@ function ToastProviderItem({ onDismiss, toast }) {
         const timeout = window.setTimeout(() => onDismiss(toast.id), toast.duration);
         return () => window.clearTimeout(timeout);
     }, [onDismiss, toast.duration, toast.id, toast.version]);
-    return (_jsxs(Toast, { tone: toast.tone, children: [(toast.title || toast.description) && (_jsxs("div", { className: "liano-toast__content", children: [toast.title && _jsx(Toast.Title, { children: toast.title }), toast.description && _jsx(Toast.Description, { children: toast.description })] })), (toast.action || toast.cancel) && (_jsxs("div", { className: "liano-toast__controls", children: [toast.action, toast.cancel] })), _jsx(Toast.Close, { "aria-label": "Dismiss notification", onClick: () => onDismiss(toast.id) })] }));
+    return (_jsxs(Toast, { tone: toast.tone, children: [(toast.title || toast.description) && (_jsxs("div", { className: "liano-toast__content", children: [toast.title && _jsx(Toast.Title, { children: toast.title }), toast.description && _jsx(Toast.Description, { children: toast.description })] })), (toast.action || toast.cancel) && (_jsxs("div", { className: "liano-toast__controls", children: [renderToastControl(toast.action), renderToastControl(toast.cancel)] })), _jsx(Toast.Close, { "aria-label": "Dismiss notification", onClick: () => onDismiss(toast.id) })] }));
 }
 function ToastRoot({ className, ref, role, tone = "neutral", ...props }) {
-    return (_jsx("div", { ...props, ref: ref, className: cn("liano-toast", className), "data-tone": tone, role: role ?? (tone === "destructive" ? "alert" : "status") }));
+    const toastType = toastTypeFromTone(tone);
+    return (_jsx("div", { ...props, ref: ref, className: cn("liano-toast", className), "data-sonner-toast": "", "data-tone": tone, "data-type": toastType, "data-visible": "true", role: role ?? (tone === "destructive" ? "alert" : "status") }));
 }
 function ToastTitle({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, className: cn("liano-toast__title", className) });

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { PortalProps } from "../../internal/portal/index.js";
 import type { FloatingPlacement } from "../../internal/floating/index.js";
+import type { FloatingAlign, FloatingSide } from "../../internal/floating/placement-aliases.js";
 export interface TooltipProps {
     children: React.ReactElement;
     content: React.ReactNode;
@@ -23,9 +24,14 @@ export interface TooltipRootProps {
     onOpenChange?: (open: boolean) => void;
 }
 export interface TooltipTriggerProps {
+    asChild?: boolean;
     children: React.ReactElement;
 }
 export interface TooltipContentProps extends React.HTMLAttributes<HTMLSpanElement> {
+    placement?: FloatingPlacement;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    alignOffset?: number;
     sideOffset?: number;
     collisionPadding?: number;
     forceMount?: boolean;
@@ -34,8 +40,8 @@ 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 }: 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 TooltipTrigger({ children, asChild: _asChild }: TooltipTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function TooltipContent({ align, alignOffset: _alignOffset, children, className, collisionPadding, container, forceMount, 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;