@zvk/ui 0.1.8 → 0.1.9

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.1.9](https://github.com/brandon-schabel/zvk/compare/v0.1.8...v0.1.9) (2026-06-19)
+
+
+### Features
+
+* add theme presets and package improvements ([#19](https://github.com/brandon-schabel/zvk/issues/19)) ([867f955](https://github.com/brandon-schabel/zvk/commit/867f9556f7a60144cad4e747f2c032f2d5ede353))
+
 ## [0.1.8](https://github.com/brandon-schabel/zvk/compare/v0.1.7...v0.1.8) (2026-06-16)
 
 

package/README.md

@@ -20,7 +20,7 @@ import "@zvk/ui/styles.css";
 
 ## Release Status
 
-GitHub Actions runs `bun run preflight` before release publishing. Release Please opens
+GitHub Actions runs `bun run preflight:ci` before release publishing. Release Please opens
 reviewable version-bump PRs from conventional commits; merging a release PR creates the
 GitHub release and publishes any package with a created release, including `@zvk/ui`, to npm
 through trusted publishing in the protected `npm-publish` environment.

package/dist/components/alert-dialog/alert-dialog.d.ts

@@ -31,7 +31,7 @@ export interface AlertDialogCancelProps extends React.ButtonHTMLAttributes<HTMLB
 }
 declare function AlertDialogRoot({ children, className, defaultOpen, onOpenChange, open: openProp, ref, ...props }: AlertDialogProps): React.JSX.Element;
 declare function AlertDialogTrigger({ asChild, className, disabled, onClick, ref, type, ...props }: AlertDialogTriggerProps): React.JSX.Element;
-declare function AlertDialogContent({ children, className, ref, ...props }: AlertDialogContentProps): React.JSX.Element | null;
+declare function AlertDialogContent({ children, className, onAnimationEnd, onTransitionEnd, ref, ...props }: AlertDialogContentProps): React.JSX.Element | null;
 declare function AlertDialogTitle({ className, ref, ...props }: AlertDialogTitleProps): React.JSX.Element;
 declare function AlertDialogDescription({ className, ref, ...props }: AlertDialogDescriptionProps): React.JSX.Element;
 declare function AlertDialogFooter({ className, ref, ...props }: AlertDialogFooterProps): React.JSX.Element;

package/dist/components/alert-dialog/alert-dialog.js

@@ -6,6 +6,7 @@ import { cn } from "../../utils/cn.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
 import { FocusScope } from "../../internal/focus/index.js";
+import { usePresence } from "../../internal/presence/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";
@@ -29,6 +30,7 @@ function composeRefs(...refs) {
         }
     };
 }
+const alertDialogExitDurationMs = 180;
 function AlertDialogRoot({ children, className, defaultOpen = false, onOpenChange, open: openProp, ref, ...props }) {
     const [open, setOpen] = useControllableState({
         ...(openProp !== undefined ? { value: openProp } : {}),
@@ -47,13 +49,6 @@ function AlertDialogRoot({ children, className, defaultOpen = false, onOpenChang
         setDescribedBy(id);
         return () => setDescribedBy((current) => (current === id ? undefined : current));
     }, []);
-    React.useLayoutEffect(() => {
-        if (!open) {
-            return;
-        }
-        lockScroll();
-        return () => unlockScroll();
-    }, [open]);
     return (_jsx(AlertDialogContext.Provider, { value: {
             close: () => setOpen(false),
             contentId: `${instanceId}-content`,
@@ -80,12 +75,25 @@ function AlertDialogTrigger({ asChild = false, className, disabled, onClick, ref
     }
     return (_jsx("button", { ...props, ref: composeRefs(ref, triggerRef), type: type, disabled: disabled, "aria-controls": contentId, "aria-expanded": open ? "true" : "false", className: cn("zvk-ui-alert-dialog__trigger", className), "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
 }
-function AlertDialogContent({ children, className, ref, ...props }) {
+function AlertDialogContent({ children, className, onAnimationEnd, onTransitionEnd, ref, ...props }) {
     const { close, contentId, describedBy, labelledBy, open } = useAlertDialogContext("AlertDialog.Content");
-    if (!open) {
+    const presence = usePresence({ open, exitDurationMs: alertDialogExitDurationMs });
+    const shouldLockScroll = presence.present && (!presence.inert || presence.motionState === "exiting");
+    React.useLayoutEffect(() => {
+        if (!shouldLockScroll) {
+            return;
+        }
+        lockScroll();
+        return () => unlockScroll();
+    }, [shouldLockScroll]);
+    if (!presence.present) {
         return null;
     }
-    return (_jsxs(Portal, { children: [_jsx("div", { "aria-hidden": "true", className: "zvk-ui-alert-dialog__overlay" }), _jsx(DismissableLayer, { open: open, onDismiss: close, disableEscapeKeyDown: true, disableOutsidePointerDown: true, children: _jsx(FocusScope, { active: open, trapped: true, children: _jsx("div", { ...props, ref: ref, id: contentId, role: "alertdialog", "aria-modal": "true", "aria-describedby": describedBy, "aria-labelledby": labelledBy, className: cn("zvk-ui-alert-dialog__content", className), "data-state": open ? "open" : "closed", children: children }) }) })] }));
+    const content = (_jsx("div", { ...props, ref: ref, id: contentId, role: "alertdialog", "aria-hidden": presence.inert ? true : undefined, "aria-modal": open ? true : undefined, "aria-describedby": describedBy, "aria-labelledby": labelledBy, className: cn("zvk-ui-alert-dialog__content", className), "data-motion-state": presence.motionState, "data-state": presence.state, inert: presence.inert ? true : undefined, onAnimationEnd: composeEventHandlers(onAnimationEnd, presence.onExitComplete, { checkDefaultPrevented: false }), onTransitionEnd: composeEventHandlers(onTransitionEnd, presence.onExitComplete, { checkDefaultPrevented: false }), children: children }));
+    if (!open) {
+        return (_jsxs(Portal, { children: [_jsx("div", { "aria-hidden": "true", className: "zvk-ui-alert-dialog__overlay", "data-state": presence.state }), content] }));
+    }
+    return (_jsxs(Portal, { children: [_jsx("div", { "aria-hidden": "true", className: "zvk-ui-alert-dialog__overlay", "data-state": presence.state }), _jsx(DismissableLayer, { open: open, onDismiss: close, disableEscapeKeyDown: true, disableOutsidePointerDown: true, children: _jsx(FocusScope, { active: open, trapped: true, children: content }) })] }));
 }
 function AlertDialogTitle({ className, ref, ...props }) {
     const { registerTitle, titleId } = useAlertDialogContext("AlertDialog.Title");

package/dist/components/combobox/combobox.js

@@ -7,6 +7,7 @@ import { cn } from "../../utils/cn.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
 import { useFloatingPosition } from "../../internal/floating/index.js";
+import { placementParts } from "../../internal/floating/placement-aliases.js";
 import { Portal } from "../../internal/portal/index.js";
 function hasRenderableNode(value) {
     return value !== undefined && value !== null && value !== false;
@@ -76,6 +77,7 @@ export function Combobox({ "aria-describedby": ariaDescribedBy, className, clear
     const activeOption = filteredOptions.find((option) => option.value === activeValue && option.disabled !== true) ??
         firstEnabled(filteredOptions);
     const activeOptionIndex = activeOption === undefined ? -1 : filteredOptions.findIndex((option) => option.value === activeOption.value);
+    const resolvedPlacement = placementParts(floating.placement);
     React.useEffect(() => {
         if (!open) {
             setQuery(selectedOption?.label ?? "");
@@ -145,7 +147,7 @@ export function Combobox({ "aria-describedby": ariaDescribedBy, className, clear
                 setOpen(false);
             }
         }), placeholder: placeholder, required: required, value: open ? query : selectedOption?.label ?? query }));
-    return (_jsxs("div", { className: "zvk-ui-combobox", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalid ? "true" : undefined, children: [hasLabel ? _jsx("label", { className: "zvk-ui-combobox__label", htmlFor: inputId, children: label }) : null, _jsxs("div", { className: "zvk-ui-combobox__control", children: [input, clearable && selectedValue !== null ? (_jsx("button", { type: "button", className: "zvk-ui-combobox__clear", "aria-label": "Clear selection", disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: clearSelection, children: "Clear" })) : null] }), hasDescription ? _jsx("div", { className: "zvk-ui-combobox__description", id: descriptionId, children: description }) : null, hasError ? _jsx("div", { className: "zvk-ui-combobox__error", id: errorId, children: error }) : null, open ? (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: _jsx(DismissableLayer, { open: open, onDismiss: () => setOpen(false), children: _jsx("div", { id: listboxId, role: "listbox", className: "zvk-ui-combobox__popup", ref: floating.floatingRef, style: floating.floatingStyle, children: filteredOptions.map((option, index) => {
+    return (_jsxs("div", { className: "zvk-ui-combobox", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalid ? "true" : undefined, children: [hasLabel ? _jsx("label", { className: "zvk-ui-combobox__label", htmlFor: inputId, children: label }) : null, _jsxs("div", { className: "zvk-ui-combobox__control", children: [input, clearable && selectedValue !== null ? (_jsx("button", { type: "button", className: "zvk-ui-combobox__clear", "aria-label": "Clear selection", disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: clearSelection, children: "Clear" })) : null] }), hasDescription ? _jsx("div", { className: "zvk-ui-combobox__description", id: descriptionId, children: description }) : null, hasError ? _jsx("div", { className: "zvk-ui-combobox__error", id: errorId, children: error }) : null, open ? (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: _jsx(DismissableLayer, { open: open, onDismiss: () => setOpen(false), children: _jsx("div", { id: listboxId, role: "listbox", className: "zvk-ui-combobox__popup", "data-align": resolvedPlacement.align, "data-side": resolvedPlacement.side, "data-state": "open", ref: floating.floatingRef, style: floating.floatingStyle, children: filteredOptions.map((option, index) => {
                             const isActive = activeOption?.value === option.value;
                             const isSelected = selectedValue === option.value;
                             return (_jsx("div", { id: optionId(inputId, index), role: "option", "aria-disabled": option.disabled ? "true" : undefined, "aria-selected": isSelected ? "true" : "false", className: "zvk-ui-combobox__option", "data-disabled": option.disabled ? "true" : undefined, "data-highlighted": isActive ? "true" : undefined, "data-selected": isSelected ? "true" : undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => selectOption(option), children: option.label }, option.value));

package/dist/components/command/command-filter.js

@@ -1,5 +1,5 @@
 function normalized(value) {
-    return value.trim().toLocaleLowerCase();
+    return value.trim().toLowerCase();
 }
 export function commandItemMatches(item, query) {
     const needle = normalized(query);

package/dist/components/command/command.d.ts

@@ -18,6 +18,9 @@ export interface CommandListProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface CommandEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
+export interface CommandLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
 export interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     heading?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
@@ -43,6 +46,7 @@ declare function CommandRoot({ children, className, defaultValue, onItemSelect,
 declare function CommandInput({ className, onKeyDown, onValueChange, placeholder, ref, value, ...props }: CommandInputProps): React.JSX.Element;
 declare function CommandList({ className, ref, ...props }: CommandListProps): React.JSX.Element;
 declare function CommandEmpty({ className, ref, ...props }: CommandEmptyProps): React.JSX.Element | null;
+declare function CommandLoading({ className, ref, ...props }: CommandLoadingProps): React.JSX.Element;
 declare function CommandGroup({ children, className, heading, ref, ...props }: CommandGroupProps): React.JSX.Element;
 declare function CommandItem({ children, className, disabled, keywords, onClick, onSelect, ref, value, ...props }: CommandItemProps): React.JSX.Element | null;
 declare function CommandSeparator({ className, ref, ...props }: CommandSeparatorProps): React.JSX.Element;
@@ -55,6 +59,7 @@ type CommandComponent = typeof CommandRoot & {
     Input: typeof CommandInput;
     Item: typeof CommandItem;
     List: typeof CommandList;
+    Loading: typeof CommandLoading;
     Separator: typeof CommandSeparator;
     Shortcut: typeof CommandShortcut;
 };

package/dist/components/command/command.js

@@ -54,6 +54,10 @@ function CommandRoot({ children, className, defaultValue = "", onItemSelect, onV
             return;
         }
         const currentIndex = activeId === undefined ? -1 : visible.findIndex((item) => item.id === activeId);
+        if (currentIndex === -1) {
+            setActiveId(direction === "next" ? visible[0]?.id : visible.at(-1)?.id);
+            return;
+        }
         const nextIndex = direction === "next" ? currentIndex + 1 : currentIndex - 1;
         const wrapped = ((nextIndex % visible.length) + visible.length) % visible.length;
         setActiveId(visible[wrapped]?.id);
@@ -89,8 +93,7 @@ function CommandRoot({ children, className, defaultValue = "", onItemSelect, onV
             setActiveId(visible[0]?.id);
         }
     }, [activeId, query, version, visibleEnabledItems]);
-    const empty = collectionRef.current.items().some((item) => !item.data.visible) &&
-        !collectionRef.current.items().some((item) => item.data.visible);
+    const empty = collectionRef.current.items().every((item) => !item.data.visible);
     return (_jsx(CommandContext.Provider, { value: {
             activeId,
             empty,
@@ -152,6 +155,9 @@ function CommandEmpty({ className, ref, ...props }) {
     }
     return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-command__empty", className), "cmdk-empty": "" });
 }
+function CommandLoading({ className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, role: "status", "aria-atomic": "true", "aria-live": "polite", className: cn("zvk-ui-command__loading", className), "cmdk-loading": "" }));
+}
 function CommandGroup({ children, className, heading, ref, ...props }) {
     const headingId = React.useId();
     return (_jsxs("div", { ...props, ref: ref, role: "group", "aria-labelledby": heading ? headingId : undefined, className: cn("zvk-ui-command__group", className), "cmdk-group": "", children: [heading ? _jsx("div", { id: headingId, className: "zvk-ui-command__group-heading", "cmdk-group-heading": "", children: heading }) : null, children] }));
@@ -206,6 +212,7 @@ export const Command = Object.assign(CommandRoot, {
     Input: CommandInput,
     Item: CommandItem,
     List: CommandList,
+    Loading: CommandLoading,
     Separator: CommandSeparator,
     Shortcut: CommandShortcut
 });

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

@@ -1,2 +1,2 @@
 export { Command, CommandDialog } from "./command.js";
-export type { CommandDialogProps, CommandEmptyProps, CommandGroupProps, CommandInputProps, CommandItemProps, CommandListProps, CommandProps, CommandSeparatorProps, CommandShortcutProps } from "./command.js";
+export type { CommandDialogProps, CommandEmptyProps, CommandGroupProps, CommandInputProps, CommandItemProps, CommandListProps, CommandLoadingProps, CommandProps, CommandSeparatorProps, CommandShortcutProps } from "./command.js";

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

@@ -181,7 +181,7 @@ function ContextMenuContent({ align, alignOffset = 0, children, className, colli
                     if (node !== null) {
                         schedulePositionUpdate();
                     }
-                }, id: contentId, role: "menu", className: cn("zvk-ui-context-menu__content", className), "data-align": placementParts(resolvedPlacement).align, "data-side": placementParts(resolvedPlacement).side, style: { ...style, ...contentStyle }, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+                }, id: contentId, role: "menu", className: cn("zvk-ui-context-menu__content", className), "data-align": placementParts(resolvedPlacement).align, "data-side": placementParts(resolvedPlacement).side, "data-state": "open", style: { ...style, ...contentStyle }, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
                     const items = getItems();
                     const index = currentIndex(items);
                     if (event.key === "ArrowDown") {

package/dist/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+export interface DateRangePickerProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onValueChange?: (range: DateRange) => void;
+    startLabel?: string;
+    endLabel?: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    formatDate?: (date: Date) => string;
+    parseDate?: (value: string) => Date | null;
+    parseErrorMessage?: (part: DateRangePart, value: string) => string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDate?: (date: Date) => boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+type DateRangePart = "start" | "end";
+export declare function DateRangePicker({ defaultValue, description, disabledDate, endLabel, endPlaceholder, error, formatDate, label, maxDate, minDate, onValueChange, parseDate, parseErrorMessage, ref, startLabel, startPlaceholder, value }: DateRangePickerProps): React.JSX.Element;
+export {};

package/dist/components/date-range-picker/date-range-picker.js

@@ -0,0 +1,193 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Calendar } from "../calendar/calendar.js";
+import { Field } from "../field/field.js";
+import { Input } from "../input/input.js";
+import { Popover } from "../popover/popover.js";
+const emptyRange = { start: null, end: null };
+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 defaultFormatDate(date) {
+    return new Intl.DateTimeFormat(undefined, {
+        day: "numeric",
+        month: "short",
+        year: "numeric"
+    }).format(date);
+}
+function normalizeRange(range) {
+    if (!range) {
+        return emptyRange;
+    }
+    return {
+        start: range.start ?? null,
+        end: range.end ?? null
+    };
+}
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function isBeforeDay(left, right) {
+    return startOfDay(left).getTime() < startOfDay(right).getTime();
+}
+function isAfterDay(left, right) {
+    return startOfDay(left).getTime() > startOfDay(right).getTime();
+}
+function isUnavailableDate(date, { disabledDate, maxDate, minDate }) {
+    if (minDate && isBeforeDay(date, minDate)) {
+        return true;
+    }
+    if (maxDate && isAfterDay(date, maxDate)) {
+        return true;
+    }
+    return disabledDate?.(startOfDay(date)) === true;
+}
+function isValidDate(value) {
+    return value instanceof Date && !Number.isNaN(value.getTime());
+}
+function getNextCalendarRange(range, date) {
+    const selectedDate = startOfDay(date);
+    if (!range.start || range.end) {
+        return { start: selectedDate, end: null };
+    }
+    if (isBeforeDay(selectedDate, range.start)) {
+        return { start: selectedDate, end: startOfDay(range.start) };
+    }
+    return { start: startOfDay(range.start), end: selectedDate };
+}
+function getNextInputRange(range, part, date) {
+    const selectedDate = startOfDay(date);
+    if (part === "start") {
+        if (range.end && isAfterDay(selectedDate, range.end)) {
+            return { start: startOfDay(range.end), end: selectedDate };
+        }
+        return { start: selectedDate, end: range.end ? startOfDay(range.end) : null };
+    }
+    if (range.start && isBeforeDay(selectedDate, range.start)) {
+        return { start: selectedDate, end: startOfDay(range.start) };
+    }
+    return { start: range.start ? startOfDay(range.start) : null, end: selectedDate };
+}
+function clearRangePart(range, part) {
+    if (part === "start") {
+        return emptyRange;
+    }
+    return { start: range.start ? startOfDay(range.start) : null, end: null };
+}
+function getDefaultParseErrorMessage(part) {
+    return `Enter a valid ${part} date.`;
+}
+function getUnavailableDateMessage(part) {
+    return `Choose an available ${part} date.`;
+}
+function getInputValues(range, formatDate) {
+    return {
+        start: range.start ? formatDate(range.start) : "",
+        end: range.end ? formatDate(range.end) : ""
+    };
+}
+export function DateRangePicker({ defaultValue, description, disabledDate, endLabel = "End date", endPlaceholder = "End date", error, formatDate = defaultFormatDate, label, maxDate, minDate, onValueChange, parseDate, parseErrorMessage, ref, startLabel = "Start date", startPlaceholder = "Start date", value }) {
+    const generatedId = React.useId();
+    const labelId = hasRenderableNode(label) ? `${generatedId}-label` : undefined;
+    const descriptionId = hasRenderableNode(description) ? `${generatedId}-description` : undefined;
+    const externalErrorId = hasRenderableNode(error) ? `${generatedId}-error` : undefined;
+    const parseErrorId = `${generatedId}-parse-error`;
+    const startInputId = `${generatedId}-start`;
+    const endInputId = `${generatedId}-end`;
+    const hasLabel = hasRenderableNode(label);
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(() => normalizeRange(defaultValue));
+    const [openPart, setOpenPart] = React.useState(null);
+    const [parseError, setParseError] = React.useState(null);
+    const [draftValues, setDraftValues] = React.useState(() => getInputValues(normalizeRange(value ?? defaultValue), formatDate));
+    const currentRange = isControlled ? normalizeRange(value) : uncontrolledValue;
+    const displayedError = hasRenderableNode(error) ? error : parseError;
+    const hasError = hasRenderableNode(displayedError);
+    const errorId = hasRenderableNode(error) ? externalErrorId : parseError ? parseErrorId : undefined;
+    const describedBy = joinIds(descriptionId, errorId);
+    const fieldRefProps = ref !== undefined ? { ref } : {};
+    const calendarMonth = currentRange.start ?? currentRange.end ?? minDate ?? undefined;
+    const calendarProps = {
+        ...(calendarMonth !== undefined ? { defaultMonth: calendarMonth } : {}),
+        ...(disabledDate !== undefined ? { disabledDate } : {}),
+        ...(maxDate !== undefined ? { maxDate } : {}),
+        ...(minDate !== undefined ? { minDate } : {})
+    };
+    React.useEffect(() => {
+        setDraftValues(getInputValues(currentRange, formatDate));
+    }, [currentRange.start, currentRange.end, formatDate]);
+    const commitRange = (nextRange) => {
+        const normalizedRange = normalizeRange(nextRange);
+        setParseError(null);
+        if (!isControlled) {
+            setUncontrolledValue(normalizedRange);
+        }
+        onValueChange?.(normalizedRange);
+    };
+    const handleOpenChange = (part) => (nextOpen) => {
+        setOpenPart((currentPart) => {
+            if (nextOpen) {
+                return part;
+            }
+            return currentPart === part ? null : currentPart;
+        });
+    };
+    const handleCalendarSelect = (date) => {
+        if (!date) {
+            commitRange(emptyRange);
+            setOpenPart(null);
+            return;
+        }
+        const nextRange = currentRange.start && currentRange.end && openPart === "end"
+            ? getNextInputRange(currentRange, openPart, date)
+            : getNextCalendarRange(currentRange, date);
+        commitRange(nextRange);
+        if (nextRange.start && nextRange.end) {
+            setOpenPart(null);
+        }
+    };
+    const setDraftValue = (part, value) => {
+        setDraftValues((range) => ({ ...range, [part]: value }));
+    };
+    const commitInputValue = (part, value) => {
+        const trimmedValue = value.trim();
+        if (trimmedValue.length === 0) {
+            commitRange(clearRangePart(currentRange, part));
+            return;
+        }
+        if (!parseDate) {
+            return;
+        }
+        const parsedDate = parseDate?.(trimmedValue) ?? null;
+        if (!isValidDate(parsedDate)) {
+            setParseError(parseErrorMessage?.(part, trimmedValue) ?? getDefaultParseErrorMessage(part));
+            return;
+        }
+        const normalizedDate = startOfDay(parsedDate);
+        if (isUnavailableDate(normalizedDate, { disabledDate, maxDate, minDate })) {
+            setParseError(getUnavailableDateMessage(part));
+            return;
+        }
+        commitRange(getNextInputRange(currentRange, part, normalizedDate));
+    };
+    const renderDateInput = (part) => {
+        const inputId = part === "start" ? startInputId : endInputId;
+        const inputLabel = part === "start" ? startLabel : endLabel;
+        const placeholder = part === "start" ? startPlaceholder : endPlaceholder;
+        const calendarLabel = part === "start" ? "Open start date calendar" : "Open end date calendar";
+        const calendarDialogLabel = part === "start" ? "Start date calendar" : "End date calendar";
+        const inputValue = draftValues[part];
+        return (_jsxs("div", { className: "zvk-ui-date-range-picker__field", children: [_jsx("label", { className: "zvk-ui-date-range-picker__field-label", htmlFor: inputId, children: inputLabel }), _jsxs("div", { className: "zvk-ui-date-range-picker__input-row", children: [_jsx(Input, { "aria-describedby": describedBy, className: "zvk-ui-date-range-picker__input", id: inputId, invalid: hasError, placeholder: placeholder, readOnly: !parseDate, value: inputValue, onBlur: (event) => commitInputValue(part, event.currentTarget.value), onChange: (event) => setDraftValue(part, event.currentTarget.value), onKeyDown: (event) => {
+                                if (event.key === "Enter") {
+                                    event.preventDefault();
+                                    commitInputValue(part, event.currentTarget.value);
+                                }
+                            } }), _jsxs(Popover, { open: openPart === part, onOpenChange: handleOpenChange(part), placement: "bottom-start", children: [_jsx(Popover.Trigger, { "aria-label": calendarLabel, className: "zvk-ui-date-range-picker__calendar-trigger", children: "Open" }), _jsx(Popover.Content, { "aria-label": calendarDialogLabel, className: "zvk-ui-date-range-picker__content", matchTriggerWidth: false, sideOffset: 4, children: _jsx(Calendar, { ...calendarProps, selected: currentRange.end ?? currentRange.start, onSelect: handleCalendarSelect }) })] })] })] }));
+    };
+    return (_jsxs(Field, { className: "zvk-ui-date-range-picker", invalid: hasError, ...fieldRefProps, children: [hasLabel ? _jsx(Field.Label, { id: labelId, children: label }) : null, _jsxs("div", { "aria-describedby": describedBy, "aria-labelledby": labelId, className: "zvk-ui-date-range-picker__group", role: hasLabel ? "group" : undefined, children: [_jsxs("div", { className: "zvk-ui-date-range-picker__controls", children: [renderDateInput("start"), renderDateInput("end")] }), currentRange.start || currentRange.end ? (_jsx("button", { className: "zvk-ui-date-range-picker__clear", type: "button", onClick: () => commitRange(emptyRange), children: "Clear date range" })) : null] }), hasRenderableNode(description) ? _jsx(Field.Description, { id: descriptionId, children: description }) : null, hasError ? _jsx(Field.Error, { id: errorId, children: displayedError }) : null] }));
+}

package/dist/components/date-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DateRangePicker } from "./date-range-picker.js";
+export type { DateRange, DateRangePickerProps } from "./date-range-picker.js";

package/dist/components/date-range-picker/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { DateRangePicker } from "./date-range-picker.js";

package/dist/components/dialog/dialog.d.ts

@@ -43,7 +43,7 @@ interface DialogPortalProps {
 declare function DialogRoot({ children, className, container, defaultOpen, disableEscapeKeyDown, disableOutsidePointerDown, onOpenChange, open: openProp, ref, ...props }: DialogProps): React.JSX.Element;
 declare function DialogPortal({ container, children }: DialogPortalProps): React.JSX.Element;
 declare function DialogOverlay({ className, ref, ...props }: DialogOverlayProps): React.JSX.Element;
-declare function DialogContent({ className, children, forceMount, ref, ...props }: DialogContentProps): React.JSX.Element | null;
+declare function DialogContent({ className, children, forceMount, onAnimationEnd, onTransitionEnd, ref, ...props }: DialogContentProps): React.JSX.Element | null;
 declare function DialogHeader({ className, ref, ...props }: DialogHeaderProps): React.JSX.Element;
 declare function DialogTitle({ className, ref, ...props }: DialogTitleProps): React.JSX.Element;
 declare function DialogDescription({ className, ref, ...props }: DialogDescriptionProps): React.JSX.Element;

package/dist/components/dialog/dialog.js

@@ -6,6 +6,7 @@ import { cn } from "../../utils/cn.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { DismissableLayer } from "../../internal/dismissable-layer/dismissable-layer.js";
 import { FocusScope } from "../../internal/focus/focus-scope.js";
+import { usePresence } from "../../internal/presence/index.js";
 import { lockScroll, unlockScroll } from "../../internal/scroll-lock/scroll-lock.js";
 import { Portal } from "../../internal/portal/index.js";
 import { Slot } from "../../internal/slot/index.js";
@@ -29,6 +30,7 @@ function composeRefs(...refs) {
         }
     };
 }
+const dialogExitDurationMs = 180;
 function DialogRoot({ children, className, container, defaultOpen = false, disableEscapeKeyDown = false, disableOutsidePointerDown = false, onOpenChange, open: openProp, ref, ...props }) {
     const [open, setOpen] = useControllableState({
         ...(openProp !== undefined ? { value: openProp } : {}),
@@ -51,15 +53,6 @@ function DialogRoot({ children, className, container, defaultOpen = false, disab
             setDescribedBy((current) => (current === id ? undefined : current));
         };
     }, []);
-    React.useLayoutEffect(() => {
-        if (!open) {
-            return;
-        }
-        lockScroll();
-        return () => {
-            unlockScroll();
-        };
-    }, [open]);
     return (_jsx(DialogContext.Provider, { value: {
             close: () => {
                 setOpen(false);
@@ -88,16 +81,28 @@ function DialogPortal({ container, children }) {
 function DialogOverlay({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-dialog__overlay", className) });
 }
-function DialogContent({ className, children, forceMount = false, ref, ...props }) {
+function DialogContent({ className, children, forceMount = false, onAnimationEnd, onTransitionEnd, ref, ...props }) {
     const { close, container, contentId, describedBy, disableEscapeKeyDown, disableOutsidePointerDown, labelledBy, open } = useDialogContext("Dialog.Content");
-    if (!open && !forceMount) {
+    const presence = usePresence({ open, forceMount, exitDurationMs: dialogExitDurationMs });
+    const hidden = !open && forceMount && presence.motionState === "idle";
+    const shouldLockScroll = presence.present && (!presence.inert || presence.motionState === "exiting");
+    React.useLayoutEffect(() => {
+        if (!shouldLockScroll) {
+            return;
+        }
+        lockScroll();
+        return () => {
+            unlockScroll();
+        };
+    }, [shouldLockScroll]);
+    if (!presence.present) {
         return null;
     }
-    const content = (_jsx("div", { ...props, ref: ref, id: contentId, role: "dialog", "aria-modal": true, "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: cn("zvk-ui-dialog__content", className), "data-state": open ? "open" : "closed", hidden: open ? undefined : true, children: children }));
+    const content = (_jsx("div", { ...props, ref: ref, id: contentId, role: "dialog", "aria-hidden": presence.inert ? true : undefined, "aria-modal": open ? true : undefined, "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: cn("zvk-ui-dialog__content", className), "data-motion-state": presence.motionState, "data-state": presence.state, hidden: hidden ? true : undefined, inert: presence.inert ? true : undefined, onAnimationEnd: composeEventHandlers(onAnimationEnd, presence.onExitComplete, { checkDefaultPrevented: false }), onTransitionEnd: composeEventHandlers(onTransitionEnd, presence.onExitComplete, { checkDefaultPrevented: false }), children: children }));
     if (!open) {
-        return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, { "aria-hidden": true, hidden: true }), content] }));
+        return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, { "aria-hidden": true, "data-state": presence.state, hidden: hidden ? true : undefined }), content] }));
     }
-    return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, { "aria-hidden": true }), _jsx(DismissableLayer, { open: open, disableEscapeKeyDown: disableEscapeKeyDown, disableOutsidePointerDown: disableOutsidePointerDown, onDismiss: close, children: _jsx(FocusScope, { trapped: true, active: open, children: content }) })] }));
+    return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, { "aria-hidden": true, "data-state": presence.state }), _jsx(DismissableLayer, { open: open, disableEscapeKeyDown: disableEscapeKeyDown, disableOutsidePointerDown: disableOutsidePointerDown, onDismiss: close, children: _jsx(FocusScope, { trapped: true, active: open, children: content }) })] }));
 }
 function DialogHeader({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-dialog__header", className) });

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -57,8 +57,8 @@ export interface DropdownMenuSubProps extends React.HTMLAttributes<HTMLDivElemen
     ref?: React.Ref<HTMLDivElement>;
 }
 declare function DropdownMenuRoot({ children, className, container, defaultOpen, onOpenChange, open: openProp, placement, sideOffset, collisionPadding, matchTriggerWidth, ...props }: DropdownMenuProps): React.JSX.Element;
-declare function DropdownMenuTrigger({ asChild, className, disabled, onClick, ref, type, ...props }: DropdownMenuTriggerProps): React.JSX.Element;
-declare function DropdownMenuContent({ align, alignOffset, children, className, forceMount, side, sideOffset, collisionPadding, matchTriggerWidth, ref, onKeyDown, ...props }: DropdownMenuContentProps): React.JSX.Element | null;
+declare function DropdownMenuTrigger({ asChild, children, className, disabled, onClick, ref, type, ...props }: DropdownMenuTriggerProps): React.JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, children, className, forceMount, side, sideOffset, collisionPadding, matchTriggerWidth, ref, onAnimationEnd, onKeyDown, ...props }: DropdownMenuContentProps): React.JSX.Element | null;
 declare function DropdownMenuItem({ asChild, children, className, disabled, onClick, onSelect, onKeyDown, ref, ...props }: DropdownMenuItemProps): React.JSX.Element;
 declare function DropdownMenuSeparator({ className, ref, ...props }: DropdownMenuSeparatorProps): React.JSX.Element;
 declare function DropdownMenuLabel({ className, ref, ...props }: DropdownMenuLabelProps): React.JSX.Element;