@rootnative/inertia-svg 0.0.0-alpha.0 → 0.0.0-alpha.2

package/README.md

@@ -91,6 +91,13 @@ Path resampling between structurally different shapes (flubber-style) is out of
 - Path resampling between arbitrary shapes.
 - Morphing an `L` into a `C` (or other across-command interpolation). Element-wise scalar interpolation is intentional.
 
+## Documentation
+
+- Full docs: [https://rootnative.github.io/inertia/docs/svg](https://rootnative.github.io/inertia/docs/svg)
+- Core library: [`@rootnative/inertia`](../core)
+
+AI agents: this package ships its own copy of the reference — read `node_modules/@rootnative/inertia-svg/llms.txt` for the full API, no network needed.
+
 ## License
 
 MIT

package/dist/index.d.mts

@@ -1,6 +1,118 @@
 import * as react from 'react';
+import { ComponentType } from 'react';
+import { TransitionInput, TransitionConfig } from '@rootnative/inertia';
+import * as react_native_svg from 'react-native-svg';
 import { PathProps } from 'react-native-svg';
-import { TransitionConfig } from '@rootnative/inertia';
+
+/** String keys of the wrapped component's props. */
+type SvgKey<P> = Extract<keyof P, string>;
+/**
+ * Animatable target snapshot for a factory-built motion SVG component. Every
+ * field is optional — include only the dimensions you want to animate; the
+ * rest fall back to the static props on the component.
+ */
+type SvgAnimate<NK extends string = never, CK extends string = never, AK extends string = never> = Partial<Record<NK, number>> & Partial<Record<CK, string>> & Partial<Record<AK, readonly number[]>>;
+/**
+ * Per-property transition map for a factory-built motion SVG component. Each
+ * entry accepts a `TransitionConfig` or a `TransitionName` registered on the
+ * nearest `<MotionConfig transitions>`.
+ */
+type SvgPerPropertyTransition<K extends string> = Partial<Record<K, TransitionInput>>;
+/**
+ * Transition shape accepted by factory-built motion SVG components: a single
+ * config (or registered name) applied to every animated dimension, or a
+ * per-property map. Per-property entries win over the top-level transition.
+ */
+type SvgTransition<K extends string> = TransitionInput | SvgPerPropertyTransition<K>;
+/**
+ * Configuration for `createMotionSvgComponent`. Declares which of the wrapped
+ * component's props are animatable and how each interpolates:
+ *
+ * - `animatableProps` — numeric props (`cx`, `r`, `strokeDashoffset`, …),
+ *   spring / timing / decay-driven.
+ * - `colorProps` — color-string props (`fill`, `stroke`), interpolated via
+ *   Reanimated's native color animation.
+ * - `arrayProps` — numeric-array props (`strokeDasharray`), interpolated
+ *   element-wise. **The array length is locked at first render** — the same
+ *   shape-locked-at-mount rule `MotionPath` applies to path commands. Remount
+ *   with a new `key` to change the length.
+ */
+interface CreateMotionSvgComponentConfig<P, NK extends SvgKey<P>, CK extends SvgKey<P>, AK extends SvgKey<P>> {
+    animatableProps: readonly NK[];
+    colorProps?: readonly CK[];
+    arrayProps?: readonly AK[];
+}
+/**
+ * Props of a factory-built motion SVG component: the wrapped component's own
+ * props (with the animatable keys narrowed to the animatable value shape)
+ * plus `initial` / `animate` / `transition`.
+ */
+type MotionSvgComponentProps<P, NK extends string, CK extends string, AK extends string> = Omit<P, NK | CK | AK> & Partial<Record<NK, number>> & Partial<Record<CK, string>> & Partial<Record<AK, readonly number[]>> & {
+    /**
+     * Initial frame override. When present, the component mounts displaying
+     * these values, then animates to `animate` on the next effect. Pass
+     * `false` to skip the initial-mount animation entirely.
+     */
+    initial?: SvgAnimate<NK, CK, AK> | false;
+    /** Target animation state. */
+    animate?: SvgAnimate<NK, CK, AK>;
+    /**
+     * Transition config — a single `TransitionConfig` (or `TransitionName`
+     * registered on the nearest `<MotionConfig transitions>`) applied to
+     * every animated dimension, or a per-property map. Per-property entries
+     * win over the top-level transition.
+     */
+    transition?: SvgTransition<NK | CK | AK>;
+};
+/**
+ * Build an animatable wrapper around any `react-native-svg` element, driven
+ * by the same `initial` / `animate` / `transition` shape as the core
+ * `Motion.*` primitives. This is the mechanism behind the prebuilt
+ * `MotionCircle` / `MotionRect` / `MotionLine` — use it directly for any
+ * element the package doesn't prebuild (`Ellipse`, `Stop`, …).
+ *
+ * Semantics shared with the rest of the library:
+ *
+ * - `transition` accepts a config, a registered `TransitionName`, or a
+ *   per-property map (entries accept names too); names resolve at the
+ *   nearest `<MotionConfig transitions>`.
+ * - `<MotionConfig reducedMotion>` collapses every transition to
+ *   `no-animation` so values snap.
+ * - `initial` seeds the first frame and is read once on mount;
+ *   `initial={false}` mounts directly at the `animate` target.
+ *
+ * Factory-specific rules:
+ *
+ * - **A key only renders through the animation pipeline when it is present
+ *   at mount** — in the static props, `initial`, or `animate`. Keys
+ *   introduced into `animate` after mount warn in dev and are ignored
+ *   (remount with `key={...}` to pick them up). Keys never engaged pass
+ *   through as ordinary static props.
+ * - **Array props lock their length at first render.** Element-wise
+ *   interpolation needs a stable slot count — a target with a different
+ *   length throws in dev and is ignored in production.
+ * - Numeric keys engaged only via `animate` seed from `0`; color keys seed
+ *   from `'transparent'`. Provide a static prop or `initial` value when the
+ *   mount animation should start elsewhere.
+ *
+ * @example An animatable `<Ellipse>`
+ * ```tsx
+ * import { Ellipse } from 'react-native-svg'
+ * import { createMotionSvgComponent } from '@rootnative/inertia-svg'
+ *
+ * const MotionEllipse = createMotionSvgComponent(Ellipse, {
+ *   animatableProps: ['cx', 'cy', 'rx', 'ry', 'opacity'],
+ *   colorProps: ['fill', 'stroke'],
+ * })
+ *
+ * <MotionEllipse
+ *   cx={50} cy={50} rx={10} ry={20}
+ *   animate={{ rx: 30, fill: '#7c3aed' }}
+ *   transition={{ type: 'spring', tension: 180, friction: 14 }}
+ * />
+ * ```
+ */
+declare function createMotionSvgComponent<P extends object, NK extends SvgKey<P>, CK extends SvgKey<P> = never, AK extends SvgKey<P> = never>(Component: ComponentType<P>, config: CreateMotionSvgComponentConfig<P, NK, CK, AK>): ComponentType<MotionSvgComponentProps<P, NK, CK, AK>>;
 
 /**
  * Animatable target snapshot for a `MotionSvg.Path`. Every field is optional
@@ -96,6 +208,50 @@ interface MotionPathProps extends Omit<PathProps, 'd' | 'fill' | 'stroke' | 'str
  */
 declare function MotionPath(props: MotionPathProps): react.JSX.Element;
 
+/**
+ * Animatable `<Circle>` from `react-native-svg`, built with
+ * `createMotionSvgComponent`. Animatable dimensions: `cx`, `cy`, `r`,
+ * `strokeWidth`, `strokeOpacity`, `fillOpacity`, `opacity`,
+ * `strokeDashoffset` (numeric), `fill` / `stroke` (color), and
+ * `strokeDasharray` (numeric array, length locked at mount).
+ *
+ * The canonical consumer is a circular progress ring — animate
+ * `strokeDashoffset` against a static `strokeDasharray` of the circumference:
+ *
+ * @example
+ * ```tsx
+ * const CIRCUMFERENCE = 2 * Math.PI * 45
+ *
+ * <Svg viewBox="0 0 100 100">
+ *   <MotionCircle
+ *     cx={50} cy={50} r={45}
+ *     stroke="#0ea5e9" strokeWidth={8} fill="none"
+ *     strokeDasharray={[CIRCUMFERENCE]}
+ *     strokeDashoffset={CIRCUMFERENCE}
+ *     animate={{ strokeDashoffset: CIRCUMFERENCE * (1 - progress) }}
+ *     transition={{ type: 'timing', duration: 300 }}
+ *   />
+ * </Svg>
+ * ```
+ */
+declare const MotionCircle: react.ComponentType<MotionSvgComponentProps<react_native_svg.CircleProps, "cx" | "cy" | "opacity" | "r" | "fillOpacity" | "strokeWidth" | "strokeOpacity" | "strokeDashoffset", "fill" | "stroke", "strokeDasharray">>;
+/**
+ * Animatable `<Rect>` from `react-native-svg`, built with
+ * `createMotionSvgComponent`. Animatable dimensions: `x`, `y`, `width`,
+ * `height`, `rx`, `ry`, `strokeWidth`, `strokeOpacity`, `fillOpacity`,
+ * `opacity`, `strokeDashoffset` (numeric), `fill` / `stroke` (color), and
+ * `strokeDasharray` (numeric array, length locked at mount).
+ */
+declare const MotionRect: react.ComponentType<MotionSvgComponentProps<react_native_svg.RectProps, "opacity" | "fillOpacity" | "strokeWidth" | "strokeOpacity" | "strokeDashoffset" | "x" | "y" | "width" | "height" | "rx" | "ry", "fill" | "stroke", "strokeDasharray">>;
+/**
+ * Animatable `<Line>` from `react-native-svg`, built with
+ * `createMotionSvgComponent`. Animatable dimensions: `x1`, `y1`, `x2`, `y2`,
+ * `strokeWidth`, `strokeOpacity`, `opacity`, `strokeDashoffset` (numeric),
+ * `stroke` (color), and `strokeDasharray` (numeric array, length locked at
+ * mount).
+ */
+declare const MotionLine: react.ComponentType<MotionSvgComponentProps<react_native_svg.LineProps, "opacity" | "strokeWidth" | "strokeOpacity" | "strokeDashoffset" | "x1" | "x2" | "y1" | "y2", "stroke", "strokeDasharray">>;
+
 /**
  * SVG path-string utilities used by `MotionSvg.Path`. Everything here runs on
  * the JS thread — paths are tokenized into a normalized command list at mount
@@ -158,31 +314,15 @@ declare function diffTemplate(source: PathTemplate, target: PathTemplate): strin
 declare function serializePath(template: PathTemplate, params: ReadonlyArray<number>): string;
 
 /**
- * `@rootnative/inertia-svg` — animatable SVG primitives for
- * `@rootnative/inertia`.
- *
- * v0.2 surface:
- * - `MotionPath` / `MotionSvg.Path` — animatable `<Path>` over
- *   `react-native-svg`. Supports path morphing on the `d` attribute (source
- *   and target must share the same command sequence) plus animatable
- *   `fill`, `stroke`, `strokeWidth`, `strokeOpacity`, `fillOpacity`,
- *   `opacity`, and `strokeDashoffset` with the same `initial` /
- *   `animate` / `transition` shape as the core `Motion.*` primitives.
- *
- * Additional shape primitives (`Circle`, `Rect`, `Line`, `Ellipse`) land in
- * a follow-up once the path morphing API is validated. Path normalization
- * (resampling between structurally different paths) is out of scope for
- * v0.2 — use structurally-compatible source/target paths and remount with
- * `key={...}` to switch shape.
- */
-
-/**
- * Namespace bundling every animatable SVG primitive. Use `MotionSvg.Path` for
- * autocomplete-friendly grouping or import `MotionPath` directly — both
- * point at the same component.
+ * Namespace bundling every animatable SVG primitive. Use `MotionSvg.Path` /
+ * `MotionSvg.Circle` for autocomplete-friendly grouping or import
+ * `MotionPath` / `MotionCircle` directly — both point at the same component.
  */
 declare const MotionSvg: {
     readonly Path: typeof MotionPath;
+    readonly Circle: react.ComponentType<MotionSvgComponentProps<react_native_svg.CircleProps, "cx" | "cy" | "opacity" | "r" | "fillOpacity" | "strokeWidth" | "strokeOpacity" | "strokeDashoffset", "fill" | "stroke", "strokeDasharray">>;
+    readonly Rect: react.ComponentType<MotionSvgComponentProps<react_native_svg.RectProps, "opacity" | "fillOpacity" | "strokeWidth" | "strokeOpacity" | "strokeDashoffset" | "x" | "y" | "width" | "height" | "rx" | "ry", "fill" | "stroke", "strokeDasharray">>;
+    readonly Line: react.ComponentType<MotionSvgComponentProps<react_native_svg.LineProps, "opacity" | "strokeWidth" | "strokeOpacity" | "strokeDashoffset" | "x1" | "x2" | "y1" | "y2", "stroke", "strokeDasharray">>;
 };
 
-export { MotionPath, type MotionPathProps, MotionSvg, type PathAnimate, type PathPerPropertyTransition, type PathSegment, type PathStateShape, type PathTemplate, type PathTransition, diffTemplate, flattenParams, parsePathD, serializePath, templateOf };
+export { type CreateMotionSvgComponentConfig, MotionCircle, MotionLine, MotionPath, type MotionPathProps, MotionRect, MotionSvg, type MotionSvgComponentProps, type PathAnimate, type PathPerPropertyTransition, type PathSegment, type PathStateShape, type PathTemplate, type PathTransition, type SvgAnimate, type SvgPerPropertyTransition, type SvgTransition, createMotionSvgComponent, diffTemplate, flattenParams, parsePathD, serializePath, templateOf };

package/dist/index.d.ts

@@ -1,6 +1,118 @@
 import * as react from 'react';
+import { ComponentType } from 'react';
+import { TransitionInput, TransitionConfig } from '@rootnative/inertia';
+import * as react_native_svg from 'react-native-svg';
 import { PathProps } from 'react-native-svg';
-import { TransitionConfig } from '@rootnative/inertia';
+
+/** String keys of the wrapped component's props. */
+type SvgKey<P> = Extract<keyof P, string>;
+/**
+ * Animatable target snapshot for a factory-built motion SVG component. Every
+ * field is optional — include only the dimensions you want to animate; the
+ * rest fall back to the static props on the component.
+ */
+type SvgAnimate<NK extends string = never, CK extends string = never, AK extends string = never> = Partial<Record<NK, number>> & Partial<Record<CK, string>> & Partial<Record<AK, readonly number[]>>;
+/**
+ * Per-property transition map for a factory-built motion SVG component. Each
+ * entry accepts a `TransitionConfig` or a `TransitionName` registered on the
+ * nearest `<MotionConfig transitions>`.
+ */
+type SvgPerPropertyTransition<K extends string> = Partial<Record<K, TransitionInput>>;
+/**
+ * Transition shape accepted by factory-built motion SVG components: a single
+ * config (or registered name) applied to every animated dimension, or a
+ * per-property map. Per-property entries win over the top-level transition.
+ */
+type SvgTransition<K extends string> = TransitionInput | SvgPerPropertyTransition<K>;
+/**
+ * Configuration for `createMotionSvgComponent`. Declares which of the wrapped
+ * component's props are animatable and how each interpolates:
+ *
+ * - `animatableProps` — numeric props (`cx`, `r`, `strokeDashoffset`, …),
+ *   spring / timing / decay-driven.
+ * - `colorProps` — color-string props (`fill`, `stroke`), interpolated via
+ *   Reanimated's native color animation.
+ * - `arrayProps` — numeric-array props (`strokeDasharray`), interpolated
+ *   element-wise. **The array length is locked at first render** — the same
+ *   shape-locked-at-mount rule `MotionPath` applies to path commands. Remount
+ *   with a new `key` to change the length.
+ */
+interface CreateMotionSvgComponentConfig<P, NK extends SvgKey<P>, CK extends SvgKey<P>, AK extends SvgKey<P>> {
+    animatableProps: readonly NK[];
+    colorProps?: readonly CK[];
+    arrayProps?: readonly AK[];
+}
+/**
+ * Props of a factory-built motion SVG component: the wrapped component's own
+ * props (with the animatable keys narrowed to the animatable value shape)
+ * plus `initial` / `animate` / `transition`.
+ */
+type MotionSvgComponentProps<P, NK extends string, CK extends string, AK extends string> = Omit<P, NK | CK | AK> & Partial<Record<NK, number>> & Partial<Record<CK, string>> & Partial<Record<AK, readonly number[]>> & {
+    /**
+     * Initial frame override. When present, the component mounts displaying
+     * these values, then animates to `animate` on the next effect. Pass
+     * `false` to skip the initial-mount animation entirely.
+     */
+    initial?: SvgAnimate<NK, CK, AK> | false;
+    /** Target animation state. */
+    animate?: SvgAnimate<NK, CK, AK>;
+    /**
+     * Transition config — a single `TransitionConfig` (or `TransitionName`
+     * registered on the nearest `<MotionConfig transitions>`) applied to
+     * every animated dimension, or a per-property map. Per-property entries
+     * win over the top-level transition.
+     */
+    transition?: SvgTransition<NK | CK | AK>;
+};
+/**
+ * Build an animatable wrapper around any `react-native-svg` element, driven
+ * by the same `initial` / `animate` / `transition` shape as the core
+ * `Motion.*` primitives. This is the mechanism behind the prebuilt
+ * `MotionCircle` / `MotionRect` / `MotionLine` — use it directly for any
+ * element the package doesn't prebuild (`Ellipse`, `Stop`, …).
+ *
+ * Semantics shared with the rest of the library:
+ *
+ * - `transition` accepts a config, a registered `TransitionName`, or a
+ *   per-property map (entries accept names too); names resolve at the
+ *   nearest `<MotionConfig transitions>`.
+ * - `<MotionConfig reducedMotion>` collapses every transition to
+ *   `no-animation` so values snap.
+ * - `initial` seeds the first frame and is read once on mount;
+ *   `initial={false}` mounts directly at the `animate` target.
+ *
+ * Factory-specific rules:
+ *
+ * - **A key only renders through the animation pipeline when it is present
+ *   at mount** — in the static props, `initial`, or `animate`. Keys
+ *   introduced into `animate` after mount warn in dev and are ignored
+ *   (remount with `key={...}` to pick them up). Keys never engaged pass
+ *   through as ordinary static props.
+ * - **Array props lock their length at first render.** Element-wise
+ *   interpolation needs a stable slot count — a target with a different
+ *   length throws in dev and is ignored in production.
+ * - Numeric keys engaged only via `animate` seed from `0`; color keys seed
+ *   from `'transparent'`. Provide a static prop or `initial` value when the
+ *   mount animation should start elsewhere.
+ *
+ * @example An animatable `<Ellipse>`
+ * ```tsx
+ * import { Ellipse } from 'react-native-svg'
+ * import { createMotionSvgComponent } from '@rootnative/inertia-svg'
+ *
+ * const MotionEllipse = createMotionSvgComponent(Ellipse, {
+ *   animatableProps: ['cx', 'cy', 'rx', 'ry', 'opacity'],
+ *   colorProps: ['fill', 'stroke'],
+ * })
+ *
+ * <MotionEllipse
+ *   cx={50} cy={50} rx={10} ry={20}
+ *   animate={{ rx: 30, fill: '#7c3aed' }}
+ *   transition={{ type: 'spring', tension: 180, friction: 14 }}
+ * />
+ * ```
+ */
+declare function createMotionSvgComponent<P extends object, NK extends SvgKey<P>, CK extends SvgKey<P> = never, AK extends SvgKey<P> = never>(Component: ComponentType<P>, config: CreateMotionSvgComponentConfig<P, NK, CK, AK>): ComponentType<MotionSvgComponentProps<P, NK, CK, AK>>;
 
 /**
  * Animatable target snapshot for a `MotionSvg.Path`. Every field is optional
@@ -96,6 +208,50 @@ interface MotionPathProps extends Omit<PathProps, 'd' | 'fill' | 'stroke' | 'str
  */
 declare function MotionPath(props: MotionPathProps): react.JSX.Element;
 
+/**
+ * Animatable `<Circle>` from `react-native-svg`, built with
+ * `createMotionSvgComponent`. Animatable dimensions: `cx`, `cy`, `r`,
+ * `strokeWidth`, `strokeOpacity`, `fillOpacity`, `opacity`,
+ * `strokeDashoffset` (numeric), `fill` / `stroke` (color), and
+ * `strokeDasharray` (numeric array, length locked at mount).
+ *
+ * The canonical consumer is a circular progress ring — animate
+ * `strokeDashoffset` against a static `strokeDasharray` of the circumference:
+ *
+ * @example
+ * ```tsx
+ * const CIRCUMFERENCE = 2 * Math.PI * 45
+ *
+ * <Svg viewBox="0 0 100 100">
+ *   <MotionCircle
+ *     cx={50} cy={50} r={45}
+ *     stroke="#0ea5e9" strokeWidth={8} fill="none"
+ *     strokeDasharray={[CIRCUMFERENCE]}
+ *     strokeDashoffset={CIRCUMFERENCE}
+ *     animate={{ strokeDashoffset: CIRCUMFERENCE * (1 - progress) }}
+ *     transition={{ type: 'timing', duration: 300 }}
+ *   />
+ * </Svg>
+ * ```
+ */
+declare const MotionCircle: react.ComponentType<MotionSvgComponentProps<react_native_svg.CircleProps, "cx" | "cy" | "opacity" | "r" | "fillOpacity" | "strokeWidth" | "strokeOpacity" | "strokeDashoffset", "fill" | "stroke", "strokeDasharray">>;
+/**
+ * Animatable `<Rect>` from `react-native-svg`, built with
+ * `createMotionSvgComponent`. Animatable dimensions: `x`, `y`, `width`,
+ * `height`, `rx`, `ry`, `strokeWidth`, `strokeOpacity`, `fillOpacity`,
+ * `opacity`, `strokeDashoffset` (numeric), `fill` / `stroke` (color), and
+ * `strokeDasharray` (numeric array, length locked at mount).
+ */
+declare const MotionRect: react.ComponentType<MotionSvgComponentProps<react_native_svg.RectProps, "opacity" | "fillOpacity" | "strokeWidth" | "strokeOpacity" | "strokeDashoffset" | "x" | "y" | "width" | "height" | "rx" | "ry", "fill" | "stroke", "strokeDasharray">>;
+/**
+ * Animatable `<Line>` from `react-native-svg`, built with
+ * `createMotionSvgComponent`. Animatable dimensions: `x1`, `y1`, `x2`, `y2`,
+ * `strokeWidth`, `strokeOpacity`, `opacity`, `strokeDashoffset` (numeric),
+ * `stroke` (color), and `strokeDasharray` (numeric array, length locked at
+ * mount).
+ */
+declare const MotionLine: react.ComponentType<MotionSvgComponentProps<react_native_svg.LineProps, "opacity" | "strokeWidth" | "strokeOpacity" | "strokeDashoffset" | "x1" | "x2" | "y1" | "y2", "stroke", "strokeDasharray">>;
+
 /**
  * SVG path-string utilities used by `MotionSvg.Path`. Everything here runs on
  * the JS thread — paths are tokenized into a normalized command list at mount
@@ -158,31 +314,15 @@ declare function diffTemplate(source: PathTemplate, target: PathTemplate): strin
 declare function serializePath(template: PathTemplate, params: ReadonlyArray<number>): string;
 
 /**
- * `@rootnative/inertia-svg` — animatable SVG primitives for
- * `@rootnative/inertia`.
- *
- * v0.2 surface:
- * - `MotionPath` / `MotionSvg.Path` — animatable `<Path>` over
- *   `react-native-svg`. Supports path morphing on the `d` attribute (source
- *   and target must share the same command sequence) plus animatable
- *   `fill`, `stroke`, `strokeWidth`, `strokeOpacity`, `fillOpacity`,
- *   `opacity`, and `strokeDashoffset` with the same `initial` /
- *   `animate` / `transition` shape as the core `Motion.*` primitives.
- *
- * Additional shape primitives (`Circle`, `Rect`, `Line`, `Ellipse`) land in
- * a follow-up once the path morphing API is validated. Path normalization
- * (resampling between structurally different paths) is out of scope for
- * v0.2 — use structurally-compatible source/target paths and remount with
- * `key={...}` to switch shape.
- */
-
-/**
- * Namespace bundling every animatable SVG primitive. Use `MotionSvg.Path` for
- * autocomplete-friendly grouping or import `MotionPath` directly — both
- * point at the same component.
+ * Namespace bundling every animatable SVG primitive. Use `MotionSvg.Path` /
+ * `MotionSvg.Circle` for autocomplete-friendly grouping or import
+ * `MotionPath` / `MotionCircle` directly — both point at the same component.
  */
 declare const MotionSvg: {
     readonly Path: typeof MotionPath;
+    readonly Circle: react.ComponentType<MotionSvgComponentProps<react_native_svg.CircleProps, "cx" | "cy" | "opacity" | "r" | "fillOpacity" | "strokeWidth" | "strokeOpacity" | "strokeDashoffset", "fill" | "stroke", "strokeDasharray">>;
+    readonly Rect: react.ComponentType<MotionSvgComponentProps<react_native_svg.RectProps, "opacity" | "fillOpacity" | "strokeWidth" | "strokeOpacity" | "strokeDashoffset" | "x" | "y" | "width" | "height" | "rx" | "ry", "fill" | "stroke", "strokeDasharray">>;
+    readonly Line: react.ComponentType<MotionSvgComponentProps<react_native_svg.LineProps, "opacity" | "strokeWidth" | "strokeOpacity" | "strokeDashoffset" | "x1" | "x2" | "y1" | "y2", "stroke", "strokeDasharray">>;
 };
 
-export { MotionPath, type MotionPathProps, MotionSvg, type PathAnimate, type PathPerPropertyTransition, type PathSegment, type PathStateShape, type PathTemplate, type PathTransition, diffTemplate, flattenParams, parsePathD, serializePath, templateOf };
+export { type CreateMotionSvgComponentConfig, MotionCircle, MotionLine, MotionPath, type MotionPathProps, MotionRect, MotionSvg, type MotionSvgComponentProps, type PathAnimate, type PathPerPropertyTransition, type PathSegment, type PathStateShape, type PathTemplate, type PathTransition, type SvgAnimate, type SvgPerPropertyTransition, type SvgTransition, createMotionSvgComponent, diffTemplate, flattenParams, parsePathD, serializePath, templateOf };