@fastsprout/reacd-shadcn 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,111 @@
+import { useContext, useRef, useState } from 'react';
+import { canRequestSelection, multipleSelectionValueSchema, } from '@fastsprout/reacd/adapter-runtime/schema/selection/index.js';
+import { menuTextSchema } from '@fastsprout/reacd/adapter-runtime/schema/form-menu-shared/text.schema.js';
+import { FORM_MENU_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/form-menu-policy.js';
+import { SELECTION_POLICY } from '@fastsprout/reacd/adapter-runtime/core/selection-policy.js';
+import { SELECT_MENU_POLICY, SELECT_MENU_DEFAULTS, } from '@fastsprout/reacd/adapter-runtime/core/select-menu-policy.js';
+import { filterFormMenuItems } from '@fastsprout/reacd/adapter-runtime/core/form-menu-search.js';
+import { PortalActiveContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { useEscapeLayer } from '@fastsprout/reacd/adapter-runtime/renderer/theme/use-escape-layer.js';
+import { requestFormMenuChange } from '../form-menu-shared/request.js';
+export function useSelectMenu(properties) {
+    const [privateOpen, setPrivateOpen] = useState(false);
+    const [privateQuery, setPrivateQuery] = useState('');
+    const [error, setError] = useState();
+    const active = useContext(PortalActiveContext);
+    const composing = useRef(false);
+    const disabled = properties.disabled || !active;
+    const open = !disabled && (properties.open ?? privateOpen);
+    const query = properties.query ?? privateQuery;
+    const selected = properties.mode === 'multiple'
+        ? properties.value
+        : properties.value === SELECTION_POLICY.emptySingleValue
+            ? []
+            : [properties.value];
+    const items = filterFormMenuItems(properties.items, query, properties.visibleValues);
+    const status = properties.status ?? FORM_MENU_DEFAULTS.status;
+    function requestOpen(next) {
+        if (disabled)
+            return false;
+        if (next === open)
+            return true;
+        const onOpenChange = properties.onOpenChange;
+        if (onOpenChange !== undefined) {
+            const result = requestFormMenuChange(() => onOpenChange(next));
+            setError(result.error);
+            return result.accepted;
+        }
+        setPrivateOpen(next);
+        return true;
+    }
+    function requestQuery(next) {
+        if (disabled || properties.queryReadOnly)
+            return false;
+        const parsed = menuTextSchema.safeParse(next);
+        if (!parsed.success) {
+            setError(FORM_MENU_DEFAULTS.invalidText);
+            return false;
+        }
+        if (next === query)
+            return true;
+        const onQueryChange = properties.onQueryChange;
+        if (onQueryChange !== undefined) {
+            const result = requestFormMenuChange(() => onQueryChange(next));
+            setError(result.error);
+            return result.accepted;
+        }
+        setPrivateQuery(next);
+        setError(undefined);
+        return true;
+    }
+    function requestSelection(next) {
+        if (disabled || properties.readOnly)
+            return false;
+        const parsed = multipleSelectionValueSchema(properties.items).safeParse(next);
+        if (!parsed.success ||
+            (properties.mode !== 'multiple' &&
+                parsed.data.length > SELECT_MENU_POLICY.singleSelectionCount) ||
+            !canRequestSelection(selected, parsed.data, properties.items) ||
+            (status !== 'ready' && parsed.data.some((value) => !selected.includes(value))))
+            return false;
+        const values = Object.freeze([
+            ...selected.filter((value) => parsed.data.includes(value)),
+            ...parsed.data.filter((value) => !selected.includes(value)),
+        ]);
+        if (selected.length !== values.length ||
+            selected.some((value, index) => value !== values[index])) {
+            const result = requestFormMenuChange(() => properties.mode === 'multiple'
+                ? properties.onValueChange(values)
+                : properties.onValueChange(values[0] ?? SELECTION_POLICY.emptySingleValue));
+            setError(result.error);
+            if (!result.accepted)
+                return false;
+        }
+        else
+            setError(undefined);
+        return true;
+    }
+    useEscapeLayer(open, () => {
+        requestOpen(false);
+    });
+    return {
+        open,
+        disabled,
+        query,
+        selected,
+        items,
+        status,
+        error: error === SELECT_MENU_DEFAULTS.requiredMessage &&
+            (!properties.required || selected.length !== 0 || disabled)
+            ? undefined
+            : error,
+        isComposing: () => composing.current,
+        setComposing: (next) => {
+            composing.current = next;
+        },
+        requestOpen,
+        requestQuery,
+        requestSelection,
+        invalidRequired: () => setError(SELECT_MENU_DEFAULTS.requiredMessage),
+    };
+}

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

@@ -0,0 +1,2 @@
+import type { SeparatorProps } from '@fastsprout/reacd/adapter-runtime/components/separator/separator.js';
+export declare function SharedSeparator({ label, children, orientation, position, lineStyle, intent, size, decorative, }: SeparatorProps): import("react").JSX.Element;

package/dist/shared/separator/separator.adapter.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SEPARATOR_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/shell-policy.js';
+import { Separator } from '../primitives/separator.js';
+export function SharedSeparator({ label, children, orientation = SEPARATOR_DEFAULTS.orientation, position = SEPARATOR_DEFAULTS.position, lineStyle = SEPARATOR_DEFAULTS.lineStyle, intent = SEPARATOR_DEFAULTS.intent, size = SEPARATOR_DEFAULTS.size, decorative = SEPARATOR_DEFAULTS.decorative, }) {
+    return (_jsxs(Separator, { className: "reacd-node reacd-separator", orientation: orientation, decorative: decorative, "aria-hidden": decorative || undefined, "aria-label": label, "data-position": position, "data-line-style": lineStyle, "data-intent": intent, "data-size": size, children: [_jsx("span", { className: "reacd-separator-line" }), (label !== undefined || children !== undefined) && (_jsx("span", { className: "reacd-separator-content", children: label ?? children })), _jsx("span", { className: "reacd-separator-line" })] }));
+}

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

@@ -0,0 +1,2 @@
+import type { SidebarProps } from '@fastsprout/reacd/adapter-runtime/components/sidebar/sidebar.props.js';
+export declare function SharedSidebar({ title, description, open, onOpenChange, mobileOpen, onMobileOpenChange, side, variant, collapsible, toggleLabel, closeLabel, disabled, children, header, footer, actions, collapsedContent, }: SidebarProps): import("react").JSX.Element;

package/dist/shared/sidebar/sidebar.adapter.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+import { useDirection } from '@base-ui/react/direction-provider';
+import { SIDEBAR_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/sidebar-policy.js';
+import { useNarrowContainer } from '@fastsprout/reacd/adapter-runtime/renderer/responsive/index.js';
+import { SidebarEnvironmentContext } from '@fastsprout/reacd/adapter-runtime/renderer/sidebar/sidebar-environment.js';
+import { ThemeVariablesContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/theme-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 { PortalActiveContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { Button } from '../primitives/button.js';
+export function SharedSidebar({ title, description = SIDEBAR_DEFAULTS.description, open, onOpenChange, mobileOpen, onMobileOpenChange, side = SIDEBAR_DEFAULTS.side, variant = SIDEBAR_DEFAULTS.variant, collapsible = SIDEBAR_DEFAULTS.collapsible, toggleLabel = SIDEBAR_DEFAULTS.toggleLabel, closeLabel = SIDEBAR_DEFAULTS.closeLabel, disabled, children, header, footer, actions, collapsedContent, }) {
+    const reference = useRef(null);
+    const trigger = useRef(null);
+    const id = useId();
+    const [container, setContainer] = useState(null);
+    const attach = useCallback((element) => {
+        reference.current = element;
+        setContainer(element);
+    }, []);
+    const measuredNarrow = useNarrowContainer(reference);
+    const environment = useContext(SidebarEnvironmentContext);
+    const narrow = environment?.narrow ?? measuredNarrow;
+    const direction = useDirection();
+    const variables = useContext(ThemeVariablesContext);
+    const ancestorActive = useContext(PortalActiveContext);
+    const [escapeScope] = useState(createEscapeScope);
+    const restore = useRef(false);
+    const fixed = collapsible === 'none';
+    const mobile = narrow && !fixed;
+    useLayoutEffect(() => {
+        if (!mobile)
+            restore.current = false;
+    }, [mobile]);
+    const expanded = fixed || (mobile ? mobileOpen : open);
+    const active = expanded && ancestorActive;
+    const change = (next) => {
+        if (mobile) {
+            restore.current = true;
+            onMobileOpenChange(next);
+        }
+        else
+            onOpenChange(next);
+    };
+    return (_jsx("div", { ref: attach, className: "reacd-node reacd-sidebar-shell", children: _jsxs(Dialog.Root, { open: active, modal: mobile, disablePointerDismissal: !mobile, onOpenChange: (next, details) => {
+                if (details.reason === 'escape-key' && escapeScope.dismiss()) {
+                    details.event.preventDefault();
+                    details.event.stopImmediatePropagation();
+                    details.cancel();
+                }
+                else if (!fixed)
+                    change(next);
+                else
+                    details.cancel();
+            }, children: [!fixed && environment === null && (_jsx(Button, { ref: trigger, className: "reacd-node reacd-button", variant: "secondary", disabled: disabled, "aria-expanded": expanded, "aria-controls": id, onClick: () => change(!expanded), children: toggleLabel })), !expanded && collapsible === 'icon' && !mobile && (_jsx("aside", { className: "reacd-sidebar-collapsed", "aria-label": title, children: collapsedContent })), container !== null && (_jsxs(Dialog.Portal, { keepMounted: true, container: container, hidden: !active, children: [mobile && _jsx(Dialog.Backdrop, { className: "reacd-shell-backdrop" }), _jsx(Dialog.Popup, { id: id, render: _jsx("aside", {}), role: mobile ? 'dialog' : 'complementary', "aria-modal": mobile || undefined, hidden: !active, initialFocus: mobile, finalFocus: () => {
+                                if (restore.current)
+                                    return environment === null
+                                        ? trigger.current
+                                        : environment.trigger.current;
+                                return false;
+                            }, className: "reacd-root reacd-sidebar", style: variables, "data-mobile": mobile, "data-side": side, "data-direction": direction, "data-variant": variant, children: _jsx(EscapeScopeContext.Provider, { value: escapeScope, children: _jsxs(PortalActiveContext.Provider, { value: active, children: [mobile && (_jsx(Dialog.Close, { disabled: disabled, render: _jsx(Button, { className: "reacd-node reacd-button", variant: "secondary" }), children: closeLabel })), _jsxs("div", { className: "reacd-sidebar-scroll", children: [_jsxs("header", { className: "reacd-sidebar-header", children: [_jsx(Dialog.Title, { children: title }), _jsx(Dialog.Description, { children: description }), header, actions] }), _jsx("div", { className: "reacd-sidebar-content", children: children }), _jsx("footer", { className: "reacd-sidebar-footer", children: footer })] })] }) }) })] }))] }) }));
+}

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

@@ -0,0 +1,2 @@
+import type { SkeletonProps } from '@fastsprout/reacd/adapter-runtime/components/skeleton/skeleton.js';
+export declare function SharedSkeleton({ shape, size, lines, animated, show, label, }: SkeletonProps): import("react").JSX.Element | null;

package/dist/shared/skeleton/skeleton.adapter.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SKELETON_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/skeleton-policy.js';
+export function SharedSkeleton({ shape = SKELETON_DEFAULTS.shape, size = SKELETON_DEFAULTS.size, lines = SKELETON_DEFAULTS.lines, animated = SKELETON_DEFAULTS.animated, show = SKELETON_DEFAULTS.show, label, }) {
+    if (!show)
+        return null;
+    const announced = label !== undefined;
+    return (_jsxs("div", { className: "reacd-node reacd-skeleton", "data-slot": "skeleton", "data-shape": shape, "data-size": size, "data-animated": animated, role: announced ? 'status' : undefined, "aria-label": label, "aria-hidden": announced ? undefined : true, children: [announced && _jsx("span", { className: "reacd-skeleton-label", children: label }), _jsx("div", { className: "reacd-skeleton-visual", "aria-hidden": "true", children: Array.from({ length: shape === 'text' ? lines : 1 }, (_, index) => (_jsx("span", { className: "reacd-skeleton-shape", "data-short": shape === 'text' && lines > 1 && index === lines - 1 }, index))) })] }));
+}

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

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

package/dist/shared/slideover/slideover.adapter.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ControlSurface } from '../primitives/control-surface.js';
+import { Dialog } from '@base-ui/react/dialog';
+import { MODAL_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/modal-policy.js';
+import { PANEL_DEFAULTS, resolvePanelEdge, } from '@fastsprout/reacd/adapter-runtime/core/panel-policy.js';
+import { EscapeScopeContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/escape-context.js';
+import { initialLayerFocus } from '@fastsprout/reacd/adapter-runtime/renderer/theme/initial-layer-focus.js';
+import { PortalActiveContext, PortalHostContext, } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { Button } from '../primitives/button.js';
+import { usePanelFrame } from '../panel/use-panel-frame.js';
+export function SharedSlideover({ title, description, open, onOpenChange, triggerLabel, children, footer, disabled, dismissible, closeLabel = MODAL_DEFAULTS.closeLabel, modal = MODAL_DEFAULTS.modal, overlay = MODAL_DEFAULTS.overlay, fullscreen = MODAL_DEFAULTS.fullscreen, retainContent = MODAL_DEFAULTS.retainContent, placement = PANEL_DEFAULTS.slideover, }) {
+    const { active, change, direction, escapeScope, host, setHost, variables, dismissible: canDismiss, } = usePanelFrame({ open, onOpenChange, dismissible });
+    const edge = resolvePanelEdge(placement, direction);
+    return (_jsxs(Dialog.Root, { open: active, modal: modal, onOpenChange: change, disablePointerDismissal: !canDismiss, children: [triggerLabel !== undefined && (_jsx(Dialog.Trigger, { disabled: disabled, render: _jsx(Button, { className: "reacd-node reacd-button" }), children: triggerLabel })), _jsxs(Dialog.Portal, { keepMounted: retainContent, hidden: !active, className: "reacd-root reacd-portal-root reacd-edge-portal", style: variables, dir: direction, children: [modal && overlay && _jsx(Dialog.Backdrop, { className: "reacd-modal-backdrop" }), _jsx(Dialog.Viewport, { className: "reacd-edge-viewport", "data-modal": modal, children: _jsx(Dialog.Popup, { render: _jsx(ControlSurface, {}), ref: setHost, initialFocus: (interaction) => initialLayerFocus(host, interaction), className: "reacd-edge-panel", "data-edge": edge, "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, { variant: "secondary", className: "reacd-node reacd-button" }), children: closeLabel })] })] }) }) }) }) })] })] }));
+}

package/dist/shared/slider/request-change.d.ts

@@ -0,0 +1,2 @@
+import type { SliderProps } from '@fastsprout/reacd/adapter-runtime/components/slider/index.js';
+export declare function requestSliderChange(properties: SliderProps, candidate: unknown, disabled: boolean, active: boolean, cancel: () => void): void;

package/dist/shared/slider/request-change.js

@@ -0,0 +1,34 @@
+import { z } from 'zod';
+import { sliderNumberSchema, sliderRangeSchema, } from '@fastsprout/reacd/adapter-runtime/schema/slider/value.schema.js';
+const endpointsSchema = z.tuple([z.number().finite(), z.number().finite()]);
+export function requestSliderChange(properties, candidate, disabled, active, cancel) {
+    if (disabled || properties.readOnly || !active) {
+        cancel();
+        return;
+    }
+    const bounds = { min: properties.min, max: properties.max };
+    if (properties.mode === 'range') {
+        const endpoints = endpointsSchema.safeParse(candidate);
+        if (!endpoints.success) {
+            cancel();
+            return;
+        }
+        const value = sliderRangeSchema(bounds).safeParse({
+            start: endpoints.data[0],
+            end: endpoints.data[1],
+        });
+        if (!value.success) {
+            cancel();
+            return;
+        }
+        properties.onValueChange(value.data);
+    }
+    else {
+        const value = sliderNumberSchema(bounds).safeParse(candidate);
+        if (!value.success) {
+            cancel();
+            return;
+        }
+        properties.onValueChange(value.data);
+    }
+}

package/dist/shared/slider/slider-thumb.d.ts

@@ -0,0 +1,7 @@
+export declare function SliderThumb({ index, label, description, readOnly, invalid, }: {
+    readonly index: number;
+    readonly label: string;
+    readonly description: string | undefined;
+    readonly readOnly: boolean;
+    readonly invalid: boolean;
+}): import("react").JSX.Element;

package/dist/shared/slider/slider-thumb.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ControlPart } from '../primitives/control-part.js';
+import { useCallback } from 'react';
+import { Slider } from '@base-ui/react/slider';
+export function SliderThumb({ index, label, description, readOnly, invalid, }) {
+    const input = useCallback((element) => {
+        if (element === null)
+            return;
+        if (readOnly)
+            element.setAttribute('aria-readonly', 'true');
+        else
+            element.removeAttribute('aria-readonly');
+        if (invalid)
+            element.setAttribute('aria-invalid', 'true');
+        else
+            element.removeAttribute('aria-invalid');
+    }, [readOnly, invalid]);
+    return (_jsx(Slider.Thumb, { render: _jsx(ControlPart, { part: "thumb" }), index: index, "aria-label": label, "aria-describedby": description, inputRef: input, className: "reacd-range-thumb" }));
+}

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

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

package/dist/shared/slider/slider.adapter.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ControlPart } from '../primitives/control-part.js';
+import { useContext, useId } from 'react';
+import { Slider } from '@base-ui/react/slider';
+import { DirectionProvider } from '@base-ui/react/direction-provider';
+import { useDirection } from '@radix-ui/react-direction';
+import { SLIDER_POLICY } from '@fastsprout/reacd/adapter-runtime/core/slider-policy.js';
+import { PortalActiveContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { requestSliderChange } from './request-change.js';
+import { SliderThumb } from './slider-thumb.js';
+export function SharedSlider(properties) {
+    const id = useId();
+    const active = useContext(PortalActiveContext);
+    const direction = useDirection();
+    const metadata = useFieldMetadata(properties, properties.description ? [`${id}-description`] : []);
+    const range = properties.mode === 'range';
+    const value = range
+        ? [properties.value.start, properties.value.end]
+        : properties.value;
+    const names = properties.mode === 'range'
+        ? [
+            { suffix: SLIDER_POLICY.startSuffix, value: properties.value.start },
+            { suffix: SLIDER_POLICY.endSuffix, value: properties.value.end },
+        ]
+        : [{ suffix: '', value: properties.value }];
+    const display = names.map((entry) => entry.value).join(SLIDER_POLICY.rangeSeparator);
+    const step = properties.step ?? SLIDER_POLICY.defaultStep;
+    const description = metadata.descriptionIds.join(' ') || undefined;
+    return (_jsx(DirectionProvider, { direction: direction, children: _jsxs("div", { className: "reacd-node reacd-field reacd-range", children: [_jsxs("span", { id: `${id}-label`, children: [properties.label, ": ", display] }), properties.description && (_jsx("p", { id: `${id}-description`, children: properties.description })), _jsx(Slider.Root, { render: _jsx(ControlPart, { part: "root" }), value: value, min: properties.min, max: properties.max, step: step, largeStep: Math.min(step * SLIDER_POLICY.largeStepFactor, properties.max - properties.min), orientation: properties.orientation ?? SLIDER_POLICY.defaultOrientation, disabled: metadata.disabled, locale: SLIDER_POLICY.locale, thumbCollisionBehavior: "none", thumbAlignment: "edge", className: "reacd-range-root", "aria-labelledby": `${id}-label`, style: {
+                        blockSize: properties.orientation === 'vertical'
+                            ? `${SLIDER_POLICY.verticalExtentRem}rem`
+                            : undefined,
+                    }, onValueChange: (candidate, details) => requestSliderChange(properties, candidate, metadata.disabled, active, () => details.cancel()), children: _jsx(Slider.Control, { render: _jsx(ControlPart, { part: "control" }), className: "reacd-range-control", children: _jsxs(Slider.Track, { render: _jsx(ControlPart, { part: "track" }), className: "reacd-range-track", children: [_jsx(Slider.Indicator, { render: _jsx(ControlPart, { part: "indicator" }), className: "reacd-range-indicator" }), _jsx(SliderThumb, { index: 0, label: range
+                                        ? `${SLIDER_POLICY.minimumLabel} ${properties.label}`
+                                        : properties.label, description: description, readOnly: Boolean(properties.readOnly), invalid: Boolean(metadata.error) }), range && (_jsx(SliderThumb, { index: 1, label: `${SLIDER_POLICY.maximumLabel} ${properties.label}`, description: description, readOnly: Boolean(properties.readOnly), invalid: Boolean(metadata.error) }))] }) }) }), names.map((entry) => (_jsx("input", { type: "hidden", name: metadata.name === undefined ? undefined : metadata.name + entry.suffix, value: entry.value, disabled: metadata.disabled }, entry.suffix)))] }) }));
+}

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

@@ -0,0 +1,3 @@
+import type { z } from 'zod';
+import type { splitterSchema } from '@fastsprout/reacd/adapter-runtime/schema/splitter/splitter.schema.js';
+export declare function SharedSplitter({ label, panels, value, onValueChange, orientation, disabled, }: z.output<typeof splitterSchema>): import("react").JSX.Element;

package/dist/shared/splitter/splitter.adapter.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useId, useRef } from 'react';
+import { useDirection } from '@base-ui/react/direction-provider';
+import { SPLITTER_DEFAULTS, SPLITTER_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/splitter-policy.js';
+import { pairBounds } from '@fastsprout/reacd/adapter-runtime/core/splitter.js';
+import { useSplitterReflow } from '@fastsprout/reacd/adapter-runtime/renderer/splitter/use-splitter-reflow.js';
+import { useSplitterDrag } from '@fastsprout/reacd/adapter-runtime/renderer/splitter/use-splitter-drag.js';
+import { splitterKey } from '@fastsprout/reacd/adapter-runtime/renderer/splitter/splitter-key.js';
+export function SharedSplitter({ label, panels, value, onValueChange, orientation = SPLITTER_DEFAULTS.orientation, disabled = SPLITTER_DEFAULTS.disabled, }) {
+    const reference = useRef(null);
+    const track = useRef(null);
+    const id = useId();
+    const expanded = useRef(new Map());
+    const direction = useDirection();
+    const narrow = useSplitterReflow(reference, track, panels.length);
+    const reflow = orientation === 'horizontal' && narrow;
+    const inert = disabled || reflow;
+    const drag = useSplitterDrag({
+        reference,
+        panels,
+        value,
+        orientation,
+        direction,
+        onValueChange,
+        disabled: inert,
+    });
+    return (_jsxs("div", { ref: reference, role: "group", "aria-label": label, className: "reacd-node reacd-splitter", "data-orientation": orientation, "data-reflow": reflow, "data-dragging": drag.dragging, "data-direction": direction, children: [_jsx("span", { ref: track, "aria-hidden": "true", className: "reacd-splitter-track" }), panels.map((panel, index) => {
+                const current = value[index];
+                const next = panels[index + 1];
+                const bounds = pairBounds(panels, value, index);
+                return (_jsxs(Fragment, { children: [_jsx("section", { id: `${id}-${panel.id}`, "aria-label": panel.label, hidden: current?.share === SPLITTER_POLICY.zero, className: "reacd-splitter-panel", style: { flexGrow: current?.share }, children: panel.content }), next && bounds && current && (_jsx("div", { role: "separator", "aria-label": panel.label, "aria-controls": `${id}-${panel.id} ${id}-${next.id}`, "aria-orientation": orientation === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuemin": panel.collapsedShare ?? bounds.min, "aria-valuemax": bounds.max, "aria-valuenow": current.share, "aria-disabled": inert, tabIndex: inert ? -1 : 0, className: "reacd-splitter-handle", hidden: reflow, onKeyDown: (event) => {
+                                if (inert)
+                                    return;
+                                const result = splitterKey({
+                                    key: event.key,
+                                    shift: event.shiftKey,
+                                    index,
+                                    panels,
+                                    value,
+                                    orientation,
+                                    direction,
+                                    expanded: expanded.current,
+                                });
+                                if (result) {
+                                    event.preventDefault();
+                                    onValueChange(result);
+                                }
+                            }, onPointerDown: (event) => drag.start(event, index), onPointerMove: drag.move, onPointerUp: drag.finish, onPointerCancel: drag.cancel, onLostPointerCapture: drag.cancel, onBlur: drag.cancel }))] }, panel.id));
+            })] }));
+}

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

@@ -0,0 +1,2 @@
+import type { StepperProps } from '@fastsprout/reacd/adapter-runtime/components/stepper/index.js';
+export declare function SharedStepper({ label, items, value, onValueChange, disabled, linear, orientation, }: StepperProps): import("react").JSX.Element;

package/dist/shared/stepper/stepper.adapter.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { useDirection } from '@radix-ui/react-direction';
+import { NAVIGATION_COMPOSITION_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/navigation-composition-policy.js';
+import { reachableStepKeys, stepFocusTarget, } from '@fastsprout/reacd/adapter-runtime/core/stepper-navigation.js';
+import { Button } from '../primitives/button.js';
+export function SharedStepper({ label, items, value, onValueChange, disabled, linear = NAVIGATION_COMPOSITION_DEFAULTS.linear, orientation = NAVIGATION_COMPOSITION_DEFAULTS.orientation, }) {
+    const id = useId();
+    const direction = useDirection();
+    const targets = useRef(new Map());
+    const [focused, setFocused] = useState(value);
+    const reachable = reachableStepKeys(items, value, linear);
+    const focusKey = reachable.includes(focused) ? focused : value;
+    const active = items.findIndex((item) => item.key === value);
+    return (_jsxs("section", { className: "reacd-node reacd-stepper", "aria-label": label, "data-orientation": orientation, children: [_jsx("ol", { className: "reacd-stepper-list", children: items.map((item, index) => (_jsx("li", { "data-complete": index < active, children: _jsxs(Button, { type: "button", variant: item.key === value ? 'secondary' : 'ghost', className: "reacd-node reacd-button reacd-step-trigger", id: `${id}-step-${index}`, "aria-current": item.key === value ? 'step' : undefined, "aria-controls": `${id}-content`, disabled: disabled || !reachable.includes(item.key), tabIndex: !disabled && item.key === focusKey ? 0 : -1, ref: (element) => {
+                            if (element === null)
+                                targets.current.delete(item.key);
+                            else
+                                targets.current.set(item.key, element);
+                        }, onFocus: () => setFocused(item.key), onClick: () => {
+                            if (item.key !== value)
+                                onValueChange(item.key);
+                        }, onKeyDown: (event) => {
+                            const key = stepFocusTarget(reachable, item.key, event.key, orientation, direction);
+                            if (key !== undefined) {
+                                event.preventDefault();
+                                targets.current.get(key)?.focus();
+                            }
+                        }, children: [_jsx("span", { className: "reacd-step-indicator", "aria-hidden": "true", children: index + 1 }), _jsxs("span", { className: "reacd-step-copy", children: [_jsx("span", { children: item.title }), item.description !== undefined && (_jsx("span", { className: "reacd-step-description", children: item.description }))] })] }) }, item.key))) }), _jsx("div", { className: "reacd-step-content", role: "region", id: `${id}-content`, "aria-labelledby": `${id}-step-${active}`, children: items[active]?.content })] }));
+}

package/dist/shared/submit-button/submit-button.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { SubmitButtonProps } from '@fastsprout/reacd/adapter-runtime/components/submit-button/index.js';
+export declare function SharedSubmitButton({ label, intent, disabled }: SubmitButtonProps): import("react").JSX.Element;

package/dist/shared/submit-button/submit-button.adapter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/policy.js';
+import { Button } from '../primitives/button.js';
+const VARIANTS = {
+    primary: 'default',
+    secondary: 'secondary',
+    danger: 'destructive',
+};
+export function SharedSubmitButton({ label, intent, disabled }) {
+    return (_jsx(Button, { className: "reacd-node reacd-button", type: "submit", "data-intent": intent ?? DEFAULTS.buttonIntent, disabled: disabled, variant: VARIANTS[intent ?? DEFAULTS.buttonIntent], children: label }));
+}

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

@@ -0,0 +1,2 @@
+import type { SwitchProps } from '@fastsprout/reacd/adapter-runtime/components/switch/switch.props.js';
+export declare function SharedSwitch({ label, description, checked, onCheckedChange, name, value, required, disabled, readOnly, loading, }: SwitchProps): import("react").JSX.Element;

package/dist/shared/switch/switch.adapter.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { SWITCH_POLICY } from '@fastsprout/reacd/adapter-runtime/core/switch-policy.js';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { Switch } from '../primitives/switch.js';
+import { Label } from '../primitives/label.js';
+export function SharedSwitch({ label, description, checked, onCheckedChange, name, value, required, disabled, readOnly, loading, }) {
+    const id = useId();
+    const control = useRef(null);
+    const [attempted, setAttempted] = useState(false);
+    const metadata = useFieldMetadata({ name, required, disabled }, description ? [`${id}-description`] : []);
+    const localError = attempted && metadata.required && !checked ? SWITCH_POLICY.requiredMessage : '';
+    const feedback = metadata.error || localError;
+    const descriptions = [
+        ...metadata.descriptionIds,
+        ...(localError && !metadata.error ? [`${id}-error`] : []),
+    ];
+    return (_jsxs("div", { className: "reacd-node reacd-field reacd-switch", children: [_jsxs("div", { className: "reacd-check reacd-toggle", children: [_jsx(Switch, { ref: control, id: id, checked: checked, disabled: metadata.disabled, "aria-readonly": readOnly || undefined, "aria-required": metadata.required || undefined, "aria-busy": loading || undefined, "aria-invalid": Boolean(feedback) || undefined, "aria-describedby": descriptions.join(' ') || undefined, onCheckedChange: (next) => {
+                            if (!metadata.disabled && !readOnly && !loading)
+                                onCheckedChange(next);
+                        } }), _jsx(Label, { htmlFor: id, children: label })] }), description && _jsx("p", { id: `${id}-description`, children: description }), loading && (_jsxs("p", { role: "status", children: [SWITCH_POLICY.loadingPrefix, " ", label] })), localError && !metadata.error && (_jsx("p", { id: `${id}-error`, role: "alert", className: "reacd-field-error", children: localError })), _jsx("input", { type: "hidden", name: metadata.name, value: value ?? SWITCH_POLICY.submittedValue, disabled: metadata.disabled || !checked }), _jsx("input", { type: "text", hidden: true, defaultValue: "", required: metadata.required && !checked, disabled: metadata.disabled, onInvalid: (event) => {
+                    event.preventDefault();
+                    setAttempted(true);
+                    control.current?.focus();
+                } })] }));
+}

package/dist/shared/table/interactive-table.d.ts

@@ -0,0 +1,2 @@
+import type { InteractiveTableProps } from '@fastsprout/reacd/adapter-runtime/components/table/index.js';
+export declare function SharedInteractiveTable({ caption, model, onModelChange, editable, readOnly, disabled, state, emptyMessage, errorMessage, }: InteractiveTableProps): import("react").JSX.Element;

package/dist/shared/table/interactive-table.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TABLE_EDITABLE } from '@fastsprout/reacd/adapter-runtime/core/table-policy.js';
+import { queryTable } from '@fastsprout/reacd/adapter-runtime/schema/data-table/query.js';
+import { transitionTableModel } from '@fastsprout/reacd/adapter-runtime/schema/table/transition.js';
+import { SharedDataTable } from '../data-table/data-table.adapter.js';
+export function SharedInteractiveTable({ caption, model, onModelChange, editable = TABLE_EDITABLE, readOnly, disabled, state, emptyMessage, errorMessage, }) {
+    const capabilities = onModelChange === undefined || readOnly || disabled
+        ? {}
+        : {
+            onSelectionChange: editable.selection
+                ? (value) => onModelChange(transitionTableModel(model, 'selection', value))
+                : undefined,
+            onSortingChange: editable.sorting
+                ? (value) => onModelChange(transitionTableModel(model, 'sorting', value))
+                : undefined,
+            onFiltersChange: editable.filters
+                ? (value) => onModelChange(transitionTableModel(model, 'filters', value))
+                : undefined,
+            onPaginationChange: editable.pagination
+                ? (value) => onModelChange(transitionTableModel(model, 'pagination', value))
+                : undefined,
+        };
+    return (_jsx(SharedDataTable, { ...model, ...queryTable(model), ...capabilities, caption: caption, state: state, emptyMessage: emptyMessage, errorMessage: errorMessage }));
+}

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

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

package/dist/shared/table/table.adapter.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TABLE_DEFAULTS as D } from '@fastsprout/reacd/adapter-runtime/core/table-policy.js';
+import { TableSurface } from '@fastsprout/reacd/adapter-runtime/renderer/table/table.renderer.js';
+import { SharedInteractiveTable } from './interactive-table.js';
+import { Button } from '../primitives/button.js';
+export function SharedTable(props) {
+    if (props.state === 'loading')
+        return _jsx("p", { role: "status", children: props.loadingMessage ?? D.loadingMessage });
+    if (props.state === 'error') {
+        const retry = props.onRetry;
+        return (_jsxs("div", { className: "reacd-vstack", children: [_jsx("p", { role: "alert", children: props.errorMessage ?? D.errorMessage }), retry === undefined ? null : (_jsx(Button, { type: "button", className: "reacd-button", onClick: () => retry(), children: props.retryLabel ?? D.retryLabel }))] }));
+    }
+    return props.mode === 'interactive' ? (_jsx(SharedInteractiveTable, { ...props })) : (_jsx(TableSurface, { ...props }));
+}

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

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

package/dist/shared/tabs/tabs.adapter.js

@@ -0,0 +1,17 @@
+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 { TABS_POLICY } from '@fastsprout/reacd/adapter-runtime/core/tabs-policy.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../primitives/tabs.js';
+export function SharedTabs({ children, label, value, items, onValueChange, orientation = TABS_POLICY.orientation, activationMode = TABS_POLICY.activationMode, }) {
+    const sharedPanelId = useId();
+    const active = useContext(PortalActiveContext);
+    const explicit = items.some((item) => item.value === value && item.content !== undefined);
+    const selectedIndex = items.findIndex((item) => item.value === value);
+    return (_jsxs(Tabs, { className: "reacd-node reacd-tabs", value: value, onValueChange: onValueChange, orientation: orientation, activationMode: activationMode, children: [_jsx(TabsList, { "aria-label": label, children: items.map((item, index) => (_jsx(TabsTrigger, { value: item.value, disabled: item.disabled, ...(item.content === undefined
+                        ? {
+                            id: `${sharedPanelId}-${index}`,
+                            'aria-controls': sharedPanelId,
+                        }
+                        : {}), children: item.label }, item.value))) }), items.map((item) => item.content === undefined ? null : (_jsx(TabsContent, { value: item.value, forceMount: true, hidden: item.value !== value, children: _jsx(PortalActiveContext, { value: active && item.value === value, children: item.content }) }, item.value))), _jsx("div", { role: "tabpanel", id: sharedPanelId, tabIndex: 0, hidden: explicit, "aria-labelledby": explicit ? undefined : `${sharedPanelId}-${selectedIndex}`, children: _jsx(PortalActiveContext, { value: active && !explicit, children: children }) })] }));
+}

package/dist/shared/temporal/draft-validity.d.ts

@@ -0,0 +1,13 @@
+interface TemporalDraftValidityProps {
+    readonly segments: readonly {
+        readonly isEditable: boolean;
+        readonly isPlaceholder: boolean;
+    }[];
+    readonly required?: boolean | undefined;
+    readonly value: string | null;
+    readonly disabled?: boolean | undefined;
+    readonly root: HTMLElement | null;
+    readonly onInvalidChange: (invalid: boolean) => void;
+}
+export declare function TemporalDraftValidity({ segments, required, value, disabled, root, onInvalidChange, }: TemporalDraftValidityProps): import("react").JSX.Element;
+export {};

package/dist/shared/temporal/draft-validity.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { DATE_TIME_POLICY } from '@fastsprout/reacd/adapter-runtime/core/date-time-policy.js';
+import { focusIncompleteSegment } from './focus-incomplete-segment.js';
+export function TemporalDraftValidity({ segments, required, value, disabled, root, onInvalidChange, }) {
+    const missing = segments.some((segment) => segment.isEditable && segment.isPlaceholder);
+    const filled = segments.some((segment) => segment.isEditable && !segment.isPlaceholder);
+    const partial = missing && filled;
+    useEffect(() => {
+        if (!missing || (!filled && !required && value === null))
+            onInvalidChange(false);
+    }, [missing, filled, required, value, onInvalidChange]);
+    return (_jsx("input", { type: "text", hidden: true, required: required || partial || value !== null, disabled: disabled, value: missing ? '' : DATE_TIME_POLICY.completeDraftValue, onChange: () => undefined, onInvalid: (event) => {
+            event.preventDefault();
+            onInvalidChange(true);
+            focusIncompleteSegment(root);
+        } }));
+}

package/dist/shared/temporal/focus-incomplete-segment.d.ts

@@ -0,0 +1 @@
+export declare function focusIncompleteSegment(root: HTMLElement | null): boolean;

package/dist/shared/temporal/focus-incomplete-segment.js

@@ -0,0 +1,7 @@
+export function focusIncompleteSegment(root) {
+    const segment = root?.querySelector('[data-placeholder]:is([role="spinbutton"],[role="textbox"])');
+    if (segment === undefined || segment === null)
+        return false;
+    segment.focus();
+    return true;
+}