@srcroot/ui 0.0.55 → 0.0.58

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 (107) hide show
  1. package/README.md +151 -151
  2. package/dist/index.d.ts +0 -0
  3. package/dist/index.js +120 -93
  4. package/package.json +7 -2
  5. package/src/registry/analytics/google-analytics.tsx +36 -39
  6. package/src/registry/analytics/google-tag-manager.tsx +62 -65
  7. package/src/registry/analytics/meta-pixel.tsx +44 -47
  8. package/src/registry/analytics/microsoft-clarity.tsx +31 -34
  9. package/src/registry/analytics/tiktok-pixel.tsx +34 -37
  10. package/src/registry/lib/utils.ts +0 -0
  11. package/src/registry/themes/v3/blue.css +157 -157
  12. package/src/registry/themes/v3/glass.css +153 -153
  13. package/src/registry/themes/v3/gray.css +157 -157
  14. package/src/registry/themes/v3/green.css +157 -157
  15. package/src/registry/themes/v3/neutral.css +157 -157
  16. package/src/registry/themes/v3/orange.css +157 -157
  17. package/src/registry/themes/v3/rose.css +157 -157
  18. package/src/registry/themes/v3/slate.css +157 -157
  19. package/src/registry/themes/v3/stone.css +157 -157
  20. package/src/registry/themes/v3/violet.css +186 -186
  21. package/src/registry/themes/v3/zinc.css +157 -157
  22. package/src/registry/themes/v4/blue.css +184 -184
  23. package/src/registry/themes/v4/glass.css +180 -180
  24. package/src/registry/themes/v4/gray.css +184 -184
  25. package/src/registry/themes/v4/green.css +184 -184
  26. package/src/registry/themes/v4/neutral.css +184 -184
  27. package/src/registry/themes/v4/orange.css +184 -184
  28. package/src/registry/themes/v4/rose.css +184 -184
  29. package/src/registry/themes/v4/slate.css +184 -184
  30. package/src/registry/themes/v4/stone.css +184 -184
  31. package/src/registry/themes/v4/violet.css +184 -184
  32. package/src/registry/themes/v4/zinc.css +184 -184
  33. package/src/registry/ui/accordion.tsx +164 -165
  34. package/src/registry/ui/alert-dialog.tsx +213 -214
  35. package/src/registry/ui/alert.tsx +73 -76
  36. package/src/registry/ui/aspect-ratio.tsx +44 -47
  37. package/src/registry/ui/avatar.tsx +96 -97
  38. package/src/registry/ui/badge.tsx +52 -55
  39. package/src/registry/ui/breadcrumb.tsx +147 -150
  40. package/src/registry/ui/button-group.tsx +64 -67
  41. package/src/registry/ui/button.tsx +71 -72
  42. package/src/registry/ui/calendar.tsx +514 -515
  43. package/src/registry/ui/card.tsx +88 -91
  44. package/src/registry/ui/carousel.tsx +214 -214
  45. package/src/registry/ui/chart.tsx +373 -373
  46. package/src/registry/ui/chatbot.tsx +86 -13
  47. package/src/registry/ui/checkbox.tsx +93 -94
  48. package/src/registry/ui/collapsible.tsx +107 -108
  49. package/src/registry/ui/combobox.tsx +171 -171
  50. package/src/registry/ui/command.tsx +300 -300
  51. package/src/registry/ui/container.tsx +44 -47
  52. package/src/registry/ui/context-menu.tsx +221 -221
  53. package/src/registry/ui/date-picker.tsx +228 -228
  54. package/src/registry/ui/dialog.tsx +269 -270
  55. package/src/registry/ui/drawer.tsx +10 -4
  56. package/src/registry/ui/dropdown-menu.tsx +529 -530
  57. package/src/registry/ui/empty-state.tsx +0 -2
  58. package/src/registry/ui/file-upload.tsx +0 -0
  59. package/src/registry/ui/floating-dock.tsx +0 -0
  60. package/src/registry/ui/form-field.tsx +91 -94
  61. package/src/registry/ui/google-analytics.tsx +38 -0
  62. package/src/registry/ui/google-tag-manager.tsx +64 -0
  63. package/src/registry/ui/hover-card.tsx +223 -223
  64. package/src/registry/ui/image.tsx +144 -147
  65. package/src/registry/ui/input-group.tsx +82 -85
  66. package/src/registry/ui/input.tsx +125 -125
  67. package/src/registry/ui/kbd.tsx +60 -63
  68. package/src/registry/ui/label.tsx +36 -37
  69. package/src/registry/ui/loading-spinner.tsx +108 -111
  70. package/src/registry/ui/map.tsx +0 -0
  71. package/src/registry/ui/marquee.tsx +2 -0
  72. package/src/registry/ui/menubar.tsx +246 -246
  73. package/src/registry/ui/meta-pixel.tsx +46 -0
  74. package/src/registry/ui/microsoft-clarity.tsx +33 -0
  75. package/src/registry/ui/native-select.tsx +49 -52
  76. package/src/registry/ui/otp-input.tsx +163 -155
  77. package/src/registry/ui/pagination.tsx +149 -152
  78. package/src/registry/ui/patterns.tsx +28 -0
  79. package/src/registry/ui/popover.tsx +226 -227
  80. package/src/registry/ui/progress.tsx +51 -52
  81. package/src/registry/ui/radio.tsx +99 -102
  82. package/src/registry/ui/resizable.tsx +314 -314
  83. package/src/registry/ui/scroll-animation.tsx +45 -0
  84. package/src/registry/ui/scroll-area.tsx +121 -122
  85. package/src/registry/ui/scroll-to-top.tsx +0 -0
  86. package/src/registry/ui/search.tsx +162 -150
  87. package/src/registry/ui/select.tsx +292 -293
  88. package/src/registry/ui/separator.tsx +46 -47
  89. package/src/registry/ui/sheet.tsx +6 -3
  90. package/src/registry/ui/sidebar.tsx +628 -628
  91. package/src/registry/ui/skeleton.tsx +26 -29
  92. package/src/registry/ui/slider.tsx +196 -197
  93. package/src/registry/ui/slot.tsx +69 -72
  94. package/src/registry/ui/star-rating.tsx +146 -134
  95. package/src/registry/ui/switch.tsx +72 -73
  96. package/src/registry/ui/table-of-contents.tsx +96 -96
  97. package/src/registry/ui/table.tsx +138 -139
  98. package/src/registry/ui/tabs.tsx +124 -125
  99. package/src/registry/ui/text.tsx +61 -64
  100. package/src/registry/ui/textarea.tsx +41 -42
  101. package/src/registry/ui/theme-switcher.tsx +66 -66
  102. package/src/registry/ui/tiktok-pixel.tsx +36 -0
  103. package/src/registry/ui/toast.tsx +97 -98
  104. package/src/registry/ui/toggle-group.tsx +129 -129
  105. package/src/registry/ui/toggle.tsx +72 -72
  106. package/src/registry/ui/tooltip.tsx +143 -144
  107. package/src/registry/ui/whatsapp.tsx +0 -0
package/src/registry/themes/v4/neutral.css CHANGED
@@ -1,185 +1,185 @@
1
- /**
2
- * @srcroot/ui - Neutral Theme (Tailwind 4)
3
- * A balanced gray with no strong undertones
4
- */
5
-
6
- @import "tailwindcss";
7
-
8
- :root {
9
- --background: hsl(0 0% 100%);
10
- --foreground: hsl(0 0% 3.9%);
11
-
12
- --card: hsl(0 0% 100%);
13
- --card-foreground: hsl(0 0% 3.9%);
14
-
15
- --popover: hsl(0 0% 100%);
16
- --popover-foreground: hsl(0 0% 3.9%);
17
-
18
- --primary: hsl(0 0% 9%);
19
- --primary-foreground: hsl(0 0% 98%);
20
-
21
- --secondary: hsl(0 0% 96.1%);
22
- --secondary-foreground: hsl(0 0% 9%);
23
-
24
- --muted: hsl(0 0% 96.1%);
25
- --muted-foreground: hsl(0 0% 45.1%);
26
-
27
- --accent: hsl(0 0% 96.1%);
28
- --accent-foreground: hsl(0 0% 9%);
29
-
30
- --destructive: hsl(0 84.2% 60.2%);
31
- --destructive-foreground: hsl(0 0% 98%);
32
-
33
- --success: hsl(142.1 76.2% 36.3%);
34
- --success-foreground: hsl(0 0% 98%);
35
-
36
- --warning: hsl(45.4 93.4% 47.5%);
37
- --warning-foreground: hsl(0 0% 9%);
38
-
39
- --info: hsl(201.3 96.3% 32.2%);
40
- --info-foreground: hsl(0 0% 98%);
41
-
42
- --border: hsl(0 0% 89.8%);
43
- --input: hsl(0 0% 89.8%);
44
- --ring: hsl(0 0% 3.9%);
45
-
46
- --radius: 0.5rem;
47
-
48
- --sidebar-width: 16rem;
49
- --sidebar-width-mobile: 18rem;
50
- --sidebar-width-collapsed: 3rem;
51
- --sidebar-width-icon: 3rem;
52
- --header-height: 3.5rem;
53
-
54
- --sidebar-background: hsl(0 0% 98%);
55
- --sidebar-foreground: hsl(0 0% 3.9%);
56
- --sidebar-primary: hsl(0 0% 9%);
57
- --sidebar-primary-foreground: hsl(0 0% 98%);
58
- --sidebar-accent: hsl(0 0% 96.1%);
59
- --sidebar-accent-foreground: hsl(0 0% 9%);
60
- --sidebar-border: hsl(0 0% 89.8%);
61
- --sidebar-ring: hsl(0 0% 3.9%);
62
- }
63
-
64
- @theme inline {
65
- --color-border: var(--border);
66
- --color-input: var(--input);
67
- --color-ring: var(--ring);
68
- --color-background: var(--background);
69
- --color-foreground: var(--foreground);
70
-
71
- --color-primary: var(--primary);
72
- --color-primary-foreground: var(--primary-foreground);
73
-
74
- --color-secondary: var(--secondary);
75
- --color-secondary-foreground: var(--secondary-foreground);
76
-
77
- --color-destructive: var(--destructive);
78
- --color-destructive-foreground: var(--destructive-foreground);
79
-
80
- --color-muted: var(--muted);
81
- --color-muted-foreground: var(--muted-foreground);
82
-
83
- --color-accent: var(--accent);
84
- --color-accent-foreground: var(--accent-foreground);
85
-
86
- --color-popover: var(--popover);
87
- --color-popover-foreground: var(--popover-foreground);
88
-
89
- --color-card: var(--card);
90
- --color-card-foreground: var(--card-foreground);
91
-
92
- --color-sidebar: var(--sidebar-background);
93
- --color-sidebar-foreground: var(--sidebar-foreground);
94
- --color-sidebar-primary: var(--sidebar-primary);
95
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
96
- --color-sidebar-accent: var(--sidebar-accent);
97
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
98
- --color-sidebar-border: var(--sidebar-border);
99
- --color-sidebar-ring: var(--sidebar-ring);
100
-
101
- --radius-lg: var(--radius);
102
- --radius-md: calc(var(--radius) - 2px);
103
- --radius-sm: calc(var(--radius) - 4px);
104
-
105
- --animate-accordion-down: accordion-down 0.2s ease-out;
106
- --animate-accordion-up: accordion-up 0.2s ease-out;
107
-
108
- @keyframes accordion-down {
109
- from {
110
- height: 0;
111
- }
112
-
113
- to {
114
- height: var(--radix-accordion-content-height);
115
- }
116
- }
117
-
118
- @keyframes accordion-up {
119
- from {
120
- height: var(--radix-accordion-content-height);
121
- }
122
-
123
- to {
124
- height: 0;
125
- }
126
- }
127
- }
128
-
129
- .dark {
130
- --background: hsl(0 0% 3.9%);
131
- --foreground: hsl(0 0% 98%);
132
-
133
- --card: hsl(0 0% 3.9%);
134
- --card-foreground: hsl(0 0% 98%);
135
-
136
- --popover: hsl(0 0% 3.9%);
137
- --popover-foreground: hsl(0 0% 98%);
138
-
139
- --primary: hsl(0 0% 98%);
140
- --primary-foreground: hsl(0 0% 9%);
141
-
142
- --secondary: hsl(0 0% 14.9%);
143
- --secondary-foreground: hsl(0 0% 98%);
144
-
145
- --muted: hsl(0 0% 14.9%);
146
- --muted-foreground: hsl(0 0% 63.9%);
147
-
148
- --accent: hsl(0 0% 14.9%);
149
- --accent-foreground: hsl(0 0% 98%);
150
-
151
- --destructive: hsl(0 62.8% 30.6%);
152
- --destructive-foreground: hsl(0 0% 98%);
153
-
154
- --success: hsl(142.1 70.6% 45.3%);
155
- --success-foreground: hsl(0 0% 9%);
156
-
157
- --warning: hsl(48 96.5% 53.1%);
158
- --warning-foreground: hsl(0 0% 9%);
159
-
160
- --info: hsl(199.4 95.5% 53.8%);
161
- --info-foreground: hsl(0 0% 9%);
162
-
163
- --border: hsl(0 0% 14.9%);
164
- --input: hsl(0 0% 14.9%);
165
- --ring: hsl(0 0% 83.1%);
166
-
167
- --sidebar-background: hsl(0 0% 10%);
168
- --sidebar-foreground: hsl(0 0% 98%);
169
- --sidebar-primary: hsl(0 0% 98%);
170
- --sidebar-primary-foreground: hsl(0 0% 9%);
171
- --sidebar-accent: hsl(0 0% 14.9%);
172
- --sidebar-accent-foreground: hsl(0 0% 98%);
173
- --sidebar-border: hsl(0 0% 14.9%);
174
- --sidebar-ring: hsl(0 0% 83.1%);
175
- }
176
-
177
- body {
178
- background: var(--background);
179
- color: var(--foreground);
180
- font-family: Arial, Helvetica, sans-serif;
181
- }
182
-
183
- .bg-gradient-brand {
184
- background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
1
+ /**
2
+ * @srcroot/ui - Neutral Theme (Tailwind 4)
3
+ * A balanced gray with no strong undertones
4
+ */
5
+
6
+ @import "tailwindcss";
7
+
8
+ :root {
9
+ --background: hsl(0 0% 100%);
10
+ --foreground: hsl(0 0% 3.9%);
11
+
12
+ --card: hsl(0 0% 100%);
13
+ --card-foreground: hsl(0 0% 3.9%);
14
+
15
+ --popover: hsl(0 0% 100%);
16
+ --popover-foreground: hsl(0 0% 3.9%);
17
+
18
+ --primary: hsl(0 0% 9%);
19
+ --primary-foreground: hsl(0 0% 98%);
20
+
21
+ --secondary: hsl(0 0% 96.1%);
22
+ --secondary-foreground: hsl(0 0% 9%);
23
+
24
+ --muted: hsl(0 0% 96.1%);
25
+ --muted-foreground: hsl(0 0% 45.1%);
26
+
27
+ --accent: hsl(0 0% 96.1%);
28
+ --accent-foreground: hsl(0 0% 9%);
29
+
30
+ --destructive: hsl(0 84.2% 60.2%);
31
+ --destructive-foreground: hsl(0 0% 98%);
32
+
33
+ --success: hsl(142.1 76.2% 36.3%);
34
+ --success-foreground: hsl(0 0% 98%);
35
+
36
+ --warning: hsl(45.4 93.4% 47.5%);
37
+ --warning-foreground: hsl(0 0% 9%);
38
+
39
+ --info: hsl(201.3 96.3% 32.2%);
40
+ --info-foreground: hsl(0 0% 98%);
41
+
42
+ --border: hsl(0 0% 89.8%);
43
+ --input: hsl(0 0% 89.8%);
44
+ --ring: hsl(0 0% 3.9%);
45
+
46
+ --radius: 0.5rem;
47
+
48
+ --sidebar-width: 16rem;
49
+ --sidebar-width-mobile: 18rem;
50
+ --sidebar-width-collapsed: 3rem;
51
+ --sidebar-width-icon: 3rem;
52
+ --header-height: 3.5rem;
53
+
54
+ --sidebar-background: hsl(0 0% 98%);
55
+ --sidebar-foreground: hsl(0 0% 3.9%);
56
+ --sidebar-primary: hsl(0 0% 9%);
57
+ --sidebar-primary-foreground: hsl(0 0% 98%);
58
+ --sidebar-accent: hsl(0 0% 96.1%);
59
+ --sidebar-accent-foreground: hsl(0 0% 9%);
60
+ --sidebar-border: hsl(0 0% 89.8%);
61
+ --sidebar-ring: hsl(0 0% 3.9%);
62
+ }
63
+
64
+ @theme inline {
65
+ --color-border: var(--border);
66
+ --color-input: var(--input);
67
+ --color-ring: var(--ring);
68
+ --color-background: var(--background);
69
+ --color-foreground: var(--foreground);
70
+
71
+ --color-primary: var(--primary);
72
+ --color-primary-foreground: var(--primary-foreground);
73
+
74
+ --color-secondary: var(--secondary);
75
+ --color-secondary-foreground: var(--secondary-foreground);
76
+
77
+ --color-destructive: var(--destructive);
78
+ --color-destructive-foreground: var(--destructive-foreground);
79
+
80
+ --color-muted: var(--muted);
81
+ --color-muted-foreground: var(--muted-foreground);
82
+
83
+ --color-accent: var(--accent);
84
+ --color-accent-foreground: var(--accent-foreground);
85
+
86
+ --color-popover: var(--popover);
87
+ --color-popover-foreground: var(--popover-foreground);
88
+
89
+ --color-card: var(--card);
90
+ --color-card-foreground: var(--card-foreground);
91
+
92
+ --color-sidebar: var(--sidebar-background);
93
+ --color-sidebar-foreground: var(--sidebar-foreground);
94
+ --color-sidebar-primary: var(--sidebar-primary);
95
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
96
+ --color-sidebar-accent: var(--sidebar-accent);
97
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
98
+ --color-sidebar-border: var(--sidebar-border);
99
+ --color-sidebar-ring: var(--sidebar-ring);
100
+
101
+ --radius-lg: var(--radius);
102
+ --radius-md: calc(var(--radius) - 2px);
103
+ --radius-sm: calc(var(--radius) - 4px);
104
+
105
+ --animate-accordion-down: accordion-down 0.2s ease-out;
106
+ --animate-accordion-up: accordion-up 0.2s ease-out;
107
+
108
+ @keyframes accordion-down {
109
+ from {
110
+ height: 0;
111
+ }
112
+
113
+ to {
114
+ height: var(--radix-accordion-content-height);
115
+ }
116
+ }
117
+
118
+ @keyframes accordion-up {
119
+ from {
120
+ height: var(--radix-accordion-content-height);
121
+ }
122
+
123
+ to {
124
+ height: 0;
125
+ }
126
+ }
127
+ }
128
+
129
+ .dark {
130
+ --background: hsl(0 0% 3.9%);
131
+ --foreground: hsl(0 0% 98%);
132
+
133
+ --card: hsl(0 0% 3.9%);
134
+ --card-foreground: hsl(0 0% 98%);
135
+
136
+ --popover: hsl(0 0% 3.9%);
137
+ --popover-foreground: hsl(0 0% 98%);
138
+
139
+ --primary: hsl(0 0% 98%);
140
+ --primary-foreground: hsl(0 0% 9%);
141
+
142
+ --secondary: hsl(0 0% 14.9%);
143
+ --secondary-foreground: hsl(0 0% 98%);
144
+
145
+ --muted: hsl(0 0% 14.9%);
146
+ --muted-foreground: hsl(0 0% 63.9%);
147
+
148
+ --accent: hsl(0 0% 14.9%);
149
+ --accent-foreground: hsl(0 0% 98%);
150
+
151
+ --destructive: hsl(0 62.8% 30.6%);
152
+ --destructive-foreground: hsl(0 0% 98%);
153
+
154
+ --success: hsl(142.1 70.6% 45.3%);
155
+ --success-foreground: hsl(0 0% 9%);
156
+
157
+ --warning: hsl(48 96.5% 53.1%);
158
+ --warning-foreground: hsl(0 0% 9%);
159
+
160
+ --info: hsl(199.4 95.5% 53.8%);
161
+ --info-foreground: hsl(0 0% 9%);
162
+
163
+ --border: hsl(0 0% 14.9%);
164
+ --input: hsl(0 0% 14.9%);
165
+ --ring: hsl(0 0% 83.1%);
166
+
167
+ --sidebar-background: hsl(0 0% 10%);
168
+ --sidebar-foreground: hsl(0 0% 98%);
169
+ --sidebar-primary: hsl(0 0% 98%);
170
+ --sidebar-primary-foreground: hsl(0 0% 9%);
171
+ --sidebar-accent: hsl(0 0% 14.9%);
172
+ --sidebar-accent-foreground: hsl(0 0% 98%);
173
+ --sidebar-border: hsl(0 0% 14.9%);
174
+ --sidebar-ring: hsl(0 0% 83.1%);
175
+ }
176
+
177
+ body {
178
+ background: var(--background);
179
+ color: var(--foreground);
180
+ font-family: Arial, Helvetica, sans-serif;
181
+ }
182
+
183
+ .bg-gradient-brand {
184
+ background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
185
185
  }