@ecopages/radiant-ui 0.1.0-beta.0 → 0.1.0-beta.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 (75) hide show
  1. package/README.md +4 -2
  2. package/dist/components/ui/alert/alert.css +56 -23
  3. package/dist/components/ui/breadcrumb/breadcrumb.css +85 -36
  4. package/dist/components/ui/carousel/carousel.css +465 -166
  5. package/dist/components/ui/checkbox/checkbox.css +196 -49
  6. package/dist/components/ui/combobox/combobox.css +213 -60
  7. package/dist/components/ui/dialog/dialog.css +176 -49
  8. package/dist/components/ui/disclosure/disclosure.css +228 -100
  9. package/dist/components/ui/feed/feed.css +30 -10
  10. package/dist/components/ui/field/field.css +18 -22
  11. package/dist/components/ui/form/form.css +7 -8
  12. package/dist/components/ui/grid/grid.css +172 -43
  13. package/dist/components/ui/input/input.css +126 -30
  14. package/dist/components/ui/label/label.css +20 -6
  15. package/dist/components/ui/listbox/listbox.css +137 -19
  16. package/dist/components/ui/menu-button/index.js +1 -1
  17. package/dist/components/ui/menu-button/index.js.map +4 -4
  18. package/dist/components/ui/menu-button/menu-button.css +158 -38
  19. package/dist/components/ui/menu-button/menu-button.script.d.ts +7 -7
  20. package/dist/components/ui/menubar/index.js +1 -1
  21. package/dist/components/ui/menubar/index.js.map +2 -2
  22. package/dist/components/ui/menubar/menubar.css +207 -39
  23. package/dist/components/ui/meter/meter.css +50 -13
  24. package/dist/components/ui/navigation-menu/navigation-menu.css +281 -85
  25. package/dist/components/ui/radio-group/radio-group.css +179 -40
  26. package/dist/components/ui/shared/floating-position.d.ts +37 -0
  27. package/dist/components/ui/shared/floating-position.test.d.ts +1 -0
  28. package/dist/components/ui/shared/placement.d.ts +2 -0
  29. package/dist/components/ui/sidebar/sidebar.css +407 -189
  30. package/dist/components/ui/slider/slider.css +220 -47
  31. package/dist/components/ui/spinbutton/spinbutton.css +65 -15
  32. package/dist/components/ui/switch/switch.css +164 -43
  33. package/dist/components/ui/tabs/tabs.css +145 -24
  34. package/dist/components/ui/textarea/textarea.css +128 -31
  35. package/dist/components/ui/toast/toast.css +388 -255
  36. package/dist/components/ui/toolbar/toolbar.css +118 -11
  37. package/dist/components/ui/tooltip/index.js +1 -1
  38. package/dist/components/ui/tooltip/index.js.map +4 -4
  39. package/dist/components/ui/tooltip/tooltip.css +119 -21
  40. package/dist/components/ui/tooltip/tooltip.script.d.ts +6 -6
  41. package/dist/components/ui/tree/tree.css +180 -49
  42. package/dist/components/ui/treegrid/treegrid.css +190 -72
  43. package/dist/components/ui/window-splitter/window-splitter.css +144 -31
  44. package/dist/index.js +1 -1
  45. package/dist/index.js.map +4 -4
  46. package/dist/styles/components/button.css +299 -113
  47. package/dist/styles/radiant-ui-core.css +828 -7
  48. package/dist/styles/radiant-ui.css +1497 -8
  49. package/dist/styles/styles.css +5830 -36
  50. package/dist/styles/tailwind.css +1607 -27
  51. package/dist/styles/themes/aurora.css +637 -15
  52. package/dist/styles/themes/default-compact-soft.css +580 -15
  53. package/dist/styles/themes/default.css +641 -2
  54. package/dist/styles/themes/glacier.css +637 -15
  55. package/dist/styles/tokens/colors/aurora.css +1 -73
  56. package/dist/styles/tokens/colors/basalt.css +1 -36
  57. package/dist/styles/tokens/colors/glacier.css +1 -45
  58. package/dist/styles/tokens/colors/palettes.css +1 -3
  59. package/dist/styles/tokens/elevation/default.css +11 -19
  60. package/dist/styles/tokens/elevation/flat.css +11 -19
  61. package/dist/styles/tokens/motion/default.css +6 -17
  62. package/dist/styles/tokens/motion/snappy.css +6 -17
  63. package/dist/styles/tokens/presets/colors/index.css +446 -4
  64. package/dist/styles/tokens/radius/default.css +17 -31
  65. package/dist/styles/tokens/radius/edgy.css +17 -32
  66. package/dist/styles/tokens/radius/sharp.css +20 -2
  67. package/dist/styles/tokens/radius/soft.css +17 -31
  68. package/dist/styles/tokens/semantic.css +445 -79
  69. package/dist/styles/tokens/spacing/compact.css +16 -21
  70. package/dist/styles/tokens/spacing/default.css +16 -21
  71. package/dist/styles/tokens/spacing/scale-bridge.css +1 -17
  72. package/dist/styles/tokens/spacing/wide.css +16 -21
  73. package/dist/styles/tokens/system.css +21 -33
  74. package/dist/styles/tokens/typography/default.css +23 -33
  75. package/package.json +5 -6
@@ -1,45 +1,213 @@
1
- @reference '../../../styles/radiant-ui.css';
2
-
1
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
3
  rui-menubar {
4
- @apply block;
4
+ display: block;
5
5
  }
6
-
7
6
  @layer components {
8
- .rui-menubar {
9
- @apply relative inline-flex gap-1 rounded-container border border-border bg-surface p-1;
10
- }
11
- .rui-menubar__root {
12
- @apply relative;
13
- }
14
- .rui-menubar__item {
15
- @apply cursor-pointer rounded-control border-0 bg-transparent px-3 py-1.5 text-sm text-on-surface;
16
- @apply transition-colors duration-fast;
17
- }
18
- .rui-menubar__item:hover {
19
- @apply bg-background;
20
- }
21
- .rui-menubar__item:active {
22
- @apply bg-background/80;
23
- }
24
- .rui-menubar__item[aria-expanded='true'] {
25
- @apply bg-background font-medium text-on-background shadow-sm;
26
- }
27
- .rui-menubar__item:focus-visible,
7
+ .rui-menubar {
8
+ position: relative;
9
+ display: inline-flex;
10
+ gap: var(--spacing-1, var(--space-1));
11
+ border-radius: var(--radius-container, var(--radius-container));
12
+ border-style: var(--tw-border-style);
13
+ border-width: 1px;
14
+ border-color: var(--color-border, var(--border));
15
+ background-color: var(--color-surface, var(--surface));
16
+ padding: var(--spacing-1, var(--space-1));
17
+ }
18
+ .rui-menubar__root {
19
+ position: relative;
20
+ }
21
+ .rui-menubar__item {
22
+ cursor: pointer;
23
+ border-radius: var(--radius-control, var(--radius-control));
24
+ border-style: var(--tw-border-style);
25
+ border-width: 0px;
26
+ background-color: transparent;
27
+ padding-inline: var(--spacing-3, var(--space-3));
28
+ padding-block: calc(var(--spacing, 0.25rem) * 1.5);
29
+ font-size: var(--text-sm, var(--text-sm));
30
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
31
+ color: var(--color-on-surface, var(--on-surface));
32
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
33
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
34
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
35
+ --tw-duration: var(--transition-duration-fast, var(--duration-fast));
36
+ transition-duration: var(--transition-duration-fast, var(--duration-fast));
37
+ }
38
+ .rui-menubar__item:hover {
39
+ background-color: var(--color-background, var(--background));
40
+ }
41
+ .rui-menubar__item:active {
42
+ background-color: var(--color-background, var(--background));
43
+ @supports (color: color-mix(in lab, red, red)) {
44
+ background-color: color-mix(in oklab, var(--color-background, var(--background)) 80%, transparent);
45
+ }
46
+ }
47
+ .rui-menubar__item[aria-expanded='true'] {
48
+ background-color: var(--color-background, var(--background));
49
+ --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
50
+ font-weight: var(--font-weight-medium, var(--weight-medium));
51
+ color: var(--color-on-background, var(--on-background));
52
+ --tw-shadow: var(--shadow-control);
53
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
54
+ }
55
+ .rui-menubar__item:focus-visible,
28
56
  .rui-menubar__menu-item:focus-visible {
29
- @apply bg-background outline-none ring-2 ring-focus-ring;
30
- }
31
- .rui-menubar__menu {
32
- @apply absolute left-0 top-full z-dropdown mt-1 min-w-40 rounded-container border border-border bg-surface p-1 shadow-md;
33
- }
34
- .rui-menubar__menu-item {
35
- @apply block w-full cursor-pointer rounded-control border-0 bg-transparent px-3 py-1.5 text-left text-sm text-on-surface;
36
- @apply transition-colors duration-fast;
37
- }
38
- .rui-menubar__menu-item:hover,
57
+ background-color: var(--color-background, var(--background));
58
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
59
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
60
+ --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
61
+ --tw-outline-style: none;
62
+ outline-style: none;
63
+ }
64
+ .rui-menubar__menu {
65
+ position: absolute;
66
+ top: 100%;
67
+ left: 0px;
68
+ z-index: var(--z-index-dropdown, var(--z-dropdown));
69
+ margin-top: calc(var(--spacing, 0.25rem) * 2.5);
70
+ min-width: calc(var(--spacing, 0.25rem) * 40);
71
+ border-radius: var(--radius-container, var(--radius-container));
72
+ border-style: var(--tw-border-style);
73
+ border-width: 1px;
74
+ border-color: var(--color-border, var(--border));
75
+ background-color: var(--color-surface, var(--surface));
76
+ padding: var(--spacing-1, var(--space-1));
77
+ --tw-shadow: var(--shadow-overlay);
78
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
79
+ }
80
+ .rui-menubar__menu-item {
81
+ display: block;
82
+ width: 100%;
83
+ cursor: pointer;
84
+ border-radius: var(--radius-control, var(--radius-control));
85
+ border-style: var(--tw-border-style);
86
+ border-width: 0px;
87
+ background-color: transparent;
88
+ padding-inline: var(--spacing-3, var(--space-3));
89
+ padding-block: calc(var(--spacing, 0.25rem) * 1.5);
90
+ text-align: left;
91
+ font-size: var(--text-sm, var(--text-sm));
92
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
93
+ color: var(--color-on-surface, var(--on-surface));
94
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
95
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
96
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
97
+ --tw-duration: var(--transition-duration-fast, var(--duration-fast));
98
+ transition-duration: var(--transition-duration-fast, var(--duration-fast));
99
+ }
100
+ .rui-menubar__menu-item:hover,
39
101
  .rui-menubar__menu-item:focus-visible {
40
- @apply bg-background outline-none;
41
- }
42
- .rui-menubar__menu-item:active {
43
- @apply bg-background/80;
44
- }
102
+ background-color: var(--color-background, var(--background));
103
+ --tw-outline-style: none;
104
+ outline-style: none;
105
+ }
106
+ .rui-menubar__menu-item:active {
107
+ background-color: var(--color-background, var(--background));
108
+ @supports (color: color-mix(in lab, red, red)) {
109
+ background-color: color-mix(in oklab, var(--color-background, var(--background)) 80%, transparent);
110
+ }
111
+ }
112
+ }
113
+ @property --tw-border-style {
114
+ syntax: "*";
115
+ inherits: false;
116
+ initial-value: solid;
117
+ }
118
+ @property --tw-duration {
119
+ syntax: "*";
120
+ inherits: false;
121
+ }
122
+ @property --tw-font-weight {
123
+ syntax: "*";
124
+ inherits: false;
125
+ }
126
+ @property --tw-shadow {
127
+ syntax: "*";
128
+ inherits: false;
129
+ initial-value: 0 0 #0000;
130
+ }
131
+ @property --tw-shadow-color {
132
+ syntax: "*";
133
+ inherits: false;
134
+ }
135
+ @property --tw-shadow-alpha {
136
+ syntax: "<percentage>";
137
+ inherits: false;
138
+ initial-value: 100%;
139
+ }
140
+ @property --tw-inset-shadow {
141
+ syntax: "*";
142
+ inherits: false;
143
+ initial-value: 0 0 #0000;
144
+ }
145
+ @property --tw-inset-shadow-color {
146
+ syntax: "*";
147
+ inherits: false;
148
+ }
149
+ @property --tw-inset-shadow-alpha {
150
+ syntax: "<percentage>";
151
+ inherits: false;
152
+ initial-value: 100%;
153
+ }
154
+ @property --tw-ring-color {
155
+ syntax: "*";
156
+ inherits: false;
157
+ }
158
+ @property --tw-ring-shadow {
159
+ syntax: "*";
160
+ inherits: false;
161
+ initial-value: 0 0 #0000;
162
+ }
163
+ @property --tw-inset-ring-color {
164
+ syntax: "*";
165
+ inherits: false;
166
+ }
167
+ @property --tw-inset-ring-shadow {
168
+ syntax: "*";
169
+ inherits: false;
170
+ initial-value: 0 0 #0000;
171
+ }
172
+ @property --tw-ring-inset {
173
+ syntax: "*";
174
+ inherits: false;
175
+ }
176
+ @property --tw-ring-offset-width {
177
+ syntax: "<length>";
178
+ inherits: false;
179
+ initial-value: 0px;
180
+ }
181
+ @property --tw-ring-offset-color {
182
+ syntax: "*";
183
+ inherits: false;
184
+ initial-value: #fff;
185
+ }
186
+ @property --tw-ring-offset-shadow {
187
+ syntax: "*";
188
+ inherits: false;
189
+ initial-value: 0 0 #0000;
190
+ }
191
+ @layer properties {
192
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
193
+ *, ::before, ::after, ::backdrop {
194
+ --tw-border-style: solid;
195
+ --tw-duration: initial;
196
+ --tw-font-weight: initial;
197
+ --tw-shadow: 0 0 #0000;
198
+ --tw-shadow-color: initial;
199
+ --tw-shadow-alpha: 100%;
200
+ --tw-inset-shadow: 0 0 #0000;
201
+ --tw-inset-shadow-color: initial;
202
+ --tw-inset-shadow-alpha: 100%;
203
+ --tw-ring-color: initial;
204
+ --tw-ring-shadow: 0 0 #0000;
205
+ --tw-inset-ring-color: initial;
206
+ --tw-inset-ring-shadow: 0 0 #0000;
207
+ --tw-ring-inset: initial;
208
+ --tw-ring-offset-width: 0px;
209
+ --tw-ring-offset-color: #fff;
210
+ --tw-ring-offset-shadow: 0 0 #0000;
211
+ }
212
+ }
45
213
  }
@@ -1,17 +1,54 @@
1
- @reference '../../../styles/radiant-ui.css';
2
-
1
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
3
  rui-meter {
4
- @apply block;
4
+ display: block;
5
5
  }
6
-
7
6
  @layer components {
8
- .rui-meter {
9
- @apply flex items-center gap-3 text-sm;
10
- }
11
- .rui-meter__bar {
12
- @apply h-3 w-48;
13
- }
14
- .rui-meter__value {
15
- @apply tabular-nums text-on-surface;
16
- }
7
+ .rui-meter {
8
+ display: flex;
9
+ align-items: center;
10
+ gap: var(--spacing-3, var(--space-3));
11
+ font-size: var(--text-sm, var(--text-sm));
12
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
13
+ }
14
+ .rui-meter__bar {
15
+ height: var(--spacing-3, var(--space-3));
16
+ width: calc(var(--spacing, 0.25rem) * 48);
17
+ }
18
+ .rui-meter__value {
19
+ color: var(--color-on-surface, var(--on-surface));
20
+ --tw-numeric-spacing: tabular-nums;
21
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
22
+ }
23
+ }
24
+ @property --tw-ordinal {
25
+ syntax: "*";
26
+ inherits: false;
27
+ }
28
+ @property --tw-slashed-zero {
29
+ syntax: "*";
30
+ inherits: false;
31
+ }
32
+ @property --tw-numeric-figure {
33
+ syntax: "*";
34
+ inherits: false;
35
+ }
36
+ @property --tw-numeric-spacing {
37
+ syntax: "*";
38
+ inherits: false;
39
+ }
40
+ @property --tw-numeric-fraction {
41
+ syntax: "*";
42
+ inherits: false;
43
+ }
44
+ @layer properties {
45
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
46
+ *, ::before, ::after, ::backdrop {
47
+ --tw-ordinal: initial;
48
+ --tw-slashed-zero: initial;
49
+ --tw-numeric-figure: initial;
50
+ --tw-numeric-spacing: initial;
51
+ --tw-numeric-fraction: initial;
52
+ }
53
+ }
17
54
  }