@remotion/shapes 3.3.54 → 3.3.56

package/dist/components/circle.d.ts

@@ -2,4 +2,9 @@ import React from 'react';
 import type { MakeCircleProps } from '../utils/make-circle';
 import type { AllShapesProps } from './render-svg';
 export declare type CircleProps = MakeCircleProps & AllShapesProps;
+/**
+ * @description Renders an SVG element drawing a circle.
+ * @param {Number} radius The radius of the circle.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/circle)
+ */
 export declare const Circle: React.FC<CircleProps>;

package/dist/components/circle.js

@@ -4,6 +4,11 @@ exports.Circle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const make_circle_1 = require("../utils/make-circle");
 const render_svg_1 = require("./render-svg");
+/**
+ * @description Renders an SVG element drawing a circle.
+ * @param {Number} radius The radius of the circle.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/circle)
+ */
 const Circle = ({ radius, ...props }) => {
     return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_circle_1.makeCircle)({ radius }), ...props });
 };

package/dist/components/ellipse.d.ts

@@ -2,4 +2,10 @@ import React from 'react';
 import type { MakeEllipseOptions } from '../utils/make-ellipse';
 import type { AllShapesProps } from './render-svg';
 export declare type EllipseProps = MakeEllipseOptions & AllShapesProps;
+/**
+ * @description Renders an SVG element drawing an ellipse.
+ * @param {Number} rx The radius of the ellipse on the X axis.
+ * @param {Number} ry The radius of the ellipse on the Y axis.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/ellipse)
+ */
 export declare const Ellipse: React.FC<EllipseProps>;

package/dist/components/ellipse.js

@@ -4,6 +4,12 @@ exports.Ellipse = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const make_ellipse_1 = require("../utils/make-ellipse");
 const render_svg_1 = require("./render-svg");
+/**
+ * @description Renders an SVG element drawing an ellipse.
+ * @param {Number} rx The radius of the ellipse on the X axis.
+ * @param {Number} ry The radius of the ellipse on the Y axis.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/ellipse)
+ */
 const Ellipse = ({ rx, ry, ...props }) => {
     return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_ellipse_1.makeEllipse)({ rx, ry }), ...props });
 };

package/dist/components/pie.d.ts

@@ -2,4 +2,13 @@ import React from 'react';
 import type { MakePieProps } from '../utils/make-pie';
 import type { AllShapesProps } from './render-svg';
 export declare type PieProps = MakePieProps & AllShapesProps;
+/**
+ * @description Renders an SVG element drawing a pie piece.
+ * @param {Number} radius The radius of the circle..
+ * @param {Number} progress The percentage of the circle that is filled. 0 means fully empty, 1 means fully filled.
+ * @param {Boolean} closePath If set to false, no path to the middle of the circle will be drawn, leading to an open arc. Default true.
+ * @param {Boolean} counterClockwise If set, the circle gets filled counterclockwise instead of clockwise. Default false.
+ * @param {Boolean} rotation Add rotation to the path. 0 means no rotation, Math.PI * 2 means 1 full clockwise rotation
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/pie)
+ */
 export declare const Pie: React.FC<PieProps>;

package/dist/components/pie.js

@@ -4,6 +4,15 @@ exports.Pie = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const make_pie_1 = require("../utils/make-pie");
 const render_svg_1 = require("./render-svg");
+/**
+ * @description Renders an SVG element drawing a pie piece.
+ * @param {Number} radius The radius of the circle..
+ * @param {Number} progress The percentage of the circle that is filled. 0 means fully empty, 1 means fully filled.
+ * @param {Boolean} closePath If set to false, no path to the middle of the circle will be drawn, leading to an open arc. Default true.
+ * @param {Boolean} counterClockwise If set, the circle gets filled counterclockwise instead of clockwise. Default false.
+ * @param {Boolean} rotation Add rotation to the path. 0 means no rotation, Math.PI * 2 means 1 full clockwise rotation
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/pie)
+ */
 const Pie = ({ radius, progress, closePath, counterClockwise, rotation, ...props }) => {
     return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_pie_1.makePie)({ radius, progress, closePath, counterClockwise, rotation }), ...props }));
 };

package/dist/components/rect.d.ts

@@ -2,4 +2,12 @@ import React from 'react';
 import type { MakeRectOptions } from '../utils/make-rect';
 import type { AllShapesProps } from './render-svg';
 export declare type RectProps = MakeRectOptions & AllShapesProps;
+/**
+ * @description Renders an SVG element containing a rectangle.
+ * @param {Number} width The width of the Rectangle
+ * @param {Number} height The height of the Rectangle
+ * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/rect)
+ */
 export declare const Rect: React.FC<RectProps>;

package/dist/components/rect.js

@@ -4,6 +4,14 @@ exports.Rect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const make_rect_1 = require("../utils/make-rect");
 const render_svg_1 = require("./render-svg");
+/**
+ * @description Renders an SVG element containing a rectangle.
+ * @param {Number} width The width of the Rectangle
+ * @param {Number} height The height of the Rectangle
+ * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/rect)
+ */
 const Rect = ({ width, edgeRoundness, height, cornerRadius, ...props }) => {
     return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_rect_1.makeRect)({ height, width, edgeRoundness, cornerRadius }), ...props }));
 };

package/dist/components/star.d.ts

@@ -2,4 +2,13 @@ import React from 'react';
 import type { MakeStarProps } from '../utils/make-star';
 import type { AllShapesProps } from './render-svg';
 export declare type StarProps = MakeStarProps & Omit<AllShapesProps, 'points'>;
+/**
+ * @description Renders an SVG element containing a star.
+ * @param {Number} innerRadius The inner radius of the star.
+ * @param {Number} outerRadius The outer radius of the star.
+ * @param {Number} points The amount of points of the star.
+ * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/star)
+ */
 export declare const Star: React.FC<StarProps>;

package/dist/components/star.js

@@ -4,6 +4,15 @@ exports.Star = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const make_star_1 = require("../utils/make-star");
 const render_svg_1 = require("./render-svg");
+/**
+ * @description Renders an SVG element containing a star.
+ * @param {Number} innerRadius The inner radius of the star.
+ * @param {Number} outerRadius The outer radius of the star.
+ * @param {Number} points The amount of points of the star.
+ * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/star)
+ */
 const Star = ({ innerRadius, outerRadius, points, cornerRadius, edgeRoundness, ...props }) => {
     return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_star_1.makeStar)({
             innerRadius,

package/dist/components/triangle.d.ts

@@ -2,4 +2,12 @@ import React from 'react';
 import type { MakeTriangleProps } from '../utils/make-triangle';
 import type { AllShapesProps } from './render-svg';
 export declare type TriangleProps = MakeTriangleProps & AllShapesProps;
+/**
+ * @description Renders an SVG element containing a triangle with same length on all sides.
+ * @param {Number} length The length of one triangle side.
+ * @param {string} direction The direction of the triangle
+ * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/triangle)
+ */
 export declare const Triangle: React.FC<TriangleProps>;

package/dist/components/triangle.js

@@ -4,6 +4,14 @@ exports.Triangle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const make_triangle_1 = require("../utils/make-triangle");
 const render_svg_1 = require("./render-svg");
+/**
+ * @description Renders an SVG element containing a triangle with same length on all sides.
+ * @param {Number} length The length of one triangle side.
+ * @param {string} direction The direction of the triangle
+ * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/triangle)
+ */
 const Triangle = ({ length, direction, edgeRoundness, cornerRadius, ...props }) => {
     return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_triangle_1.makeTriangle)({ length, direction, edgeRoundness, cornerRadius }), ...props }));
 };

package/dist/utils/make-circle.d.ts

@@ -2,4 +2,9 @@ import type { ShapeInfo } from './shape-info';
 export declare type MakeCircleProps = {
     radius: number;
 };
+/**
+ * @description Generates a circle SVG path.
+ * @param {Number} radius The radius of the circle.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-circle)
+ */
 export declare const makeCircle: ({ radius }: MakeCircleProps) => ShapeInfo;

package/dist/utils/make-circle.js

@@ -2,6 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeCircle = void 0;
 const paths_1 = require("@remotion/paths");
+/**
+ * @description Generates a circle SVG path.
+ * @param {Number} radius The radius of the circle.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-circle)
+ */
 const makeCircle = ({ radius }) => {
     const instructions = [
         {

package/dist/utils/make-ellipse.d.ts

@@ -3,4 +3,10 @@ export declare type MakeEllipseOptions = {
     rx: number;
     ry: number;
 };
+/**
+ * @description Generates an ellipse SVG path.
+ * @param {Number} rx The radius of the ellipse on the X axis.
+ * @param {Number} ry The radius of the ellipse on the Y axis.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-ellipse)
+ */
 export declare const makeEllipse: ({ rx, ry }: MakeEllipseOptions) => ShapeInfo;

package/dist/utils/make-ellipse.js

@@ -2,6 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeEllipse = void 0;
 const paths_1 = require("@remotion/paths");
+/**
+ * @description Generates an ellipse SVG path.
+ * @param {Number} rx The radius of the ellipse on the X axis.
+ * @param {Number} ry The radius of the ellipse on the Y axis.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-ellipse)
+ */
 const makeEllipse = ({ rx, ry }) => {
     const instructions = [
         {

package/dist/utils/make-pie.d.ts

@@ -6,6 +6,15 @@ export declare type MakePieProps = {
     counterClockwise?: boolean;
     rotation?: number;
 };
+/**
+ * @description Generates a piece of pie SVG path.
+ * @param {Number} radius The radius of the circle..
+ * @param {Number} progress The percentage of the circle that is filled. 0 means fully empty, 1 means fully filled.
+ * @param {Boolean} closePath If set to false, no path to the middle of the circle will be drawn, leading to an open arc. Default true.
+ * @param {Boolean} counterClockwise If set, the circle gets filled counterclockwise instead of clockwise. Default false.
+ * @param {Boolean} rotation Add rotation to the path. 0 means no rotation, Math.PI * 2 means 1 full clockwise rotation
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-pie)
+ */
 export declare const makePie: ({ progress, radius, closePath, counterClockwise, rotation, }: MakePieProps) => {
     height: number;
     width: number;

package/dist/utils/make-pie.js

@@ -10,6 +10,15 @@ const getCoord = ({ counterClockwise, actualProgress, rotation, radius, coord, }
     const rounded = Math.round(val * 100000) / 100000;
     return rounded;
 };
+/**
+ * @description Generates a piece of pie SVG path.
+ * @param {Number} radius The radius of the circle..
+ * @param {Number} progress The percentage of the circle that is filled. 0 means fully empty, 1 means fully filled.
+ * @param {Boolean} closePath If set to false, no path to the middle of the circle will be drawn, leading to an open arc. Default true.
+ * @param {Boolean} counterClockwise If set, the circle gets filled counterclockwise instead of clockwise. Default false.
+ * @param {Boolean} rotation Add rotation to the path. 0 means no rotation, Math.PI * 2 means 1 full clockwise rotation
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-pie)
+ */
 const makePie = ({ progress, radius, closePath = true, counterClockwise = false, rotation = 0, }) => {
     const actualProgress = Math.min(Math.max(progress, 0), 1);
     const endAngleX = getCoord({

package/dist/utils/make-rect.d.ts

@@ -5,4 +5,12 @@ export declare type MakeRectOptions = {
     edgeRoundness?: number | null;
     cornerRadius?: number;
 };
+/**
+ * @description Generates an SVG rectangle.
+ * @param {Number} width The width of the rectangle.
+ * @param {Number} height The height of the rectangle
+ * @param {Number | null} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @param {Number} cornerRadius  * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-rect)
+ */
 export declare const makeRect: ({ width, height, edgeRoundness, cornerRadius, }: MakeRectOptions) => ShapeInfo;

package/dist/utils/make-rect.js

@@ -3,6 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeRect = void 0;
 const paths_1 = require("@remotion/paths");
 const join_points_1 = require("./join-points");
+/**
+ * @description Generates an SVG rectangle.
+ * @param {Number} width The width of the rectangle.
+ * @param {Number} height The height of the rectangle
+ * @param {Number | null} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @param {Number} cornerRadius  * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-rect)
+ */
 const makeRect = ({ width, height, edgeRoundness = null, cornerRadius = 0, }) => {
     const transformOrigin = [width / 2, height / 2];
     const instructions = [

package/dist/utils/make-star.js

@@ -4,6 +4,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeStar = void 0;
 const paths_1 = require("@remotion/paths");
 const join_points_1 = require("./join-points");
+/**
+ * @description Generates a star SVG path.
+ * @param {Number} innerRadius The inner radius of the star.
+ * @param {Number} outerRadius The outer radius of the star.
+ * @param {Number} points The amount of points of the star.
+ * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-star)
+ */
 const star = ({ centerX, centerY, points, innerRadius, outerRadius, cornerRadius, edgeRoundness, }) => {
     const degreeIncrement = (Math.PI * 2) / (points * 2);
     const d = new Array(points * 2).fill(true).map((_p, i) => {

package/dist/utils/make-triangle.d.ts

@@ -6,5 +6,13 @@ export declare type MakeTriangleProps = {
     edgeRoundness?: number | null;
     cornerRadius?: number;
 };
+/**
+ * @description Generates an SVG path for a triangle with the same length on all sides.
+ * @param {Number} length The length of one triangle side.
+ * @param {string} direction The direction of the triangle
+ * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-triangle)
+ */
 export declare const makeTriangle: ({ length, direction, edgeRoundness, cornerRadius, }: MakeTriangleProps) => ShapeInfo;
 export {};

package/dist/utils/make-triangle.js

@@ -4,6 +4,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeTriangle = void 0;
 const paths_1 = require("@remotion/paths");
 const join_points_1 = require("./join-points");
+/**
+ * @description Generates an SVG path for a triangle with the same length on all sides.
+ * @param {Number} length The length of one triangle side.
+ * @param {string} direction The direction of the triangle
+ * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-triangle)
+ */
 const makeTriangle = ({ length, direction = 'right', edgeRoundness = null, cornerRadius = 0, }) => {
     const longerDimension = length;
     const shorterSize = Math.sqrt(length ** 2 * 0.75); // Calculated on paper;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/shapes",
-	"version": "3.3.54",
+	"version": "3.3.56",
 	"description": "Utility functions and components for SVG shapes",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -45,7 +45,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
-		"@remotion/paths": "3.3.54"
+		"@remotion/paths": "3.3.56"
 	},
-	"gitHead": "3a004e0b0e2a805fb276c35dd5922e3389c9f53c"
+	"gitHead": "40e96323b08717213c20fffcce8a985f0310f6e5"
 }

package/dist/utils/instructions.d.ts

@@ -1,32 +0,0 @@
-export declare type Instruction = {
-    type: 'M';
-    x: number;
-    y: number;
-} | {
-    type: 'L';
-    x: number;
-    y: number;
-} | {
-    type: 'C';
-    cp1x: number;
-    cp1y: number;
-    cp2x: number;
-    cp2y: number;
-    x: number;
-    y: number;
-} | {
-    type: 'm';
-    x: number;
-    y: number;
-} | {
-    type: 'a';
-    rx: number;
-    ry: number;
-    xAxisRotation: number;
-    largeArcFlag: boolean;
-    sweepFlag: boolean;
-    x: number;
-    y: number;
-};
-export declare const serializeInstructions: (instructions: Instruction[]) => string;
-export declare const serializeInstruction: (instruction: Instruction) => string | undefined;

package/dist/utils/instructions.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.serializeInstruction = exports.serializeInstructions = void 0;
-const serializeInstructions = (instructions) => {
-    return instructions.map(exports.serializeInstruction).join(' ');
-};
-exports.serializeInstructions = serializeInstructions;
-const serializeInstruction = (instruction) => {
-    if (instruction.type === 'M') {
-        return `M ${instruction.x} ${instruction.y}`;
-    }
-    if (instruction.type === 'L') {
-        return `L ${instruction.x} ${instruction.y}`;
-    }
-    if (instruction.type === 'C') {
-        return `C ${instruction.cp1x} ${instruction.cp1y} ${instruction.cp2x} ${instruction.cp2y} ${instruction.x} ${instruction.y}`;
-    }
-    if (instruction.type === 'm') {
-        return `m ${instruction.x} ${instruction.y}`;
-    }
-    if (instruction.type === 'a') {
-        return `a ${instruction.rx} ${instruction.ry} ${instruction.xAxisRotation} ${Number(instruction.largeArcFlag)} ${Number(instruction.sweepFlag ? 1 : 0)} ${instruction.x} ${instruction.y}`;
-    }
-};
-exports.serializeInstruction = serializeInstruction;