@zvk/ui 0.1.8 → 0.1.9

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -8,6 +8,7 @@ import { Portal } from "../../internal/portal/index.js";
 import { DismissableLayer } from "../../internal/dismissable-layer/dismissable-layer.js";
 import { useFloatingPosition } from "../../internal/floating/index.js";
 import { placementFromSideAlign, placementParts } from "../../internal/floating/placement-aliases.js";
+import { usePresence } from "../../internal/presence/index.js";
 import { Slot } from "../../internal/slot/index.js";
 const defaultContentPositioning = {
     sideOffset: 8,
@@ -15,6 +16,7 @@ const defaultContentPositioning = {
     collisionPadding: 0,
     matchTriggerWidth: false
 };
+const dropdownMenuExitDurationMs = 120;
 const DropdownMenuContext = React.createContext(null);
 function useDropdownMenuContext(calledBy) {
     const context = React.useContext(DropdownMenuContext);
@@ -23,6 +25,9 @@ function useDropdownMenuContext(calledBy) {
     }
     return context;
 }
+function focusWithoutScroll(element) {
+    element?.focus({ preventScroll: true });
+}
 function composeRefs(...refs) {
     return (node) => {
         for (const ref of refs) {
@@ -111,7 +116,7 @@ function DropdownMenuRoot({ children, className, container, defaultOpen = false,
     }, []);
     React.useEffect(() => {
         if (wasOpenRef.current && !open) {
-            triggerRef.current?.focus();
+            focusWithoutScroll(triggerRef.current);
         }
         wasOpenRef.current = open;
     }, [open]);
@@ -119,7 +124,7 @@ function DropdownMenuRoot({ children, className, container, defaultOpen = false,
         if (open && triggerRef.current !== null) {
             const focusFirstItem = () => {
                 const first = getEnabledItems()[0];
-                first?.ref?.focus();
+                focusWithoutScroll(first?.ref);
             };
             queueMicrotask(focusFirstItem);
         }
@@ -141,35 +146,31 @@ function DropdownMenuRoot({ children, className, container, defaultOpen = false,
             ...(container === undefined ? {} : { container })
         }, children: _jsx("div", { ...props, className: cn("zvk-ui-dropdown-menu", className), "data-state": open ? "open" : "closed", children: children }) }));
 }
-function DropdownMenuTrigger({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
-    const { contentId, open, setOpen, triggerRef, triggerId, referenceRef, getEnabledItems } = useDropdownMenuContext("DropdownMenu.Trigger");
+function DropdownMenuTrigger({ asChild = false, children, className, disabled, onClick, ref, type = "button", ...props }) {
+    const { contentId, open, setOpen, triggerRef, triggerId, referenceRef } = useDropdownMenuContext("DropdownMenu.Trigger");
     const handleClick = () => {
         if (disabled) {
             return;
         }
         const nextOpen = !open;
         setOpen(nextOpen);
-        if (!nextOpen) {
-            return;
-        }
-        queueMicrotask(() => {
-            const first = getEnabledItems()[0];
-            first?.ref?.focus();
-        });
     };
     if (asChild) {
-        return (_jsx(Slot, { ...props, ref: composeRefs(ref, triggerRef, referenceRef), id: triggerId, "aria-controls": contentId, "aria-disabled": disabled ? true : undefined, "aria-expanded": open ? "true" : "false", "aria-haspopup": "menu", className: cn("zvk-ui-dropdown-menu__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick), children: props.children }));
+        return (_jsx(Slot, { ...props, ref: composeRefs(ref, triggerRef, referenceRef), id: triggerId, "aria-controls": contentId, "aria-disabled": disabled ? true : undefined, "aria-expanded": open ? "true" : "false", "aria-haspopup": "menu", className: cn("zvk-ui-dropdown-menu__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick), children: children }));
     }
-    return (_jsx("button", { ...props, ref: composeRefs(ref, triggerRef, referenceRef), type: type, disabled: disabled, id: triggerId, role: "button", "aria-haspopup": "menu", "aria-expanded": open ? "true" : "false", "aria-controls": contentId, className: cn("zvk-ui-dropdown-menu__trigger", className), "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
+    return (_jsxs("button", { ...props, ref: composeRefs(ref, triggerRef, referenceRef), type: type, disabled: disabled, id: triggerId, role: "button", "aria-haspopup": "menu", "aria-expanded": open ? "true" : "false", "aria-controls": contentId, className: cn("zvk-ui-dropdown-menu__trigger", className), "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick), children: [_jsx("span", { className: "zvk-ui-dropdown-menu__trigger-label", children: children }), _jsx("span", { className: "zvk-ui-dropdown-menu__trigger-indicator", "aria-hidden": "true" })] }));
 }
-function DropdownMenuContent({ align, alignOffset = defaultContentPositioning.alignOffset, children, className, forceMount = false, side, sideOffset = defaultContentPositioning.sideOffset, collisionPadding = defaultContentPositioning.collisionPadding, matchTriggerWidth = defaultContentPositioning.matchTriggerWidth, ref, onKeyDown, ...props }) {
+function DropdownMenuContent({ align, alignOffset = defaultContentPositioning.alignOffset, children, className, forceMount = false, side, sideOffset = defaultContentPositioning.sideOffset, collisionPadding = defaultContentPositioning.collisionPadding, matchTriggerWidth = defaultContentPositioning.matchTriggerWidth, ref, onAnimationEnd, onKeyDown, ...props }) {
     const { container, contentId, open, setOpen, updateContentPositioning, triggerId, floatingRef, floatingPlacement, floatingStyle, getEnabledItems } = useDropdownMenuContext("DropdownMenu.Content");
+    const presence = usePresence({ open, forceMount, exitDurationMs: dropdownMenuExitDurationMs });
+    const wasOpenRef = React.useRef(open);
+    const isClosing = wasOpenRef.current && !open;
     const focusItem = React.useCallback((index, items) => {
         if (items.length === 0) {
             return;
         }
         const clampedIndex = ((index % items.length) + items.length) % items.length;
-        items[clampedIndex]?.ref?.focus();
+        focusWithoutScroll(items[clampedIndex]?.ref);
     }, []);
     const findCurrentIndex = React.useCallback((items) => {
         const activeElement = document.activeElement;
@@ -196,10 +197,10 @@ function DropdownMenuContent({ align, alignOffset = defaultContentPositioning.al
             return;
         }
         if (isEnd) {
-            enabledItems.at(-1)?.ref?.focus();
+            focusWithoutScroll(enabledItems.at(-1)?.ref);
             return;
         }
-        enabledItems[0]?.ref?.focus();
+        focusWithoutScroll(enabledItems[0]?.ref);
     }, [getEnabledItems]);
     React.useEffect(() => {
         updateContentPositioning({
@@ -213,9 +214,13 @@ function DropdownMenuContent({ align, alignOffset = defaultContentPositioning.al
             updateContentPositioning(defaultContentPositioning);
         };
     }, [align, alignOffset, collisionPadding, matchTriggerWidth, side, sideOffset, updateContentPositioning]);
-    if (!open && !forceMount) {
+    React.useEffect(() => {
+        wasOpenRef.current = open;
+    }, [open]);
+    if (!presence.present) {
         return null;
     }
+    const hidden = presence.inert && !isClosing && presence.motionState !== "exiting" ? true : undefined;
     const content = (_jsx("div", { ...props, ref: (node) => {
             floatingRef(node);
             if (typeof ref === "function") {
@@ -224,7 +229,7 @@ function DropdownMenuContent({ align, alignOffset = defaultContentPositioning.al
             else if (ref) {
                 ref.current = node;
             }
-        }, id: contentId, role: "menu", "aria-labelledby": triggerId, className: cn("zvk-ui-dropdown-menu__content", className), style: floatingStyle, "data-align": placementParts(floatingPlacement).align, "data-side": placementParts(floatingPlacement).side, "data-state": open ? "open" : "closed", hidden: open ? undefined : true, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+        }, "aria-hidden": presence.inert ? true : undefined, id: contentId, inert: presence.inert ? true : undefined, role: "menu", "aria-labelledby": triggerId, className: cn("zvk-ui-dropdown-menu__content", className), style: floatingStyle, "data-align": placementParts(floatingPlacement).align, "data-side": placementParts(floatingPlacement).side, "data-state": presence.state, hidden: hidden, onAnimationEnd: composeEventHandlers(onAnimationEnd, presence.onExitComplete), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
             if (event.key === "ArrowDown") {
                 event.preventDefault();
                 moveFocus("next");

package/dist/components/file-dropzone/file-dropzone.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface FileDropzoneProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    maxFiles?: number;
+    maxSizeBytes?: number;
+    value?: readonly File[];
+    defaultFiles?: readonly File[];
+    onFilesChange?: (files: readonly File[]) => void;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface FileDropzoneListProps extends React.HTMLAttributes<HTMLUListElement> {
+    ref?: React.Ref<HTMLUListElement>;
+}
+declare function FileDropzoneRoot({ accept, children, className, defaultFiles, description, disabled, error, id, label, maxFiles, maxSizeBytes, multiple, onFilesChange, ref, required, value, ...props }: FileDropzoneProps): React.JSX.Element;
+declare function FileDropzoneList({ className, ref, ...props }: FileDropzoneListProps): React.JSX.Element | null;
+export declare const FileDropzone: typeof FileDropzoneRoot & {
+    List: typeof FileDropzoneList;
+};
+export {};

package/dist/components/file-dropzone/file-dropzone.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Field } from "../field/field.js";
+import { cn } from "../../utils/cn.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+const FileDropzoneContext = React.createContext(null);
+function useFileDropzoneContext(calledBy) {
+    const context = React.useContext(FileDropzoneContext);
+    if (context === null) {
+        throw new Error(`"${calledBy}" must be used within <FileDropzone />`);
+    }
+    return context;
+}
+function hasRenderableNode(value) {
+    return value !== undefined && value !== null && value !== false;
+}
+function joinIds(...ids) {
+    const value = ids.filter(Boolean).join(" ");
+    return value.length > 0 ? value : undefined;
+}
+function normalizeFiles(files) {
+    return Array.from(files ?? []);
+}
+function parseAccept(accept) {
+    return accept
+        ?.split(",")
+        .map((value) => value.trim())
+        .filter(Boolean) ?? [];
+}
+function fileMatchesAccept(file, accept) {
+    const tokens = parseAccept(accept);
+    if (tokens.length === 0) {
+        return true;
+    }
+    const fileName = file.name.toLowerCase();
+    const mimeType = file.type.toLowerCase();
+    return tokens.some((token) => {
+        const normalized = token.toLowerCase();
+        if (normalized.startsWith(".")) {
+            return fileName.endsWith(normalized);
+        }
+        if (normalized.endsWith("/*")) {
+            return mimeType.startsWith(normalized.slice(0, -1));
+        }
+        return mimeType === normalized;
+    });
+}
+function formatFileSize(size) {
+    if (size < 1024) {
+        return `${size} B`;
+    }
+    const kib = size / 1024;
+    if (kib < 1024) {
+        return `${kib.toFixed(kib >= 10 ? 0 : 1)} KiB`;
+    }
+    const mib = kib / 1024;
+    return `${mib.toFixed(mib >= 10 ? 0 : 1)} MiB`;
+}
+function getValidationError(files, { accept, maxFiles, maxSizeBytes }) {
+    const tooManyFiles = maxFiles !== undefined && files.length > maxFiles;
+    if (tooManyFiles) {
+        return `You can add up to ${maxFiles} file${maxFiles === 1 ? "" : "s"}.`;
+    }
+    const tooLargeFile = maxSizeBytes !== undefined ? files.find((file) => file.size > maxSizeBytes) : undefined;
+    if (tooLargeFile) {
+        return `${tooLargeFile.name} is too large.`;
+    }
+    const rejectedFile = files.find((file) => !fileMatchesAccept(file, accept));
+    if (rejectedFile) {
+        return `${rejectedFile.name} does not match the accepted file types.`;
+    }
+    return null;
+}
+function getNextFiles(currentFiles, incomingFiles, multiple) {
+    if (!multiple) {
+        return incomingFiles.slice(0, 1);
+    }
+    return [...currentFiles, ...incomingFiles];
+}
+function FileDropzoneRoot({ accept, children, className, defaultFiles = [], description, disabled = false, error, id, label, maxFiles, maxSizeBytes, multiple = false, onFilesChange, ref, required, value, ...props }) {
+    const generatedId = React.useId();
+    const inputId = id ? `${id}-input` : generatedId;
+    const labelId = label !== undefined ? `${inputId}-label` : undefined;
+    const descriptionId = hasRenderableNode(description) ? `${inputId}-description` : undefined;
+    const errorId = `${inputId}-error`;
+    const [validationError, setValidationError] = React.useState(null);
+    const [files, setFiles] = useControllableState({
+        ...(value !== undefined ? { value } : {}),
+        defaultValue: defaultFiles,
+        ...(onFilesChange ? { onChange: onFilesChange } : {})
+    });
+    const effectiveMaxFiles = multiple ? maxFiles : 1;
+    const invalidState = Boolean(error) || validationError !== null;
+    const inputRequired = Boolean(required && files.length === 0);
+    const describedBy = joinIds(descriptionId, invalidState ? errorId : undefined);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const dragCounterRef = React.useRef(0);
+    const removeFile = React.useCallback((file) => {
+        setValidationError(null);
+        setFiles((currentFiles) => currentFiles.filter((currentFile) => currentFile !== file));
+    }, [setFiles]);
+    const acceptFiles = React.useCallback((incomingFiles) => {
+        if (disabled) {
+            return;
+        }
+        const nextFiles = getNextFiles(files, incomingFiles, multiple);
+        const validationErrorMessage = getValidationError(nextFiles, {
+            ...(accept !== undefined ? { accept } : {}),
+            ...(effectiveMaxFiles !== undefined ? { maxFiles: effectiveMaxFiles } : {}),
+            ...(maxSizeBytes !== undefined ? { maxSizeBytes } : {})
+        });
+        if (validationErrorMessage !== null) {
+            setValidationError(validationErrorMessage);
+            return;
+        }
+        setValidationError(null);
+        setFiles(nextFiles);
+    }, [accept, disabled, effectiveMaxFiles, files, maxSizeBytes, multiple, setFiles]);
+    const handleInputChange = React.useCallback((event) => {
+        acceptFiles(normalizeFiles(event.currentTarget.files));
+        event.currentTarget.value = "";
+    }, [acceptFiles]);
+    const handleDragEnter = React.useCallback((event) => {
+        if (disabled) {
+            return;
+        }
+        event.preventDefault();
+        dragCounterRef.current += 1;
+        setIsDragging(true);
+    }, [disabled]);
+    const handleDragOver = React.useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    const handleDragLeave = React.useCallback((event) => {
+        if (disabled) {
+            return;
+        }
+        event.preventDefault();
+        dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+        if (dragCounterRef.current === 0) {
+            setIsDragging(false);
+        }
+    }, [disabled]);
+    const handleDrop = React.useCallback((event) => {
+        if (disabled) {
+            return;
+        }
+        event.preventDefault();
+        dragCounterRef.current = 0;
+        setIsDragging(false);
+        acceptFiles(normalizeFiles(event.dataTransfer.files));
+    }, [acceptFiles, disabled]);
+    const input = (_jsx("div", { className: "zvk-ui-file-dropzone__panel", "aria-hidden": "true", children: _jsx("span", { "aria-hidden": "true", className: "zvk-ui-file-dropzone__prompt", children: isDragging ? "Drop files to add them" : "Drop files here or browse" }) }));
+    const content = (_jsx(FileDropzoneContext.Provider, { value: {
+            disabled,
+            files,
+            removeFile
+        }, children: _jsxs(Field, { ...props, id: id, ...(label !== undefined || description !== undefined || error !== undefined ? { role: "group" } : {}), "aria-describedby": describedBy, "aria-labelledby": labelId, className: cn("zvk-ui-file-dropzone", className), "data-dragging": isDragging ? "true" : undefined, "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, disabled: disabled, invalid: invalidState, ...(ref !== undefined ? { ref } : {}), required: Boolean(required), children: [hasRenderableNode(label) ? _jsx(Field.Label, { id: labelId, htmlFor: inputId, children: label }) : null, _jsxs("div", { className: "zvk-ui-file-dropzone__surface", children: [input, _jsx("input", { accept: accept, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, "aria-labelledby": labelId, "aria-required": required ? true : undefined, className: "zvk-ui-file-dropzone__input", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, disabled: disabled, id: inputId, multiple: multiple, onChange: handleInputChange, required: inputRequired, type: "file" })] }), hasRenderableNode(description) ? _jsx(Field.Description, { id: descriptionId, children: description }) : null, invalidState ? (_jsxs(Field.Error, { id: errorId, children: [validationError !== null ? _jsx("span", { children: validationError }) : null, validationError !== null && hasRenderableNode(error) ? _jsx("span", { children: " " }) : null, hasRenderableNode(error) ? error : null] })) : null, children] }) }));
+    return content;
+}
+function FileDropzoneList({ className, ref, ...props }) {
+    const { disabled, files, removeFile } = useFileDropzoneContext("FileDropzone.List");
+    if (files.length === 0) {
+        return null;
+    }
+    return (_jsx("ul", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Selected files", className: cn("zvk-ui-file-dropzone__list", className), children: files.map((file) => (_jsxs("li", { className: "zvk-ui-file-dropzone__item", children: [_jsx("span", { className: "zvk-ui-file-dropzone__item-name", children: file.name }), _jsx("span", { className: "zvk-ui-file-dropzone__item-meta", children: formatFileSize(file.size) }), _jsx("button", { "aria-label": `Remove ${file.name}`, className: "zvk-ui-file-dropzone__remove", disabled: disabled, type: "button", onClick: () => removeFile(file), children: "Remove" })] }, `${file.name}-${file.size}-${file.lastModified}`))) }));
+}
+export const FileDropzone = Object.assign(FileDropzoneRoot, {
+    List: FileDropzoneList
+});

package/dist/components/file-dropzone/index.d.ts

@@ -0,0 +1,2 @@
+export { FileDropzone } from "./file-dropzone.js";
+export type { FileDropzoneListProps, FileDropzoneProps } from "./file-dropzone.js";

package/dist/components/file-dropzone/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { FileDropzone } from "./file-dropzone.js";

package/dist/components/form/form.d.ts

@@ -21,10 +21,25 @@ export interface FormControlProps {
 export interface FormTextProps extends React.HTMLAttributes<HTMLParagraphElement> {
     ref?: React.Ref<HTMLParagraphElement>;
 }
-export declare function Form({ className, ref, ...props }: FormProps): React.JSX.Element;
+export interface FormValidationSummaryError {
+    fieldId?: string;
+    href?: string;
+    message: string;
+}
+export interface FormValidationSummaryProps extends React.HTMLAttributes<HTMLDivElement> {
+    errors: readonly FormValidationSummaryError[];
+    ref?: React.Ref<HTMLDivElement>;
+    title: string;
+}
+declare function FormRoot({ className, ref, ...props }: FormProps): React.JSX.Element;
 export declare function FormField({ children, className, disabled, id, invalid, required, ...props }: FormFieldProps): React.JSX.Element;
 export declare function FormItem({ className, ref, ...props }: FormItemProps): React.JSX.Element;
 export declare function FormLabel({ className, htmlFor, ref, ...props }: FormLabelProps): React.JSX.Element;
 export declare function FormControl({ children }: FormControlProps): React.ReactElement<Record<string, unknown>, string | React.JSXElementConstructor<any>>;
 export declare function FormDescription({ className, ...props }: FormTextProps): React.JSX.Element;
 export declare function FormMessage({ className, role, ...props }: FormTextProps): React.JSX.Element;
+declare function FormValidationSummary({ className, errors, ref, title, ...props }: FormValidationSummaryProps): React.JSX.Element | null;
+export declare const Form: typeof FormRoot & {
+    ValidationSummary: typeof FormValidationSummary;
+};
+export {};

package/dist/components/form/form.js

@@ -1,5 +1,5 @@
 "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 { cn } from "../../utils/cn.js";
 const FormFieldContext = React.createContext(null);
@@ -14,7 +14,7 @@ function joinIds(ids) {
     const value = ids.filter(Boolean).join(" ");
     return value.length > 0 ? value : undefined;
 }
-export function Form({ className, ref, ...props }) {
+function FormRoot({ className, ref, ...props }) {
     return _jsx("form", { ...props, ref: ref, className: cn("zvk-ui-form", className) });
 }
 export function FormField({ children, className, disabled, id, invalid, required, ...props }) {
@@ -86,3 +86,14 @@ export function FormDescription({ className, ...props }) {
 export function FormMessage({ className, role = "alert", ...props }) {
     return _jsx(FormText, { ...props, className: cn("zvk-ui-form-message", className), role: role, textRole: "FormMessage" });
 }
+function FormValidationSummary({ className, errors, ref, title, ...props }) {
+    const titleId = React.useId();
+    if (errors.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { ...props, "aria-atomic": "true", "aria-live": "polite", "aria-labelledby": titleId, className: cn("zvk-ui-form-validation-summary", className), ref: ref, role: "status", children: [_jsx("p", { id: titleId, className: "zvk-ui-form-validation-summary__title", children: title }), _jsx("ul", { className: "zvk-ui-form-validation-summary__list", children: errors.map((error, index) => {
+                    const href = error.href ?? (error.fieldId !== undefined ? `#${error.fieldId}` : undefined);
+                    return (_jsx("li", { className: "zvk-ui-form-validation-summary__item", children: href !== undefined ? (_jsx("a", { className: "zvk-ui-form-validation-summary__link", href: href, children: error.message })) : (error.message) }, `${error.message}-${index}`));
+                }) })] }));
+}
+export const Form = Object.assign(FormRoot, { ValidationSummary: FormValidationSummary });

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

@@ -1,2 +1,2 @@
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./form.js";
-export type { FormControlProps, FormFieldProps, FormItemProps, FormLabelProps, FormProps, FormTextProps } from "./form.js";
+export type { FormControlProps, FormFieldProps, FormItemProps, FormLabelProps, FormProps, FormTextProps, FormValidationSummaryError, FormValidationSummaryProps } from "./form.js";

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

@@ -29,7 +29,7 @@ export interface HoverCardContentProps extends React.HTMLAttributes<HTMLDivEleme
 }
 declare function HoverCardRoot({ children, closeDelay, defaultOpen, disabled, onOpenChange, open: openProp, openDelay, placement }: HoverCardProps): React.JSX.Element;
 declare function HoverCardTrigger({ children, asChild: _asChild }: HoverCardTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function HoverCardContent({ align, alignOffset, children, className, collisionPadding, container, forceMount, id, onBlur, onFocus, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, placement, ref, side, sideOffset, style, ...props }: HoverCardContentProps): React.JSX.Element | null;
+declare function HoverCardContent({ align, alignOffset, children, className, collisionPadding, container, forceMount, id, onAnimationEnd, onBlur, onFocus, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, placement, ref, side, sideOffset, style, ...props }: HoverCardContentProps): React.JSX.Element | null;
 export declare const HoverCard: typeof HoverCardRoot & {
     Trigger: typeof HoverCardTrigger;
     Content: typeof HoverCardContent;

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

@@ -5,6 +5,7 @@ import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
 import { useFloatingPosition } from "../../internal/floating/index.js";
 import { placementFromSideAlign } from "../../internal/floating/placement-aliases.js";
 import { Portal } from "../../internal/portal/index.js";
+import { usePresence } from "../../internal/presence/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { cn } from "../../utils/cn.js";
 import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
@@ -13,6 +14,7 @@ const defaultContentPositioning = {
     alignOffset: 0,
     collisionPadding: 0
 };
+const hoverCardExitDurationMs = 120;
 const HoverCardContext = React.createContext(null);
 function useHoverCardContext(calledBy) {
     const context = React.useContext(HoverCardContext);
@@ -236,8 +238,11 @@ function HoverCardTrigger({ children, asChild: _asChild = false }) {
         onPointerLeave: composeEventHandlers(childProps.onPointerLeave, context.closeWithDelay)
     });
 }
-function HoverCardContent({ align, alignOffset = defaultContentPositioning.alignOffset, children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, id, onBlur, onFocus, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, placement, ref, side, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
+function HoverCardContent({ align, alignOffset = defaultContentPositioning.alignOffset, children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, id, onAnimationEnd, onBlur, onFocus, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, placement, ref, side, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
     const context = useHoverCardContext("HoverCard.Content");
+    const presence = usePresence({ open: context.open, forceMount, exitDurationMs: hoverCardExitDurationMs });
+    const wasOpenRef = React.useRef(context.open);
+    const isClosing = wasOpenRef.current && !context.open;
     const contentId = id ?? context.contentId;
     const placementParts = getPlacementParts(context.resolvedPlacement);
     const { setContentPositioning } = context;
@@ -251,10 +256,14 @@ function HoverCardContent({ align, alignOffset = defaultContentPositioning.align
         });
         return () => setContentPositioning(defaultContentPositioning);
     }, [align, alignOffset, collisionPadding, placement, setContentPositioning, side, sideOffset]);
-    if (!context.open && !forceMount) {
+    React.useEffect(() => {
+        wasOpenRef.current = context.open;
+    }, [context.open]);
+    if (!presence.present) {
         return null;
     }
-    const content = (_jsx("div", { ...props, ref: composeRefs(ref, context.floatingRef), id: contentId, role: "dialog", className: cn("zvk-ui-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) => {
+    const hidden = presence.inert && !isClosing && presence.motionState !== "exiting" ? true : undefined;
+    const content = (_jsx("div", { ...props, ref: composeRefs(ref, context.floatingRef), "aria-hidden": presence.inert ? true : undefined, id: contentId, inert: presence.inert ? true : undefined, role: "dialog", className: cn("zvk-ui-hover-card__content", className), "data-align": placementParts.align, "data-side": placementParts.side, "data-state": presence.state, hidden: hidden, onAnimationEnd: composeEventHandlers(onAnimationEnd, presence.onExitComplete), 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) {

package/dist/components/index.d.ts

@@ -26,6 +26,8 @@ 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 { DateRangePicker } from "./date-range-picker/index.js";
+export type { DateRange, DateRangePickerProps } from "./date-range-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";
@@ -54,12 +56,16 @@ 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 { FileDropzone } from "./file-dropzone/index.js";
+export type { FileDropzoneListProps, FileDropzoneProps } from "./file-dropzone/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";
 export type { InputProps, InputSize } from "./input/index.js";
+export { Kbd } from "./kbd/index.js";
+export type { KbdProps, KbdSize } from "./kbd/index.js";
 export { Label } from "./label/index.js";
 export type { LabelProps, LabelSize } from "./label/index.js";
 export { Pagination } from "./pagination/index.js";

package/dist/components/index.js

@@ -12,6 +12,7 @@ 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 { DateRangePicker } from "./date-range-picker/index.js";
 export { Dialog } from "./dialog/index.js";
 export { DropdownMenu } from "./dropdown-menu/index.js";
 export { AlertDialog } from "./alert-dialog/index.js";
@@ -26,9 +27,11 @@ 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 { FileDropzone } from "./file-dropzone/index.js";
 export { HoverCard } from "./hover-card/index.js";
 export { IconButton } from "./icon-button/index.js";
 export { Input } from "./input/index.js";
+export { Kbd } from "./kbd/index.js";
 export { Label } from "./label/index.js";
 export { Pagination } from "./pagination/index.js";
 export { Popover } from "./popover/index.js";

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

@@ -0,0 +1,2 @@
+export { Kbd } from "./kbd.js";
+export type { KbdProps, KbdSize } from "./kbd.js";

package/dist/components/kbd/index.js

@@ -0,0 +1 @@
+export { Kbd } from "./kbd.js";

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type KbdSize = "sm" | "md";
+type KbdSharedProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+    size?: KbdSize;
+    ref?: React.Ref<HTMLElement>;
+};
+export type KbdProps = (KbdSharedProps & {
+    children: React.ReactNode;
+    keys?: never;
+}) | (KbdSharedProps & {
+    children?: never;
+    keys: readonly string[];
+});
+export declare function Kbd({ children, className, keys, ref, size, ...props }: KbdProps): React.JSX.Element;
+export {};

package/dist/components/kbd/kbd.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+export function Kbd({ children, className, keys, ref, size = "md", ...props }) {
+    if (keys !== undefined) {
+        const label = props["aria-label"] ?? keys.join(" + ");
+        return (_jsx("span", { ...props, ref: ref, "aria-label": label, className: cn("zvk-ui-kbd-group", className), "data-size": size, children: keys.map((key, index) => (_jsxs(React.Fragment, { children: [index > 0 ? (_jsx("span", { "aria-hidden": "true", className: "zvk-ui-kbd__separator", children: " + " })) : null, _jsx("kbd", { className: "zvk-ui-kbd", "data-size": size, children: key })] }, `${index}-${key}`))) }));
+    }
+    return (_jsx("kbd", { ...props, ref: ref, className: cn("zvk-ui-kbd", className), "data-size": size, children: children }));
+}

package/dist/components/menubar/menubar.js

@@ -208,7 +208,7 @@ function MenubarContent({ align, alignOffset = 0, children, className, onKeyDown
     return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: menu.open, onDismiss: () => menubar.setOpenValue(undefined), children: _jsx("div", { ...props, ref: (node) => {
                     floatingRef(node);
                     setForwardedRef(ref, node);
-                }, id: menu.contentId, role: "menu", "aria-label": menu.label, "aria-labelledby": menu.triggerId, className: cn("zvk-ui-menubar__content", className), style: { ...style, ...floatingStyle }, "data-align": placementParts(resolvedPlacement).align, "data-side": placementParts(resolvedPlacement).side, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+                }, id: menu.contentId, role: "menu", "aria-label": menu.label, "aria-labelledby": menu.triggerId, className: cn("zvk-ui-menubar__content", className), style: { ...style, ...floatingStyle }, "data-align": placementParts(resolvedPlacement).align, "data-side": placementParts(resolvedPlacement).side, "data-state": "open", onKeyDown: composeEventHandlers(onKeyDown, (event) => {
                     const items = menu.getItems();
                     const index = activeIndex(items);
                     if (event.key === "ArrowDown") {

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

@@ -30,7 +30,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({ asChild, className, disabled, onClick, ref, type, ...props }: PopoverTriggerProps): React.JSX.Element;
-declare function PopoverContent({ align, alignOffset, className, container, forceMount, id, disableEscapeKeyDown, disableOutsidePointerDown, ref, placement, side, sideOffset, collisionPadding, matchTriggerWidth, style, ...props }: PopoverContentProps): React.JSX.Element | null;
+declare function PopoverContent({ align, alignOffset, className, container, forceMount, id, disableEscapeKeyDown, disableOutsidePointerDown, onAnimationEnd, 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;