@remotion/shapes 4.0.0-newpaths.40 → 4.1.0-alpha1

package/dist/components/circle.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
 import type { MakeCircleProps } from '../utils/make-circle';
 import type { AllShapesProps } from './render-svg';
-export declare type CircleProps = MakeCircleProps & AllShapesProps;
+export 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

@@ -1,5 +1,11 @@
 import React from 'react';
 import type { MakeEllipseOptions } from '../utils/make-ellipse';
 import type { AllShapesProps } from './render-svg';
-export declare type EllipseProps = MakeEllipseOptions & AllShapesProps;
+export 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

@@ -1,5 +1,14 @@
 import React from 'react';
 import type { MakePieProps } from '../utils/make-pie';
 import type { AllShapesProps } from './render-svg';
-export declare type PieProps = MakePieProps & AllShapesProps;
+export 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

@@ -1,5 +1,13 @@
 import React from 'react';
 import type { MakeRectOptions } from '../utils/make-rect';
 import type { AllShapesProps } from './render-svg';
-export declare type RectProps = MakeRectOptions & AllShapesProps;
+export 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/render-svg.d.ts

@@ -1,6 +1,6 @@
-import type { Instruction } from '@remotion/paths/dist/helpers/types';
+import type { Instruction } from '@remotion/paths';
 import React from 'react';
-export declare type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd'> & {
+export type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd'> & {
     debug?: boolean;
     pathStyle?: React.CSSProperties;
 };

package/dist/components/render-svg.js

@@ -25,7 +25,6 @@ const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, deb
                         if (prevInstruction.type === 'V' ||
                             prevInstruction.type === 'H' ||
                             prevInstruction.type === 'a' ||
-                            prevInstruction.type === 'z' ||
                             prevInstruction.type === 'Z' ||
                             prevInstruction.type === 't' ||
                             prevInstruction.type === 'q' ||

package/dist/components/star.d.ts

@@ -1,5 +1,14 @@
 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'>;
+export 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

@@ -1,5 +1,13 @@
 import React from 'react';
 import type { MakeTriangleProps } from '../utils/make-triangle';
 import type { AllShapesProps } from './render-svg';
-export declare type TriangleProps = MakeTriangleProps & AllShapesProps;
+export 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/join-points.js

@@ -25,6 +25,8 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
             (x + prevPoint[0]) / 2,
             (y + prevPoint[1]) / 2,
         ];
+        const prevVector = [x - prevPoint[0], y - prevPoint[1]];
+        const nextVector = [nextPoint[0] - x, nextPoint[1] - y];
         if (i === 0) {
             if (edgeRoundness !== null) {
                 return [
@@ -35,6 +37,16 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
                     },
                 ];
             }
+            if (cornerRadius !== 0) {
+                const computeRadius = shortenVector(nextVector, cornerRadius);
+                return [
+                    {
+                        type: 'M',
+                        x: computeRadius[0] + x,
+                        y: computeRadius[1] + y,
+                    },
+                ];
+            }
             return [
                 {
                     type: 'M',
@@ -43,8 +55,6 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
                 },
             ];
         }
-        const prevVector = [x - prevPoint[0], y - prevPoint[1]];
-        const nextVector = [nextPoint[0] - x, nextPoint[1] - y];
         if (cornerRadius && edgeRoundness !== null) {
             throw new Error(`"cornerRadius" and "edgeRoundness" cannot be specified at the same time.`);
         }
@@ -59,7 +69,7 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
                 ];
             }
             const prevVectorMinusRadius = shortenVector(prevVector, cornerRadius);
-            const prevVectorLenght = scaleVectorToLength(prevVector, cornerRadius);
+            const prevVectorLength = scaleVectorToLength(prevVector, cornerRadius);
             const nextVectorMinusRadius = scaleVectorToLength(nextVector, cornerRadius);
             const firstDraw = [
                 prevPoint[0] + prevVectorMinusRadius[0],
@@ -77,15 +87,15 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
                         rx: cornerRadius,
                         ry: cornerRadius,
                         xAxisRotation: 0,
-                        dx: prevVectorLenght[0] + nextVectorMinusRadius[0],
-                        dy: prevVectorLenght[1] + nextVectorMinusRadius[1],
+                        dx: prevVectorLength[0] + nextVectorMinusRadius[0],
+                        dy: prevVectorLength[1] + nextVectorMinusRadius[1],
                         largeArcFlag: false,
                         sweepFlag: true,
                     }
                     : {
                         type: 'C',
-                        x: firstDraw[0] + prevVectorLenght[0] + nextVectorMinusRadius[0],
-                        y: firstDraw[1] + prevVectorLenght[1] + nextVectorMinusRadius[1],
+                        x: firstDraw[0] + prevVectorLength[0] + nextVectorMinusRadius[0],
+                        y: firstDraw[1] + prevVectorLength[1] + nextVectorMinusRadius[1],
                         cp1x: x,
                         cp1y: y,
                         cp2x: x,

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

@@ -1,5 +1,10 @@
 import type { ShapeInfo } from './shape-info';
-export declare type MakeCircleProps = {
+export 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 = [
         {
@@ -30,7 +35,7 @@ const makeCircle = ({ radius }) => {
             dy: 0,
         },
         {
-            type: 'z',
+            type: 'Z',
         },
     ];
     const path = (0, paths_1.serializeInstructions)(instructions);

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

@@ -1,6 +1,12 @@
 import type { ShapeInfo } from './shape-info';
-export declare type MakeEllipseOptions = {
+export 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 = [
         {
@@ -20,7 +26,7 @@ const makeEllipse = ({ rx, ry }) => {
             dy: 0,
         },
         {
-            type: 'z',
+            type: 'Z',
         },
     ];
     const path = (0, paths_1.serializeInstructions)(instructions);

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

@@ -1,11 +1,20 @@
 import type { Instruction } from '@remotion/paths';
-export declare type MakePieProps = {
+export type MakePieProps = {
     radius: number;
     progress: number;
     closePath?: boolean;
     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({
@@ -94,7 +103,7 @@ const makePie = ({ progress, radius, closePath = true, counterClockwise = false,
             : null,
         closePath
             ? {
-                type: 'z',
+                type: 'Z',
             }
             : null,
     ].filter(Boolean);

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

@@ -1,8 +1,16 @@
 import type { ShapeInfo } from './shape-info';
-export declare type MakeRectOptions = {
+export type MakeRectOptions = {
     width: number;
     height: number;
     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,18 +3,26 @@ 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 = [
         ...(0, join_points_1.joinPoints)([
-            [0, 0],
+            [cornerRadius, 0],
             [width, 0],
             [width, height],
             [0, height],
             [0, 0],
         ], { edgeRoundness, cornerRadius, roundCornerStrategy: 'arc' }),
         {
-            type: 'z',
+            type: 'Z',
         },
     ];
     const path = (0, paths_1.serializeInstructions)(instructions);

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

@@ -1,12 +1,12 @@
 import type { ShapeInfo } from './shape-info';
-export declare type MakeStarProps = {
+export type MakeStarProps = {
     points: number;
     innerRadius: number;
     outerRadius: number;
     edgeRoundness?: number | null;
     cornerRadius?: number;
 };
-export declare type StarProps = {
+export type StarProps = {
     centerX: number;
     centerY: number;
     points: number;

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) => {
@@ -21,7 +30,7 @@ const star = ({ centerX, centerY, points, innerRadius, outerRadius, cornerRadius
             cornerRadius,
             roundCornerStrategy: cornerRadius > 0 ? 'bezier' : 'arc',
         }),
-        { type: 'z' },
+        { type: 'Z' },
     ];
 };
 const makeStar = ({ points, innerRadius, outerRadius, cornerRadius = 0, edgeRoundness = null, }) => {

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

@@ -1,10 +1,18 @@
 import type { ShapeInfo } from './shape-info';
-declare type Direction = 'right' | 'left' | 'up' | 'down';
-export declare type MakeTriangleProps = {
+type Direction = 'right' | 'left' | 'up' | 'down';
+export type MakeTriangleProps = {
     length: number;
     direction: Direction;
     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,7 +4,18 @@ 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, }) => {
+    if (typeof length !== 'number') {
+        throw new Error(`"length" of a triangle must be a number, got ${JSON.stringify(length)}`);
+    }
     const longerDimension = length;
     const shorterSize = Math.sqrt(length ** 2 * 0.75); // Calculated on paper;
     const points = {
@@ -52,7 +63,7 @@ const makeTriangle = ({ length, direction = 'right', edgeRoundness = null, corne
             roundCornerStrategy: 'bezier',
         }),
         {
-            type: 'z',
+            type: 'Z',
         },
     ];
     const path = (0, paths_1.serializeInstructions)(instructions);

package/dist/utils/shape-info.d.ts

@@ -1,5 +1,5 @@
 import type { Instruction } from '@remotion/paths';
-export declare type ShapeInfo = {
+export type ShapeInfo = {
     path: string;
     width: number;
     height: number;

package/package.json

@@ -1,51 +1,51 @@
 {
-	"name": "@remotion/shapes",
-	"version": "4.0.0-newpaths.40+09405cced",
-	"description": "Utility functions and components for SVG shapes",
-	"main": "dist/index.js",
-	"sideEffects": false,
-	"scripts": {
-		"lint": "eslint src --ext ts,tsx",
-		"watch": "tsc -w",
-		"build": "tsc -d",
-		"test": "vitest --run"
-	},
-	"author": "Alex Fernandez, Jonny Burger <jonny@remotion.dev>",
-	"license": "MIT",
-	"repository": {
-		"url": "https://github.com/remotion-dev/remotion"
-	},
-	"bugs": {
-		"url": "https://github.com/remotion-dev/remotion/issues"
-	},
-	"devDependencies": {
-		"@jonny/eslint-config": "3.0.266",
-		"@testing-library/react": "^13.4.0",
-		"@types/node": "^16.7.5",
-		"@types/react": "18.0.26",
-		"@vitejs/plugin-react": "^2.0.0",
-		"eslint": "8.25.0",
-		"prettier": "^2.7.1",
-		"prettier-plugin-organize-imports": "^2.3.4",
-		"react": "18.0.0",
-		"react-dom": "18.0.0",
-		"typescript": "^4.7.0",
-		"vitest": "0.24.3"
-	},
-	"keywords": [
-		"svg",
-		"path",
-		"utilities"
-	],
-	"publishConfig": {
-		"access": "public"
-	},
-	"peerDependencies": {
-		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0"
-	},
-	"dependencies": {
-		"@remotion/paths": "4.0.0-newpaths.40+09405cced"
-	},
-	"gitHead": "09405cced148038402b72b568f349e0bc7bbb949"
-}
+  "name": "@remotion/shapes",
+  "version": "4.1.0-alpha1",
+  "description": "Utility functions and components for SVG shapes",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "author": "Alex Fernandez, Jonny Burger <jonny@remotion.dev>",
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion"
+  },
+  "bugs": {
+    "url": "https://github.com/remotion-dev/remotion/issues"
+  },
+  "devDependencies": {
+    "@jonny/eslint-config": "3.0.266",
+    "@testing-library/react": "^13.4.0",
+    "@types/node": "18.14.6",
+    "@types/react": "18.0.26",
+    "@vitejs/plugin-react": "^2.0.0",
+    "eslint": "8.42.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^2.3.4",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "typescript": "4.9.5",
+    "vitest": "0.31.1"
+  },
+  "keywords": [
+    "svg",
+    "path",
+    "utilities"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@remotion/paths": "4.1.0-alpha1"
+  },
+  "scripts": {
+    "formatting": "prettier src --check",
+    "lint": "eslint src --ext ts,tsx",
+    "watch": "tsc -w",
+    "build": "tsc -d",
+    "test": "vitest --run"
+  }
+}

package/dist/Ellipse.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export declare type EllipseProps = React.SVGProps<SVGPathElement> & {
-    rx: number;
-    ry: number;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number;
-    style?: React.CSSProperties;
-};
-export declare const Ellipse: React.FC<EllipseProps>;

package/dist/Ellipse.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Ellipse = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const make_ellipse_1 = require("./make-ellipse");
-const Ellipse = ({ fill, stroke, strokeWidth, rx, ry, style, }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: rx * 2, height: ry * 2, viewBox: `0 0 ${rx * 2} ${ry * 2}`, xmlns: "http://www.w3.org/2000/svg", style: style, "data-shape-type": "ellipse", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_ellipse_1.makeEllipse)({
-                rx,
-                ry,
-            }), fill: fill, stroke: stroke, strokeWidth: strokeWidth }) }));
-};
-exports.Ellipse = Ellipse;

package/dist/circle.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export declare type CircleProps = React.SVGProps<SVGPathElement> & {
-    width: number;
-    height: number;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number;
-    style?: React.CSSProperties;
-};
-export declare const Circle: React.FC<CircleProps>;

package/dist/circle.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Circle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const make_circle_1 = require("./make-circle");
-const Circle = ({ width, height, fill, stroke, strokeWidth, style, }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: style, "data-shape-type": "circle", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_circle_1.makeCircle)({
-                cx: 50,
-                cy: 50,
-                radius: 50,
-            }), fill: fill, stroke: stroke, strokeWidth: strokeWidth }) }));
-};
-exports.Circle = Circle;

package/dist/components/return-type.d.ts

@@ -1,5 +0,0 @@
-export declare type ShapeInfo = {
-    path: string;
-    width: string;
-    height: string;
-};

package/dist/components/return-type.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/shape-info.d.ts

@@ -1,5 +0,0 @@
-export declare type ShapeInfo = {
-    path: string;
-    width: number;
-    height: number;
-};

package/dist/components/shape-info.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/make-circle.d.ts

@@ -1,4 +0,0 @@
-export declare type MakeCircleProps = {
-    radius: number;
-};
-export declare const makeCircle: ({ radius }: MakeCircleProps) => string;

package/dist/make-circle.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeCircle = void 0;
-const makeCircle = ({ radius }) => {
-    const cx = radius;
-    const cy = radius;
-    return `M ${cx} ${cy} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${radius * 2} 0 ${radius} ${radius} 0 1 0 ${-radius * 2} 0`;
-};
-exports.makeCircle = makeCircle;

package/dist/make-ellipse.d.ts

@@ -1,5 +0,0 @@
-export declare type MakeEllipseOptions = {
-    rx: number;
-    ry: number;
-};
-export declare const makeEllipse: ({ rx, ry }: MakeEllipseOptions) => string;

package/dist/make-ellipse.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeEllipse = void 0;
-const makeEllipse = ({ rx = 50, ry = 50 }) => {
-    return `M ${rx} ${0} a ${rx} ${ry} 0 1 0 1 0`;
-};
-exports.makeEllipse = makeEllipse;

package/dist/make-rect.d.ts

@@ -1,5 +0,0 @@
-export declare type MakeRectOptions = {
-    width: number;
-    height: number;
-};
-export declare const makeRect: ({ width, height }: MakeRectOptions) => string;

package/dist/make-rect.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeRect = void 0;
-const makeRect = ({ width, height }) => {
-    const x = 0;
-    const y = 0;
-    return `M ${x} ${y} l ${width} 0 l 0 ${height} l ${-width} 0 Z`;
-};
-exports.makeRect = makeRect;

package/dist/make-triangle.d.ts

@@ -1,6 +0,0 @@
-export declare type MakeTriangleProps = {
-    width: number;
-    height: number;
-    direction: 'right' | 'left' | 'top' | 'bottom';
-};
-export declare const makeTriangle: ({ width, height, direction, }: MakeTriangleProps) => string;

package/dist/make-triangle.js

@@ -1,14 +0,0 @@
-"use strict";
-// Copied from https://stackblitz.com/edit/react-triangle-svg?file=index.js
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeTriangle = void 0;
-const makeTriangle = ({ width, height, direction = 'right', }) => {
-    const points = {
-        top: [`${width / 2} 0`, 'L', `0 ${height}`, 'L', `${width} ${height}`],
-        right: [`0 0`, 'L', `0 ${height}`, 'L', `${width} ${height / 2}`],
-        bottom: [`0 0`, 'L', `${width} 0`, 'L', `${width / 2} ${height}`],
-        left: [`${width} 0`, 'L', `${width} ${height}`, 'L', `0 ${height / 2}`],
-    };
-    return `M ${points[direction].join(' ')} z`;
-};
-exports.makeTriangle = makeTriangle;

package/dist/rect.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare type SquareProps = {
-    width: number;
-    height: number;
-    fill?: string;
-    style?: React.CSSProperties;
-};
-export declare const Rect: React.FC<SquareProps>;

package/dist/rect.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Rect = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const make_rect_1 = require("./make-rect");
-const Rect = ({ width, height, fill, style }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: style, "data-shape-type": "rect", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_rect_1.makeRect)({
-                width,
-                height,
-            }), fill: fill }) }));
-};
-exports.Rect = Rect;

package/dist/triangle.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export declare type TriangleProps = {
-    width: number;
-    height: number;
-    fill?: string;
-    direction: 'right' | 'left' | 'top' | 'bottom';
-    style?: React.CSSProperties;
-};
-export declare const Triangle: React.FC<TriangleProps>;

package/dist/triangle.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Triangle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const make_triangle_1 = require("./make-triangle");
-const Triangle = ({ width, height, fill, direction, style, }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: style, "data-shape-type": "triangle", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_triangle_1.makeTriangle)({
-                width,
-                height,
-                direction,
-            }), fill: fill }) }));
-};
-exports.Triangle = Triangle;

package/dist/utils/instructions.d.ts

@@ -1,3 +0,0 @@
-import type { Instruction } from '@remotion/paths';
-export declare const serializeInstructions: (instructions: Instruction[]) => string;
-export declare const serializeInstruction: (instruction: Instruction) => string;

package/dist/utils/instructions.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.serializeInstruction = exports.serializeInstructions = void 0;
-const serializeInstructions = (instructions) => {
-    return instructions.map((i) => (0, exports.serializeInstruction)(i)).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 === 'a') {
-        return `a ${instruction.rx} ${instruction.ry} ${instruction.xAxisRotation} ${Number(instruction.largeArcFlag)} ${Number(instruction.sweepFlag ? 1 : 0)} ${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}`;
-    }
-    if (instruction.type === 'z') {
-        return 'z';
-    }
-    throw new Error('not implemented');
-};
-exports.serializeInstruction = serializeInstruction;

package/dist/utils/star.d.ts

@@ -1,10 +0,0 @@
-export declare type StarProps = {
-    centerX: number;
-    centerY: number;
-    points: number;
-    innerRadius: number;
-    outerRadius: number;
-    edgeRoundness: number | null;
-    cornerRadius: number;
-};
-export declare const star: ({ centerX, centerY, points, innerRadius, outerRadius, cornerRadius, edgeRoundness, }: StarProps) => string;

package/dist/utils/star.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.star = void 0;
-const instructions_1 = require("./instructions");
-const join_points_1 = require("./join-points");
-const polarToCartesian = ({ centerX, centerY, radius, angleInDegrees, }) => {
-    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
-    return {
-        x: centerX + radius * Math.cos(angleInRadians),
-        y: centerY + radius * Math.sin(angleInRadians),
-    };
-};
-const star = ({ centerX, centerY, points, innerRadius, outerRadius, cornerRadius, edgeRoundness, }) => {
-    const degreeIncrement = 360 / (points * 2);
-    const d = new Array(points * 2)
-        .fill('true')
-        .map((_p, i) => {
-        const radius = i % 2 === 0 ? outerRadius : innerRadius;
-        const degrees = degreeIncrement * i;
-        const point = polarToCartesian({
-            centerX,
-            centerY,
-            radius,
-            angleInDegrees: degrees,
-        });
-        return [point.x, point.y];
-    });
-    return (0, instructions_1.serializeInstructions)((0, join_points_1.joinPoints)([...d, d[0]], {
-        edgeRoundness,
-        cornerRadius,
-        roundCornerStrategy: 'arc',
-    }));
-};
-exports.star = star;