@remotion/design 4.0.371

package/README.md

@@ -0,0 +1,18 @@
+# @remotion/design
+ 
+Design system
+ 
+[![NPM Downloads](https://img.shields.io/npm/dm/@remotion/design.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/@remotion/design?minimal=true)
+ 
+## Installation
+ 
+```bash
+npm install @remotion/design --save-exact
+```
+ 
+When installing a Remotion package, make sure to align the version of all `remotion` and `@remotion/*` packages to the same version.
+Remove the `^` character from the version number to use the exact version.
+ 
+## Usage
+ 
+See the [documentation](https://www.remotion.dev/design) for more information.

package/dist/Button.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    readonly depth?: number;
+}>;

package/dist/Button.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { cn } from './helpers/cn';
+import { useHoverTransforms } from './helpers/hover-transforms';
+import { Outer } from './helpers/Outer';
+export const Button = ({ children, className, disabled, depth, ...buttonProps }) => {
+    const [dimensions, setDimensions] = useState(null);
+    const ref = useRef(null);
+    const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled));
+    const onPointerEnter = useCallback((e) => {
+        if (e.pointerType !== 'mouse') {
+            return;
+        }
+        setDimensions((prevDim) => {
+            if (!ref.current) {
+                throw new Error('Ref is not set');
+            }
+            const { childNodes } = ref.current;
+            if (childNodes.length === 0) {
+                throw new Error('No child nodes');
+            }
+            const childNode = childNodes[0];
+            if (!childNode) {
+                throw new Error('No child node');
+            }
+            const rect = childNode.getBoundingClientRect();
+            const { borderRadius } = getComputedStyle(childNode);
+            const cornerRadius = borderRadius.includes('e+0')
+                ? Infinity
+                : parseInt(borderRadius ?? '0', 10);
+            const newCornerRadius = Math.min(cornerRadius, rect.width / 2, rect.height / 2);
+            if (prevDim) {
+                return {
+                    width: rect.width,
+                    height: rect.height,
+                    borderRadius: prevDim.borderRadius,
+                };
+            }
+            return {
+                width: rect.width,
+                height: rect.height,
+                borderRadius: newCornerRadius,
+            };
+        });
+    }, []);
+    const content = (_jsx("button", { type: "button", disabled: disabled, className: cn('text-text', 'flex', 'justify-center', 'bg-button-bg', 'items-center', 'font-brand', 'border-solid', 'text-[1em]', 'rounded-lg', 'border-black', 'border-2', 'border-b-4', 'cursor-pointer', 'px-4', 'h-12', 'flex', 'flex-row', 'items-center', 'disabled:cursor-default', 'disabled:border-gray-500', 'disabled:text-gray-500', className), ...buttonProps, children: children }));
+    return (_jsx("div", { ref: ref, className: "contents", onPointerEnter: onPointerEnter, children: dimensions && (isActive || progress > 0) ? (_jsx(Outer, { parentRef: ref, width: dimensions.width, height: dimensions.height, cornerRadius: dimensions.borderRadius, hoverTransform: progress, depthFactor: depth ?? 1, children: content })) : (content) }));
+};

package/dist/Card.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Card: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/Card.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from './helpers/cn';
+export const Card = React.forwardRef(({ children, className, ...rest }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn('rounded-lg border-2 border-black bg-card-bg text-text border-b-4', className), ...rest, children: children }));
+});
+Card.displayName = 'Card';

package/dist/CheckIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CheckIcon: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/CheckIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const d = 'M143.056 81.4934C147.25 77.2994 147.25 70.4506 143.056 66.2566C138.862 62.0627 132.013 62.0627 127.819 66.2566L86.1875 107.888L69.1809 90.8816C64.9869 86.6877 58.1381 86.6877 53.9441 90.8816C49.7502 95.0756 49.7502 101.924 53.9441 106.118L78.5691 130.743C82.7631 134.937 89.6119 134.937 93.8059 130.743L143.056 81.4934Z';
+export const CheckIcon = (props) => {
+    return (_jsx("svg", { ...props, viewBox: '50.79867500000001 63.11117499999997 95.40282500000015 70.77732499999999', fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: d, fill: "currentcolor" }) }));
+};

package/dist/Counter.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface CounterProps {
+    readonly count: number;
+    readonly setCount: (count: number) => void;
+    readonly minCount?: number;
+    readonly step?: number;
+}
+export declare const Counter: React.FC<CounterProps>;
+export {};

package/dist/Counter.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from './Card';
+import { cn } from './helpers/cn';
+const Triangle = ({ rotated }) => (_jsx("svg", { width: "12px", height: "7px", viewBox: "0 0 12 7", fill: "none", style: {
+        transform: rotated ? 'rotate(180deg)' : 'rotate(0deg)',
+    }, children: _jsx("path", { className: "fill-text", d: "M7.17096 0.475588C6.73198 0.0764969 6.01906 0.0764969 5.58007 0.475588L1.08483 4.56228C0.761737 4.85601 0.666915 5.29341 0.84251 5.67654C1.01811 6.05966 1.42549 6.3087 1.88203 6.3087H10.8725C11.3255 6.3087 11.7364 6.05966 11.912 5.67654C12.0876 5.29341 11.9893 4.85601 11.6697 4.56228L7.17448 0.475588H7.17096Z" }) }));
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    height: 42,
+    flexShrink: 0,
+};
+const buttonContainer = {
+    display: 'flex',
+    width: 30,
+    height: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+};
+export const Counter = ({ count, setCount, minCount = 0, step = 1, }) => {
+    const decrement = () => {
+        if (count > minCount) {
+            setCount(Math.max(minCount, count - step));
+        }
+    };
+    const increment = () => {
+        setCount(count + step);
+    };
+    return (_jsxs(Card, { style: container, className: cn('w-[140px] flex flex-row overflow-hidden'), children: [_jsx("input", { className: 'fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums', type: "number", onClick: (e) => e.currentTarget.select(), value: count, onChange: (e) => {
+                    if (e.target.value.trim() === '') {
+                        setCount(step === 1 ? 1 : minCount);
+                        return;
+                    }
+                    const inputValue = parseInt(e.target.value, 10);
+                    const validValue = Math.max(inputValue, minCount);
+                    // For steps > 1, round to the nearest valid step
+                    if (step > 1) {
+                        const roundedValue = Math.round(validValue / step) * step;
+                        setCount(Math.max(roundedValue, minCount));
+                    }
+                    else {
+                        setCount(validValue);
+                    }
+                } }), _jsxs("div", { className: "flex flex-col  h-full", children: [_jsx("button", { type: "button", className: "border-0 flex-1 p-0 pt-[5px] bg-transparent", style: {
+                            ...buttonContainer,
+                        }, onClick: increment, children: _jsx(Triangle, { rotated: false }) }), _jsx("button", { type: "button", className: "border-0 flex-1 p-0 bg-transparent pb-[5px] pl-[1px]", style: {
+                            ...buttonContainer,
+                        }, onClick: decrement, children: _jsx(Triangle, { rotated: true }) })] })] }));
+};

package/dist/PaperPlaneIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PlanePaperIcon: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/PaperPlaneIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PlanePaperIcon = (props) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, viewBox: "0 0 576 512", children: _jsx("path", { fill: "currentcolor", d: "M169.9 280L94.9 448.6 461.2 280 169.9 280zm291.3-48L94.9 63.4 169.9 232 461.2 232zM34.8 465.6L128 256 34.8 46.4C33 42.2 32 37.6 32 33 32 14.8 46.7 0 64.8 0 69.5 0 74.2 1 78.5 3L554.2 222c13.3 6.1 21.8 19.4 21.8 34s-8.5 27.9-21.8 34L78.5 509c-4.3 2-9 3-13.7 3-18.1 0-32.8-14.8-32.8-33 0-4.6 1-9.2 2.8-13.4z" }) }));
+};

package/dist/Switch.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Switch: React.FC<{
+    readonly active: boolean;
+    readonly onToggle: () => void;
+}>;

package/dist/Switch.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Switch = ({ active, onToggle }) => {
+    return (_jsx("div", { "data-active": active, className: "h-8 transition-all rounded-full w-14 border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative", onClick: onToggle, children: _jsx("div", { "data-active": active, className: "h-4 w-4 box-content left-[4px] top-[3px] transition-all rounded-full bg-white border-2 border-black absolute data-[active=true]:left-[calc(100%-24px)]" }) }));
+};

package/dist/Triangle.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Triangle: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/Triangle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Triangle = (props) => {
+    return (_jsx("svg", { viewBox: "0 0 127 131", fill: "none", ...props, children: _jsx("path", { d: "M28.5644 0.011261C25.8196 0.159241 23.6077 0.591782 21.3786 1.43413C20.2669 1.84959 18.4446 2.75455 17.4418 3.38062C13.2472 5.993 10.0496 9.9201 8.38209 14.4903C8.04973 15.3953 7.15007 18.2809 6.5713 20.2672C2.71476 33.5453 0.525761 48.0643 0.0558711 63.4312C-0.0186237 65.8785 -0.0186237 71.7066 0.0558711 74.1141C0.371041 84.3018 1.35093 93.4992 3.12735 102.879C3.84937 106.675 5.00691 111.774 5.67736 114.091C7.04692 118.798 9.84334 122.805 13.8202 125.741C16.4848 127.711 19.5105 129.031 22.8627 129.68C24.4787 129.993 26.6104 130.135 28.1805 130.033C30.3523 129.89 34.6616 129.316 38.1628 128.695C53.9442 125.901 68.5223 120.898 81.7422 113.738C90.1143 109.202 97.2715 104.29 104.177 98.3312C111.059 92.4007 116.927 86.0206 122.09 78.8608C123.287 77.2045 123.889 76.237 124.491 75.019C126.038 71.8773 126.766 68.7527 126.76 65.2582C126.76 62.0027 126.141 59.1114 124.806 56.1518C124.164 54.7233 123.551 53.6988 122.176 51.7523C117.11 44.5868 111.489 38.3433 104.635 32.2762C94.011 22.8739 81.3927 15.1619 67.3017 9.45339C64.2474 8.21835 61.239 7.13128 57.6174 5.95315C49.9502 3.46598 40.4607 1.30891 32.4324 0.233231C31.1718 0.0624847 29.4584 -0.0342712 28.5644 0.011261Z", fill: "currentcolor" }) }));
+};

package/dist/esm/index.mjs

@@ -0,0 +1,537 @@
+// src/Button.tsx
+import { useCallback, useRef, useState as useState2 } from "react";
+
+// src/helpers/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/helpers/hover-transforms.ts
+import React, { useEffect, useMemo, useState } from "react";
+
+// src/helpers/get-child-node-from.ts
+var getChildNodeFrom = (htmlElement) => {
+  if (!htmlElement) {
+    return null;
+  }
+  const { childNodes } = htmlElement;
+  if (childNodes.length === 0) {
+    return null;
+  }
+  const childNode = childNodes[0];
+  if (!childNode) {
+    return null;
+  }
+  return childNode;
+};
+
+// src/helpers/hover-transforms.ts
+var useHoverTransforms = (ref, disabled) => {
+  const [state, setState] = React.useState({
+    progress: 0,
+    isActive: false
+  });
+  const eventTarget = useMemo(() => new EventTarget, []);
+  useEffect(() => {
+    if (disabled) {
+      eventTarget.dispatchEvent(new Event("disabled"));
+    } else {
+      eventTarget.dispatchEvent(new Event("enabled"));
+    }
+  }, [disabled, eventTarget]);
+  React.useEffect(() => {
+    const element = ref.current;
+    if (!element)
+      return;
+    let animationFrame;
+    let start = null;
+    let isHovered = false;
+    let internalDisabled = disabled;
+    const getIsActive = () => {
+      return isHovered && !internalDisabled;
+    };
+    const animate = (timestamp) => {
+      if (start === null)
+        start = timestamp;
+      const progress = Math.min((timestamp - start) / 150, 1);
+      setState(() => ({
+        isActive: getIsActive(),
+        progress: getIsActive() ? progress : 1 - progress
+      }));
+      if (progress < 1) {
+        animationFrame = requestAnimationFrame(animate);
+      }
+    };
+    const animateIn = () => {
+      start = null;
+      cancelAnimationFrame(animationFrame);
+      animationFrame = requestAnimationFrame(animate);
+    };
+    const handleMouseEnter = () => {
+      const prevIsActive = getIsActive();
+      isHovered = true;
+      if (prevIsActive === getIsActive()) {
+        return;
+      }
+      animateIn();
+    };
+    const handleMouseLeave = () => {
+      const prevIsActive = getIsActive();
+      isHovered = false;
+      if (prevIsActive === getIsActive()) {
+        return;
+      }
+      animateIn();
+    };
+    const handleDisabled = () => {
+      const prevIsActive = getIsActive();
+      internalDisabled = true;
+      if (prevIsActive === getIsActive()) {
+        return;
+      }
+      animateIn();
+    };
+    const handleEnabled = () => {
+      const prevIsActive = getIsActive();
+      internalDisabled = false;
+      if (prevIsActive === getIsActive()) {
+        return;
+      }
+      animateIn();
+    };
+    element.addEventListener("mouseenter", handleMouseEnter);
+    element.addEventListener("mouseleave", handleMouseLeave);
+    eventTarget.addEventListener("disabled", handleDisabled);
+    eventTarget.addEventListener("enabled", handleEnabled);
+    return () => {
+      element.removeEventListener("mouseenter", handleMouseEnter);
+      element.removeEventListener("mouseleave", handleMouseLeave);
+      eventTarget.removeEventListener("disabled", handleDisabled);
+      eventTarget.removeEventListener("enabled", handleEnabled);
+      cancelAnimationFrame(animationFrame);
+    };
+  }, [ref, eventTarget]);
+  return state;
+};
+var useClickTransforms = (ref) => {
+  const [hoverProgress, setHoverProgress] = React.useState(0);
+  React.useEffect(() => {
+    const element = getChildNodeFrom(ref.current);
+    if (!element) {
+      return;
+    }
+    let animationFrame;
+    let start = null;
+    let isHovered = false;
+    const animate = (timestamp) => {
+      if (start === null)
+        start = timestamp;
+      const progress = Math.min((timestamp - start) / 150, 1);
+      setHoverProgress(isHovered ? progress : 1 - progress);
+      if (progress < 1) {
+        animationFrame = requestAnimationFrame(animate);
+      }
+    };
+    const handleMouseEnter = () => {
+      isHovered = true;
+      start = null;
+      cancelAnimationFrame(animationFrame);
+      animationFrame = requestAnimationFrame(animate);
+    };
+    const handleMouseLeave = () => {
+      isHovered = false;
+      start = null;
+      cancelAnimationFrame(animationFrame);
+      animationFrame = requestAnimationFrame(animate);
+    };
+    element.addEventListener("pointerdown", handleMouseEnter);
+    element.addEventListener("pointerup", handleMouseLeave);
+    return () => {
+      element.removeEventListener("pointerdown", handleMouseEnter);
+      element.removeEventListener("pointerup", handleMouseLeave);
+      cancelAnimationFrame(animationFrame);
+    };
+  }, [ref]);
+  return hoverProgress;
+};
+var getAngle = (ref, coordinates) => {
+  const element = getChildNodeFrom(ref);
+  if (!element) {
+    return 0;
+  }
+  if (coordinates === null) {
+    return 0;
+  }
+  const clientRect = element.getClientRects();
+  if (!clientRect) {
+    return 0;
+  }
+  if (clientRect.length === 0) {
+    return 0;
+  }
+  const center = {
+    x: clientRect[0].x + clientRect[0].width / 2,
+    y: clientRect[0].y + clientRect[0].height / 2
+  };
+  const angle = Math.atan2(coordinates.y - center.y, coordinates.x - center.x);
+  return angle;
+};
+var lastCoordinates = null;
+var useMousePosition = (ref) => {
+  const [angle, setAngle] = useState(getAngle(ref.current, lastCoordinates));
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const onMouseMove = (e) => {
+      const clientRect = element.getClientRects();
+      if (!clientRect) {
+        return;
+      }
+      lastCoordinates = { y: e.clientY, x: e.clientX };
+      setAngle(getAngle(element, { y: e.clientY, x: e.clientX }));
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+    };
+  }, [ref]);
+  return angle;
+};
+
+// src/helpers/Outer.tsx
+import { parsePath, PathInternals, reduceInstructions } from "@remotion/paths";
+import { makeRect } from "@remotion/shapes";
+import {
+  extrudeAndTransformElement,
+  interpolateMatrix4d,
+  makeMatrix3dTransform,
+  reduceMatrices,
+  rotateX,
+  rotateY,
+  scaled,
+  translateX,
+  translateY,
+  translateZ
+} from "@remotion/svg-3d-engine";
+import { interpolate } from "remotion";
+
+// src/helpers/Faces.tsx
+import { threeDIntoSvgPath } from "@remotion/svg-3d-engine";
+import { jsx, Fragment } from "react/jsx-runtime";
+var Faces = ({ elements, ...svgProps }) => {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: elements.map(({ points, color, crispEdges }, idx) => {
+      return /* @__PURE__ */ jsx("path", {
+        d: threeDIntoSvgPath(points),
+        fill: color,
+        shapeRendering: crispEdges ? "crispEdges" : undefined,
+        ...svgProps
+      }, idx);
+    })
+  });
+};
+
+// src/helpers/Outer.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Outer = ({
+  children,
+  width,
+  height,
+  cornerRadius,
+  hoverTransform,
+  parentRef,
+  depthFactor
+}) => {
+  const clickTransform = useClickTransforms(parentRef);
+  const angle = useMousePosition(parentRef);
+  const appropriateScale = Math.min(1 + 0.1 * depthFactor, (20 + width) / width);
+  const transformationUnhovered = reduceMatrices([
+    rotateX(-Math.PI / 20)
+  ]);
+  const transformationHovered = reduceMatrices([
+    scaled(appropriateScale),
+    rotateX(-Math.PI / 16),
+    rotateX(Math.sin(angle) / 4),
+    rotateY(-Math.cos(angle) / 4)
+  ]);
+  const transformation = interpolateMatrix4d(hoverTransform, transformationUnhovered, transformationHovered);
+  const depthFromClick = clickTransform * 15 * depthFactor;
+  const depthFromHover = interpolate(hoverTransform, [0, 1], [10, 20]) * depthFactor;
+  const depth = depthFromHover;
+  const frontFace = reduceMatrices([
+    translateZ(-depth / 2 + depthFromClick),
+    transformation
+  ]);
+  const centerOriented = reduceMatrices([
+    translateX(-width / 2),
+    translateY(-height / 2),
+    transformation,
+    translateX(width / 2),
+    translateY(height / 2)
+  ]);
+  const { path, instructions } = makeRect({ height, width, cornerRadius });
+  const { viewBox } = PathInternals.getBoundingBoxFromInstructions(reduceInstructions(instructions));
+  const inbetween = extrudeAndTransformElement({
+    sideColor: "black",
+    crispEdges: false,
+    depth,
+    pressInDepth: depthFromClick,
+    points: parsePath(path),
+    description: "rect",
+    transformations: centerOriented
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    className: "relative",
+    style: { width, height },
+    children: [
+      /* @__PURE__ */ jsx2("svg", {
+        viewBox,
+        style: {
+          overflow: "visible",
+          height,
+          width,
+          position: "absolute",
+          top: 0,
+          left: 0
+        },
+        pointerEvents: "none",
+        children: /* @__PURE__ */ jsx2(Faces, {
+          elements: inbetween
+        })
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        style: {
+          transform: makeMatrix3dTransform(frontFace)
+        },
+        children
+      })
+    ]
+  });
+};
+
+// src/Button.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Button = ({ children, className, disabled, depth, ...buttonProps }) => {
+  const [dimensions, setDimensions] = useState2(null);
+  const ref = useRef(null);
+  const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled));
+  const onPointerEnter = useCallback((e) => {
+    if (e.pointerType !== "mouse") {
+      return;
+    }
+    setDimensions((prevDim) => {
+      if (!ref.current) {
+        throw new Error("Ref is not set");
+      }
+      const { childNodes } = ref.current;
+      if (childNodes.length === 0) {
+        throw new Error("No child nodes");
+      }
+      const childNode = childNodes[0];
+      if (!childNode) {
+        throw new Error("No child node");
+      }
+      const rect = childNode.getBoundingClientRect();
+      const { borderRadius } = getComputedStyle(childNode);
+      const cornerRadius = borderRadius.includes("e+0") ? Infinity : parseInt(borderRadius ?? "0", 10);
+      const newCornerRadius = Math.min(cornerRadius, rect.width / 2, rect.height / 2);
+      if (prevDim) {
+        return {
+          width: rect.width,
+          height: rect.height,
+          borderRadius: prevDim.borderRadius
+        };
+      }
+      return {
+        width: rect.width,
+        height: rect.height,
+        borderRadius: newCornerRadius
+      };
+    });
+  }, []);
+  const content = /* @__PURE__ */ jsx3("button", {
+    type: "button",
+    disabled,
+    className: cn("text-text", "flex", "justify-center", "bg-button-bg", "items-center", "font-brand", "border-solid", "text-[1em]", "rounded-lg", "border-black", "border-2", "border-b-4", "cursor-pointer", "px-4", "h-12", "flex", "flex-row", "items-center", "disabled:cursor-default", "disabled:border-gray-500", "disabled:text-gray-500", className),
+    ...buttonProps,
+    children
+  });
+  return /* @__PURE__ */ jsx3("div", {
+    ref,
+    className: "contents",
+    onPointerEnter,
+    children: dimensions && (isActive || progress > 0) ? /* @__PURE__ */ jsx3(Outer, {
+      parentRef: ref,
+      width: dimensions.width,
+      height: dimensions.height,
+      cornerRadius: dimensions.borderRadius,
+      hoverTransform: progress,
+      depthFactor: depth ?? 1,
+      children: content
+    }) : content
+  });
+};
+// src/Card.tsx
+import React3 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Card = React3.forwardRef(({ children, className, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx4("div", {
+    ref,
+    className: cn("rounded-lg border-2 border-black bg-card-bg text-text border-b-4", className),
+    ...rest,
+    children
+  });
+});
+Card.displayName = "Card";
+// src/CheckIcon.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var d = "M143.056 81.4934C147.25 77.2994 147.25 70.4506 143.056 66.2566C138.862 62.0627 132.013 62.0627 127.819 66.2566L86.1875 107.888L69.1809 90.8816C64.9869 86.6877 58.1381 86.6877 53.9441 90.8816C49.7502 95.0756 49.7502 101.924 53.9441 106.118L78.5691 130.743C82.7631 134.937 89.6119 134.937 93.8059 130.743L143.056 81.4934Z";
+var CheckIcon = (props) => {
+  return /* @__PURE__ */ jsx5("svg", {
+    ...props,
+    viewBox: "50.79867500000001 63.11117499999997 95.40282500000015 70.77732499999999",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx5("path", {
+      d,
+      fill: "currentcolor"
+    })
+  });
+};
+// src/Counter.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var Triangle = ({ rotated }) => /* @__PURE__ */ jsx6("svg", {
+  width: "12px",
+  height: "7px",
+  viewBox: "0 0 12 7",
+  fill: "none",
+  style: {
+    transform: rotated ? "rotate(180deg)" : "rotate(0deg)"
+  },
+  children: /* @__PURE__ */ jsx6("path", {
+    className: "fill-text",
+    d: "M7.17096 0.475588C6.73198 0.0764969 6.01906 0.0764969 5.58007 0.475588L1.08483 4.56228C0.761737 4.85601 0.666915 5.29341 0.84251 5.67654C1.01811 6.05966 1.42549 6.3087 1.88203 6.3087H10.8725C11.3255 6.3087 11.7364 6.05966 11.912 5.67654C12.0876 5.29341 11.9893 4.85601 11.6697 4.56228L7.17448 0.475588H7.17096Z"
+  })
+});
+var container = {
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-end",
+  alignItems: "center",
+  height: 42,
+  flexShrink: 0
+};
+var buttonContainer = {
+  display: "flex",
+  width: 30,
+  height: 20,
+  justifyContent: "center",
+  alignItems: "center",
+  cursor: "pointer"
+};
+var Counter = ({
+  count,
+  setCount,
+  minCount = 0,
+  step = 1
+}) => {
+  const decrement = () => {
+    if (count > minCount) {
+      setCount(Math.max(minCount, count - step));
+    }
+  };
+  const increment = () => {
+    setCount(count + step);
+  };
+  return /* @__PURE__ */ jsxs2(Card, {
+    style: container,
+    className: cn("w-[140px] flex flex-row overflow-hidden"),
+    children: [
+      /* @__PURE__ */ jsx6("input", {
+        className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
+        type: "number",
+        onClick: (e) => e.currentTarget.select(),
+        value: count,
+        onChange: (e) => {
+          if (e.target.value.trim() === "") {
+            setCount(step === 1 ? 1 : minCount);
+            return;
+          }
+          const inputValue = parseInt(e.target.value, 10);
+          const validValue = Math.max(inputValue, minCount);
+          if (step > 1) {
+            const roundedValue = Math.round(validValue / step) * step;
+            setCount(Math.max(roundedValue, minCount));
+          } else {
+            setCount(validValue);
+          }
+        }
+      }),
+      /* @__PURE__ */ jsxs2("div", {
+        className: "flex flex-col  h-full",
+        children: [
+          /* @__PURE__ */ jsx6("button", {
+            type: "button",
+            className: "border-0 flex-1 p-0 pt-[5px] bg-transparent",
+            style: {
+              ...buttonContainer
+            },
+            onClick: increment,
+            children: /* @__PURE__ */ jsx6(Triangle, {
+              rotated: false
+            })
+          }),
+          /* @__PURE__ */ jsx6("button", {
+            type: "button",
+            className: "border-0 flex-1 p-0 bg-transparent pb-[5px] pl-[1px]",
+            style: {
+              ...buttonContainer
+            },
+            onClick: decrement,
+            children: /* @__PURE__ */ jsx6(Triangle, {
+              rotated: true
+            })
+          })
+        ]
+      })
+    ]
+  });
+};
+// src/PaperPlaneIcon.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var PlanePaperIcon = (props) => {
+  return /* @__PURE__ */ jsx7("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    viewBox: "0 0 576 512",
+    children: /* @__PURE__ */ jsx7("path", {
+      fill: "currentcolor",
+      d: "M169.9 280L94.9 448.6 461.2 280 169.9 280zm291.3-48L94.9 63.4 169.9 232 461.2 232zM34.8 465.6L128 256 34.8 46.4C33 42.2 32 37.6 32 33 32 14.8 46.7 0 64.8 0 69.5 0 74.2 1 78.5 3L554.2 222c13.3 6.1 21.8 19.4 21.8 34s-8.5 27.9-21.8 34L78.5 509c-4.3 2-9 3-13.7 3-18.1 0-32.8-14.8-32.8-33 0-4.6 1-9.2 2.8-13.4z"
+    })
+  });
+};
+// src/Switch.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Switch = ({ active, onToggle }) => {
+  return /* @__PURE__ */ jsx8("div", {
+    "data-active": active,
+    className: "h-8 transition-all rounded-full w-14 border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
+    onClick: onToggle,
+    children: /* @__PURE__ */ jsx8("div", {
+      "data-active": active,
+      className: "h-4 w-4 box-content left-[4px] top-[3px] transition-all rounded-full bg-white border-2 border-black absolute data-[active=true]:left-[calc(100%-24px)]"
+    })
+  });
+};
+export {
+  Switch,
+  PlanePaperIcon,
+  Counter,
+  CheckIcon,
+  Card,
+  Button
+};

package/dist/helpers/Faces.d.ts

@@ -0,0 +1,5 @@
+import type { FaceType } from '@remotion/svg-3d-engine';
+import React from 'react';
+export declare const Faces: React.FC<{
+    readonly elements: FaceType[];
+}>;

package/dist/helpers/Faces.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { threeDIntoSvgPath } from '@remotion/svg-3d-engine';
+export const Faces = ({ elements, ...svgProps }) => {
+    return (_jsx(_Fragment, { children: elements.map(({ points, color, crispEdges }, idx) => {
+            return (_jsx("path", { d: threeDIntoSvgPath(points), fill: color, shapeRendering: crispEdges ? 'crispEdges' : undefined, ...svgProps }, idx));
+        }) }));
+};

package/dist/helpers/Outer.d.ts

@@ -0,0 +1,9 @@
+export declare const Outer: React.FC<{
+    children: React.ReactNode;
+    width: number;
+    height: number;
+    cornerRadius: number;
+    hoverTransform: number;
+    parentRef: React.RefObject<HTMLDivElement | null>;
+    depthFactor: number;
+}>;

package/dist/helpers/Outer.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parsePath, PathInternals, reduceInstructions } from '@remotion/paths';
+import { makeRect } from '@remotion/shapes';
+import { extrudeAndTransformElement, interpolateMatrix4d, makeMatrix3dTransform, reduceMatrices, rotateX, rotateY, scaled, translateX, translateY, translateZ, } from '@remotion/svg-3d-engine';
+import { interpolate } from 'remotion';
+import { Faces } from './Faces';
+import { useClickTransforms, useMousePosition } from './hover-transforms';
+export const Outer = ({ children, width, height, cornerRadius, hoverTransform, parentRef, depthFactor, }) => {
+    const clickTransform = useClickTransforms(parentRef);
+    const angle = useMousePosition(parentRef);
+    const appropriateScale = Math.min(1 + 0.1 * depthFactor, (20 + width) / width);
+    const transformationUnhovered = reduceMatrices([
+        rotateX(-Math.PI / 20),
+    ]);
+    const transformationHovered = reduceMatrices([
+        scaled(appropriateScale),
+        rotateX(-Math.PI / 16),
+        rotateX(Math.sin(angle) / 4),
+        rotateY(-Math.cos(angle) / 4),
+    ]);
+    const transformation = interpolateMatrix4d(hoverTransform, transformationUnhovered, transformationHovered);
+    const depthFromClick = clickTransform * 15 * depthFactor;
+    const depthFromHover = interpolate(hoverTransform, [0, 1], [10, 20]) * depthFactor;
+    const depth = depthFromHover;
+    const frontFace = reduceMatrices([
+        translateZ(-depth / 2 + depthFromClick),
+        transformation,
+    ]);
+    const centerOriented = reduceMatrices([
+        translateX(-width / 2),
+        translateY(-height / 2),
+        transformation,
+        translateX(width / 2),
+        translateY(height / 2),
+    ]);
+    const { path, instructions } = makeRect({ height, width, cornerRadius });
+    const { viewBox } = PathInternals.getBoundingBoxFromInstructions(reduceInstructions(instructions));
+    const inbetween = extrudeAndTransformElement({
+        sideColor: 'black',
+        crispEdges: false,
+        depth,
+        pressInDepth: depthFromClick,
+        points: parsePath(path),
+        description: 'rect',
+        transformations: centerOriented,
+    });
+    return (_jsxs("div", { className: "relative", style: { width, height }, children: [_jsx("svg", { viewBox: viewBox, style: {
+                    overflow: 'visible',
+                    height,
+                    width,
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                }, pointerEvents: "none", children: _jsx(Faces, { elements: inbetween }) }), _jsx("div", { style: {
+                    transform: makeMatrix3dTransform(frontFace),
+                }, children: children })] }));
+};

package/dist/helpers/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/helpers/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/helpers/get-child-node-from.d.ts

@@ -0,0 +1 @@
+export declare const getChildNodeFrom: (htmlElement: HTMLDivElement | null) => HTMLElement | null;

package/dist/helpers/get-child-node-from.js

@@ -0,0 +1,14 @@
+export const getChildNodeFrom = (htmlElement) => {
+    if (!htmlElement) {
+        return null;
+    }
+    const { childNodes } = htmlElement;
+    if (childNodes.length === 0) {
+        return null;
+    }
+    const childNode = childNodes[0];
+    if (!childNode) {
+        return null;
+    }
+    return childNode;
+};

package/dist/helpers/hover-transforms.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type State = {
+    progress: number;
+    isActive: boolean;
+};
+export declare const useHoverTransforms: (ref: React.RefObject<HTMLDivElement | null>, disabled: boolean) => State;
+export declare const useClickTransforms: (ref: React.RefObject<HTMLDivElement | null>) => number;
+export declare const useMousePosition: (ref: React.RefObject<HTMLDivElement | null>) => number;
+export {};

package/dist/helpers/hover-transforms.js

@@ -0,0 +1,177 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { getChildNodeFrom } from './get-child-node-from';
+export const useHoverTransforms = (ref, disabled) => {
+    const [state, setState] = React.useState({
+        progress: 0,
+        isActive: false,
+    });
+    const eventTarget = useMemo(() => new EventTarget(), []);
+    useEffect(() => {
+        if (disabled) {
+            eventTarget.dispatchEvent(new Event('disabled'));
+        }
+        else {
+            eventTarget.dispatchEvent(new Event('enabled'));
+        }
+    }, [disabled, eventTarget]);
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        let animationFrame;
+        let start = null;
+        let isHovered = false;
+        let internalDisabled = disabled;
+        const getIsActive = () => {
+            return isHovered && !internalDisabled;
+        };
+        const animate = (timestamp) => {
+            if (start === null)
+                start = timestamp;
+            const progress = Math.min((timestamp - start) / 150, 1);
+            setState(() => ({
+                isActive: getIsActive(),
+                progress: getIsActive() ? progress : 1 - progress,
+            }));
+            if (progress < 1) {
+                animationFrame = requestAnimationFrame(animate);
+            }
+        };
+        const animateIn = () => {
+            start = null;
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(animate);
+        };
+        const handleMouseEnter = () => {
+            const prevIsActive = getIsActive();
+            isHovered = true;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        const handleMouseLeave = () => {
+            const prevIsActive = getIsActive();
+            isHovered = false;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        const handleDisabled = () => {
+            const prevIsActive = getIsActive();
+            internalDisabled = true;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        const handleEnabled = () => {
+            const prevIsActive = getIsActive();
+            internalDisabled = false;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        element.addEventListener('mouseenter', handleMouseEnter);
+        element.addEventListener('mouseleave', handleMouseLeave);
+        eventTarget.addEventListener('disabled', handleDisabled);
+        eventTarget.addEventListener('enabled', handleEnabled);
+        return () => {
+            element.removeEventListener('mouseenter', handleMouseEnter);
+            element.removeEventListener('mouseleave', handleMouseLeave);
+            eventTarget.removeEventListener('disabled', handleDisabled);
+            eventTarget.removeEventListener('enabled', handleEnabled);
+            cancelAnimationFrame(animationFrame);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ref, eventTarget]);
+    return state;
+};
+export const useClickTransforms = (ref) => {
+    const [hoverProgress, setHoverProgress] = React.useState(0);
+    React.useEffect(() => {
+        const element = getChildNodeFrom(ref.current);
+        if (!element) {
+            return;
+        }
+        let animationFrame;
+        let start = null;
+        let isHovered = false;
+        const animate = (timestamp) => {
+            if (start === null)
+                start = timestamp;
+            const progress = Math.min((timestamp - start) / 150, 1);
+            setHoverProgress(isHovered ? progress : 1 - progress);
+            if (progress < 1) {
+                animationFrame = requestAnimationFrame(animate);
+            }
+        };
+        const handleMouseEnter = () => {
+            isHovered = true;
+            start = null;
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(animate);
+        };
+        const handleMouseLeave = () => {
+            isHovered = false;
+            start = null;
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(animate);
+        };
+        element.addEventListener('pointerdown', handleMouseEnter);
+        element.addEventListener('pointerup', handleMouseLeave);
+        return () => {
+            element.removeEventListener('pointerdown', handleMouseEnter);
+            element.removeEventListener('pointerup', handleMouseLeave);
+            cancelAnimationFrame(animationFrame);
+        };
+    }, [ref]);
+    return hoverProgress;
+};
+const getAngle = (ref, coordinates) => {
+    const element = getChildNodeFrom(ref);
+    if (!element) {
+        return 0;
+    }
+    if (coordinates === null) {
+        return 0;
+    }
+    const clientRect = element.getClientRects();
+    if (!clientRect) {
+        return 0;
+    }
+    if (clientRect.length === 0) {
+        return 0;
+    }
+    const center = {
+        x: clientRect[0].x + clientRect[0].width / 2,
+        y: clientRect[0].y + clientRect[0].height / 2,
+    };
+    const angle = Math.atan2(coordinates.y - center.y, coordinates.x - center.x);
+    return angle;
+};
+let lastCoordinates = null;
+export const useMousePosition = (ref) => {
+    const [angle, setAngle] = useState(getAngle(ref.current, lastCoordinates));
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+        const onMouseMove = (e) => {
+            const clientRect = element.getClientRects();
+            if (!clientRect) {
+                return;
+            }
+            lastCoordinates = { y: e.clientY, x: e.clientX };
+            setAngle(getAngle(element, { y: e.clientY, x: e.clientX }));
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        return () => {
+            window.removeEventListener('mousemove', onMouseMove);
+        };
+    }, [ref]);
+    return angle;
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { Button } from './Button';
+export { Card } from './Card';
+export { CheckIcon } from './CheckIcon';
+export { Counter } from './Counter';
+export { PlanePaperIcon } from './PaperPlaneIcon';
+export { Switch } from './Switch';

package/dist/index.js

@@ -0,0 +1,6 @@
+export { Button } from './Button';
+export { Card } from './Card';
+export { CheckIcon } from './CheckIcon';
+export { Counter } from './Counter';
+export { PlanePaperIcon } from './PaperPlaneIcon';
+export { Switch } from './Switch';

package/index.css

@@ -0,0 +1 @@
+@source "./dist/esm/index.mjs";

package/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "@remotion/design",
+	"version": "4.0.371",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"module": "dist/esm/index.mjs",
+	"repository": {
+		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/design"
+	},
+	"sideEffects": false,
+	"author": "Jonny Burger <jonny@remotion.dev>",
+	"bugs": {
+		"url": "https://github.com/remotion-dev/remotion/issues"
+	},
+	"scripts": {
+		"formatting": "prettier --experimental-cli src --check",
+		"lint": "eslint src",
+		"watch": "tsc -w",
+		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
+	},
+	"dependencies": {
+		"@remotion/paths": "4.0.371",
+		"@remotion/shapes": "4.0.371",
+		"@remotion/svg-3d-engine": "4.0.371",
+		"clsx": "^2.1.1",
+		"remotion": "4.0.371"
+	},
+	"peerDependencies": {
+		"react": ">=16.8.0",
+		"react-dom": ">=16.8.0"
+	},
+	"devDependencies": {
+		"@remotion/eslint-config-internal": "4.0.371",
+		"eslint": "9.19.0",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
+		"tailwindcss": "4.1.10",
+		"tailwind-merge": "^2.6.0",
+		"bun-plugin-tailwind": "0.1.2"
+	},
+	"keywords": [],
+	"publishConfig": {
+		"access": "public"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"require": "./dist/index.js",
+			"module": "./dist/esm/index.mjs",
+			"import": "./dist/esm/index.mjs"
+		},
+		"./package.json": "./package.json",
+		"./register": "./index.css",
+		"./tailwind.css": "./dist/esm/index.css"
+	},
+	"description": "Design system",
+	"homepage": "https://www.remotion.dev/design"
+}