@remotion/design 4.0.422 → 4.0.424

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 { Fragment as _Fragment, 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';
 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,15 @@ 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/Counter.js

@@ -33,7 +33,8 @@ export const Counter = ({ count, setCount, minCount, step, incrementStep, }) =>
         setCount(Math.min(MAX_COUNT, roundedValue));
     };
     const shrink = String(count).length > 6;
-    return (_jsxs(Card, { style: container, className: cn('w-[140px] flex flex-row overflow-hidden'), children: [_jsx("input", { className: cn('fontbrand 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', shrink ? 'text-lg' : 'text-2xl'), type: "number", value: count, onClick: (e) => e.currentTarget.select(), onChange: (e) => {
+    return (_jsxs(Card, { style: container, className: cn('w-[140px] flex flex-row overflow-hidden'), children: [
+            _jsx("input", { className: cn('fontbrand 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', shrink ? 'text-lg' : 'text-2xl'), type: "number", value: count, onClick: (e) => e.currentTarget.select(), onChange: (e) => {
                     if (e.target.value.trim() === '') {
                         setCount(step === 1 ? 1 : minCount);
                         return;
@@ -48,9 +49,12 @@ export const Counter = ({ count, setCount, minCount, step, incrementStep, }) =>
                     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: {
+                } }), _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 }) })] })] }));
+                        }, onClick: decrement, children: _jsx(Triangle, { rotated: true }) })
+                ] })
+        ] }));
 };

package/dist/Select.js

@@ -6,7 +6,8 @@ import { cn } from './helpers/cn';
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ] })));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -14,12 +15,16 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
 SelectScrollDownButton.displayName =
     SelectPrimitive.ScrollDownButton.displayName;
 const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn(' border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
-                    'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [
+            _jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
+                    'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'), children: children }), _jsx(SelectScrollDownButton, {})
+        ] }) })));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className), ...props })));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand', className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand', className), ...props, children: [
+        _jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })
+    ] })));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn('-mx-1 my-1 h-px bg-muted', className), ...props })));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

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/helpers/Faces.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } 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) => {

package/dist/helpers/Outer.js

@@ -45,7 +45,8 @@ export const Outer = ({ children, width, height, cornerRadius, hoverTransform, p
         description: 'rect',
         transformations: centerOriented,
     });
-    return (_jsxs("div", { className: "relative", style: { width, height }, children: [_jsx("svg", { viewBox: viewBox, style: {
+    return (_jsxs("div", { className: "relative", style: { width, height }, children: [
+            _jsx("svg", { viewBox: viewBox, style: {
                     overflow: 'visible',
                     height,
                     width,
@@ -56,5 +57,6 @@ export const Outer = ({ children, width, height, cornerRadius, hoverTransform, p
                     transform: makeMatrix3dTransform(frontFace),
                     width,
                     height,
-                }, children: children })] }));
+                }, children: children })
+        ] }));
 };

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.424",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -15,15 +15,15 @@
 	"scripts": {
 		"formatting": "prettier --experimental-cli src --check",
 		"lint": "eslint src",
-		"watch": "tsc -w",
-		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
+		"watch": "tsgo -w",
+		"make": "tsgo -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.424",
+		"@remotion/shapes": "4.0.424",
+		"@remotion/svg-3d-engine": "4.0.424",
 		"clsx": "^2.1.1",
-		"remotion": "4.0.422",
+		"remotion": "4.0.424",
 		"@radix-ui/react-select": "2.1.1",
 		"@radix-ui/react-tabs": "^1.1.0",
 		"lucide-react": "0.439.0"
@@ -33,14 +33,15 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.422",
+		"@remotion/eslint-config-internal": "4.0.424",
 		"eslint": "9.19.0",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"tailwindcss": "4.1.1",
 		"@tailwindcss/cli": "4.1.1",
 		"tailwind-merge": "^2.6.0",
-		"bun-plugin-tailwind": "0.1.2"
+		"bun-plugin-tailwind": "0.1.2",
+		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
 	"keywords": [],
 	"publishConfig": {