@remotion/shapes - npm Package Compare versions

Comparing version 3.3.54 to 3.3.55

dist/components/circle.d.ts

@@ -5,2 +5,7 @@ import React from 'react';
 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>;

dist/components/circle.js

@@ -7,2 +7,7 @@ "use strict";
 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 }) => {
@@ -9,0 +14,0 @@ return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_circle_1.makeCircle)({ radius }), ...props });

dist/components/ellipse.d.ts

@@ -5,2 +5,8 @@ import React from 'react';
 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>;

dist/components/ellipse.js

@@ -7,2 +7,8 @@ "use strict";
 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 }) => {
@@ -9,0 +15,0 @@ return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_ellipse_1.makeEllipse)({ rx, ry }), ...props });

dist/components/pie.d.ts

@@ -5,2 +5,11 @@ import React from 'react';
 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>;

dist/components/pie.js

@@ -7,2 +7,11 @@ "use strict";
 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 }) => {
@@ -9,0 +18,0 @@ return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_pie_1.makePie)({ radius, progress, closePath, counterClockwise, rotation }), ...props }));

dist/components/rect.d.ts

@@ -5,2 +5,10 @@ import React from 'react';
 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>;

dist/components/rect.js

@@ -7,2 +7,10 @@ "use strict";
 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 }) => {
@@ -9,0 +17,0 @@ return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_rect_1.makeRect)({ height, width, edgeRoundness, cornerRadius }), ...props }));

dist/components/star.d.ts

@@ -5,2 +5,11 @@ import React from 'react';
 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>;

dist/components/star.js

@@ -7,2 +7,11 @@ "use strict";
 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 }) => {
@@ -9,0 +18,0 @@ return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_star_1.makeStar)({

dist/components/triangle.d.ts

@@ -5,2 +5,10 @@ import React from 'react';
 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>;

dist/components/triangle.js

@@ -7,2 +7,10 @@ "use strict";
 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 }) => {
@@ -9,0 +17,0 @@ return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_triangle_1.makeTriangle)({ length, direction, edgeRoundness, cornerRadius }), ...props }));

dist/utils/join-points.d.ts

 import type { Instruction } from '@remotion/paths';
-export declare const joinPoints: (points: [number, number][], { edgeRoundness, cornerRadius, roundCornerStrategy, }: {
+export declare const joinPoints: (points: [
+    number,
+    number
+][], { edgeRoundness, cornerRadius, roundCornerStrategy, }: {
     edgeRoundness: number | null;
@@ -4,0 +7,0 @@ cornerRadius: number;

dist/utils/make-circle.d.ts

@@ -5,2 +5,7 @@ import type { ShapeInfo } from './shape-info';
 };
+/**
+ * @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;

dist/utils/make-circle.js

@@ -5,2 +5,7 @@ "use strict";
 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 }) => {
@@ -7,0 +12,0 @@ const instructions = [

dist/utils/make-ellipse.d.ts

@@ -6,2 +6,8 @@ import type { ShapeInfo } from './shape-info';
 };
+/**
+ * @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;

dist/utils/make-ellipse.js

@@ -5,2 +5,8 @@ "use strict";
 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 }) => {
@@ -7,0 +13,0 @@ const instructions = [

dist/utils/make-pie.d.ts

@@ -9,2 +9,11 @@ import type { Instruction } from '@remotion/paths';
 };
+/**
+ * @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) => {
@@ -11,0 +20,0 @@ height: number;

dist/utils/make-pie.js

@@ -13,2 +13,11 @@ "use strict";
 };
+/**
+ * @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, }) => {
@@ -15,0 +24,0 @@ const actualProgress = Math.min(Math.max(progress, 0), 1);

dist/utils/make-rect.d.ts

@@ -8,2 +8,10 @@ import type { ShapeInfo } from './shape-info';
 };
+/**
+ * @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;

dist/utils/make-rect.js

@@ -6,2 +6,10 @@ "use strict";
 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, }) => {
@@ -8,0 +16,0 @@ const transformOrigin = [width / 2, height / 2];

dist/utils/make-star.js

@@ -7,2 +7,11 @@ "use strict";
 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, }) => {
@@ -9,0 +18,0 @@ const degreeIncrement = (Math.PI * 2) / (points * 2);

dist/utils/make-triangle.d.ts

@@ -9,3 +9,11 @@ import type { ShapeInfo } from './shape-info';
 };
+/**
+ * @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 {};

dist/utils/make-triangle.js

@@ -7,2 +7,10 @@ "use strict";
 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, }) => {
@@ -9,0 +17,0 @@ const longerDimension = length;

package.json

 {
 	"name": "@remotion/shapes",
-	"version": "3.3.54",
+	"version": "3.3.55",
 	"description": "Utility functions and components for SVG shapes",
@@ -48,5 +48,5 @@ "main": "dist/index.js",
 	"dependencies": {
-		"@remotion/paths": "3.3.54"
+		"@remotion/paths": "3.3.55"
 	},
-	"gitHead": "3a004e0b0e2a805fb276c35dd5922e3389c9f53c"
+	"gitHead": "4cecccc293e9c906c693f55fac65df8f1cfd2338"
 }

No alert changes

Improved metrics

Total package byte prevSize

41560

increased by26.51%

Lines of code

906

increased by14.83%

Worsened metrics

Number of package files

35

decreased by-5.41%

Dependency changes

• + Added@remotion/paths@3.3.55(transitive)

• - Removed@remotion/paths@3.3.54(transitive)

• Updated@remotion/paths@3.3.55