@remotion/design 4.0.422 → 4.0.423

package/dist/Button.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
-export declare const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+type CommonProps = {
     readonly depth?: number;
     readonly loading?: boolean;
-}>;
+    readonly disabled?: boolean;
+};
+type ButtonAsButton = CommonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'href' | 'disabled'> & {
+    readonly href?: undefined;
+};
+type ButtonAsAnchor = CommonProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> & {
+    readonly href: string;
+};
+export type ButtonProps = ButtonAsButton | ButtonAsAnchor;
+export declare const Button: React.FC<ButtonProps>;
+export {};

package/dist/Button.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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';
 import { Spinner } from './Spinner';
-export const Button = ({ children, className, disabled, depth, loading, ...buttonProps }) => {
+export const Button = ({ children, className, disabled, depth, loading, ...rest }) => {
     const [dimensions, setDimensions] = useState(null);
     const ref = useRef(null);
     const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
@@ -44,6 +44,14 @@ export const Button = ({ children, className, disabled, depth, loading, ...butto
             };
         });
     }, []);
-    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] }));
+    const isDisabled = disabled || loading;
+    const sharedClasses = 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', 'relative', 'overflow-hidden', isDisabled && 'cursor-default opacity-50', className);
+    const innerContent = (_jsxs(_Fragment, { 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] }));
+    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 }));
     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/esm/index.mjs

@@ -367,8 +367,15 @@ var Spinner = ({ size, duration }) => {
 };
 
 // src/Button.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var Button = ({ children, className, disabled, depth, loading, ...buttonProps }) => {
+import { jsx as jsx4, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+var Button = ({
+  children,
+  className,
+  disabled,
+  depth,
+  loading,
+  ...rest
+}) => {
   const [dimensions, setDimensions] = useState2(null);
   const ref = useRef2(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
@@ -406,11 +413,9 @@ var Button = ({ children, className, disabled, depth, loading, ...buttonProps })
       };
     });
   }, []);
-  const content = /* @__PURE__ */ jsxs2("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,
+  const isDisabled = disabled || loading;
+  const sharedClasses = 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", "relative", "overflow-hidden", isDisabled && "cursor-default opacity-50", className);
+  const innerContent = /* @__PURE__ */ jsxs2(Fragment2, {
     children: [
       /* @__PURE__ */ jsx4("div", {
         className: cn(loading && "invisible", "inline-flex"),
@@ -425,6 +430,23 @@ var Button = ({ children, className, disabled, depth, loading, ...buttonProps })
       }) : null
     ]
   });
+  const isAnchor = "href" in rest && rest.href !== undefined;
+  const content = isAnchor ? /* @__PURE__ */ jsx4("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
+  }) : /* @__PURE__ */ jsx4("button", {
+    type: "button",
+    disabled: isDisabled,
+    className: sharedClasses,
+    ...rest,
+    children: innerContent
+  });
   return /* @__PURE__ */ jsx4("div", {
     ref,
     className: "contents",
@@ -716,7 +738,7 @@ function useComposedRefs(...refs) {
 
 // ../../node_modules/.bun/@radix-ui+react-slot@1.1.0+09a4a3ac15cb54ba/node_modules/@radix-ui/react-slot/dist/index.mjs
 import * as React8 from "react";
-import { Fragment as Fragment2, jsx as jsx13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13 } from "react/jsx-runtime";
 var Slot = React8.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
   const childrenArray = React8.Children.toArray(children);
@@ -750,7 +772,7 @@ var SlotClone = React8.forwardRef((props, forwardedRef) => {
 });
 SlotClone.displayName = "SlotClone";
 var Slottable = ({ children }) => {
-  return /* @__PURE__ */ jsx13(Fragment2, { children });
+  return /* @__PURE__ */ jsx13(Fragment3, { children });
 };
 function isSlottable(child) {
   return React8.isValidElement(child) && child.type === Slottable;
@@ -4429,7 +4451,7 @@ ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
 
 // ../../node_modules/.bun/@radix-ui+react-select@2.1.1+f178f9b1194b24ba/node_modules/@radix-ui/react-select/dist/index.mjs
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs4 } from "react/jsx-runtime";
 "use client";
 var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
 var SELECTION_KEYS = [" ", "Enter"];
@@ -4609,7 +4631,7 @@ var SelectValue = React34.forwardRef((props, forwardedRef) => {
     ...valueProps,
     ref: composedRefs,
     style: { pointerEvents: "none" },
-    children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx23(Fragment5, { children: placeholder }) : children
+    children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx23(Fragment6, { children: placeholder }) : children
   });
 });
 SelectValue.displayName = VALUE_NAME;
@@ -5017,7 +5039,7 @@ var SelectViewport = React34.forwardRef((props, forwardedRef) => {
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
   const prevScrollTopRef = React34.useRef(0);
-  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment6, { children: [
     /* @__PURE__ */ jsx23("style", {
       dangerouslySetInnerHTML: {
         __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`
@@ -5174,7 +5196,7 @@ var SelectItemText = React34.forwardRef((props, forwardedRef) => {
     onNativeOptionAdd(nativeOption);
     return () => onNativeOptionRemove(nativeOption);
   }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
-  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment6, { children: [
     /* @__PURE__ */ jsx23(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
     itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM4.createPortal(itemTextProps.children, context.valueNode) : null
   ] });

package/dist/tailwind.css

@@ -532,6 +532,9 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .no-underline {
+    text-decoration-line: none;
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -624,11 +627,6 @@
       pointer-events: none;
     }
   }
-  .disabled\:cursor-default {
-    &:disabled {
-      cursor: default;
-    }
-  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/design",
-	"version": "4.0.422",
+	"version": "4.0.423",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -19,11 +19,11 @@
 		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
 	},
 	"dependencies": {
-		"@remotion/paths": "4.0.422",
-		"@remotion/shapes": "4.0.422",
-		"@remotion/svg-3d-engine": "4.0.422",
+		"@remotion/paths": "4.0.423",
+		"@remotion/shapes": "4.0.423",
+		"@remotion/svg-3d-engine": "4.0.423",
 		"clsx": "^2.1.1",
-		"remotion": "4.0.422",
+		"remotion": "4.0.423",
 		"@radix-ui/react-select": "2.1.1",
 		"@radix-ui/react-tabs": "^1.1.0",
 		"lucide-react": "0.439.0"
@@ -33,7 +33,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.422",
+		"@remotion/eslint-config-internal": "4.0.423",
 		"eslint": "9.19.0",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",