react-two.js 0.1.0 → 0.2.0

package/README.md

@@ -1,95 +1,362 @@
-# @react/two.js
+# react-two.js
 
-A React virtual DOM for Two.js — a renderer agnostic two-dimensional drawing API for the web. Supports SVG, Canvas, and WebGL rendering. Declaratively describe your Two.js scene within your React application.
+![Version](https://img.shields.io/npm/v/react-two.js?style=flat&colorA=000000&colorB=000000)
+![License](https://img.shields.io/npm/l/react-two.js?style=flat&colorA=000000&colorB=000000)
+
+A React renderer for [Two.js](https://two.js.org) — bringing declarative, component-based 2D graphics to React. Build interactive SVG, Canvas, or WebGL scenes using familiar React patterns.
+
+```bash
+npm install react-two.js react react-dom two.js
+```
+
+```jsx
+import { Canvas, Circle, useFrame } from 'react-two.js'
+
+function RotatingCircle() {
+  const ref = useRef()
+  useFrame((t) => ref.current.rotation = t * 0.5)
+  return <Circle ref={ref} radius={50} fill="#00AEFF" />
+}
+
+<Canvas width={800} height={600}>
+  <RotatingCircle />
+</Canvas>
+```
+
+## Why react-two.js?
+
+- 🎨 **Declarative 2D Graphics** — Describe your Two.js scene using React components
+- ⚡ **Renderer Agnostic** — Switch between SVG, Canvas, and WebGL without changing code
+- 🪝 **React Hooks** — Built-in `useFrame` for smooth animations and `useTwo` for instance access
+- 📦 **Fully Typed** — Complete TypeScript support with proper types for all components
+- 🎯 **Zero Overhead** — Direct mapping to Two.js primitives with no performance penalty
+- 🔄 **Everything Works** — All Two.js features work seamlessly in React
+
+## What does it look like?
+
+Create complex 2D scenes using React components:
+
+```jsx
+import { Canvas, Group, Rectangle, Circle, Star, useFrame } from 'react-two.js'
+
+function Scene() {
+  const groupRef = useRef()
+
+  useFrame((elapsed) => {
+    groupRef.current.rotation = Math.sin(elapsed) * 0.5
+  })
+
+  return (
+    <Group ref={groupRef} x={400} y={300}>
+      <Rectangle width={100} height={100} fill="#FF6B6B" />
+      <Circle radius={40} fill="#4ECDC4" x={60} />
+      <Star innerRadius={20} outerRadius={40} sides={5} fill="#FFE66D" x={-60} />
+    </Group>
+  )
+}
+
+<Canvas width={800} height={600} type="webgl">
+  <Scene />
+</Canvas>
+```
 
 ## Installation
 
 ```bash
-npm install @react/two.js react react-dom two.js
+npm install react-two.js react react-dom two.js
+```
+
+**Requirements** as peer dependencies:
+- React 18.3+
+- Two.js v0.8.21+
+
+> [!IMPORTANT]
+> react-two.js is a React renderer, it must pair with a major version of React, just like react-dom, react-native, etc.
+
+## First Steps
+
+### Creating a Canvas
+
+The `<Canvas>` component is your entry point. It creates a Two.js instance and manages the rendering context:
+
+```jsx
+import { Canvas } from 'react-two.js'
+
+function App() {
+  return (
+    <Canvas
+      width={800}
+      height={600}
+      type="svg" // 'svg' | 'canvas' | 'webgl'
+      autostart={true}
+    >
+      {/* Your scene goes here */}
+    </Canvas>
+  )
+}
+```
+
+### Adding Shapes
+
+All Two.js primitives are available as React components:
+
+```jsx
+<Canvas width={800} height={600}>
+  <Circle radius={50} fill="#00AEFF" x={400} y={300} />
+  <Rectangle width={100} height={60} stroke="#FF0000" linewidth={3} />
+  <Polygon sides={6} radius={40} fill="#00FF00" />
+</Canvas>
 ```
 
-## Quick Start
+### Animating with useFrame
+
+The `useFrame` hook runs on every frame, perfect for animations:
 
 ```jsx
-import { Canvas, Circle, Rectangle, useFrame } from '@react/two.js';
-import { useRef } from 'react';
+import { useRef } from 'react'
+import { Circle, useFrame } from 'react-two.js'
 
 function AnimatedCircle() {
-  const circleRef = useRef();
-  
+  const ref = useRef()
+
   useFrame((elapsed) => {
+    ref.current.rotation = elapsed * 0.5
+    ref.current.scale = 1 + Math.sin(elapsed) * 0.2
+  })
+
+  return <Circle ref={ref} radius={50} fill="#00AEFF" />
+}
+```
+
+### Accessing Two.js Instance
+
+Use `useTwo` to access the underlying Two.js instance:
+
+```jsx
+import { useTwo } from 'react-two.js'
+
+function Component() {
+  const { instance, width, height } = useTwo()
+
+  useEffect(() => {
+    console.log('Canvas size:', width, height)
+    console.log('Two.js instance:', instance)
+  }, [])
+}
+```
+
+## API
+
+### Components
+
+#### Core
+- **`<Canvas>`** — Main container that creates Two.js instance
+- **`<Group>`** — Container for organizing and transforming multiple shapes
+
+#### Primitives
+- **`<Circle>`** — Circle with radius
+- **`<Rectangle>`** — Rectangle with width and height
+- **`<RoundedRectangle>`** — Rectangle with rounded corners
+- **`<Ellipse>`** — Ellipse with width and height
+- **`<Line>`** — Straight line between two points
+- **`<Polygon>`** — Regular polygon with specified sides
+- **`<Star>`** — Star shape with inner and outer radius
+- **`<ArcSegment>`** — Arc segment with start and end angles
+
+#### Paths & Text
+- **`<Path>`** — Custom path with vertices
+- **`<Points>`** — Collection of points rendered in one draw call
+- **`<Text>`** — Text rendering
+
+#### Advanced
+- **`<Image>`** - Basic image class inspired by Figma
+- **`<Sprite>`** — Animated sprite sheets
+- **`<ImageSequence>`** — Animated image sequence
+- **`<LinearGradient>`** — Linear gradient fill
+- **`<RadialGradient>`** — Radial gradient fill
+- **`<Texture>`** — Texture mapping
+
+### Hooks
+
+#### `useTwo()`
+
+Access the Two.js instance and canvas properties:
+
+```jsx
+const { two, width, height } = useTwo()
+```
+
+Returns:
+- `two` — The Two.js instance
+- `width` — Canvas width
+- `height` — Canvas height
+
+#### `useFrame(callback)`
+
+Register a callback that runs on every animation frame:
+
+```jsx
+useFrame((elapsed: number) => {
+  // elapsed is time in seconds since animation started
+})
+```
+
+### Props
+
+All Two.js properties work as React props:
+
+```jsx
+<Circle
+  radius={50}
+  fill="#00AEFF"
+  stroke="#000000"
+  linewidth={2}
+  opacity={0.8}
+  x={400}
+  y={300}
+  rotation={Math.PI / 4}
+  scale={1.5}
+/>
+```
+
+## TypeScript
+
+Full TypeScript support with ref types for all components:
+
+```tsx
+import { useRef } from 'react'
+import { Circle, RefCircle } from 'react-two.js'
+
+function Component() {
+  const circleRef = useRef<RefCircle>(null)
+
+  useEffect(() => {
     if (circleRef.current) {
-      circleRef.current.rotation = elapsed * 0.5;
+      circleRef.current.rotation = Math.PI / 4
     }
-  });
-  
-  return <Circle ref={circleRef} radius={50} fill="red" />;
+  }, [])
+
+  return <Circle ref={circleRef} radius={50} />
 }
+```
+
+## Examples
+
+### Rotating Group
+
+```jsx
+function RotatingGroup() {
+  const ref = useRef()
+  useFrame((t) => ref.current.rotation = t)
+
+  return (
+    <Group ref={ref}>
+      <Rectangle width={100} height={100} fill="#FF6B6B" />
+      <Circle radius={50} fill="#4ECDC4" x={120} />
+    </Group>
+  )
+}
+```
+
+### Gradient Fill
+
+```jsx
+function () {
+  const [gradient, setGradient] = useState(null);
+
+  const updateRef = useMemo((ref) => {
+    if (ref) {
+      setGradient(ref);
+    }
+  }, [setGradient]);
 
-function App() {
   return (
     <Canvas width={800} height={600}>
-      <Rectangle width={100} height={100} fill="blue" x={100} y={100} />
-      <AnimatedCircle />
+      <LinearGradient
+        ref={updateRef}
+        x1={0} y1={0}
+        x2={100} y2={100}
+        stops={[
+          { offset: 0, color: '#FF6B6B' },
+          { offset: 1, color: '#4ECDC4' }
+        ]}
+      />
+      <Rectangle width={200} height={200} fill={gradient} />
     </Canvas>
   );
 }
 ```
 
-## Available Components
-
-### Core Components
-- `<Canvas>` - Main container component
-- `<Group>` - Container for organizing components
-
-### Shape Components
-- `<Circle>` - Basic circle with radius
-- `<Rectangle>` - Rectangle with width/height
-- `<RoundedRectangle>` - Rectangle with corner radius
-- `<Ellipse>` - Oval shape with width/height
-- `<Line>` - Straight line between two points
-- `<Path>` - Custom path with vertices
-- `<Points>` - Collection of points
-- `<Polygon>` - Regular polygon with sides
-- `<Star>` - Star shape with inner/outer radius
-- `<ArcSegment>` - Arc segment with angles
-- `<Text>` - Text rendering component
-
-### Advanced Components
-- `<Sprite>` - Image sprite component
-- `<ImageSequence>` - Animated image sequence
-- `<LinearGradient>` - Linear gradient fill
-- `<RadialGradient>` - Radial gradient fill
-- `<Texture>` - Texture mapping component
-
-## Hooks
-
-### `useTwo()`
-Access the Two.js instance and canvas dimensions:
-```jsx
-const { width, height, instance } = useTwo();
-```
+## Learn More
 
-### `useFrame()`
-Create smooth animations with frame-based updates:
-```jsx
-useFrame((elapsed) => {
-  // Animation logic runs on every frame
-  if (ref.current) {
-    ref.current.rotation = elapsed * 0.5;
-  }
-});
+- **[Two.js Documentation](https://two.js.org/docs/)** — Complete Two.js API reference
+- **[Two.js Examples](https://two.js.org/examples/)** — Interactive examples and demos
+- **[Two.js Repository](https://github.com/jonobr1/two.js)** — Source code and issues
+
+## Development & Deployment
+
+### Building the Library
+
+```bash
+# Build the library for npm distribution
+npm run build:lib
+
+# Build the documentation site
+npm run build:docs
+
+# Preview the documentation locally
+npm run preview:docs
 ```
 
-## TypeScript Support
+### Publishing to NPM
 
-Full TypeScript support with proper types for all components and refs:
+1. **Increment version** (choose one):
+   ```bash
+   npm run version:patch  # Bug fixes (0.1.0 → 0.1.1)
+   npm run version:minor  # New features (0.1.0 → 0.2.0)
+   npm run version:major  # Breaking changes (0.1.0 → 1.0.0)
+   ```
 
-```tsx
-import { RefCircle } from '@react/two.js';
+2. **Create a GitHub release** with the new version tag. This automatically triggers npm publishing via GitHub Actions.
+
+   Or **publish manually**:
+   ```bash
+   npm run publish:npm
+   ```
+
+### GitHub Pages Deployment
+
+The documentation site automatically deploys to GitHub Pages on every push to `main`. The site will be available at:
+- **Live URL**: https://jonobr1.github.io/react-two.js
+
+#### Manual Setup (if needed):
+
+1. **Enable GitHub Pages** in repository settings:
+   - Go to Settings → Pages
+   - Source: "GitHub Actions"
+
+2. **Set up NPM_TOKEN secret** (for npm publishing):
+   - Go to Settings → Secrets and variables → Actions
+   - Add `NPM_TOKEN` with your npm access token
 
-const circleRef = useRef<RefCircle>(null);
+### Local Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server (documentation)
+npm run dev
+
+# Run tests
+npm test
+
+# Run linting
+npm run lint
 ```
 
-## Roadmap
-- [ ] Add helpers (aka gizmos)
+The development server runs the documentation site which imports the library components directly from the `lib/` directory, allowing you to see changes in real-time.
+
+## Acknowledgments
+
+Built on top of [Two.js](https://github.com/jonobr1/two.js) by [Jono Brandel](https://jono.fyi). Inspired by [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber).

package/dist/ArcSegment.d.ts

@@ -3,8 +3,8 @@ import type { ArcSegment as Instance } from 'two.js/src/shapes/arc-segment';
 export type RefArcSegment = Instance;
 export declare const ArcSegment: React.ForwardRefExoticComponent<{
     renderer?: {
-        type: "element" | string;
-        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        type: "element" | "group" | "path" | "text" | "points" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
         onBeforeRender?: () => void;
         onAfterRender?: () => void;
     } | undefined;
@@ -22,8 +22,8 @@ export declare const ArcSegment: React.ForwardRefExoticComponent<{
     linewidth?: number | undefined;
     opacity?: number | undefined;
     visible?: boolean | undefined;
-    cap?: string | undefined;
-    join?: string | undefined;
+    cap?: import("two.js/src/path").CapProperties | undefined;
+    join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
     closed?: boolean | undefined;
     curved?: boolean | undefined;
@@ -44,4 +44,4 @@ export declare const ArcSegment: React.ForwardRefExoticComponent<{
     resolution?: number;
 } & {
     children?: React.ReactNode | undefined;
-} & React.RefAttributes<Instance | null>>;
+} & React.RefAttributes<Instance>>;

package/dist/Circle.d.ts

@@ -3,8 +3,8 @@ import type { Circle as Instance } from 'two.js/src/shapes/circle';
 export type RefCircle = Instance;
 export declare const Circle: React.ForwardRefExoticComponent<{
     renderer?: {
-        type: "element" | string;
-        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        type: "element" | "group" | "path" | "text" | "points" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
         onBeforeRender?: () => void;
         onAfterRender?: () => void;
     } | undefined;
@@ -22,8 +22,8 @@ export declare const Circle: React.ForwardRefExoticComponent<{
     linewidth?: number | undefined;
     opacity?: number | undefined;
     visible?: boolean | undefined;
-    cap?: string | undefined;
-    join?: string | undefined;
+    cap?: import("two.js/src/path").CapProperties | undefined;
+    join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
     closed?: boolean | undefined;
     curved?: boolean | undefined;
@@ -41,4 +41,4 @@ export declare const Circle: React.ForwardRefExoticComponent<{
     resolution?: number;
 } & {
     children?: React.ReactNode | undefined;
-} & React.RefAttributes<Instance | null>>;
+} & React.RefAttributes<Instance>>;

package/dist/Ellipse.d.ts

@@ -3,8 +3,8 @@ import type { Ellipse as Instance } from 'two.js/src/shapes/ellipse';
 export type RefEllipse = Instance;
 export declare const Ellipse: React.ForwardRefExoticComponent<{
     renderer?: {
-        type: "element" | string;
-        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        type: "element" | "group" | "path" | "text" | "points" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
         onBeforeRender?: () => void;
         onAfterRender?: () => void;
     } | undefined;
@@ -22,8 +22,8 @@ export declare const Ellipse: React.ForwardRefExoticComponent<{
     linewidth?: number | undefined;
     opacity?: number | undefined;
     visible?: boolean | undefined;
-    cap?: string | undefined;
-    join?: string | undefined;
+    cap?: import("two.js/src/path").CapProperties | undefined;
+    join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
     closed?: boolean | undefined;
     curved?: boolean | undefined;

package/dist/Group.d.ts

@@ -3,8 +3,8 @@ import type { Group as Instance } from 'two.js/src/group';
 export type RefGroup = Instance;
 export declare const Group: React.ForwardRefExoticComponent<{
     renderer?: {
-        type: "element" | string;
-        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        type: "element" | "group" | "path" | "text" | "points" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
         onBeforeRender?: () => void;
         onAfterRender?: () => void;
     } | undefined;
@@ -20,8 +20,8 @@ export declare const Group: React.ForwardRefExoticComponent<{
     fill?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
     stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
     linewidth?: number | undefined;
-    cap?: "butt" | "round" | "square" | undefined;
-    join?: "butt" | "round" | "square" | undefined;
+    cap?: import("two.js/src/path").CapProperties | undefined;
+    join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
     closed?: boolean | undefined;
     curved?: boolean | undefined;
@@ -31,4 +31,4 @@ export declare const Group: React.ForwardRefExoticComponent<{
     y?: number;
 } & {
     children?: React.ReactNode | undefined;
-} & React.RefAttributes<Instance | null>>;
+} & React.RefAttributes<Instance>>;

package/dist/Image.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import type { Image as Instance } from 'two.js/src/effects/image';
+import type { Texture } from 'two.js/src/effects/texture';
+export type RefImage = Instance;
+export declare const Image: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | "group" | "path" | "text" | "points" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    position?: import("two.js/src/vector").Vector | undefined;
+    rotation?: number | undefined;
+    scale?: number | import("two.js/src/vector").Vector | undefined;
+    skewX?: number | undefined;
+    skewY?: number | undefined;
+    matrix?: import("two.js/src/matrix").Matrix | undefined;
+    worldMatrix?: import("two.js/src/matrix").Matrix | undefined;
+    fill?: string | import("two.js/src/effects/gradient").Gradient | Texture | undefined;
+    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;
+    closed?: boolean | undefined;
+    curved?: boolean | undefined;
+    automatic?: boolean | undefined;
+    beginning?: number | undefined;
+    ending?: number | undefined;
+    dashes?: (number[] & {
+        offset?: number;
+    }) | undefined;
+    vertices?: import("two.js/src/anchor").Anchor[] | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    mode?: import("two.js/src/effects/image").ModeProperties | undefined;
+    texture?: Texture | undefined;
+} & {
+    x?: number;
+    y?: number;
+    mode?: string;
+    texture?: Texture;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance>>;

package/dist/ImageSequence.d.ts

@@ -4,8 +4,8 @@ import type { Texture } from 'two.js/src/effects/texture';
 export type RefImageSequence = Instance;
 export declare const ImageSequence: React.ForwardRefExoticComponent<{
     renderer?: {
-        type: "element" | string;
-        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        type: "element" | "group" | "path" | "text" | "points" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
         onBeforeRender?: () => void;
         onAfterRender?: () => void;
     } | undefined;
@@ -23,8 +23,8 @@ export declare const ImageSequence: React.ForwardRefExoticComponent<{
     linewidth?: number | undefined;
     opacity?: number | undefined;
     visible?: boolean | undefined;
-    cap?: string | undefined;
-    join?: string | undefined;
+    cap?: import("two.js/src/path").CapProperties | undefined;
+    join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
     closed?: boolean | undefined;
     curved?: boolean | undefined;
@@ -37,7 +37,7 @@ export declare const ImageSequence: React.ForwardRefExoticComponent<{
     vertices?: import("two.js/src/anchor").Anchor[] | undefined;
     width?: number | undefined;
     height?: number | undefined;
-    textures?: any[] | undefined;
+    textures?: Texture[] | undefined;
     frameRate?: number | undefined;
     index?: number | undefined;
 } & {
@@ -47,4 +47,4 @@ export declare const ImageSequence: React.ForwardRefExoticComponent<{
     autoPlay?: boolean;
 } & {
     children?: React.ReactNode | undefined;
-} & React.RefAttributes<Instance | null>>;
+} & React.RefAttributes<Instance>>;

package/dist/Line.d.ts

@@ -3,8 +3,8 @@ import type { Line as Instance } from 'two.js/src/shapes/line';
 export type RefLine = Instance;
 export declare const Line: React.ForwardRefExoticComponent<{
     renderer?: {
-        type: "element" | string;
-        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        type: "element" | "group" | "path" | "text" | "points" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
         onBeforeRender?: () => void;
         onAfterRender?: () => void;
     } | undefined;
@@ -22,8 +22,8 @@ export declare const Line: React.ForwardRefExoticComponent<{
     linewidth?: number | undefined;
     opacity?: number | undefined;
     visible?: boolean | undefined;
-    cap?: string | undefined;
-    join?: string | undefined;
+    cap?: import("two.js/src/path").CapProperties | undefined;
+    join?: import("two.js/src/path").JoinProperties | undefined;
     miter?: number | undefined;
     closed?: boolean | undefined;
     curved?: boolean | undefined;
@@ -43,4 +43,4 @@ export declare const Line: React.ForwardRefExoticComponent<{
     y2?: number;
 } & {
     children?: React.ReactNode | undefined;
-} & React.RefAttributes<Instance | null>>;
+} & React.RefAttributes<Instance>>;

package/dist/LinearGradient.d.ts

@@ -3,15 +3,15 @@ import type { LinearGradient as Instance } from 'two.js/src/effects/linear-gradi
 export type RefLinearGradient = Instance;
 export declare const LinearGradient: React.ForwardRefExoticComponent<{
     renderer?: {
-        type: "element" | string;
-        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        type: "element" | "group" | "path" | "text" | "points" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
         onBeforeRender?: () => void;
         onAfterRender?: () => void;
     } | undefined;
     id?: string | undefined;
     className?: string | undefined;
-    spread?: "repeat" | "pad" | "reflect" | undefined;
-    units?: "userSpaceOnUse" | "objectBoundingBox" | undefined;
+    spread?: import("two.js/src/effects/gradient").SpreadProperties | undefined;
+    units?: import("two.js/src/effects/gradient").UnitsProperties | undefined;
     stops?: import("two.js/src/effects/stop").Stop[] | undefined;
     left?: import("two.js/src/vector").Vector | undefined;
     right?: import("two.js/src/vector").Vector | undefined;
@@ -22,4 +22,4 @@ export declare const LinearGradient: React.ForwardRefExoticComponent<{
     y2?: number;
 } & {
     children?: React.ReactNode | undefined;
-} & React.RefAttributes<Instance | null>>;
+} & React.RefAttributes<Instance>>;