@fastsprout/reacd-shadcn 0.0.0-stage → 0.2.0

package/dist/file-upload/file-upload.adapter.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from 'react';
+import { FILE_ACCEPT_TYPES, FILE_UPLOAD_DEFAULTS as D, FILE_UPLOAD_POLICY as P, } from '@fastsprout/reacd/adapter-runtime/core/file-upload-policy.js';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { Button } from '../vendor/ui/button.js';
+import { FileIntake } from './intake.js';
+import { readFile } from './read-file.js';
+export function ShadcnFileUpload(props) {
+    const id = useId();
+    const chooser = useRef(null);
+    const chooseButton = useRef(null);
+    const root = useRef(null);
+    const [attempted, setAttempted] = useState(false);
+    const metadata = useFieldMetadata(props, props.description ? [`${id}-help`] : []);
+    const [intake] = useState(() => new FileIntake({
+        read: readFile,
+        id: () => `${P.idPrefix}${crypto.randomUUID()}`,
+    }));
+    const snapshot = useSyncExternalStore(intake.subscribe, intake.getSnapshot, intake.getSnapshot);
+    useLayoutEffect(() => {
+        intake.configure({ ...props, disabled: metadata.disabled });
+    });
+    useEffect(() => () => intake.dispose(), [intake]);
+    const requiredError = metadata.required && props.value.length === 0;
+    const localError = snapshot.status === 'error'
+        ? snapshot.message
+        : attempted && requiredError
+            ? D.requiredLabel
+            : '';
+    const error = metadata.error || localError;
+    const describedBy = [
+        ...metadata.descriptionIds,
+        ...(!metadata.error && localError ? [`${id}-error`] : []),
+    ].join(' ') || undefined;
+    function invalid(event) {
+        event.preventDefault();
+        setAttempted(true);
+        if (props.readOnly || metadata.disabled)
+            root.current?.focus();
+        else
+            chooseButton.current?.focus();
+    }
+    return (_jsxs("div", { ref: root, role: "group", "aria-labelledby": `${id}-label`, tabIndex: -1, "aria-describedby": describedBy, "aria-invalid": Boolean(error) || undefined, "aria-disabled": metadata.disabled || undefined, className: "reacd-node reacd-field reacd-file-upload", onDragOver: (event) => {
+            event.preventDefault();
+        }, onDrop: (event) => {
+            event.preventDefault();
+            intake.start(event.dataTransfer.files);
+        }, children: [_jsx("label", { id: `${id}-label`, htmlFor: props.readOnly ? undefined : id, children: props.label }), props.description && _jsx("p", { id: `${id}-help`, children: props.description }), !props.readOnly && (_jsxs(_Fragment, { children: [_jsx("p", { children: D.dropLabel }), _jsx(Button, { ref: chooseButton, type: "button", className: "reacd-button", disabled: metadata.disabled, onClick: () => chooser.current?.click(), children: D.chooseLabel }), _jsx("input", { ref: chooser, id: id, type: "file", hidden: true, multiple: props.multiple ?? D.multiple, accept: FILE_ACCEPT_TYPES[props.accept ?? D.accept], disabled: metadata.disabled, onChange: (event) => {
+                            const files = event.currentTarget.files;
+                            if (files)
+                                intake.start(files);
+                            event.currentTarget.value = '';
+                        } })] })), props.value.length === 0 ? (_jsx("p", { children: D.emptyLabel })) : (_jsx("ul", { className: "reacd-file-upload-list", children: props.value.map((file) => (_jsxs("li", { children: [_jsx("span", { children: file.name }), !props.readOnly && (_jsx(Button, { type: "button", className: "reacd-button", disabled: metadata.disabled, "aria-label": `Remove ${file.name}`, onClick: () => {
+                                intake.cancel();
+                                props.onValueChange(props.value.filter((entry) => entry.id !== file.id));
+                            }, children: "Remove" }))] }, file.id))) })), snapshot.status === 'reading' && (_jsx(Button, { type: "button", className: "reacd-button", onClick: () => {
+                    intake.cancel();
+                    chooseButton.current?.focus();
+                }, children: D.cancelLabel })), snapshot.status !== 'error' && snapshot.message && (_jsx("p", { role: "status", children: snapshot.message })), localError && !metadata.error && (_jsx("p", { role: "alert", id: `${id}-error`, children: localError })), metadata.name && !metadata.disabled && (_jsx("input", { type: "hidden", name: metadata.name, value: JSON.stringify(props.value) })), _jsx("input", { type: "text", hidden: true, required: requiredError, disabled: metadata.disabled, defaultValue: "", onInvalid: invalid })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { Result } from '@fastsprout/reacd/adapter-runtime/core/result.js';
+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';
+export interface IntakeSettings extends FileUploadSettings {
+    readonly value: readonly UploadFile[];
+}
+export declare function inspectNativeFiles(input: ArrayLike<File>, settings: IntakeSettings): Result<readonly File[]>;
+export declare function sameUploadFiles(left: readonly UploadFile[], right: readonly UploadFile[]): boolean;

package/dist/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/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/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/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/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/footer/footer.adapter.d.ts

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

package/dist/footer/footer.adapter.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ShadcnFooter({ 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/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 ShadcnFooterColumns({ label, columns, left, right, }: FooterColumnsProps): import("react").JSX.Element;

package/dist/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 '../vendor/ui/button.js';
+export function ShadcnFooterColumns({ 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/form-field/focus-control.d.ts

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

package/dist/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/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 ShadcnFormField({ name, label, description, hint, help, error, required, disabled, children, }: FormFieldProps): import("react").JSX.Element;

package/dist/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 ShadcnFormField({ 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/form-menu-shared/request.d.ts

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

package/dist/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/grid/grid.adapter.d.ts

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

package/dist/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 ShadcnGrid(props) {
+    return _jsx(Layout, { kind: "Grid", ...props });
+}

package/dist/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 ShadcnHStack(props: HStackProps): import("react").JSX.Element;

package/dist/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 ShadcnHStack(props) {
+    return _jsx(Layout, { kind: "HStack", ...props });
+}

package/dist/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 ShadcnHeaderMenu({ title, menu }: HeaderMenuProps): import("react").JSX.Element;
+export {};

package/dist/header/header-menu.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 '../vendor/ui/button.js';
+export function ShadcnHeaderMenu({ 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, { 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/header/header.adapter.d.ts

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

package/dist/header/header.adapter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ShadcnHeaderMenu } from './header-menu.js';
+export function ShadcnHeader({ 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(ShadcnHeaderMenu, { title: title, menu: menu })] })] }), bottom !== undefined && _jsx("div", { className: "reacd-shell-band", children: bottom })] }));
+}

package/dist/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/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/icon/icon.adapter.d.ts

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

package/dist/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 ShadcnIcon({ 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/index.d.ts

@@ -0,0 +1 @@
+export { shadcnAdapter } from './shadcn.adapter.js';

package/dist/index.js

@@ -0,0 +1 @@
+export { shadcnAdapter } from './shadcn.adapter.js';

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

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

package/dist/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 '../vendor/ui/input.js';
+import { Label } from '../vendor/ui/label.js';
+import { inputValidationMessage } from './validation-message.js';
+export function ShadcnInput({ 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/input/validation-message.d.ts

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

package/dist/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/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 {};