react-two.js 0.2.4 → 0.8.22-r.2

package/README.md

@@ -67,8 +67,8 @@ npm install react-two.js react react-dom two.js
 ```
 
 **Requirements** as peer dependencies:
-- React 18.3+
-- Two.js v0.8.21+
+- React 19+
+- Two.js v0.8.22+
 
 > [!IMPORTANT]
 > react-two.js is a React renderer, it must pair with a major version of React, like react-dom.
@@ -96,6 +96,25 @@ function App() {
 }
 ```
 
+> [!IMPORTANT]
+> **Canvas Children Restrictions:** Similar to [react-three-fiber](https://github.com/pmndrs/react-three-fiber), the `<Canvas>` component only accepts react-two.js components as children. DOM elements like `<div>` or `<span>` cannot be used inside Canvas. Place UI elements outside the Canvas:
+>
+> ```jsx
+> // ✅ Correct
+> <div>
+>   <Canvas>
+>     <Circle radius={50} />
+>   </Canvas>
+>   <div className="controls">UI here</div>
+> </div>
+>
+> // ❌ Incorrect - will trigger warnings
+> <Canvas>
+>   <div>This will warn</div>
+>   <Circle radius={50} />
+> </Canvas>
+> ```
+
 ### Adding Shapes
 
 All Two.js primitives are available as React components:
@@ -139,10 +158,11 @@ function Component() {
   const { two, width, height } = useTwo()
 
   useEffect(() => {
+    if (!two) return;
     two.play();
     console.log('Canvas size:', width, height)
     console.log('Two.js instance:', instance)
-  }, [])
+  }, [two])
 }
 ```
 
@@ -170,6 +190,7 @@ function Component() {
 - **`<Text>`** — Text rendering
 
 #### Advanced
+- **`<SVG>`** — Load and interpret SVG files or inline SVG markup
 - **`<Image>`** - Basic image class inspired by Figma
 - **`<Sprite>`** — Animated sprite sheets
 - **`<ImageSequence>`** — Animated image sequence
@@ -288,6 +309,75 @@ function () {
 }
 ```
 
+### Loading SVG Files
+
+Load external SVG files or use inline SVG markup with the `<SVG>` component:
+
+```jsx
+import { SVG } from 'react-two.js'
+
+// Load from external URL
+function Logo() {
+  return (
+    <SVG
+      src="/assets/logo.svg"
+      x={100}
+      y={100}
+      onLoad={(group, svg) => {
+        console.log('SVG loaded with', group.children.length, 'objects')
+      }}
+      onError={(error) => {
+        console.error('Failed to load SVG:', error)
+      }}
+    />
+  )
+}
+
+// Use inline SVG markup
+function Icon() {
+  return (
+    <SVG
+      content={`
+        <svg viewBox="0 0 100 100">
+          <circle cx="50" cy="50" r="40" fill="#FF6B6B" />
+          <circle cx="35" cy="40" r="8" fill="white" />
+          <circle cx="65" cy="40" r="8" fill="white" />
+        </svg>
+      `}
+      x={200}
+      y={200}
+      scale={0.5}
+    />
+  )
+}
+
+// Animate loaded SVG
+function AnimatedIcon() {
+  const svgRef = useRef()
+
+  useFrame((elapsed) => {
+    if (svgRef.current) {
+      svgRef.current.rotation = Math.sin(elapsed) * 0.5
+      svgRef.current.scale = 1 + Math.sin(elapsed * 2) * 0.1
+    }
+  })
+
+  return <SVG ref={svgRef} src="/icon.svg" x={400} y={300} />
+}
+```
+
+**SVG Props:**
+- `src` — URL to external .svg file
+- `content` — Inline SVG markup string
+- `x`, `y` — Position
+- `scale`, `rotation` — Transform properties
+- `onLoad(group, svg)` — Callback when SVG loads successfully
+- `onError(error)` — Callback when loading fails
+- All Two.js Group properties (fill, stroke, opacity, etc.)
+
+> [!NOTE]
+> The SVG component uses Two.js's `load()` method which supports a subset of SVG 1.1 features. Complex SVG features like filters, animations (SMIL), and some advanced elements may not be fully supported. Refer to [Two.js SVG documentation](https://two.js.org/docs/two/#two-interpret) for details on supported features.
+
 ## Learn More
 
 - **[Two.js Documentation](https://two.js.org/docs/)** — Complete Two.js API reference

package/dist/ArcSegment.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { ArcSegment as Instance } from 'two.js/src/shapes/arc-segment';
+import { type EventHandlers } from './Properties';
 export type RefArcSegment = Instance;
 export declare const ArcSegment: React.ForwardRefExoticComponent<{
+    visible?: boolean | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -21,7 +23,6 @@ export declare const ArcSegment: React.ForwardRefExoticComponent<{
     stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
     linewidth?: number | undefined;
     opacity?: number | undefined;
-    visible?: boolean | undefined;
     cap?: import("two.js/src/path").CapProperties | undefined;
     join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
@@ -42,6 +43,6 @@ export declare const ArcSegment: React.ForwardRefExoticComponent<{
     x?: number;
     y?: number;
     resolution?: number;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;

package/dist/Circle.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { Circle as Instance } from 'two.js/src/shapes/circle';
+import { type EventHandlers } from './Properties';
 export type RefCircle = Instance;
 export declare const Circle: React.ForwardRefExoticComponent<{
+    visible?: boolean | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -21,7 +23,6 @@ export declare const Circle: React.ForwardRefExoticComponent<{
     stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
     linewidth?: number | undefined;
     opacity?: number | undefined;
-    visible?: boolean | undefined;
     cap?: import("two.js/src/path").CapProperties | undefined;
     join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
@@ -39,6 +40,6 @@ export declare const Circle: React.ForwardRefExoticComponent<{
     x?: number;
     y?: number;
     resolution?: number;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;

package/dist/Context.d.ts

@@ -1,15 +1,15 @@
 import Two from 'two.js';
 import type { Group } from 'two.js/src/group';
-export declare const Context: import("react").Context<{
+import type { Shape } from 'two.js/src/shape';
+import type { EventHandlers } from './Events';
+export interface TwoContext {
     two: Two | null;
     parent: Group | null;
     width: number;
     height: number;
-}>;
-export declare const useTwo: () => {
-    two: Two | null;
-    parent: Group | null;
-    width: number;
-    height: number;
-};
+    registerEventShape: (shape: Shape | Group, handlers: Partial<EventHandlers>, parent?: Group) => void;
+    unregisterEventShape: (shape: Shape | Group) => void;
+}
+export declare const Context: import("react").Context<TwoContext>;
+export declare const useTwo: () => TwoContext;
 export declare const useFrame: (callback: (elapsed: number, frameDelta: number) => void, deps?: unknown[]) => void;

package/dist/Ellipse.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { Ellipse as Instance } from 'two.js/src/shapes/ellipse';
+import { type EventHandlers } from './Properties';
 export type RefEllipse = Instance;
 export declare const Ellipse: React.ForwardRefExoticComponent<{
+    visible?: boolean | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -21,7 +23,6 @@ export declare const Ellipse: React.ForwardRefExoticComponent<{
     stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
     linewidth?: number | undefined;
     opacity?: number | undefined;
-    visible?: boolean | undefined;
     cap?: import("two.js/src/path").CapProperties | undefined;
     join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
@@ -40,6 +41,6 @@ export declare const Ellipse: React.ForwardRefExoticComponent<{
     x?: number;
     y?: number;
     resolution?: number;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance | null>>;

package/dist/Events.d.ts

@@ -0,0 +1,97 @@
+/**
+ * Event system for react-two.js
+ * Implements R3F-style event handlers using Two.js hit testing
+ */
+import Two from 'two.js';
+import type { Shape } from 'two.js/src/shape';
+import type { Group } from 'two.js/src/group';
+/**
+ * Event object passed to event handlers
+ * Similar to React Three Fiber's ThreeEvent
+ */
+export interface TwoEvent<T = Shape> {
+    /** The original DOM event */
+    nativeEvent: PointerEvent | MouseEvent | WheelEvent;
+    /** The shape that was directly hit */
+    target: T;
+    /** The shape that has the event handler (may be ancestor due to bubbling) */
+    currentTarget: T;
+    /** The point in Two.js coordinate space (center origin) */
+    point: {
+        x: number;
+        y: number;
+    };
+    /** Stop event from bubbling to parent groups */
+    stopPropagation: () => void;
+    /** Whether propagation was stopped */
+    stopped: boolean;
+}
+/**
+ * Event handler function type
+ */
+export type EventHandler<T = Shape> = (event: TwoEvent<T>) => void;
+/**
+ * All supported event handlers (matching R3F API)
+ */
+export interface EventHandlers {
+    onClick?: EventHandler;
+    onContextMenu?: EventHandler;
+    onDoubleClick?: EventHandler;
+    onWheel?: EventHandler;
+    onPointerDown?: EventHandler;
+    onPointerUp?: EventHandler;
+    onPointerOver?: EventHandler;
+    onPointerOut?: EventHandler;
+    onPointerEnter?: EventHandler;
+    onPointerLeave?: EventHandler;
+    onPointerMove?: EventHandler;
+    onPointerCancel?: EventHandler;
+}
+/**
+ * Event handler names for iteration
+ */
+export declare const EVENT_HANDLER_NAMES: readonly ["onClick", "onContextMenu", "onDoubleClick", "onWheel", "onPointerDown", "onPointerUp", "onPointerOver", "onPointerOut", "onPointerEnter", "onPointerLeave", "onPointerMove", "onPointerCancel"];
+/**
+ * Shape registration entry for event system
+ */
+export interface EventShape {
+    shape: Shape | Group;
+    handlers: Partial<EventHandlers>;
+    parent?: Group;
+}
+/**
+ * Convert DOM event coordinates to Two.js coordinate space
+ * Two.js uses center origin (0,0 at center of canvas)
+ */
+export declare function getCanvasCoordinates(nativeEvent: PointerEvent | MouseEvent, canvas: HTMLElement, two: Two): {
+    x: number;
+    y: number;
+};
+/**
+ * Convert DOM event coordinates to world-space coordinates for hit testing
+ * World-space uses top-left origin (same as DOM but relative to canvas)
+ */
+export declare function getWorldCoordinates(nativeEvent: PointerEvent | MouseEvent, canvas: HTMLElement): {
+    x: number;
+    y: number;
+};
+/**
+ * Create a TwoEvent object from a DOM event
+ */
+export declare function createTwoEvent<T extends Shape | Group>(nativeEvent: PointerEvent | MouseEvent | WheelEvent, target: T, currentTarget: T, point: {
+    x: number;
+    y: number;
+}): TwoEvent<T>;
+/**
+ * Check if a shape contains a point using Two.js hit testing
+ */
+export declare function hitTest(shape: Shape | Group, x: number, y: number): boolean;
+/**
+ * Get all shapes at a point, sorted by depth (front to back)
+ * Uses scene graph traversal to maintain z-order
+ */
+export declare function getShapesAtPoint(shapes: Map<Shape | Group, EventShape>, x: number, y: number): Array<Shape | Group>;
+/**
+ * Get the parent hierarchy for event bubbling
+ */
+export declare function getParentHierarchy(shape: Shape | Group, shapes: Map<Shape | Group, EventShape>): Array<Shape | Group>;

package/dist/Group.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Group as Instance } from 'two.js/src/group';
+import { type EventHandlers } from './Properties';
 export type RefGroup = Instance;
 export declare const Group: React.ForwardRefExoticComponent<{
     renderer?: {
@@ -29,6 +30,6 @@ export declare const Group: React.ForwardRefExoticComponent<{
 } & {
     x?: number;
     y?: number;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;

package/dist/Image.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { Image as Instance } from 'two.js/src/effects/image';
 import type { Texture } from 'two.js/src/effects/texture';
+import { type EventHandlers } from './Properties';
 export type RefImage = Instance;
 export declare const Image: React.ForwardRefExoticComponent<{
+    visible?: boolean | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -22,7 +24,6 @@ export declare const Image: React.ForwardRefExoticComponent<{
     stroke?: string | import("two.js/src/effects/gradient").Gradient | Texture | undefined;
     linewidth?: number | undefined;
     opacity?: number | undefined;
-    visible?: boolean | undefined;
     cap?: import("two.js/src/path").CapProperties | undefined;
     join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
@@ -43,7 +44,8 @@ export declare const Image: React.ForwardRefExoticComponent<{
     x?: number;
     y?: number;
     mode?: string;
+    src?: string | Texture;
     texture?: Texture;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;

package/dist/ImageSequence.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { ImageSequence as Instance } from 'two.js/src/effects/image-sequence';
 import type { Texture } from 'two.js/src/effects/texture';
+import { type EventHandlers } from './Properties';
 export type RefImageSequence = Instance;
 export declare const ImageSequence: React.ForwardRefExoticComponent<{
+    visible?: boolean | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -22,7 +24,6 @@ export declare const ImageSequence: React.ForwardRefExoticComponent<{
     stroke?: string | import("two.js/src/effects/gradient").Gradient | Texture | undefined;
     linewidth?: number | undefined;
     opacity?: number | undefined;
-    visible?: boolean | undefined;
     cap?: import("two.js/src/path").CapProperties | undefined;
     join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
@@ -41,10 +42,10 @@ export declare const ImageSequence: React.ForwardRefExoticComponent<{
     frameRate?: number | undefined;
     index?: number | undefined;
 } & {
-    paths?: string | string[] | Texture | Texture[];
+    src?: string | string[] | Texture | Texture[];
     x?: number;
     y?: number;
     autoPlay?: boolean;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;

package/dist/Line.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { Line as Instance } from 'two.js/src/shapes/line';
+import { type EventHandlers } from './Properties';
 export type RefLine = Instance;
 export declare const Line: React.ForwardRefExoticComponent<{
+    visible?: boolean | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -21,7 +23,6 @@ export declare const Line: React.ForwardRefExoticComponent<{
     stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
     linewidth?: number | undefined;
     opacity?: number | undefined;
-    visible?: boolean | undefined;
     cap?: import("two.js/src/path").CapProperties | undefined;
     join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
@@ -41,6 +42,6 @@ export declare const Line: React.ForwardRefExoticComponent<{
     y1?: number;
     x2?: number;
     y2?: number;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;

package/dist/Path.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { Path as Instance } from 'two.js/src/path';
-import { ShapeProps } from './Properties';
+import { ShapeProps, type EventHandlers } from './Properties';
 export type PathProps = ShapeProps | 'fill' | 'stroke' | 'linewidth' | 'opacity' | 'visible' | 'cap' | 'join' | 'miter' | 'closed' | 'curved' | 'automatic' | 'beginning' | 'ending' | 'dashes' | 'vertices';
 export type RefPath = Instance;
 export declare const Path: React.ForwardRefExoticComponent<{
+    visible?: boolean | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -23,7 +24,6 @@ export declare const Path: React.ForwardRefExoticComponent<{
     stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
     linewidth?: number | undefined;
     opacity?: number | undefined;
-    visible?: boolean | undefined;
     cap?: import("two.js/src/path").CapProperties | undefined;
     join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
@@ -40,6 +40,6 @@ export declare const Path: React.ForwardRefExoticComponent<{
     manual?: boolean;
     x?: number;
     y?: number;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;

package/dist/Points.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { Points as Instance } from 'two.js/src/shapes/points';
+import { type EventHandlers } from './Properties';
 export type RefPoints = Instance;
 export declare const Points: React.ForwardRefExoticComponent<{
+    visible?: boolean | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -21,7 +23,6 @@ export declare const Points: React.ForwardRefExoticComponent<{
     stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
     linewidth?: number | undefined;
     opacity?: number | undefined;
-    visible?: boolean | undefined;
     beginning?: number | undefined;
     ending?: number | undefined;
     dashes?: (number[] & {
@@ -33,6 +34,6 @@ export declare const Points: React.ForwardRefExoticComponent<{
 } & {
     x?: number;
     y?: number;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;

package/dist/Polygon.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { Polygon as Instance } from 'two.js/src/shapes/polygon';
+import { type EventHandlers } from './Properties';
 export type RefPolygon = Instance;
 export declare const Polygon: React.ForwardRefExoticComponent<{
+    visible?: boolean | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -21,7 +23,6 @@ export declare const Polygon: React.ForwardRefExoticComponent<{
     stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
     linewidth?: number | undefined;
     opacity?: number | undefined;
-    visible?: boolean | undefined;
     cap?: import("two.js/src/path").CapProperties | undefined;
     join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
@@ -41,6 +42,6 @@ export declare const Polygon: React.ForwardRefExoticComponent<{
     x?: number;
     y?: number;
     radius?: number;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;

package/dist/Properties.d.ts

@@ -1,3 +1,4 @@
+export type { EventHandlers, EventHandler, TwoEvent } from './Events';
 export type ElementProps = 'renderer' | 'id' | 'className';
 export type ShapeProps = ElementProps | 'position' | 'rotation' | 'scale' | 'skewX' | 'skewY' | 'matrix' | 'worldMatrix';
 export type GradientProps = ElementProps | 'spread' | 'units' | 'stops';

package/dist/Provider.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import Two from 'two.js';
 type TwoConstructorProps = ConstructorParameters<typeof Two>[0];
 type TwoConstructorPropsKeys = NonNullable<TwoConstructorProps>;
-type ComponentProps = React.PropsWithChildren<TwoConstructorPropsKeys>;
+type ComponentProps = React.PropsWithChildren<TwoConstructorPropsKeys & {
+    onPointerMissed?: (event: PointerEvent) => void;
+}>;
 export declare const Provider: React.FC<ComponentProps>;
 export {};

package/dist/Rectangle.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import type { Rectangle as Instance } from 'two.js/src/shapes/rectangle';
 import { PathProps } from './Path';
+import { type EventHandlers } from './Properties';
 export type RectangleProps = PathProps | 'width' | 'height';
 export type RefRectangle = Instance;
 export declare const Rectangle: React.ForwardRefExoticComponent<{
+    visible?: boolean | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -23,7 +25,6 @@ export declare const Rectangle: React.ForwardRefExoticComponent<{
     stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
     linewidth?: number | undefined;
     opacity?: number | undefined;
-    visible?: boolean | undefined;
     cap?: import("two.js/src/path").CapProperties | undefined;
     join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
@@ -41,6 +42,6 @@ export declare const Rectangle: React.ForwardRefExoticComponent<{
 } & {
     x?: number;
     y?: number;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;

package/dist/RoundedRectangle.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { RoundedRectangle as Instance } from 'two.js/src/shapes/rounded-rectangle';
+import { type EventHandlers } from './Properties';
 export type RefRoundedRectangle = Instance;
 export declare const RoundedRectangle: React.ForwardRefExoticComponent<{
+    visible?: boolean | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -21,7 +23,6 @@ export declare const RoundedRectangle: React.ForwardRefExoticComponent<{
     stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
     linewidth?: number | undefined;
     opacity?: number | undefined;
-    visible?: boolean | undefined;
     cap?: import("two.js/src/path").CapProperties | undefined;
     join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
@@ -40,6 +41,6 @@ export declare const RoundedRectangle: React.ForwardRefExoticComponent<{
 } & {
     x?: number;
     y?: number;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;

package/dist/SVG.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { Group as Instance } from 'two.js/src/group';
+import { ShapeProps, type EventHandlers } from './Properties';
+type GroupProps = ShapeProps | 'fill' | 'stroke' | 'linewidth' | 'cap' | 'join' | 'miter' | 'closed' | 'curved' | 'automatic';
+type ComponentProps = React.PropsWithChildren<{
+    [K in Extract<GroupProps, keyof Instance>]?: Instance[K];
+} & ({
+    src: string;
+    content?: never;
+} | {
+    src?: never;
+    content: string;
+}) & {
+    x?: number;
+    y?: number;
+    onLoad?: (group: Instance, svg: SVGElement | SVGElement[]) => void;
+    onError?: (error: Error) => void;
+    shallow?: boolean;
+} & Partial<EventHandlers>>;
+export type RefSVG = Instance;
+export declare const SVG: React.ForwardRefExoticComponent<ComponentProps & React.RefAttributes<Instance>>;
+export {};

package/dist/Sprite.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { Sprite as Instance } from 'two.js/src/effects/sprite';
+import { type EventHandlers } from './Properties';
 export type RefSprite = Instance;
 export declare const Sprite: React.ForwardRefExoticComponent<{
+    visible?: boolean | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -21,7 +23,6 @@ export declare const Sprite: React.ForwardRefExoticComponent<{
     stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
     linewidth?: number | undefined;
     opacity?: number | undefined;
-    visible?: boolean | undefined;
     cap?: import("two.js/src/path").CapProperties | undefined;
     join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
@@ -42,10 +43,10 @@ export declare const Sprite: React.ForwardRefExoticComponent<{
     columns?: number | undefined;
     rows?: number | undefined;
 } & {
-    path?: string;
+    src?: string;
     x?: number;
     y?: number;
     autoPlay?: boolean;
-} & {
+} & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;