@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,28 +1,149 @@
1
- @reference '../../../styles/radiant-ui.css';
2
-
1
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
3
  rui-tabs {
4
- @apply block;
4
+ display: block;
5
5
  }
6
-
7
6
  @layer components {
8
- .rui-tabs__list {
9
- @apply flex gap-1 border-b border-border;
10
- }
11
-
12
- .rui-tabs__tab {
13
- @apply cursor-pointer rounded-t-md border-0 bg-transparent px-control-x py-2 text-sm;
14
- @apply text-on-surface;
15
- }
16
-
17
- .rui-tabs__tab[aria-selected='true'] {
18
- @apply border-b-2 border-primary font-medium text-on-background;
19
- }
20
-
21
- .rui-tabs__tab:focus-visible {
22
- @apply ring-2 ring-focus-ring outline-hidden;
23
- }
24
-
25
- .rui-tabs__panel {
26
- @apply px-1 py-4 text-sm text-on-background;
27
- }
7
+ .rui-tabs__list {
8
+ display: flex;
9
+ gap: var(--spacing-1, var(--space-1));
10
+ border-bottom-style: var(--tw-border-style);
11
+ border-bottom-width: 1px;
12
+ border-color: var(--color-border, var(--border));
13
+ }
14
+ .rui-tabs__tab {
15
+ cursor: pointer;
16
+ border-top-left-radius: var(--radius-md, var(--border-radius-md));
17
+ border-top-right-radius: var(--radius-md, var(--border-radius-md));
18
+ border-style: var(--tw-border-style);
19
+ border-width: 0px;
20
+ background-color: transparent;
21
+ padding-inline: var(--spacing-control-x, var(--space-control-x));
22
+ padding-block: var(--spacing-2, var(--space-2));
23
+ font-size: var(--text-sm, var(--text-sm));
24
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
25
+ color: var(--color-on-surface, var(--on-surface));
26
+ }
27
+ .rui-tabs__tab[aria-selected='true'] {
28
+ border-bottom-style: var(--tw-border-style);
29
+ border-bottom-width: 2px;
30
+ border-color: var(--color-primary, var(--primary));
31
+ --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
32
+ font-weight: var(--font-weight-medium, var(--weight-medium));
33
+ color: var(--color-on-background, var(--on-background));
34
+ }
35
+ .rui-tabs__tab:focus-visible {
36
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
37
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
38
+ --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
39
+ --tw-outline-style: none;
40
+ outline-style: none;
41
+ @media (forced-colors: active) {
42
+ outline: 2px solid transparent;
43
+ outline-offset: 2px;
44
+ }
45
+ }
46
+ .rui-tabs__panel {
47
+ padding-inline: var(--spacing-1, var(--space-1));
48
+ padding-block: var(--spacing-4, var(--space-4));
49
+ font-size: var(--text-sm, var(--text-sm));
50
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
51
+ color: var(--color-on-background, var(--on-background));
52
+ }
53
+ }
54
+ @property --tw-border-style {
55
+ syntax: "*";
56
+ inherits: false;
57
+ initial-value: solid;
58
+ }
59
+ @property --tw-font-weight {
60
+ syntax: "*";
61
+ inherits: false;
62
+ }
63
+ @property --tw-shadow {
64
+ syntax: "*";
65
+ inherits: false;
66
+ initial-value: 0 0 #0000;
67
+ }
68
+ @property --tw-shadow-color {
69
+ syntax: "*";
70
+ inherits: false;
71
+ }
72
+ @property --tw-shadow-alpha {
73
+ syntax: "<percentage>";
74
+ inherits: false;
75
+ initial-value: 100%;
76
+ }
77
+ @property --tw-inset-shadow {
78
+ syntax: "*";
79
+ inherits: false;
80
+ initial-value: 0 0 #0000;
81
+ }
82
+ @property --tw-inset-shadow-color {
83
+ syntax: "*";
84
+ inherits: false;
85
+ }
86
+ @property --tw-inset-shadow-alpha {
87
+ syntax: "<percentage>";
88
+ inherits: false;
89
+ initial-value: 100%;
90
+ }
91
+ @property --tw-ring-color {
92
+ syntax: "*";
93
+ inherits: false;
94
+ }
95
+ @property --tw-ring-shadow {
96
+ syntax: "*";
97
+ inherits: false;
98
+ initial-value: 0 0 #0000;
99
+ }
100
+ @property --tw-inset-ring-color {
101
+ syntax: "*";
102
+ inherits: false;
103
+ }
104
+ @property --tw-inset-ring-shadow {
105
+ syntax: "*";
106
+ inherits: false;
107
+ initial-value: 0 0 #0000;
108
+ }
109
+ @property --tw-ring-inset {
110
+ syntax: "*";
111
+ inherits: false;
112
+ }
113
+ @property --tw-ring-offset-width {
114
+ syntax: "<length>";
115
+ inherits: false;
116
+ initial-value: 0px;
117
+ }
118
+ @property --tw-ring-offset-color {
119
+ syntax: "*";
120
+ inherits: false;
121
+ initial-value: #fff;
122
+ }
123
+ @property --tw-ring-offset-shadow {
124
+ syntax: "*";
125
+ inherits: false;
126
+ initial-value: 0 0 #0000;
127
+ }
128
+ @layer properties {
129
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
130
+ *, ::before, ::after, ::backdrop {
131
+ --tw-border-style: solid;
132
+ --tw-font-weight: initial;
133
+ --tw-shadow: 0 0 #0000;
134
+ --tw-shadow-color: initial;
135
+ --tw-shadow-alpha: 100%;
136
+ --tw-inset-shadow: 0 0 #0000;
137
+ --tw-inset-shadow-color: initial;
138
+ --tw-inset-shadow-alpha: 100%;
139
+ --tw-ring-color: initial;
140
+ --tw-ring-shadow: 0 0 #0000;
141
+ --tw-inset-ring-color: initial;
142
+ --tw-inset-ring-shadow: 0 0 #0000;
143
+ --tw-ring-inset: initial;
144
+ --tw-ring-offset-width: 0px;
145
+ --tw-ring-offset-color: #fff;
146
+ --tw-ring-offset-shadow: 0 0 #0000;
147
+ }
148
+ }
28
149
  }
@@ -1,33 +1,130 @@
1
- @reference '../../../styles/radiant-ui.css';
2
-
1
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
3
  @layer components {
4
- .rui-textarea {
5
- @apply w-full resize-y border border-border bg-background text-on-background outline-none;
6
- border-radius: var(--radius-control);
7
- padding-inline: var(--space-control-x);
8
- padding-block: var(--space-control-y);
9
- font-size: var(--text-control, 0.875rem);
10
- min-height: calc(var(--space-control-y) * 2 + 1.25rem * 3);
11
- transition-duration: var(--duration-normal);
12
- }
13
-
14
- .rui-textarea:focus-visible {
15
- @apply ring-2 ring-focus-ring;
16
- }
17
-
18
- .rui-textarea:disabled {
19
- @apply cursor-not-allowed opacity-disabled;
20
- }
21
-
22
- .rui-textarea[aria-invalid='true'] {
23
- @apply border-error;
24
- }
25
-
26
- .rui-textarea--sm {
27
- min-height: calc(var(--space-control-y) * 2 + 1rem * 2);
28
- }
29
-
30
- .rui-textarea--lg {
31
- min-height: calc(var(--space-control-y) * 2 + 1.25rem * 4);
32
- }
4
+ .rui-textarea {
5
+ width: 100%;
6
+ resize: vertical;
7
+ border-style: var(--tw-border-style);
8
+ border-width: 1px;
9
+ border-color: var(--color-border, var(--border));
10
+ background-color: var(--color-background, var(--background));
11
+ color: var(--color-on-background, var(--on-background));
12
+ --tw-outline-style: none;
13
+ outline-style: none;
14
+ border-radius: var(--radius-control);
15
+ padding-inline: var(--space-control-x);
16
+ padding-block: var(--space-control-y);
17
+ font-size: var(--text-control, 0.875rem);
18
+ min-height: calc(var(--space-control-y) * 2 + 1.25rem * 3);
19
+ transition-duration: var(--duration-normal);
20
+ }
21
+ .rui-textarea:focus-visible {
22
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
23
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
24
+ --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
25
+ }
26
+ .rui-textarea:disabled {
27
+ cursor: not-allowed;
28
+ opacity: var(--opacity-disabled, var(--opacity-disabled));
29
+ }
30
+ .rui-textarea[aria-invalid='true'] {
31
+ border-color: var(--color-error, var(--error));
32
+ }
33
+ .rui-textarea--sm {
34
+ min-height: calc(var(--space-control-y) * 2 + 1rem * 2);
35
+ }
36
+ .rui-textarea--lg {
37
+ min-height: calc(var(--space-control-y) * 2 + 1.25rem * 4);
38
+ }
39
+ }
40
+ @property --tw-border-style {
41
+ syntax: "*";
42
+ inherits: false;
43
+ initial-value: solid;
44
+ }
45
+ @property --tw-shadow {
46
+ syntax: "*";
47
+ inherits: false;
48
+ initial-value: 0 0 #0000;
49
+ }
50
+ @property --tw-shadow-color {
51
+ syntax: "*";
52
+ inherits: false;
53
+ }
54
+ @property --tw-shadow-alpha {
55
+ syntax: "<percentage>";
56
+ inherits: false;
57
+ initial-value: 100%;
58
+ }
59
+ @property --tw-inset-shadow {
60
+ syntax: "*";
61
+ inherits: false;
62
+ initial-value: 0 0 #0000;
63
+ }
64
+ @property --tw-inset-shadow-color {
65
+ syntax: "*";
66
+ inherits: false;
67
+ }
68
+ @property --tw-inset-shadow-alpha {
69
+ syntax: "<percentage>";
70
+ inherits: false;
71
+ initial-value: 100%;
72
+ }
73
+ @property --tw-ring-color {
74
+ syntax: "*";
75
+ inherits: false;
76
+ }
77
+ @property --tw-ring-shadow {
78
+ syntax: "*";
79
+ inherits: false;
80
+ initial-value: 0 0 #0000;
81
+ }
82
+ @property --tw-inset-ring-color {
83
+ syntax: "*";
84
+ inherits: false;
85
+ }
86
+ @property --tw-inset-ring-shadow {
87
+ syntax: "*";
88
+ inherits: false;
89
+ initial-value: 0 0 #0000;
90
+ }
91
+ @property --tw-ring-inset {
92
+ syntax: "*";
93
+ inherits: false;
94
+ }
95
+ @property --tw-ring-offset-width {
96
+ syntax: "<length>";
97
+ inherits: false;
98
+ initial-value: 0px;
99
+ }
100
+ @property --tw-ring-offset-color {
101
+ syntax: "*";
102
+ inherits: false;
103
+ initial-value: #fff;
104
+ }
105
+ @property --tw-ring-offset-shadow {
106
+ syntax: "*";
107
+ inherits: false;
108
+ initial-value: 0 0 #0000;
109
+ }
110
+ @layer properties {
111
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
112
+ *, ::before, ::after, ::backdrop {
113
+ --tw-border-style: solid;
114
+ --tw-shadow: 0 0 #0000;
115
+ --tw-shadow-color: initial;
116
+ --tw-shadow-alpha: 100%;
117
+ --tw-inset-shadow: 0 0 #0000;
118
+ --tw-inset-shadow-color: initial;
119
+ --tw-inset-shadow-alpha: 100%;
120
+ --tw-ring-color: initial;
121
+ --tw-ring-shadow: 0 0 #0000;
122
+ --tw-inset-ring-color: initial;
123
+ --tw-inset-ring-shadow: 0 0 #0000;
124
+ --tw-ring-inset: initial;
125
+ --tw-ring-offset-width: 0px;
126
+ --tw-ring-offset-color: #fff;
127
+ --tw-ring-offset-shadow: 0 0 #0000;
128
+ }
129
+ }
33
130
  }