@zvk/ui 0.1.2 → 0.1.5

package/dist/components/toast/toast.js

@@ -1,11 +1,153 @@
-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
+    };
+}
+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" }));
 }
+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 const toast = createToastController();
+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))) })] }));
+}
+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) {
+            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: [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;

package/dist/components/tooltip/tooltip.js

@@ -3,6 +3,7 @@ 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 { placementFromSideAlign } from "../../internal/floating/placement-aliases.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
 import { cn } from "../../utils/cn.js";
@@ -27,7 +28,7 @@ function composeRefs(...refs) {
             if (typeof ref === "function") {
                 ref(node);
             }
-            else if (ref !== undefined) {
+            else if (ref !== undefined && ref !== null) {
                 ref.current = node;
             }
         }
@@ -59,7 +60,7 @@ function TooltipRoot({ children, defaultOpen = false, delay, disabled = false, o
     const openTimeoutRef = React.useRef(null);
     const { floatingRef, floatingStyle, placement: resolvedPlacement, referenceRef, updatePosition } = useFloatingPosition({
         open,
-        placement,
+        placement: contentPositioning.placement ?? placement,
         offset: contentPositioning.sideOffset,
         collisionPadding: contentPositioning.collisionPadding,
         flip: true,
@@ -137,7 +138,7 @@ function TooltipRoot({ children, defaultOpen = false, delay, disabled = false, o
     ]);
     return (_jsx(TooltipRootContext.Provider, { value: contextValue, children: children }));
 }
-function TooltipTrigger({ children }) {
+function TooltipTrigger({ children, asChild: _asChild = false }) {
     const context = useTooltipRootContext("Tooltip.Trigger");
     if (!React.isValidElement(children) || context.disabled) {
         return children;
@@ -164,15 +165,17 @@ function TooltipTrigger({ children }) {
         }, { checkDefaultPrevented: false })
     });
 }
-function TooltipContent({ children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, ref, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
+function TooltipContent({ align, alignOffset: _alignOffset, children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, placement, ref, side, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
     const context = useTooltipRootContext("Tooltip.Content");
     React.useEffect(() => {
+        const resolvedPlacement = side === undefined ? placement : placementFromSideAlign(side, align, placement ?? "bottom");
         context.setContentPositioning({
+            ...(resolvedPlacement === undefined ? {} : { placement: resolvedPlacement }),
             sideOffset,
             collisionPadding
         });
         return () => context.setContentPositioning(defaultContentPositioning);
-    }, [collisionPadding, context, sideOffset]);
+    }, [align, collisionPadding, context, placement, side, sideOffset]);
     if (!context.open && !forceMount) {
         return null;
     }

package/dist/internal/floating/placement-aliases.d.ts

@@ -0,0 +1,7 @@
+import type { FloatingAlign, FloatingPlacement, FloatingSide } from "./floating-types.js";
+export type { FloatingAlign, FloatingSide } from "./floating-types.js";
+export declare function placementFromSideAlign(side: FloatingSide | undefined, align: FloatingAlign | undefined, fallback: FloatingPlacement): FloatingPlacement;
+export declare function placementParts(placement: FloatingPlacement): {
+    side: FloatingSide;
+    align: FloatingAlign;
+};

package/dist/internal/floating/placement-aliases.js

@@ -0,0 +1,13 @@
+export function placementFromSideAlign(side, align, fallback) {
+    if (side === undefined) {
+        return fallback;
+    }
+    if (align === undefined || align === "center") {
+        return side;
+    }
+    return `${side}-${align}`;
+}
+export function placementParts(placement) {
+    const [side, align = "center"] = placement.split("-");
+    return { side, align };
+}

package/dist/internal/slot/index.d.ts

@@ -0,0 +1,2 @@
+export { Slot } from "./slot.js";
+export type { SlotProps } from "./slot.js";

package/dist/internal/slot/index.js

@@ -0,0 +1 @@
+export { Slot } from "./slot.js";

package/dist/internal/slot/slot.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactElement;
+    ref?: React.Ref<HTMLElement>;
+}
+export declare function Slot({ children, ref, ...props }: SlotProps): React.ReactElement;

package/dist/internal/slot/slot.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref !== undefined && ref !== null) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function isEventHandler(key, value) {
+    return /^on[A-Z]/.test(key) && typeof value === "function";
+}
+function mergeProps(slotProps, childProps) {
+    const merged = { ...slotProps, ...childProps };
+    for (const key of Object.keys(slotProps)) {
+        const slotValue = slotProps[key];
+        const childValue = childProps[key];
+        if (key === "className") {
+            merged[key] = cn(slotValue, childValue);
+            continue;
+        }
+        if (key === "style" && typeof slotValue === "object" && typeof childValue === "object") {
+            merged[key] = { ...slotValue, ...childValue };
+            continue;
+        }
+        if (isEventHandler(key, slotValue) && isEventHandler(key, childValue)) {
+            merged[key] = (event) => {
+                childValue(event);
+                if (!event.defaultPrevented) {
+                    slotValue(event);
+                }
+            };
+        }
+    }
+    return merged;
+}
+export function Slot({ children, ref, ...props }) {
+    if (!React.isValidElement(children)) {
+        throw new Error("Slot requires a single valid React element child.");
+    }
+    const child = children;
+    const childRef = child.props.ref;
+    const mergedProps = mergeProps(props, child.props);
+    return React.cloneElement(child, {
+        ...mergedProps,
+        ref: composeRefs(childRef, ref)
+    });
+}