@reactvision/react-viro 2.42.0 → 2.43.1

package/dist/fabric-interop/components/ViroARPlane.d.ts

@@ -0,0 +1,24 @@
+/**
+ * ViroARPlane
+ *
+ * A component for rendering AR planes detected by the AR system.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroARPlaneProps extends ViroCommonProps {
+    alignment?: "Horizontal" | "Vertical";
+    minHeight?: number;
+    minWidth?: number;
+    visible?: boolean;
+    opacity?: number;
+    materials?: string | string[];
+    onAnchorFound?: () => void;
+    onAnchorUpdated?: () => void;
+    onAnchorRemoved?: () => void;
+    children?: React.ReactNode;
+}
+/**
+ * ViroARPlane is a component for rendering AR planes detected by the AR system.
+ * It represents a real-world surface detected by the AR system, such as a floor, table, or wall.
+ */
+export declare const ViroARPlane: React.FC<ViroARPlaneProps>;

package/dist/fabric-interop/components/ViroARPlane.js

@@ -0,0 +1,88 @@
+"use strict";
+/**
+ * ViroARPlane
+ *
+ * A component for rendering AR planes detected by the AR system.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroARPlane = void 0;
+const react_1 = __importDefault(require("react"));
+const ViroUtils_1 = require("./ViroUtils");
+const ViroGlobal_1 = require("./ViroGlobal");
+/**
+ * ViroARPlane is a component for rendering AR planes detected by the AR system.
+ * It represents a real-world surface detected by the AR system, such as a floor, table, or wall.
+ */
+const ViroARPlane = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        alignment: props.alignment,
+        minHeight: props.minHeight,
+        minWidth: props.minWidth,
+        visible: props.visible,
+        opacity: props.opacity,
+        materials: props.materials,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("arPlane", nativeProps);
+    // Register event handlers
+    react_1.default.useEffect(() => {
+        const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+        if (!nativeViro)
+            return;
+        const eventHandlers = [
+            { name: "onAnchorFound", handler: props.onAnchorFound },
+            { name: "onAnchorUpdated", handler: props.onAnchorUpdated },
+            { name: "onAnchorRemoved", handler: props.onAnchorRemoved },
+            { name: "onHover", handler: props.onHover },
+            { name: "onClick", handler: props.onClick },
+            { name: "onClickState", handler: props.onClickState },
+            { name: "onTouch", handler: props.onTouch },
+            { name: "onDrag", handler: props.onDrag },
+            { name: "onPinch", handler: props.onPinch },
+            { name: "onRotate", handler: props.onRotate },
+        ];
+        // Register all event handlers and store callback IDs for cleanup
+        const registeredCallbacks = eventHandlers
+            .filter(({ handler }) => !!handler)
+            .map(({ name, handler }) => {
+            const callbackId = `${nodeId}_${name}`;
+            // Register the callback in the global registry
+            if (typeof global !== "undefined" && global.registerViroEventCallback) {
+                global.registerViroEventCallback(callbackId, handler);
+            }
+            // Register with native code
+            nativeViro.registerEventCallback(nodeId, name, callbackId);
+            return { name, callbackId };
+        });
+        // Cleanup when unmounting
+        return () => {
+            const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+            if (!nativeViro)
+                return;
+            // Unregister all event handlers
+            registeredCallbacks.forEach(({ name, callbackId }) => {
+                nativeViro.unregisterEventCallback(nodeId, name, callbackId);
+            });
+        };
+    }, [
+        nodeId,
+        props.onAnchorFound,
+        props.onAnchorUpdated,
+        props.onAnchorRemoved,
+        props.onHover,
+        props.onClick,
+        props.onClickState,
+        props.onTouch,
+        props.onDrag,
+        props.onPinch,
+        props.onRotate,
+    ]);
+    // Render children with this AR plane as their parent
+    return (<ViroUtils_1.ViroContextProvider value={nodeId}>{props.children}</ViroUtils_1.ViroContextProvider>);
+};
+exports.ViroARPlane = ViroARPlane;

package/dist/fabric-interop/components/ViroARScene.d.ts

@@ -0,0 +1,29 @@
+/**
+ * ViroARScene
+ *
+ * A specialized scene for AR content that uses the device's camera as a background.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroARSceneProps extends ViroCommonProps {
+    anchorDetectionTypes?: ("PlanesHorizontal" | "PlanesVertical" | "Faces")[];
+    planeDetectionEnabled?: boolean;
+    lightReceivingBitMask?: number;
+    shadowCastingBitMask?: number;
+    physicsWorld?: {
+        gravity?: [number, number, number];
+    };
+    postProcessEffects?: string[];
+    onTrackingUpdated?: (event: any) => void;
+    onAmbientLightUpdate?: (event: any) => void;
+    onPlatformUpdate?: (event: any) => void;
+    onCameraTransformUpdate?: (event: any) => void;
+    onAnchorFound?: (event: any) => void;
+    onAnchorUpdated?: (event: any) => void;
+    onAnchorRemoved?: (event: any) => void;
+    children?: React.ReactNode;
+}
+/**
+ * ViroARScene is a specialized scene for AR content that uses the device's camera as a background.
+ */
+export declare const ViroARScene: React.FC<ViroARSceneProps>;

package/dist/fabric-interop/components/ViroARScene.js

@@ -0,0 +1,89 @@
+"use strict";
+/**
+ * ViroARScene
+ *
+ * A specialized scene for AR content that uses the device's camera as a background.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroARScene = void 0;
+const react_1 = __importDefault(require("react"));
+const ViroUtils_1 = require("./ViroUtils");
+const ViroGlobal_1 = require("./ViroGlobal");
+/**
+ * ViroARScene is a specialized scene for AR content that uses the device's camera as a background.
+ */
+const ViroARScene = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        anchorDetectionTypes: props.anchorDetectionTypes,
+        planeDetectionEnabled: props.planeDetectionEnabled,
+        lightReceivingBitMask: props.lightReceivingBitMask,
+        shadowCastingBitMask: props.shadowCastingBitMask,
+        physicsWorld: props.physicsWorld,
+        postProcessEffects: props.postProcessEffects,
+        onTrackingUpdated: props.onTrackingUpdated ? true : undefined,
+        onAmbientLightUpdate: props.onAmbientLightUpdate ? true : undefined,
+        onPlatformUpdate: props.onPlatformUpdate ? true : undefined,
+        onCameraTransformUpdate: props.onCameraTransformUpdate ? true : undefined,
+        onAnchorFound: props.onAnchorFound ? true : undefined,
+        onAnchorUpdated: props.onAnchorUpdated ? true : undefined,
+        onAnchorRemoved: props.onAnchorRemoved ? true : undefined,
+    };
+    // Create the AR scene node - this is a root node, so no parent
+    const nodeId = (0, ViroUtils_1.useViroNode)("arScene", nativeProps);
+    // Register event handlers
+    react_1.default.useEffect(() => {
+        const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+        if (!nativeViro)
+            return;
+        // Register event handlers if provided
+        const eventHandlers = [
+            { name: "onTrackingUpdated", handler: props.onTrackingUpdated },
+            { name: "onAmbientLightUpdate", handler: props.onAmbientLightUpdate },
+            { name: "onPlatformUpdate", handler: props.onPlatformUpdate },
+            {
+                name: "onCameraTransformUpdate",
+                handler: props.onCameraTransformUpdate,
+            },
+            { name: "onAnchorFound", handler: props.onAnchorFound },
+            { name: "onAnchorUpdated", handler: props.onAnchorUpdated },
+            { name: "onAnchorRemoved", handler: props.onAnchorRemoved },
+        ];
+        // Register all event handlers
+        const registeredCallbacks = eventHandlers
+            .filter(({ handler }) => !!handler)
+            .map(({ name, handler }) => {
+            const callbackId = `${nodeId}_${name}`;
+            nativeViro.registerEventCallback(nodeId, name, callbackId);
+            return { name, callbackId };
+        });
+        // Cleanup when unmounting
+        return () => {
+            const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+            if (!nativeViro)
+                return;
+            // Unregister all event handlers
+            registeredCallbacks.forEach(({ name, callbackId }) => {
+                nativeViro.unregisterEventCallback(nodeId, name, callbackId);
+            });
+        };
+    }, [
+        nodeId,
+        props.onTrackingUpdated,
+        props.onAmbientLightUpdate,
+        props.onPlatformUpdate,
+        props.onCameraTransformUpdate,
+        props.onAnchorFound,
+        props.onAnchorUpdated,
+        props.onAnchorRemoved,
+    ]);
+    // Render children with this scene as their parent
+    return (<ViroUtils_2.ViroContextProvider value={nodeId}>{props.children}</ViroUtils_2.ViroContextProvider>);
+};
+exports.ViroARScene = ViroARScene;
+// Import ViroContextProvider at the top level to avoid circular dependencies
+const ViroUtils_2 = require("./ViroUtils");

package/dist/fabric-interop/components/ViroARSceneNavigator.d.ts

@@ -0,0 +1,29 @@
+/**
+ * ViroARSceneNavigator
+ *
+ * A component for rendering AR scenes.
+ */
+import React from "react";
+export interface ViroARSceneNavigatorProps {
+    initialScene: {
+        scene: React.ComponentType<any>;
+    };
+    autofocus?: boolean;
+    worldAlignment?: "Gravity" | "GravityAndHeading" | "Camera";
+    videoQuality?: "High" | "Low";
+    planeDetection?: {
+        horizontal?: boolean;
+        vertical?: boolean;
+    };
+    onTrackingUpdated?: (event: {
+        state: string;
+        reason?: string;
+    }) => void;
+    onARSessionFailed?: (error: string) => void;
+    style?: React.CSSProperties;
+}
+/**
+ * ViroARSceneNavigator is a component for rendering AR scenes.
+ * It provides a container for AR scenes and handles the AR session lifecycle.
+ */
+export declare const ViroARSceneNavigator: React.FC<ViroARSceneNavigatorProps>;

package/dist/fabric-interop/components/ViroARSceneNavigator.js

@@ -0,0 +1,76 @@
+"use strict";
+/**
+ * ViroARSceneNavigator
+ *
+ * A component for rendering AR scenes.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroARSceneNavigator = void 0;
+const react_1 = __importStar(require("react"));
+const ViroFabricContainer_1 = require("../ViroFabricContainer");
+const ViroGlobal_1 = require("./ViroGlobal");
+/**
+ * ViroARSceneNavigator is a component for rendering AR scenes.
+ * It provides a container for AR scenes and handles the AR session lifecycle.
+ */
+const ViroARSceneNavigator = (props) => {
+    // Initialize AR session
+    (0, react_1.useEffect)(() => {
+        const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+        if (!nativeViro)
+            return;
+        // Initialize Viro (no API key needed)
+        nativeViro.initialize();
+        // Set plane detection
+        if (props.planeDetection) {
+            nativeViro.setViroARPlaneDetection({
+                horizontal: props.planeDetection.horizontal ?? false,
+                vertical: props.planeDetection.vertical ?? false,
+            });
+        }
+        // Cleanup when unmounting
+        return () => {
+            // Cleanup code here
+        };
+    }, [props.planeDetection]);
+    // Create the scene component
+    const SceneComponent = props.initialScene.scene;
+    // Render the AR scene
+    return (<ViroFabricContainer_1.ViroFabricContainer style={props.style} arEnabled={true} autofocus={props.autofocus} worldAlignment={props.worldAlignment} videoQuality={props.videoQuality} onTrackingUpdated={props.onTrackingUpdated} onARSessionFailed={props.onARSessionFailed}>
+      <SceneComponent />
+    </ViroFabricContainer_1.ViroFabricContainer>);
+};
+exports.ViroARSceneNavigator = ViroARSceneNavigator;

package/dist/fabric-interop/components/ViroAmbientLight.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ViroAmbientLight
+ *
+ * A component for adding ambient lighting to a scene.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroAmbientLightProps extends ViroCommonProps {
+    color?: string;
+    intensity?: number;
+    temperature?: number;
+    influenceBitMask?: number;
+}
+/**
+ * ViroAmbientLight is a component for adding ambient lighting to a scene.
+ * Ambient light is a type of light that illuminates all objects in the scene equally,
+ * regardless of their position or orientation.
+ */
+export declare const ViroAmbientLight: React.FC<ViroAmbientLightProps>;

package/dist/fabric-interop/components/ViroAmbientLight.js

@@ -0,0 +1,46 @@
+"use strict";
+/**
+ * ViroAmbientLight
+ *
+ * A component for adding ambient lighting to a scene.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroAmbientLight = void 0;
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * ViroAmbientLight is a component for adding ambient lighting to a scene.
+ * Ambient light is a type of light that illuminates all objects in the scene equally,
+ * regardless of their position or orientation.
+ */
+const ViroAmbientLight = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        color: props.color,
+        intensity: props.intensity,
+        temperature: props.temperature,
+        influenceBitMask: props.influenceBitMask,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("ambientLight", nativeProps);
+    // Register event handlers using our new event system
+    (0, ViroUtils_1.useViroEventListeners)(nodeId, {
+        onHover: props.onHover,
+        onClick: props.onClick,
+        onClickState: props.onClickState,
+        onTouch: props.onTouch,
+        onScroll: props.onScroll,
+        onSwipe: props.onSwipe,
+        onDrag: props.onDrag,
+        onPinch: props.onPinch,
+        onRotate: props.onRotate,
+        onFuse: typeof props.onFuse === "function"
+            ? props.onFuse
+            : props.onFuse?.callback,
+        onCollision: props.onCollision,
+        onTransformUpdate: props.onTransformUpdate,
+    });
+    // Ambient light doesn't have children, so just return null
+    return null;
+};
+exports.ViroAmbientLight = ViroAmbientLight;

package/dist/fabric-interop/components/ViroAnimatedComponent.d.ts

@@ -0,0 +1,24 @@
+/**
+ * ViroAnimatedComponent
+ *
+ * A component wrapper for adding animations to Viro components.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroAnimatedComponentProps extends ViroCommonProps {
+    animation?: {
+        name?: string;
+        delay?: number;
+        loop?: boolean;
+        onStart?: () => void;
+        onFinish?: () => void;
+        run?: boolean;
+        interruptible?: boolean;
+    };
+    children?: React.ReactNode;
+}
+/**
+ * ViroAnimatedComponent is a wrapper for adding animations to Viro components.
+ * It provides animation capabilities to its children.
+ */
+export declare const ViroAnimatedComponent: React.FC<ViroAnimatedComponentProps>;

package/dist/fabric-interop/components/ViroAnimatedComponent.js

@@ -0,0 +1,63 @@
+"use strict";
+/**
+ * ViroAnimatedComponent
+ *
+ * A component wrapper for adding animations to Viro components.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroAnimatedComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const ViroUtils_1 = require("./ViroUtils");
+const ViroGlobal_1 = require("./ViroGlobal");
+/**
+ * ViroAnimatedComponent is a wrapper for adding animations to Viro components.
+ * It provides animation capabilities to its children.
+ */
+const ViroAnimatedComponent = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        animation: props.animation,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("animatedComponent", nativeProps);
+    // Register animation event handlers
+    react_1.default.useEffect(() => {
+        const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+        if (!nativeViro || !props.animation)
+            return;
+        const eventHandlers = [
+            { name: "onAnimationStart", handler: props.animation.onStart },
+            { name: "onAnimationFinish", handler: props.animation.onFinish },
+        ];
+        // Register all event handlers and store callback IDs for cleanup
+        const registeredCallbacks = eventHandlers
+            .filter(({ handler }) => !!handler)
+            .map(({ name, handler }) => {
+            const callbackId = `${nodeId}_${name}`;
+            // Register the callback in the global registry
+            if (typeof global !== "undefined" && global.registerViroEventCallback) {
+                global.registerViroEventCallback(callbackId, handler);
+            }
+            // Register with native code
+            nativeViro.registerEventCallback(nodeId, name, callbackId);
+            return { name, callbackId };
+        });
+        // Cleanup when unmounting
+        return () => {
+            const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+            if (!nativeViro)
+                return;
+            // Unregister all event handlers
+            registeredCallbacks.forEach(({ name, callbackId }) => {
+                nativeViro.unregisterEventCallback(nodeId, name, callbackId);
+            });
+        };
+    }, [nodeId, props.animation?.onStart, props.animation?.onFinish]);
+    // Render children with this animated component as their parent
+    return (<ViroUtils_1.ViroContextProvider value={nodeId}>{props.children}</ViroUtils_1.ViroContextProvider>);
+};
+exports.ViroAnimatedComponent = ViroAnimatedComponent;

package/dist/fabric-interop/components/ViroAnimatedImage.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ViroAnimatedImage
+ *
+ * A component for displaying animated images.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroAnimatedImageProps extends ViroCommonProps {
+    source: {
+        uri: string;
+    }[] | number[];
+    loop?: boolean;
+    delay?: number;
+    visible?: boolean;
+    opacity?: number;
+    width?: number;
+    height?: number;
+    materials?: string | string[];
+    onLoadStart?: () => void;
+    onLoadEnd?: () => void;
+    onError?: (error: string) => void;
+    onFinish?: () => void;
+}
+/**
+ * ViroAnimatedImage is a component for displaying animated images.
+ * It can be used to create simple animations by cycling through a series of images.
+ */
+export declare const ViroAnimatedImage: React.FC<ViroAnimatedImageProps>;

package/dist/fabric-interop/components/ViroAnimatedImage.js

@@ -0,0 +1,49 @@
+"use strict";
+/**
+ * ViroAnimatedImage
+ *
+ * A component for displaying animated images.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroAnimatedImage = void 0;
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * ViroAnimatedImage is a component for displaying animated images.
+ * It can be used to create simple animations by cycling through a series of images.
+ */
+const ViroAnimatedImage = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        source: props.source,
+        loop: props.loop,
+        delay: props.delay,
+        visible: props.visible,
+        opacity: props.opacity,
+        width: props.width,
+        height: props.height,
+        materials: props.materials,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("animatedImage", nativeProps);
+    // Register event handlers using our new event system
+    (0, ViroUtils_1.useViroEventListeners)(nodeId, {
+        onHover: props.onHover,
+        onClick: props.onClick,
+        onClickState: props.onClickState,
+        onTouch: props.onTouch,
+        onScroll: props.onScroll,
+        onSwipe: props.onSwipe,
+        onDrag: props.onDrag,
+        onPinch: props.onPinch,
+        onRotate: props.onRotate,
+        onFuse: typeof props.onFuse === "function"
+            ? props.onFuse
+            : props.onFuse?.callback,
+        onCollision: props.onCollision,
+        onTransformUpdate: props.onTransformUpdate,
+    });
+    // Component doesn't have children, so just return null
+    return null;
+};
+exports.ViroAnimatedImage = ViroAnimatedImage;

package/dist/fabric-interop/components/ViroBox.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ViroBox
+ *
+ * A 3D box component with customizable dimensions and materials.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroBoxProps extends ViroCommonProps {
+    width?: number;
+    height?: number;
+    length?: number;
+    materials?: string | string[];
+    lightReceivingBitMask?: number;
+    shadowCastingBitMask?: number;
+    highAccuracyEvents?: boolean;
+}
+/**
+ * ViroBox is a 3D box component with customizable dimensions and materials.
+ */
+export declare const ViroBox: React.FC<ViroBoxProps>;

package/dist/fabric-interop/components/ViroBox.js

@@ -0,0 +1,47 @@
+"use strict";
+/**
+ * ViroBox
+ *
+ * A 3D box component with customizable dimensions and materials.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroBox = void 0;
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * ViroBox is a 3D box component with customizable dimensions and materials.
+ */
+const ViroBox = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        width: props.width ?? 1,
+        height: props.height ?? 1,
+        length: props.length ?? 1,
+        materials: props.materials,
+        lightReceivingBitMask: props.lightReceivingBitMask,
+        shadowCastingBitMask: props.shadowCastingBitMask,
+        highAccuracyEvents: props.highAccuracyEvents,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("box", nativeProps);
+    // Register event handlers using our new event system
+    (0, ViroUtils_1.useViroEventListeners)(nodeId, {
+        onHover: props.onHover,
+        onClick: props.onClick,
+        onClickState: props.onClickState,
+        onTouch: props.onTouch,
+        onScroll: props.onScroll,
+        onSwipe: props.onSwipe,
+        onDrag: props.onDrag,
+        onPinch: props.onPinch,
+        onRotate: props.onRotate,
+        onFuse: typeof props.onFuse === "function"
+            ? props.onFuse
+            : props.onFuse?.callback,
+        onCollision: props.onCollision,
+        onTransformUpdate: props.onTransformUpdate,
+    });
+    // Box doesn't have children, so just return null
+    return null;
+};
+exports.ViroBox = ViroBox;

package/dist/fabric-interop/components/ViroButton.d.ts

@@ -0,0 +1,32 @@
+/**
+ * ViroButton
+ *
+ * A component for creating interactive buttons in 3D space.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroButtonProps extends ViroCommonProps {
+    source: {
+        uri: string;
+    } | number;
+    hoverSource?: {
+        uri: string;
+    } | number;
+    clickSource?: {
+        uri: string;
+    } | number;
+    gazeSource?: {
+        uri: string;
+    } | number;
+    width?: number;
+    height?: number;
+    materials?: string | string[];
+    lightReceivingBitMask?: number;
+    shadowCastingBitMask?: number;
+    children?: React.ReactNode;
+}
+/**
+ * ViroButton is a component for creating interactive buttons in 3D space.
+ * It provides visual feedback for different interaction states.
+ */
+export declare const ViroButton: React.FC<ViroButtonProps>;