@remotion/design 4.0.384 → 4.0.386

package/dist/Counter.d.ts

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

package/dist/Counter.js

@@ -20,22 +20,26 @@ const buttonContainer = {
     alignItems: 'center',
     cursor: 'pointer',
 };
-export const Counter = ({ count, setCount, minCount = 0, step = 1, }) => {
+const MAX_COUNT = 9999999;
+export const Counter = ({ count, setCount, minCount, step, incrementStep, }) => {
     const decrement = () => {
         if (count > minCount) {
-            setCount(Math.max(minCount, count - step));
+            setCount(Math.max(minCount, count - incrementStep));
         }
     };
     const increment = () => {
-        setCount(count + step);
+        const nextValue = count + incrementStep;
+        const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+        setCount(Math.min(MAX_COUNT, roundedValue));
     };
-    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) => {
+    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) => {
                     if (e.target.value.trim() === '') {
                         setCount(step === 1 ? 1 : minCount);
                         return;
                     }
                     const inputValue = parseInt(e.target.value, 10);
-                    const validValue = Math.max(inputValue, minCount);
+                    const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
                     // For steps > 1, round to the nearest valid step
                     if (step > 1) {
                         const roundedValue = Math.round(validValue / step) * step;

package/dist/esm/index.mjs

@@ -498,36 +498,41 @@ var buttonContainer = {
   alignItems: "center",
   cursor: "pointer"
 };
+var MAX_COUNT = 9999999;
 var Counter = ({
   count,
   setCount,
-  minCount = 0,
-  step = 1
+  minCount,
+  step,
+  incrementStep
 }) => {
   const decrement = () => {
     if (count > minCount) {
-      setCount(Math.max(minCount, count - step));
+      setCount(Math.max(minCount, count - incrementStep));
     }
   };
   const increment = () => {
-    setCount(count + step);
+    const nextValue = count + incrementStep;
+    const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+    setCount(Math.min(MAX_COUNT, roundedValue));
   };
+  const shrink = String(count).length > 6;
   return /* @__PURE__ */ jsxs3(Card, {
     style: container,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
       /* @__PURE__ */ jsx7("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",
+        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",
-        onClick: (e) => e.currentTarget.select(),
         value: count,
+        onClick: (e) => e.currentTarget.select(),
         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);
+          const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
           if (step > 1) {
             const roundedValue = Math.round(validValue / step) * step;
             setCount(Math.max(roundedValue, minCount));

package/dist/tailwind.css

@@ -339,6 +339,9 @@
   .flex-1 {
     flex: 1;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .transform {
     transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/design",
-	"version": "4.0.384",
+	"version": "4.0.386",
 	"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.384",
-		"@remotion/shapes": "4.0.384",
-		"@remotion/svg-3d-engine": "4.0.384",
+		"@remotion/paths": "4.0.386",
+		"@remotion/shapes": "4.0.386",
+		"@remotion/svg-3d-engine": "4.0.386",
 		"clsx": "^2.1.1",
-		"remotion": "4.0.384",
+		"remotion": "4.0.386",
 		"@radix-ui/react-select": "2.1.1",
 		"lucide-react": "0.439.0"
 	},
@@ -32,7 +32,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.384",
+		"@remotion/eslint-config-internal": "4.0.386",
 		"eslint": "9.19.0",
 		"react": "19.2.1",
 		"react-dom": "19.2.1",