@bareboard/react-native 0.0.0-stage → 0.1.0

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,66 @@
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { type ReactNode } from 'react';
+import { type PressableProps, type ViewProps, type ViewInstance, type TextInputInstance } from 'react-native';
+import { type RenderChildren } from '../../utils/render';
+import { type InputProps } from '../input/input';
+import { Label } from '../label/label';
+type ComboboxBaseProps<TValue> = {
+    by?: (a: TValue, b: TValue) => boolean;
+    displayValue?: (value: TValue) => string;
+    immediate?: boolean;
+    virtual?: {
+        options: TValue[];
+        disabled?: (value: TValue) => boolean;
+    } | null;
+    disabled?: boolean;
+    children?: ReactNode;
+};
+type ComboboxSingleProps<TValue> = {
+    multiple?: false;
+    value?: TValue;
+    defaultValue?: TValue;
+    onChange?: (value: TValue) => void;
+};
+type ComboboxMultipleProps<TValue> = {
+    multiple: true;
+    value?: TValue[];
+    defaultValue?: TValue[];
+    onChange?: (value: TValue[]) => void;
+};
+export type ComboboxProps<TValue> = (ComboboxSingleProps<TValue> | ComboboxMultipleProps<TValue>) & ComboboxBaseProps<TValue>;
+export declare function Combobox<TValue>({ value: controlledValue, defaultValue, onChange, multiple, by, displayValue, immediate, virtual, disabled, children, }: ComboboxProps<TValue>): import("react").JSX.Element;
+export type ComboboxInputProps = InputProps;
+export declare const ComboboxInput: ForwardRefExoticComponent<ComboboxInputProps & RefAttributes<TextInputInstance>>;
+export type ComboboxButtonRenderPropArg = {
+    open: boolean;
+    disabled: boolean;
+    active: boolean;
+};
+export type ComboboxButtonProps = Omit<PressableProps, 'children' | 'disabled'> & {
+    disabled?: boolean;
+    children?: RenderChildren<ComboboxButtonRenderPropArg>;
+};
+export declare const ComboboxButton: ForwardRefExoticComponent<ComboboxButtonProps & RefAttributes<ViewInstance>>;
+export type ComboboxOptionsRenderPropArg = {
+    option: unknown;
+    index: number;
+};
+export type ComboboxOptionsProps = Omit<ViewProps, 'children'> & {
+    children?: ReactNode | ((bag: ComboboxOptionsRenderPropArg) => ReactNode);
+    itemHeight?: number;
+};
+export declare const ComboboxOptions: ForwardRefExoticComponent<ComboboxOptionsProps & RefAttributes<ViewInstance>>;
+export type ComboboxOptionRenderPropArg = {
+    selected: boolean;
+    disabled: boolean;
+    active: boolean;
+};
+export type ComboboxOptionProps<TValue> = Omit<PressableProps, 'children' | 'disabled'> & {
+    value: TValue;
+    disabled?: boolean;
+    order?: number;
+    children?: RenderChildren<ComboboxOptionRenderPropArg>;
+};
+export declare function ComboboxOption<TValue>({ value, disabled: optionDisabled, order, children, onPress, onLayout, ...theirProps }: ComboboxOptionProps<TValue>): import("react").JSX.Element;
+export declare const ComboboxLabel: typeof Label;
+export {};

package/dist/components/combobox/combobox.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef, useState, } from 'react';
+import { FlatList, Pressable, View, } from 'react-native';
+import { useControllable } from '../../hooks/use-controllable';
+import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect';
+import { useLatestValue } from '../../hooks/use-latest-value';
+import { useSlice } from '../../react-glue';
+import { Focus } from '../../utils/calculate-active-index';
+import { resolveChildren } from '../../utils/render';
+import { Input } from '../input/input';
+import { Label } from '../label/label';
+import { ActionTypes, ComboboxState, ValueMode } from './combobox-machine';
+import { ComboboxContext, useComboboxMachine, useComboboxMachineContext, } from './combobox-machine-glue';
+let ComboboxValueContext = createContext(null);
+function useComboboxValueContext(componentName) {
+    let context = useContext(ComboboxValueContext);
+    if (context === null) {
+        throw new Error(`<${componentName} /> must be rendered inside a <Combobox /> component.`);
+    }
+    return context;
+}
+function defaultDisplayValue(value) {
+    return value == null ? '' : String(value);
+}
+// The list is not filtered here: like the web Combobox, the consumer filters the options it renders
+// from `query`, which is updated by `ComboboxInput` as the user types.
+export function Combobox({ value: controlledValue, defaultValue, onChange, multiple = false, by, displayValue = defaultDisplayValue, immediate = false, virtual = null, disabled = false, children, }) {
+    let id = useId();
+    let machine = useComboboxMachine({ id });
+    let [query, setQuery] = useState(null);
+    // The controllable value is either a single value or an array, depending on `multiple`.
+    let [value, select] = useControllable(controlledValue, onChange, defaultValue ?? (multiple ? [] : undefined));
+    let compare = (a, b) => (by ? by(a, b) : a === b);
+    let isSelected = (candidate) => multiple
+        ? value.some((item) => compare(item, candidate))
+        : value !== undefined && compare(value, candidate);
+    useIsoMorphicEffect(() => {
+        machine.state.dataRef.current = {
+            value,
+            defaultValue,
+            disabled,
+            mode: multiple ? ValueMode.Multi : ValueMode.Single,
+            onChange: (next) => select(next),
+            onClose: () => setQuery(null),
+            compare,
+            isSelected,
+            virtual: virtual,
+            calculateIndex: (candidate) => virtual
+                ? virtual.options.findIndex((option) => compare(option, candidate))
+                : machine.state.options.findIndex((option) => compare(option.dataRef.current.value, candidate)),
+        };
+    });
+    // The machine needs the virtual options to move the active option through them.
+    useIsoMorphicEffect(() => {
+        if (!virtual)
+            return;
+        machine.send({
+            type: ActionTypes.UpdateVirtualConfiguration,
+            options: virtual.options,
+            disabled: virtual.disabled ?? null,
+        });
+    }, [virtual?.options, virtual?.disabled]);
+    return (_jsx(ComboboxContext.Provider, { value: machine, children: _jsx(ComboboxValueContext.Provider, { value: {
+                value,
+                multiple,
+                disabled,
+                query,
+                setQuery,
+                displayValue: displayValue,
+                immediate,
+                select,
+                isSelected,
+                virtual: virtual ? { options: virtual.options } : null,
+            }, children: children }) }));
+}
+export const ComboboxInput = forwardRef(function ComboboxInputFn(props, ref) {
+    let machine = useComboboxMachineContext('ComboboxInput');
+    let combobox = useComboboxValueContext('ComboboxInput');
+    let { disabled = false, onChangeText, onFocus, onKeyPress, onSubmitEditing, ...theirProps } = props;
+    let handleFocus = (event) => {
+        onFocus?.(event);
+        if (combobox.immediate)
+            machine.actions.openCombobox();
+    };
+    let handleChangeText = (text) => {
+        onChangeText?.(text);
+        combobox.setQuery(text);
+        // Like the web default, clearing the input clears the value of a single combobox.
+        if (text === '' && !combobox.multiple)
+            combobox.select(null);
+        machine.actions.setIsTyping(true);
+        machine.actions.openCombobox();
+    };
+    // Arrow keys and Escape need a hardware keyboard, which is the case on a web build of the app.
+    let handleKeyPress = (event) => {
+        onKeyPress?.(event);
+        switch (event.nativeEvent.key) {
+            // Like on the web, an arrow key opens a closed combobox. This does nothing when it is open.
+            case 'ArrowDown':
+                machine.actions.openCombobox();
+                machine.actions.goToOption({ focus: Focus.Next });
+                break;
+            case 'ArrowUp':
+                machine.actions.openCombobox();
+                machine.actions.goToOption({ focus: Focus.Previous });
+                break;
+            case 'Escape':
+                machine.actions.closeCombobox();
+                break;
+        }
+    };
+    let handleSubmitEditing = (event) => {
+        onSubmitEditing?.(event);
+        machine.actions.selectActiveOption();
+        if (!combobox.multiple)
+            machine.actions.closeCombobox();
+    };
+    return (_jsx(Input, { ...theirProps, ref: ref, disabled: combobox.disabled || disabled, value: combobox.query ?? (combobox.multiple ? '' : combobox.displayValue(combobox.value)), onChangeText: handleChangeText, onKeyPress: handleKeyPress, onSubmitEditing: handleSubmitEditing, onFocus: handleFocus }));
+});
+export const ComboboxButton = forwardRef(function ComboboxButtonFn(props, ref) {
+    let machine = useComboboxMachineContext('ComboboxButton');
+    let combobox = useComboboxValueContext('ComboboxButton');
+    let open = useSlice(machine, (state) => state.comboboxState === ComboboxState.Open);
+    let { disabled: buttonDisabled = false, children, onPress, ...theirProps } = props;
+    let disabled = combobox.disabled || buttonDisabled;
+    let handlePress = (event) => {
+        onPress?.(event);
+        if (open) {
+            machine.actions.closeCombobox();
+        }
+        else {
+            machine.actions.openCombobox();
+        }
+    };
+    return (_jsx(Pressable, { ...theirProps, ref: ref, disabled: disabled, accessibilityRole: "button", accessibilityState: { ...theirProps.accessibilityState, expanded: open, disabled }, onPress: handlePress, children: ({ pressed }) => resolveChildren(children, { open, disabled, active: pressed }) }));
+});
+export const ComboboxOptions = forwardRef(function ComboboxOptionsFn({ children, itemHeight, ...theirProps }, ref) {
+    let machine = useComboboxMachineContext('ComboboxOptions');
+    let combobox = useComboboxValueContext('ComboboxOptions');
+    let open = useSlice(machine, (state) => state.comboboxState === ComboboxState.Open);
+    if (!open)
+        return null;
+    if (combobox.virtual) {
+        return (_jsx(VirtualComboboxOptions, { ...theirProps, forwardedRef: ref, options: combobox.virtual.options, itemHeight: itemHeight, render: children }));
+    }
+    return (_jsx(View, { ...theirProps, ref: ref, children: children }));
+});
+// Renders only the visible options, and keeps the active one scrolled into view.
+function VirtualComboboxOptions({ forwardedRef, options, itemHeight, render, ...theirProps }) {
+    let machine = useComboboxMachineContext('ComboboxOptions');
+    let listRef = useRef(null);
+    let activeOptionIndex = useSlice(machine, (state) => machine.selectors.activeOptionIndex(state));
+    // The list is kept for scrolling, and is also handed to the ref of `ComboboxOptions`.
+    let setListRef = useCallback((list) => {
+        listRef.current = list;
+        if (typeof forwardedRef === 'function')
+            forwardedRef(list);
+        else if (forwardedRef)
+            forwardedRef.current = list;
+    }, [forwardedRef]);
+    useEffect(() => {
+        // The machine learns about new `options` after this render. Until then the active index still
+        // points into the previous list, so skip it: the machine re-renders with the corrected index.
+        if (activeOptionIndex === null || activeOptionIndex >= options.length)
+            return;
+        listRef.current?.scrollToIndex({ index: activeOptionIndex, animated: false });
+    }, [activeOptionIndex, options.length]);
+    return (_jsx(FlatList, { ...theirProps, ref: setListRef, data: options, keyExtractor: (_, index) => String(index), getItemLayout: itemHeight
+            ? (_, index) => ({ length: itemHeight, offset: itemHeight * index, index })
+            : undefined, onScrollToIndexFailed: ({ index }) => {
+            if (__DEV__) {
+                console.warn(`ComboboxOptions could not scroll to option ${index}. Pass \`itemHeight\`.`);
+            }
+        }, renderItem: ({ item, index }) => _jsx(_Fragment, { children: render({ option: item, index }) }) }));
+}
+export function ComboboxOption({ value, disabled: optionDisabled = false, order, children, onPress, onLayout, ...theirProps }) {
+    let machine = useComboboxMachineContext('ComboboxOption');
+    let combobox = useComboboxValueContext('ComboboxOption');
+    let id = useId();
+    let disabled = combobox.disabled || optionDisabled;
+    let dataRef = useLatestValue({ disabled, value, order });
+    useIsoMorphicEffect(() => machine.actions.registerOption(id, dataRef), [id, machine]);
+    let active = useSlice(machine, (state) => machine.selectors.isActive(state, value, id));
+    let selected = combobox.isSelected(value);
+    let handlePress = (event) => {
+        onPress?.(event);
+        if (disabled)
+            return;
+        machine.actions.onChange(value);
+        if (!combobox.multiple)
+            machine.actions.closeCombobox();
+    };
+    let handleLayout = (event) => {
+        onLayout?.(event);
+        machine.actions.setOptionTop(id, event.nativeEvent.layout.y);
+    };
+    return (_jsx(Pressable, { ...theirProps, disabled: disabled, accessibilityRole: "button", accessibilityState: { ...theirProps.accessibilityState, selected, disabled }, onPress: handlePress, onLayout: handleLayout, children: ({ pressed }) => resolveChildren(children, { selected, disabled, active: active || pressed }) }));
+}
+export const ComboboxLabel = Label;

package/dist/components/data-interactive/data-interactive.d.ts

@@ -0,0 +1,4 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type ViewProps, type ViewInstance } from 'react-native';
+export type DataInteractiveProps = ViewProps;
+export declare const DataInteractive: ForwardRefExoticComponent<DataInteractiveProps & RefAttributes<ViewInstance>>;

package/dist/components/data-interactive/data-interactive.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+// On the web this marks an element so that outside-click handlers ignore it. React Native has no
+// outside-click handling, so it only renders its children.
+export const DataInteractive = forwardRef(function DataInteractiveFn(props, ref) {
+    return _jsx(View, { ...props, ref: ref });
+});

package/dist/components/description/description.d.ts

@@ -0,0 +1,4 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type TextProps, type TextInstance } from 'react-native';
+export type DescriptionProps = TextProps;
+export declare const Description: ForwardRefExoticComponent<DescriptionProps & RefAttributes<TextInstance>>;

package/dist/components/description/description.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Text } from 'react-native';
+export const Description = forwardRef(function DescriptionFn(props, ref) {
+    return _jsx(Text, { ...props, ref: ref });
+});

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,22 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type ModalProps, type PressableProps, type StyleProp, type ViewProps, type ViewStyle, type ViewInstance } from 'react-native';
+import { type RenderChildren } from '../../utils/render';
+import { Description } from '../description/description';
+import { Label } from '../label/label';
+export type DialogRenderPropArg = {
+    open: boolean;
+    close: () => void;
+};
+export type DialogProps = Omit<ModalProps, 'visible' | 'children' | 'onRequestClose'> & {
+    open: boolean;
+    onClose: () => void;
+    children?: RenderChildren<DialogRenderPropArg>;
+};
+export declare function Dialog({ open, onClose, children, animationType, ...theirProps }: DialogProps): import("react").JSX.Element;
+export declare const DialogPanel: ForwardRefExoticComponent<ViewProps & RefAttributes<ViewInstance>>;
+export type DialogBackdropProps = Omit<PressableProps, 'children' | 'style'> & {
+    style?: StyleProp<ViewStyle>;
+};
+export declare const DialogBackdrop: ForwardRefExoticComponent<DialogBackdropProps & RefAttributes<ViewInstance>>;
+export declare const DialogTitle: typeof Label;
+export declare const DialogDescription: typeof Description;

package/dist/components/dialog/dialog.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Modal, Pressable, StyleSheet, View, } from 'react-native';
+import { CloseProvider, useClose } from '../../internal/close-provider';
+import { resolveChildren } from '../../utils/render';
+import { Description } from '../description/description';
+import { Label } from '../label/label';
+// `Modal` replaces the web portal: it is rendered on top of the app, and pressing the hardware back
+// button calls `onClose`.
+export function Dialog({ open, onClose, children, animationType = 'fade', ...theirProps }) {
+    return (_jsx(Modal, { ...theirProps, visible: open, animationType: animationType, onRequestClose: onClose, children: _jsx(CloseProvider, { value: onClose, children: resolveChildren(children, { open, close: onClose }) }) }));
+}
+export const DialogPanel = forwardRef(function DialogPanelFn(props, ref) {
+    return _jsx(View, { ...props, ref: ref, accessibilityViewIsModal: true });
+});
+// A press outside the panel closes the dialog, as the web Dialog does on an outside click.
+export const DialogBackdrop = forwardRef(function DialogBackdropFn(props, ref) {
+    let close = useClose();
+    let { onPress, style, ...theirProps } = props;
+    let handlePress = (event) => {
+        onPress?.(event);
+        close();
+    };
+    return (_jsx(Pressable, { ...theirProps, ref: ref, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [StyleSheet.absoluteFill, style], onPress: handlePress }));
+});
+export const DialogTitle = Label;
+export const DialogDescription = Description;

package/dist/components/disclosure/disclosure.d.ts

@@ -0,0 +1,35 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type PressableProps, type ViewProps, type ViewInstance } from 'react-native';
+import { type RenderChildren } from '../../utils/render';
+export type DisclosureRenderPropArg = {
+    open: boolean;
+    close: () => void;
+};
+export type DisclosureProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onChange?: (open: boolean) => void;
+    children?: RenderChildren<DisclosureRenderPropArg>;
+};
+type DisclosureContextValue = {
+    open: boolean;
+    toggle: () => void;
+    close: () => void;
+};
+export declare function useDisclosure(componentName: string): DisclosureContextValue;
+export declare function Disclosure({ open: controlledOpen, defaultOpen, onChange, children, }: DisclosureProps): import("react").JSX.Element;
+export type DisclosureButtonRenderPropArg = {
+    open: boolean;
+    disabled: boolean;
+    active: boolean;
+};
+export type DisclosureButtonProps = Omit<PressableProps, 'children' | 'disabled'> & {
+    disabled?: boolean;
+    children?: RenderChildren<DisclosureButtonRenderPropArg>;
+};
+export declare const DisclosureButton: ForwardRefExoticComponent<DisclosureButtonProps & RefAttributes<ViewInstance>>;
+export type DisclosurePanelProps = ViewProps & {
+    unmount?: boolean;
+};
+export declare const DisclosurePanel: ForwardRefExoticComponent<DisclosurePanelProps & RefAttributes<ViewInstance>>;
+export {};

package/dist/components/disclosure/disclosure.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, } from 'react';
+import { Pressable, View, } from 'react-native';
+import { useControllable } from '../../hooks/use-controllable';
+import { useEvent } from '../../hooks/use-event';
+import { resolveChildren } from '../../utils/render';
+let DisclosureContext = createContext(null);
+export function useDisclosure(componentName) {
+    let context = useContext(DisclosureContext);
+    if (context === null) {
+        throw new Error(`<${componentName} /> must be rendered inside a <Disclosure /> component.`);
+    }
+    return context;
+}
+export function Disclosure({ open: controlledOpen, defaultOpen, onChange, children, }) {
+    let [open, setOpen] = useControllable(controlledOpen, onChange, defaultOpen ?? false);
+    let close = useEvent(() => setOpen(false));
+    let toggle = useEvent(() => setOpen(!open));
+    return (_jsx(DisclosureContext.Provider, { value: { open, toggle, close }, children: resolveChildren(children, { open, close }) }));
+}
+export const DisclosureButton = forwardRef(function DisclosureButtonFn(props, ref) {
+    let { open, toggle } = useDisclosure('DisclosureButton');
+    let { disabled = false, children, onPress, ...theirProps } = props;
+    let handlePress = useEvent((event) => {
+        onPress?.(event);
+        toggle();
+    });
+    return (_jsx(Pressable, { ...theirProps, ref: ref, disabled: disabled, accessibilityRole: "button", accessibilityState: { ...theirProps.accessibilityState, expanded: open, disabled }, onPress: handlePress, children: ({ pressed }) => resolveChildren(children, { open, disabled, active: pressed }) }));
+});
+export const DisclosurePanel = forwardRef(function DisclosurePanelFn({ unmount = true, ...theirProps }, ref) {
+    let { open } = useDisclosure('DisclosurePanel');
+    if (!open && unmount)
+        return null;
+    return _jsx(View, { ...theirProps, ref: ref, style: [theirProps.style, !open && { display: 'none' }] });
+});

package/dist/components/field/field.d.ts

@@ -0,0 +1,6 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type ViewProps, type ViewInstance } from 'react-native';
+export type FieldProps = ViewProps & {
+    disabled?: boolean;
+};
+export declare const Field: ForwardRefExoticComponent<FieldProps & RefAttributes<ViewInstance>>;

package/dist/components/field/field.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { DisabledProvider, useDisabled } from '../../internal/disabled';
+export const Field = forwardRef(function FieldFn({ disabled, ...theirProps }, ref) {
+    let providedDisabled = useDisabled();
+    let isDisabled = disabled ?? providedDisabled ?? false;
+    return (_jsx(DisabledProvider, { value: isDisabled, children: _jsx(View, { ...theirProps, ref: ref }) }));
+});

package/dist/components/fieldset/fieldset.d.ts

@@ -0,0 +1,3 @@
+import { Field, type FieldProps } from '../field/field';
+export type FieldsetProps = FieldProps;
+export declare const Fieldset: typeof Field;

package/dist/components/fieldset/fieldset.js

@@ -0,0 +1,3 @@
+import { Field } from '../field/field';
+// A fieldset groups related fields. In React Native it is a Field, which propagates `disabled`.
+export const Fieldset = Field;

package/dist/components/focus-trap/focus-trap.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export type FocusTrapProps = {
+    children?: ReactNode;
+};
+export declare function FocusTrap({ children }: FocusTrapProps): import("react").JSX.Element;

package/dist/components/focus-trap/focus-trap.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
+export function FocusTrap({ children }) {
+    return _jsx(_Fragment, { children: children });
+}

package/dist/components/input/input.d.ts

@@ -0,0 +1,6 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type TextInputProps, type TextInputInstance } from 'react-native';
+export type InputProps = Omit<TextInputProps, 'editable'> & {
+    disabled?: boolean;
+};
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<TextInputInstance>>;

package/dist/components/input/input.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TextInput } from 'react-native';
+import { useDisabled } from '../../internal/disabled';
+export const Input = forwardRef(function InputFn(props, ref) {
+    let providedDisabled = useDisabled();
+    let { disabled = providedDisabled || false, ...theirProps } = props;
+    return (_jsx(TextInput, { ...theirProps, ref: ref, editable: !disabled, accessibilityState: { ...theirProps.accessibilityState, disabled } }));
+});

package/dist/components/label/label.d.ts

@@ -0,0 +1,6 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type TextProps, type TextInstance } from 'react-native';
+export type LabelProps = TextProps & {
+    disabled?: boolean;
+};
+export declare const Label: ForwardRefExoticComponent<LabelProps & RefAttributes<TextInstance>>;

package/dist/components/label/label.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Text } from 'react-native';
+import { useDisabled } from '../../internal/disabled';
+export const Label = forwardRef(function LabelFn(props, ref) {
+    let providedDisabled = useDisabled();
+    let { disabled = providedDisabled || false, ...theirProps } = props;
+    return (_jsx(Text, { ...theirProps, ref: ref, accessibilityState: { ...theirProps.accessibilityState, disabled } }));
+});

package/dist/components/legend/legend.d.ts

@@ -0,0 +1,6 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type TextProps, type TextInstance } from 'react-native';
+export type LegendProps = TextProps & {
+    disabled?: boolean;
+};
+export declare const Legend: ForwardRefExoticComponent<LegendProps & RefAttributes<TextInstance>>;

package/dist/components/legend/legend.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Text } from 'react-native';
+import { useDisabled } from '../../internal/disabled';
+export const Legend = forwardRef(function LegendFn(props, ref) {
+    let providedDisabled = useDisabled();
+    let { disabled = providedDisabled || false, ...theirProps } = props;
+    return (_jsx(Text, { ...theirProps, ref: ref, accessibilityState: { ...theirProps.accessibilityState, disabled } }));
+});

package/dist/components/listbox/listbox-machine-glue.d.ts

@@ -0,0 +1,6 @@
+import { ListboxMachine } from './listbox-machine';
+export declare const ListboxContext: import("react").Context<ListboxMachine<unknown> | null>;
+export declare function useListboxMachineContext<T>(component: string): ListboxMachine<T>;
+export declare function useListboxMachine({ id }: {
+    id: string;
+}): ListboxMachine<unknown>;

package/dist/components/listbox/listbox-machine-glue.js

@@ -0,0 +1,16 @@
+import { createContext, useContext, useMemo } from 'react';
+import { useOnUnmount } from '../../hooks/use-on-unmount';
+import { ListboxMachine } from './listbox-machine';
+export const ListboxContext = createContext(null);
+export function useListboxMachineContext(component) {
+    let context = useContext(ListboxContext);
+    if (context === null) {
+        throw new Error(`<${component} /> is missing a parent <Listbox /> component.`);
+    }
+    return context;
+}
+export function useListboxMachine({ id }) {
+    let machine = useMemo(() => ListboxMachine.new({ id }), []);
+    useOnUnmount(() => machine.dispose());
+    return machine;
+}