@remotion/design 4.0.507 → 4.0.509

package/dist/Slider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type SliderProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'onChange' | 'type' | 'value'> & {
+    readonly value: number;
+    readonly onChange: (value: number) => void;
+    readonly unfilledColor?: string;
+};
+export declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "type" | "value"> & {
+    readonly value: number;
+    readonly onChange: (value: number) => void;
+    readonly unfilledColor?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/Slider.js

@@ -0,0 +1,54 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from './helpers/cn';
+export const Slider = React.forwardRef(({ className, max = 100, min = 0, onChange, style, unfilledColor = 'var(--color-card-bg, white)', value, ...props }, ref) => {
+    const numericMin = Number(min);
+    const numericMax = Number(max);
+    const percentage = numericMax === numericMin
+        ? 0
+        : ((value - numericMin) / (numericMax - numericMin)) * 100;
+    return (_jsxs(_Fragment, { children: [
+            _jsx("style", { children: `
+						.remotion-design-slider {
+							-webkit-appearance: none;
+							appearance: none;
+							height: 12px;
+							border-radius: 8px;
+							border: 2px solid black;
+							cursor: pointer;
+						}
+						.remotion-design-slider::-webkit-slider-thumb {
+							-webkit-appearance: none;
+							appearance: none;
+							width: 24px;
+							height: 24px;
+							border-radius: 50%;
+							background: white;
+							border: 2px solid black;
+							border-bottom-width: 4px;
+							cursor: pointer;
+							scale: 1.2;
+						}
+						.remotion-design-slider::-moz-range-thumb {
+							width: 24px;
+							height: 24px;
+							border-radius: 50%;
+							background: white;
+							border: 2px solid black;
+							border-bottom-width: 4px;
+							scale: 1.2;
+							cursor: pointer;
+						}
+						.remotion-design-slider:disabled,
+						.remotion-design-slider:disabled::-webkit-slider-thumb,
+						.remotion-design-slider:disabled::-moz-range-thumb {
+							cursor: default;
+							opacity: 0.5;
+						}
+					` }), _jsx("input", { ref: ref, type: "range", min: min, max: max, value: value, onChange: (event) => onChange(Number(event.target.value)), className: cn('remotion-design-slider w-full', className), style: {
+                    background: `linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) ${percentage}%, ${unfilledColor} ${percentage}%, ${unfilledColor} 100%)`,
+                    ...style,
+                }, ...props })
+        ] }));
+});
+Slider.displayName = 'Slider';

package/dist/esm/index.mjs

@@ -5726,10 +5726,86 @@ var SelectSeparator2 = React37.forwardRef(({ className, ...props }, ref) => /* @
   ...props
 }));
 SelectSeparator2.displayName = Separator.displayName;
+// src/Slider.tsx
+import React38 from "react";
+import { jsx as jsx26, jsxs as jsxs6, Fragment as Fragment9 } from "react/jsx-runtime";
+var Slider = React38.forwardRef(({
+  className,
+  max: max2 = 100,
+  min: min2 = 0,
+  onChange,
+  style,
+  unfilledColor = "var(--color-card-bg, white)",
+  value,
+  ...props
+}, ref) => {
+  const numericMin = Number(min2);
+  const numericMax = Number(max2);
+  const percentage = numericMax === numericMin ? 0 : (value - numericMin) / (numericMax - numericMin) * 100;
+  return /* @__PURE__ */ jsxs6(Fragment9, {
+    children: [
+      /* @__PURE__ */ jsx26("style", {
+        children: `
+						.remotion-design-slider {
+							-webkit-appearance: none;
+							appearance: none;
+							height: 12px;
+							border-radius: 8px;
+							border: 2px solid black;
+							cursor: pointer;
+						}
+						.remotion-design-slider::-webkit-slider-thumb {
+							-webkit-appearance: none;
+							appearance: none;
+							width: 24px;
+							height: 24px;
+							border-radius: 50%;
+							background: white;
+							border: 2px solid black;
+							border-bottom-width: 4px;
+							cursor: pointer;
+							scale: 1.2;
+						}
+						.remotion-design-slider::-moz-range-thumb {
+							width: 24px;
+							height: 24px;
+							border-radius: 50%;
+							background: white;
+							border: 2px solid black;
+							border-bottom-width: 4px;
+							scale: 1.2;
+							cursor: pointer;
+						}
+						.remotion-design-slider:disabled,
+						.remotion-design-slider:disabled::-webkit-slider-thumb,
+						.remotion-design-slider:disabled::-moz-range-thumb {
+							cursor: default;
+							opacity: 0.5;
+						}
+					`
+      }),
+      /* @__PURE__ */ jsx26("input", {
+        ref,
+        type: "range",
+        min: min2,
+        max: max2,
+        value,
+        onChange: (event) => onChange(Number(event.target.value)),
+        className: cn("remotion-design-slider w-full", className),
+        style: {
+          background: `linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) ${percentage}%, ${unfilledColor} ${percentage}%, ${unfilledColor} 100%)`,
+          ...style
+        },
+        ...props
+      })
+    ]
+  });
+});
+Slider.displayName = "Slider";
 // src/Switch.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var Switch = ({ active, onToggle, "aria-label": ariaLabel }) => {
-  return /* @__PURE__ */ jsx26("button", {
+  return /* @__PURE__ */ jsx27("button", {
     type: "button",
     role: "switch",
     "aria-checked": active,
@@ -5737,14 +5813,14 @@ var Switch = ({ active, onToggle, "aria-label": ariaLabel }) => {
     "data-active": active,
     className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
     onClick: onToggle,
-    children: /* @__PURE__ */ jsx26("div", {
+    children: /* @__PURE__ */ jsx27("div", {
       "data-active": active,
       className: "h-[20px] w-[20px] left-[4px] top-[4px] transition-all rounded-full bg-white border-2 border-black absolute data-[active=true]:left-[calc(100%-24px)]"
     })
   });
 };
 // ../../node_modules/.bun/@radix-ui+react-tabs@1.1.13+f178f9b1194b24ba/node_modules/@radix-ui/react-tabs/dist/index.mjs
-import * as React49 from "react";
+import * as React50 from "react";
 
 // ../../node_modules/.bun/@radix-ui+primitive@1.1.3/node_modules/@radix-ui/primitive/dist/index.mjs
 var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
@@ -5758,24 +5834,24 @@ function composeEventHandlers2(originalEventHandler, ourEventHandler, { checkFor
 }
 
 // ../../node_modules/.bun/@radix-ui+react-context@1.1.2+09a4a3ac15cb54ba/node_modules/@radix-ui/react-context/dist/index.mjs
-import * as React38 from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import * as React39 from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React38.createContext(defaultContext);
+    const BaseContext = React39.createContext(defaultContext);
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const value = React38.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx27(Context.Provider, { value, children });
+      const value = React39.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ jsx28(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const context = React38.useContext(Context);
+      const context = React39.useContext(Context);
       if (context)
         return context;
       if (defaultContext !== undefined)
@@ -5786,11 +5862,11 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React38.createContext(defaultContext);
+      return React39.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React38.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+      return React39.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
     };
   };
   createScope.scopeName = scopeName;
@@ -5811,7 +5887,7 @@ function composeContextScopes2(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React38.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React39.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -5819,57 +5895,57 @@ function composeContextScopes2(...scopes) {
 }
 
 // ../../node_modules/.bun/@radix-ui+react-roving-focus@1.1.11+f178f9b1194b24ba/node_modules/@radix-ui/react-roving-focus/dist/index.mjs
-import * as React47 from "react";
+import * as React48 from "react";
 
 // ../../node_modules/.bun/@radix-ui+react-collection@1.1.7+f178f9b1194b24ba/node_modules/@radix-ui/react-collection/dist/index.mjs
-import React40 from "react";
+import React41 from "react";
 
 // ../../node_modules/.bun/@radix-ui+react-slot@1.2.3+09a4a3ac15cb54ba/node_modules/@radix-ui/react-slot/dist/index.mjs
-import * as React39 from "react";
-import { Fragment as Fragment22, jsx as jsx28 } from "react/jsx-runtime";
+import * as React40 from "react";
+import { Fragment as Fragment22, jsx as jsx29 } from "react/jsx-runtime";
 function createSlot2(ownerName) {
   const SlotClone2 = /* @__PURE__ */ createSlotClone2(ownerName);
-  const Slot22 = React39.forwardRef((props, forwardedRef) => {
+  const Slot22 = React40.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    const childrenArray = React39.Children.toArray(children);
+    const childrenArray = React40.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable3);
     if (slottable) {
       const newElement = slottable.props.children;
       const newChildren = childrenArray.map((child) => {
         if (child === slottable) {
-          if (React39.Children.count(newElement) > 1)
-            return React39.Children.only(null);
-          return React39.isValidElement(newElement) ? newElement.props.children : null;
+          if (React40.Children.count(newElement) > 1)
+            return React40.Children.only(null);
+          return React40.isValidElement(newElement) ? newElement.props.children : null;
         } else {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx28(SlotClone2, { ...slotProps, ref: forwardedRef, children: React39.isValidElement(newElement) ? React39.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx29(SlotClone2, { ...slotProps, ref: forwardedRef, children: React40.isValidElement(newElement) ? React40.cloneElement(newElement, undefined, newChildren) : null });
     }
-    return /* @__PURE__ */ jsx28(SlotClone2, { ...slotProps, ref: forwardedRef, children });
+    return /* @__PURE__ */ jsx29(SlotClone2, { ...slotProps, ref: forwardedRef, children });
   });
   Slot22.displayName = `${ownerName}.Slot`;
   return Slot22;
 }
 function createSlotClone2(ownerName) {
-  const SlotClone2 = React39.forwardRef((props, forwardedRef) => {
+  const SlotClone2 = React40.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    if (React39.isValidElement(children)) {
+    if (React40.isValidElement(children)) {
       const childrenRef = getElementRef3(children);
       const props2 = mergeProps3(slotProps, children.props);
-      if (children.type !== React39.Fragment) {
+      if (children.type !== React40.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
       }
-      return React39.cloneElement(children, props2);
+      return React40.cloneElement(children, props2);
     }
-    return React39.Children.count(children) > 1 ? React39.Children.only(null) : null;
+    return React40.Children.count(children) > 1 ? React40.Children.only(null) : null;
   });
   SlotClone2.displayName = `${ownerName}.SlotClone`;
   return SlotClone2;
 }
 var SLOTTABLE_IDENTIFIER2 = Symbol("radix.slottable");
 function isSlottable3(child) {
-  return React39.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
+  return React40.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
 }
 function mergeProps3(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -5910,7 +5986,7 @@ function getElementRef3(element) {
 }
 
 // ../../node_modules/.bun/@radix-ui+react-collection@1.1.7+f178f9b1194b24ba/node_modules/@radix-ui/react-collection/dist/index.mjs
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 import React210 from "react";
 import { jsx as jsx210 } from "react/jsx-runtime";
 function createCollection2(name) {
@@ -5919,38 +5995,38 @@ function createCollection2(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React40.useRef(null);
-    const itemMap = React40.useRef(/* @__PURE__ */ new Map).current;
-    return /* @__PURE__ */ jsx29(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    const ref = React41.useRef(null);
+    const itemMap = React41.useRef(/* @__PURE__ */ new Map).current;
+    return /* @__PURE__ */ jsx30(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot2(COLLECTION_SLOT_NAME);
-  const CollectionSlot = React40.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React41.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-    return /* @__PURE__ */ jsx29(CollectionSlotImpl, { ref: composedRefs, children });
+    return /* @__PURE__ */ jsx30(CollectionSlotImpl, { ref: composedRefs, children });
   });
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = createSlot2(ITEM_SLOT_NAME);
-  const CollectionItemSlot = React40.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React41.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React40.useRef(null);
+    const ref = React41.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React40.useEffect(() => {
+    React41.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
-    return /* @__PURE__ */ jsx29(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+    return /* @__PURE__ */ jsx30(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
   });
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React40.useCallback(() => {
+    const getItems = React41.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -6270,19 +6346,19 @@ function toSafeInteger(number) {
 }
 
 // ../../node_modules/.bun/@radix-ui+react-id@1.1.1+09a4a3ac15cb54ba/node_modules/@radix-ui/react-id/dist/index.mjs
-import * as React42 from "react";
+import * as React43 from "react";
 
 // ../../node_modules/.bun/@radix-ui+react-use-layout-effect@1.1.1+09a4a3ac15cb54ba/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
-import * as React41 from "react";
-var useLayoutEffect22 = globalThis?.document ? React41.useLayoutEffect : () => {};
+import * as React42 from "react";
+var useLayoutEffect22 = globalThis?.document ? React42.useLayoutEffect : () => {};
 
 // ../../node_modules/.bun/@radix-ui+react-id@1.1.1+09a4a3ac15cb54ba/node_modules/@radix-ui/react-id/dist/index.mjs
-var useReactId2 = React42[" useId ".trim().toString()] || (() => {
+var useReactId2 = React43[" useId ".trim().toString()] || (() => {
   return;
 });
 var count3 = 0;
 function useId2(deterministicId) {
-  const [id, setId] = React42.useState(useReactId2());
+  const [id, setId] = React43.useState(useReactId2());
   useLayoutEffect22(() => {
     if (!deterministicId)
       setId((reactId) => reactId ?? String(count3++));
@@ -6291,9 +6367,9 @@ function useId2(deterministicId) {
 }
 
 // ../../node_modules/.bun/@radix-ui+react-primitive@2.1.3+f178f9b1194b24ba/node_modules/@radix-ui/react-primitive/dist/index.mjs
-import * as React43 from "react";
+import * as React44 from "react";
 import * as ReactDOM5 from "react-dom";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var NODES2 = [
   "a",
   "button",
@@ -6315,32 +6391,32 @@ var NODES2 = [
 ];
 var Primitive2 = NODES2.reduce((primitive, node) => {
   const Slot3 = createSlot2(`Primitive.${node}`);
-  const Node2 = React43.forwardRef((props, forwardedRef) => {
+  const Node2 = React44.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot3 : node;
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ jsx30(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
 }, {});
 
 // ../../node_modules/.bun/@radix-ui+react-use-callback-ref@1.1.1+09a4a3ac15cb54ba/node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
-import * as React44 from "react";
+import * as React45 from "react";
 function useCallbackRef3(callback) {
-  const callbackRef = React44.useRef(callback);
-  React44.useEffect(() => {
+  const callbackRef = React45.useRef(callback);
+  React45.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React44.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React45.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 
 // ../../node_modules/.bun/@radix-ui+react-use-controllable-state@1.2.2+09a4a3ac15cb54ba/node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-import * as React45 from "react";
+import * as React46 from "react";
 import * as React212 from "react";
-var useInsertionEffect = React45[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
+var useInsertionEffect = React46[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
 function useControllableState2({
   prop,
   defaultProp,
@@ -6354,8 +6430,8 @@ function useControllableState2({
   const isControlled = prop !== undefined;
   const value = isControlled ? prop : uncontrolledProp;
   if (true) {
-    const isControlledRef = React45.useRef(prop !== undefined);
-    React45.useEffect(() => {
+    const isControlledRef = React46.useRef(prop !== undefined);
+    React46.useEffect(() => {
       const wasControlled = isControlledRef.current;
       if (wasControlled !== isControlled) {
         const from = wasControlled ? "controlled" : "uncontrolled";
@@ -6365,7 +6441,7 @@ function useControllableState2({
       isControlledRef.current = isControlled;
     }, [isControlled, caller]);
   }
-  const setValue = React45.useCallback((nextValue) => {
+  const setValue = React46.useCallback((nextValue) => {
     if (isControlled) {
       const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
       if (value2 !== prop) {
@@ -6381,13 +6457,13 @@ function useUncontrolledState2({
   defaultProp,
   onChange
 }) {
-  const [value, setValue] = React45.useState(defaultProp);
-  const prevValueRef = React45.useRef(value);
-  const onChangeRef = React45.useRef(onChange);
+  const [value, setValue] = React46.useState(defaultProp);
+  const prevValueRef = React46.useRef(value);
+  const onChangeRef = React46.useRef(onChange);
   useInsertionEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  React45.useEffect(() => {
+  React46.useEffect(() => {
     if (prevValueRef.current !== value) {
       onChangeRef.current?.(value);
       prevValueRef.current = value;
@@ -6401,27 +6477,27 @@ function isFunction(value) {
 var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
 
 // ../../node_modules/.bun/@radix-ui+react-direction@1.1.1+09a4a3ac15cb54ba/node_modules/@radix-ui/react-direction/dist/index.mjs
-import * as React46 from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var DirectionContext2 = React46.createContext(undefined);
+import * as React47 from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var DirectionContext2 = React47.createContext(undefined);
 function useDirection2(localDir) {
-  const globalDir = React46.useContext(DirectionContext2);
+  const globalDir = React47.useContext(DirectionContext2);
   return localDir || globalDir || "ltr";
 }
 
 // ../../node_modules/.bun/@radix-ui+react-roving-focus@1.1.11+f178f9b1194b24ba/node_modules/@radix-ui/react-roving-focus/dist/index.mjs
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
 var EVENT_OPTIONS2 = { bubbles: false, cancelable: true };
 var GROUP_NAME2 = "RovingFocusGroup";
 var [Collection2, useCollection2, createCollectionScope2] = createCollection2(GROUP_NAME2);
 var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope2(GROUP_NAME2, [createCollectionScope2]);
 var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME2);
-var RovingFocusGroup = React47.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx32(Collection2.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx32(Collection2.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx32(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
+var RovingFocusGroup = React48.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx33(Collection2.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx33(Collection2.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx33(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
 });
 RovingFocusGroup.displayName = GROUP_NAME2;
-var RovingFocusGroupImpl = React47.forwardRef((props, forwardedRef) => {
+var RovingFocusGroupImpl = React48.forwardRef((props, forwardedRef) => {
   const {
     __scopeRovingFocusGroup,
     orientation,
@@ -6434,7 +6510,7 @@ var RovingFocusGroupImpl = React47.forwardRef((props, forwardedRef) => {
     preventScrollOnEntryFocus = false,
     ...groupProps
   } = props;
-  const ref = React47.useRef(null);
+  const ref = React48.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
   const direction = useDirection2(dir);
   const [currentTabStopId, setCurrentTabStopId] = useControllableState2({
@@ -6443,29 +6519,29 @@ var RovingFocusGroupImpl = React47.forwardRef((props, forwardedRef) => {
     onChange: onCurrentTabStopIdChange,
     caller: GROUP_NAME2
   });
-  const [isTabbingBackOut, setIsTabbingBackOut] = React47.useState(false);
+  const [isTabbingBackOut, setIsTabbingBackOut] = React48.useState(false);
   const handleEntryFocus = useCallbackRef3(onEntryFocus);
   const getItems = useCollection2(__scopeRovingFocusGroup);
-  const isClickFocusRef = React47.useRef(false);
-  const [focusableItemsCount, setFocusableItemsCount] = React47.useState(0);
-  React47.useEffect(() => {
+  const isClickFocusRef = React48.useRef(false);
+  const [focusableItemsCount, setFocusableItemsCount] = React48.useState(0);
+  React48.useEffect(() => {
     const node = ref.current;
     if (node) {
       node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
       return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
     }
   }, [handleEntryFocus]);
-  return /* @__PURE__ */ jsx32(RovingFocusProvider, {
+  return /* @__PURE__ */ jsx33(RovingFocusProvider, {
     scope: __scopeRovingFocusGroup,
     orientation,
     dir: direction,
     loop,
     currentTabStopId,
-    onItemFocus: React47.useCallback((tabStopId) => setCurrentTabStopId(tabStopId), [setCurrentTabStopId]),
-    onItemShiftTab: React47.useCallback(() => setIsTabbingBackOut(true), []),
-    onFocusableItemAdd: React47.useCallback(() => setFocusableItemsCount((prevCount) => prevCount + 1), []),
-    onFocusableItemRemove: React47.useCallback(() => setFocusableItemsCount((prevCount) => prevCount - 1), []),
-    children: /* @__PURE__ */ jsx32(Primitive2.div, {
+    onItemFocus: React48.useCallback((tabStopId) => setCurrentTabStopId(tabStopId), [setCurrentTabStopId]),
+    onItemShiftTab: React48.useCallback(() => setIsTabbingBackOut(true), []),
+    onFocusableItemAdd: React48.useCallback(() => setFocusableItemsCount((prevCount) => prevCount + 1), []),
+    onFocusableItemRemove: React48.useCallback(() => setFocusableItemsCount((prevCount) => prevCount - 1), []),
+    children: /* @__PURE__ */ jsx33(Primitive2.div, {
       tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
       "data-orientation": orientation,
       ...groupProps,
@@ -6495,7 +6571,7 @@ var RovingFocusGroupImpl = React47.forwardRef((props, forwardedRef) => {
   });
 });
 var ITEM_NAME2 = "RovingFocusGroupItem";
-var RovingFocusGroupItem = React47.forwardRef((props, forwardedRef) => {
+var RovingFocusGroupItem = React48.forwardRef((props, forwardedRef) => {
   const {
     __scopeRovingFocusGroup,
     focusable = true,
@@ -6510,18 +6586,18 @@ var RovingFocusGroupItem = React47.forwardRef((props, forwardedRef) => {
   const isCurrentTabStop = context.currentTabStopId === id;
   const getItems = useCollection2(__scopeRovingFocusGroup);
   const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
-  React47.useEffect(() => {
+  React48.useEffect(() => {
     if (focusable) {
       onFocusableItemAdd();
       return () => onFocusableItemRemove();
     }
   }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
-  return /* @__PURE__ */ jsx32(Collection2.ItemSlot, {
+  return /* @__PURE__ */ jsx33(Collection2.ItemSlot, {
     scope: __scopeRovingFocusGroup,
     id,
     focusable,
     active,
-    children: /* @__PURE__ */ jsx32(Primitive2.span, {
+    children: /* @__PURE__ */ jsx33(Primitive2.span, {
       tabIndex: isCurrentTabStop ? 0 : -1,
       "data-orientation": context.orientation,
       ...itemProps,
@@ -6604,9 +6680,9 @@ var Item2 = RovingFocusGroupItem;
 
 // ../../node_modules/.bun/@radix-ui+react-presence@1.1.5+f178f9b1194b24ba/node_modules/@radix-ui/react-presence/dist/index.mjs
 import * as React213 from "react";
-import * as React48 from "react";
+import * as React49 from "react";
 function useStateMachine(initialState, machine) {
-  return React48.useReducer((state, event) => {
+  return React49.useReducer((state, event) => {
     const nextState = machine[state][event];
     return nextState ?? state;
   }, initialState);
@@ -6729,14 +6805,14 @@ function getElementRef4(element) {
 }
 
 // ../../node_modules/.bun/@radix-ui+react-tabs@1.1.13+f178f9b1194b24ba/node_modules/@radix-ui/react-tabs/dist/index.mjs
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var TABS_NAME = "Tabs";
 var [createTabsContext, createTabsScope] = createContextScope2(TABS_NAME, [
   createRovingFocusGroupScope
 ]);
 var useRovingFocusGroupScope = createRovingFocusGroupScope();
 var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
-var Tabs = React49.forwardRef((props, forwardedRef) => {
+var Tabs = React50.forwardRef((props, forwardedRef) => {
   const {
     __scopeTabs,
     value: valueProp,
@@ -6754,7 +6830,7 @@ var Tabs = React49.forwardRef((props, forwardedRef) => {
     defaultProp: defaultValue ?? "",
     caller: TABS_NAME
   });
-  return /* @__PURE__ */ jsx33(TabsProvider, {
+  return /* @__PURE__ */ jsx34(TabsProvider, {
     scope: __scopeTabs,
     baseId: useId2(),
     value,
@@ -6762,7 +6838,7 @@ var Tabs = React49.forwardRef((props, forwardedRef) => {
     orientation,
     dir: direction,
     activationMode,
-    children: /* @__PURE__ */ jsx33(Primitive2.div, {
+    children: /* @__PURE__ */ jsx34(Primitive2.div, {
       dir: direction,
       "data-orientation": orientation,
       ...tabsProps,
@@ -6772,17 +6848,17 @@ var Tabs = React49.forwardRef((props, forwardedRef) => {
 });
 Tabs.displayName = TABS_NAME;
 var TAB_LIST_NAME = "TabsList";
-var TabsList = React49.forwardRef((props, forwardedRef) => {
+var TabsList = React50.forwardRef((props, forwardedRef) => {
   const { __scopeTabs, loop = true, ...listProps } = props;
   const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
   const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
-  return /* @__PURE__ */ jsx33(Root3, {
+  return /* @__PURE__ */ jsx34(Root3, {
     asChild: true,
     ...rovingFocusGroupScope,
     orientation: context.orientation,
     dir: context.dir,
     loop,
-    children: /* @__PURE__ */ jsx33(Primitive2.div, {
+    children: /* @__PURE__ */ jsx34(Primitive2.div, {
       role: "tablist",
       "aria-orientation": context.orientation,
       ...listProps,
@@ -6792,19 +6868,19 @@ var TabsList = React49.forwardRef((props, forwardedRef) => {
 });
 TabsList.displayName = TAB_LIST_NAME;
 var TRIGGER_NAME2 = "TabsTrigger";
-var TabsTrigger = React49.forwardRef((props, forwardedRef) => {
+var TabsTrigger = React50.forwardRef((props, forwardedRef) => {
   const { __scopeTabs, value, disabled = false, ...triggerProps } = props;
   const context = useTabsContext(TRIGGER_NAME2, __scopeTabs);
   const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
   const triggerId = makeTriggerId(context.baseId, value);
   const contentId = makeContentId(context.baseId, value);
   const isSelected = value === context.value;
-  return /* @__PURE__ */ jsx33(Item2, {
+  return /* @__PURE__ */ jsx34(Item2, {
     asChild: true,
     ...rovingFocusGroupScope,
     focusable: !disabled,
     active: isSelected,
-    children: /* @__PURE__ */ jsx33(Primitive2.button, {
+    children: /* @__PURE__ */ jsx34(Primitive2.button, {
       type: "button",
       role: "tab",
       "aria-selected": isSelected,
@@ -6837,18 +6913,18 @@ var TabsTrigger = React49.forwardRef((props, forwardedRef) => {
 });
 TabsTrigger.displayName = TRIGGER_NAME2;
 var CONTENT_NAME3 = "TabsContent";
-var TabsContent = React49.forwardRef((props, forwardedRef) => {
+var TabsContent = React50.forwardRef((props, forwardedRef) => {
   const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
   const context = useTabsContext(CONTENT_NAME3, __scopeTabs);
   const triggerId = makeTriggerId(context.baseId, value);
   const contentId = makeContentId(context.baseId, value);
   const isSelected = value === context.value;
-  const isMountAnimationPreventedRef = React49.useRef(isSelected);
-  React49.useEffect(() => {
+  const isMountAnimationPreventedRef = React50.useRef(isSelected);
+  React50.useEffect(() => {
     const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
     return () => cancelAnimationFrame(rAF);
   }, []);
-  return /* @__PURE__ */ jsx33(Presence, { present: forceMount || isSelected, children: ({ present }) => /* @__PURE__ */ jsx33(Primitive2.div, {
+  return /* @__PURE__ */ jsx34(Presence, { present: forceMount || isSelected, children: ({ present }) => /* @__PURE__ */ jsx34(Primitive2.div, {
     "data-state": isSelected ? "active" : "inactive",
     "data-orientation": context.orientation,
     role: "tabpanel",
@@ -6878,32 +6954,32 @@ var Trigger2 = TabsTrigger;
 var Content3 = TabsContent;
 
 // src/Tabs.tsx
-import * as React50 from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import * as React51 from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Tabs2 = Root23;
-var TabsList2 = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(List, {
+var TabsList2 = React51.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(List, {
   ref,
   className: cn("inline-flex items-center justify-center bg-white p-1 border-2 border-black border-b-4 rounded-full", className),
   ...props
 }));
 TabsList2.displayName = List.displayName;
-var TabsTrigger2 = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(Trigger2, {
+var TabsTrigger2 = React51.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(Trigger2, {
   ref,
   className: cn("inline-flex items-center border-none font-brand bg-transparent justify-center whitespace-nowrap rounded-full px-3 py-1.5 text-sm ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-brand data-[state=active]:text-white data-[state=inactive]:hover:bg-gray-100", className),
   ...props
 }));
 TabsTrigger2.displayName = Trigger2.displayName;
-var TabsContent2 = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(Content3, {
+var TabsContent2 = React51.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(Content3, {
   ref,
   className: cn("mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className),
   ...props
 }));
 TabsContent2.displayName = Content3.displayName;
 // src/Textarea.tsx
-import React51 from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var Textarea = React51.forwardRef(({ className, style, ...props }, ref) => {
-  return /* @__PURE__ */ jsx35("textarea", {
+import React52 from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var Textarea = React52.forwardRef(({ className, style, ...props }, ref) => {
+  return /* @__PURE__ */ jsx36("textarea", {
     ref,
     className: cn("w-full bg-white dark:bg-[#121212] rounded-lg border-2 border-b-4 border-black outline-none px-3 py-3 fontbrand text-lg box-border field-sizing-content min-h-[90px]", className),
     style: {
@@ -6914,13 +6990,13 @@ var Textarea = React51.forwardRef(({ className, style, ...props }, ref) => {
 });
 Textarea.displayName = "Textarea";
 // src/Triangle.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var Triangle2 = (props) => {
-  return /* @__PURE__ */ jsx36("svg", {
+  return /* @__PURE__ */ jsx37("svg", {
     viewBox: "0 0 127 131",
     fill: "none",
     ...props,
-    children: /* @__PURE__ */ jsx36("path", {
+    children: /* @__PURE__ */ jsx37("path", {
       d: "M28.5644 0.011261C25.8196 0.159241 23.6077 0.591782 21.3786 1.43413C20.2669 1.84959 18.4446 2.75455 17.4418 3.38062C13.2472 5.993 10.0496 9.9201 8.38209 14.4903C8.04973 15.3953 7.15007 18.2809 6.5713 20.2672C2.71476 33.5453 0.525761 48.0643 0.0558711 63.4312C-0.0186237 65.8785 -0.0186237 71.7066 0.0558711 74.1141C0.371041 84.3018 1.35093 93.4992 3.12735 102.879C3.84937 106.675 5.00691 111.774 5.67736 114.091C7.04692 118.798 9.84334 122.805 13.8202 125.741C16.4848 127.711 19.5105 129.031 22.8627 129.68C24.4787 129.993 26.6104 130.135 28.1805 130.033C30.3523 129.89 34.6616 129.316 38.1628 128.695C53.9442 125.901 68.5223 120.898 81.7422 113.738C90.1143 109.202 97.2715 104.29 104.177 98.3312C111.059 92.4007 116.927 86.0206 122.09 78.8608C123.287 77.2045 123.889 76.237 124.491 75.019C126.038 71.8773 126.766 68.7527 126.76 65.2582C126.76 62.0027 126.141 59.1114 124.806 56.1518C124.164 54.7233 123.551 53.6988 122.176 51.7523C117.11 44.5868 111.489 38.3433 104.635 32.2762C94.011 22.8739 81.3927 15.1619 67.3017 9.45339C64.2474 8.21835 61.239 7.13128 57.6174 5.95315C49.9502 3.46598 40.4607 1.30891 32.4324 0.233231C31.1718 0.0624847 29.4584 -0.0342712 28.5644 0.011261Z",
       fill: "currentcolor"
     })
@@ -6934,6 +7010,7 @@ export {
   TabsContent2 as TabsContent,
   Tabs2 as Tabs,
   Switch,
+  Slider,
   SelectValue2 as SelectValue,
   SelectTrigger2 as SelectTrigger,
   SelectSeparator2 as SelectSeparator,

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { Input } from './Input';
 export { Link } from './Link';
 export { PlanePaperIcon } from './PaperPlaneIcon';
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from './Select';
+export { Slider, type SliderProps } from './Slider';
 export { Switch } from './Switch';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs';
 export { Textarea } from './Textarea';

package/dist/index.js

@@ -7,6 +7,7 @@ export { Input } from './Input';
 export { Link } from './Link';
 export { PlanePaperIcon } from './PaperPlaneIcon';
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from './Select';
+export { Slider } from './Slider';
 export { Switch } from './Switch';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs';
 export { Textarea } from './Textarea';

package/dist/tailwind.css

@@ -28,6 +28,8 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-brand: #0b84f3;
+    --color-card-bg: white;
   }
 }
 @layer base {
@@ -365,6 +367,10 @@
   .rounded-sm {
     border-radius: var(--radius-sm);
   }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .border-0 {
     border-style: var(--tw-border-style);
     border-width: 0px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/design",
-	"version": "4.0.507",
+	"version": "4.0.509",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -22,19 +22,19 @@
 		"@radix-ui/react-select": "2.1.1",
 		"@radix-ui/react-slot": "1.2.4",
 		"@radix-ui/react-tabs": "1.1.13",
-		"@remotion/paths": "4.0.507",
-		"@remotion/shapes": "4.0.507",
-		"@remotion/svg-3d-engine": "4.0.507",
+		"@remotion/paths": "4.0.509",
+		"@remotion/shapes": "4.0.509",
+		"@remotion/svg-3d-engine": "4.0.509",
 		"clsx": "2.1.1",
 		"lucide-react": "0.439.0",
-		"remotion": "4.0.507"
+		"remotion": "4.0.509"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.507",
+		"@remotion/eslint-config-internal": "4.0.509",
 		"eslint": "9.19.0",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",