@vireo-ai/trellis-ui 0.1.1 → 0.1.2

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 (46) hide show
  1. package/package.json +1 -1
  2. package/src/components/button/styles.css +47 -26
  3. package/src/components/date-picker/styles.css +23 -1
  4. package/src/components/file-upload/styles.css +28 -0
  5. package/src/components/radio/styles.css +33 -21
  6. package/src/components/select/styles.css +44 -3
  7. package/src/components.css +1 -2
  8. package/src/theme.css +332 -46
  9. package/trellis_ui/static/trellis_ui/css/styles.css +955 -214
  10. package/trellis_ui/static/trellis_ui/js/esm/index.js +1149 -910
  11. package/trellis_ui/static/trellis_ui/js/esm/index.js.map +1 -1
  12. package/trellis_ui/static/trellis_ui/js/index.js +7 -7
  13. package/types/components/app/contract.d.ts +7 -2
  14. package/types/components/badge/contract.d.ts +8 -6
  15. package/types/components/box/contract.d.ts +29 -21
  16. package/types/components/box/index.d.ts +1 -1
  17. package/types/components/button/contract.d.ts +10 -7
  18. package/types/components/card/contract.d.ts +25 -11
  19. package/types/components/combobox/contract.d.ts +6 -3
  20. package/types/components/common.d.ts +239 -2
  21. package/types/components/date-picker/contract.d.ts +7 -4
  22. package/types/components/file-upload/index.d.ts +1 -0
  23. package/types/components/frame/contract.d.ts +43 -18
  24. package/types/components/frame/index.d.ts +2 -2
  25. package/types/components/heading/contract.d.ts +3 -2
  26. package/types/components/input/contract.d.ts +7 -3
  27. package/types/components/menu/contract.d.ts +1 -1
  28. package/types/components/modal/contract.d.ts +12 -6
  29. package/types/components/select/contract.d.ts +10 -7
  30. package/types/components/sidebar/contract.d.ts +1 -1
  31. package/types/components/table/contract.d.ts +1 -1
  32. package/types/components/tabs/index.d.ts +1 -0
  33. package/types/components/text/contract.d.ts +3 -2
  34. package/types/components/textarea/contract.d.ts +1 -0
  35. package/types/components/toast/contract.d.ts +11 -5
  36. package/types/components/toast/index.d.ts +2 -1
  37. package/types/index.d.ts +4 -4
  38. package/types/motion/animate.d.ts +4 -0
  39. package/types/motion/presence.d.ts +1 -1
  40. package/types/runtime/index.d.ts +4 -4
  41. package/types/runtime/manifest.d.ts +5 -1
  42. package/types/runtime/merge-bindings.d.ts +9 -0
  43. package/types/runtime/theme.d.ts +8 -3
  44. package/src/components/image/styles.css +0 -10
  45. package/src/components/theme/styles.css +0 -13
  46. package/types/runtime/props.d.ts +0 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vireo-ai/trellis-ui",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "type": "module",
5
5
  "description": "Django-native UI toolkit for building realtime and interactive web apps.",
6
6
  "license": "MIT",
package/src/components/button/styles.css CHANGED
@@ -29,51 +29,69 @@
29
29
  z-index: 1;
30
30
  }
31
31
 
32
- [data-ui-button][data-variant="default"],
32
+ [data-ui-button][data-variant="surface"],
33
33
  [data-ui-button][data-variant="outline"] {
34
34
  --_ui-button-overlay: var(--color-base-a2);
35
35
  --_ui-button-overlay-active: var(--color-base-a3);
36
36
  }
37
37
 
38
- [data-ui-button][data-variant="default"]:hover,
39
- [data-ui-button][data-variant="default"]:active,
38
+ [data-ui-button][data-variant="surface"]:hover,
39
+ [data-ui-button][data-variant="surface"]:active {
40
+ background-color: var(--ui-control-bg) !important;
41
+ }
42
+
40
43
  [data-ui-button][data-variant="outline"]:hover,
41
44
  [data-ui-button][data-variant="outline"]:active {
42
- background-color: var(--color-surface) !important;
45
+ background-color: transparent !important;
43
46
  }
44
47
 
45
- [data-ui-button][data-variant="filled"][data-color="accent"] {
48
+ [data-ui-button][data-variant="solid"] {
46
49
  --_ui-button-overlay: rgb(255 255 255 / 0.10);
47
50
  --_ui-button-overlay-active: rgb(255 255 255 / 0.16);
48
- --_ui-button-highlight: rgb(255 255 255 / 0.22);
51
+ --_ui-button-highlight: rgb(255 255 255 / 0.18);
49
52
  box-shadow:
50
53
  inset 0 1px var(--_ui-button-highlight),
51
54
  var(--shadow-1) !important;
52
55
  }
53
56
 
54
- [data-ui-button][data-variant="filled"][data-color="accent"]:hover,
55
- [data-ui-button][data-variant="filled"][data-color="accent"]:active {
57
+ [data-ui-button][data-variant="solid"][data-color="neutral"]:hover,
58
+ [data-ui-button][data-variant="solid"][data-color="neutral"]:active {
59
+ background-color: var(--color-base-12) !important;
60
+ }
61
+
62
+ [data-ui-button][data-variant="solid"][data-color="accent"]:hover,
63
+ [data-ui-button][data-variant="solid"][data-color="accent"]:active {
56
64
  background-color: var(--color-accent-solid) !important;
57
65
  }
58
66
 
59
- [data-ui-button][data-variant="subtle"] {
67
+ [data-ui-button][data-variant="soft"][data-color="neutral"] {
60
68
  --_ui-button-overlay: var(--color-base-a3);
61
69
  --_ui-button-overlay-active: var(--color-base-a4);
62
70
  }
63
71
 
64
- [data-ui-button][data-variant="subtle"]:hover,
65
- [data-ui-button][data-variant="subtle"]:active {
72
+ [data-ui-button][data-variant="soft"][data-color="neutral"]:hover,
73
+ [data-ui-button][data-variant="soft"][data-color="neutral"]:active {
66
74
  background-color: var(--color-base-a2) !important;
67
75
  }
68
76
 
69
- [data-ui-button][data-variant="filled"] {
70
- --_ui-button-overlay: var(--color-base-a4);
71
- --_ui-button-overlay-active: var(--color-base-a5);
77
+ [data-ui-button][data-variant="soft"][data-color="accent"] {
78
+ --_ui-button-overlay: var(--color-accent-a3);
79
+ --_ui-button-overlay-active: var(--color-accent-a4);
80
+ }
81
+
82
+ [data-ui-button][data-variant="soft"][data-color="accent"]:hover,
83
+ [data-ui-button][data-variant="soft"][data-color="accent"]:active {
84
+ background-color: var(--color-accent-surface) !important;
85
+ }
86
+
87
+ [data-ui-button][data-variant="soft"][data-color="danger"] {
88
+ --_ui-button-overlay: var(--color-danger-a3);
89
+ --_ui-button-overlay-active: var(--color-danger-a4);
72
90
  }
73
91
 
74
- [data-ui-button][data-variant="filled"]:hover,
75
- [data-ui-button][data-variant="filled"]:active {
76
- background-color: var(--color-base-a3) !important;
92
+ [data-ui-button][data-variant="soft"][data-color="danger"]:hover,
93
+ [data-ui-button][data-variant="soft"][data-color="danger"]:active {
94
+ background-color: var(--color-danger-surface) !important;
77
95
  }
78
96
 
79
97
  [data-ui-button][data-variant="ghost"] {
@@ -86,17 +104,20 @@
86
104
  background-color: transparent !important;
87
105
  }
88
106
 
89
- [data-ui-button][data-variant="filled"][data-color="danger"] {
90
- --_ui-button-overlay: rgb(255 255 255 / 0.10);
91
- --_ui-button-overlay-active: rgb(255 255 255 / 0.16);
92
- --_ui-button-highlight: rgb(255 255 255 / 0.20);
93
- box-shadow:
94
- inset 0 1px var(--_ui-button-highlight),
95
- var(--shadow-1) !important;
107
+ [data-ui-button][data-variant="ghost"][data-color="accent"],
108
+ [data-ui-button][data-variant="outline"][data-color="accent"] {
109
+ --_ui-button-overlay: var(--color-accent-a3);
110
+ --_ui-button-overlay-active: var(--color-accent-a4);
111
+ }
112
+
113
+ [data-ui-button][data-variant="ghost"][data-color="danger"],
114
+ [data-ui-button][data-variant="outline"][data-color="danger"] {
115
+ --_ui-button-overlay: var(--color-danger-a3);
116
+ --_ui-button-overlay-active: var(--color-danger-a4);
96
117
  }
97
118
 
98
- [data-ui-button][data-variant="filled"][data-color="danger"]:hover,
99
- [data-ui-button][data-variant="filled"][data-color="danger"]:active {
119
+ [data-ui-button][data-variant="solid"][data-color="danger"]:hover,
120
+ [data-ui-button][data-variant="solid"][data-color="danger"]:active {
100
121
  background-color: var(--color-danger-solid) !important;
101
122
  }
102
123
 
package/src/components/date-picker/styles.css CHANGED
@@ -2,7 +2,7 @@
2
2
  [data-ui-date-picker] {
3
3
  --ui-date-picker-selected-bg: var(--color-base-12);
4
4
  --ui-date-picker-selected-bg-hover: var(--color-base-12);
5
- --ui-date-picker-selected-fg: var(--color-surface);
5
+ --ui-date-picker-selected-fg: var(--color-surface-inverse-fg);
6
6
  --ui-date-picker-range-bg: var(--color-base-a3);
7
7
  --ui-date-picker-range-bg-hover: var(--color-base-a4);
8
8
  --ui-date-picker-month-heading-size: 1.75rem;
@@ -19,6 +19,28 @@
19
19
  --ui-date-picker-range-bg-hover: var(--color-accent-surface-hover);
20
20
  }
21
21
 
22
+ [data-ui-date-picker-native]:is(:hover, :active):not(:focus):not(:disabled):not([aria-invalid="true"]) {
23
+ --ui-control-shadow: var(--ui-control-shadow-hover);
24
+ }
25
+
26
+ [data-ui-date-picker-native]:focus:not([aria-invalid="true"]) {
27
+ --ui-control-shadow: var(--ui-control-shadow-focus);
28
+ box-shadow: var(--shadow-control), var(--shadow-focus);
29
+ }
30
+
31
+ [data-ui-date-picker-native][aria-invalid="true"] {
32
+ --ui-control-shadow: var(--ui-control-shadow-invalid);
33
+ }
34
+
35
+ [data-ui-date-picker-native][aria-invalid="true"]:is(:hover, :active):not(:focus):not(:disabled) {
36
+ --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
37
+ }
38
+
39
+ [data-ui-date-picker-native][aria-invalid="true"]:focus {
40
+ --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
41
+ box-shadow: var(--shadow-danger-focus);
42
+ }
43
+
22
44
  [data-ui-date-picker-calendar] {
23
45
  --color-accent: var(--ui-date-picker-selected-bg);
24
46
  --color-text-on-accent: var(--ui-date-picker-selected-fg);
package/src/components/file-upload/styles.css ADDED
@@ -0,0 +1,28 @@
1
+ @layer components {
2
+ [data-ui-file-upload-dropzone]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]):not([data-invalid]) {
3
+ --ui-control-shadow: var(--ui-control-shadow-hover);
4
+ }
5
+
6
+ [data-ui-file-upload-dropzone]:focus-within:not([data-invalid]) {
7
+ --ui-control-shadow: var(--ui-control-shadow-focus);
8
+ box-shadow: var(--shadow-control), var(--shadow-focus);
9
+ }
10
+
11
+ [data-ui-file-upload-dropzone][data-dragging]:not([data-invalid]) {
12
+ --ui-control-shadow: var(--ui-control-shadow-focus);
13
+ }
14
+
15
+ [data-ui-file-upload-dropzone][data-invalid] {
16
+ --ui-control-shadow: var(--ui-control-shadow-invalid);
17
+ }
18
+
19
+ [data-ui-file-upload-dropzone][data-invalid]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]) {
20
+ --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
21
+ }
22
+
23
+ [data-ui-file-upload-dropzone][data-invalid]:focus-within:not([data-disabled]),
24
+ [data-ui-file-upload-dropzone][data-invalid][data-dragging]:not([data-disabled]) {
25
+ --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
26
+ box-shadow: var(--shadow-danger-focus);
27
+ }
28
+ }
package/src/components/radio/styles.css CHANGED
@@ -5,41 +5,53 @@
5
5
 
6
6
  [data-ui-radio-group][data-variant="cards"] > [data-ui-radio],
7
7
  [data-ui-radio][data-variant="cards"] {
8
- align-items: center;
9
- background-color: var(--color-surface);
10
- border-radius: var(--radius-3);
8
+ align-items: flex-start !important;
9
+ background-color: var(--color-surface-panel);
10
+ border-radius: var(--radius-4) !important;
11
11
  box-shadow: var(--shadow-border);
12
- min-height: var(--ui-control-height-xlg);
13
- padding: 0.875rem 1rem;
14
- }
15
-
16
- [data-ui-radio-group][data-variant="cards"] > [data-ui-radio][data-invalid],
17
- [data-ui-radio][data-variant="cards"][data-invalid] {
18
- background-color: var(--color-danger-surface);
19
- box-shadow: 0 0 0 1px var(--color-danger-border);
12
+ display: flex !important;
13
+ flex: 1 1 0;
14
+ gap: var(--spacing-3);
15
+ padding: 1rem !important;
16
+ width: auto !important;
20
17
  }
21
18
 
22
19
  [data-ui-radio-group][data-variant="pills"] > [data-ui-radio],
23
20
  [data-ui-radio][data-variant="pills"] {
24
- align-items: center;
25
- background-color: var(--color-surface);
26
- border-radius: var(--radius-full);
27
- box-shadow: var(--shadow-border);
21
+ align-items: center !important;
22
+ background-color: color-mix(in srgb, currentColor 10%, transparent);
23
+ border-radius: var(--radius-full) !important;
24
+ box-shadow: none;
25
+ color: var(--color-foreground-muted);
26
+ display: inline-flex !important;
27
+ flex: 0 0 auto;
28
28
  min-height: var(--ui-control-height-md);
29
- padding: 0.25rem 0.75rem;
29
+ padding: 0 0.625rem !important;
30
+ width: auto !important;
30
31
  }
31
32
 
32
33
  [data-ui-radio-group][data-variant="pills"] > [data-ui-radio][data-checked],
33
34
  [data-ui-radio][data-variant="pills"][data-checked] {
34
- background-color: var(--color-accent-surface);
35
- color: var(--color-foreground);
36
- box-shadow: 0 0 0 1px var(--color-accent-border), var(--shadow-1);
35
+ background-color: var(--color-base-12);
36
+ color: var(--color-base-1) !important;
37
+ box-shadow: var(--shadow-1);
37
38
  }
38
39
 
39
40
  [data-ui-radio-group][data-variant="pills"] > [data-ui-radio][data-checked]:hover:not([data-disabled]),
40
41
  [data-ui-radio][data-variant="pills"][data-checked]:hover:not([data-disabled]) {
41
- background-color: var(--color-accent-surface);
42
- box-shadow: 0 0 0 1px var(--color-accent-border), var(--shadow-1);
42
+ background-color: var(--color-base-12);
43
+ box-shadow: var(--shadow-1);
44
+ }
45
+
46
+ [data-ui-radio-group][data-variant="pills"] [data-ui-radio-indicator],
47
+ [data-ui-radio][data-variant="pills"] [data-ui-radio-indicator] {
48
+ display: none !important;
49
+ }
50
+
51
+ [data-ui-radio-group][data-variant="cards"] > [data-ui-radio][data-invalid],
52
+ [data-ui-radio][data-variant="cards"][data-invalid] {
53
+ background-color: var(--color-danger-surface);
54
+ box-shadow: 0 0 0 1px var(--color-danger-border);
43
55
  }
44
56
 
45
57
  [data-ui-radio-group][data-indicator="false"] [data-ui-radio-indicator],
package/src/components/select/styles.css CHANGED
@@ -1,10 +1,51 @@
1
1
  @layer components {
2
+ [data-ui-select-popover]:has([data-ui-select-search]) {
3
+ grid-template-rows: auto minmax(0, 1fr);
4
+ }
5
+
6
+ [data-ui-select-popover]:has([data-ui-select-search]) [data-ui-select-listbox] {
7
+ min-height: 0;
8
+ overflow: hidden;
9
+ }
10
+
11
+ [data-ui-select-option-label]:has(>*+*) {
12
+ display: grid;
13
+ gap: var(--spacing-1);
14
+ overflow: visible;
15
+ text-overflow: clip;
16
+ white-space: normal;
17
+ }
18
+
19
+ [data-ui-select-option-label]:has(>*+*) > * {
20
+ min-width: 0;
21
+ max-width: 100%;
22
+ overflow-wrap: break-word;
23
+ white-space: normal;
24
+ }
25
+
26
+ [data-ui-select][data-mark="none"] [data-ui-select-option-indicator] {
27
+ display: none;
28
+ }
29
+
30
+ [data-ui-select-native]:is(:hover, :active):not(:focus):not(:disabled):not([aria-invalid="true"]) {
31
+ --ui-control-shadow: var(--ui-control-shadow-hover);
32
+ }
33
+
34
+ [data-ui-select-native]:focus:not([aria-invalid="true"]) {
35
+ --ui-control-shadow: var(--ui-control-shadow-focus);
36
+ box-shadow: var(--shadow-control), var(--shadow-focus);
37
+ }
38
+
2
39
  [data-ui-select-native][aria-invalid="true"] {
3
- border-color: var(--ui-control-border-invalid);
40
+ --ui-control-shadow: var(--ui-control-shadow-invalid);
41
+ }
42
+
43
+ [data-ui-select-native][aria-invalid="true"]:is(:hover, :active):not(:focus):not(:disabled) {
44
+ --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
4
45
  }
5
46
 
6
47
  [data-ui-select-native][aria-invalid="true"]:focus {
7
- border-color: var(--ui-control-border-invalid-focus);
8
- box-shadow: var(--shadow-control), 0 0 0 3px var(--color-danger-a4);
48
+ --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
49
+ box-shadow: var(--shadow-danger-focus);
9
50
  }
10
51
  }
package/src/components.css CHANGED
@@ -12,10 +12,9 @@
12
12
  @import "./components/field/styles.css";
13
13
  @import "./components/radio/styles.css";
14
14
  @import "./components/date-picker/styles.css";
15
+ @import "./components/file-upload/styles.css";
15
16
  @import "./components/button/styles.css";
16
17
  @import "./components/accordion/styles.css";
17
18
  @import "./components/toast/styles.css";
18
19
  @import "./components/input/styles.css";
19
- @import "./components/image/styles.css";
20
20
  @import "./components/sidebar/styles.css";
21
- @import "./components/theme/styles.css";