@remotion/design 4.0.428 → 4.0.430

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.
Files changed (5) hide show
  1. package/README.md +7 -7
  2. package/dist/Button.js +1 -1
  3. package/dist/esm/index.mjs +2 -2
  4. package/dist/tailwind.css +51 -46
  5. package/package.json +10 -9
package/README.md CHANGED
@@ -1,18 +1,18 @@
1
1
  # @remotion/design
2
-
2
+
3
3
  Design system
4
-
4
+
5
5
  [![NPM Downloads](https://img.shields.io/npm/dm/@remotion/design.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/@remotion/design?minimal=true)
6
-
6
+
7
7
  ## Installation
8
-
8
+
9
9
  ```bash
10
10
  npm install @remotion/design --save-exact
11
11
  ```
12
-
12
+
13
13
  When installing a Remotion package, make sure to align the version of all `remotion` and `@remotion/*` packages to the same version.
14
14
  Remove the `^` character from the version number to use the exact version.
15
-
15
+
16
16
  ## Usage
17
-
17
+
18
18
  See the [documentation](https://www.remotion.dev/design) for more information.
package/dist/Button.js CHANGED
@@ -45,7 +45,7 @@ export const Button = ({ children, className, disabled, depth, loading, ...rest
45
45
  });
46
46
  }, []);
47
47
  const isDisabled = disabled || loading;
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);
48
+ const sharedClasses = cn('text-text', 'inline-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-row', 'items-center', 'relative', 'overflow-hidden', isDisabled && 'cursor-default opacity-50', className);
49
49
  const innerContent = (_jsxs(_Fragment, { children: [
50
50
  _jsx("div", { className: cn(loading && 'invisible', 'inline-flex items-center'), 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] }));
51
51
  const isAnchor = 'href' in rest && rest.href !== undefined;
package/dist/esm/index.mjs CHANGED
@@ -414,7 +414,7 @@ var Button = ({
414
414
  });
415
415
  }, []);
416
416
  const isDisabled = disabled || loading;
417
- 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);
417
+ const sharedClasses = cn("text-text", "inline-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-row", "items-center", "relative", "overflow-hidden", isDisabled && "cursor-default opacity-50", className);
418
418
  const innerContent = /* @__PURE__ */ jsxs2(Fragment2, {
419
419
  children: [
420
420
  /* @__PURE__ */ jsx4("div", {
@@ -3721,7 +3721,7 @@ var hideOthers = function(originalTarget, parentNode, markerName) {
3721
3721
 
3722
3722
  // ../../node_modules/.bun/tslib@2.8.1/node_modules/tslib/tslib.es6.mjs
3723
3723
  var __assign = function() {
3724
- __assign = Object.assign || function __assign(t) {
3724
+ __assign = Object.assign || function __assign2(t) {
3725
3725
  for (var s, i = 1, n = arguments.length;i < n; i++) {
3726
3726
  s = arguments[i];
3727
3727
  for (var p in s)
package/dist/tailwind.css CHANGED
@@ -1,41 +1,6 @@
1
- /*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
2
3
  @layer theme, base, components, utilities;
3
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
4
- @layer base {
5
- *, ::before, ::after, ::backdrop {
6
- --tw-rotate-x: rotateX(0);
7
- --tw-rotate-y: rotateY(0);
8
- --tw-rotate-z: rotateZ(0);
9
- --tw-skew-x: skewX(0);
10
- --tw-skew-y: skewY(0);
11
- --tw-border-style: solid;
12
- --tw-font-weight: initial;
13
- --tw-ordinal: initial;
14
- --tw-slashed-zero: initial;
15
- --tw-numeric-figure: initial;
16
- --tw-numeric-spacing: initial;
17
- --tw-numeric-fraction: initial;
18
- --tw-shadow: 0 0 #0000;
19
- --tw-shadow-color: initial;
20
- --tw-shadow-alpha: 100%;
21
- --tw-inset-shadow: 0 0 #0000;
22
- --tw-inset-shadow-color: initial;
23
- --tw-inset-shadow-alpha: 100%;
24
- --tw-ring-color: initial;
25
- --tw-ring-shadow: 0 0 #0000;
26
- --tw-inset-ring-color: initial;
27
- --tw-inset-ring-shadow: 0 0 #0000;
28
- --tw-ring-inset: initial;
29
- --tw-ring-offset-width: 0px;
30
- --tw-ring-offset-color: #fff;
31
- --tw-ring-offset-shadow: 0 0 #0000;
32
- --tw-outline-style: solid;
33
- --tw-translate-x: 0;
34
- --tw-translate-y: 0;
35
- --tw-translate-z: 0;
36
- }
37
- }
38
- }
39
4
  @layer theme {
40
5
  :root, :host {
41
6
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
@@ -172,7 +137,10 @@
172
137
  }
173
138
  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
174
139
  ::placeholder {
175
- color: color-mix(in oklab, currentColor 50%, transparent);
140
+ color: currentcolor;
141
+ @supports (color: color-mix(in lab, red, red)) {
142
+ color: color-mix(in oklab, currentcolor 50%, transparent);
143
+ }
176
144
  }
177
145
  }
178
146
  textarea {
@@ -194,6 +162,9 @@
194
162
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
195
163
  padding-block: 0;
196
164
  }
165
+ ::-webkit-calendar-picker-indicator {
166
+ line-height: 1;
167
+ }
197
168
  :-moz-ui-invalid {
198
169
  box-shadow: none;
199
170
  }
@@ -226,6 +197,9 @@
226
197
  .inset-0 {
227
198
  inset: calc(var(--spacing) * 0);
228
199
  }
200
+ .start {
201
+ inset-inline-start: var(--spacing);
202
+ }
229
203
  .top-\[4px\] {
230
204
  top: 4px;
231
205
  }
@@ -356,7 +330,7 @@
356
330
  flex-shrink: 0;
357
331
  }
358
332
  .transform {
359
- transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
333
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
360
334
  }
361
335
  .cursor-default {
362
336
  cursor: default;
@@ -580,7 +554,7 @@
580
554
  }
581
555
  .focus\:ring-2 {
582
556
  &:focus {
583
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
557
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
584
558
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
585
559
  }
586
560
  }
@@ -602,7 +576,7 @@
602
576
  }
603
577
  .focus-visible\:ring-2 {
604
578
  &:focus-visible {
605
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
579
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
606
580
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
607
581
  }
608
582
  }
@@ -735,27 +709,22 @@
735
709
  @property --tw-rotate-x {
736
710
  syntax: "*";
737
711
  inherits: false;
738
- initial-value: rotateX(0);
739
712
  }
740
713
  @property --tw-rotate-y {
741
714
  syntax: "*";
742
715
  inherits: false;
743
- initial-value: rotateY(0);
744
716
  }
745
717
  @property --tw-rotate-z {
746
718
  syntax: "*";
747
719
  inherits: false;
748
- initial-value: rotateZ(0);
749
720
  }
750
721
  @property --tw-skew-x {
751
722
  syntax: "*";
752
723
  inherits: false;
753
- initial-value: skewX(0);
754
724
  }
755
725
  @property --tw-skew-y {
756
726
  syntax: "*";
757
727
  inherits: false;
758
- initial-value: skewY(0);
759
728
  }
760
729
  @property --tw-border-style {
761
730
  syntax: "*";
@@ -871,3 +840,39 @@
871
840
  inherits: false;
872
841
  initial-value: 0;
873
842
  }
843
+ @layer properties {
844
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
845
+ *, ::before, ::after, ::backdrop {
846
+ --tw-rotate-x: initial;
847
+ --tw-rotate-y: initial;
848
+ --tw-rotate-z: initial;
849
+ --tw-skew-x: initial;
850
+ --tw-skew-y: initial;
851
+ --tw-border-style: solid;
852
+ --tw-font-weight: initial;
853
+ --tw-ordinal: initial;
854
+ --tw-slashed-zero: initial;
855
+ --tw-numeric-figure: initial;
856
+ --tw-numeric-spacing: initial;
857
+ --tw-numeric-fraction: initial;
858
+ --tw-shadow: 0 0 #0000;
859
+ --tw-shadow-color: initial;
860
+ --tw-shadow-alpha: 100%;
861
+ --tw-inset-shadow: 0 0 #0000;
862
+ --tw-inset-shadow-color: initial;
863
+ --tw-inset-shadow-alpha: 100%;
864
+ --tw-ring-color: initial;
865
+ --tw-ring-shadow: 0 0 #0000;
866
+ --tw-inset-ring-color: initial;
867
+ --tw-inset-ring-shadow: 0 0 #0000;
868
+ --tw-ring-inset: initial;
869
+ --tw-ring-offset-width: 0px;
870
+ --tw-ring-offset-color: #fff;
871
+ --tw-ring-offset-shadow: 0 0 #0000;
872
+ --tw-outline-style: solid;
873
+ --tw-translate-x: 0;
874
+ --tw-translate-y: 0;
875
+ --tw-translate-z: 0;
876
+ }
877
+ }
878
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remotion/design",
3
- "version": "4.0.428",
3
+ "version": "4.0.430",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "module": "dist/esm/index.mjs",
@@ -13,17 +13,18 @@
13
13
  "url": "https://github.com/remotion-dev/remotion/issues"
14
14
  },
15
15
  "scripts": {
16
- "formatting": "prettier src --check",
16
+ "formatting": "oxfmt src --check",
17
+ "format": "oxfmt src",
17
18
  "lint": "eslint src",
18
19
  "watch": "tsgo -w",
19
20
  "make": "tsgo -d && bun --env-file=../.env.bundle bundle.ts"
20
21
  },
21
22
  "dependencies": {
22
- "@remotion/paths": "4.0.428",
23
- "@remotion/shapes": "4.0.428",
24
- "@remotion/svg-3d-engine": "4.0.428",
23
+ "@remotion/paths": "4.0.429",
24
+ "@remotion/shapes": "4.0.429",
25
+ "@remotion/svg-3d-engine": "4.0.429",
25
26
  "clsx": "^2.1.1",
26
- "remotion": "4.0.428",
27
+ "remotion": "4.0.429",
27
28
  "@radix-ui/react-select": "2.1.1",
28
29
  "@radix-ui/react-tabs": "^1.1.0",
29
30
  "lucide-react": "0.439.0"
@@ -33,12 +34,12 @@
33
34
  "react-dom": ">=16.8.0"
34
35
  },
35
36
  "devDependencies": {
36
- "@remotion/eslint-config-internal": "4.0.428",
37
+ "@remotion/eslint-config-internal": "4.0.429",
37
38
  "eslint": "9.19.0",
38
39
  "react": "19.2.3",
39
40
  "react-dom": "19.2.3",
40
- "tailwindcss": "4.1.1",
41
- "@tailwindcss/cli": "4.1.1",
41
+ "tailwindcss": "4.2.0",
42
+ "@tailwindcss/cli": "4.2.0",
42
43
  "tailwind-merge": "^2.6.0",
43
44
  "bun-plugin-tailwind": "0.1.2",
44
45
  "@typescript/native-preview": "7.0.0-dev.20260217.1"