@jixic/react-ui 0.1.0

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 (11) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/LICENSE +21 -0
  3. package/README.md +29 -0
  4. package/dist/index.cjs +351 -0
  5. package/dist/index.cjs.map +1 -0
  6. package/dist/index.d.cts +106 -0
  7. package/dist/index.d.ts +106 -0
  8. package/dist/index.js +316 -0
  9. package/dist/index.js.map +1 -0
  10. package/dist/styles.css +424 -0
  11. package/package.json +60 -0
package/dist/styles.css ADDED
@@ -0,0 +1,424 @@
1
+ :root {
2
+ color-scheme: light;
3
+ --ui-font-family:
4
+ Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
5
+ --ui-font-size-sm: 0.875rem;
6
+ --ui-font-size-md: 1rem;
7
+ --ui-font-size-lg: 1.125rem;
8
+ --ui-line-height: 1.5;
9
+ --ui-space-1: 0.25rem;
10
+ --ui-space-2: 0.5rem;
11
+ --ui-space-3: 0.75rem;
12
+ --ui-space-4: 1rem;
13
+ --ui-space-5: 1.25rem;
14
+ --ui-space-6: 1.5rem;
15
+ --ui-space-8: 2rem;
16
+ --ui-radius-sm: 0.375rem;
17
+ --ui-radius-md: 0.5rem;
18
+ --ui-radius-lg: 0.75rem;
19
+ --ui-shadow-md: 0 16px 40px rgb(15 23 42 / 14%);
20
+ --ui-color-background: #ffffff;
21
+ --ui-color-foreground: #101828;
22
+ --ui-color-surface: #ffffff;
23
+ --ui-color-surface-raised: #f8fafc;
24
+ --ui-color-border: #d0d5dd;
25
+ --ui-color-primary: #175cd3;
26
+ --ui-color-primary-hover: #1849a9;
27
+ --ui-color-primary-foreground: #ffffff;
28
+ --ui-color-danger: #b42318;
29
+ --ui-color-danger-foreground: #ffffff;
30
+ --ui-color-success: #067647;
31
+ --ui-color-success-foreground: #ffffff;
32
+ --ui-color-warning: #93370d;
33
+ --ui-color-warning-foreground: #ffffff;
34
+ --ui-color-muted: #f2f4f7;
35
+ --ui-color-muted-foreground: #475467;
36
+ --ui-color-info-surface: #eff8ff;
37
+ --ui-color-info-border: #84caff;
38
+ --ui-color-success-surface: #ecfdf3;
39
+ --ui-color-success-border: #75e0a7;
40
+ --ui-color-warning-surface: #fffaeb;
41
+ --ui-color-warning-border: #fdb022;
42
+ --ui-color-danger-surface: #fef3f2;
43
+ --ui-color-danger-border: #f97066;
44
+ --ui-focus-ring: 0 0 0 3px rgb(23 92 211 / 28%);
45
+ }
46
+
47
+ [data-ui-theme="dark"] {
48
+ color-scheme: dark;
49
+ --ui-color-background: #0b1220;
50
+ --ui-color-foreground: #f8fafc;
51
+ --ui-color-surface: #111827;
52
+ --ui-color-surface-raised: #1f2937;
53
+ --ui-color-border: #475467;
54
+ --ui-color-primary: #84caff;
55
+ --ui-color-primary-hover: #b2ddff;
56
+ --ui-color-primary-foreground: #062c41;
57
+ --ui-color-danger: #f97066;
58
+ --ui-color-danger-foreground: #3b0a05;
59
+ --ui-color-success: #75e0a7;
60
+ --ui-color-success-foreground: #042f1a;
61
+ --ui-color-warning: #fdb022;
62
+ --ui-color-warning-foreground: #431407;
63
+ --ui-color-muted: #1f2937;
64
+ --ui-color-muted-foreground: #d0d5dd;
65
+ --ui-color-info-surface: #062c41;
66
+ --ui-color-info-border: #2e90fa;
67
+ --ui-color-success-surface: #053321;
68
+ --ui-color-success-border: #17b26a;
69
+ --ui-color-warning-surface: #431407;
70
+ --ui-color-warning-border: #dc6803;
71
+ --ui-color-danger-surface: #55160c;
72
+ --ui-color-danger-border: #d92d20;
73
+ --ui-focus-ring: 0 0 0 3px rgb(132 202 255 / 36%);
74
+ }
75
+
76
+ .ui-button {
77
+ align-items: center;
78
+ border: 1px solid transparent;
79
+ border-radius: var(--ui-radius-md);
80
+ cursor: pointer;
81
+ display: inline-flex;
82
+ font-family: var(--ui-font-family);
83
+ font-size: var(--ui-font-size-md);
84
+ font-weight: 600;
85
+ gap: var(--ui-space-2);
86
+ justify-content: center;
87
+ line-height: 1.25;
88
+ min-height: 2.5rem;
89
+ padding: 0.625rem 1rem;
90
+ transition:
91
+ background-color 120ms ease,
92
+ border-color 120ms ease,
93
+ color 120ms ease,
94
+ box-shadow 120ms ease;
95
+ }
96
+
97
+ .ui-button:focus-visible,
98
+ .ui-input:focus-visible,
99
+ .ui-modal-close:focus-visible {
100
+ box-shadow: var(--ui-focus-ring);
101
+ outline: none;
102
+ }
103
+
104
+ .ui-button:disabled,
105
+ .ui-button[data-loading="true"],
106
+ .ui-input:disabled {
107
+ cursor: not-allowed;
108
+ opacity: 0.62;
109
+ }
110
+
111
+ .ui-button-primary {
112
+ background: var(--ui-color-primary);
113
+ color: var(--ui-color-primary-foreground);
114
+ }
115
+
116
+ .ui-button-primary:hover:not(:disabled) {
117
+ background: var(--ui-color-primary-hover);
118
+ }
119
+
120
+ .ui-button-secondary {
121
+ background: var(--ui-color-surface);
122
+ border-color: var(--ui-color-border);
123
+ color: var(--ui-color-foreground);
124
+ }
125
+
126
+ .ui-button-secondary:hover:not(:disabled) {
127
+ background: var(--ui-color-muted);
128
+ }
129
+
130
+ .ui-button-ghost {
131
+ background: transparent;
132
+ color: var(--ui-color-foreground);
133
+ }
134
+
135
+ .ui-button-ghost:hover:not(:disabled) {
136
+ background: var(--ui-color-muted);
137
+ }
138
+
139
+ .ui-button-danger {
140
+ background: var(--ui-color-danger);
141
+ color: var(--ui-color-danger-foreground);
142
+ }
143
+
144
+ .ui-button-sm {
145
+ font-size: var(--ui-font-size-sm);
146
+ min-height: 2rem;
147
+ padding: 0.375rem 0.75rem;
148
+ }
149
+
150
+ .ui-button-lg {
151
+ font-size: var(--ui-font-size-lg);
152
+ min-height: 3rem;
153
+ padding: 0.75rem 1.25rem;
154
+ }
155
+
156
+ .ui-input-field {
157
+ display: grid;
158
+ gap: var(--ui-space-2);
159
+ width: 100%;
160
+ }
161
+
162
+ .ui-label {
163
+ color: var(--ui-color-foreground);
164
+ font-family: var(--ui-font-family);
165
+ font-size: var(--ui-font-size-sm);
166
+ font-weight: 600;
167
+ }
168
+
169
+ .ui-input {
170
+ background: var(--ui-color-surface);
171
+ border: 1px solid var(--ui-color-border);
172
+ border-radius: var(--ui-radius-md);
173
+ color: var(--ui-color-foreground);
174
+ font-family: var(--ui-font-family);
175
+ font-size: var(--ui-font-size-md);
176
+ line-height: var(--ui-line-height);
177
+ min-height: 2.5rem;
178
+ padding: 0.5rem 0.75rem;
179
+ width: 100%;
180
+ }
181
+
182
+ .ui-input::placeholder {
183
+ color: var(--ui-color-muted-foreground);
184
+ }
185
+
186
+ .ui-input-error {
187
+ border-color: var(--ui-color-danger);
188
+ }
189
+
190
+ .ui-field-help,
191
+ .ui-field-error {
192
+ font-family: var(--ui-font-family);
193
+ font-size: var(--ui-font-size-sm);
194
+ }
195
+
196
+ .ui-field-help {
197
+ color: var(--ui-color-muted-foreground);
198
+ }
199
+
200
+ .ui-field-error {
201
+ color: var(--ui-color-danger);
202
+ }
203
+
204
+ .ui-card {
205
+ background: var(--ui-color-surface);
206
+ border: 1px solid var(--ui-color-border);
207
+ border-radius: var(--ui-radius-lg);
208
+ color: var(--ui-color-foreground);
209
+ font-family: var(--ui-font-family);
210
+ overflow: hidden;
211
+ }
212
+
213
+ .ui-card-header,
214
+ .ui-card-content,
215
+ .ui-card-footer {
216
+ padding: var(--ui-space-5);
217
+ }
218
+
219
+ .ui-card-header {
220
+ border-bottom: 1px solid var(--ui-color-border);
221
+ }
222
+
223
+ .ui-card-footer {
224
+ border-top: 1px solid var(--ui-color-border);
225
+ }
226
+
227
+ .ui-badge {
228
+ align-items: center;
229
+ border: 1px solid transparent;
230
+ border-radius: 999px;
231
+ display: inline-flex;
232
+ font-family: var(--ui-font-family);
233
+ font-size: 0.75rem;
234
+ font-weight: 700;
235
+ gap: var(--ui-space-1);
236
+ line-height: 1;
237
+ padding: 0.25rem 0.5rem;
238
+ }
239
+
240
+ .ui-badge-neutral {
241
+ background: var(--ui-color-muted);
242
+ border-color: var(--ui-color-border);
243
+ color: var(--ui-color-foreground);
244
+ }
245
+
246
+ .ui-badge-success {
247
+ background: var(--ui-color-success-surface);
248
+ border-color: var(--ui-color-success-border);
249
+ color: var(--ui-color-success);
250
+ }
251
+
252
+ .ui-badge-warning {
253
+ background: var(--ui-color-warning-surface);
254
+ border-color: var(--ui-color-warning-border);
255
+ color: var(--ui-color-warning);
256
+ }
257
+
258
+ .ui-badge-danger {
259
+ background: var(--ui-color-danger-surface);
260
+ border-color: var(--ui-color-danger-border);
261
+ color: var(--ui-color-danger);
262
+ }
263
+
264
+ .ui-alert {
265
+ border: 1px solid;
266
+ border-radius: var(--ui-radius-lg);
267
+ display: grid;
268
+ font-family: var(--ui-font-family);
269
+ gap: var(--ui-space-1);
270
+ padding: var(--ui-space-4);
271
+ }
272
+
273
+ .ui-alert-title {
274
+ font-weight: 700;
275
+ }
276
+
277
+ .ui-alert-info {
278
+ background: var(--ui-color-info-surface);
279
+ border-color: var(--ui-color-info-border);
280
+ color: var(--ui-color-foreground);
281
+ }
282
+
283
+ .ui-alert-success {
284
+ background: var(--ui-color-success-surface);
285
+ border-color: var(--ui-color-success-border);
286
+ color: var(--ui-color-foreground);
287
+ }
288
+
289
+ .ui-alert-warning {
290
+ background: var(--ui-color-warning-surface);
291
+ border-color: var(--ui-color-warning-border);
292
+ color: var(--ui-color-foreground);
293
+ }
294
+
295
+ .ui-alert-danger {
296
+ background: var(--ui-color-danger-surface);
297
+ border-color: var(--ui-color-danger-border);
298
+ color: var(--ui-color-foreground);
299
+ }
300
+
301
+ .ui-modal-overlay {
302
+ align-items: center;
303
+ background: rgb(2 6 23 / 66%);
304
+ display: flex;
305
+ inset: 0;
306
+ justify-content: center;
307
+ padding: var(--ui-space-4);
308
+ position: fixed;
309
+ z-index: 1000;
310
+ }
311
+
312
+ .ui-modal {
313
+ background: var(--ui-color-surface);
314
+ border: 1px solid var(--ui-color-border);
315
+ border-radius: var(--ui-radius-lg);
316
+ box-shadow: var(--ui-shadow-md);
317
+ color: var(--ui-color-foreground);
318
+ font-family: var(--ui-font-family);
319
+ max-height: min(90vh, 48rem);
320
+ max-width: 36rem;
321
+ overflow: auto;
322
+ width: min(100%, 36rem);
323
+ }
324
+
325
+ .ui-modal-header {
326
+ align-items: center;
327
+ border-bottom: 1px solid var(--ui-color-border);
328
+ display: flex;
329
+ gap: var(--ui-space-4);
330
+ justify-content: space-between;
331
+ padding: var(--ui-space-5);
332
+ }
333
+
334
+ .ui-modal-title {
335
+ font-size: var(--ui-font-size-lg);
336
+ font-weight: 700;
337
+ margin: 0;
338
+ }
339
+
340
+ .ui-modal-body {
341
+ padding: var(--ui-space-5);
342
+ }
343
+
344
+ .ui-modal-close {
345
+ align-items: center;
346
+ background: transparent;
347
+ border: 0;
348
+ border-radius: var(--ui-radius-sm);
349
+ color: var(--ui-color-foreground);
350
+ cursor: pointer;
351
+ display: inline-flex;
352
+ font-size: 1.25rem;
353
+ height: 2rem;
354
+ justify-content: center;
355
+ width: 2rem;
356
+ }
357
+
358
+ .ui-spinner {
359
+ animation: ui-spin 850ms linear infinite;
360
+ border: 2px solid var(--ui-color-border);
361
+ border-radius: 999px;
362
+ border-top-color: var(--ui-color-primary);
363
+ display: inline-block;
364
+ height: 1.25rem;
365
+ width: 1.25rem;
366
+ }
367
+
368
+ .ui-spinner-sm {
369
+ height: 1rem;
370
+ width: 1rem;
371
+ }
372
+
373
+ .ui-spinner-lg {
374
+ height: 2rem;
375
+ width: 2rem;
376
+ }
377
+
378
+ @keyframes ui-spin {
379
+ to {
380
+ transform: rotate(360deg);
381
+ }
382
+ }
383
+
384
+ .ui-skeleton {
385
+ animation: ui-pulse 1.2s ease-in-out infinite;
386
+ background: linear-gradient(
387
+ 90deg,
388
+ var(--ui-color-muted),
389
+ var(--ui-color-surface-raised),
390
+ var(--ui-color-muted)
391
+ );
392
+ background-size: 200% 100%;
393
+ border-radius: var(--ui-radius-md);
394
+ display: block;
395
+ }
396
+
397
+ @keyframes ui-pulse {
398
+ to {
399
+ background-position: -200% 0;
400
+ }
401
+ }
402
+
403
+ .ui-empty-state {
404
+ align-items: center;
405
+ color: var(--ui-color-foreground);
406
+ display: grid;
407
+ font-family: var(--ui-font-family);
408
+ gap: var(--ui-space-3);
409
+ justify-items: center;
410
+ padding: var(--ui-space-8);
411
+ text-align: center;
412
+ }
413
+
414
+ .ui-empty-state-title {
415
+ font-size: var(--ui-font-size-lg);
416
+ font-weight: 700;
417
+ margin: 0;
418
+ }
419
+
420
+ .ui-empty-state-description {
421
+ color: var(--ui-color-muted-foreground);
422
+ margin: 0;
423
+ max-width: 42rem;
424
+ }
package/package.json ADDED
@@ -0,0 +1,60 @@
1
+ {
2
+ "name": "@jixic/react-ui",
3
+ "version": "0.1.0",
4
+ "description": "A production-ready React UI component library for web and Next.js applications.",
5
+ "license": "MIT",
6
+ "type": "module",
7
+ "sideEffects": [
8
+ "**/*.css",
9
+ "dist/styles.css"
10
+ ],
11
+ "files": [
12
+ "dist",
13
+ "README.md",
14
+ "CHANGELOG.md",
15
+ "LICENSE"
16
+ ],
17
+ "main": "./dist/index.cjs",
18
+ "module": "./dist/index.js",
19
+ "types": "./dist/index.d.ts",
20
+ "exports": {
21
+ ".": {
22
+ "types": "./dist/index.d.ts",
23
+ "import": "./dist/index.js",
24
+ "require": "./dist/index.cjs"
25
+ },
26
+ "./styles.css": "./dist/styles.css",
27
+ "./package.json": "./package.json"
28
+ },
29
+ "scripts": {
30
+ "build": "tsup && node scripts/copy-css.mjs",
31
+ "clean": "rm -rf dist",
32
+ "lint": "eslint .",
33
+ "test": "vitest run --coverage=false",
34
+ "typecheck": "tsc --noEmit -p tsconfig.json"
35
+ },
36
+ "peerDependencies": {
37
+ "react": ">=18.2.0 || >=19.0.0",
38
+ "react-dom": ">=18.2.0 || >=19.0.0"
39
+ },
40
+ "devDependencies": {
41
+ "@repo/eslint-config": "workspace:*",
42
+ "@repo/tsconfig": "workspace:*",
43
+ "@testing-library/jest-dom": "^6.6.3",
44
+ "@testing-library/react": "^16.1.0",
45
+ "@testing-library/user-event": "^14.5.2",
46
+ "@types/react": "^19.0.2",
47
+ "@types/react-dom": "^19.0.2",
48
+ "@vitejs/plugin-react": "^4.3.4",
49
+ "eslint": "^9.17.0",
50
+ "jsdom": "^25.0.1",
51
+ "react": "^19.0.0",
52
+ "react-dom": "^19.0.0",
53
+ "tsup": "^8.3.5",
54
+ "typescript": "^5.7.3",
55
+ "vitest": "^2.1.8"
56
+ },
57
+ "publishConfig": {
58
+ "access": "public"
59
+ }
60
+ }