@fastsprout/reacd-shadcn 0.2.0 → 0.3.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/shared/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 '../primitives/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 SharedListbox(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/shared/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 SharedLocaleSelect({ label, value, locales, onValueChange, name, required, description, disabled, readOnly, }: LocaleSelectProps): import("react").JSX.Element;

package/dist/shared/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 '../primitives/select.js';
+import { Label } from '../primitives/label.js';
+import { SharedSelectContent } from '../select/select-content.adapter.js';
+export function SharedLocaleSelect({ 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(SharedSelectContent, { 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/shared/main/main.adapter.d.ts

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

package/dist/shared/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 SharedMain({ 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/shared/marquee/marquee.adapter.d.ts

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

package/dist/shared/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 '../primitives/button.js';
+export function SharedMarquee({ 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/shared/modal/modal.adapter.d.ts

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

package/dist/shared/modal/modal.adapter.js

@@ -0,0 +1,31 @@
+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 { 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 '../primitives/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 SharedModal({ 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, { render: _jsx(ControlSurface, {}), 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/shared/navigation/navigation.adapter.d.ts

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

package/dist/shared/navigation/navigation.adapter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../primitives/button.js';
+export function SharedNavigation({ 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/shared/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 '../primitives/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/shared/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 SharedNavigationMenu({ label, items, orientation, }: NavigationMenuProps): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ControlSurface } from '../primitives/control-surface.js';
+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 '../primitives/button.js';
+import { MenuTarget } from './menu-target.js';
+export function SharedNavigationMenu({ 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, { render: _jsx(ControlSurface, {}), className: "reacd-menu-popup", children: _jsx(NavigationMenu.Viewport, {}) }) }) })] }));
+}

package/dist/shared/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 SharedPageAnchors(props: PageAnchorsProps): ReactNode;

package/dist/shared/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 SharedPageAnchors(props) {
+    return _jsx(PageLinksSurface, { ...props, kind: "anchors" });
+}

package/dist/shared/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 SharedPageAside({ children, label, top, bottom }: PageAsideProps): import("react").JSX.Element;

package/dist/shared/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 SharedPageAside({ 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/shared/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 SharedPageBody({ children }: PageBodyProps): import("react").JSX.Element;

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

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

package/dist/shared/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 SharedPageCard(props: PageCardProps): ReactNode;

package/dist/shared/page-card/page-card.adapter.js

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

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from 'react';
+export function SharedPageColumns({ children }) {
+    return (_jsx("div", { className: "reacd-node reacd-page-columns", children: Children.map(Children.toArray(children), (child) => (_jsx("div", { className: "reacd-page-column-item", children: child }))) }));
+}

package/dist/shared/page-cta/page-cta.adapter.d.ts

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

package/dist/shared/page-cta/page-cta.adapter.js

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

package/dist/shared/page-feature/page-feature.adapter.d.ts

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

package/dist/shared/page-feature/page-feature.adapter.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PageIntroduction } from '@fastsprout/reacd/adapter-runtime/renderer/page-introduction/page-introduction.js';
+import { PAGE_PRESENTATION_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/page-presentation-policy.js';
+export function SharedPageFeature(props) {
+    return (_jsx(PageIntroduction, { ...props, kind: "feature", orientation: props.orientation ?? PAGE_PRESENTATION_DEFAULTS.featureOrientation }));
+}

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

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

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

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

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

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

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

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

package/dist/shared/page-hero/page-hero.adapter.d.ts

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

package/dist/shared/page-hero/page-hero.adapter.js

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

package/dist/shared/page-links/page-links.adapter.d.ts

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

package/dist/shared/page-links/page-links.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 SharedPageLinks(props) {
+    return _jsx(PageLinksSurface, { ...props, kind: "links" });
+}

package/dist/shared/page-list/page-list.adapter.d.ts

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

package/dist/shared/page-list/page-list.adapter.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from 'react';
+import { PAGE_COMPOSITION_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/page-composition-policy.js';
+export function SharedPageList({ children, divide = PAGE_COMPOSITION_DEFAULTS.divide, }) {
+    return (_jsx("ul", { className: "reacd-node reacd-page-list", role: "list", "data-divide": divide, children: Children.map(Children.toArray(children), (child) => (_jsx("li", { className: "reacd-page-list-item", children: child }))) }));
+}

package/dist/shared/page-logos/page-logos.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { PageLogosProps } from '@fastsprout/reacd/adapter-runtime/components/page-logos/page-logos.props.js';
+export declare function SharedPageLogos({ label, title, items, emptyLabel, }: PageLogosProps): import("react").JSX.Element;

package/dist/shared/page-logos/page-logos.adapter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useId } from 'react';
+import { MEDIA_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/media-policy.js';
+import { HeadingLevelContext } from '@fastsprout/reacd/adapter-runtime/renderer/heading/heading-context.js';
+import { PageHeading } from '@fastsprout/reacd/adapter-runtime/renderer/page-introduction/page-heading.js';
+import { SafeImage } from '@fastsprout/reacd/adapter-runtime/renderer/media/safe-image.js';
+export function SharedPageLogos({ label, title, items, emptyLabel = MEDIA_DEFAULTS.emptyLogos, }) {
+    const level = useContext(HeadingLevelContext);
+    const id = useId();
+    return (_jsxs("section", { className: "reacd-node reacd-page-logos", "aria-label": label, children: [_jsx(HeadingLevelContext.Provider, { value: level, children: _jsx(PageHeading, { title: title, id: id }) }), items.length === 0 ? (_jsx("p", { children: emptyLabel })) : (_jsx("ul", { className: "reacd-logo-list", children: items.map((item) => (_jsx("li", { children: _jsx(SafeImage, { src: item.src, alt: item.alt, presentation: "logo" }) }, item.key))) }))] }));
+}

package/dist/shared/page-section/page-section.adapter.d.ts

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

package/dist/shared/page-section/page-section.adapter.js

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