@remotion/design 4.0.451 → 4.0.452

package/dist/Button.d.ts

@@ -1,3 +1,4 @@
+import { Slot } from '@radix-ui/react-slot';
 import React from 'react';
 type CommonProps = {
     readonly depth?: number;
@@ -6,10 +7,17 @@ type CommonProps = {
 };
 type ButtonAsButton = CommonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'href' | 'disabled'> & {
     readonly href?: undefined;
+    readonly asChild?: false;
 };
 type ButtonAsAnchor = CommonProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> & {
     readonly href: string;
+    readonly asChild?: false;
 };
-export type ButtonProps = ButtonAsButton | ButtonAsAnchor;
+type ButtonAsChild = CommonProps & Omit<React.ComponentPropsWithoutRef<typeof Slot>, 'children' | 'disabled' | 'href'> & {
+    readonly asChild: true;
+    readonly href?: never;
+    readonly children: React.ReactElement;
+};
+export type ButtonProps = ButtonAsButton | ButtonAsAnchor | ButtonAsChild;
 export declare const Button: React.FC<ButtonProps>;
 export {};

package/dist/Button.js

@@ -1,10 +1,11 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import React, { useCallback, useRef, useState } from 'react';
 import { cn } from './helpers/cn';
 import { useHoverTransforms } from './helpers/hover-transforms';
 import { Outer } from './helpers/Outer';
 import { Spinner } from './Spinner';
-export const Button = ({ children, className, disabled, depth, loading, ...rest }) => {
+export const Button = ({ asChild = false, children, className, disabled, depth, loading, ...rest }) => {
     const [dimensions, setDimensions] = useState(null);
     const ref = useRef(null);
     const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
@@ -45,14 +46,20 @@ export const Button = ({ children, className, disabled, depth, loading, ...rest
         });
     }, []);
     const isDisabled = disabled || loading;
+    const isAnchor = !asChild && 'href' in rest && rest.href !== undefined;
     const sharedClasses = cn('text-text', 'inline-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-row', 'items-center', 'relative', 'overflow-hidden', isDisabled && 'cursor-default opacity-50', className);
-    const innerContent = (_jsxs(_Fragment, { children: [
-            _jsx("div", { className: cn(loading && 'invisible', 'inline-flex items-center'), 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] }));
-    const isAnchor = 'href' in rest && rest.href !== undefined;
-    const content = isAnchor ? (_jsx("a", { ...rest, className: cn('no-underline text-inherit', sharedClasses), "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
-            ? (e) => {
-                e.preventDefault();
-            }
-            : rest.onClick, children: innerContent })) : (_jsx("button", { type: "button", disabled: isDisabled, className: sharedClasses, ...rest, children: innerContent }));
+    const preventInteraction = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const spinnerOverlay = loading ? (_jsx("div", { "data-button-spinner": true, 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;
+    const slottableChild = asChild
+        ? React.cloneElement(children, undefined, _jsx("span", { className: cn(loading && 'invisible', 'inline-flex items-center'), children: children.props
+                .children }))
+        : null;
+    const content = asChild ? (_jsxs(Slot, { ...rest, className: cn('no-underline text-inherit', sharedClasses), "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : undefined, onClickCapture: isDisabled ? preventInteraction : undefined, children: [
+            _jsx(Slottable, { children: slottableChild }), spinnerOverlay] })) : isAnchor ? (_jsxs("a", { ...rest, className: cn('no-underline text-inherit', sharedClasses), "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : undefined, onClickCapture: isDisabled ? preventInteraction : undefined, children: [
+            _jsx("div", { className: cn(loading && 'invisible', 'inline-flex items-center'), children: children }), spinnerOverlay] })) : (_jsxs("button", { type: "button", disabled: isDisabled, className: sharedClasses, ...rest, children: [
+            _jsx("div", { className: cn(loading && 'invisible', 'inline-flex items-center'), children: children }), spinnerOverlay] }));
     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) }));
 };