@remotion/design 4.0.373 → 4.0.375

package/dist/Button.d.ts

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

package/dist/Button.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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 }) => {
+import { Spinner } from './Spinner';
+export const Button = ({ children, className, disabled, depth, loading, ...buttonProps }) => {
     const [dimensions, setDimensions] = useState(null);
     const ref = useRef(null);
-    const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled));
+    const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
     const onPointerEnter = useCallback((e) => {
         if (e.pointerType !== 'mouse') {
             return;
@@ -43,6 +44,6 @@ export const Button = ({ children, className, disabled, depth, ...buttonProps })
             };
         });
     }, []);
-    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 }));
+    const content = (_jsxs("button", { type: "button", disabled: disabled || loading, 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:opacity-50', 'relative', 'overflow-hidden', className), ...buttonProps, children: [_jsx("div", { className: cn(loading && 'invisible', 'inline-flex'), children: children }), loading ? (_jsx("div", { className: cn('absolute w-full h-full flex inset-0 items-center justify-center text-inherit bg-inherit'), children: _jsx(Spinner, { size: 20, duration: 1 }) })) : null] }));
     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/Input.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/Input.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from './helpers/cn';
+export const Input = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("input", { ref: ref, className: cn('w-full dark:bg-[#121212] rounded-lg border-2 border-b-4 border-black outline-none h-14 px-3 fontbrand text-lg box-border', className), ...props }));
+});
+Input.displayName = 'Input';

package/dist/Spinner.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Spinner: React.FC<{
+    readonly size: number;
+    readonly duration: number;
+}>;

package/dist/Spinner.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+const viewBox = 100;
+const lines = 8;
+// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
+const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
+export const Spinner = ({ size, duration }) => {
+    const style = useMemo(() => {
+        return {
+            width: size,
+            height: size,
+        };
+    }, [size]);
+    const pathsRef = useRef([]);
+    useEffect(() => {
+        const animate = () => {
+            const now = performance.now();
+            for (let index = 0; index < lines; index++) {
+                const path = pathsRef.current[index];
+                if (!path)
+                    continue;
+                // Calculate current opacity using the same animation as before
+                const progress = ((now / 1000 - index * (duration / lines)) % duration) / duration;
+                // Animation: opacity 1 → 0.15
+                const opacity = 1 - 0.85 * progress;
+                path.style.opacity = opacity.toString();
+            }
+            requestAnimationFrame(animate);
+        };
+        const id = requestAnimationFrame(animate);
+        return () => {
+            cancelAnimationFrame(id);
+        };
+    }, [duration]);
+    return (_jsx("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
+            return (_jsx("path", { 
+                // @ts-expect-error
+                // eslint-disable-next-line no-return-assign
+                ref: (el) => (pathsRef.current[index] = el), style: {
+                    rotate: `${(index * Math.PI * 2) / lines}rad`,
+                    transformOrigin: 'center center',
+                    opacity: 1,
+                }, d: translated, fill: 'currentColor' }, index));
+        }) }));
+};