@zvk/ui 0.1.11 → 0.1.12

package/dist/components/multi-select/multi-select.js

@@ -0,0 +1,212 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { commandItemMatches } from "../command/command-filter.js";
+import { Field } from "../field/field.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";
+import { moveCollectionKey, normalizeSelectionKeys } from "../../internal/collection/index.js";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { cn } from "../../utils/cn.js";
+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 composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref && "current" in ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function optionId(baseId, index) {
+    return `${baseId}-option-${index}`;
+}
+const nativeSelectStyle = {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    margin: -1,
+    opacity: 0,
+    pointerEvents: "none"
+};
+function orderSelectedValues(values, options) {
+    const normalizedValues = normalizeSelectionKeys(values);
+    const optionOrder = new Map(options.map((option, index) => [option.value, index]));
+    return normalizedValues.sort((left, right) => {
+        const leftOrder = optionOrder.get(left) ?? Number.MAX_SAFE_INTEGER;
+        const rightOrder = optionOrder.get(right) ?? Number.MAX_SAFE_INTEGER;
+        if (leftOrder === rightOrder) {
+            return left.localeCompare(right);
+        }
+        return leftOrder - rightOrder;
+    });
+}
+function firstEnabledOption(options, selectedValues, maxSelected) {
+    return options.find((option) => !isOptionUnavailable(option, selectedValues, maxSelected));
+}
+function isOptionUnavailable(option, selectedValues, maxSelected) {
+    if (option.disabled === true) {
+        return true;
+    }
+    return maxSelected !== undefined && selectedValues.length >= maxSelected && !selectedValues.includes(option.value);
+}
+function selectedOptionLabel(options, value) {
+    return options.find((option) => option.value === value)?.label ?? value;
+}
+export function MultiSelect({ "aria-describedby": ariaDescribedBy, className, clearable = false, collisionPadding = 0, container, defaultValue = [], description, disabled, emptyState = "No options found", error, id, invalid, label, matchTriggerWidth = true, maxSelected, name, onBlur, onFocus, onKeyDown, onValueChange, options, placeholder, placement = "bottom-start", ref, required, sideOffset = 4, size = "md", value, ...props }) {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const listboxId = `${inputId}-listbox`;
+    const hasLabel = hasRenderableNode(label);
+    const hasDescription = hasRenderableNode(description);
+    const hasError = hasRenderableNode(error);
+    const invalidState = invalid || hasError;
+    const descriptionId = hasDescription ? `${inputId}-description` : undefined;
+    const errorId = hasError ? `${inputId}-error` : undefined;
+    const describedBy = joinIds(ariaDescribedBy, descriptionId, errorId);
+    const inputRef = React.useRef(null);
+    const [nativeInvalid, setNativeInvalid] = React.useState(false);
+    const [selectedValues, setSelectedValues] = useControllableState({
+        ...(value !== undefined ? { value: orderSelectedValues(value, options) } : {}),
+        defaultValue: orderSelectedValues(defaultValue, options),
+        ...(onValueChange ? { onChange: onValueChange } : {})
+    });
+    const resolvedInvalid = invalidState || nativeInvalid;
+    const [query, setQuery] = React.useState("");
+    const [open, setOpen] = React.useState(false);
+    const filteredOptions = React.useMemo(() => options.filter((option) => commandItemMatches(option, query)), [options, query]);
+    const navigationItems = filteredOptions.map((option) => ({
+        disabled: isOptionUnavailable(option, selectedValues, maxSelected),
+        id: option.value,
+        textValue: option.label
+    }));
+    const firstEnabledValue = moveCollectionKey(navigationItems, undefined, "first");
+    const [activeValue, setActiveValue] = React.useState(firstEnabledValue);
+    const activeOptionIndex = filteredOptions.findIndex((option) => option.value === activeValue);
+    const floating = useFloatingPosition({
+        open,
+        placement,
+        strategy: "absolute",
+        offset: sideOffset,
+        collisionPadding,
+        matchReferenceWidth: matchTriggerWidth
+    });
+    const resolvedPlacement = placementParts(floating.placement);
+    React.useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const activeOption = filteredOptions.find((option) => option.value === activeValue);
+        if (!activeOption || isOptionUnavailable(activeOption, selectedValues, maxSelected)) {
+            setActiveValue(firstEnabledValue);
+        }
+    }, [activeValue, filteredOptions, firstEnabledValue, maxSelected, open, selectedValues]);
+    React.useEffect(() => {
+        if (!required || selectedValues.length > 0) {
+            setNativeInvalid(false);
+        }
+    }, [required, selectedValues.length]);
+    function openListbox() {
+        if (disabled) {
+            return;
+        }
+        setOpen(true);
+        setActiveValue(firstEnabledValue);
+    }
+    function toggleOption(option) {
+        if (!option || isOptionUnavailable(option, selectedValues, maxSelected)) {
+            return;
+        }
+        setSelectedValues((currentValues) => {
+            const normalizedValues = normalizeSelectionKeys(currentValues);
+            const nextValues = normalizedValues.includes(option.value)
+                ? normalizedValues.filter((selectedValue) => selectedValue !== option.value)
+                : [...normalizedValues, option.value];
+            return orderSelectedValues(nextValues, options);
+        });
+        setQuery("");
+        inputRef.current?.focus();
+    }
+    function removeValue(selectedValue) {
+        setSelectedValues((currentValues) => orderSelectedValues(normalizeSelectionKeys(currentValues).filter((value) => value !== selectedValue), options));
+        inputRef.current?.focus();
+    }
+    function clearValues() {
+        setSelectedValues([]);
+        setQuery("");
+        setOpen(false);
+        inputRef.current?.focus();
+    }
+    function moveActive(movement) {
+        setActiveValue(moveCollectionKey(navigationItems, activeValue, movement));
+    }
+    const input = (_jsxs("div", { className: "zvk-ui-multi-select__control", "data-disabled": disabled ? "true" : undefined, "data-invalid": resolvedInvalid ? "true" : undefined, "data-size": size, onClick: () => inputRef.current?.focus(), children: [_jsxs("div", { className: "zvk-ui-multi-select__values", children: [selectedValues.map((selectedValue) => (_jsxs("span", { className: "zvk-ui-multi-select__token", children: [_jsx("span", { className: "zvk-ui-multi-select__token-label", children: selectedOptionLabel(options, selectedValue) }), _jsx("button", { "aria-label": `Remove ${selectedOptionLabel(options, selectedValue)}`, className: "zvk-ui-multi-select__token-remove", disabled: disabled, onClick: () => removeValue(selectedValue), onMouseDown: (event) => event.preventDefault(), type: "button", children: "x" })] }, selectedValue))), _jsx("input", { ...props, ref: composeRefs(ref, inputRef, floating.referenceRef), "aria-activedescendant": open && activeOptionIndex >= 0 ? optionId(inputId, activeOptionIndex) : undefined, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-describedby": describedBy, "aria-expanded": open ? "true" : "false", "aria-invalid": resolvedInvalid ? "true" : undefined, className: cn("zvk-ui-multi-select__input", className), disabled: disabled, id: inputId, onBlur: onBlur, onChange: (event) => {
+                            setQuery(event.currentTarget.value);
+                            setOpen(true);
+                        }, onFocus: composeEventHandlers(onFocus, openListbox), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+                            if (event.key === "ArrowDown") {
+                                event.preventDefault();
+                                if (!open) {
+                                    openListbox();
+                                    return;
+                                }
+                                moveActive("next");
+                                return;
+                            }
+                            if (event.key === "ArrowUp") {
+                                event.preventDefault();
+                                moveActive("previous");
+                                return;
+                            }
+                            if (event.key === "Home" && open) {
+                                event.preventDefault();
+                                moveActive("first");
+                                return;
+                            }
+                            if (event.key === "End" && open) {
+                                event.preventDefault();
+                                moveActive("last");
+                                return;
+                            }
+                            if (event.key === "Enter" || event.key === " ") {
+                                if (open) {
+                                    event.preventDefault();
+                                    toggleOption(filteredOptions[activeOptionIndex]);
+                                }
+                                return;
+                            }
+                            if (event.key === "Escape") {
+                                setOpen(false);
+                                return;
+                            }
+                            if (event.key === "Backspace" && query.length === 0) {
+                                const lastValue = selectedValues.at(-1);
+                                if (lastValue !== undefined) {
+                                    event.preventDefault();
+                                    removeValue(lastValue);
+                                }
+                            }
+                        }), placeholder: selectedValues.length === 0 ? placeholder : undefined, required: false, role: "combobox", value: query })] }), clearable && selectedValues.length > 0 ? (_jsx("button", { "aria-label": "Clear selections", className: "zvk-ui-multi-select__clear", disabled: disabled, onClick: clearValues, onMouseDown: (event) => event.preventDefault(), type: "button", children: "Clear" })) : null, name || required ? (_jsx("select", { "aria-hidden": "true", disabled: disabled, multiple: true, name: name, onChange: () => undefined, onInvalid: (event) => {
+                    event.preventDefault();
+                    setNativeInvalid(true);
+                    inputRef.current?.focus();
+                }, required: required, style: nativeSelectStyle, tabIndex: -1, value: selectedValues, children: options.map((option) => (_jsx("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value))) })) : null] }));
+    return (_jsxs(Field, { disabled: Boolean(disabled), invalid: resolvedInvalid, required: Boolean(required), children: [hasLabel ? _jsx(Field.Label, { htmlFor: inputId, children: label }) : null, input, hasDescription ? _jsx(Field.Description, { id: descriptionId, children: description }) : null, hasError ? _jsx(Field.Error, { id: errorId, children: error }) : null, open ? (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: _jsx(DismissableLayer, { open: open, onDismiss: () => setOpen(false), children: _jsx("div", { ref: floating.floatingRef, className: "zvk-ui-multi-select__popup", "data-align": resolvedPlacement.align, "data-side": resolvedPlacement.side, "data-state": "open", id: listboxId, role: "listbox", "aria-multiselectable": "true", style: floating.floatingStyle, children: filteredOptions.length === 0 ? (_jsx("div", { className: "zvk-ui-multi-select__empty", children: emptyState })) : filteredOptions.map((option, index) => {
+                            const selected = selectedValues.includes(option.value);
+                            const unavailable = isOptionUnavailable(option, selectedValues, maxSelected);
+                            const active = activeValue === option.value && !unavailable;
+                            return (_jsxs("div", { "aria-disabled": unavailable ? "true" : undefined, "aria-selected": selected ? "true" : "false", className: "zvk-ui-multi-select__option", "data-disabled": unavailable ? "true" : undefined, "data-highlighted": active ? "true" : undefined, "data-selected": selected ? "true" : undefined, id: optionId(inputId, index), onClick: () => toggleOption(option), onMouseDown: (event) => event.preventDefault(), role: "option", children: [_jsx("span", { className: "zvk-ui-multi-select__option-check", "aria-hidden": "true", children: selected ? "*" : "" }), _jsx("span", { children: option.label })] }, option.value));
+                        }) }) }) })) : null] }));
+}

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

@@ -0,0 +1,2 @@
+export { Splitter } from "./splitter.js";
+export type { SplitterHandleProps, SplitterOrientation, SplitterPanelProps, SplitterProps, SplitterValue } from "./splitter.js";

package/dist/components/splitter/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Splitter } from "./splitter.js";

package/dist/components/splitter/splitter.d.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+export type SplitterOrientation = "horizontal" | "vertical";
+export type SplitterValue = readonly [number, number];
+export interface SplitterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {
+    defaultValue?: SplitterValue;
+    disabled?: boolean;
+    onResizeEnd?: (value: SplitterValue) => void;
+    onResizeStart?: (value: SplitterValue) => void;
+    onValueChange?: (value: SplitterValue) => void;
+    orientation?: SplitterOrientation;
+    ref?: React.Ref<HTMLDivElement>;
+    value?: SplitterValue;
+}
+export interface SplitterPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    collapsedSize?: number;
+    collapsible?: boolean;
+    maxSize?: number;
+    minSize?: number;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface SplitterHandleProps extends React.HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+    step?: number;
+}
+interface SplitterLimits {
+    collapsedSize: number;
+    collapsible: boolean;
+    maxSize: number;
+    minSize: number;
+}
+interface SplitterPanelInternalProps {
+    __zvkSplitterPanelIndex?: number | undefined;
+    __zvkSplitterPanelOrientation?: SplitterOrientation | undefined;
+    __zvkSplitterPanelSize?: number | undefined;
+}
+interface SplitterHandleInternalProps {
+    __zvkSplitterDisabled?: boolean | undefined;
+    __zvkSplitterLimits?: SplitterLimits | undefined;
+    __zvkSplitterOnChange?: ((nextPrimarySize: number, options?: SplitterResizeOptions) => SplitterValue) | undefined;
+    __zvkSplitterOnResizeEnd?: ((value: SplitterValue) => void) | undefined;
+    __zvkSplitterOnResizeStart?: ((value: SplitterValue) => void) | undefined;
+    __zvkSplitterOrientation?: SplitterOrientation | undefined;
+    __zvkSplitterRestoreRef?: React.MutableRefObject<number> | undefined;
+    __zvkSplitterValue?: SplitterValue | undefined;
+}
+interface SplitterResizeOptions {
+    allowCollapsed?: boolean;
+}
+declare function SplitterRoot({ children, className, defaultValue: defaultValueProp, disabled, onResizeEnd, onResizeStart, onValueChange, orientation, ref, value, ...props }: SplitterProps): React.JSX.Element;
+declare function SplitterPanel({ __zvkSplitterPanelIndex, __zvkSplitterPanelOrientation, __zvkSplitterPanelSize, className, collapsedSize, collapsible, maxSize, minSize, ref, style, ...props }: SplitterPanelProps & SplitterPanelInternalProps): React.JSX.Element;
+declare namespace SplitterPanel {
+    var displayName: string;
+}
+declare function SplitterHandle({ __zvkSplitterDisabled, __zvkSplitterLimits, __zvkSplitterOnChange, __zvkSplitterOnResizeEnd, __zvkSplitterOnResizeStart, __zvkSplitterOrientation, __zvkSplitterRestoreRef, __zvkSplitterValue, className, disabled, onKeyDown, onPointerDown, ref, role, step, tabIndex, ...props }: SplitterHandleProps & SplitterHandleInternalProps): React.JSX.Element;
+declare namespace SplitterHandle {
+    var displayName: string;
+}
+export declare const Splitter: typeof SplitterRoot & {
+    Handle: typeof SplitterHandle;
+    Panel: typeof SplitterPanel;
+};
+export {};

package/dist/components/splitter/splitter.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+const defaultValue = [50, 50];
+function normalizeValue(value) {
+    const primary = Number.isFinite(value[0]) ? value[0] : defaultValue[0];
+    const clampedPrimary = Math.min(100, Math.max(0, primary));
+    return [clampedPrimary, 100 - clampedPrimary];
+}
+function getPanelLimits(panel) {
+    return {
+        collapsedSize: panel?.props.collapsedSize ?? 0,
+        collapsible: panel?.props.collapsible ?? false,
+        maxSize: panel?.props.maxSize ?? 100,
+        minSize: panel?.props.minSize ?? 0
+    };
+}
+function clampPrimarySize(nextPrimarySize, limits, options = {}) {
+    const minSize = options.allowCollapsed && limits.collapsible ? Math.min(limits.minSize, limits.collapsedSize) : limits.minSize;
+    return Math.min(limits.maxSize, Math.max(minSize, nextPrimarySize));
+}
+function isPanelElement(child) {
+    return React.isValidElement(child) && child.type === SplitterPanel;
+}
+function isHandleElement(child) {
+    return React.isValidElement(child) && child.type === SplitterHandle;
+}
+function separatorOrientation(orientation) {
+    return orientation === "horizontal" ? "vertical" : "horizontal";
+}
+function SplitterRoot({ children, className, defaultValue: defaultValueProp = defaultValue, disabled, onResizeEnd, onResizeStart, onValueChange, orientation = "horizontal", ref, value, ...props }) {
+    const [internalValue, setInternalValue] = React.useState(() => normalizeValue(defaultValueProp));
+    const currentValue = normalizeValue(value ?? internalValue);
+    const isControlled = value !== undefined;
+    const panelElements = React.Children.toArray(children).filter(isPanelElement);
+    const primaryPanel = panelElements[0];
+    const limits = getPanelLimits(primaryPanel);
+    const restoreValueRef = React.useRef(currentValue[0]);
+    React.useLayoutEffect(() => {
+        if (currentValue[0] > limits.collapsedSize) {
+            restoreValueRef.current = currentValue[0];
+        }
+    }, [currentValue, limits.collapsedSize]);
+    const updateValue = React.useCallback((nextPrimarySize, options = {}) => {
+        const nextValue = normalizeValue([clampPrimarySize(nextPrimarySize, limits, options), 0]);
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        onValueChange?.(nextValue);
+        return nextValue;
+    }, [isControlled, limits, onValueChange]);
+    let panelIndex = 0;
+    const renderedChildren = React.Children.map(children, (child) => {
+        if (isPanelElement(child)) {
+            const nextPanelIndex = panelIndex;
+            panelIndex += 1;
+            return React.cloneElement(child, {
+                __zvkSplitterPanelIndex: nextPanelIndex,
+                __zvkSplitterPanelOrientation: orientation,
+                __zvkSplitterPanelSize: currentValue[nextPanelIndex] ?? 0
+            });
+        }
+        if (isHandleElement(child)) {
+            return React.cloneElement(child, {
+                __zvkSplitterDisabled: disabled,
+                __zvkSplitterLimits: limits,
+                __zvkSplitterOnChange: updateValue,
+                __zvkSplitterOnResizeEnd: onResizeEnd,
+                __zvkSplitterOnResizeStart: onResizeStart,
+                __zvkSplitterOrientation: orientation,
+                __zvkSplitterRestoreRef: restoreValueRef,
+                __zvkSplitterValue: currentValue
+            });
+        }
+        return child;
+    });
+    return (_jsx("div", { ...props, ref: ref, className: cn("zvk-ui-splitter", className), "data-disabled": disabled ? "true" : undefined, "data-orientation": orientation, children: renderedChildren }));
+}
+function SplitterPanel({ __zvkSplitterPanelIndex, __zvkSplitterPanelOrientation, __zvkSplitterPanelSize, className, collapsedSize, collapsible, maxSize, minSize, ref, style, ...props }) {
+    const panelStyle = {
+        ...style,
+        flexBasis: __zvkSplitterPanelSize === undefined ? style?.flexBasis : `${__zvkSplitterPanelSize}%`
+    };
+    return (_jsx("div", { ...props, ref: ref, className: cn("zvk-ui-splitter__panel", className), "data-orientation": __zvkSplitterPanelOrientation, "data-panel-index": __zvkSplitterPanelIndex, style: panelStyle }));
+}
+function SplitterHandle({ __zvkSplitterDisabled, __zvkSplitterLimits, __zvkSplitterOnChange, __zvkSplitterOnResizeEnd, __zvkSplitterOnResizeStart, __zvkSplitterOrientation = "horizontal", __zvkSplitterRestoreRef, __zvkSplitterValue = defaultValue, className, disabled, onKeyDown, onPointerDown, ref, role = "separator", step = 10, tabIndex, ...props }) {
+    const isDisabled = disabled || __zvkSplitterDisabled;
+    const limits = __zvkSplitterLimits ?? getPanelLimits(undefined);
+    const currentPrimarySize = __zvkSplitterValue[0];
+    const ariaOrientation = separatorOrientation(__zvkSplitterOrientation);
+    return (_jsx("div", { ...props, ref: ref, "aria-disabled": isDisabled ? true : undefined, "aria-orientation": ariaOrientation, "aria-valuemax": limits.maxSize, "aria-valuemin": limits.minSize, "aria-valuenow": currentPrimarySize, className: cn("zvk-ui-splitter__handle", className), "data-disabled": isDisabled ? "true" : undefined, "data-orientation": ariaOrientation, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (isDisabled || !__zvkSplitterOnChange) {
+                return;
+            }
+            let nextPrimarySize;
+            let allowCollapsed = false;
+            if (event.key === "ArrowRight" ||
+                event.key === "ArrowDown") {
+                nextPrimarySize = currentPrimarySize + step;
+            }
+            else if (event.key === "ArrowLeft" ||
+                event.key === "ArrowUp") {
+                nextPrimarySize = currentPrimarySize - step;
+            }
+            else if (event.key === "Home") {
+                nextPrimarySize = limits.minSize;
+            }
+            else if (event.key === "End") {
+                nextPrimarySize = limits.maxSize;
+            }
+            else if (event.key === "Enter" && limits.collapsible) {
+                const restoreValue = __zvkSplitterRestoreRef?.current ?? limits.minSize;
+                nextPrimarySize = currentPrimarySize <= limits.collapsedSize ? restoreValue : limits.collapsedSize;
+                allowCollapsed = true;
+            }
+            else {
+                return;
+            }
+            event.preventDefault();
+            __zvkSplitterOnResizeStart?.(__zvkSplitterValue);
+            const nextValue = __zvkSplitterOnChange(nextPrimarySize, { allowCollapsed });
+            __zvkSplitterOnResizeEnd?.(nextValue);
+        }), onPointerDown: composeEventHandlers(onPointerDown, (event) => {
+            if (isDisabled || !__zvkSplitterOnChange) {
+                return;
+            }
+            const splitter = event.currentTarget.parentElement;
+            const rect = splitter?.getBoundingClientRect();
+            const totalSize = __zvkSplitterOrientation === "horizontal" ? rect?.width : rect?.height;
+            if (!totalSize) {
+                return;
+            }
+            event.preventDefault();
+            const handle = event.currentTarget;
+            const pointerId = event.pointerId;
+            const startCoordinate = __zvkSplitterOrientation === "horizontal" ? event.clientX : event.clientY;
+            const startPrimarySize = currentPrimarySize;
+            let latestValue = __zvkSplitterValue;
+            handle.setPointerCapture?.(pointerId);
+            __zvkSplitterOnResizeStart?.(__zvkSplitterValue);
+            const handlePointerMove = (moveEvent) => {
+                const currentCoordinate = __zvkSplitterOrientation === "horizontal" ? moveEvent.clientX : moveEvent.clientY;
+                const delta = ((currentCoordinate - startCoordinate) / totalSize) * 100;
+                latestValue = __zvkSplitterOnChange(startPrimarySize + delta);
+            };
+            const handlePointerUp = () => {
+                window.removeEventListener("pointermove", handlePointerMove);
+                window.removeEventListener("pointerup", handlePointerUp);
+                handle.releasePointerCapture?.(pointerId);
+                __zvkSplitterOnResizeEnd?.(latestValue);
+            };
+            window.addEventListener("pointermove", handlePointerMove);
+            window.addEventListener("pointerup", handlePointerUp, { once: true });
+        }), role: role, tabIndex: isDisabled ? -1 : tabIndex ?? 0 }));
+}
+SplitterPanel.displayName = "Splitter.Panel";
+SplitterHandle.displayName = "Splitter.Handle";
+export const Splitter = Object.assign(SplitterRoot, {
+    Handle: SplitterHandle,
+    Panel: SplitterPanel
+});

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

@@ -0,0 +1,2 @@
+export { Stepper } from "./stepper.js";
+export type { StepperItem, StepperItemState, StepperOrientation, StepperProps, StepperStatus } from "./stepper.js";

package/dist/components/stepper/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Stepper } from "./stepper.js";

package/dist/components/stepper/stepper.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+export type StepperOrientation = "horizontal" | "vertical";
+export type StepperStatus = "complete" | "current" | "upcoming" | "disabled";
+export interface StepperItem {
+    id: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    optional?: boolean;
+}
+export interface StepperItemState {
+    clickable: boolean;
+    complete: boolean;
+    current: boolean;
+    disabled: boolean;
+    index: number;
+    status: StepperStatus;
+}
+export interface StepperProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onChange"> {
+    defaultValue?: string;
+    interactive?: boolean;
+    items: readonly StepperItem[];
+    linear?: boolean;
+    onValueChange?: (value: string) => void;
+    orientation?: StepperOrientation;
+    ref?: React.Ref<HTMLElement>;
+    renderItem?: (item: StepperItem, state: StepperItemState) => React.ReactNode;
+    value?: string;
+}
+export declare function Stepper({ "aria-label": ariaLabel, className, defaultValue, interactive, items, linear, onValueChange, orientation, ref, renderItem, value, ...props }: StepperProps): React.JSX.Element;

package/dist/components/stepper/stepper.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { cn } from "../../utils/cn.js";
+function firstEnabledItem(items) {
+    return items.find((item) => item.disabled !== true) ?? items[0];
+}
+function nextEnabledIndex(items, currentIndex) {
+    for (let index = currentIndex + 1; index < items.length; index += 1) {
+        if (items[index]?.disabled !== true) {
+            return index;
+        }
+    }
+    return currentIndex;
+}
+function getItemStatus(item, index, currentIndex) {
+    if (item.disabled) {
+        return "disabled";
+    }
+    if (index === currentIndex) {
+        return "current";
+    }
+    if (index < currentIndex) {
+        return "complete";
+    }
+    return "upcoming";
+}
+function defaultRenderItem(item, state) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "zvk-ui-stepper__indicator", "aria-hidden": "true", children: state.complete ? "done" : state.index + 1 }), _jsxs("span", { className: "zvk-ui-stepper__content", children: [_jsx("span", { className: "zvk-ui-stepper__label", children: item.label }), item.description ? _jsx("span", { className: "zvk-ui-stepper__description", children: item.description }) : null, item.optional ? _jsx("span", { className: "zvk-ui-stepper__optional", children: "Optional" }) : null] })] }));
+}
+export function Stepper({ "aria-label": ariaLabel = "Progress", className, defaultValue, interactive = false, items, linear = true, onValueChange, orientation = "horizontal", ref, renderItem = defaultRenderItem, value, ...props }) {
+    const fallbackValue = defaultValue ?? firstEnabledItem(items)?.id ?? "";
+    const [currentValue, setCurrentValue] = useControllableState({
+        ...(value !== undefined ? { value } : {}),
+        defaultValue: fallbackValue,
+        ...(onValueChange ? { onChange: onValueChange } : {})
+    });
+    const currentIndex = Math.max(0, items.findIndex((item) => item.id === currentValue));
+    const nextIndex = nextEnabledIndex(items, currentIndex);
+    function canActivate(item, index) {
+        if (!interactive || item.disabled) {
+            return false;
+        }
+        return !linear || index <= nextIndex;
+    }
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": ariaLabel, className: cn("zvk-ui-stepper", className), "data-interactive": interactive ? "true" : undefined, "data-linear": linear ? "true" : undefined, "data-orientation": orientation, children: _jsx("ol", { className: "zvk-ui-stepper__list", children: items.map((item, index) => {
+                const status = getItemStatus(item, index, currentIndex);
+                const clickable = canActivate(item, index);
+                const state = {
+                    clickable,
+                    complete: status === "complete",
+                    current: status === "current",
+                    disabled: status === "disabled",
+                    index,
+                    status
+                };
+                const content = renderItem(item, state);
+                return (_jsx("li", { "aria-current": state.current ? "step" : undefined, className: "zvk-ui-stepper__item", "data-clickable": clickable ? "true" : undefined, "data-state": status, children: interactive ? (_jsx("button", { "aria-disabled": !clickable ? "true" : undefined, className: "zvk-ui-stepper__trigger", disabled: !clickable, onClick: () => setCurrentValue(item.id), type: "button", children: content })) : (_jsx("span", { className: "zvk-ui-stepper__step", children: content })) }, item.id));
+            }) }) }));
+}

package/dist/components/tags-input/index.d.ts

@@ -0,0 +1,2 @@
+export { TagsInput } from "./tags-input.js";
+export type { TagsInputProps, TagsInputSize, TagsInputValidationResult } from "./tags-input.js";

package/dist/components/tags-input/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { TagsInput } from "./tags-input.js";

package/dist/components/tags-input/tags-input.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export type TagsInputSize = "sm" | "md" | "lg";
+export type TagsInputValidationResult = string | null | undefined;
+export interface TagsInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "name" | "onChange" | "size" | "value"> {
+    allowDuplicates?: boolean;
+    defaultValue?: readonly string[];
+    delimiterKeys?: readonly string[];
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    label?: React.ReactNode;
+    maxItems?: number;
+    name?: string;
+    normalizeTag?: (value: string) => string;
+    onValueChange?: (value: string[]) => void;
+    ref?: React.Ref<HTMLInputElement>;
+    size?: TagsInputSize;
+    validateTag?: (value: string, values: readonly string[]) => TagsInputValidationResult;
+    value?: readonly string[];
+}
+export declare function TagsInput({ "aria-describedby": ariaDescribedBy, allowDuplicates, className, defaultValue, delimiterKeys, description, disabled, error, id, invalid, label, maxItems, name, normalizeTag, onBlur, onFocus, onKeyDown, onValueChange, placeholder, ref, required, size, validateTag, value, ...props }: TagsInputProps): React.JSX.Element;