@remotion/shapes 3.3.35 → 3.3.37

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

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

package/dist/components/return-type.js

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

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

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

package/dist/components/shape-info.js

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

package/dist/components/star.d.ts

@@ -0,0 +1,5 @@
+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 declare const Star: React.FC<StarProps>;

package/dist/components/star.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+const Star = ({ innerRadius, outerRadius, points, cornerRadius, edgeRoundness, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_star_1.makeStar)({
+            innerRadius,
+            outerRadius,
+            points,
+            cornerRadius,
+            edgeRoundness,
+        }), ...props }));
+};
+exports.Star = Star;

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 export { Circle, CircleProps } from './components/circle';
 export { Ellipse, EllipseProps } from './components/ellipse';
 export { Rect, RectProps } from './components/rect';
+export { Star, StarProps } from './components/star';
 export { Triangle, TriangleProps } from './components/triangle';
 export { Instruction } from './utils/instructions';
 export { makeCircle, MakeCircleProps } from './utils/make-circle';
 export { makeEllipse, MakeEllipseOptions } from './utils/make-ellipse';
 export { makeRect, MakeRectOptions } from './utils/make-rect';
+export { makeStar, MakeStarProps } from './utils/make-star';
 export { makeTriangle, MakeTriangleProps } from './utils/make-triangle';

package/dist/index.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeTriangle = exports.makeRect = exports.makeEllipse = exports.makeCircle = exports.Triangle = exports.Rect = exports.Ellipse = exports.Circle = void 0;
+exports.makeTriangle = exports.makeStar = exports.makeRect = exports.makeEllipse = exports.makeCircle = exports.Triangle = exports.Star = exports.Rect = exports.Ellipse = exports.Circle = void 0;
 var circle_1 = require("./components/circle");
 Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return circle_1.Circle; } });
 var ellipse_1 = require("./components/ellipse");
 Object.defineProperty(exports, "Ellipse", { enumerable: true, get: function () { return ellipse_1.Ellipse; } });
 var rect_1 = require("./components/rect");
 Object.defineProperty(exports, "Rect", { enumerable: true, get: function () { return rect_1.Rect; } });
+var star_1 = require("./components/star");
+Object.defineProperty(exports, "Star", { enumerable: true, get: function () { return star_1.Star; } });
 var triangle_1 = require("./components/triangle");
 Object.defineProperty(exports, "Triangle", { enumerable: true, get: function () { return triangle_1.Triangle; } });
 var make_circle_1 = require("./utils/make-circle");
@@ -15,5 +17,7 @@ var make_ellipse_1 = require("./utils/make-ellipse");
 Object.defineProperty(exports, "makeEllipse", { enumerable: true, get: function () { return make_ellipse_1.makeEllipse; } });
 var make_rect_1 = require("./utils/make-rect");
 Object.defineProperty(exports, "makeRect", { enumerable: true, get: function () { return make_rect_1.makeRect; } });
+var make_star_1 = require("./utils/make-star");
+Object.defineProperty(exports, "makeStar", { enumerable: true, get: function () { return make_star_1.makeStar; } });
 var make_triangle_1 = require("./utils/make-triangle");
 Object.defineProperty(exports, "makeTriangle", { enumerable: true, get: function () { return make_triangle_1.makeTriangle; } });

package/dist/make-circle.d.ts

@@ -1,6 +1,4 @@
 export declare type MakeCircleProps = {
-    cx?: number | string;
-    cy?: number | string;
-    radius?: number | string;
+    radius: number;
 };
-export declare const makeCircle: ({ cx, cy, radius, }: MakeCircleProps) => string;
+export declare const makeCircle: ({ radius }: MakeCircleProps) => string;

package/dist/make-circle.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeCircle = void 0;
-const makeCircle = ({ cx = 50, cy = 50, radius = 50, }) => {
+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 +1,5 @@
 export declare type MakeEllipseOptions = {
-    rx?: number | string;
-    ry?: number | string;
+    rx: number;
+    ry: number;
 };
 export declare const makeEllipse: ({ rx, ry }: MakeEllipseOptions) => string;

package/dist/make-rect.d.ts

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

package/dist/make-rect.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeRect = void 0;
-const makeRect = ({ x = 0, y = 0, width, height }) => {
+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/utils/make-star.d.ts

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

package/dist/utils/make-star.js

@@ -0,0 +1,46 @@
+"use strict";
+// Copied from https://stackblitz.com/edit/svg-star-generator?file=index.js
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeStar = void 0;
+const instructions_1 = require("./instructions");
+const join_points_1 = require("./join-points");
+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) => {
+        const radius = i % 2 === 0 ? outerRadius : innerRadius;
+        const angle = degreeIncrement * i - Math.PI / 2;
+        const point = {
+            x: centerX + radius * Math.cos(angle),
+            y: centerY + radius * Math.sin(angle),
+        };
+        return [point.x, point.y];
+    });
+    return (0, join_points_1.joinPoints)([...d, d[0]], {
+        edgeRoundness,
+        cornerRadius,
+        roundCornerStrategy: cornerRadius > 0 ? 'bezier' : 'arc',
+    });
+};
+const makeStar = ({ points, innerRadius, outerRadius, cornerRadius = 0, edgeRoundness = null, }) => {
+    const width = outerRadius * 2;
+    const height = outerRadius * 2;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const starPathInstructions = star({
+        centerX,
+        centerY,
+        points,
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        edgeRoundness,
+    });
+    return {
+        path: (0, instructions_1.serializeInstructions)(starPathInstructions),
+        width,
+        height,
+        transformOrigin: `${centerX} ${centerY}`,
+        instructions: starPathInstructions,
+    };
+};
+exports.makeStar = makeStar;

package/dist/utils/star.d.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,34 @@
+"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;

package/package/dist/Ellipse.d.ts

@@ -0,0 +1,10 @@
+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/package/dist/Ellipse.js

@@ -0,0 +1,12 @@
+"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/package/dist/circle.d.ts

@@ -0,0 +1,10 @@
+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/package/dist/circle.js

@@ -0,0 +1,13 @@
+"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/package/dist/components/circle.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { MakeCircleProps } from '../utils/make-circle';
+import type { AllShapesProps } from './render-svg';
+export declare type CircleProps = MakeCircleProps & AllShapesProps;
+export declare const Circle: React.FC<CircleProps>;

package/package/dist/components/circle.js

@@ -0,0 +1,10 @@
+"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("../utils/make-circle");
+const render_svg_1 = require("./render-svg");
+const Circle = ({ radius, ...props }) => {
+    return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_circle_1.makeCircle)({ radius }), ...props });
+};
+exports.Circle = Circle;

package/package/dist/components/ellipse.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { MakeEllipseOptions } from '../utils/make-ellipse';
+import type { AllShapesProps } from './render-svg';
+export declare type EllipseProps = MakeEllipseOptions & AllShapesProps;
+export declare const Ellipse: React.FC<EllipseProps>;

package/package/dist/components/ellipse.js

@@ -0,0 +1,10 @@
+"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("../utils/make-ellipse");
+const render_svg_1 = require("./render-svg");
+const Ellipse = ({ rx, ry, ...props }) => {
+    return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_ellipse_1.makeEllipse)({ rx, ry }), ...props });
+};
+exports.Ellipse = Ellipse;

package/package/dist/components/rect.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { MakeRectOptions } from '../utils/make-rect';
+import type { AllShapesProps } from './render-svg';
+export declare type RectProps = MakeRectOptions & AllShapesProps;
+export declare const Rect: React.FC<RectProps>;

package/package/dist/components/rect.js

@@ -0,0 +1,10 @@
+"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("../utils/make-rect");
+const render_svg_1 = require("./render-svg");
+const Rect = ({ width, height, ...props }) => {
+    return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_rect_1.makeRect)({ height, width }), ...props });
+};
+exports.Rect = Rect;

package/package/dist/components/render-svg.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd'> & {
+    pathStyle?: React.CSSProperties;
+};
+export declare const RenderSvg: ({ width, height, path, style, pathStyle, transformOrigin, ...props }: {
+    width: number;
+    height: number;
+    path: string;
+    transformOrigin: string;
+} & Omit<React.SVGProps<SVGPathElement>, "width" | "height" | "d"> & {
+    pathStyle?: React.CSSProperties | undefined;
+}) => JSX.Element;

package/package/dist/components/render-svg.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderSvg = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, ...props }) => {
+    const actualStyle = (0, react_1.useMemo)(() => {
+        return {
+            overflow: 'visible',
+            ...(style !== null && style !== void 0 ? style : {}),
+        };
+    }, [style]);
+    const actualPathStyle = (0, react_1.useMemo)(() => {
+        return {
+            transformBox: 'fill-box',
+            ...(pathStyle !== null && pathStyle !== void 0 ? pathStyle : {}),
+        };
+    }, [pathStyle]);
+    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: actualStyle, children: (0, jsx_runtime_1.jsx)("path", { "transform-origin": transformOrigin, d: path, style: actualPathStyle, ...props }) }));
+};
+exports.RenderSvg = RenderSvg;

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

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

package/package/dist/components/return-type.js

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

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

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

package/package/dist/components/shape-info.js

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

package/package/dist/components/triangle.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { MakeTriangleProps } from '../utils/make-triangle';
+import type { AllShapesProps } from './render-svg';
+export declare type TriangleProps = MakeTriangleProps & AllShapesProps;
+export declare const Triangle: React.FC<TriangleProps>;

package/package/dist/components/triangle.js

@@ -0,0 +1,10 @@
+"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("../utils/make-triangle");
+const render_svg_1 = require("./render-svg");
+const Triangle = ({ length, direction, ...props }) => {
+    return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_triangle_1.makeTriangle)({ length, direction }), ...props });
+};
+exports.Triangle = Triangle;

package/package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { Circle, CircleProps } from './components/circle';
+export { Ellipse, EllipseProps } from './components/ellipse';
+export { Rect, RectProps } from './components/rect';
+export { Triangle, TriangleProps } from './components/triangle';
+export { makeCircle, MakeCircleProps } from './utils/make-circle';
+export { makeEllipse, MakeEllipseOptions } from './utils/make-ellipse';
+export { makeRect, MakeRectOptions } from './utils/make-rect';
+export { makeTriangle, MakeTriangleProps } from './utils/make-triangle';

package/package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeTriangle = exports.makeRect = exports.makeEllipse = exports.makeCircle = exports.Triangle = exports.Rect = exports.Ellipse = exports.Circle = void 0;
+var circle_1 = require("./components/circle");
+Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return circle_1.Circle; } });
+var ellipse_1 = require("./components/ellipse");
+Object.defineProperty(exports, "Ellipse", { enumerable: true, get: function () { return ellipse_1.Ellipse; } });
+var rect_1 = require("./components/rect");
+Object.defineProperty(exports, "Rect", { enumerable: true, get: function () { return rect_1.Rect; } });
+var triangle_1 = require("./components/triangle");
+Object.defineProperty(exports, "Triangle", { enumerable: true, get: function () { return triangle_1.Triangle; } });
+var make_circle_1 = require("./utils/make-circle");
+Object.defineProperty(exports, "makeCircle", { enumerable: true, get: function () { return make_circle_1.makeCircle; } });
+var make_ellipse_1 = require("./utils/make-ellipse");
+Object.defineProperty(exports, "makeEllipse", { enumerable: true, get: function () { return make_ellipse_1.makeEllipse; } });
+var make_rect_1 = require("./utils/make-rect");
+Object.defineProperty(exports, "makeRect", { enumerable: true, get: function () { return make_rect_1.makeRect; } });
+var make_triangle_1 = require("./utils/make-triangle");
+Object.defineProperty(exports, "makeTriangle", { enumerable: true, get: function () { return make_triangle_1.makeTriangle; } });

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

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

package/package/dist/make-circle.js

@@ -0,0 +1,9 @@
+"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/package/dist/make-ellipse.d.ts

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

package/package/dist/make-ellipse.js

@@ -0,0 +1,7 @@
+"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/package/dist/make-rect.d.ts

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

package/{dist/make-square.js → package/dist/make-rect.js}

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeRect = void 0;
-const makeRect = ({ x = 0, y = 0, width, height }) => {
+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/package/dist/make-triangle.d.ts

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

package/package/dist/make-triangle.js

@@ -0,0 +1,14 @@
+"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/square.d.ts → package/dist/rect.d.ts}

@@ -5,4 +5,4 @@ export declare type SquareProps = {
     fill?: string;
     style?: React.CSSProperties;
 };
-export declare const Square: React.FC<SquareProps>;
+export declare const Rect: React.FC<SquareProps>;

package/{dist/square.js → package/dist/rect.js}

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Square = void 0;
+exports.Rect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const make_square_1 = require("./make-square");
-const Square = ({ 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": "square", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_square_1.makeSquare)({
+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.Square = Square;
+exports.Rect = Rect;

package/package/dist/triangle.d.ts

@@ -0,0 +1,9 @@
+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/package/dist/triangle.js

@@ -0,0 +1,13 @@
+"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/package/dist/utils/make-circle.d.ts

@@ -0,0 +1,5 @@
+import type { ShapeInfo } from './shape-info';
+export declare type MakeCircleProps = {
+    radius: number;
+};
+export declare const makeCircle: ({ radius }: MakeCircleProps) => ShapeInfo;

package/package/dist/utils/make-circle.js

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

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

@@ -0,0 +1,6 @@
+import type { ShapeInfo } from './shape-info';
+export declare type MakeEllipseOptions = {
+    rx: number;
+    ry: number;
+};
+export declare const makeEllipse: ({ rx, ry }: MakeEllipseOptions) => ShapeInfo;

package/package/dist/utils/make-ellipse.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeEllipse = void 0;
+const makeEllipse = ({ rx, ry }) => {
+    return {
+        width: rx * 2,
+        height: ry * 2,
+        path: `M ${rx} ${0} a ${rx} ${ry} 0 1 0 1 0`,
+        transformOrigin: `${rx} ${ry}`,
+    };
+};
+exports.makeEllipse = makeEllipse;

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

@@ -0,0 +1,6 @@
+import type { ShapeInfo } from './shape-info';
+export declare type MakeRectOptions = {
+    width: number;
+    height: number;
+};
+export declare const makeRect: ({ width, height }: MakeRectOptions) => ShapeInfo;

package/package/dist/utils/make-rect.js

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

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

@@ -0,0 +1,6 @@
+import type { ShapeInfo } from './shape-info';
+export declare type MakeTriangleProps = {
+    length: number;
+    direction: 'right' | 'left' | 'top' | 'bottom';
+};
+export declare const makeTriangle: ({ length, direction, }: MakeTriangleProps) => ShapeInfo;

package/package/dist/utils/make-triangle.js

@@ -0,0 +1,57 @@
+"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 = ({ length, direction = 'right', }) => {
+    const longerDimension = length;
+    const shorterSize = Math.sqrt(length ** 2 * 0.75); // Calculated on paper;
+    const points = {
+        top: [
+            `${longerDimension / 2} 0`,
+            'L',
+            `0 ${shorterSize}`,
+            'L',
+            `${longerDimension} ${shorterSize}`,
+        ],
+        right: [
+            `0 0`,
+            'L',
+            `0 ${longerDimension}`,
+            'L',
+            `${shorterSize} ${longerDimension / 2}`,
+        ],
+        bottom: [
+            `0 0`,
+            'L',
+            `${longerDimension} 0`,
+            'L',
+            `${longerDimension / 2} ${shorterSize}`,
+        ],
+        left: [
+            `${shorterSize} 0`,
+            'L',
+            `${shorterSize} ${longerDimension}`,
+            'L',
+            `0 ${longerDimension / 2}`,
+        ],
+    };
+    const transformOriginX = {
+        left: (shorterSize / 3) * 2,
+        right: shorterSize / 3,
+        top: longerDimension / 2,
+        bottom: longerDimension / 2,
+    }[direction];
+    const transformOriginY = {
+        top: (shorterSize / 3) * 2,
+        bottom: shorterSize / 3,
+        left: longerDimension / 2,
+        right: longerDimension / 2,
+    }[direction];
+    return {
+        path: `M ${points[direction].join(' ')} z`,
+        width: direction === 'top' || direction === 'bottom' ? length : shorterSize,
+        height: direction === 'top' || direction === 'bottom' ? shorterSize : length,
+        transformOrigin: `${transformOriginX} ${transformOriginY}`,
+    };
+};
+exports.makeTriangle = makeTriangle;

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

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

package/package/dist/utils/shape-info.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/shapes",
-	"version": "3.3.35",
+	"version": "3.3.37",
 	"description": "Utility functions and components for SVG shapes",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -44,5 +44,5 @@
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
-	"gitHead": "92344ca937e4c51b8484f79528e3c38d598f7053"
+	"gitHead": "ead6bdacc14a9953cae738159c49bf3daf09e9b0"
 }

package/dist/make-square.d.ts

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