@fastsprout/reacd-shadcn 0.0.0-stage → 0.3.0

package/dist/shared/input-menu/input-menu-form.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function InputMenuForm({ properties, input, invalid, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: properties.name, value: properties.value, disabled: properties.disabled }), _jsx("input", { className: "reacd-input-menu-validation", tabIndex: -1, "aria-hidden": "true", required: properties.required, disabled: properties.disabled, defaultValue: properties.value, onInvalid: (event) => {
+                    event.preventDefault();
+                    invalid();
+                    input.current?.focus();
+                } }, String(properties.value === ''))] }));
+}

package/dist/shared/input-menu/input-menu-popup.d.ts

@@ -0,0 +1,8 @@
+import type { InputMenuProps } from '@fastsprout/reacd/adapter-runtime/components/input-menu/index.js';
+export declare function InputMenuPopup({ label, items, inactive, highlight, open, }: {
+    label: string;
+    open: boolean;
+    items: InputMenuProps['items'];
+    inactive: boolean;
+    highlight: (item: InputMenuProps['items'][number]) => void;
+}): import("react").JSX.Element;

package/dist/shared/input-menu/input-menu-popup.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ControlOption } from '../primitives/control-option.js';
+import { ControlSurface } from '../primitives/control-surface.js';
+import { useContext } from 'react';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { useDirection } from '@base-ui/react/direction-provider';
+import { FORM_MENU_DEFAULTS, FORM_MENU_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/form-menu-policy.js';
+import { ThemeVariablesContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/theme-context.js';
+import { PortalHostContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+export function InputMenuPopup({ label, items, inactive, highlight, open, }) {
+    const variables = useContext(ThemeVariablesContext);
+    const host = useContext(PortalHostContext);
+    const direction = useDirection();
+    return (_jsx(Autocomplete.Portal, { container: host ?? undefined, children: _jsx(Autocomplete.Positioner, { sideOffset: FORM_MENU_POLICY.sideOffsetPx, collisionPadding: FORM_MENU_POLICY.collisionPaddingPx, className: "reacd-root reacd-portal-root reacd-input-menu-positioner", style: variables, dir: direction, children: _jsx(Autocomplete.Popup, { render: _jsx(ControlSurface, {}), hidden: !open, className: "reacd-input-menu-popup", dir: direction, children: _jsx(Autocomplete.List, { "aria-label": `${label} ${FORM_MENU_DEFAULTS.suggestionsLabel}`, className: "reacd-input-menu-list", children: items.map((item) => (_jsxs(Autocomplete.Item, { render: _jsx(ControlOption, {}), value: item, disabled: inactive || item.disabled, className: "reacd-input-menu-item", onClickCapture: () => highlight(item), children: [_jsx("span", { children: item.label }), item.description !== undefined && _jsx("span", { children: item.description })] }, item.value))) }) }) }) }));
+}

package/dist/shared/input-menu/input-menu.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { InputMenuProps } from '@fastsprout/reacd/adapter-runtime/components/input-menu/index.js';
+export declare function SharedInputMenu(declared: InputMenuProps): import("react").JSX.Element;

package/dist/shared/input-menu/input-menu.adapter.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef } from 'react';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { CONTENT_POLICY } from '@fastsprout/reacd/adapter-runtime/core/policy.js';
+import { FORM_MENU_DEFAULTS, FORM_MENU_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/form-menu-policy.js';
+import { Input } from '../primitives/input.js';
+import { Button } from '../primitives/button.js';
+import { useInputMenu } from './use-input-menu.js';
+import { InputMenuPopup } from './input-menu-popup.js';
+import { InputMenuForm } from './input-menu-form.js';
+export function SharedInputMenu(declared) {
+    const id = useId();
+    const input = useRef(null);
+    const metadata = useFieldMetadata(declared, declared.description ? [`${id}-help`] : []);
+    const properties = {
+        ...declared,
+        name: metadata.name,
+        required: metadata.required,
+        disabled: metadata.disabled,
+    };
+    const model = useInputMenu(properties);
+    const { label, value, readOnly, description, placeholder } = properties;
+    const localError = model.error && !metadata.error ? model.error : undefined;
+    const described = [
+        ...metadata.descriptionIds,
+        `${id}-status`,
+        ...(localError === undefined ? [] : [`${id}-error`]),
+    ];
+    const message = model.status === 'loading'
+        ? (properties.loadingMessage ?? FORM_MENU_DEFAULTS.loadingMessage)
+        : model.status === 'error'
+            ? (properties.errorMessage ?? FORM_MENU_DEFAULTS.errorMessage)
+            : model.items.length === 0
+                ? (properties.emptyMessage ?? FORM_MENU_DEFAULTS.emptyMessage)
+                : `${model.items.length} ${FORM_MENU_DEFAULTS.availableMessage}`;
+    return (_jsxs("div", { className: "reacd-node reacd-field reacd-input-menu", children: [_jsx("label", { id: `${id}-label`, htmlFor: id, children: label }), _jsxs(Autocomplete.Root, { items: model.items, value: value, open: model.open, mode: "none", filter: null, locale: FORM_MENU_POLICY.locale, openOnInputClick: true, disabled: model.disabled, readOnly: readOnly, itemToStringValue: (item) => item.label, onItemHighlighted: model.highlight, onValueChange: (next, details) => {
+                    if (details.reason === 'escape-key') {
+                        details.cancel();
+                        return;
+                    }
+                    const key = details.reason === 'item-press'
+                        ? model.highlighted.current?.value
+                        : undefined;
+                    if (!model.requestText(next, key))
+                        details.cancel();
+                }, onOpenChange: (next, details) => {
+                    if ((details.reason === 'item-press' && model.denied.current) ||
+                        !model.requestOpen(next))
+                        details.cancel();
+                }, children: [_jsxs(Autocomplete.InputGroup, { className: "reacd-input-menu-controls", children: [_jsx(Autocomplete.Input, { id: id, ref: input, render: _jsx(Input, {}), className: "reacd-node reacd-input", placeholder: placeholder, maxLength: CONTENT_POLICY.maxTextLength, "aria-labelledby": `${id}-label`, "aria-describedby": described.join(' '), "aria-required": properties.required, "aria-invalid": Boolean(metadata.error || model.error), onCompositionStart: () => {
+                                    model.setComposing(true);
+                                }, onCompositionEnd: () => {
+                                    model.setComposing(false);
+                                }, onKeyDownCapture: (event) => {
+                                    const native = event.nativeEvent;
+                                    const enter = event.key === 'Enter' ||
+                                        native.keyCode === FORM_MENU_POLICY.compositionEnterCode;
+                                    if ((enter && (native.isComposing || model.composing.current)) ||
+                                        native.keyCode === FORM_MENU_POLICY.compositionProcessCode) {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                    }
+                                    else if (event.key === 'Escape' && model.open) {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        model.requestOpen(false);
+                                    }
+                                } }), (properties.clearable ?? FORM_MENU_DEFAULTS.clearable) && value !== '' && (_jsx(Autocomplete.Clear, { render: _jsx(Button, { type: "button", className: "reacd-node reacd-button" }), tabIndex: 0, disabled: model.disabled || readOnly, "aria-label": `${FORM_MENU_DEFAULTS.clearLabel}: ${label}`, onMouseDown: (event) => event.preventBaseUIHandler(), onClick: (event) => {
+                                    event.preventBaseUIHandler();
+                                    if (model.requestText(''))
+                                        input.current?.focus();
+                                }, children: FORM_MENU_DEFAULTS.clearLabel })), _jsx(Autocomplete.Trigger, { "aria-label": `${FORM_MENU_DEFAULTS.openLabel}: ${label}`, render: _jsx(Button, { type: "button", className: "reacd-node reacd-button" }), children: FORM_MENU_DEFAULTS.openLabel })] }), _jsx(InputMenuPopup, { label: label, items: model.items, open: model.open, inactive: model.status !== 'ready', highlight: model.highlight })] }), description !== undefined && _jsx("span", { id: `${id}-help`, children: description }), _jsx("span", { id: `${id}-status`, role: model.status === 'error' ? 'alert' : 'status', "aria-live": "polite", children: message }), localError !== undefined && (_jsx("span", { id: `${id}-error`, role: "alert", children: localError })), _jsx(InputMenuForm, { properties: properties, input: input, invalid: model.invalidRequired })] }));
+}

package/dist/shared/input-menu/use-input-menu.d.ts

@@ -0,0 +1,26 @@
+import type { InputMenuProps } from '@fastsprout/reacd/adapter-runtime/components/input-menu/index.js';
+export declare function useInputMenu(properties: InputMenuProps): {
+    open: boolean;
+    disabled: boolean;
+    error: string | undefined;
+    items: readonly Readonly<{
+        value: string;
+        label: string;
+        description?: string | undefined;
+        disabled?: boolean | undefined;
+    }>[];
+    status: "error" | "loading" | "ready";
+    requestOpen: (next: boolean) => boolean;
+    requestText: (next: string, key?: string) => boolean;
+    invalidRequired: () => void;
+    denied: import("react").RefObject<boolean>;
+    composing: import("react").RefObject<boolean>;
+    highlighted: import("react").RefObject<Readonly<{
+        value: string;
+        label: string;
+        description?: string | undefined;
+        disabled?: boolean | undefined;
+    }> | undefined>;
+    highlight: (item: InputMenuProps['items'][number] | undefined) => void;
+    setComposing: (value: boolean) => void;
+};

package/dist/shared/input-menu/use-input-menu.js

@@ -0,0 +1,92 @@
+import { useContext, useRef, useState } from 'react';
+import { FORM_MENU_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/form-menu-policy.js';
+import { filterFormMenuItems } from '@fastsprout/reacd/adapter-runtime/core/form-menu-search.js';
+import { menuTextSchema } from '@fastsprout/reacd/adapter-runtime/schema/form-menu-shared/text.schema.js';
+import { PortalActiveContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { useEscapeLayer } from '@fastsprout/reacd/adapter-runtime/renderer/theme/use-escape-layer.js';
+import { requestFormMenuChange } from '../form-menu-shared/request.js';
+export function useInputMenu(properties) {
+    const [privateOpen, setPrivateOpen] = useState(false);
+    const [error, setError] = useState();
+    const [attempted, setAttempted] = useState(false);
+    const ancestorActive = useContext(PortalActiveContext);
+    const denied = useRef(false);
+    const composing = useRef(false);
+    const highlighted = useRef(undefined);
+    const disabled = properties.disabled || !ancestorActive;
+    const open = !disabled && (properties.open ?? privateOpen);
+    const items = filterFormMenuItems(properties.items, properties.value, properties.visibleValues);
+    const status = properties.status ?? FORM_MENU_DEFAULTS.status;
+    function requestOpen(next) {
+        if (disabled)
+            return false;
+        if (next === open)
+            return true;
+        const onOpenChange = properties.onOpenChange;
+        if (onOpenChange !== undefined) {
+            const result = requestFormMenuChange(() => onOpenChange(next));
+            setError(result.error);
+            return result.accepted;
+        }
+        setPrivateOpen(next);
+        return true;
+    }
+    function requestText(next, key) {
+        denied.current = true;
+        if (disabled || properties.readOnly)
+            return false;
+        if (key !== undefined) {
+            const item = items.find((candidate) => candidate.value === key);
+            if (item === undefined || item.disabled || status !== 'ready')
+                return false;
+            const preflight = requestFormMenuChange(() => properties.onSuggestionSelect?.(Object.freeze({
+                value: item.value,
+                text: item.label,
+            })));
+            setError(preflight.error);
+            if (!preflight.accepted)
+                return false;
+            next = item.label;
+        }
+        if (next !== properties.value) {
+            const parsed = menuTextSchema.safeParse(next);
+            if (!parsed.success) {
+                setError(FORM_MENU_DEFAULTS.invalidText);
+                return false;
+            }
+            const change = requestFormMenuChange(() => properties.onValueChange(next));
+            setError(change.error);
+            if (!change.accepted)
+                return false;
+        }
+        else
+            setError(undefined);
+        denied.current = false;
+        return true;
+    }
+    useEscapeLayer(open, () => {
+        requestOpen(false);
+    });
+    return {
+        open,
+        disabled,
+        error: error ??
+            (attempted && properties.required && properties.value === '' && !disabled
+                ? FORM_MENU_DEFAULTS.requiredMessage
+                : undefined),
+        items,
+        status,
+        requestOpen,
+        requestText,
+        invalidRequired: () => setAttempted(true),
+        denied,
+        composing,
+        highlighted,
+        highlight: (item) => {
+            highlighted.current = item;
+        },
+        setComposing: (value) => {
+            composing.current = value;
+        },
+    };
+}

package/dist/shared/input-number/input-number.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { InputNumberProps } from '@fastsprout/reacd/adapter-runtime/components/input-number/index.js';
+export declare function SharedInputNumber({ label, description, value, onValueChange, min, max, step, locale, format, placeholder, name, required, disabled, readOnly, }: InputNumberProps): import("react").JSX.Element;

package/dist/shared/input-number/input-number.adapter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { NumberField } from '@base-ui/react/number-field';
+import { MinusIcon, PlusIcon } from 'lucide-react';
+import { INPUT_NUMBER_POLICY } from '@fastsprout/reacd/adapter-runtime/core/input-number-policy.js';
+import { Label } from '../primitives/label.js';
+export function SharedInputNumber({ label, description, value, onValueChange, min = INPUT_NUMBER_POLICY.minimum, max = INPUT_NUMBER_POLICY.maximum, step = INPUT_NUMBER_POLICY.step, locale = INPUT_NUMBER_POLICY.locale, format, placeholder, name, required, disabled, readOnly, }) {
+    const id = useId();
+    return (_jsxs(NumberField.Root, { id: id, className: "reacd-node reacd-field reacd-input-number", value: value, min: min, max: max, step: step, smallStep: INPUT_NUMBER_POLICY.smallStep, largeStep: INPUT_NUMBER_POLICY.largeStep, locale: locale, format: format, name: name, required: required, disabled: disabled, readOnly: readOnly, onValueChange: (next) => {
+            if (!disabled && !readOnly)
+                onValueChange(next);
+        }, children: [_jsx(Label, { htmlFor: id, children: label }), _jsxs(NumberField.Group, { className: "reacd-number-group", children: [_jsx(NumberField.Decrement, { className: "reacd-number-step", "aria-label": `Decrease ${label}`, children: _jsx(MinusIcon, { "aria-hidden": "true" }) }), _jsx(NumberField.Input, { className: "reacd-number-input", placeholder: placeholder, "aria-describedby": description === undefined ? undefined : `${id}-help` }), _jsx(NumberField.Increment, { className: "reacd-number-step", "aria-label": `Increase ${label}`, children: _jsx(PlusIcon, { "aria-hidden": "true" }) })] }), description === undefined ? null : (_jsx("span", { id: `${id}-help`, className: "reacd-field-description", children: description }))] }));
+}

package/dist/shared/input-rating/input-rating.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { InputRatingProps } from '@fastsprout/reacd/adapter-runtime/components/input-rating/index.js';
+export declare function SharedInputRating({ label, description, value, onValueChange, length, step, clearable, hoverable, required, disabled, readOnly, name, }: InputRatingProps): import("react").JSX.Element;

package/dist/shared/input-rating/input-rating.adapter.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChoiceMark } from '../primitives/choice-mark.js';
+import { useId, useState } from 'react';
+import * as Slider from '@radix-ui/react-slider';
+import { useDirection } from '@radix-ui/react-direction';
+import { INPUT_RATING_POLICY } from '@fastsprout/reacd/adapter-runtime/core/input-rating-policy.js';
+import { RatingStars } from './rating-stars.js';
+import { Button } from '../primitives/button.js';
+export function SharedInputRating({ label, description, value, onValueChange, length = INPUT_RATING_POLICY.length, step = INPUT_RATING_POLICY.step, clearable, hoverable, required, disabled, readOnly, name, }) {
+    const id = useId();
+    const direction = useDirection();
+    const [thumb, setThumb] = useState(null);
+    const [preview, setPreview] = useState(null);
+    return (_jsxs("div", { className: "reacd-node reacd-field reacd-input-rating", "data-direction": direction, children: [_jsx("span", { id: id, children: label }), _jsx("div", { className: "reacd-rating-scroll", children: _jsx(Slider.Root, { asChild: true, value: [value], min: INPUT_RATING_POLICY.emptyValue, max: length, step: step, disabled: disabled || readOnly, className: "reacd-rating-control", onValueChange: (values) => {
+                        for (const next of values)
+                            onValueChange(next);
+                    }, onPointerMove: (event) => {
+                        if (!hoverable || disabled || readOnly)
+                            return;
+                        const rect = event.currentTarget.getBoundingClientRect();
+                        if (rect.width === 0)
+                            return;
+                        const offset = direction === 'rtl'
+                            ? rect.right - event.clientX
+                            : event.clientX - rect.left;
+                        const raw = (offset / rect.width) * length;
+                        setPreview(Math.min(length, Math.max(INPUT_RATING_POLICY.emptyValue, Math.ceil(raw / step) * step)));
+                    }, onPointerLeave: () => setPreview(null), children: _jsxs(ChoiceMark, { appearance: "rating", children: [_jsx(Slider.Track, { className: "reacd-rating-track", children: _jsx(RatingStars, { value: hoverable && !disabled && !readOnly ? (preview ?? value) : value, length: length }) }), _jsx(Slider.Thumb, { ref: setThumb, className: "reacd-rating-thumb", "aria-labelledby": id, "aria-required": required, "aria-invalid": required && value === INPUT_RATING_POLICY.emptyValue, "aria-readonly": readOnly, "aria-valuetext": `${value} of ${length} stars`, "aria-describedby": description === undefined ? undefined : `${id}-help` })] }) }) }), _jsx("input", { type: "hidden", name: name, value: value, disabled: disabled }), _jsx("input", { className: "reacd-rating-validation", tabIndex: -1, "aria-hidden": "true", defaultValue: value === INPUT_RATING_POLICY.emptyValue ? '' : String(value), required: required, disabled: disabled || readOnly, onInvalid: thumb === null
+                    ? undefined
+                    : (event) => {
+                        event.preventDefault();
+                        thumb.focus();
+                    } }, value), description === undefined ? null : (_jsx("span", { id: `${id}-help`, className: "reacd-field-description", children: description })), clearable ? (_jsxs(Button, { className: "reacd-button", type: "button", variant: "outline", disabled: disabled || readOnly || value === INPUT_RATING_POLICY.emptyValue, onClick: () => onValueChange(INPUT_RATING_POLICY.emptyValue), children: ["Clear ", label] })) : null] }));
+}

package/dist/shared/input-rating/rating-stars.d.ts

@@ -0,0 +1,4 @@
+export declare function RatingStars({ value, length }: {
+    value: number;
+    length: number;
+}): import("react").JSX.Element[];

package/dist/shared/input-rating/rating-stars.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StarIcon } from 'lucide-react';
+import { INPUT_RATING_POLICY } from '@fastsprout/reacd/adapter-runtime/core/input-rating-policy.js';
+export function RatingStars({ value, length }) {
+    return Array.from({ length }, (_, index) => {
+        const filled = value - index;
+        return (_jsxs("span", { className: "reacd-rating-star", "aria-hidden": "true", children: [_jsx(StarIcon, {}), filled >= INPUT_RATING_POLICY.half ? (_jsx(StarIcon, { className: "reacd-rating-star-fill", "data-half": filled < INPUT_RATING_POLICY.step })) : null] }, index));
+    });
+}

package/dist/shared/input-tags/input-tags.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { InputTagsProps } from '@fastsprout/reacd/adapter-runtime/components/input-tags/index.js';
+export declare function SharedInputTags(properties: InputTagsProps): import("react").JSX.Element;

package/dist/shared/input-tags/input-tags.adapter.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Combobox } from '@base-ui/react/combobox';
+import { XIcon } from 'lucide-react';
+import { INPUT_TAGS_POLICY, TAG_DELIMITER_CHARACTERS, } from '@fastsprout/reacd/adapter-runtime/core/input-tags-policy.js';
+import { Label } from '../primitives/label.js';
+import { useTagDraft } from './use-tag-draft.js';
+export function SharedInputTags(properties) {
+    const { label, description, value, onValueChange, placeholder, disabled, readOnly, name, required, addOnTab, addOnBlur, addOnPaste, delimiters = INPUT_TAGS_POLICY.delimiters, } = properties;
+    const id = useId();
+    const entry = useTagDraft(properties);
+    const describedBy = [
+        description === undefined ? '' : `${id}-help`,
+        entry.error === undefined ? '' : `${id}-error`,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: "reacd-node reacd-field reacd-input-tags", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Combobox.Root, { multiple: true, open: false, items: [...value], value: value, inputValue: entry.draft, onInputValueChange: entry.change, onValueChange: (next) => {
+                    onValueChange(next);
+                }, disabled: disabled, readOnly: readOnly, name: name, required: required, children: _jsxs(Combobox.Chips, { className: "reacd-tags-chips", children: [value.map((tag) => (_jsxs(Combobox.Chip, { className: "reacd-tags-chip", children: [_jsx("span", { className: "reacd-tags-text", children: tag }), _jsx(Combobox.ChipRemove, { className: "reacd-tags-remove", "aria-label": `Remove ${tag}`, children: _jsx(XIcon, { "aria-hidden": "true" }) })] }, tag))), _jsx(Combobox.Input, { id: id, className: "reacd-tags-input", placeholder: placeholder, "aria-invalid": entry.error !== undefined, "aria-describedby": describedBy || undefined, "aria-autocomplete": "none", onCompositionStart: () => {
+                                entry.setComposing(true);
+                            }, onCompositionEnd: () => {
+                                entry.setComposing(false);
+                            }, onKeyDown: (event) => {
+                                if (event.nativeEvent.isComposing || entry.composing.current)
+                                    return;
+                                const delimiter = delimiters.some((item) => TAG_DELIMITER_CHARACTERS[item] === event.key);
+                                const trigger = event.key === 'Enter' || delimiter || (event.key === 'Tab' && addOnTab);
+                                if (!trigger || entry.draft.trim() === '')
+                                    return;
+                                if (event.key !== 'Tab')
+                                    event.preventDefault();
+                                entry.commit(entry.draft);
+                            }, onBlur: () => {
+                                if (addOnBlur && entry.draft.trim() !== '')
+                                    entry.commit(entry.draft);
+                            }, onPaste: (event) => {
+                                if (!addOnPaste || entry.composing.current)
+                                    return;
+                                event.preventDefault();
+                                const start = event.currentTarget.selectionStart ?? entry.draft.length;
+                                const end = event.currentTarget.selectionEnd ?? entry.draft.length;
+                                entry.commit(entry.draft.slice(0, start) +
+                                    event.clipboardData.getData('text') +
+                                    entry.draft.slice(end));
+                            } })] }) }), description === undefined ? null : (_jsx("span", { id: `${id}-help`, className: "reacd-field-description", children: description })), entry.error === undefined ? null : (_jsx("span", { id: `${id}-error`, role: "alert", children: entry.error }))] }));
+}

package/dist/shared/input-tags/use-tag-draft.d.ts

@@ -0,0 +1,9 @@
+import type { InputTagsProps } from '@fastsprout/reacd/adapter-runtime/components/input-tags/index.js';
+export declare function useTagDraft({ value, onValueChange, maxTags, maxTagLength, delimiters, disabled, readOnly, }: InputTagsProps): {
+    draft: string;
+    error: string | undefined;
+    composing: import("react").RefObject<boolean>;
+    setComposing: (value: boolean) => void;
+    change: (next: string) => void;
+    commit: (next: string) => void;
+};

package/dist/shared/input-tags/use-tag-draft.js

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react';
+import { INPUT_TAGS_POLICY } from '@fastsprout/reacd/adapter-runtime/core/input-tags-policy.js';
+import { appendTags, sameTags, } from '@fastsprout/reacd/adapter-runtime/core/tag-entry.js';
+export function useTagDraft({ value, onValueChange, maxTags = INPUT_TAGS_POLICY.maxTags, maxTagLength = INPUT_TAGS_POLICY.maxTagLength, delimiters = INPUT_TAGS_POLICY.delimiters, disabled, readOnly, }) {
+    const [draft, setDraft] = useState('');
+    const [error, setError] = useState();
+    const pending = useRef(null);
+    const composing = useRef(false);
+    useEffect(() => {
+        if (pending.current !== null && sameTags(value, pending.current)) {
+            pending.current = null;
+            setDraft('');
+        }
+    }, [value]);
+    return {
+        draft,
+        error,
+        composing,
+        setComposing: (value) => {
+            composing.current = value;
+        },
+        change: (next) => {
+            if (disabled || readOnly)
+                return;
+            pending.current = null;
+            setError(undefined);
+            setDraft(next);
+        },
+        commit: (next) => {
+            if (disabled || readOnly || composing.current)
+                return;
+            setDraft(next);
+            const result = appendTags(value, next, delimiters, { maxTags, maxTagLength });
+            if (!result.success) {
+                setError(result.message);
+                return;
+            }
+            setError(undefined);
+            pending.current = result.values;
+            onValueChange(result.values);
+        },
+    };
+}

package/dist/shared/input-time/anchored-time.d.ts

@@ -0,0 +1 @@
+export declare function anchoredTime(value: string): import("@internationalized/date").ZonedDateTime;

package/dist/shared/input-time/anchored-time.js

@@ -0,0 +1,5 @@
+import { parseZonedDateTime } from '@internationalized/date';
+import { INPUT_TIME_POLICY } from '@fastsprout/reacd/adapter-runtime/core/input-time-policy.js';
+export function anchoredTime(value) {
+    return parseZonedDateTime(`${INPUT_TIME_POLICY.anchorDate}T${value}[${INPUT_TIME_POLICY.anchorTimeZone}]`);
+}

package/dist/shared/input-time/draft-validation.d.ts

@@ -0,0 +1 @@
+export { TemporalDraftValidity as TimeDraftValidation } from '../temporal/draft-validity.js';

package/dist/shared/input-time/draft-validation.js

@@ -0,0 +1 @@
+export { TemporalDraftValidity as TimeDraftValidation } from '../temporal/draft-validity.js';

package/dist/shared/input-time/focus-draft.d.ts

@@ -0,0 +1 @@
+export { focusIncompleteSegment as focusTimeDraft } from '../temporal/focus-incomplete-segment.js';

package/dist/shared/input-time/focus-draft.js

@@ -0,0 +1 @@
+export { focusIncompleteSegment as focusTimeDraft } from '../temporal/focus-incomplete-segment.js';

package/dist/shared/input-time/input-time.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { InputTimeProps } from '@fastsprout/reacd/adapter-runtime/components/input-time/index.js';
+export declare function SharedInputTime(properties: InputTimeProps): import("react").JSX.Element;

package/dist/shared/input-time/input-time.adapter.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { I18nProvider } from 'react-aria-components/I18nProvider';
+import { useDirection } from '@radix-ui/react-direction';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { DATE_TIME_POLICY } from '@fastsprout/reacd/adapter-runtime/core/date-time-policy.js';
+import { INPUT_TIME_POLICY } from '@fastsprout/reacd/adapter-runtime/core/input-time-policy.js';
+import { boundedTimeValueSchema, timeRangeValueSchema, } from '@fastsprout/reacd/adapter-runtime/schema/date-time/index.js';
+import { TimeControl } from './time-control.js';
+import { useTimeChange } from './use-time-change.js';
+import { temporalRecovery } from '../temporal/temporal-recovery.js';
+import { useRangeReset } from '../temporal/use-range-reset.js';
+function SingleTime(props) {
+    const { error, change } = useTimeChange((value) => boundedTimeValueSchema({ min: props.min, max: props.max }).safeParse(value)
+        .success, props.onValueChange, INPUT_TIME_POLICY.invalidValue, props, temporalRecovery(props.value, props));
+    return _jsx(TimeControl, { ...props, error: error, onValueChange: change });
+}
+function RangeTime(props) {
+    const { error, change } = useTimeChange((value) => timeRangeValueSchema({ min: props.min, max: props.max }).safeParse(value).success, props.onValueChange, INPUT_TIME_POLICY.invalidRange, props, temporalRecovery(props.value, props));
+    const { ref, revision, change: changeEndpoint } = useRangeReset(props.value, change);
+    return (_jsxs("fieldset", { ref: ref, className: "reacd-time-range", children: [_jsx("legend", { children: props.label }), _jsx(TimeControl, { ...props, label: `${INPUT_TIME_POLICY.startLabel} ${props.label}`, value: props.value.start, name: props.name === undefined ? undefined : `${props.name}.start`, error: error, onValueChange: (start) => changeEndpoint({ ...props.value, start }) }, `${revision}-start`), _jsx(TimeControl, { ...props, label: `${INPUT_TIME_POLICY.endLabel} ${props.label}`, value: props.value.end, name: props.name === undefined ? undefined : `${props.name}.end`, error: error, onValueChange: (end) => changeEndpoint({ ...props.value, end }) }, `${revision}-end`)] }));
+}
+export function SharedInputTime(properties) {
+    const metadata = useFieldMetadata(properties);
+    const props = {
+        ...properties,
+        name: metadata.name,
+        required: metadata.required,
+        disabled: metadata.disabled,
+    };
+    const direction = useDirection();
+    return (_jsx(I18nProvider, { locale: props.locale ?? DATE_TIME_POLICY.locale, children: _jsx("div", { className: "reacd-node reacd-field reacd-input-time", dir: direction, children: props.mode === 'range' ? _jsx(RangeTime, { ...props }) : _jsx(SingleTime, { ...props }) }) }));
+}

package/dist/shared/input-time/time-control.d.ts

@@ -0,0 +1,15 @@
+interface TimeControlProps {
+    readonly label: string;
+    readonly value: string | null;
+    readonly onValueChange: (value: string | null) => void;
+    readonly description?: string | undefined;
+    readonly error?: string | undefined;
+    readonly min?: string | undefined;
+    readonly max?: string | undefined;
+    readonly name?: string | undefined;
+    readonly required?: boolean | undefined;
+    readonly disabled?: boolean | undefined;
+    readonly readOnly?: boolean | undefined;
+}
+export declare function TimeControl({ label, value, onValueChange, description, error, min, max, name, required, disabled, readOnly, }: TimeControlProps): import("react").JSX.Element;
+export {};

package/dist/shared/input-time/time-control.js

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TimeField, DateInput, DateSegment, Label, Text, FieldError, } from 'react-aria-components/TimeField';
+import { useLocale } from 'react-aria-components/I18nProvider';
+import { toTime } from '@internationalized/date';
+import { useId, useMemo, useState } from 'react';
+import { DATE_TIME_POLICY } from '@fastsprout/reacd/adapter-runtime/core/date-time-policy.js';
+import { INPUT_TIME_POLICY } from '@fastsprout/reacd/adapter-runtime/core/input-time-policy.js';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { Button } from '../primitives/button.js';
+import { anchoredTime } from './anchored-time.js';
+import { TimeDraftValidation } from './draft-validation.js';
+export function TimeControl({ label, value, onValueChange, description, error, min, max, name, required, disabled, readOnly, }) {
+    const metadata = useFieldMetadata({ name, required, disabled });
+    const { direction } = useLocale();
+    const draftErrorId = useId();
+    const [draftInvalid, setDraftInvalid] = useState(false);
+    const [segments, setSegments] = useState(null);
+    const controlValue = useMemo(() => (value === null ? null : anchoredTime(value)), [value]);
+    const minimum = useMemo(() => (min === undefined ? undefined : anchoredTime(min)), [min]);
+    const maximum = useMemo(() => (max === undefined ? undefined : anchoredTime(max)), [max]);
+    const placeholder = useMemo(() => anchoredTime(DATE_TIME_POLICY.placeholderTime), []);
+    const invalid = Boolean(metadata.error) || error !== undefined || draftInvalid;
+    const descriptions = [
+        ...metadata.descriptionIds,
+        ...(draftInvalid ? [draftErrorId] : []),
+    ].join(' ');
+    return (_jsx(TimeField, { className: "reacd-node reacd-field reacd-time-control", ...(descriptions ? { 'aria-describedby': descriptions } : {}), value: controlValue, onChange: (next) => {
+            setDraftInvalid(false);
+            onValueChange(next === null ? null : toTime(next).toString());
+        }, ...(minimum === undefined ? {} : { minValue: minimum }), ...(maximum === undefined ? {} : { maxValue: maximum }), ...(invalid ? { isInvalid: true } : {}), isRequired: metadata.required, isDisabled: metadata.disabled, isReadOnly: readOnly ?? false, hourCycle: INPUT_TIME_POLICY.hourCycle, hideTimeZone: true, granularity: INPUT_TIME_POLICY.granularity, shouldForceLeadingZeros: INPUT_TIME_POLICY.forceLeadingZeros, validationBehavior: INPUT_TIME_POLICY.validationBehavior, placeholderValue: placeholder, children: ({ state }) => (_jsxs(_Fragment, { children: [_jsx(Label, { children: label }), _jsxs("div", { className: "reacd-time-entry", children: [_jsx(DateInput, { className: "reacd-time-segments", dir: direction, ref: setSegments, "aria-invalid": invalid || undefined, children: (segment) => (_jsx(DateSegment, { className: "reacd-time-segment", segment: segment, "aria-invalid": invalid || undefined })) }), _jsx(Button, { type: "button", variant: "outline", className: "reacd-button reacd-time-clear", disabled: metadata.disabled || readOnly, "aria-label": `${INPUT_TIME_POLICY.clearLabel} ${label}`, onClick: () => {
+                                if (value === null) {
+                                    state.setValue(null);
+                                    setDraftInvalid(false);
+                                }
+                                onValueChange(null);
+                            }, children: INPUT_TIME_POLICY.clearLabel })] }), description === undefined ? null : (_jsx(Text, { slot: "description", className: "reacd-field-description", children: description })), draftInvalid ? (_jsx("span", { id: draftErrorId, role: "alert", className: "reacd-time-error", children: INPUT_TIME_POLICY.incompleteValue })) : metadata.error ? null : (_jsx(FieldError, { className: "reacd-time-error", children: error })), _jsx("input", { type: "hidden", name: metadata.name, value: value ?? '', disabled: metadata.disabled }), _jsx(TimeDraftValidation, { segments: state.segments, value: value, required: metadata.required, disabled: metadata.disabled, root: segments, onInvalidChange: setDraftInvalid })] })) }));
+}

package/dist/shared/input-time/use-time-change.d.ts

@@ -0,0 +1,10 @@
+import type { TemporalRecovery } from '../temporal/temporal-recovery.js';
+interface TimeProtection {
+    readonly disabled?: boolean | undefined;
+    readonly readOnly?: boolean | undefined;
+}
+export declare function useTimeChange<Value>(validate: (value: Value) => boolean, onValueChange: (value: Value) => void, message: string, protection: TimeProtection, recovery?: TemporalRecovery<Value>): {
+    error: string | undefined;
+    change: (value: Value) => void;
+};
+export {};

package/dist/shared/input-time/use-time-change.js

@@ -0,0 +1,4 @@
+import { useTemporalChange } from '../temporal/use-temporal-change.js';
+export function useTimeChange(validate, onValueChange, message, protection, recovery) {
+    return useTemporalChange(validate, onValueChange, message, protection, recovery);
+}

package/dist/shared/kbd/kbd-key.adapter.d.ts

@@ -0,0 +1,5 @@
+import type { KbdProps } from '@fastsprout/reacd/adapter-runtime/components/kbd/kbd.js';
+import type { KeyPresentation } from '@fastsprout/reacd/adapter-runtime/core/keyboard-key.js';
+type KbdKeyProps = KeyPresentation & Pick<KbdProps, 'size' | 'variant' | 'intent'>;
+export declare function KbdKey({ display, label, size, variant, intent, }: KbdKeyProps): import("react").JSX.Element;
+export {};

package/dist/shared/kbd/kbd-key.adapter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { KBD_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/kbd-policy.js';
+export function KbdKey({ display, label, size = KBD_DEFAULTS.size, variant = KBD_DEFAULTS.variant, intent = KBD_DEFAULTS.intent, }) {
+    return (_jsx("kbd", { className: "reacd-node reacd-kbd", "data-slot": "kbd", "data-size": size, "data-variant": variant, "data-intent": intent, title: label, children: _jsx("span", { role: "img", "aria-label": label, children: display }) }));
+}

package/dist/shared/kbd/kbd.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { KbdProps } from '@fastsprout/reacd/adapter-runtime/components/kbd/kbd.js';
+export declare function SharedKbd({ value, label, platform, ...properties }: KbdProps): import("react").JSX.Element;

package/dist/shared/kbd/kbd.adapter.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { keyboardKey } from '@fastsprout/reacd/adapter-runtime/core/keyboard-key.js';
+import { KBD_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/kbd-policy.js';
+import { KbdKey } from './kbd-key.adapter.js';
+export function SharedKbd({ value, label, platform = KBD_DEFAULTS.platform, ...properties }) {
+    const presentation = keyboardKey(value, platform);
+    return (_jsx(KbdKey, { ...properties, display: presentation.display, label: label ?? presentation.label }));
+}

package/dist/shared/listbox/clear-focus.d.ts

@@ -0,0 +1 @@
+export declare function focusListboxAfterClear(root: HTMLElement | null, button: HTMLButtonElement, wasFocused: boolean): void;

package/dist/shared/listbox/clear-focus.js

@@ -0,0 +1,8 @@
+export function focusListboxAfterClear(root, button, wasFocused) {
+    const document = button.ownerDocument;
+    if (root === null || !wasFocused)
+        return;
+    if (document.activeElement === button || document.activeElement === document.body) {
+        root.focus();
+    }
+}