@fastsprout/reacd-shadcn 0.0.0-stage → 0.3.0

package/dist/shared/file-upload/intake-validation.js

@@ -0,0 +1,48 @@
+import { FILE_UPLOAD_DEFAULTS as D, FILE_UPLOAD_ERRORS as E, FILE_UPLOAD_POLICY as P, } from '@fastsprout/reacd/adapter-runtime/core/file-upload-policy.js';
+import { acceptsUpload } from '@fastsprout/reacd/adapter-runtime/core/file-upload-accept.js';
+import { fileUploadLimit } from '@fastsprout/reacd/adapter-runtime/schema/file-upload/index.js';
+import { uploadMetadataSchema } from '@fastsprout/reacd/adapter-runtime/schema/file-upload/index.js';
+export function inspectNativeFiles(input, settings) {
+    function fail(message) {
+        return { success: false, issues: [{ path: 'files', message }] };
+    }
+    const existing = settings.multiple === false ? [] : settings.value;
+    if (input.length + existing.length > fileUploadLimit(settings))
+        return fail(E.count);
+    let total = existing.reduce((sum, file) => sum + file.size, 0);
+    const files = [];
+    for (let index = 0; index < input.length; index += 1) {
+        const file = input[index];
+        if (file === undefined)
+            return fail(E.metadata);
+        const metadata = uploadMetadataSchema.safeParse({
+            id: P.idPrefix,
+            name: file.name,
+            mediaType: file.type || D.mediaType,
+            size: file.size,
+            lastModified: file.lastModified,
+        });
+        if (!metadata.success)
+            return fail(E.metadata);
+        if (!acceptsUpload(settings.accept ?? D.accept, metadata.data.mediaType))
+            return fail(E.accept);
+        total += file.size;
+        if (total > P.maxTotalBytes)
+            return fail(E.total);
+        files.push(file);
+    }
+    return { success: true, data: files };
+}
+export function sameUploadFiles(left, right) {
+    return (left.length === right.length &&
+        left.every((file, index) => {
+            const other = right[index];
+            return (other !== undefined &&
+                file.id === other.id &&
+                file.name === other.name &&
+                file.mediaType === other.mediaType &&
+                file.size === other.size &&
+                file.lastModified === other.lastModified &&
+                file.content.data === other.content.data);
+        }));
+}

package/dist/shared/file-upload/intake.d.ts

@@ -0,0 +1,36 @@
+import type { FileUploadSettings } from '@fastsprout/reacd/adapter-runtime/schema/file-upload/index.js';
+import type { UploadFile } from '@fastsprout/reacd/adapter-runtime/schema/file-upload/index.js';
+import type { ReadTask } from './read-file.js';
+export interface IntakeHost extends FileUploadSettings {
+    readonly value: readonly UploadFile[];
+    readonly onValueChange: (files: readonly UploadFile[]) => void;
+    readonly disabled?: boolean | undefined;
+    readonly readOnly?: boolean | undefined;
+}
+export interface IntakeSnapshot {
+    readonly status: 'idle' | 'reading' | 'error' | 'cancelled';
+    readonly message: string;
+}
+interface IntakePorts {
+    readonly read: (file: File) => ReadTask;
+    readonly id: () => string;
+}
+export declare class FileIntake {
+    private readonly ports;
+    private host;
+    private token;
+    private task;
+    private snapshot;
+    private readonly listeners;
+    constructor(ports: IntakePorts);
+    readonly subscribe: (listener: () => void) => (() => void);
+    readonly getSnapshot: () => IntakeSnapshot;
+    private publish;
+    configure(host: IntakeHost): void;
+    private stop;
+    cancel(): void;
+    dispose(): void;
+    start(input: ArrayLike<File>): void;
+    private collect;
+}
+export {};

package/dist/shared/file-upload/intake.js

@@ -0,0 +1,112 @@
+import { FILE_UPLOAD_DEFAULTS as D, FILE_UPLOAD_ERRORS as E, FILE_UPLOAD_POLICY as P, } from '@fastsprout/reacd/adapter-runtime/core/file-upload-policy.js';
+import { fileUploadValueSchema } from '@fastsprout/reacd/adapter-runtime/schema/file-upload/index.js';
+import { inspectNativeFiles, sameUploadFiles } from './intake-validation.js';
+const IDLE = { status: 'idle', message: '' };
+export class FileIntake {
+    ports;
+    host;
+    token = 0;
+    task;
+    snapshot = IDLE;
+    listeners = new Set();
+    constructor(ports) {
+        this.ports = ports;
+    }
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    };
+    getSnapshot = () => this.snapshot;
+    publish(snapshot) {
+        this.snapshot = snapshot;
+        for (const listener of this.listeners)
+            listener();
+    }
+    configure(host) {
+        const old = this.host;
+        this.host = host;
+        if (old &&
+            (!sameUploadFiles(old.value, host.value) ||
+                old.multiple !== host.multiple ||
+                old.maxFiles !== host.maxFiles ||
+                old.accept !== host.accept ||
+                host.disabled ||
+                host.readOnly)) {
+            this.stop();
+            if (this.snapshot.status !== 'idle')
+                this.publish(IDLE);
+        }
+    }
+    stop() {
+        this.token += 1;
+        this.task?.cancel();
+        this.task = undefined;
+        if (this.snapshot.status === 'reading')
+            this.publish(IDLE);
+    }
+    cancel() {
+        if (this.snapshot.status !== 'reading')
+            return;
+        this.stop();
+        this.publish({ status: 'cancelled', message: D.cancelledLabel });
+    }
+    dispose() {
+        this.stop();
+    }
+    start(input) {
+        const host = this.host;
+        if (!host || host.disabled || host.readOnly || input.length === 0)
+            return;
+        this.stop();
+        const inspected = inspectNativeFiles(input, host);
+        if (!inspected.success) {
+            this.publish({
+                status: 'error',
+                message: inspected.issues.map((issue) => issue.message).join(' '),
+            });
+            return;
+        }
+        this.publish({ status: 'reading', message: D.busyLabel });
+        void this.collect(inspected.data, host, this.token);
+    }
+    async collect(files, host, token) {
+        const output = host.multiple === false ? [] : [...host.value];
+        const ids = new Set(output.map((file) => file.id));
+        try {
+            for (const file of files) {
+                let id = this.ports.id();
+                let attempts = P.idAttempts;
+                while (ids.has(id) && attempts > 0) {
+                    id = this.ports.id();
+                    attempts -= 1;
+                }
+                if (ids.has(id))
+                    throw new Error(E.identity);
+                ids.add(id);
+                const task = this.ports.read(file);
+                this.task = task;
+                const data = await task.promise;
+                if (token !== this.token)
+                    return;
+                this.task = undefined;
+                output.push({
+                    id,
+                    name: file.name,
+                    mediaType: file.type || D.mediaType,
+                    size: file.size,
+                    lastModified: file.lastModified,
+                    content: { encoding: 'base64', data },
+                });
+            }
+            const validated = fileUploadValueSchema(host).parse(output);
+            this.publish(IDLE);
+            this.host?.onValueChange(validated);
+        }
+        catch {
+            if (token === this.token)
+                this.publish({ status: 'error', message: E.read });
+        }
+    }
+}

package/dist/shared/file-upload/read-file.d.ts

@@ -0,0 +1,5 @@
+export interface ReadTask {
+    readonly promise: Promise<string>;
+    readonly cancel: () => void;
+}
+export declare function readFile(file: File): ReadTask;

package/dist/shared/file-upload/read-file.js

@@ -0,0 +1,32 @@
+import { FILE_UPLOAD_ERRORS as E } from '@fastsprout/reacd/adapter-runtime/core/file-upload-policy.js';
+export function readFile(file) {
+    const reader = new FileReader();
+    const promise = new Promise((resolve, reject) => {
+        function fail() {
+            reject(new Error(E.read));
+        }
+        reader.onerror = fail;
+        reader.onabort = fail;
+        reader.onload = () => {
+            const result = reader.result;
+            if (typeof result !== 'string') {
+                fail();
+                return;
+            }
+            const separator = result.indexOf(',');
+            if (!result.startsWith('data:') ||
+                separator < 0 ||
+                !result.slice(0, separator).endsWith(';base64')) {
+                fail();
+                return;
+            }
+            resolve(result.slice(separator + 1));
+        };
+        reader.readAsDataURL(file);
+    }).finally(() => {
+        reader.onload = null;
+        reader.onerror = null;
+        reader.onabort = null;
+    });
+    return { promise, cancel: () => reader.abort() };
+}

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

@@ -0,0 +1,2 @@
+import type { FooterProps } from '@fastsprout/reacd/adapter-runtime/components/footer/footer.js';
+export declare function SharedFooter({ children, start, end, top, bottom }: FooterProps): import("react").JSX.Element;

package/dist/shared/footer/footer.adapter.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SharedFooter({ children, start, end, top, bottom }) {
+    return (_jsxs("footer", { className: "reacd-node reacd-footer", children: [top !== undefined && _jsx("div", { className: "reacd-shell-band", children: top }), _jsxs("div", { className: "reacd-container reacd-shell-row", children: [_jsx("div", { className: "reacd-shell-start", children: start }), _jsx("div", { className: "reacd-shell-center", children: children }), _jsx("div", { className: "reacd-shell-end", children: end })] }), bottom !== undefined && _jsx("div", { className: "reacd-shell-band", children: bottom })] }));
+}

package/dist/shared/footer-columns/footer-columns.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { FooterColumnsProps } from '@fastsprout/reacd/adapter-runtime/components/footer-columns/index.js';
+export declare function SharedFooterColumns({ label, columns, left, right, }: FooterColumnsProps): import("react").JSX.Element;

package/dist/shared/footer-columns/footer-columns.adapter.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Button } from '../primitives/button.js';
+export function SharedFooterColumns({ label, columns, left, right, }) {
+    const id = useId();
+    return (_jsxs("nav", { className: "reacd-node reacd-footer-columns", "aria-label": label, children: [left !== undefined && _jsx("div", { className: "reacd-footer-slot", children: left }), _jsx("div", { className: "reacd-footer-column-groups", children: columns.map((column, index) => (_jsxs("section", { className: "reacd-footer-column", children: [_jsx("h3", { id: `${id}-${index}`, className: "reacd-footer-column-label", children: column.label }), _jsx("ul", { "aria-labelledby": `${id}-${index}`, children: column.children.map((item) => (_jsx("li", { children: item.onPress !== undefined ? (_jsx(Button, { type: "button", variant: "link", className: "reacd-node reacd-button reacd-navigation-target", disabled: item.disabled, onClick: pressHandler(item.onPress), children: item.label })) : item.href !== undefined && !item.disabled ? (_jsx("a", { className: "reacd-node reacd-link reacd-navigation-target", href: item.href, "aria-current": item.active ? 'page' : undefined, target: item.newWindow ? '_blank' : undefined, rel: item.newWindow ? 'noopener noreferrer' : undefined, children: item.label })) : (_jsx("span", { "aria-disabled": item.disabled || undefined, children: item.label })) }, item.key))) })] }, column.key))) }), right !== undefined && _jsx("div", { className: "reacd-footer-slot", children: right })] }));
+}
+import { pressHandler } from '@fastsprout/reacd/adapter-runtime/renderer/contracts/press-handler.js';

package/dist/shared/form-field/focus-control.d.ts

@@ -0,0 +1 @@
+export declare function focusFieldControl(root: HTMLFieldSetElement | null): void;

package/dist/shared/form-field/focus-control.js

@@ -0,0 +1,21 @@
+const CONTROL_SELECTOR = [
+    'input',
+    'textarea',
+    'select',
+    'button',
+    '[role="switch"]',
+    '[role="checkbox"]',
+    '[role="radio"]',
+    '[role="combobox"]',
+    '[role="slider"]',
+    '[role="spinbutton"]',
+    '[role="textbox"]',
+].join(',');
+export function focusFieldControl(root) {
+    if (root === null)
+        return;
+    const controls = root.querySelectorAll(CONTROL_SELECTOR);
+    const control = [...controls].find((candidate) => !candidate.matches(':disabled, [aria-disabled="true"], [type="hidden"]') &&
+        candidate.closest('[hidden], [inert], [aria-hidden="true"]') === null);
+    (control ?? root).focus();
+}

package/dist/shared/form-field/form-field.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { FormFieldProps } from '@fastsprout/reacd/adapter-runtime/components/form-field/index.js';
+export declare function SharedFormField({ name, label, description, hint, help, error, required, disabled, children, }: FormFieldProps): import("react").JSX.Element;

package/dist/shared/form-field/form-field.adapter.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef } from 'react';
+import { FORM_FIELD_POLICY } from '@fastsprout/reacd/adapter-runtime/core/form-field-policy.js';
+import { FieldMetadataContext, useFieldMetadata, } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { focusFieldControl } from './focus-control.js';
+export function SharedFormField({ name, label, description, hint, help, error, required, disabled, children, }) {
+    const id = useId();
+    const root = useRef(null);
+    const localError = error?.trim() ?? '';
+    const feedback = localError || help;
+    const ids = [
+        ...(description ? [`${id}-description`] : []),
+        ...(hint ? [`${id}-hint`] : []),
+        ...(feedback ? [`${id}-feedback`] : []),
+    ];
+    const metadata = useFieldMetadata({ name, required, disabled }, ids);
+    const value = { ...metadata, error: localError || metadata.error };
+    return (_jsx(FieldMetadataContext, { value: value, children: _jsxs("fieldset", { ref: root, tabIndex: -1, disabled: value.disabled, className: "reacd-node reacd-form-field", "aria-describedby": value.descriptionIds.join(' ') || undefined, "aria-invalid": Boolean(value.error) || undefined, children: [label && (_jsxs("legend", { children: [label, value.required && _jsxs(_Fragment, { children: [" ", FORM_FIELD_POLICY.requiredIndicator] })] })), hint && (_jsx("p", { id: `${id}-hint`, className: "reacd-field-hint", children: hint })), description && _jsx("p", { id: `${id}-description`, children: description }), children, feedback && (_jsx("p", { id: `${id}-feedback`, role: localError ? 'alert' : undefined, className: localError ? 'reacd-field-error' : undefined, children: feedback })), _jsx("input", { type: "text", hidden: true, defaultValue: "", required: Boolean(localError), disabled: value.disabled, onInvalid: (event) => {
+                        event.preventDefault();
+                        focusFieldControl(root.current);
+                    } })] }) }));
+}

package/dist/shared/form-menu-shared/request.d.ts

@@ -0,0 +1,4 @@
+export declare function requestFormMenuChange(request: () => unknown): {
+    accepted: boolean;
+    error?: string;
+};

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

@@ -0,0 +1,14 @@
+import { FORM_MENU_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/form-menu-policy.js';
+export function requestFormMenuChange(request) {
+    try {
+        const result = request();
+        if (result === undefined || result === true)
+            return { accepted: true };
+        if (result === false)
+            return { accepted: false };
+        return { accepted: false, error: FORM_MENU_DEFAULTS.callbackError };
+    }
+    catch {
+        return { accepted: false, error: FORM_MENU_DEFAULTS.callbackFailure };
+    }
+}

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

@@ -0,0 +1,2 @@
+import type { GridProps } from '@fastsprout/reacd/adapter-runtime/components/grid/grid.js';
+export declare function SharedGrid(props: GridProps): import("react").JSX.Element;

package/dist/shared/grid/grid.adapter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Layout } from '@fastsprout/reacd/adapter-runtime/renderer/layout/layout.renderer.js';
+export function SharedGrid(props) {
+    return _jsx(Layout, { kind: "Grid", ...props });
+}

package/dist/shared/h-stack/h-stack.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { HStackProps } from '@fastsprout/reacd/adapter-runtime/components/h-stack/h-stack.js';
+export declare function SharedHStack(props: HStackProps): import("react").JSX.Element;

package/dist/shared/h-stack/h-stack.adapter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Layout } from '@fastsprout/reacd/adapter-runtime/renderer/layout/layout.renderer.js';
+export function SharedHStack(props) {
+    return _jsx(Layout, { kind: "HStack", ...props });
+}

package/dist/shared/header/header-menu.d.ts

@@ -0,0 +1,7 @@
+import type { HeaderProps } from '@fastsprout/reacd/adapter-runtime/components/header/header.js';
+interface HeaderMenuProps {
+    title: string;
+    menu: NonNullable<HeaderProps['menu']>;
+}
+export declare function SharedHeaderMenu({ title, menu }: HeaderMenuProps): import("react").JSX.Element;
+export {};

package/dist/shared/header/header-menu.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ControlSurface } from '../primitives/control-surface.js';
+import { useContext, useState } from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+import { SHELL_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/shell-policy.js';
+import { ThemeVariablesContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/theme-context.js';
+import { PortalActiveContext, PortalHostContext, } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { EscapeScopeContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/escape-context.js';
+import { createEscapeScope } from '@fastsprout/reacd/adapter-runtime/renderer/theme/escape-scope.js';
+import { initialLayerFocus } from '@fastsprout/reacd/adapter-runtime/renderer/theme/initial-layer-focus.js';
+import { Button } from '../primitives/button.js';
+export function SharedHeaderMenu({ title, menu }) {
+    const variables = useContext(ThemeVariablesContext);
+    const ancestorActive = useContext(PortalActiveContext);
+    const [escapeScope] = useState(createEscapeScope);
+    const [host, setHost] = useState(null);
+    return (_jsxs(Dialog.Root, { open: menu.open && ancestorActive, onOpenChange: (open, details) => {
+            if (details.reason === 'escape-key' && escapeScope.dismiss()) {
+                details.event.preventDefault();
+                details.event.stopImmediatePropagation();
+                details.cancel();
+            }
+            else
+                menu.onOpenChange(open);
+        }, children: [_jsx(Dialog.Trigger, { render: _jsx(Button, { className: "reacd-node reacd-button", variant: "secondary" }), children: menu.toggleLabel ?? SHELL_DEFAULTS.toggleLabel }), _jsxs(Dialog.Portal, { className: "reacd-root reacd-portal-root", style: variables, children: [_jsx(Dialog.Backdrop, { className: "reacd-shell-backdrop" }), _jsxs(Dialog.Popup, { render: _jsx(ControlSurface, {}), ref: setHost, className: "reacd-shell-menu", initialFocus: (interaction) => initialLayerFocus(host, interaction), "data-mode": menu.mode ?? SHELL_DEFAULTS.menuMode, children: [_jsx(Dialog.Title, { children: title }), _jsx(Dialog.Description, { children: SHELL_DEFAULTS.menuDescription }), _jsx(PortalHostContext.Provider, { value: host, children: _jsx(EscapeScopeContext.Provider, { value: escapeScope, children: _jsx(PortalActiveContext.Provider, { value: menu.open && ancestorActive, children: _jsx("div", { className: "reacd-shell-menu-content", children: menu.content }) }) }) }), _jsx(Dialog.Close, { render: _jsx(Button, { className: "reacd-node reacd-button", variant: "secondary" }), children: menu.closeLabel ?? SHELL_DEFAULTS.closeLabel })] })] })] }));
+}

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

@@ -0,0 +1,2 @@
+import type { HeaderProps } from '@fastsprout/reacd/adapter-runtime/components/header/header.js';
+export declare function SharedHeader({ title, href, children, start, end, top, bottom, menu, }: HeaderProps): import("react").JSX.Element;

package/dist/shared/header/header.adapter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SharedHeaderMenu } from './header-menu.js';
+export function SharedHeader({ title, href, children, start, end, top, bottom, menu, }) {
+    return (_jsxs("header", { className: "reacd-node reacd-header", children: [top !== undefined && _jsx("div", { className: "reacd-shell-band", children: top }), _jsxs("div", { className: "reacd-container reacd-shell-row", children: [_jsxs("div", { className: "reacd-shell-start", children: [href === undefined ? (_jsx("span", { className: "reacd-shell-title", children: title })) : (_jsx("a", { className: "reacd-shell-title", href: href, children: title })), start] }), _jsx("div", { className: "reacd-shell-center", children: children }), _jsxs("div", { className: "reacd-shell-end", children: [end, menu !== undefined && _jsx(SharedHeaderMenu, { title: title, menu: menu })] })] }), bottom !== undefined && _jsx("div", { className: "reacd-shell-band", children: bottom })] }));
+}

package/dist/shared/icon/icon-map.d.ts

@@ -0,0 +1,16 @@
+export declare const SEMANTIC_ICONS: {
+    readonly add: import("lucide-react").LucideIcon;
+    readonly remove: import("lucide-react").LucideIcon;
+    readonly close: import("lucide-react").LucideIcon;
+    readonly check: import("lucide-react").LucideIcon;
+    readonly search: import("lucide-react").LucideIcon;
+    readonly info: import("lucide-react").LucideIcon;
+    readonly warning: import("lucide-react").LucideIcon;
+    readonly error: import("lucide-react").LucideIcon;
+    readonly success: import("lucide-react").LucideIcon;
+    readonly settings: import("lucide-react").LucideIcon;
+    readonly download: import("lucide-react").LucideIcon;
+    readonly upload: import("lucide-react").LucideIcon;
+    readonly external: import("lucide-react").LucideIcon;
+    readonly loading: import("lucide-react").LucideIcon;
+};

package/dist/shared/icon/icon-map.js

@@ -0,0 +1,17 @@
+import { PlusIcon, MinusIcon, XIcon, CheckIcon, SearchIcon, InfoIcon, TriangleAlertIcon, CircleXIcon, CircleCheckIcon, SettingsIcon, DownloadIcon, UploadIcon, ExternalLinkIcon, LoaderCircleIcon, } from 'lucide-react';
+export const SEMANTIC_ICONS = {
+    add: PlusIcon,
+    remove: MinusIcon,
+    close: XIcon,
+    check: CheckIcon,
+    search: SearchIcon,
+    info: InfoIcon,
+    warning: TriangleAlertIcon,
+    error: CircleXIcon,
+    success: CircleCheckIcon,
+    settings: SettingsIcon,
+    download: DownloadIcon,
+    upload: UploadIcon,
+    external: ExternalLinkIcon,
+    loading: LoaderCircleIcon,
+};

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

@@ -0,0 +1,2 @@
+import type { IconProps } from '@fastsprout/reacd/adapter-runtime/components/icon/index.js';
+export declare function SharedIcon({ name, label, decorative, size, }: IconProps): import("react").JSX.Element;

package/dist/shared/icon/icon.adapter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ICON_POLICY } from '@fastsprout/reacd/adapter-runtime/core/icon-policy.js';
+import { SEMANTIC_ICONS } from './icon-map.js';
+export function SharedIcon({ name, label, decorative, size = ICON_POLICY.defaultSize, }) {
+    const Glyph = SEMANTIC_ICONS[name];
+    return (_jsx(Glyph, { className: "reacd-icon", "data-size": size, role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, "aria-hidden": decorative ? true : undefined, focusable: "false" }));
+}

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

@@ -0,0 +1,2 @@
+import type { InputProps } from '@fastsprout/reacd/adapter-runtime/components/input/input.js';
+export declare function SharedInput({ label, value, onValueChange, inputType, placeholder, name, required, disabled, description, readOnly, loading, minLength, maxLength, autoComplete, }: InputProps): import("react").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { INPUT_POLICY } from '@fastsprout/reacd/adapter-runtime/core/input-policy.js';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { Input } from '../primitives/input.js';
+import { Label } from '../primitives/label.js';
+import { inputValidationMessage } from './validation-message.js';
+export function SharedInput({ label, value, onValueChange, inputType, placeholder, name, required, disabled, description, readOnly, loading, minLength, maxLength, autoComplete, }) {
+    const id = useId();
+    const control = useRef(null);
+    const [attempted, setAttempted] = useState(false);
+    const metadata = useFieldMetadata({ name, required, disabled }, description ? [`${id}-description`] : []);
+    const minimum = minLength ?? INPUT_POLICY.minimumLength;
+    const maximum = maxLength ?? INPUT_POLICY.maximumLength;
+    const type = inputType ?? INPUT_POLICY.defaultType;
+    const localError = inputValidationMessage(value, metadata.required, minimum, type === 'email');
+    const visibleError = attempted ? localError : '';
+    const feedback = metadata.error || visibleError;
+    const descriptions = [
+        ...metadata.descriptionIds,
+        ...(visibleError && !metadata.error ? [`${id}-error`] : []),
+    ];
+    function invalid(event) {
+        event.preventDefault();
+        setAttempted(true);
+        control.current?.focus();
+    }
+    return (_jsxs("div", { className: "reacd-node reacd-field reacd-input", children: [_jsx(Label, { htmlFor: id, children: label }), description && _jsx("p", { id: `${id}-description`, children: description }), _jsx(Input, { ref: control, id: id, type: type, value: value, name: metadata.name, placeholder: placeholder, required: metadata.required, disabled: metadata.disabled, readOnly: readOnly || loading, minLength: minimum, maxLength: maximum, autoComplete: autoComplete, "aria-invalid": Boolean(feedback) || undefined, "aria-busy": loading || undefined, "aria-describedby": descriptions.join(' ') || undefined, onInvalid: invalid, onChange: (event) => {
+                    const next = event.target.value;
+                    if (!metadata.disabled && !readOnly && !loading && next.length <= maximum) {
+                        onValueChange(next);
+                    }
+                } }), loading && (_jsxs("p", { role: "status", children: [INPUT_POLICY.loadingPrefix, " ", label] })), visibleError && !metadata.error && (_jsx("p", { id: `${id}-error`, role: "alert", className: "reacd-field-error", children: visibleError })), _jsx("input", { type: "text", hidden: true, defaultValue: "", required: Boolean(localError), disabled: metadata.disabled, onInvalid: invalid })] }));
+}

package/dist/shared/input/validation-message.d.ts

@@ -0,0 +1 @@
+export declare function inputValidationMessage(value: string, required: boolean, minimum: number, email: boolean): string;

package/dist/shared/input/validation-message.js

@@ -0,0 +1,13 @@
+import { INPUT_POLICY } from '@fastsprout/reacd/adapter-runtime/core/input-policy.js';
+import { inputEmailSchema } from '@fastsprout/reacd/adapter-runtime/schema/input/value.schema.js';
+export function inputValidationMessage(value, required, minimum, email) {
+    if (value.length === 0)
+        return required ? INPUT_POLICY.requiredMessage : '';
+    if (value.length < minimum)
+        return (`${INPUT_POLICY.minimumMessagePrefix} ` +
+            `${minimum} ${INPUT_POLICY.minimumMessageSuffix}`);
+    if (email && !inputEmailSchema.safeParse(value).success) {
+        return INPUT_POLICY.emailMessage;
+    }
+    return '';
+}

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

@@ -0,0 +1,16 @@
+interface DateControlProps {
+    readonly label: string;
+    readonly value: string | null;
+    readonly referenceDate: string;
+    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 DateControl({ label, value, referenceDate, onValueChange, description, error, min, max, name, required, disabled, readOnly, }: DateControlProps): import("react").JSX.Element;
+export {};

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

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

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

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

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+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_DATE_POLICY } from '@fastsprout/reacd/adapter-runtime/core/input-date-policy.js';
+import { boundedDateValueSchema, dateRangeValueSchema, } from '@fastsprout/reacd/adapter-runtime/schema/date-time/index.js';
+import { DateControl } from './date-control.js';
+import { useTemporalChange } from '../temporal/use-temporal-change.js';
+import { temporalRecovery } from '../temporal/temporal-recovery.js';
+import { useRangeReset } from '../temporal/use-range-reset.js';
+function SingleDate(props) {
+    const { error, change } = useTemporalChange((value) => boundedDateValueSchema({ min: props.min, max: props.max }).safeParse(value)
+        .success, props.onValueChange, INPUT_DATE_POLICY.invalidValue, props, temporalRecovery(props.value, props));
+    return _jsx(DateControl, { ...props, error: error, onValueChange: change });
+}
+function RangeDate(props) {
+    const { error, change } = useTemporalChange((value) => dateRangeValueSchema({ min: props.min, max: props.max }).safeParse(value).success, props.onValueChange, INPUT_DATE_POLICY.invalidRange, props, temporalRecovery(props.value, props));
+    const { ref, revision, change: changeEndpoint } = useRangeReset(props.value, change);
+    return (_jsxs("fieldset", { ref: ref, className: "reacd-date-range", children: [_jsx("legend", { children: props.label }), _jsx(DateControl, { ...props, label: `${INPUT_DATE_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(DateControl, { ...props, label: `${INPUT_DATE_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 SharedInputDate(properties) {
+    const metadata = useFieldMetadata(properties);
+    const props = {
+        ...properties,
+        name: metadata.name,
+        required: metadata.required,
+        disabled: metadata.disabled,
+    };
+    const direction = useDirection();
+    const locale = useMemo(() => new Intl.Locale(props.locale ?? DATE_TIME_POLICY.locale, {
+        calendar: DATE_TIME_POLICY.calendar,
+    }).toString(), [props.locale]);
+    return (_jsx(I18nProvider, { locale: locale, children: _jsx("div", { className: "reacd-node reacd-field reacd-input-date", dir: direction, children: props.mode === 'range' ? _jsx(RangeDate, { ...props }) : _jsx(SingleDate, { ...props }) }) }));
+}

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

@@ -0,0 +1,7 @@
+import type { RefObject } from 'react';
+import type { InputMenuProps } from '@fastsprout/reacd/adapter-runtime/components/input-menu/index.js';
+export declare function InputMenuForm({ properties, input, invalid, }: {
+    properties: InputMenuProps;
+    input: RefObject<HTMLInputElement | null>;
+    invalid: () => void;
+}): import("react").JSX.Element;