@juv/codego-react-ui 1.0.2 → 1.0.4
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.
- package/README.md +160 -0
- package/dist/index.cjs +488 -336
- package/dist/index.d.cts +27 -5
- package/dist/index.d.ts +27 -5
- package/dist/index.global.js +14850 -0
- package/dist/index.js +477 -328
- package/package.json +8 -5
package/README.md
CHANGED
|
@@ -38,7 +38,167 @@ export default defineConfig({
|
|
|
38
38
|
Then import Tailwind in your main CSS file:
|
|
39
39
|
|
|
40
40
|
```css
|
|
41
|
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');
|
|
41
42
|
@import "tailwindcss";
|
|
43
|
+
@source "../node_modules/@juv/codego-react-ui/dist/index.js";
|
|
44
|
+
|
|
45
|
+
@theme {
|
|
46
|
+
--font-sans: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
47
|
+
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
48
|
+
|
|
49
|
+
--color-background: var(--background);
|
|
50
|
+
--color-foreground: var(--foreground);
|
|
51
|
+
--color-card: var(--card);
|
|
52
|
+
--color-card-foreground: var(--card-foreground);
|
|
53
|
+
--color-popover: var(--popover);
|
|
54
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
55
|
+
--color-primary: var(--primary);
|
|
56
|
+
--color-primary-hover: var(--primary-hover);
|
|
57
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
58
|
+
--color-secondary: var(--secondary);
|
|
59
|
+
--color-secondary-hover: var(--secondary-hover);
|
|
60
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
61
|
+
--color-muted: var(--muted);
|
|
62
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
63
|
+
--color-accent: var(--accent);
|
|
64
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
65
|
+
--color-destructive: var(--destructive);
|
|
66
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
67
|
+
--color-border: var(--border);
|
|
68
|
+
--color-input: var(--input);
|
|
69
|
+
--color-ring: var(--ring);
|
|
70
|
+
--color-info: var(--info);
|
|
71
|
+
--color-info-hover: var(--info-hover);
|
|
72
|
+
--color-info-foreground: var(--info-foreground);
|
|
73
|
+
--color-warning: var(--warning);
|
|
74
|
+
--color-warning-hover: var(--warning-hover);
|
|
75
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
76
|
+
--color-danger: var(--danger);
|
|
77
|
+
--color-danger-hover: var(--danger-hover);
|
|
78
|
+
--color-danger-foreground: var(--danger-foreground);
|
|
79
|
+
--color-success: var(--success);
|
|
80
|
+
--color-success-hover: var(--success-hover);
|
|
81
|
+
--color-success-foreground: var(--success-foreground);
|
|
82
|
+
--radius: var(--radius);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@layer base {
|
|
86
|
+
:root {
|
|
87
|
+
--background: #ffffff;
|
|
88
|
+
--foreground: #09090b;
|
|
89
|
+
--card: #ffffff;
|
|
90
|
+
--card-foreground: #09090b;
|
|
91
|
+
--popover: #ffffff;
|
|
92
|
+
--popover-foreground: #09090b;
|
|
93
|
+
--primary: #6366f1; /* Indigo 500 */
|
|
94
|
+
--primary-hover: #4f46e5;
|
|
95
|
+
--primary-foreground: #ffffff;
|
|
96
|
+
--secondary: #f4f4f5;
|
|
97
|
+
--secondary-hover: #e4e4e7;
|
|
98
|
+
--secondary-foreground: #18181b;
|
|
99
|
+
--info: #3b82f6; /* Blue 500 */
|
|
100
|
+
--info-hover: #2563eb;
|
|
101
|
+
--info-foreground: #ffffff;
|
|
102
|
+
--warning: #f59e0b; /* Amber 500 */
|
|
103
|
+
--warning-hover: #d97706;
|
|
104
|
+
--warning-foreground: #ffffff;
|
|
105
|
+
--danger: #ef4444; /* Red 500 */
|
|
106
|
+
--danger-hover: #dc2626;
|
|
107
|
+
--danger-foreground: #ffffff;
|
|
108
|
+
--success: #22c55e; /* Green 500 */
|
|
109
|
+
--success-hover: #16a34a;
|
|
110
|
+
--success-foreground: #ffffff;
|
|
111
|
+
--muted: #f4f4f5;
|
|
112
|
+
--muted-foreground: #71717a;
|
|
113
|
+
--accent: #f4f4f5;
|
|
114
|
+
--accent-foreground: #18181b;
|
|
115
|
+
--destructive: #ef4444;
|
|
116
|
+
--destructive-foreground: #ffffff;
|
|
117
|
+
--border: #e4e4e7;
|
|
118
|
+
--input: #e4e4e7;
|
|
119
|
+
--ring: var(--primary);
|
|
120
|
+
--radius: 0.75rem;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.dark {
|
|
124
|
+
--background: #030303; /* Deep black */
|
|
125
|
+
--foreground: #ededed;
|
|
126
|
+
--card: #0a0a0a; /* Slightly lighter black */
|
|
127
|
+
--card-foreground: #ededed;
|
|
128
|
+
--popover: #0a0a0a;
|
|
129
|
+
--popover-foreground: #ededed;
|
|
130
|
+
--primary: #8b5cf6; /* Neon Violet */
|
|
131
|
+
--primary-hover: #7c3aed;
|
|
132
|
+
--primary-foreground: #ffffff;
|
|
133
|
+
--secondary: #171717;
|
|
134
|
+
--secondary-hover: #262626;
|
|
135
|
+
--secondary-foreground: #ededed;
|
|
136
|
+
--info: #3b82f6;
|
|
137
|
+
--info-hover: #2563eb;
|
|
138
|
+
--info-foreground: #ffffff;
|
|
139
|
+
--warning: #f59e0b;
|
|
140
|
+
--warning-hover: #d97706;
|
|
141
|
+
--warning-foreground: #ffffff;
|
|
142
|
+
--danger: #ef4444;
|
|
143
|
+
--danger-hover: #dc2626;
|
|
144
|
+
--danger-foreground: #ffffff;
|
|
145
|
+
--success: #22c55e;
|
|
146
|
+
--success-hover: #16a34a;
|
|
147
|
+
--success-foreground: #ffffff;
|
|
148
|
+
--muted: #171717;
|
|
149
|
+
--muted-foreground: #a1a1aa;
|
|
150
|
+
--accent: #1f1f2e; /* Subtle purple tint */
|
|
151
|
+
--accent-foreground: #c4b5fd;
|
|
152
|
+
--destructive: #7f1d1d;
|
|
153
|
+
--destructive-foreground: #ededed;
|
|
154
|
+
--border: #1f1f1f;
|
|
155
|
+
--input: #1f1f1f;
|
|
156
|
+
--ring: var(--primary);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
@layer base {
|
|
161
|
+
* {
|
|
162
|
+
@apply border-border;
|
|
163
|
+
}
|
|
164
|
+
body {
|
|
165
|
+
@apply bg-background text-foreground;
|
|
166
|
+
font-feature-settings: "rlig" 1, "calt" 1;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
@layer utilities {
|
|
171
|
+
.glass {
|
|
172
|
+
@apply bg-background/60 backdrop-blur-xl border border-white/10;
|
|
173
|
+
}
|
|
174
|
+
.dark .glass {
|
|
175
|
+
@apply bg-black/40 border-white/5;
|
|
176
|
+
}
|
|
177
|
+
.text-gradient {
|
|
178
|
+
background: linear-gradient(to right, var(--primary), var(--info));
|
|
179
|
+
-webkit-background-clip: text;
|
|
180
|
+
-webkit-text-fill-color: transparent;
|
|
181
|
+
background-clip: text;
|
|
182
|
+
}
|
|
183
|
+
.glow {
|
|
184
|
+
box-shadow: 0 0 20px -5px var(--primary);
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
/* Hide calendar icon (Chrome, Edge, Safari) */
|
|
188
|
+
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
|
|
189
|
+
display: none;
|
|
190
|
+
-webkit-appearance: none;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* Optional: remove clear (X) button */
|
|
194
|
+
input[type="datetime-local"]::-webkit-clear-button {
|
|
195
|
+
display: none;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* Optional: remove spin buttons */
|
|
199
|
+
input[type="datetime-local"]::-webkit-inner-spin-button {
|
|
200
|
+
display: none;
|
|
201
|
+
}
|
|
42
202
|
```
|
|
43
203
|
|
|
44
204
|
### 3. Lucide React (icons)
|