@fastsprout/reacd-shadcn 0.0.0-stage → 0.2.0

package/dist/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 '../vendor/ui/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/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/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/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/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/kbd/kbd.adapter.d.ts

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

package/dist/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 ShadcnKbd({ 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/listbox/clear-focus.d.ts

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

package/dist/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();
+    }
+}

package/dist/listbox/form-bridge.d.ts

@@ -0,0 +1,14 @@
+interface FormBridgeProps {
+    readonly values: readonly string[];
+    readonly multiple: boolean;
+    readonly name: string | undefined;
+    readonly required: boolean | undefined;
+    readonly disabled: boolean | undefined;
+    readonly root: HTMLDivElement | null;
+    readonly errorId: string;
+    readonly invalid: boolean;
+    readonly markInvalid: () => void;
+    readonly reset: () => boolean;
+}
+export declare function ListboxFormBridge({ values, multiple, name, required, disabled, root, errorId, reset, invalid, markInvalid, }: FormBridgeProps): import("react").JSX.Element;
+export {};

package/dist/listbox/form-bridge.js

@@ -0,0 +1,34 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { LISTBOX_POLICY } from '@fastsprout/reacd/adapter-runtime/core/listbox-policy.js';
+import { SELECTION_POLICY } from '@fastsprout/reacd/adapter-runtime/core/selection-policy.js';
+export function ListboxFormBridge({ values, multiple, name, required, disabled, root, errorId, reset, invalid, markInvalid, }) {
+    const [proxy, setProxy] = useState(null);
+    const latestReset = useRef(reset);
+    useLayoutEffect(() => {
+        latestReset.current = reset;
+    }, [reset]);
+    useEffect(() => {
+        const form = proxy?.form;
+        if (form === undefined || form === null)
+            return;
+        let active = true;
+        function onReset(event) {
+            queueMicrotask(() => {
+                if (active && !event.defaultPrevented)
+                    latestReset.current();
+            });
+        }
+        form.addEventListener('reset', onReset);
+        return () => {
+            active = false;
+            form.removeEventListener('reset', onReset);
+        };
+    }, [proxy]);
+    const entries = multiple ? values : [values[0] ?? SELECTION_POLICY.emptySingleValue];
+    return (_jsxs(_Fragment, { children: [entries.map((value) => (_jsx("input", { type: "hidden", name: name, value: value, disabled: disabled }, value))), _jsx("input", { ref: setProxy, type: "text", hidden: true, required: required, disabled: disabled, value: values.length > 0 ? LISTBOX_POLICY.validFieldValue : '', onChange: () => undefined, onInvalid: (event) => {
+                    event.preventDefault();
+                    markInvalid();
+                    root?.focus();
+                } }), _jsx("p", { id: errorId, role: invalid ? 'alert' : undefined, hidden: !invalid, children: invalid ? LISTBOX_POLICY.requiredMessage : null })] }));
+}

package/dist/listbox/listbox.adapter.d.ts

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

package/dist/listbox/listbox.adapter.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useState } from 'react';
+import { ListBox, ListBoxItem, Text } from 'react-aria-components/ListBox';
+import { I18nProvider } from 'react-aria-components/I18nProvider';
+import { useDirection } from '@radix-ui/react-direction';
+import { LISTBOX_DEFAULTS, LISTBOX_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/listbox-policy.js';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { Button } from '../vendor/ui/button.js';
+import { ListboxFormBridge } from './form-bridge.js';
+import { useListboxRequest } from './use-listbox-request.js';
+import { focusListboxAfterClear } from './clear-focus.js';
+import { maintainListboxSemantics } from './native-semantics.js';
+export function ShadcnListbox(properties) {
+    const id = useId();
+    const metadata = useFieldMetadata(properties, properties.description === undefined ? [] : [`${id}-description`]);
+    const effectiveProperties = {
+        ...properties,
+        name: metadata.name,
+        required: metadata.required,
+        disabled: metadata.disabled,
+    };
+    const { label, items, description, name, required, disabled, readOnly, mode = LISTBOX_DEFAULTS.mode, locale = LISTBOX_DEFAULTS.locale, status = LISTBOX_DEFAULTS.status, clearLabel = LISTBOX_DEFAULTS.clearLabel, emptyMessage = LISTBOX_DEFAULTS.emptyMessage, loadingMessage = LISTBOX_DEFAULTS.loadingMessage, errorMessage = LISTBOX_DEFAULTS.errorMessage, } = effectiveProperties;
+    const direction = useDirection();
+    const [root, setRoot] = useState(null);
+    const [invalid, setInvalid] = useState(false);
+    const { values, blocked, failure, select, request, reset } = useListboxRequest(effectiveProperties);
+    if (invalid && (values.length > 0 || !required || disabled))
+        setInvalid(false);
+    useLayoutEffect(() => maintainListboxSemantics(root, {
+        readOnly: Boolean(readOnly) || status !== 'ready',
+        required: Boolean(required),
+        invalid: invalid || metadata.error.length > 0,
+        disabled: Boolean(disabled),
+        busy: status === 'loading',
+    }), [root, readOnly, required, invalid, disabled, status, metadata.error]);
+    const describedBy = [
+        ...metadata.descriptionIds,
+        `${id}-status`,
+        `${id}-error`,
+        failure === undefined ? undefined : `${id}-request-error`,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const variables = {
+        '--reacd-listbox-rows': LISTBOX_POLICY.visibleRows,
+    };
+    return (_jsx(I18nProvider, { locale: locale, children: _jsxs("div", { className: "reacd-node reacd-field reacd-listbox", dir: direction, onPointerDownCapture: (event) => {
+                if (disabled) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            }, onKeyDownCapture: (event) => {
+                if (disabled) {
+                    event.stopPropagation();
+                    if (event.key !== 'Tab')
+                        event.preventDefault();
+                    return;
+                }
+                if (event.nativeEvent.isComposing ||
+                    event.keyCode === LISTBOX_POLICY.imeProcessKeyCode) {
+                    event.stopPropagation();
+                    if (event.key === 'Enter' || event.key === ' ')
+                        event.preventDefault();
+                }
+            }, children: [_jsxs("span", { children: [_jsx("span", { id: id, children: label }), required ? ' (required)' : ''] }), description === undefined ? null : (_jsx("p", { id: `${id}-description`, children: description })), _jsx(ListBox, { ref: setRoot, items: items, className: "reacd-listbox-options", style: variables, "aria-labelledby": id, "aria-describedby": describedBy, selectionMode: mode, selectionBehavior: "toggle", escapeKeyBehavior: "none", selectedKeys: new Set(values), onSelectionChange: select, disabledKeys: items
+                        .filter((item) => disabled || item.disabled)
+                        .map((item) => item.value), children: (item) => (_jsxs(ListBoxItem, { id: item.value, textValue: item.label, className: "reacd-listbox-option", children: [_jsx(Text, { slot: "label", children: item.label }), item.description === undefined ? null : (_jsx(Text, { slot: "description", className: "reacd-listbox-description", children: item.description }))] })) }), _jsx("p", { id: `${id}-status`, role: status === 'error' ? 'alert' : 'status', children: status === 'loading'
+                        ? loadingMessage
+                        : status === 'error'
+                            ? errorMessage
+                            : items.length === 0
+                                ? emptyMessage
+                                : LISTBOX_DEFAULTS.readyMessage }), failure === undefined ? null : (_jsx("p", { id: `${id}-request-error`, role: "alert", children: failure })), _jsx(Button, { type: "button", className: "reacd-node reacd-button", disabled: blocked || values.length === 0, onClick: (event) => {
+                        const button = event.currentTarget;
+                        const wasFocused = button.ownerDocument.activeElement === button;
+                        if (request([]))
+                            focusListboxAfterClear(root, button, wasFocused);
+                    }, children: clearLabel }), _jsx(ListboxFormBridge, { values: values, multiple: mode === 'multiple', name: name, required: required, disabled: disabled, root: root, errorId: `${id}-error`, reset: reset, invalid: invalid, markInvalid: () => setInvalid(true) })] }) }));
+}

package/dist/listbox/native-semantics.d.ts

@@ -0,0 +1,9 @@
+interface ListboxSemantics {
+    readonly readOnly: boolean;
+    readonly required: boolean;
+    readonly invalid: boolean;
+    readonly disabled: boolean;
+    readonly busy: boolean;
+}
+export declare function maintainListboxSemantics(root: HTMLElement | null, state: ListboxSemantics): () => void;
+export {};

package/dist/listbox/native-semantics.js

@@ -0,0 +1,33 @@
+import { LISTBOX_POLICY } from '@fastsprout/reacd/adapter-runtime/core/listbox-policy.js';
+export function maintainListboxSemantics(root, state) {
+    if (root === null)
+        return () => undefined;
+    const attributes = {
+        'aria-readonly': state.readOnly,
+        'aria-required': state.required,
+        'aria-invalid': state.invalid,
+        'aria-disabled': state.disabled,
+        'aria-busy': state.busy,
+    };
+    for (const [attribute, value] of Object.entries(attributes)) {
+        root.setAttribute(attribute, String(value));
+    }
+    if (!state.disabled)
+        return () => undefined;
+    const element = root;
+    function excludeFromTab() {
+        if (element.tabIndex !== LISTBOX_POLICY.disabledTabIndex) {
+            element.tabIndex = LISTBOX_POLICY.disabledTabIndex;
+        }
+    }
+    const observer = new MutationObserver(excludeFromTab);
+    excludeFromTab();
+    observer.observe(root, { attributes: true, attributeFilter: ['tabindex'] });
+    return () => {
+        observer.disconnect();
+        root.tabIndex =
+            root.querySelector('[role="option"][tabindex="0"]') === null
+                ? LISTBOX_POLICY.activeTabIndex
+                : LISTBOX_POLICY.disabledTabIndex;
+    };
+}

package/dist/listbox/selection.d.ts

@@ -0,0 +1,4 @@
+import type { Selection } from 'react-aria-components/ListBox';
+import type { ListboxProps } from '@fastsprout/reacd/adapter-runtime/components/listbox/index.js';
+export declare function listboxKeys(properties: ListboxProps): readonly string[];
+export declare function orderedListboxSelection(next: Selection, properties: ListboxProps): readonly string[] | undefined;

package/dist/listbox/selection.js

@@ -0,0 +1,31 @@
+import { SELECTION_POLICY } from '@fastsprout/reacd/adapter-runtime/core/selection-policy.js';
+export function listboxKeys(properties) {
+    if (properties.mode === 'multiple')
+        return properties.value;
+    return properties.value === SELECTION_POLICY.emptySingleValue
+        ? []
+        : [properties.value];
+}
+export function orderedListboxSelection(next, properties) {
+    const previous = listboxKeys(properties);
+    if (next === 'all') {
+        if (properties.mode !== 'multiple')
+            return undefined;
+        return [
+            ...previous,
+            ...properties.items
+                .filter((item) => !item.disabled && !previous.includes(item.value))
+                .map((item) => item.value),
+        ];
+    }
+    const values = [...next];
+    if (!values.every((key) => typeof key === 'string'))
+        return undefined;
+    const retained = previous.filter((key) => next.has(key));
+    const additions = properties.items
+        .filter((item) => next.has(item.value) && !previous.includes(item.value))
+        .map((item) => item.value);
+    if (retained.length + additions.length !== values.length)
+        return undefined;
+    return [...retained, ...additions];
+}

package/dist/listbox/use-listbox-request.d.ts

@@ -0,0 +1,10 @@
+import type { Selection } from 'react-aria-components/ListBox';
+import type { ListboxProps } from '@fastsprout/reacd/adapter-runtime/components/listbox/index.js';
+export declare function useListboxRequest(properties: ListboxProps): {
+    values: readonly string[];
+    blocked: boolean;
+    failure: string | undefined;
+    select: (next: Selection) => void;
+    request: (next: readonly string[]) => boolean;
+    reset: () => boolean;
+};

package/dist/listbox/use-listbox-request.js

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { LISTBOX_DEFAULTS, LISTBOX_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/listbox-policy.js';
+import { SELECTION_POLICY } from '@fastsprout/reacd/adapter-runtime/core/selection-policy.js';
+import { canRequestSelection } from '@fastsprout/reacd/adapter-runtime/schema/selection/index.js';
+import { listboxKeys, orderedListboxSelection } from './selection.js';
+export function useListboxRequest(properties) {
+    const values = listboxKeys(properties);
+    const [initial] = useState(() => Object.freeze([...values]));
+    const [failure, setFailure] = useState();
+    const basis = JSON.stringify([
+        properties.mode ?? LISTBOX_DEFAULTS.mode,
+        values,
+        properties.items.map(({ value, disabled }) => [value, Boolean(disabled)]),
+        Boolean(properties.disabled),
+        Boolean(properties.readOnly),
+        properties.status ?? LISTBOX_DEFAULTS.status,
+    ]);
+    if (failure !== undefined && failure.basis !== basis)
+        setFailure(undefined);
+    const blocked = properties.disabled ||
+        properties.readOnly ||
+        (properties.status ?? LISTBOX_DEFAULTS.status) !== 'ready';
+    function fail(message) {
+        setFailure({ basis, message });
+        return false;
+    }
+    function request(next) {
+        if (blocked)
+            return false;
+        if ((properties.mode !== 'multiple' && next.length > LISTBOX_POLICY.singleLimit) ||
+            !canRequestSelection(values, next, properties.items)) {
+            return fail(LISTBOX_POLICY.invalidChange);
+        }
+        if (next.length === values.length && next.every((key, n) => key === values[n])) {
+            setFailure(undefined);
+            return true;
+        }
+        try {
+            const decision = properties.mode === 'multiple'
+                ? properties.onValueChange(Object.freeze([...next]))
+                : properties.onValueChange(next[0] ?? SELECTION_POLICY.emptySingleValue);
+            if (decision === false)
+                return fail(LISTBOX_POLICY.invalidChange);
+            if (decision !== undefined && decision !== true) {
+                if (decision instanceof Promise)
+                    void decision.catch(() => undefined);
+                return fail(LISTBOX_POLICY.invalidCallback);
+            }
+            setFailure(undefined);
+            return true;
+        }
+        catch {
+            return fail(LISTBOX_POLICY.invalidCallback);
+        }
+    }
+    function select(next) {
+        if (blocked)
+            return;
+        const keys = orderedListboxSelection(next, properties);
+        if (keys === undefined)
+            fail(LISTBOX_POLICY.invalidChange);
+        else
+            request(keys);
+    }
+    return {
+        values,
+        blocked,
+        failure: failure?.basis === basis ? failure.message : undefined,
+        select,
+        request,
+        reset: () => request(initial),
+    };
+}

package/dist/locale-select/locale-select.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { LocaleSelectProps } from '@fastsprout/reacd/adapter-runtime/components/locale-select/index.js';
+export declare function ShadcnLocaleSelect({ label, value, locales, onValueChange, name, required, description, disabled, readOnly, }: LocaleSelectProps): import("react").JSX.Element;

package/dist/locale-select/locale-select.adapter.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useId } from 'react';
+import { PortalActiveContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { Select, SelectItem, SelectTrigger, SelectValue } from '../vendor/ui/select.js';
+import { Label } from '../vendor/ui/label.js';
+import { ShadcnSelectContent } from '../select/select-content.adapter.js';
+export function ShadcnLocaleSelect({ label, value, locales, onValueChange, name, required, description, disabled, readOnly, }) {
+    const id = useId();
+    const active = useContext(PortalActiveContext);
+    const selectedLabel = locales.reduce((selected, locale) => (locale.code === value ? locale.label : selected), value);
+    return (_jsxs("div", { className: "reacd-node reacd-field reacd-locale-select", children: [_jsx(Label, { htmlFor: id, children: label }), _jsxs(Select, { value: value, name: name, required: required, disabled: disabled, ...(active ? {} : { open: false }), onValueChange: (next) => {
+                    if (!readOnly)
+                        onValueChange(next);
+                }, children: [_jsx(SelectTrigger, { id: id, className: "reacd-locale-trigger", "aria-readonly": readOnly || undefined, "aria-describedby": description === undefined ? undefined : `${id}-help`, children: _jsx(SelectValue, { children: selectedLabel }) }), _jsx(ShadcnSelectContent, { children: locales.map((locale) => (_jsx(SelectItem, { value: locale.code, className: "reacd-locale-option", children: locale.label }, locale.code))) })] }, active ? 'active' : 'inactive'), description === undefined ? null : (_jsx("span", { id: `${id}-help`, className: "reacd-field-description", children: description }))] }));
+}

package/dist/main/main.adapter.d.ts

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

package/dist/main/main.adapter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { MainScopeContext } from '@fastsprout/reacd/adapter-runtime/renderer/main/main-scope.js';
+export function ShadcnMain({ children }) {
+    const nested = useContext(MainScopeContext);
+    return (_jsx(MainScopeContext.Provider, { value: true, children: nested ? (_jsx("section", { className: "reacd-node reacd-main", children: children })) : (_jsx("main", { className: "reacd-node reacd-main", children: children })) }));
+}

package/dist/marquee/marquee.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { MarqueeProps } from '@fastsprout/reacd/adapter-runtime/components/marquee/index.js';
+export declare function ShadcnMarquee({ label, items, paused, onPausedChange, pace, direction: motion, readOnly, emptyMessage, }: MarqueeProps): import("react").JSX.Element;

package/dist/marquee/marquee.adapter.js

@@ -0,0 +1,23 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDirection } from '@base-ui/react/direction-provider';
+import { MARQUEE_DEFAULTS, MARQUEE_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/marquee-policy.js';
+import { useReducedMotion } from '@fastsprout/reacd/adapter-runtime/renderer/motion/use-reduced-motion.js';
+import { Button } from '../vendor/ui/button.js';
+export function ShadcnMarquee({ label, items, paused, onPausedChange, pace = MARQUEE_DEFAULTS.pace, direction: motion = MARQUEE_DEFAULTS.direction, readOnly = MARQUEE_DEFAULTS.readOnly, emptyMessage = MARQUEE_DEFAULTS.emptyMessage, }) {
+    const direction = useDirection();
+    const reduced = useReducedMotion();
+    const staticView = reduced !== false || readOnly;
+    const variables = {
+        '--reacd-marquee-duration': `var(--reacd-marquee-${pace})`,
+    };
+    const content = (_jsx("ul", { "aria-label": label, className: "reacd-marquee-reading-list", children: items.map((item) => (_jsx("li", { children: item.label }, item.id))) }));
+    return (_jsx("section", { role: "region", "aria-label": label, className: "reacd-node reacd-marquee", children: items.length === 0 ? (_jsx("p", { role: "status", children: emptyMessage })) : (_jsxs(_Fragment, { children: [_jsx("p", { role: "status", children: staticView
+                        ? reduced === undefined
+                            ? MARQUEE_DEFAULTS.unknownLabel
+                            : reduced
+                                ? MARQUEE_DEFAULTS.reducedLabel
+                                : MARQUEE_DEFAULTS.readonlyLabel
+                        : paused
+                            ? MARQUEE_DEFAULTS.pausedLabel
+                            : MARQUEE_DEFAULTS.enabledLabel }), staticView ? (content) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "reacd-marquee-viewport", "aria-hidden": "true", inert: true, dir: "ltr", children: _jsx("div", { className: "reacd-marquee-track", "data-paused": paused, "data-reverse": (direction === 'rtl') !== (motion === 'backward'), style: variables, children: Array.from({ length: MARQUEE_POLICY.visualCopies }, (_, copy) => (_jsx("div", { className: "reacd-marquee-copy", children: items.map((item) => (_jsx("span", { dir: direction, children: item.label }, item.id))) }, copy))) }) }), _jsx(Button, { type: "button", className: "reacd-button", variant: "outline", onClick: () => onPausedChange(!paused), children: paused ? MARQUEE_DEFAULTS.resumeLabel : MARQUEE_DEFAULTS.pauseLabel }), _jsxs("details", { className: "reacd-marquee-reading", children: [_jsx("summary", { children: MARQUEE_DEFAULTS.readLabel }), content] })] }))] })) }));
+}

package/dist/modal/modal.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ModalProps } from '@fastsprout/reacd/adapter-runtime/components/modal/modal.js';
+export declare function ShadcnModal({ title, description, open, onOpenChange, triggerLabel, closeLabel, children, footer, disabled, dismissible, modal, overlay, fullscreen, retainContent, }: ModalProps): import("react").JSX.Element;

package/dist/modal/modal.adapter.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+import { useDirection } from '@base-ui/react/direction-provider';
+import { MODAL_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/modal-policy.js';
+import { ThemeVariablesContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/theme-context.js';
+import { Button } from '../vendor/ui/button.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 { PortalHostContext, PortalActiveContext, } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+export function ShadcnModal({ title, description, open, onOpenChange, triggerLabel, closeLabel = MODAL_DEFAULTS.closeLabel, children, footer, disabled, dismissible = MODAL_DEFAULTS.dismissible, modal = MODAL_DEFAULTS.modal, overlay = MODAL_DEFAULTS.overlay, fullscreen = MODAL_DEFAULTS.fullscreen, retainContent = MODAL_DEFAULTS.retainContent, }) {
+    const direction = useDirection();
+    const variables = useContext(ThemeVariablesContext);
+    const ancestorActive = useContext(PortalActiveContext);
+    const active = open && ancestorActive;
+    const [escapeScope] = useState(createEscapeScope);
+    const [host, setHost] = useState(null);
+    return (_jsxs(Dialog.Root, { open: active, modal: modal, disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
+            if (details.reason === 'escape-key' && escapeScope.dismiss()) {
+                details.event.preventDefault();
+                details.event.stopImmediatePropagation();
+                details.cancel();
+            }
+            else if (details.reason === 'escape-key' && !dismissible)
+                details.cancel();
+            else
+                onOpenChange(next);
+        }, children: [triggerLabel !== undefined && (_jsx(Dialog.Trigger, { disabled: disabled, render: _jsx(Button, { className: "reacd-node reacd-button" }), children: triggerLabel })), _jsxs(Dialog.Portal, { dir: direction, keepMounted: retainContent, className: "reacd-root reacd-portal-root reacd-modal-portal", style: variables, hidden: !active, children: [modal && overlay && _jsx(Dialog.Backdrop, { className: "reacd-modal-backdrop" }), _jsx(Dialog.Viewport, { className: "reacd-modal-viewport", "data-modal": modal, children: _jsx(Dialog.Popup, { dir: direction, ref: setHost, initialFocus: (interaction) => initialLayerFocus(host, interaction), finalFocus: ancestorActive ? undefined : false, className: "reacd-modal-panel", "data-fullscreen": fullscreen, "aria-modal": modal, children: _jsx(PortalHostContext.Provider, { value: host, children: _jsx(EscapeScopeContext.Provider, { value: escapeScope, children: _jsxs(PortalActiveContext.Provider, { value: active, children: [_jsxs("header", { className: "reacd-modal-header", children: [_jsx(Dialog.Title, { children: title }), _jsx(Dialog.Description, { children: description })] }), _jsx("div", { className: "reacd-modal-body", children: children }), _jsxs("footer", { className: "reacd-modal-footer", children: [footer, _jsx(Dialog.Close, { render: _jsx(Button, { className: "reacd-node reacd-button", variant: "secondary" }), children: closeLabel })] })] }) }) }) }) })] })] }));
+}

package/dist/navigation/navigation.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { NavigationProps } from '@fastsprout/reacd/adapter-runtime/components/navigation/navigation.js';
+export declare function ShadcnNavigation({ label, value, items, onValueChange, }: NavigationProps): import("react").JSX.Element;

package/dist/navigation/navigation.adapter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../vendor/ui/button.js';
+export function ShadcnNavigation({ label, value, items, onValueChange, }) {
+    return (_jsx("nav", { className: "reacd-node reacd-navigation", "aria-label": label, children: items.map((item) => (_jsx(Button, { type: "button", className: "reacd-node reacd-button", "aria-current": item.value === value ? 'page' : undefined, variant: item.value === value ? 'secondary' : 'ghost', onClick: () => onValueChange(item.value), children: item.label }, item.value))) }));
+}

package/dist/navigation-menu/menu-target.d.ts

@@ -0,0 +1,4 @@
+import type { NavigationMenuProps } from '@fastsprout/reacd/adapter-runtime/components/navigation-menu/index.js';
+export declare function MenuTarget({ item }: {
+    item: NavigationMenuProps['items'][number];
+}): import("react").JSX.Element;

package/dist/navigation-menu/menu-target.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavigationMenu } from '@base-ui/react/navigation-menu';
+import { pressHandler } from '@fastsprout/reacd/adapter-runtime/renderer/contracts/press-handler.js';
+import { Button } from '../vendor/ui/button.js';
+export function MenuTarget({ item }) {
+    if (item.onPress !== undefined) {
+        return (_jsx(NavigationMenu.Link, { closeOnClick: true, className: "reacd-node reacd-button reacd-menu-target", render: _jsx(Button, { type: "button", variant: "ghost", disabled: item.disabled }), onClick: pressHandler(item.disabled ? undefined : item.onPress), children: item.label }));
+    }
+    if (item.href !== undefined && !item.disabled) {
+        return (_jsx(NavigationMenu.Link, { closeOnClick: true, className: "reacd-node reacd-link reacd-menu-target", href: item.href, active: item.active, target: item.newWindow ? '_blank' : undefined, rel: item.newWindow ? 'noopener noreferrer' : undefined, children: item.label }));
+    }
+    return (_jsx("span", { className: "reacd-menu-label", "aria-disabled": item.disabled || undefined, children: item.label }));
+}

package/dist/navigation-menu/navigation-menu.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { NavigationMenuProps } from '@fastsprout/reacd/adapter-runtime/components/navigation-menu/index.js';
+export declare function ShadcnNavigationMenu({ label, items, orientation, }: NavigationMenuProps): import("react").JSX.Element;

package/dist/navigation-menu/navigation-menu.adapter.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { NavigationMenu } from '@base-ui/react/navigation-menu';
+import { useDirection } from '@radix-ui/react-direction';
+import { NAVIGATION_COMPOSITION_DEFAULTS, NAVIGATION_COMPOSITION_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/navigation-composition-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';
+import { Button } from '../vendor/ui/button.js';
+import { MenuTarget } from './menu-target.js';
+export function ShadcnNavigationMenu({ label, items, orientation = NAVIGATION_COMPOSITION_DEFAULTS.orientation, }) {
+    const variables = useContext(ThemeVariablesContext);
+    const host = useContext(PortalHostContext);
+    const direction = useDirection();
+    const side = orientation === 'horizontal' ? 'bottom' : direction === 'rtl' ? 'left' : 'right';
+    return (_jsxs(NavigationMenu.Root, { className: "reacd-node reacd-navigation-menu", "aria-label": label, orientation: orientation, "data-orientation": orientation, delay: NAVIGATION_COMPOSITION_POLICY.disclosureDelayMs, closeDelay: NAVIGATION_COMPOSITION_POLICY.disclosureDelayMs, children: [_jsx(NavigationMenu.List, { className: "reacd-menu-list", children: items.map((item) => (_jsx(NavigationMenu.Item, { value: item.key, children: item.children === undefined ? (_jsx(MenuTarget, { item: item })) : (_jsxs(_Fragment, { children: [_jsxs(NavigationMenu.Trigger, { className: "reacd-node reacd-button reacd-menu-trigger", disabled: item.disabled, render: _jsx(Button, { type: "button", variant: "ghost" }), children: [item.label, _jsx(NavigationMenu.Icon, { "aria-hidden": "true", className: "reacd-menu-disclosure", children: "\u2304" })] }), _jsxs(NavigationMenu.Content, { className: "reacd-menu-content", children: [item.description !== undefined && _jsx("p", { children: item.description }), _jsx("ul", { className: "reacd-menu-child-list", children: item.children.map((child) => (_jsx("li", { children: _jsx(MenuTarget, { item: child }) }, child.key))) })] })] })) }, item.key))) }), _jsx(NavigationMenu.Portal, { container: host ?? undefined, children: _jsx(NavigationMenu.Positioner, { className: "reacd-root reacd-portal-root reacd-menu-positioner", side: side, sideOffset: NAVIGATION_COMPOSITION_POLICY.popupOffsetPx, collisionPadding: NAVIGATION_COMPOSITION_POLICY.collisionPaddingPx, style: variables, dir: direction, children: _jsx(NavigationMenu.Popup, { className: "reacd-menu-popup", children: _jsx(NavigationMenu.Viewport, {}) }) }) })] }));
+}

package/dist/page-anchors/page-anchors.adapter.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from 'react';
+import type { PageAnchorsProps } from '@fastsprout/reacd/adapter-runtime/components/page-anchors/page-anchors.props.js';
+export declare function ShadcnPageAnchors(props: PageAnchorsProps): ReactNode;

package/dist/page-anchors/page-anchors.adapter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PageLinksSurface } from '@fastsprout/reacd/adapter-runtime/renderer/page-links/page-links.renderer.js';
+export function ShadcnPageAnchors(props) {
+    return _jsx(PageLinksSurface, { ...props, kind: "anchors" });
+}

package/dist/page-aside/page-aside.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { PageAsideProps } from '@fastsprout/reacd/adapter-runtime/components/page-aside/page-aside.js';
+export declare function ShadcnPageAside({ children, label, top, bottom }: PageAsideProps): import("react").JSX.Element;

package/dist/page-aside/page-aside.adapter.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWidePage } from '@fastsprout/reacd/adapter-runtime/renderer/page-aside/use-wide-page.js';
+export function ShadcnPageAside({ children, label, top, bottom }) {
+    const wide = useWidePage();
+    return (_jsxs("aside", { className: "reacd-node reacd-page-aside", "aria-label": label, "data-wide": wide, children: [top !== undefined && _jsx("div", { className: "reacd-page-aside-top", children: top }), _jsx("div", { className: "reacd-page-aside-body", children: children }), bottom !== undefined && _jsx("div", { className: "reacd-page-aside-bottom", children: bottom })] }));
+}

package/dist/page-body/page-body.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { PageBodyProps } from '@fastsprout/reacd/adapter-runtime/components/page-body/page-body.js';
+export declare function ShadcnPageBody({ children }: PageBodyProps): import("react").JSX.Element;

package/dist/page-body/page-body.adapter.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ShadcnPageBody({ children }) {
+    return _jsx("div", { className: "reacd-node reacd-page-body", children: children });
+}

package/dist/page-card/page-card.adapter.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from 'react';
+import type { PageCardProps } from '@fastsprout/reacd/adapter-runtime/components/page-card/page-card.props.js';
+export declare function ShadcnPageCard(props: PageCardProps): ReactNode;