@remotion/design 4.0.423 → 4.0.424
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button.js +3 -2
- package/dist/Counter.js +7 -3
- package/dist/Select.js +9 -4
- package/dist/helpers/Faces.js +1 -1
- package/dist/helpers/Outer.js +4 -2
- package/package.json +10 -9
package/dist/Button.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useRef, useState } from 'react';
|
|
3
3
|
import { cn } from './helpers/cn';
|
|
4
4
|
import { useHoverTransforms } from './helpers/hover-transforms';
|
|
@@ -46,7 +46,8 @@ export const Button = ({ children, className, disabled, depth, loading, ...rest
|
|
|
46
46
|
}, []);
|
|
47
47
|
const isDisabled = disabled || loading;
|
|
48
48
|
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);
|
|
49
|
-
const innerContent = (_jsxs(_Fragment, { children: [
|
|
49
|
+
const innerContent = (_jsxs(_Fragment, { children: [
|
|
50
|
+
_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] }));
|
|
50
51
|
const isAnchor = 'href' in rest && rest.href !== undefined;
|
|
51
52
|
const content = isAnchor ? (_jsx("a", { ...rest, className: cn('no-underline text-inherit', sharedClasses), "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
|
|
52
53
|
? (e) => {
|
package/dist/Counter.js
CHANGED
|
@@ -33,7 +33,8 @@ export const Counter = ({ count, setCount, minCount, step, incrementStep, }) =>
|
|
|
33
33
|
setCount(Math.min(MAX_COUNT, roundedValue));
|
|
34
34
|
};
|
|
35
35
|
const shrink = String(count).length > 6;
|
|
36
|
-
return (_jsxs(Card, { style: container, className: cn('w-[140px] flex flex-row overflow-hidden'), children: [
|
|
36
|
+
return (_jsxs(Card, { style: container, className: cn('w-[140px] flex flex-row overflow-hidden'), children: [
|
|
37
|
+
_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) => {
|
|
37
38
|
if (e.target.value.trim() === '') {
|
|
38
39
|
setCount(step === 1 ? 1 : minCount);
|
|
39
40
|
return;
|
|
@@ -48,9 +49,12 @@ export const Counter = ({ count, setCount, minCount, step, incrementStep, }) =>
|
|
|
48
49
|
else {
|
|
49
50
|
setCount(validValue);
|
|
50
51
|
}
|
|
51
|
-
} }), _jsxs("div", { className: "flex flex-col h-full", children: [
|
|
52
|
+
} }), _jsxs("div", { className: "flex flex-col h-full", children: [
|
|
53
|
+
_jsx("button", { type: "button", className: "border-0 flex-1 p-0 pt-[5px] bg-transparent", style: {
|
|
52
54
|
...buttonContainer,
|
|
53
55
|
}, 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: {
|
|
54
56
|
...buttonContainer,
|
|
55
|
-
}, onClick: decrement, children: _jsx(Triangle, { rotated: true }) })
|
|
57
|
+
}, onClick: decrement, children: _jsx(Triangle, { rotated: true }) })
|
|
58
|
+
] })
|
|
59
|
+
] }));
|
|
56
60
|
};
|
package/dist/Select.js
CHANGED
|
@@ -6,7 +6,8 @@ import { cn } from './helpers/cn';
|
|
|
6
6
|
const Select = SelectPrimitive.Root;
|
|
7
7
|
const SelectGroup = SelectPrimitive.Group;
|
|
8
8
|
const SelectValue = SelectPrimitive.Value;
|
|
9
|
-
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" }) })
|
|
9
|
+
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" }) })
|
|
10
|
+
] })));
|
|
10
11
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
11
12
|
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" }) })));
|
|
12
13
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
@@ -14,12 +15,16 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
|
|
|
14
15
|
SelectScrollDownButton.displayName =
|
|
15
16
|
SelectPrimitive.ScrollDownButton.displayName;
|
|
16
17
|
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' &&
|
|
17
|
-
'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: [
|
|
18
|
-
|
|
18
|
+
'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: [
|
|
19
|
+
_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
|
|
20
|
+
'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'), children: children }), _jsx(SelectScrollDownButton, {})
|
|
21
|
+
] }) })));
|
|
19
22
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
20
23
|
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 })));
|
|
21
24
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
22
|
-
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: [
|
|
25
|
+
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: [
|
|
26
|
+
_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 })
|
|
27
|
+
] })));
|
|
23
28
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
24
29
|
const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn('-mx-1 my-1 h-px bg-muted', className), ...props })));
|
|
25
30
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
package/dist/helpers/Faces.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { threeDIntoSvgPath } from '@remotion/svg-3d-engine';
|
|
3
3
|
export const Faces = ({ elements, ...svgProps }) => {
|
|
4
4
|
return (_jsx(_Fragment, { children: elements.map(({ points, color, crispEdges }, idx) => {
|
package/dist/helpers/Outer.js
CHANGED
|
@@ -45,7 +45,8 @@ export const Outer = ({ children, width, height, cornerRadius, hoverTransform, p
|
|
|
45
45
|
description: 'rect',
|
|
46
46
|
transformations: centerOriented,
|
|
47
47
|
});
|
|
48
|
-
return (_jsxs("div", { className: "relative", style: { width, height }, children: [
|
|
48
|
+
return (_jsxs("div", { className: "relative", style: { width, height }, children: [
|
|
49
|
+
_jsx("svg", { viewBox: viewBox, style: {
|
|
49
50
|
overflow: 'visible',
|
|
50
51
|
height,
|
|
51
52
|
width,
|
|
@@ -56,5 +57,6 @@ export const Outer = ({ children, width, height, cornerRadius, hoverTransform, p
|
|
|
56
57
|
transform: makeMatrix3dTransform(frontFace),
|
|
57
58
|
width,
|
|
58
59
|
height,
|
|
59
|
-
}, children: children })
|
|
60
|
+
}, children: children })
|
|
61
|
+
] }));
|
|
60
62
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/design",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.424",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/esm/index.mjs",
|
|
@@ -15,15 +15,15 @@
|
|
|
15
15
|
"scripts": {
|
|
16
16
|
"formatting": "prettier --experimental-cli src --check",
|
|
17
17
|
"lint": "eslint src",
|
|
18
|
-
"watch": "
|
|
19
|
-
"make": "
|
|
18
|
+
"watch": "tsgo -w",
|
|
19
|
+
"make": "tsgo -d && bun --env-file=../.env.bundle bundle.ts"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@remotion/paths": "4.0.
|
|
23
|
-
"@remotion/shapes": "4.0.
|
|
24
|
-
"@remotion/svg-3d-engine": "4.0.
|
|
22
|
+
"@remotion/paths": "4.0.424",
|
|
23
|
+
"@remotion/shapes": "4.0.424",
|
|
24
|
+
"@remotion/svg-3d-engine": "4.0.424",
|
|
25
25
|
"clsx": "^2.1.1",
|
|
26
|
-
"remotion": "4.0.
|
|
26
|
+
"remotion": "4.0.424",
|
|
27
27
|
"@radix-ui/react-select": "2.1.1",
|
|
28
28
|
"@radix-ui/react-tabs": "^1.1.0",
|
|
29
29
|
"lucide-react": "0.439.0"
|
|
@@ -33,14 +33,15 @@
|
|
|
33
33
|
"react-dom": ">=16.8.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
36
|
+
"@remotion/eslint-config-internal": "4.0.424",
|
|
37
37
|
"eslint": "9.19.0",
|
|
38
38
|
"react": "19.2.3",
|
|
39
39
|
"react-dom": "19.2.3",
|
|
40
40
|
"tailwindcss": "4.1.1",
|
|
41
41
|
"@tailwindcss/cli": "4.1.1",
|
|
42
42
|
"tailwind-merge": "^2.6.0",
|
|
43
|
-
"bun-plugin-tailwind": "0.1.2"
|
|
43
|
+
"bun-plugin-tailwind": "0.1.2",
|
|
44
|
+
"@typescript/native-preview": "7.0.0-dev.20260217.1"
|
|
44
45
|
},
|
|
45
46
|
"keywords": [],
|
|
46
47
|
"publishConfig": {
|