@fastsprout/reacd-shadcn 0.0.0-stage → 0.2.0

package/dist/temporal/use-temporal-change.d.ts

@@ -0,0 +1,10 @@
+import type { TemporalRecovery } from './temporal-recovery.js';
+interface TemporalProtection {
+    readonly disabled?: boolean | undefined;
+    readonly readOnly?: boolean | undefined;
+}
+export declare function useTemporalChange<Value>(validate: (value: Value) => boolean, onValueChange: (value: Value) => void, message: string, protection: TemporalProtection, recovery?: TemporalRecovery<Value>): {
+    error: string | undefined;
+    change: (value: Value) => void;
+};
+export {};

package/dist/temporal/use-temporal-change.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+export function useTemporalChange(validate, onValueChange, message, protection, recovery) {
+    const [failure, setFailure] = useState();
+    const recovered = failure !== undefined &&
+        recovery !== undefined &&
+        failure.basis !== recovery.key &&
+        validate(recovery.value);
+    if (recovered)
+        setFailure(undefined);
+    function change(value) {
+        if (protection.disabled || protection.readOnly)
+            return;
+        if (!validate(value)) {
+            setFailure({ message, basis: recovery?.key });
+            return;
+        }
+        setFailure(undefined);
+        onValueChange(value);
+    }
+    return { error: recovered ? undefined : failure?.message, change };
+}

package/dist/text/text.adapter.d.ts

@@ -0,0 +1 @@
+export { TextSurface as ShadcnText } from '@fastsprout/reacd/adapter-runtime/renderer/text/text.renderer.js';

package/dist/text/text.adapter.js

@@ -0,0 +1 @@
+export { TextSurface as ShadcnText } from '@fastsprout/reacd/adapter-runtime/renderer/text/text.renderer.js';

package/dist/text-area/text-area.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { TextAreaProps } from '@fastsprout/reacd/adapter-runtime/components/text-area/text-area.js';
+export declare function ShadcnTextArea({ label, value, onValueChange, rows, ...properties }: TextAreaProps): import("react").JSX.Element;

package/dist/text-area/text-area.adapter.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { CONTENT_POLICY } from '@fastsprout/reacd/adapter-runtime/core/policy.js';
+import { Textarea } from '../vendor/ui/textarea.js';
+import { Label } from '../vendor/ui/label.js';
+export function ShadcnTextArea({ label, value, onValueChange, rows, ...properties }) {
+    const id = useId();
+    return (_jsxs("div", { className: "reacd-node reacd-field", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Textarea, { ...properties, id: id, value: value, rows: rows ?? CONTENT_POLICY.defaultTextAreaRows, maxLength: CONTENT_POLICY.maxTextLength, onChange: (event) => onValueChange(event.target.value) })] }));
+}

package/dist/textarea/textarea.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { TextareaProps } from '@fastsprout/reacd/adapter-runtime/components/textarea/textarea.props.js';
+export declare function ShadcnTextarea({ label, value, onValueChange, description, name, required, disabled, readOnly, minLength, maxLength, rows, autoResize, maxRows, placeholder, }: TextareaProps): import("react").JSX.Element;

package/dist/textarea/textarea.adapter.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { TEXTAREA_POLICY } from '@fastsprout/reacd/adapter-runtime/core/textarea-policy.js';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { Textarea } from '../vendor/ui/textarea.js';
+import { Label } from '../vendor/ui/label.js';
+import { useAutoRows } from './use-auto-rows.js';
+export function ShadcnTextarea({ label, value, onValueChange, description, name, required, disabled, readOnly, minLength, maxLength, rows, autoResize, maxRows, placeholder, }) {
+    const id = useId();
+    const control = useRef(null);
+    const [attempted, setAttempted] = useState(false);
+    const metadata = useFieldMetadata({ name, required, disabled }, description ? [`${id}-description`] : []);
+    const minimum = minLength ?? TEXTAREA_POLICY.minimumLength;
+    const maximum = maxLength ?? TEXTAREA_POLICY.maximumLength;
+    const baseRows = rows ?? TEXTAREA_POLICY.defaultRows;
+    useAutoRows(control, autoResize, value, baseRows, maxRows ?? TEXTAREA_POLICY.defaultMaxRows);
+    const localError = metadata.required && value.length === 0
+        ? TEXTAREA_POLICY.requiredMessage
+        : value.length > 0 && value.length < minimum
+            ? `${TEXTAREA_POLICY.minimumMessagePrefix} ${minimum} ` +
+                TEXTAREA_POLICY.minimumMessageSuffix
+            : '';
+    const visibleError = attempted ? localError : '';
+    const feedback = metadata.error || visibleError;
+    const descriptions = [
+        ...metadata.descriptionIds,
+        ...(visibleError && !metadata.error ? [`${id}-error`] : []),
+    ];
+    function invalid(event) {
+        event.preventDefault();
+        setAttempted(true);
+        control.current?.focus();
+    }
+    return (_jsxs("div", { className: "reacd-node reacd-field reacd-textarea", "data-auto-resize": autoResize || undefined, children: [_jsx(Label, { htmlFor: id, children: label }), description && _jsx("p", { id: `${id}-description`, children: description }), _jsx(Textarea, { ref: control, id: id, value: value, name: metadata.name, placeholder: placeholder, required: metadata.required, disabled: metadata.disabled, readOnly: readOnly, minLength: minimum, maxLength: maximum, rows: baseRows, "aria-invalid": Boolean(feedback) || undefined, "aria-describedby": descriptions.join(' ') || undefined, onInvalid: invalid, onChange: (event) => {
+                    const next = event.target.value;
+                    if (!metadata.disabled && !readOnly && next.length <= maximum) {
+                        onValueChange(next);
+                    }
+                } }), visibleError && !metadata.error && (_jsx("p", { id: `${id}-error`, role: "alert", className: "reacd-field-error", children: visibleError })), _jsx("input", { type: "text", hidden: true, defaultValue: "", required: Boolean(localError), disabled: metadata.disabled, onInvalid: invalid })] }));
+}

package/dist/textarea/use-auto-rows.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare function useAutoRows(ref: RefObject<HTMLTextAreaElement | null>, enabled: boolean | undefined, value: string, rows: number, maxRows: number): void;

package/dist/textarea/use-auto-rows.js

@@ -0,0 +1,33 @@
+import { useLayoutEffect } from 'react';
+import { TEXTAREA_POLICY } from '@fastsprout/reacd/adapter-runtime/core/textarea-policy.js';
+function positive(value, fallback) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+export function useAutoRows(ref, enabled, value, rows, maxRows) {
+    useLayoutEffect(() => {
+        const control = ref.current;
+        if (!enabled || control === null)
+            return;
+        const measure = () => {
+            control.rows = rows;
+            const style = window.getComputedStyle(control);
+            const fontSize = positive(style.fontSize, TEXTAREA_POLICY.fallbackFontSizePx);
+            const lineHeight = positive(style.lineHeight, fontSize * TEXTAREA_POLICY.fallbackLineHeightRatio);
+            const padding = positive(style.paddingTop, 0) + positive(style.paddingBottom, 0);
+            // scrollHeight rounds to integer pixels; plain textarea lines are discrete.
+            const measured = Math.round((control.scrollHeight - padding) / lineHeight);
+            control.rows = Math.max(rows, Math.min(maxRows, measured));
+        };
+        measure();
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
+        observer?.observe(control);
+        window.addEventListener('resize', measure);
+        document.fonts?.addEventListener('loadingdone', measure);
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener('resize', measure);
+            document.fonts?.removeEventListener('loadingdone', measure);
+        };
+    }, [ref, enabled, value, rows, maxRows]);
+}

package/dist/theme/theme.adapter.d.ts

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

package/dist/theme/theme.adapter.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from 'react';
+import { RenderContext } from '@fastsprout/reacd/adapter-runtime/components/shared/port.js';
+import { ThemeVariablesContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/theme-context.js';
+import { templateVariables } from '@fastsprout/reacd/adapter-runtime/renderer/theme/template-variables.js';
+import { defaultProperties } from '@fastsprout/reacd/adapter-runtime/renderer/theme/default-properties.js';
+export function ShadcnTheme({ children, template, defaults }) {
+    const inheritedVariables = useContext(ThemeVariablesContext);
+    const inheritedPort = useContext(RenderContext);
+    const variables = template === undefined ? inheritedVariables : templateVariables(template);
+    const port = useMemo(() => {
+        if (inheritedPort === null)
+            return null;
+        return {
+            render(name, properties) {
+                const fallback = Object.entries(defaults ?? {}).find(([component]) => component === name)?.[1];
+                return inheritedPort.render(name, defaultProperties(properties, fallback));
+            },
+            report: (issues) => inheritedPort.report(issues),
+        };
+    }, [inheritedPort, defaults]);
+    return (_jsx(ThemeVariablesContext.Provider, { value: variables, children: _jsx(RenderContext.Provider, { value: port, children: _jsx("div", { className: "reacd-node reacd-theme", style: variables, children: children }) }) }));
+}

package/dist/timeline/timeline.adapter.d.ts

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

package/dist/timeline/timeline.adapter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TIMELINE_DEFAULTS, TIMELINE_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/timeline-policy.js';
+import { Button } from '../vendor/ui/button.js';
+export function ShadcnTimeline({ label, items, value, onValueChange, orientation = TIMELINE_DEFAULTS.orientation, reverse = TIMELINE_DEFAULTS.reverse, intent = TIMELINE_DEFAULTS.intent, }) {
+    const current = value === undefined ? 0 : items.findIndex((item) => item.id === value);
+    const events = items.map((item, index) => ({
+        ...item,
+        status: index < current ? 'completed' : index === current ? 'current' : 'upcoming',
+    }));
+    if (reverse)
+        events.reverse();
+    return (_jsx("ol", { className: "reacd-node reacd-timeline", "aria-label": label, "data-slot": "timeline", "data-orientation": orientation, "data-intent": intent, children: events.map((item) => (_jsxs("li", { "data-state": item.status, "aria-current": item.status === 'current' ? 'step' : undefined, children: [_jsx("span", { className: "reacd-timeline-state", children: TIMELINE_POLICY.statuses[item.status] }), item.date !== undefined && (_jsx("span", { className: "reacd-timeline-date", children: item.date })), onValueChange === undefined ? (_jsx("p", { className: "reacd-timeline-title", children: item.title })) : (_jsx(Button, { className: "reacd-button reacd-timeline-title", type: "button", variant: "ghost", disabled: item.disabled, onClick: () => onValueChange(item.id), children: item.title })), item.description !== undefined && (_jsx("p", { className: "reacd-timeline-description", children: item.description }))] }, item.id))) }));
+}

package/dist/toast/toast-data.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+import type { ToastProps } from '@fastsprout/reacd/adapter-runtime/components/toast/index.js';
+export type ToastFeedback = 'rejected' | 'invalid' | 'actionError';
+export interface ToastData {
+    variables: CSSProperties;
+    host: HTMLElement | null;
+    direction: 'ltr' | 'rtl';
+    intent: NonNullable<ToastProps['intent']>;
+    description?: string | undefined;
+    closeLabel: string;
+    requestClose: () => void;
+    feedback: ToastFeedback | null;
+    action?: {
+        label: string;
+        execute: () => void;
+    } | undefined;
+}

package/dist/toast/toast-data.js

@@ -0,0 +1 @@
+export {};

package/dist/toast/toast-focus.d.ts

@@ -0,0 +1,12 @@
+export interface FocusableToast {
+    id: string;
+    ref?: {
+        current: HTMLElement | null;
+    } | undefined;
+    limited?: boolean | undefined;
+    transitionStatus?: 'starting' | 'ending' | undefined;
+}
+export declare function createToastFocus(): {
+    remember(viewport: HTMLElement, origin: EventTarget | null): void;
+    close(id: string, records: readonly FocusableToast[], dismiss: () => void): void;
+};

package/dist/toast/toast-focus.js

@@ -0,0 +1,38 @@
+export function createToastFocus() {
+    let previous = null;
+    return {
+        remember(viewport, origin) {
+            if (origin instanceof HTMLElement &&
+                !viewport.contains(origin) &&
+                !origin.hasAttribute('data-base-ui-focus-guard'))
+                previous = origin;
+        },
+        close(id, records, dismiss) {
+            const index = records.findIndex((record) => record.id === id);
+            const root = records[index]?.ref?.current;
+            if (root == null || !root.contains(root.ownerDocument.activeElement)) {
+                dismiss();
+                return;
+            }
+            const ordered = [
+                ...records.slice(index + 1),
+                ...records.slice(0, index).reverse(),
+            ];
+            const next = ordered.find((record) => !record.limited &&
+                record.transitionStatus !== 'ending' &&
+                record.ref?.current?.isConnected);
+            const destination = next?.ref?.current;
+            dismiss();
+            queueMicrotask(() => {
+                const document = root.ownerDocument;
+                const active = document.activeElement;
+                if (active !== document.body && !root.contains(active))
+                    return;
+                if (destination?.isConnected)
+                    destination.focus();
+                else if (previous?.isConnected)
+                    previous.focus();
+            });
+        },
+    };
+}

package/dist/toast/toast-provider.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare function ShadcnToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/toast/toast-provider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Toast } from '@base-ui/react/toast';
+import { TOAST_POLICY } from '@fastsprout/reacd/adapter-runtime/core/toast-policy.js';
+import { createToastQueue } from './toast-queue.js';
+import { ToastQueueContext } from './toast-queue-context.js';
+import { ShadcnToastViewport } from './toast-viewport.js';
+export function ShadcnToastProvider({ children }) {
+    const [queue] = useState(createToastQueue);
+    return (_jsx(ToastQueueContext.Provider, { value: queue, children: _jsxs(Toast.Provider, { limit: TOAST_POLICY.maximumVisible, children: [children, _jsx(ShadcnToastViewport, {})] }) }));
+}

package/dist/toast/toast-queue-context.d.ts

@@ -0,0 +1,24 @@
+export declare const ToastQueueContext: import("react").Context<{
+    focus: {
+        remember(viewport: HTMLElement, origin: EventTarget | null): void;
+        close(id: string, records: readonly import("./toast-focus.js").FocusableToast[], dismiss: () => void): void;
+    };
+    keys: import("jotai").PrimitiveAtom<ReadonlySet<string>> & {
+        init: ReadonlySet<string>;
+    };
+    store: import("jotai").Store;
+    reserve(id: string): boolean;
+    release(id: string): void;
+} | null>;
+export declare function useToastQueue(): {
+    focus: {
+        remember(viewport: HTMLElement, origin: EventTarget | null): void;
+        close(id: string, records: readonly import("./toast-focus.js").FocusableToast[], dismiss: () => void): void;
+    };
+    keys: import("jotai").PrimitiveAtom<ReadonlySet<string>> & {
+        init: ReadonlySet<string>;
+    };
+    store: import("jotai").Store;
+    reserve(id: string): boolean;
+    release(id: string): void;
+};

package/dist/toast/toast-queue-context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+export const ToastQueueContext = createContext(null);
+export function useToastQueue() {
+    const queue = useContext(ToastQueueContext);
+    if (queue === null)
+        throw new Error('Toast requires a Surface notification provider.');
+    return queue;
+}

package/dist/toast/toast-queue.d.ts

@@ -0,0 +1,12 @@
+export declare function createToastQueue(): {
+    focus: {
+        remember(viewport: HTMLElement, origin: EventTarget | null): void;
+        close(id: string, records: readonly import("./toast-focus.js").FocusableToast[], dismiss: () => void): void;
+    };
+    keys: import("jotai/vanilla").PrimitiveAtom<ReadonlySet<string>> & {
+        init: ReadonlySet<string>;
+    };
+    store: import("jotai/vanilla").Store;
+    reserve(id: string): boolean;
+    release(id: string): void;
+};

package/dist/toast/toast-queue.js

@@ -0,0 +1,29 @@
+import { createToastFocus } from './toast-focus.js';
+import { atom, createStore } from 'jotai/vanilla';
+import { TOAST_POLICY } from '@fastsprout/reacd/adapter-runtime/core/toast-policy.js';
+export function createToastQueue() {
+    const keys = atom(new Set());
+    const store = createStore();
+    return {
+        focus: createToastFocus(),
+        keys,
+        store,
+        reserve(id) {
+            const active = store.get(keys);
+            if (active.has(id))
+                return true;
+            if (active.size >= TOAST_POLICY.maximumQueued)
+                return false;
+            store.set(keys, new Set([...active, id]));
+            return true;
+        },
+        release(id) {
+            const active = store.get(keys);
+            if (!active.has(id))
+                return;
+            const next = new Set(active);
+            next.delete(id);
+            store.set(keys, next);
+        },
+    };
+}

package/dist/toast/toast-registration.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+import type { ToastProps } from '@fastsprout/reacd/adapter-runtime/components/toast/index.js';
+export declare function ToastRegistration({ id, properties, variables, direction, host, }: {
+    id: string;
+    properties: ToastProps;
+    variables: CSSProperties;
+    direction: 'ltr' | 'rtl';
+    host: HTMLElement | null;
+}): import("react").JSX.Element | null;

package/dist/toast/toast-registration.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAtomValue } from 'jotai';
+import { useToastQueue } from './toast-queue-context.js';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Toast } from '@base-ui/react/toast';
+import { TOAST_DEFAULTS, TOAST_POLICY, TOAST_DURATIONS, toastDecision, toastTimeout, } from '@fastsprout/reacd/adapter-runtime/core/toast-policy.js';
+export function ToastRegistration({ id, properties, variables, direction, host, }) {
+    const { toasts, add, update, close } = Toast.useToastManager();
+    const queue = useToastQueue();
+    const slots = useAtomValue(queue.keys, { store: queue.store });
+    const current = toasts.find((toast) => toast.id === id);
+    const full = !slots.has(id) && slots.size >= TOAST_POLICY.maximumQueued;
+    const [feedback, setFeedback] = useState(null);
+    const [held, setHeld] = useState(false);
+    const alive = useRef(false);
+    const forwarding = useRef(false);
+    const snapshot = useRef(toasts);
+    useLayoutEffect(() => {
+        snapshot.current = toasts;
+    }, [toasts]);
+    const latest = useRef(properties.onOpenChange);
+    useLayoutEffect(() => {
+        latest.current = properties.onOpenChange;
+    }, [properties.onOpenChange]);
+    const requestClose = useCallback(() => {
+        if (!alive.current)
+            return;
+        setHeld(true);
+        let result;
+        try {
+            result = latest.current(false);
+        }
+        catch {
+            setFeedback('actionError');
+            return;
+        }
+        const decision = toastDecision(result);
+        if (decision === 'invalid')
+            setFeedback('invalid');
+        else if (decision === 'veto')
+            setFeedback('rejected');
+        else {
+            forwarding.current = true;
+            try {
+                close(id);
+            }
+            finally {
+                forwarding.current = false;
+            }
+        }
+    }, [close, id]);
+    const nativeClose = useCallback(() => {
+        if (!forwarding.current)
+            requestClose();
+    }, [requestClose]);
+    const action = useMemo(() => {
+        const declared = properties.action;
+        if (declared === undefined)
+            return undefined;
+        return {
+            label: declared.label,
+            execute: () => {
+                let result;
+                try {
+                    result = declared.onPress();
+                }
+                catch {
+                    setFeedback('actionError');
+                    return;
+                }
+                const decision = toastDecision(result);
+                if (decision === 'invalid')
+                    setFeedback('invalid');
+                else if (decision === 'veto')
+                    setFeedback('rejected');
+                else {
+                    setFeedback(null);
+                    if (properties.closeOnAction ?? TOAST_DEFAULTS.closeOnAction)
+                        requestClose();
+                }
+            },
+        };
+    }, [properties.action, properties.closeOnAction, requestClose]);
+    const options = useMemo(() => ({
+        id,
+        title: properties.title,
+        description: properties.description,
+        type: properties.intent ?? TOAST_DEFAULTS.intent,
+        priority: (properties.priority ?? TOAST_DEFAULTS.priority) === 'urgent'
+            ? 'high'
+            : 'low',
+        timeout: held || feedback !== null
+            ? TOAST_DURATIONS.persistent
+            : toastTimeout(properties.duration, properties.action !== undefined),
+        onClose: nativeClose,
+        data: {
+            variables,
+            direction,
+            feedback,
+            host,
+            intent: properties.intent ?? TOAST_DEFAULTS.intent,
+            description: properties.description,
+            closeLabel: properties.closeLabel ?? TOAST_DEFAULTS.closeLabel,
+            requestClose,
+            action,
+        },
+    }), [
+        id,
+        properties.title,
+        properties.description,
+        properties.intent,
+        properties.priority,
+        properties.duration,
+        action,
+        properties.action,
+        properties.closeLabel,
+        held,
+        feedback,
+        variables,
+        direction,
+        host,
+        requestClose,
+        nativeClose,
+    ]);
+    useLayoutEffect(() => {
+        alive.current = true;
+        return () => {
+            alive.current = false;
+            queue.focus.close(id, snapshot.current, () => close(id));
+            queue.release(id);
+        };
+    }, [close, id, queue]);
+    const present = current !== undefined;
+    const phase = current?.transitionStatus;
+    const currentTimeout = current?.timeout;
+    useLayoutEffect(() => {
+        if (full || !queue.reserve(id))
+            return;
+        if (!present || phase === 'ending')
+            add(options);
+        else if (currentTimeout !== options.timeout)
+            update(id, options);
+        else {
+            const { timeout: _timeout, ...metadata } = options;
+            update(id, metadata);
+        }
+    }, [queue, full, phase, present, currentTimeout, add, update, id, options]);
+    return full ? _jsx("p", { role: "alert", children: TOAST_DEFAULTS.limit }) : null;
+}

package/dist/toast/toast-viewport.d.ts

@@ -0,0 +1 @@
+export declare function ShadcnToastViewport(): import("react").JSX.Element | null;

package/dist/toast/toast-viewport.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useToastQueue } from './toast-queue-context.js';
+import { ThemeVariablesContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/theme-context.js';
+import { useContext } from 'react';
+import { Toast } from '@base-ui/react/toast';
+import { TOAST_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/toast-policy.js';
+import { PortalHostContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { Button } from '../vendor/ui/button.js';
+export function ShadcnToastViewport() {
+    const queue = useToastQueue();
+    const { toasts } = Toast.useToastManager();
+    const fallbackHost = useContext(PortalHostContext);
+    const variables = useContext(ThemeVariablesContext);
+    const active = toasts.find((toast) => toast.data !== undefined && toast.transitionStatus !== 'ending');
+    const host = active?.data?.host ?? fallbackHost;
+    if (toasts.length === 0)
+        return null;
+    return (_jsx(Toast.Portal, { container: host ?? undefined, children: _jsx(Toast.Viewport, { onFocusCapture: (event) => queue.focus.remember(event.currentTarget, event.relatedTarget), style: variables, className: "reacd-root reacd-portal-root reacd-toast-viewport", children: toasts.map((toast) => {
+                const data = toast.data;
+                if (data === undefined)
+                    return null;
+                const action = data.action;
+                return (_jsxs(Toast.Root, { toast: toast, onKeyDown: (event) => {
+                        if (event.key !== 'Escape')
+                            return;
+                        event.preventBaseUIHandler();
+                        event.preventDefault();
+                        event.stopPropagation();
+                        data.requestClose();
+                    }, className: "reacd-root reacd-portal-root reacd-toast", "data-intent": data.intent, dir: data.direction, style: data.variables, swipeDirection: data.direction === 'rtl' ? ['down', 'left'] : ['down', 'right'], children: [_jsx("div", { className: "reacd-toast-grip", "aria-hidden": "true", children: _jsx("span", {}) }), _jsxs(Toast.Content, { className: "reacd-toast-content", "data-base-ui-swipe-ignore": true, children: [_jsx(Toast.Title, { className: "reacd-toast-title" }), data.description !== undefined && _jsx(Toast.Description, {}), data.feedback !== null && (_jsx("p", { role: data.feedback === 'rejected' ? 'status' : 'alert', children: TOAST_DEFAULTS[data.feedback] })), _jsxs("div", { className: "reacd-toast-actions", children: [action !== undefined && (_jsx(Toast.Action, { onClick: () => action.execute(), render: _jsx(Button, { className: "reacd-node reacd-button" }), children: action.label })), _jsx(Toast.Close, { onClick: (event) => {
+                                                event.preventBaseUIHandler();
+                                                event.preventDefault();
+                                                data.requestClose();
+                                            }, render: _jsx(Button, { variant: "secondary", className: "reacd-node reacd-button" }), children: data.closeLabel })] })] })] }, toast.id));
+            }) }) }));
+}

package/dist/toast/toast.adapter.d.ts

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

package/dist/toast/toast.adapter.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useId } from 'react';
+import { useDirection } from '@radix-ui/react-direction';
+import { PortalActiveContext, PortalHostContext, } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { ThemeVariablesContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/theme-context.js';
+import { ToastRegistration } from './toast-registration.js';
+export function ShadcnToast(properties) {
+    const id = useId();
+    const active = useContext(PortalActiveContext);
+    const variables = useContext(ThemeVariablesContext);
+    const direction = useDirection();
+    const host = useContext(PortalHostContext);
+    return properties.open && active ? (_jsx(ToastRegistration, { id: id, properties: properties, variables: variables, direction: direction, host: host })) : null;
+}

package/dist/toggle/toggle.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ToggleProps } from '@fastsprout/reacd/adapter-runtime/components/toggle/toggle.js';
+export declare function ShadcnToggle({ label, onCheckedChange, ...properties }: ToggleProps): import("react").JSX.Element;

package/dist/toggle/toggle.adapter.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Switch } from '../vendor/ui/switch.js';
+import { Label } from '../vendor/ui/label.js';
+export function ShadcnToggle({ label, onCheckedChange, ...properties }) {
+    const id = useId();
+    return (_jsxs("div", { className: "reacd-node reacd-check reacd-toggle", children: [_jsx(Switch, { id: id, ...properties, onCheckedChange: (next) => onCheckedChange(next) }), _jsx(Label, { htmlFor: id, children: label })] }));
+}

package/dist/tooltip/tooltip.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { TooltipProps } from '@fastsprout/reacd/adapter-runtime/components/tooltip/tooltip.js';
+export declare function ShadcnTooltip({ text, children, open, onOpenChange, disabled, shortcuts, placement, delay, arrow, }: TooltipProps): import("react").JSX.Element;

package/dist/tooltip/tooltip.adapter.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import { Tooltip } from '@base-ui/react/tooltip';
+import { TOOLTIP_DEFAULTS, TOOLTIP_DELAYS, TOOLTIP_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/tooltip-policy.js';
+import { ThemeVariablesContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/theme-context.js';
+import { PortalActiveContext, PortalHostContext, } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { useTooltipAnchor } from './use-tooltip-anchor.js';
+import { useEscapeLayer } from '@fastsprout/reacd/adapter-runtime/renderer/theme/use-escape-layer.js';
+import { KbdKey } from '../kbd/kbd-key.adapter.js';
+export function ShadcnTooltip({ text, children, open, onOpenChange, disabled, shortcuts, placement = TOOLTIP_DEFAULTS.placement, delay = TOOLTIP_DEFAULTS.delay, arrow = TOOLTIP_DEFAULTS.arrow, }) {
+    const variables = useContext(ThemeVariablesContext);
+    const host = useContext(PortalHostContext);
+    const active = useContext(PortalActiveContext);
+    const [automaticOpen, setAutomaticOpen] = useState(TOOLTIP_DEFAULTS.open);
+    const actualOpen = open ?? automaticOpen;
+    const shown = actualOpen && active && !disabled;
+    function change(next) {
+        setAutomaticOpen(next);
+        onOpenChange?.(next);
+    }
+    useEscapeLayer(shown, () => change(false));
+    const { ref: anchorRef, tabIndex } = useTooltipAnchor(children);
+    return (_jsxs(Tooltip.Root, { open: actualOpen, disabled: disabled || !active, onOpenChange: change, children: [_jsx(Tooltip.Trigger, { delay: TOOLTIP_DELAYS[delay], render: _jsx("div", { ref: anchorRef }), role: "group", "aria-label": text, tabIndex: disabled ? -1 : tabIndex, className: "reacd-node reacd-tooltip-anchor", "data-slot": "tooltip-trigger", onKeyDown: (event) => {
+                    if (event.key === 'Escape' && shown) {
+                        event.stopPropagation();
+                        change(false);
+                    }
+                }, children: children }), _jsx(Tooltip.Portal, { container: host ?? undefined, children: _jsx(Tooltip.Positioner, { side: placement, sideOffset: TOOLTIP_POLICY.sideOffsetPx, collisionPadding: TOOLTIP_POLICY.collisionPaddingPx, style: variables, className: "reacd-root reacd-portal-root reacd-tooltip-positioner", children: _jsxs(Tooltip.Popup, { role: "tooltip", className: "reacd-tooltip-popup", "data-slot": "tooltip-content", children: [_jsxs("div", { className: "reacd-tooltip-body", children: [_jsx("span", { children: text }), shortcuts !== undefined && shortcuts.length > 0 && (_jsx("span", { className: "reacd-tooltip-shortcuts", children: shortcuts.map((key, index) => (_jsx(KbdKey, { display: key, label: key }, index))) }))] }), arrow && _jsx(Tooltip.Arrow, { className: "reacd-tooltip-arrow" })] }) }) })] }));
+}