@symbiote-native/solid 0.0.1 → 0.1.0

package/build/components/section-list/index.jsx

@@ -0,0 +1,8 @@
+// SectionList: the public preset over VirtualizedSectionList, mirroring RN's
+// SectionList -> VirtualizedSectionList -> VirtualizedList layering. All section flattening,
+// windowing and imperative-scroll logic lives one layer down; this re-exposes the same surface
+// under the SectionList name, threading the imperative ref straight through.
+import { VirtualizedSectionList, } from '../virtualized-section-list/index.jsx';
+export function SectionList(props) {
+    return <VirtualizedSectionList {...props}/>;
+}

package/build/components/switch/index.android.d.ts

@@ -0,0 +1,2 @@
+export type { ISwitchProps, ISwitchTrackColor } from './shared';
+export declare const Switch: (props: import("./shared").ISwitchProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;

package/build/components/switch/index.android.js

@@ -0,0 +1,12 @@
+// Switch, Android host binding. AndroidSwitch takes trackColorForTrue / trackColorForFalse plus
+// trackTintColor (the color for the CURRENT value, which RN computes as value ? true : false), and
+// snaps native back via the `setNativeValue` command (Switch.js:221-225).
+import { createSwitch } from './shared.js';
+export const Switch = createSwitch({
+    snapBackCommand: 'setNativeValue',
+    trackColorProps: (value, trackColor) => ({
+        trackColorForFalse: trackColor?.false,
+        trackColorForTrue: trackColor?.true,
+        trackTintColor: value ? trackColor?.true : trackColor?.false,
+    }),
+});

package/build/components/switch/index.d.ts

@@ -0,0 +1 @@
+export * from './index.ios';

package/build/components/switch/index.ios.d.ts

@@ -0,0 +1,2 @@
+export type { ISwitchProps, ISwitchTrackColor } from './shared';
+export declare const Switch: (props: import("./shared").ISwitchProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;

package/build/components/switch/index.ios.js

@@ -0,0 +1,11 @@
+// Switch, iOS host binding. iOS's native Switch takes onTintColor (ON-track) / tintColor
+// (OFF-track), and snaps native back via the `setValue` command (Switch.js:221-225) — the same
+// facts adapters/react's, adapters/vue's and adapters/svelte's iOS bindings encode.
+import { createSwitch } from './shared.js';
+export const Switch = createSwitch({
+    snapBackCommand: 'setValue',
+    trackColorProps: (_value, trackColor) => ({
+        onTintColor: trackColor?.true,
+        tintColor: trackColor?.false,
+    }),
+});

package/build/components/switch/index.js

@@ -0,0 +1,4 @@
+// Base / default Switch: re-exports the iOS build. Metro overrides this with index.ios.ts /
+// index.android.ts on a real host; under vitest / tsc the resolution lands here. Filename is the
+// selector, no Platform.OS read.
+export * from './index.ios.js';

package/build/components/switch/shared.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from '../../jsx-runtime';
+import { type ISwitchPlatform, type ISwitchProps as ISwitchBaseProps } from '@symbiote-native/components';
+import { type IClassNameValue } from '@symbiote-native/engine';
+export type { ISwitchTrackColor } from '@symbiote-native/components';
+export type ISwitchProps = ISwitchBaseProps & {
+    class?: IClassNameValue;
+};
+export type ISwitchHostPlatform = ISwitchPlatform & {
+    snapBackCommand: string;
+};
+export declare function createSwitch(platform: ISwitchHostPlatform): (props: ISwitchProps) => JSX.Element;

package/build/components/switch/shared.js

@@ -0,0 +1,87 @@
+// Switch, the Solid lifecycle half. The logic (the lastNativeReport reducer, valueFromChange, the
+// snap-back decision) lives in @symbiote-native/components/state and the render (value fold, track
+// colors, ios_backgroundColor) in @symbiote-native/components/view — both shared verbatim with
+// React, Vue and Svelte. Solid supplies only the reactivity: a signal holding what native last
+// reported, an accessor per prop, and the effect that snaps native back when the parent rejects a
+// toggle.
+//
+// Switch is controlled exactly like RN's: the parent's onValueChange MUST update `value` for the
+// toggle to stick. If the handler is a no-op, native has already flipped its own grip, so JS
+// commands the old value back down — a plain prop re-push cannot cover that case, because the prop
+// never changed and the retained tree never diverged. The command name is platform-specific (iOS
+// setValue / Android setNativeValue) and arrives via `platform`.
+//
+// NOTHING here destructures `props`. Solid props are getters; destructuring reads them once at
+// setup and freezes the component at its mount-time values. Every read below happens inside an
+// accessor (the descriptor memo, the snap-back effect, handleChange) so it re-runs when the caller's
+// signal changes.
+import { createEffect, createSignal } from 'solid-js';
+import { createInitialSwitchState, renderSwitch, resolveAccessibilityProps, shouldSnapBack, switchReducer, valueFromChange, } from '@symbiote-native/components';
+import { dispatchViewCommand, dlog, } from '@symbiote-native/engine';
+import { descriptorToSolid } from '../../descriptor-to-solid.js';
+// Read by the component itself; everything else forwards onto the host node. onValueChange is pure
+// JS and must never reach Fabric — a function prop crashes Android's folly::dynamic serializer.
+const HANDLED_PROPS = [
+    'value',
+    'onValueChange',
+    'disabled',
+    'trackColor',
+    'thumbColor',
+    'ios_backgroundColor',
+    'style',
+];
+// Switch owns its host element rather than rendering through a symbiote View, so it folds
+// aria/role into the canonical accessibility* props here, exactly like React's hook does.
+function forwardProps(props) {
+    const forwarded = {
+        ...resolveAccessibilityProps(props),
+    };
+    for (const key of HANDLED_PROPS)
+        delete forwarded[key];
+    return forwarded;
+}
+export function createSwitch(platform) {
+    return function Switch(props) {
+        const [nativeReport, setNativeReport] = createSignal(createInitialSwitchState());
+        // value is a real Fabric prop, folded to a strict boolean: RN sends `value === true`, so an
+        // absent prop reads as "off" rather than riding through as undefined.
+        const fabricValue = () => props.value === true;
+        const handleChange = (event) => {
+            const next = valueFromChange(event);
+            dlog(`Switch onChange value=${String(next)} eventCount=${String(event.nativeEvent.eventCount)}`);
+            if (next === undefined)
+                return;
+            props.onValueChange?.(next, event);
+            setNativeReport(current => switchReducer(current, { type: 'native-reported', value: next }));
+        };
+        // The node is created once and kept by identity — descriptorToSolid wires every prop through a
+        // render effect on this same node, so the imperative command below always has a live target and
+        // never chases a replaced node.
+        const node = descriptorToSolid(() => renderSwitch({
+            value: fabricValue(),
+            disabled: props.disabled,
+            trackColor: props.trackColor,
+            thumbColor: props.thumbColor,
+            ios_backgroundColor: props.ios_backgroundColor,
+            style: props.style,
+            passthrough: { ...forwardProps(props), onChange: handleChange },
+        }, platform));
+        // createEffect, not createRenderEffect: it runs after the tree is built, the same position
+        // React's useLayoutEffect and Vue's flush:'post' watch occupy. The engine commits on a
+        // microtask (renderer.ts's requestCommit), so the node has no Fabric tag yet on the first run —
+        // which is harmless and not worth a whenCommitted retry here, because shouldSnapBack is false
+        // until native has reported, and native cannot report before it exists. Every run that DOES
+        // dispatch is therefore downstream of a native event, i.e. long past the first commit.
+        createEffect(() => {
+            const value = fabricValue();
+            const reported = nativeReport();
+            if (!shouldSnapBack(reported, value)) {
+                dlog(`Switch snap-back no-op reported=${String(reported.lastNativeReport)} value=${value}`);
+                return;
+            }
+            dlog(`Switch ${platform.snapBackCommand} snap-back reported=${String(reported.lastNativeReport)} value=${value}`);
+            dispatchViewCommand(node, platform.snapBackCommand, [value]);
+        });
+        return node;
+    };
+}

package/build/components/text-input.d.ts

@@ -0,0 +1,10 @@
+import type { Ref } from 'solid-js';
+import type { JSX } from '../jsx-runtime';
+import { type ITextInputHandle, type ITextInputProps as ITextInputBaseProps } from '@symbiote-native/components';
+import { type IClassNameValue } from '@symbiote-native/engine';
+export type { ITextInputHandle, ITextInputSelection, } from '@symbiote-native/components';
+export type ITextInputProps = ITextInputBaseProps & {
+    class?: IClassNameValue;
+    ref?: Ref<ITextInputHandle>;
+};
+export declare function TextInput(props: ITextInputProps): JSX.Element;

package/build/components/text-input.js

@@ -0,0 +1,268 @@
+// TextInput — the Solid lifecycle half. The folds/maps (value→text, the W3C/alias resolution) and
+// the controlled-write predicate live in @symbiote-native/components/state; the render (intrinsic +
+// native-prop mapping) in @symbiote-native/components/view. Both are shared verbatim with React,
+// Vue and Svelte. Solid supplies only the reactivity: a signal for the acknowledged event count,
+// setup-scope variables for the host node / the last text native holds / the focus flag, one effect
+// for the controlled write, and the imperative handle handed to `ref`.
+//
+// THE CONTROLLED HANDSHAKE IS NOT A PROP RE-PUSH, and that is the whole subtlety. Native owns its
+// own text and has already changed it by the time the change event arrives. When JS REFUSES that
+// change the `value` prop never changes — so nothing re-commits, and the only thing that can
+// correct native is an imperative setTextAndSelection carrying the ACKNOWLEDGED event count (the
+// one native last reported), which native's eventLag check accepts. Same shape as Switch's
+// snap-back; the counter arithmetic is documented in @symbiote-native/components/state/text-input.
+//
+// A FLAT MODULE, NOT A FOLDER: TextInput has no platform variant to select by filename. The
+// iOS/Android differences (keyboardType, autoComplete vs textContentType, underlineColorAndroid)
+// are resolved platform-AGNOSTICALLY by resolveTextInputProps, which emits both platforms' native
+// props and lets the inert one ride — see its header. Only genuine platform/shared groups get a
+// folder (symbiote-file-layout), so Switch has one and this does not.
+//
+// NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE, so a
+// destructure would freeze the input at its mount-time config; splitProps is the idiomatic split
+// that keeps the rest reactive, and every read below sits inside an accessor, an effect or an event
+// handler. The two deliberate exceptions are marked where they happen.
+import { createEffect, createMemo, createSignal, onCleanup, splitProps, untrack, } from 'solid-js';
+import { eventCountFromChange, foldText, renderTextInput, resolveAccessibilityProps, resolveTextInputProps, shouldCommandText, textFromChange, INITIAL_EVENT_COUNT, SELECTION_NONE, } from '@symbiote-native/components';
+import { blurTextInput, dispatchViewCommand, dlog, setInputBlurred, setInputFocused, whenCommitted, } from '@symbiote-native/engine';
+import { descriptorToSolid } from '../descriptor-to-solid.js';
+// Read by the component itself; everything else forwards onto the host node. onValueChange/onFocus/
+// onBlur must be split off — they are pure JS, and it is our WRAPPED handlers that go on the host
+// (a raw function prop that is not a ViewConfig event crashes Android's folly::dynamic serializer).
+// The alias props (inputMode, enterKeyHint, readOnly, submitBehavior, blurOnSubmit) are inert at
+// the native layer and must be folded, never forwarded raw. Same list as React's destructure.
+const HANDLED_PROPS = [
+    'ref',
+    'value',
+    'defaultValue',
+    'multiline',
+    'selection',
+    'onValueChange',
+    'onFocus',
+    'onBlur',
+    'inputMode',
+    'enterKeyHint',
+    'readOnly',
+    'submitBehavior',
+    'blurOnSubmit',
+    'cursorColor',
+    'selectionColor',
+    'selectionHandleColor',
+    'keyboardType',
+    'returnKeyType',
+    'editable',
+    'autoComplete',
+    'textContentType',
+    'autoFocus',
+    'showSoftInputOnFocus',
+    'underlineColorAndroid',
+];
+export function TextInput(props) {
+    const [local, rest] = splitProps(props, HANDLED_PROPS);
+    // The count native last acknowledged. A signal because two readers need it live: the render (it
+    // rides down as mostRecentEventCount) and the controlled-write effect, which echoes it so
+    // native's eventLag lands on 0 and the write applies instead of being dropped as stale.
+    const [mostRecentEventCount, setMostRecentEventCount] = createSignal(INITIAL_EVENT_COUNT);
+    // The host node, held by IDENTITY in a plain variable — never a store or a deep proxy, which
+    // would be a different key than the one the engine's commit mirror holds, and every command below
+    // would silently no-op (symbiote-engine-core §3). Null only before the first build and after a
+    // multiline swap disposes the old one.
+    let host = null;
+    // The last text native holds, as far as JS knows. Deliberately NOT reactive: the controlled-write
+    // effect both reads and writes it, and a signal would make that a loop. Seeded by a one-time
+    // setup read of the mount-time value — the `text` prop already carries that value down via
+    // createNode, so the FIRST controlled value is not a divergence and must NOT re-command.
+    let lastNativeText = foldText(local.value, local.defaultValue);
+    // Mirrored from the focus/blur pair for isFocused(): native exposes no synchronous focus getter,
+    // so RN's own TextInputState keeps the same flag.
+    let focused = false;
+    // autoFocus fires once, on the first host node that commits; guarded so a later multiline swap
+    // does not steal focus back.
+    let autoFocused = false;
+    // The acknowledged count, read WITHOUT subscribing. The imperative handle can be called from
+    // anywhere, including inside a caller's effect or memo — a tracked read there would silently
+    // enroll their computation in our keystroke counter. React's handle closes over a render value
+    // and has the same non-reactive contract.
+    const acknowledgedCount = () => untrack(mostRecentEventCount);
+    const handleChange = (event) => {
+        // Event seam: the controlled handshake hinges on the change payload carrying `text`
+        // (+ `eventCount`). iOS and Android Fabric can key these differently, so log the actual shape
+        // here; a missing `text` means onValueChange never fires.
+        dlog(`TextInput change keys=[${Object.keys(event.nativeEvent).join(',')}] ` +
+            `text=${JSON.stringify(event.nativeEvent.text)} count=${JSON.stringify(event.nativeEvent.eventCount)}`);
+        const text = textFromChange(event);
+        if (text !== undefined) {
+            // Ordering matters: record the text first, then bump the acknowledged count, so the count
+            // never runs ahead of the text it stands for.
+            lastNativeText = text;
+            local.onValueChange?.(text, event);
+        }
+        const count = eventCountFromChange(event);
+        if (count !== undefined)
+            setMostRecentEventCount(count);
+    };
+    const handleFocus = (event) => {
+        focused = true;
+        // Track focus app-wide so Keyboard.dismiss can blur this input without a ref.
+        if (host !== null)
+            setInputFocused(host);
+        local.onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+        focused = false;
+        if (host !== null)
+            setInputBlurred(host);
+        local.onBlur?.(event);
+    };
+    // One host node for one intrinsic. `multiline` arrives as an ARGUMENT, not as a prop read, so the
+    // descriptor's type is constant for this node's whole lifetime — descriptorToSolid builds the
+    // element once and only diffs prop VALUES afterwards, and a type that changed under it would
+    // throw rather than paint.
+    const buildHost = (multiline) => {
+        const node = descriptorToSolid(() => renderTextInput({
+            multiline,
+            text: foldText(local.value, local.defaultValue),
+            mostRecentEventCount: mostRecentEventCount(),
+            selection: local.selection,
+            folded: resolveTextInputProps({
+                inputMode: local.inputMode,
+                keyboardType: local.keyboardType,
+                enterKeyHint: local.enterKeyHint,
+                returnKeyType: local.returnKeyType,
+                readOnly: local.readOnly,
+                editable: local.editable,
+                submitBehavior: local.submitBehavior,
+                blurOnSubmit: local.blurOnSubmit,
+                multiline,
+                cursorColor: local.cursorColor,
+                selectionColor: local.selectionColor,
+                selectionHandleColor: local.selectionHandleColor,
+                autoComplete: local.autoComplete,
+                textContentType: local.textContentType,
+                showSoftInputOnFocus: local.showSoftInputOnFocus,
+                underlineColorAndroid: local.underlineColorAndroid,
+            }),
+            // TextInput owns its host element rather than rendering through a symbiote View, so it
+            // folds aria/role into the canonical accessibility* props here. The vanished-key widening
+            // that fold needs is descriptorToSolid's job (utils/stable-keys), applied to the whole
+            // Descriptor prop bag — nothing to repeat here.
+            passthrough: {
+                ...resolveAccessibilityProps(rest),
+                onChange: handleChange,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+            },
+        }));
+        host = node;
+        // Dropped together with the computations this build owns, so a command can never aim at a node
+        // that was swapped out and is no longer mounted.
+        onCleanup(() => {
+            if (host === node)
+                host = null;
+        });
+        // autoFocus is driven in JS, not as a native prop (RN does the same via TextInputState.focusInput,
+        // TextInput.js:538). The engine commits on a microtask here (renderer.ts's requestCommit), so at
+        // this point the node has no Fabric tag and a bare dispatchViewCommand would silently no-op —
+        // whenCommitted defers it to the commit that assigns the tag. Cancelled on cleanup so an
+        // un-committed pending focus cannot outlive the node.
+        if (local.autoFocus === true && !autoFocused) {
+            autoFocused = true;
+            dlog('TextInput autoFocus -> focus command');
+            const cancel = whenCommitted(node, () => {
+                dispatchViewCommand(node, 'focus', []);
+            });
+            onCleanup(cancel);
+        }
+        return node;
+    };
+    // Controlled write: when JS-side `value` diverges from what native reported, command the new text
+    // down with the acknowledged count. A plain prop re-push would race the user's keystrokes.
+    //
+    // READING THE COUNT IS LOAD-BEARING, not bookkeeping — it is what makes a REFUSED change snap
+    // back. On a refusal `value` never changes, so a value-only dependency (Vue's watch shape) would
+    // never re-run and native would keep the text JS rejected. The count bumps on every native
+    // change, which is React's `useLayoutEffect` with no deps expressed in Solid's terms.
+    createEffect(() => {
+        const value = local.value;
+        const count = mostRecentEventCount();
+        const selection = local.selection;
+        if (host === null)
+            return;
+        if (!shouldCommandText(lastNativeText, value))
+            return;
+        const selStart = selection?.start ?? SELECTION_NONE;
+        const selEnd = selection?.end ?? selection?.start ?? SELECTION_NONE;
+        dlog(`TextInput setTextAndSelection count=${count} text=${JSON.stringify(value)}`);
+        dispatchViewCommand(host, 'setTextAndSelection', [
+            count,
+            value,
+            selStart,
+            selEnd,
+        ]);
+        lastNativeText = value;
+    });
+    // The imperative API RN exposes on a TextInput ref. focus/blur drive native view commands; clear
+    // and setSelection reuse setTextAndSelection (the same stale-safe path as a controlled write),
+    // echoing the acknowledged count so native applies them. Every method reads `host` LIVE, so a
+    // multiline swap cannot leave the handle pointing at a dead node.
+    const handle = {
+        focus: () => {
+            if (host !== null)
+                dispatchViewCommand(host, 'focus', []);
+        },
+        blur: () => {
+            // Routes through TextInputState so the app-wide focus tracking clears too.
+            blurTextInput(host);
+        },
+        clear: () => {
+            if (host === null)
+                return;
+            dispatchViewCommand(host, 'setTextAndSelection', [
+                acknowledgedCount(),
+                '',
+                0,
+                0,
+            ]);
+            lastNativeText = '';
+        },
+        isFocused: () => focused,
+        setSelection: (start, end) => {
+            if (host === null)
+                return;
+            const current = lastNativeText ?? '';
+            dispatchViewCommand(host, 'setTextAndSelection', [
+                acknowledgedCount(),
+                current,
+                start,
+                end,
+            ]);
+        },
+    };
+    // Single- and multiline are DIFFERENT native views (RCTSinglelineTextInputView vs
+    // RCTMultilineTextInputView), so a runtime flip has to build a new host node rather than re-prop
+    // the old one — React remounts, Vue h()s a new type, Svelte swaps an {#if} branch. The memo is
+    // that swap: `insert` replaces the previous node with the new one and disposes the old build.
+    //
+    // The untrack is load-bearing. Building reads descriptorToSolid's own memo, so without it THIS
+    // memo would subscribe to every prop the render fn touches and rebuild the entire input — new
+    // native view, lost cursor and keyboard — on every keystroke. (Solid's own `createComponent`
+    // untracks for exactly this reason; there is no component here to inherit it from.)
+    const hostTree = createMemo(() => {
+        const multiline = local.multiline === true;
+        return untrack(() => buildHost(multiline));
+    });
+    // Solid's `ref` is a compile-time construct: on a component the compiler has already rewritten
+    // `ref={handle}` into a callback prop by the time we read it, so calling what we were handed is
+    // the whole job (utils/host-ref.ts explains the rewrite). Not applyHostRef, which is typed for a
+    // host node — this ref receives the handle, matching React's forwardRef contract.
+    //
+    // Called AFTER `hostTree` has built at least once, not right after `handle` is constructed -
+    // same reasoning as ScrollView's ref-ordering fix (scroll-view/shared.tsx). `handle`'s methods
+    // read `host` LIVE on every call, so calling ref early never caused a visible bug here (unlike
+    // ScrollView, whose handle a consumer - createAnimatedComponent's resolveHostNode - unwrapped
+    // eagerly, once, at ref-call time). Reordered anyway: a future Animated.TextInput would hit the
+    // same permanently-null capture, and matching the safe ordering now costs nothing.
+    if (typeof local.ref === 'function')
+        local.ref(handle);
+    return hostTree;
+}

package/build/components/text.d.ts

@@ -0,0 +1,26 @@
+import { type Ref } from 'solid-js';
+import type { JSX } from '../jsx-runtime';
+import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+import type { IClassNameValue, IStyleProp, ISymbioteEvent, ITextStyle } from '@symbiote-native/engine';
+import type { IHostInstance } from '../host-instance';
+export interface ITextProps extends IAccessibilityProps, IAriaProps {
+    style?: IStyleProp<ITextStyle>;
+    class?: IClassNameValue;
+    onPress?: (event: ISymbioteEvent) => void;
+    onLongPress?: (event: ISymbioteEvent) => void;
+    onPressIn?: (event: ISymbioteEvent) => void;
+    onPressOut?: (event: ISymbioteEvent) => void;
+    onLayout?: (event: ISymbioteEvent) => void;
+    onTextLayout?: (event: ISymbioteEvent) => void;
+    numberOfLines?: number;
+    ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+    selectable?: boolean;
+    adjustsFontSizeToFit?: boolean;
+    minimumFontScale?: number;
+    allowFontScaling?: boolean;
+    maxFontSizeMultiplier?: number | null;
+    selectionColor?: string;
+    ref?: Ref<IHostInstance>;
+    children?: JSX.Element;
+}
+export declare function Text(props: ITextProps): JSX.Element;

package/build/components/text.jsx

@@ -0,0 +1,27 @@
+// Text — the Solid host primitive for RN's <Text>. Same children/ref idiom as ./view.tsx; read
+// that file's header first, it carries the reasoning both share.
+//
+// THE NESTING (`RCTText` vs `RCTVirtualText`) IS NOT THIS FILE'S JOB, and that is worth stating
+// because it is the one place React's own renderer needs a context. React Native tracks a
+// TextAncestor context so a <Text> inside another <Text> renders as a virtual span instead of a
+// paragraph host. Here the retained tree already knows: the engine's commit walk carries a
+// `hasTextAncestor` flag down and picks the view name itself
+// (`viewNameFor` in core/engine/src/commit.ts — `node.isText && hasTextAncestor` -> RCTVirtualText),
+// and it re-creates the node from scratch when that kind flips. So there is no Solid context, no
+// provider, and nothing for an adapter to thread; every adapter emits the same flat
+// `symbiote-text` and the engine resolves the position-dependent name for all of them. The
+// Solid equivalent of TextAncestorContext is deliberately ABSENT, not missing.
+import { splitProps } from 'solid-js';
+import { resolveAccessibilityProps, resolveTextProps, } from '@symbiote-native/components';
+import { applyHostRef } from '../utils/host-ref.js';
+import { withStableKeys } from '../utils/stable-keys.js';
+export function Text(props) {
+    const [local, rest] = splitProps(props, ['children', 'ref']);
+    const bag = withStableKeys(() => resolveTextProps({ ...resolveAccessibilityProps(rest) }));
+    const attachRef = (node) => {
+        applyHostRef(local.ref, node);
+    };
+    return (<symbiote-text ref={attachRef} {...bag()}>
+      {local.children}
+    </symbiote-text>);
+}

package/build/components/touchable/index.d.ts

@@ -0,0 +1,22 @@
+import type { JSX } from '../../jsx-runtime';
+import { type IPressTimingProps } from '@symbiote-native/components';
+import { type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+import { type IPressableProps } from '../pressable';
+type ITouchableBaseProps = Omit<IPressableProps, 'style' | 'children'> & IPressTimingProps & {
+    style?: IStyleProp<IViewStyle>;
+    children?: JSX.Element;
+};
+export interface ITouchableOpacityProps extends ITouchableBaseProps {
+    activeOpacity?: number;
+}
+export declare function TouchableOpacity(props: ITouchableOpacityProps): JSX.Element;
+export interface ITouchableHighlightProps extends ITouchableBaseProps {
+    activeOpacity?: number;
+    underlayColor?: string;
+    onShowUnderlay?: () => void;
+    onHideUnderlay?: () => void;
+}
+export declare function TouchableHighlight(props: ITouchableHighlightProps): JSX.Element;
+export type ITouchableWithoutFeedbackProps = ITouchableBaseProps;
+export declare function TouchableWithoutFeedback(props: ITouchableWithoutFeedbackProps): JSX.Element;
+export {};