@remotion/shapes 3.3.32

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2023 JonnyBurger
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+## @remotion/shapes
+
+A package providing utility functions for creating shapes with SVG.
+
+Documentation: https://remotion.dev/shapes
+
+No dependencies are needed, meaning this package can be used independently of Remotion.
+
+## API
+
+- [`makeRect()`](https://remotion.dev/docs/shapes/make-rect)
+- [`makeCircle()`](https://remotion.dev/docs/shapes/make-circle)
+- [`makeTriangle()`](https://remotion.dev/docs/shapes/make-triangle)
+- [`makeEllipse()`](https://remotion.dev/docs/shapes/make-ellipse)
+- [`<Circle />`](https://remotion.dev/docs/shapes/circle)
+- [`<Rect />`](https://remotion.dev/shapes/shapes/rect)
+- [`<Triangle />`](https://remotion.dev/shapes/shapes/triangle)
+- [`<Ellipse />`](https://remotion.dev/shapes/shapes/ellipse)
+
+## License
+
+MIT

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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/dist/make-circle.d.ts

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

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/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/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/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-rect.js

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

@@ -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/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/rect.d.ts

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

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

@@ -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/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/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/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/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/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/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/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/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/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/dist/utils/shape-info.d.ts

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

package/dist/utils/shape-info.js

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

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/package/dist/make-rect.js

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

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

@@ -0,0 +1,12 @@
+"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/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

@@ -0,0 +1,48 @@
+{
+	"name": "@remotion/shapes",
+	"version": "3.3.32",
+	"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"
+	},
+	"gitHead": "6b4f3514c801ddf2e7f957dd2e633271fbbc75f6"
+}