soongle-ui 0.1.1 → 0.1.3

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/dist/styles.css CHANGED
@@ -7,42 +7,47 @@
7
7
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
8
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
9
  "Courier New", monospace;
10
+ --color-red-600: oklch(57.7% 0.245 27.325);
11
+ --color-red-700: oklch(50.5% 0.213 27.518);
12
+ --color-green-600: oklch(62.7% 0.194 149.214);
13
+ --color-green-700: oklch(52.7% 0.154 150.069);
14
+ --color-emerald-600: oklch(59.6% 0.145 163.225);
15
+ --color-blue-600: oklch(54.6% 0.245 262.881);
16
+ --color-blue-700: oklch(48.8% 0.243 264.376);
17
+ --color-gray-100: oklch(96.7% 0.003 264.542);
18
+ --color-gray-200: oklch(92.8% 0.006 264.531);
19
+ --color-gray-300: oklch(87.2% 0.01 258.338);
20
+ --color-gray-500: oklch(55.1% 0.027 264.364);
21
+ --color-gray-700: oklch(37.3% 0.034 259.733);
22
+ --color-gray-900: oklch(21% 0.034 264.665);
10
23
  --color-white: #fff;
11
24
  --spacing: 0.25rem;
25
+ --text-xs: 0.75rem;
26
+ --text-xs--line-height: calc(1 / 0.75);
12
27
  --text-sm: 0.875rem;
13
28
  --text-sm--line-height: calc(1.25 / 0.875);
14
29
  --text-base: 1rem;
15
30
  --text-base--line-height: calc(1.5 / 1);
16
31
  --text-lg: 1.125rem;
17
32
  --text-lg--line-height: calc(1.75 / 1.125);
33
+ --text-xl: 1.25rem;
34
+ --text-xl--line-height: calc(1.75 / 1.25);
35
+ --text-2xl: 1.5rem;
36
+ --text-2xl--line-height: calc(2 / 1.5);
37
+ --text-3xl: 1.875rem;
38
+ --text-3xl--line-height: calc(2.25 / 1.875);
39
+ --text-4xl: 2.25rem;
40
+ --text-4xl--line-height: calc(2.5 / 2.25);
41
+ --font-weight-light: 300;
42
+ --font-weight-normal: 400;
18
43
  --font-weight-medium: 500;
44
+ --font-weight-semibold: 600;
45
+ --font-weight-bold: 700;
19
46
  --radius-md: 0.375rem;
20
47
  --default-transition-duration: 150ms;
21
48
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
22
49
  --default-font-family: var(--font-sans);
23
50
  --default-mono-font-family: var(--font-mono);
24
- --color-primary-50: #eff6ff;
25
- --color-primary-100: #dbeafe;
26
- --color-primary-500: #3b82f6;
27
- --color-primary-600: #2563eb;
28
- --color-primary-700: #1d4ed8;
29
- --color-primary-800: #1e40af;
30
- --color-secondary-500: #64748b;
31
- --color-secondary-600: #475569;
32
- --color-secondary-700: #334155;
33
- --color-secondary-800: #1e293b;
34
- --color-success-500: #22c55e;
35
- --color-success-600: #16a34a;
36
- --color-success-700: #15803d;
37
- --color-success-800: #166534;
38
- --color-warning-500: #f59e0b;
39
- --color-warning-600: #d97706;
40
- --color-warning-700: #b45309;
41
- --color-warning-800: #92400e;
42
- --color-error-500: #ef4444;
43
- --color-error-600: #dc2626;
44
- --color-error-700: #b91c1c;
45
- --color-error-800: #991b1b;
46
51
  }
47
52
  }
48
53
  @layer base {
@@ -194,17 +199,17 @@
194
199
  }
195
200
  }
196
201
  @layer utilities {
202
+ .flex {
203
+ display: flex;
204
+ }
197
205
  .inline-flex {
198
206
  display: inline-flex;
199
207
  }
200
- .h-9 {
201
- height: calc(var(--spacing) * 9);
202
- }
203
- .h-10 {
204
- height: calc(var(--spacing) * 10);
208
+ .cursor-pointer {
209
+ cursor: pointer;
205
210
  }
206
- .h-11 {
207
- height: calc(var(--spacing) * 11);
211
+ .flex-col {
212
+ flex-direction: column;
208
213
  }
209
214
  .items-center {
210
215
  align-items: center;
@@ -212,30 +217,29 @@
212
217
  .justify-center {
213
218
  justify-content: center;
214
219
  }
215
- .rounded-md {
216
- border-radius: var(--radius-md);
220
+ .gap-2 {
221
+ gap: calc(var(--spacing) * 2);
217
222
  }
218
- .border-2 {
219
- border-style: var(--tw-border-style);
220
- border-width: 2px;
223
+ .gap-4 {
224
+ gap: calc(var(--spacing) * 4);
221
225
  }
222
- .border-primary-600 {
223
- border-color: var(--color-primary-600);
226
+ .rounded-md {
227
+ border-radius: var(--radius-md);
224
228
  }
225
- .bg-error-600 {
226
- background-color: var(--color-error-600);
229
+ .bg-blue-600 {
230
+ background-color: var(--color-blue-600);
227
231
  }
228
- .bg-primary-600 {
229
- background-color: var(--color-primary-600);
232
+ .bg-gray-200 {
233
+ background-color: var(--color-gray-200);
230
234
  }
231
- .bg-secondary-600 {
232
- background-color: var(--color-secondary-600);
235
+ .bg-green-600 {
236
+ background-color: var(--color-green-600);
233
237
  }
234
- .bg-success-600 {
235
- background-color: var(--color-success-600);
238
+ .bg-red-600 {
239
+ background-color: var(--color-red-600);
236
240
  }
237
- .bg-warning-600 {
238
- background-color: var(--color-warning-600);
241
+ .bg-transparent {
242
+ background-color: transparent;
239
243
  }
240
244
  .px-3 {
241
245
  padding-inline: calc(var(--spacing) * 3);
@@ -246,6 +250,36 @@
246
250
  .px-6 {
247
251
  padding-inline: calc(var(--spacing) * 6);
248
252
  }
253
+ .py-1\.5 {
254
+ padding-block: calc(var(--spacing) * 1.5);
255
+ }
256
+ .py-2 {
257
+ padding-block: calc(var(--spacing) * 2);
258
+ }
259
+ .py-3 {
260
+ padding-block: calc(var(--spacing) * 3);
261
+ }
262
+ .text-center {
263
+ text-align: center;
264
+ }
265
+ .text-left {
266
+ text-align: left;
267
+ }
268
+ .text-right {
269
+ text-align: right;
270
+ }
271
+ .text-2xl {
272
+ font-size: var(--text-2xl);
273
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
274
+ }
275
+ .text-3xl {
276
+ font-size: var(--text-3xl);
277
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
278
+ }
279
+ .text-4xl {
280
+ font-size: var(--text-4xl);
281
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
282
+ }
249
283
  .text-base {
250
284
  font-size: var(--text-base);
251
285
  line-height: var(--tw-leading, var(--text-base--line-height));
@@ -258,64 +292,99 @@
258
292
  font-size: var(--text-sm);
259
293
  line-height: var(--tw-leading, var(--text-sm--line-height));
260
294
  }
295
+ .text-xl {
296
+ font-size: var(--text-xl);
297
+ line-height: var(--tw-leading, var(--text-xl--line-height));
298
+ }
299
+ .text-xs {
300
+ font-size: var(--text-xs);
301
+ line-height: var(--tw-leading, var(--text-xs--line-height));
302
+ }
303
+ .leading-none {
304
+ --tw-leading: 1;
305
+ line-height: 1;
306
+ }
307
+ .font-bold {
308
+ --tw-font-weight: var(--font-weight-bold);
309
+ font-weight: var(--font-weight-bold);
310
+ }
311
+ .font-light {
312
+ --tw-font-weight: var(--font-weight-light);
313
+ font-weight: var(--font-weight-light);
314
+ }
261
315
  .font-medium {
262
316
  --tw-font-weight: var(--font-weight-medium);
263
317
  font-weight: var(--font-weight-medium);
264
318
  }
265
- .text-primary-600 {
266
- color: var(--color-primary-600);
319
+ .font-normal {
320
+ --tw-font-weight: var(--font-weight-normal);
321
+ font-weight: var(--font-weight-normal);
322
+ }
323
+ .font-semibold {
324
+ --tw-font-weight: var(--font-weight-semibold);
325
+ font-weight: var(--font-weight-semibold);
326
+ }
327
+ .text-blue-600 {
328
+ color: var(--color-blue-600);
329
+ }
330
+ .text-emerald-600 {
331
+ color: var(--color-emerald-600);
332
+ }
333
+ .text-gray-500 {
334
+ color: var(--color-gray-500);
335
+ }
336
+ .text-gray-700 {
337
+ color: var(--color-gray-700);
338
+ }
339
+ .text-gray-900 {
340
+ color: var(--color-gray-900);
341
+ }
342
+ .text-green-600 {
343
+ color: var(--color-green-600);
344
+ }
345
+ .text-red-600 {
346
+ color: var(--color-red-600);
267
347
  }
268
348
  .text-white {
269
349
  color: var(--color-white);
270
350
  }
271
- .outline {
272
- outline-style: var(--tw-outline-style);
273
- outline-width: 1px;
274
- }
275
351
  .transition-colors {
276
352
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
277
353
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
278
354
  transition-duration: var(--tw-duration, var(--default-transition-duration));
279
355
  }
280
- .hover\:bg-error-700 {
281
- &:hover {
282
- @media (hover: hover) {
283
- background-color: var(--color-error-700);
284
- }
285
- }
286
- }
287
- .hover\:bg-primary-50 {
356
+ .hover\:bg-blue-700 {
288
357
  &:hover {
289
358
  @media (hover: hover) {
290
- background-color: var(--color-primary-50);
359
+ background-color: var(--color-blue-700);
291
360
  }
292
361
  }
293
362
  }
294
- .hover\:bg-primary-700 {
363
+ .hover\:bg-gray-100 {
295
364
  &:hover {
296
365
  @media (hover: hover) {
297
- background-color: var(--color-primary-700);
366
+ background-color: var(--color-gray-100);
298
367
  }
299
368
  }
300
369
  }
301
- .hover\:bg-secondary-700 {
370
+ .hover\:bg-gray-300 {
302
371
  &:hover {
303
372
  @media (hover: hover) {
304
- background-color: var(--color-secondary-700);
373
+ background-color: var(--color-gray-300);
305
374
  }
306
375
  }
307
376
  }
308
- .hover\:bg-success-700 {
377
+ .hover\:bg-green-700 {
309
378
  &:hover {
310
379
  @media (hover: hover) {
311
- background-color: var(--color-success-700);
380
+ background-color: var(--color-green-700);
312
381
  }
313
382
  }
314
383
  }
315
- .hover\:bg-warning-700 {
384
+ .hover\:bg-red-700 {
316
385
  &:hover {
317
386
  @media (hover: hover) {
318
- background-color: var(--color-warning-700);
387
+ background-color: var(--color-red-700);
319
388
  }
320
389
  }
321
390
  }
@@ -325,31 +394,6 @@
325
394
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
326
395
  }
327
396
  }
328
- .focus-visible\:ring-error-500 {
329
- &:focus-visible {
330
- --tw-ring-color: var(--color-error-500);
331
- }
332
- }
333
- .focus-visible\:ring-primary-500 {
334
- &:focus-visible {
335
- --tw-ring-color: var(--color-primary-500);
336
- }
337
- }
338
- .focus-visible\:ring-secondary-500 {
339
- &:focus-visible {
340
- --tw-ring-color: var(--color-secondary-500);
341
- }
342
- }
343
- .focus-visible\:ring-success-500 {
344
- &:focus-visible {
345
- --tw-ring-color: var(--color-success-500);
346
- }
347
- }
348
- .focus-visible\:ring-warning-500 {
349
- &:focus-visible {
350
- --tw-ring-color: var(--color-warning-500);
351
- }
352
- }
353
397
  .focus-visible\:ring-offset-2 {
354
398
  &:focus-visible {
355
399
  --tw-ring-offset-width: 2px;
@@ -362,36 +406,6 @@
362
406
  outline-style: none;
363
407
  }
364
408
  }
365
- .active\:bg-error-800 {
366
- &:active {
367
- background-color: var(--color-error-800);
368
- }
369
- }
370
- .active\:bg-primary-100 {
371
- &:active {
372
- background-color: var(--color-primary-100);
373
- }
374
- }
375
- .active\:bg-primary-800 {
376
- &:active {
377
- background-color: var(--color-primary-800);
378
- }
379
- }
380
- .active\:bg-secondary-800 {
381
- &:active {
382
- background-color: var(--color-secondary-800);
383
- }
384
- }
385
- .active\:bg-success-800 {
386
- &:active {
387
- background-color: var(--color-success-800);
388
- }
389
- }
390
- .active\:bg-warning-800 {
391
- &:active {
392
- background-color: var(--color-warning-800);
393
- }
394
- }
395
409
  .disabled\:pointer-events-none {
396
410
  &:disabled {
397
411
  pointer-events: none;
@@ -403,20 +417,14 @@
403
417
  }
404
418
  }
405
419
  }
406
- @property --tw-border-style {
420
+ @property --tw-leading {
407
421
  syntax: "*";
408
422
  inherits: false;
409
- initial-value: solid;
410
423
  }
411
424
  @property --tw-font-weight {
412
425
  syntax: "*";
413
426
  inherits: false;
414
427
  }
415
- @property --tw-outline-style {
416
- syntax: "*";
417
- inherits: false;
418
- initial-value: solid;
419
- }
420
428
  @property --tw-shadow {
421
429
  syntax: "*";
422
430
  inherits: false;
@@ -485,9 +493,8 @@
485
493
  @layer properties {
486
494
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
487
495
  *, ::before, ::after, ::backdrop {
488
- --tw-border-style: solid;
496
+ --tw-leading: initial;
489
497
  --tw-font-weight: initial;
490
- --tw-outline-style: solid;
491
498
  --tw-shadow: 0 0 #0000;
492
499
  --tw-shadow-color: initial;
493
500
  --tw-shadow-alpha: 100%;
package/package.json CHANGED
@@ -1,51 +1,58 @@
1
- {
2
- "name": "soongle-ui",
3
- "version": "0.1.1",
4
- "description": "A design system library for React.js and Next.js with TailwindCSS v4",
5
- "publishConfig": {
6
- "access": "public"
7
- },
8
- "main": "./dist/index.js",
9
- "module": "./dist/index.mjs",
10
- "types": "./dist/index.d.ts",
11
- "exports": {
12
- ".": {
13
- "types": "./dist/index.d.ts",
14
- "import": "./dist/index.mjs",
15
- "require": "./dist/index.js"
16
- },
17
- "./styles.css": "./dist/styles.css"
18
- },
19
- "files": [
20
- "dist"
21
- ],
22
- "scripts": {
23
- "build": "tsup && npm run build:css",
24
- "build:css": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css",
25
- "dev": "tsup --watch",
26
- "type-check": "tsc --noEmit"
27
- },
28
- "keywords": [
29
- "design-system",
30
- "react",
31
- "nextjs",
32
- "tailwindcss",
33
- "ui-library"
34
- ],
35
- "author": "",
36
- "license": "MIT",
37
- "peerDependencies": {
38
- "react": "^18.0.0 || ^19.0.0",
39
- "react-dom": "^18.0.0 || ^19.0.0"
40
- },
41
- "devDependencies": {
42
- "@tailwindcss/cli": "^4.1.18",
43
- "@types/react": "^18.2.48",
44
- "@types/react-dom": "^18.2.18",
45
- "react": "^18.2.0",
46
- "react-dom": "^18.2.0",
47
- "tailwindcss": "^4.0.0",
48
- "tsup": "^8.0.1",
49
- "typescript": "^5.3.3"
50
- }
51
- }
1
+ {
2
+ "name": "soongle-ui",
3
+ "version": "0.1.3",
4
+ "description": "A design system library for React.js and Next.js with TailwindCSS v4 by Soongle",
5
+ "publishConfig": {
6
+ "access": "public"
7
+ },
8
+ "main": "./dist/index.js",
9
+ "module": "./dist/index.mjs",
10
+ "types": "./dist/index.d.ts",
11
+ "exports": {
12
+ ".": {
13
+ "types": "./dist/index.d.ts",
14
+ "import": "./dist/index.mjs",
15
+ "require": "./dist/index.js"
16
+ },
17
+ "./styles.css": "./dist/styles.css"
18
+ },
19
+ "files": [
20
+ "dist"
21
+ ],
22
+ "scripts": {
23
+ "build": "tsup && npm run build:css",
24
+ "build:css": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css",
25
+ "dev": "tsup --watch",
26
+ "type-check": "tsc --noEmit",
27
+ "storybook": "storybook dev -p 6006",
28
+ "build-storybook": "storybook build"
29
+ },
30
+ "keywords": [
31
+ "design-system",
32
+ "react",
33
+ "nextjs",
34
+ "tailwindcss",
35
+ "ui-library"
36
+ ],
37
+ "author": "",
38
+ "license": "MIT",
39
+ "peerDependencies": {
40
+ "react": "^18.0.0 || ^19.0.0",
41
+ "react-dom": "^18.0.0 || ^19.0.0"
42
+ },
43
+ "devDependencies": {
44
+ "@storybook/react-vite": "^10.1.11",
45
+ "@tailwindcss/cli": "^4.1.18",
46
+ "@tailwindcss/vite": "^4.1.18",
47
+ "@types/react": "^18.2.48",
48
+ "@types/react-dom": "^18.2.18",
49
+ "@vitejs/plugin-react": "^5.1.2",
50
+ "react": "^18.2.0",
51
+ "react-dom": "^18.2.0",
52
+ "storybook": "^10.1.11",
53
+ "tailwindcss": "^4.0.0",
54
+ "tsup": "^8.0.1",
55
+ "typescript": "^5.3.3",
56
+ "vite": "^7.3.0"
57
+ }
58
+ }