@zvk/ui 0.1.1 → 0.1.3

package/dist/components/hover-card/hover-card.js

@@ -0,0 +1,268 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
+import { useFloatingPosition } from "../../internal/floating/index.js";
+import { Portal } from "../../internal/portal/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { cn } from "../../utils/cn.js";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+const defaultContentPositioning = {
+    sideOffset: 8,
+    collisionPadding: 0
+};
+const HoverCardContext = React.createContext(null);
+function useHoverCardContext(calledBy) {
+    const context = React.useContext(HoverCardContext);
+    if (context === null) {
+        throw new Error(`"${calledBy}" must be used within a <HoverCard />`);
+    }
+    return context;
+}
+function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref !== undefined) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function joinIds(...ids) {
+    const value = ids.filter((id) => id !== undefined && id !== "").join(" ");
+    return value.length > 0 ? value : undefined;
+}
+function getPlacementParts(placement) {
+    const [side, align = "center"] = placement.split("-");
+    return { side, align };
+}
+function HoverCardRoot({ children, closeDelay = 300, defaultOpen = false, disabled = false, onOpenChange, open: openProp, openDelay = 700, placement = "bottom" }) {
+    const generatedId = React.useId();
+    const contentId = `${generatedId}-content`;
+    const [open, setOpen] = useControllableState({
+        ...(openProp !== undefined ? { value: openProp } : {}),
+        defaultValue: defaultOpen,
+        ...(onOpenChange ? { onChange: onOpenChange } : {})
+    });
+    const [contentPositioning, setContentPositioning] = React.useState(defaultContentPositioning);
+    const openTimerRef = React.useRef(null);
+    const closeTimerRef = React.useRef(null);
+    const focusCloseTimerRef = React.useRef(null);
+    const referenceElement = React.useRef(null);
+    const contentElement = React.useRef(null);
+    const { floatingRef, floatingStyle, placement: resolvedPlacement, referenceRef, updatePosition } = useFloatingPosition({
+        open,
+        placement,
+        offset: contentPositioning.sideOffset,
+        collisionPadding: contentPositioning.collisionPadding,
+        flip: true,
+        shift: true
+    });
+    const clearOpenTimer = React.useCallback(() => {
+        if (openTimerRef.current === null) {
+            return;
+        }
+        window.clearTimeout(openTimerRef.current);
+        openTimerRef.current = null;
+    }, []);
+    const clearCloseTimer = React.useCallback(() => {
+        if (closeTimerRef.current === null) {
+            return;
+        }
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+    }, []);
+    const clearFocusCloseTimer = React.useCallback(() => {
+        if (focusCloseTimerRef.current === null) {
+            return;
+        }
+        window.clearTimeout(focusCloseTimerRef.current);
+        focusCloseTimerRef.current = null;
+    }, []);
+    const close = React.useCallback(() => {
+        clearOpenTimer();
+        clearCloseTimer();
+        clearFocusCloseTimer();
+        setOpen(false);
+    }, [clearCloseTimer, clearFocusCloseTimer, clearOpenTimer, setOpen]);
+    const openImmediately = React.useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        clearOpenTimer();
+        clearCloseTimer();
+        clearFocusCloseTimer();
+        setOpen(true);
+    }, [clearCloseTimer, clearFocusCloseTimer, clearOpenTimer, disabled, setOpen]);
+    const openWithDelay = React.useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        clearOpenTimer();
+        clearCloseTimer();
+        clearFocusCloseTimer();
+        if (openDelay > 0) {
+            openTimerRef.current = window.setTimeout(() => {
+                setOpen(true);
+            }, openDelay);
+            return;
+        }
+        setOpen(true);
+    }, [clearCloseTimer, clearFocusCloseTimer, clearOpenTimer, disabled, openDelay, setOpen]);
+    const closeWithDelay = React.useCallback(() => {
+        clearOpenTimer();
+        clearCloseTimer();
+        if (closeDelay > 0) {
+            closeTimerRef.current = window.setTimeout(() => {
+                setOpen(false);
+            }, closeDelay);
+            return;
+        }
+        setOpen(false);
+    }, [clearCloseTimer, clearOpenTimer, closeDelay, setOpen]);
+    const isInsideHoverCard = React.useCallback((node) => {
+        if (node === null) {
+            return false;
+        }
+        return Boolean(referenceElement.current?.contains(node) || contentElement.current?.contains(node));
+    }, []);
+    const closeAfterFocusLeaves = React.useCallback((nextTarget) => {
+        clearFocusCloseTimer();
+        if (isInsideHoverCard(nextTarget)) {
+            return;
+        }
+        if (nextTarget !== null) {
+            close();
+            return;
+        }
+        focusCloseTimerRef.current = window.setTimeout(() => {
+            focusCloseTimerRef.current = null;
+            if (!isInsideHoverCard(document.activeElement)) {
+                close();
+            }
+        }, 0);
+    }, [clearFocusCloseTimer, close, isInsideHoverCard]);
+    const setReferenceRef = React.useCallback((node) => {
+        referenceElement.current = node;
+        referenceRef(node);
+    }, [referenceRef]);
+    const setFloatingRef = React.useCallback((node) => {
+        contentElement.current = node;
+        floatingRef(node);
+    }, [floatingRef]);
+    React.useEffect(() => {
+        if (open) {
+            updatePosition();
+        }
+    }, [open, updatePosition]);
+    React.useEffect(() => {
+        if (disabled) {
+            close();
+        }
+    }, [close, disabled]);
+    React.useEffect(() => () => {
+        clearOpenTimer();
+        clearCloseTimer();
+        clearFocusCloseTimer();
+    }, [clearCloseTimer, clearFocusCloseTimer, clearOpenTimer]);
+    const contextValue = React.useMemo(() => ({
+        cancelClose: clearCloseTimer,
+        close,
+        closeWithDelay,
+        closeAfterFocusLeaves,
+        contentElement,
+        contentId,
+        disabled,
+        floatingRef: setFloatingRef,
+        floatingStyle,
+        isInsideHoverCard,
+        open,
+        openImmediately,
+        openWithDelay,
+        referenceElement,
+        referenceRef: setReferenceRef,
+        resolvedPlacement,
+        setContentPositioning
+    }), [
+        clearCloseTimer,
+        close,
+        closeWithDelay,
+        closeAfterFocusLeaves,
+        contentId,
+        disabled,
+        floatingStyle,
+        isInsideHoverCard,
+        open,
+        openImmediately,
+        openWithDelay,
+        resolvedPlacement,
+        setFloatingRef,
+        setReferenceRef
+    ]);
+    return (_jsx(HoverCardContext.Provider, { value: contextValue, children: children }));
+}
+function HoverCardTrigger({ children }) {
+    const context = useHoverCardContext("HoverCard.Trigger");
+    if (!React.isValidElement(children) || context.disabled) {
+        return children;
+    }
+    const trigger = children;
+    const childProps = trigger.props;
+    const childClassName = typeof childProps.className === "string" ? childProps.className : undefined;
+    const childAriaControls = childProps["aria-controls"];
+    const childAriaDescribedBy = childProps["aria-describedby"];
+    return React.cloneElement(trigger, {
+        ...childProps,
+        ref: composeRefs(childProps.ref, context.referenceRef),
+        "aria-controls": joinIds(typeof childAriaControls === "string" ? childAriaControls : undefined, context.contentId),
+        "aria-describedby": joinIds(typeof childAriaDescribedBy === "string" ? childAriaDescribedBy : undefined, context.open ? context.contentId : undefined),
+        "aria-expanded": context.open,
+        "aria-haspopup": "dialog",
+        className: cn("liano-hover-card__trigger", childClassName),
+        "data-state": context.open ? "open" : "closed",
+        onBlur: composeEventHandlers(childProps.onBlur, (event) => {
+            context.closeAfterFocusLeaves(event.relatedTarget);
+        }),
+        onFocus: composeEventHandlers(childProps.onFocus, context.openImmediately),
+        onMouseEnter: composeEventHandlers(childProps.onMouseEnter, context.openWithDelay),
+        onMouseLeave: composeEventHandlers(childProps.onMouseLeave, context.closeWithDelay),
+        onPointerEnter: composeEventHandlers(childProps.onPointerEnter, context.openWithDelay),
+        onPointerLeave: composeEventHandlers(childProps.onPointerLeave, context.closeWithDelay)
+    });
+}
+function HoverCardContent({ children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, id, onBlur, onFocus, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, ref, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
+    const context = useHoverCardContext("HoverCard.Content");
+    const contentId = id ?? context.contentId;
+    const placementParts = getPlacementParts(context.resolvedPlacement);
+    const { setContentPositioning } = context;
+    React.useEffect(() => {
+        setContentPositioning({
+            sideOffset,
+            collisionPadding
+        });
+        return () => setContentPositioning(defaultContentPositioning);
+    }, [collisionPadding, setContentPositioning, sideOffset]);
+    if (!context.open && !forceMount) {
+        return null;
+    }
+    const content = (_jsx("div", { ...props, ref: composeRefs(ref, context.floatingRef), id: contentId, role: "dialog", className: cn("liano-hover-card__content", className), "data-align": placementParts.align, "data-side": placementParts.side, "data-state": context.open ? "open" : "closed", hidden: context.open ? undefined : true, onBlur: composeEventHandlers(onBlur, (event) => {
+            context.closeAfterFocusLeaves(event.relatedTarget);
+        }), onFocus: composeEventHandlers(onFocus, context.openImmediately), onMouseEnter: composeEventHandlers(onMouseEnter, context.cancelClose), onMouseLeave: composeEventHandlers(onMouseLeave, context.closeWithDelay), onPointerEnter: composeEventHandlers(onPointerEnter, context.cancelClose), onPointerLeave: composeEventHandlers(onPointerLeave, context.closeWithDelay), style: { ...context.floatingStyle, ...style }, children: children }));
+    if (!context.open) {
+        return _jsx(Portal, { ...(container === undefined ? {} : { container }), children: content });
+    }
+    return (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: _jsx(DismissableLayer, { open: true, modal: false, onDismiss: context.close, onPointerDownOutside: (event) => {
+                const pointerEvent = event.detail;
+                const target = pointerEvent?.target;
+                if (context.referenceElement.current?.contains(target)) {
+                    event.preventDefault();
+                }
+            }, children: content }) }));
+}
+export const HoverCard = Object.assign(HoverCardRoot, {
+    Trigger: HoverCardTrigger,
+    Content: HoverCardContent
+});

package/dist/components/hover-card/index.d.ts

@@ -0,0 +1,2 @@
+export { HoverCard } from "./hover-card.js";
+export type { HoverCardContentProps, HoverCardProps, HoverCardTriggerProps } from "./hover-card.js";

package/dist/components/hover-card/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { HoverCard } from "./hover-card.js";

package/dist/components/index.d.ts

@@ -12,6 +12,10 @@ export { Button } from "./button/index.js";
 export type { ButtonProps, ButtonSize, ButtonVariant } from "./button/index.js";
 export { Card } from "./card/index.js";
 export type { CardDescriptionProps, CardPadding, CardProps, CardSlotProps, CardTitleProps, CardVariant } from "./card/index.js";
+export { Calendar } from "./calendar/index.js";
+export type { CalendarProps } from "./calendar/index.js";
+export { Carousel } from "./carousel/index.js";
+export type { CarouselApi, CarouselButtonProps, CarouselOrientation, CarouselPageProps, CarouselProps, CarouselSlideProps, CarouselTrackProps, CarouselViewportProps } from "./carousel/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export type { CheckboxProps, CheckboxSize } from "./checkbox/index.js";
 export { CodeBlock } from "./code-block/index.js";
@@ -20,6 +24,8 @@ export { Collapsible } from "./collapsible/index.js";
 export type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } from "./collapsible/index.js";
 export { CopyButton, CopyableText } from "./copy-button/index.js";
 export type { CopyButtonProps, CopyButtonSize, CopyStatus, CopyableTextProps } from "./copy-button/index.js";
+export { DatePicker } from "./date-picker/index.js";
+export type { DatePickerProps } from "./date-picker/index.js";
 export { Dialog } from "./dialog/index.js";
 export type { DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogOverlayProps, DialogProps, DialogTitleProps, DialogTriggerProps } from "./dialog/index.js";
 export { DropdownMenu } from "./dropdown-menu/index.js";
@@ -48,6 +54,8 @@ export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, For
 export type { FormControlProps, FormFieldProps, FormItemProps, FormLabelProps, FormProps, FormTextProps } from "./form/index.js";
 export { FileUploadInput } from "./file-upload-input/index.js";
 export type { FileUploadInputProps, FileUploadInputSize } from "./file-upload-input/index.js";
+export { HoverCard } from "./hover-card/index.js";
+export type { HoverCardContentProps, HoverCardProps, HoverCardTriggerProps } from "./hover-card/index.js";
 export { IconButton } from "./icon-button/index.js";
 export type { IconButtonProps } from "./icon-button/index.js";
 export { Input } from "./input/index.js";
@@ -90,8 +98,8 @@ export { TabsWithSidebar } from "./tabs-with-sidebar/index.js";
 export type { TabsWithSidebarPanelProps, TabsWithSidebarProps, TabsWithSidebarSidebarProps, TabsWithSidebarWidth } from "./tabs-with-sidebar/index.js";
 export { Textarea } from "./textarea/index.js";
 export type { TextareaProps, TextareaSize } from "./textarea/index.js";
-export { Toast, ToastViewport } from "./toast/index.js";
-export type { ToastActionProps, ToastCloseProps, ToastPlacement, ToastProps, ToastTextProps, ToastTone, ToastViewportProps } from "./toast/index.js";
+export { createToastController, Toast, ToastProvider, ToastViewport, useToast } from "./toast/index.js";
+export type { ToastActionProps, ToastCloseProps, ToastController, ToastInput, ToastOptions, ToastPlacement, ToastProviderProps, ToastProps, ToastTextProps, ToastTone, ToastViewportProps } from "./toast/index.js";
 export { Tooltip } from "./tooltip/index.js";
 export type { TooltipProps } from "./tooltip/index.js";
 export { Toggle } from "./toggle/index.js";

package/dist/components/index.js

@@ -5,10 +5,13 @@ export { Badge } from "./badge/index.js";
 export { Breadcrumbs } from "./breadcrumbs/index.js";
 export { Button } from "./button/index.js";
 export { Card } from "./card/index.js";
+export { Calendar } from "./calendar/index.js";
+export { Carousel } from "./carousel/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export { CodeBlock } from "./code-block/index.js";
 export { Collapsible } from "./collapsible/index.js";
 export { CopyButton, CopyableText } from "./copy-button/index.js";
+export { DatePicker } from "./date-picker/index.js";
 export { Dialog } from "./dialog/index.js";
 export { DropdownMenu } from "./dropdown-menu/index.js";
 export { AlertDialog } from "./alert-dialog/index.js";
@@ -23,6 +26,7 @@ export { ErrorBoundary, ErrorFallback } from "./error-boundary/index.js";
 export { Field } from "./field/index.js";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./form/index.js";
 export { FileUploadInput } from "./file-upload-input/index.js";
+export { HoverCard } from "./hover-card/index.js";
 export { IconButton } from "./icon-button/index.js";
 export { Input } from "./input/index.js";
 export { Label } from "./label/index.js";
@@ -44,7 +48,7 @@ export { Table } from "./table/index.js";
 export { Tabs } from "./tabs/index.js";
 export { TabsWithSidebar } from "./tabs-with-sidebar/index.js";
 export { Textarea } from "./textarea/index.js";
-export { Toast, ToastViewport } from "./toast/index.js";
+export { createToastController, Toast, ToastProvider, ToastViewport, useToast } from "./toast/index.js";
 export { Tooltip } from "./tooltip/index.js";
 export { Toggle } from "./toggle/index.js";
 export { ToggleGroup } from "./toggle-group/index.js";

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

@@ -13,6 +13,7 @@ export interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButt
     ref?: React.Ref<HTMLButtonElement>;
 }
 export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    placement?: FloatingPlacement;
     sideOffset?: number;
     collisionPadding?: number;
     matchTriggerWidth?: boolean;
@@ -24,7 +25,7 @@ export interface PopoverContentProps extends React.HTMLAttributes<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, sideOffset, collisionPadding, matchTriggerWidth, style, ...props }: PopoverContentProps): React.JSX.Element | null;
+declare function PopoverContent({ className, container, forceMount, id, disableEscapeKeyDown, disableOutsidePointerDown, ref, placement, 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

@@ -68,7 +68,7 @@ function PopoverRoot({ children, className, defaultOpen = false, modal = false,
     const referenceElement = React.useRef(null);
     const { floatingStyle, floatingRef, referenceRef, placement: resolvedPlacement, updatePosition } = useFloatingPosition({
         open: isOpen,
-        placement,
+        placement: contentPositioning.placement ?? placement,
         offset: contentPositioning.sideOffset,
         collisionPadding: contentPositioning.collisionPadding,
         matchReferenceWidth: contentPositioning.matchTriggerWidth
@@ -108,7 +108,7 @@ function PopoverTrigger({ className, onClick, ref, type = "button", ...props })
     }, [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) }));
 }
-function PopoverContent({ className, container, forceMount = false, id, disableEscapeKeyDown = false, disableOutsidePointerDown = false, ref, sideOffset = 0, collisionPadding = 0, matchTriggerWidth = false, style, ...props }) {
+function PopoverContent({ className, container, forceMount = false, id, disableEscapeKeyDown = false, disableOutsidePointerDown = false, ref, placement, sideOffset = 0, collisionPadding = 0, matchTriggerWidth = false, style, ...props }) {
     const context = usePopoverContext("Popover.Content");
     const { defaultContentId, setContentId } = context;
     const transformOrigin = getTransformOrigin(context.floatingPlacement);
@@ -141,6 +141,7 @@ function PopoverContent({ className, container, forceMount = false, id, disableE
     }, [context.referenceElement]);
     React.useEffect(() => {
         context.updateContentPositioning({
+            ...(placement === undefined ? {} : { placement }),
             sideOffset,
             collisionPadding,
             matchTriggerWidth
@@ -148,7 +149,7 @@ function PopoverContent({ className, container, forceMount = false, id, disableE
         return () => {
             context.updateContentPositioning(defaultPositioning);
         };
-    }, [context.updateContentPositioning, collisionPadding, matchTriggerWidth, sideOffset]);
+    }, [context.updateContentPositioning, collisionPadding, matchTriggerWidth, placement, sideOffset]);
     if (!forceMount && !context.open) {
         return null;
     }

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

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

package/dist/components/toast/index.js

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

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

@@ -1,6 +1,25 @@
 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 ToastInput = string | {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+};
+export type ToastOptions = {
+    id?: string;
+    description?: React.ReactNode;
+    duration?: number;
+    action?: React.ReactNode;
+    cancel?: React.ReactNode;
+};
+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;
+    dismiss: (id?: string) => void;
+};
 export interface ToastViewportProps extends React.HTMLAttributes<HTMLDivElement> {
     placement?: ToastPlacement;
     ref?: React.Ref<HTMLDivElement>;
@@ -18,7 +37,14 @@ export interface ToastActionProps extends React.ButtonHTMLAttributes<HTMLButtonE
 export interface ToastCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     ref?: React.Ref<HTMLButtonElement>;
 }
+export interface ToastProviderProps extends Omit<ToastViewportProps, "children"> {
+    children?: React.ReactNode;
+    controller?: ToastController;
+}
 export declare function ToastViewport({ className, placement, ref, ...props }: ToastViewportProps): React.ReactElement;
+export declare function createToastController(): ToastController;
+export declare function useToast(): ToastController;
+export declare function ToastProvider({ children, controller, placement, ref, ...viewportProps }: ToastProviderProps): 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

@@ -1,9 +1,109 @@
-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 { cn } from "../../utils/cn.js";
+const DEFAULT_TOAST_DURATION = 5000;
+const toastControllerStores = new WeakMap();
+const ToastControllerContext = React.createContext(null);
+const emptyToastRecords = [];
+const emptyToastStore = {
+    getSnapshot: () => emptyToastRecords,
+    subscribe: () => () => undefined
+};
+let toastIdCounter = 0;
+let toastVersionCounter = 0;
+function createToastId() {
+    toastIdCounter += 1;
+    return `toast-${toastIdCounter}`;
+}
+function resolveToastContent(input, options) {
+    if (typeof input === "string") {
+        return {
+            title: input,
+            description: options.description
+        };
+    }
+    return {
+        title: input.title,
+        description: options.description ?? input.description
+    };
+}
 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" }));
 }
+export function createToastController() {
+    const listeners = new Set();
+    let records = [];
+    function notify() {
+        listeners.forEach((listener) => listener());
+    }
+    function show(tone, input, options = {}) {
+        const id = options.id ?? createToastId();
+        const { title, description } = resolveToastContent(input, options);
+        toastVersionCounter += 1;
+        const toast = {
+            id,
+            tone,
+            duration: options.duration ?? DEFAULT_TOAST_DURATION,
+            version: toastVersionCounter,
+            ...(title !== undefined ? { title } : {}),
+            ...(description !== undefined ? { description } : {}),
+            ...(options.action !== undefined ? { action: options.action } : {}),
+            ...(options.cancel !== undefined ? { cancel: options.cancel } : {})
+        };
+        records = [...records.filter((record) => record.id !== id), toast];
+        notify();
+        return id;
+    }
+    const controller = ((input, options) => show("neutral", input, options));
+    controller.success = (input, options) => show("success", input, options);
+    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.dismiss = (id) => {
+        records = id ? records.filter((toast) => toast.id !== id) : [];
+        notify();
+    };
+    toastControllerStores.set(controller, {
+        getSnapshot() {
+            return records;
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        }
+    });
+    return controller;
+}
+export function useToast() {
+    const controller = React.useContext(ToastControllerContext);
+    if (!controller) {
+        throw new Error("useToast must be used within a ToastProvider.");
+    }
+    return controller;
+}
+export function ToastProvider({ children, controller, placement = "top-right", ref, ...viewportProps }) {
+    const [localController] = React.useState(() => createToastController());
+    const activeController = controller ?? localController;
+    const store = toastControllerStores.get(activeController) ?? emptyToastStore;
+    const toasts = React.useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+    const dismissToast = React.useCallback((id) => {
+        activeController.dismiss(id);
+    }, [activeController]);
+    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))) })] }));
+}
+function ToastProviderItem({ onDismiss, toast }) {
+    React.useEffect(() => {
+        if (toast.duration === Infinity) {
+            return undefined;
+        }
+        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) })] }));
+}
 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") }));
 }