@likelion-design/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 (10) hide show
  1. package/README.md +40 -0
  2. package/dist/index.css +516 -0
  3. package/dist/index.css.map +1 -0
  4. package/dist/index.d.mts +76 -0
  5. package/dist/index.d.ts +76 -0
  6. package/dist/index.js +339 -0
  7. package/dist/index.js.map +1 -0
  8. package/dist/index.mjs +301 -0
  9. package/dist/index.mjs.map +1 -0
  10. package/package.json +51 -0
package/README.md ADDED
@@ -0,0 +1,40 @@
1
+ This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/pages/api-reference/create-next-app).
2
+
3
+ ## Getting Started
4
+
5
+ First, run the development server:
6
+
7
+ ```bash
8
+ npm run dev
9
+ # or
10
+ yarn dev
11
+ # or
12
+ pnpm dev
13
+ # or
14
+ bun dev
15
+ ```
16
+
17
+ Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18
+
19
+ You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
20
+
21
+ [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
22
+
23
+ The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) instead of React pages.
24
+
25
+ This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
26
+
27
+ ## Learn More
28
+
29
+ To learn more about Next.js, take a look at the following resources:
30
+
31
+ - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
32
+ - [Learn Next.js](https://nextjs.org/learn-pages-router) - an interactive Next.js tutorial.
33
+
34
+ You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
35
+
36
+ ## Deploy on Vercel
37
+
38
+ The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
39
+
40
+ Check out our [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.
package/dist/index.css ADDED
@@ -0,0 +1,516 @@
1
+ /* src/stories/button.css */
2
+ .storybook-button {
3
+ display: inline-block;
4
+ cursor: pointer;
5
+ border: 0;
6
+ border-radius: 3em;
7
+ font-weight: 700;
8
+ line-height: 1;
9
+ font-family:
10
+ "Nunito Sans",
11
+ "Helvetica Neue",
12
+ Helvetica,
13
+ Arial,
14
+ sans-serif;
15
+ }
16
+ .storybook-button--primary {
17
+ background-color: #555ab9;
18
+ color: white;
19
+ }
20
+ .storybook-button--secondary {
21
+ box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
22
+ background-color: transparent;
23
+ color: #333;
24
+ }
25
+ .storybook-button--small {
26
+ padding: 10px 16px;
27
+ font-size: 12px;
28
+ }
29
+ .storybook-button--medium {
30
+ padding: 11px 20px;
31
+ font-size: 14px;
32
+ }
33
+ .storybook-button--large {
34
+ padding: 12px 24px;
35
+ font-size: 16px;
36
+ }
37
+ .action-button {
38
+ display: inline-flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ gap: 8px;
42
+ font-family:
43
+ "Pretendard",
44
+ -apple-system,
45
+ BlinkMacSystemFont,
46
+ system-ui,
47
+ sans-serif;
48
+ font-weight: 600;
49
+ border-radius: 8px;
50
+ border: none;
51
+ cursor: pointer;
52
+ transition: all 0.2s ease;
53
+ min-width: fit-content;
54
+ white-space: nowrap;
55
+ }
56
+ .action-button--xlarge {
57
+ height: 56px;
58
+ padding: 0 24px;
59
+ font-size: 17px;
60
+ min-width: 34px;
61
+ }
62
+ .action-button--large {
63
+ height: 48px;
64
+ padding: 0 24px;
65
+ font-size: 17px;
66
+ min-width: 34px;
67
+ }
68
+ .action-button--medium {
69
+ height: 36px;
70
+ padding: 0 20px;
71
+ font-size: 15px;
72
+ min-width: 34px;
73
+ }
74
+ .action-button--small {
75
+ height: 28px;
76
+ padding: 0 16px;
77
+ font-size: 13px;
78
+ min-width: 30px;
79
+ }
80
+ .action-button--primary.action-button--solid {
81
+ background-color: var(--color-semantic-bg-primary);
82
+ color: var(--color-semantic-fg-inverted);
83
+ }
84
+ .action-button--primary.action-button--solid:hover:not(:disabled),
85
+ .action-button--primary.action-button--solid.action-button--hovered:not(:disabled) {
86
+ background-color: var(--color-semantic-bg-primary-hovered);
87
+ }
88
+ .action-button--primary.action-button--solid:disabled,
89
+ .action-button--primary.action-button--solid.action-button--disabled {
90
+ background-color: var(--color-semantic-bg-normal-disabled);
91
+ color: var(--color-semantic-fg-disabled);
92
+ cursor: not-allowed;
93
+ }
94
+ .action-button--primary.action-button--outline {
95
+ background-color: transparent;
96
+ color: var(--color-semantic-fg-primary);
97
+ border: 1px solid var(--color-semantic-border-normal);
98
+ }
99
+ .action-button--primary.action-button--outline:hover:not(:disabled),
100
+ .action-button--primary.action-button--outline.action-button--hovered:not(:disabled) {
101
+ background-color: var(--color-semantic-bg-normal-hovered);
102
+ }
103
+ .action-button--primary.action-button--outline:disabled,
104
+ .action-button--primary.action-button--outline.action-button--disabled {
105
+ color: var(--color-semantic-fg-disabled);
106
+ border-color: var(--color-semantic-border-weak);
107
+ background-color: var(--color-semantic-bg-white);
108
+ cursor: not-allowed;
109
+ }
110
+ .action-button--primary.action-button--ghost {
111
+ background-color: transparent;
112
+ color: var(--color-semantic-fg-primary);
113
+ }
114
+ .action-button--primary.action-button--ghost:hover:not(:disabled),
115
+ .action-button--primary.action-button--ghost.action-button--hovered:not(:disabled) {
116
+ background-color: var(--color-semantic-bg-primary-weak);
117
+ }
118
+ .action-button--primary.action-button--ghost:disabled,
119
+ .action-button--primary.action-button--ghost.action-button--disabled {
120
+ color: var(--color-semantic-fg-disabled);
121
+ background-color: var(--color-semantic-bg-white);
122
+ cursor: not-allowed;
123
+ }
124
+ .action-button--neutral.action-button--solid {
125
+ background-color: var(--color-semantic-bg-inverted);
126
+ color: var(--color-semantic-fg-white);
127
+ }
128
+ .action-button--neutral.action-button--solid:hover:not(:disabled),
129
+ .action-button--neutral.action-button--solid.action-button--hovered:not(:disabled) {
130
+ background-color: var(--color-semantic-bg-inverted);
131
+ }
132
+ .action-button--neutral.action-button--solid:disabled,
133
+ .action-button--neutral.action-button--solid.action-button--disabled {
134
+ background-color: var(--color-semantic-bg-normal-disabled);
135
+ color: var(--color-semantic-fg-disabled);
136
+ cursor: not-allowed;
137
+ }
138
+ .action-button--neutral.action-button--outline {
139
+ background-color: transparent;
140
+ color: var(--color-semantic-fg-normal);
141
+ border: 1px solid var(--color-semantic-border-normal);
142
+ }
143
+ .action-button--neutral.action-button--outline:hover:not(:disabled),
144
+ .action-button--neutral.action-button--outline.action-button--hovered:not(:disabled) {
145
+ background-color: var(--color-semantic-bg-normal-hovered);
146
+ }
147
+ .action-button--neutral.action-button--outline:disabled,
148
+ .action-button--neutral.action-button--outline.action-button--disabled {
149
+ color: var(--color-semantic-fg-disabled);
150
+ border-color: var(--color-semantic-border-weak);
151
+ background-color: var(--color-semantic-bg-white);
152
+ cursor: not-allowed;
153
+ }
154
+ .action-button--neutral.action-button--ghost {
155
+ background-color: transparent;
156
+ color: var(--color-semantic-fg-normal);
157
+ }
158
+ .action-button--neutral.action-button--ghost:hover:not(:disabled),
159
+ .action-button--neutral.action-button--ghost.action-button--hovered:not(:disabled) {
160
+ background-color: var(--color-semantic-bg-normal-hovered);
161
+ }
162
+ .action-button--neutral.action-button--ghost:disabled,
163
+ .action-button--neutral.action-button--ghost.action-button--disabled {
164
+ color: var(--color-semantic-fg-disabled);
165
+ cursor: not-allowed;
166
+ }
167
+ .action-button--secondary.action-button--solid {
168
+ background-color: var(--color-semantic-bg-normal);
169
+ color: var(--color-semantic-fg-normal);
170
+ }
171
+ .action-button--secondary.action-button--solid:hover:not(:disabled),
172
+ .action-button--secondary.action-button--solid.action-button--hovered:not(:disabled) {
173
+ background-color: var(--color-semantic-bg-normal-hovered);
174
+ }
175
+ .action-button--secondary.action-button--solid:disabled,
176
+ .action-button--secondary.action-button--solid.action-button--disabled {
177
+ background-color: var(--color-semantic-bg-normal-disabled);
178
+ color: var(--color-semantic-fg-disabled);
179
+ cursor: not-allowed;
180
+ }
181
+ .action-button--loading {
182
+ position: relative;
183
+ pointer-events: none;
184
+ }
185
+ .action-button--loading .action-button__content {
186
+ opacity: 0;
187
+ }
188
+ .action-button__content {
189
+ display: inline-flex;
190
+ align-items: center;
191
+ gap: 8px;
192
+ }
193
+ .action-button__spinner {
194
+ position: absolute;
195
+ top: 50%;
196
+ left: 50%;
197
+ transform: translate(-50%, -50%);
198
+ display: inline-flex;
199
+ align-items: center;
200
+ justify-content: center;
201
+ }
202
+ .action-button__spinner-svg {
203
+ width: 20px;
204
+ height: 20px;
205
+ animation: spin 1s linear infinite;
206
+ }
207
+ @keyframes spin {
208
+ from {
209
+ transform: rotate(0deg);
210
+ }
211
+ to {
212
+ transform: rotate(360deg);
213
+ }
214
+ }
215
+ .action-button__spinner-circle {
216
+ opacity: 1;
217
+ }
218
+ .action-button--primary.action-button--solid.action-button--loading {
219
+ background-color: var(--color-semantic-bg-primary-hovered);
220
+ color: var(--color-semantic-fg-inverted);
221
+ }
222
+ .action-button--primary.action-button--outline.action-button--loading {
223
+ background-color: var(--color-semantic-bg-normal-hovered);
224
+ color: var(--color-semantic-fg-primary);
225
+ }
226
+ .action-button--primary.action-button--ghost.action-button--loading {
227
+ background-color: var(--color-semantic-bg-primary-weak);
228
+ color: var(--color-semantic-fg-primary);
229
+ }
230
+ .action-button--neutral.action-button--solid.action-button--loading {
231
+ background-color: var(--color-semantic-bg-inverted);
232
+ color: var(--color-semantic-fg-white);
233
+ }
234
+ .action-button--neutral.action-button--outline.action-button--loading {
235
+ background-color: var(--color-semantic-bg-normal-hovered);
236
+ color: var(--color-semantic-fg-normal);
237
+ }
238
+ .action-button--neutral.action-button--ghost.action-button--loading {
239
+ background-color: var(--color-semantic-bg-normal-hovered);
240
+ color: var(--color-semantic-fg-normal);
241
+ }
242
+ .action-button--secondary.action-button--solid.action-button--loading {
243
+ background-color: var(--color-semantic-bg-normal-hovered);
244
+ color: var(--color-semantic-fg-normal);
245
+ }
246
+ .action-button__prefix-icon,
247
+ .action-button__suffix-icon {
248
+ display: inline-flex;
249
+ align-items: center;
250
+ flex-shrink: 0;
251
+ }
252
+ .action-button--small .action-button__prefix-icon,
253
+ .action-button--small .action-button__suffix-icon {
254
+ width: 16px;
255
+ height: 16px;
256
+ }
257
+ .action-button--medium .action-button__prefix-icon,
258
+ .action-button--medium .action-button__suffix-icon {
259
+ width: 18px;
260
+ height: 18px;
261
+ }
262
+ .action-button--large .action-button__prefix-icon,
263
+ .action-button--large .action-button__suffix-icon {
264
+ width: 20px;
265
+ height: 20px;
266
+ }
267
+ .action-button--xlarge .action-button__prefix-icon,
268
+ .action-button--xlarge .action-button__suffix-icon {
269
+ width: 24px;
270
+ height: 24px;
271
+ }
272
+ .action-button__label {
273
+ display: inline-flex;
274
+ align-items: center;
275
+ }
276
+ .icon-button {
277
+ display: inline-flex;
278
+ align-items: center;
279
+ justify-content: center;
280
+ font-family:
281
+ "Pretendard",
282
+ -apple-system,
283
+ BlinkMacSystemFont,
284
+ system-ui,
285
+ sans-serif;
286
+ border: none;
287
+ cursor: pointer;
288
+ transition: all 0.2s ease;
289
+ padding: 0;
290
+ flex-shrink: 0;
291
+ }
292
+ .icon-button--xlarge {
293
+ width: 56px;
294
+ height: 56px;
295
+ border-radius: 8px;
296
+ }
297
+ .icon-button--large {
298
+ width: 48px;
299
+ height: 48px;
300
+ border-radius: 6px;
301
+ }
302
+ .icon-button--medium {
303
+ width: 36px;
304
+ height: 36px;
305
+ border-radius: 4px;
306
+ }
307
+ .icon-button--small {
308
+ width: 28px;
309
+ height: 28px;
310
+ border-radius: 4px;
311
+ }
312
+ .icon-button__icon {
313
+ display: inline-flex;
314
+ align-items: center;
315
+ justify-content: center;
316
+ width: 100%;
317
+ height: 100%;
318
+ }
319
+ .icon-button--xlarge .icon-button__icon,
320
+ .icon-button--large .icon-button__icon {
321
+ width: 24px;
322
+ height: 24px;
323
+ }
324
+ .icon-button--medium .icon-button__icon {
325
+ width: 20px;
326
+ height: 20px;
327
+ }
328
+ .icon-button--small .icon-button__icon {
329
+ width: 16px;
330
+ height: 16px;
331
+ }
332
+ .icon-button--primary.icon-button--solid {
333
+ background-color: var(--color-semantic-bg-primary);
334
+ color: var(--color-semantic-fg-inverted);
335
+ }
336
+ .icon-button--primary.icon-button--solid:hover:not(:disabled),
337
+ .icon-button--primary.icon-button--solid.icon-button--hovered:not(:disabled) {
338
+ background-color: var(--color-semantic-bg-primary-hovered);
339
+ }
340
+ .icon-button--primary.icon-button--solid:disabled,
341
+ .icon-button--primary.icon-button--solid.icon-button--disabled {
342
+ background-color: var(--color-semantic-bg-normal-disabled);
343
+ color: var(--color-semantic-fg-disabled);
344
+ cursor: not-allowed;
345
+ }
346
+ .icon-button--primary.icon-button--outline {
347
+ background-color: transparent;
348
+ color: var(--color-semantic-fg-primary);
349
+ border: 1px solid var(--color-semantic-border-normal);
350
+ }
351
+ .icon-button--primary.icon-button--outline:hover:not(:disabled),
352
+ .icon-button--primary.icon-button--outline.icon-button--hovered:not(:disabled) {
353
+ background-color: var(--color-semantic-bg-normal-hovered);
354
+ }
355
+ .icon-button--primary.icon-button--outline:disabled,
356
+ .icon-button--primary.icon-button--outline.icon-button--disabled {
357
+ color: var(--color-semantic-fg-disabled);
358
+ border-color: var(--color-semantic-border-weak);
359
+ background-color: var(--color-semantic-bg-white);
360
+ cursor: not-allowed;
361
+ }
362
+ .icon-button--primary.icon-button--weak {
363
+ background-color: var(--color-semantic-bg-week-primary);
364
+ color: var(--color-semantic-fg-primary);
365
+ }
366
+ .icon-button--primary.icon-button--weak:hover:not(:disabled),
367
+ .icon-button--primary.icon-button--weak.icon-button--hovered:not(:disabled) {
368
+ background-color: var(--color-semantic-bg-week-primary-hovered);
369
+ }
370
+ .icon-button--neutral.icon-button--solid {
371
+ background-color: var(--color-semantic-bg-inverted);
372
+ color: var(--color-semantic-fg-white);
373
+ }
374
+ .icon-button--neutral.icon-button--solid:hover:not(:disabled),
375
+ .icon-button--neutral.icon-button--solid.icon-button--hovered:not(:disabled) {
376
+ background-color: var(--color-semantic-bg-inverted);
377
+ }
378
+ .icon-button--neutral.icon-button--solid:disabled,
379
+ .icon-button--neutral.icon-button--solid.icon-button--disabled {
380
+ background-color: var(--color-semantic-bg-normal-disabled);
381
+ color: var(--color-semantic-fg-disabled);
382
+ cursor: not-allowed;
383
+ }
384
+ .icon-button--neutral.icon-button--outline {
385
+ background-color: transparent;
386
+ color: var(--color-semantic-fg-normal);
387
+ border: 1px solid var(--color-semantic-border-normal);
388
+ }
389
+ .icon-button--neutral.icon-button--outline:hover:not(:disabled),
390
+ .icon-button--neutral.icon-button--outline.icon-button--hovered:not(:disabled) {
391
+ background-color: var(--color-semantic-bg-normal-hovered);
392
+ }
393
+ .icon-button--neutral.icon-button--outline:disabled,
394
+ .icon-button--neutral.icon-button--outline.icon-button--disabled {
395
+ color: var(--color-semantic-fg-disabled);
396
+ border-color: var(--color-semantic-border-weak);
397
+ background-color: var(--color-semantic-bg-white);
398
+ cursor: not-allowed;
399
+ }
400
+ .icon-button--neutral.icon-button--weak {
401
+ background-color: var(--color-semantic-bg-week-neutral-dark);
402
+ color: var(--color-semantic-fg-normal);
403
+ }
404
+ .icon-button--neutral.icon-button--weak:hover:not(:disabled),
405
+ .icon-button--neutral.icon-button--weak.icon-button--hovered:not(:disabled) {
406
+ background-color: var(--color-semantic-bg-week-neutral-dark-hovered);
407
+ }
408
+ .icon-button--neutral.icon-button--weak.dark {
409
+ color: var(--color-semantic-fg-white);
410
+ }
411
+ .icon-button--neutral.icon-button--weak.dark:hover:not(:disabled),
412
+ .icon-button--neutral.icon-button--weak.dark.icon-button--hovered:not(:disabled) {
413
+ background-color: rgba(255, 255, 255, 0.1);
414
+ }
415
+
416
+ /* src/stories/header.css */
417
+ .storybook-header {
418
+ display: flex;
419
+ justify-content: space-between;
420
+ align-items: center;
421
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
422
+ padding: 15px 20px;
423
+ font-family:
424
+ "Nunito Sans",
425
+ "Helvetica Neue",
426
+ Helvetica,
427
+ Arial,
428
+ sans-serif;
429
+ }
430
+ .storybook-header svg {
431
+ display: inline-block;
432
+ vertical-align: top;
433
+ }
434
+ .storybook-header h1 {
435
+ display: inline-block;
436
+ vertical-align: top;
437
+ margin: 6px 0 6px 10px;
438
+ font-weight: 700;
439
+ font-size: 20px;
440
+ line-height: 1;
441
+ }
442
+ .storybook-header button + button {
443
+ margin-left: 10px;
444
+ }
445
+ .storybook-header .welcome {
446
+ margin-right: 10px;
447
+ color: #333;
448
+ font-size: 14px;
449
+ }
450
+
451
+ /* src/stories/page.css */
452
+ .storybook-page {
453
+ margin: 0 auto;
454
+ padding: 48px 20px;
455
+ max-width: 600px;
456
+ color: #333;
457
+ font-size: 14px;
458
+ line-height: 24px;
459
+ font-family:
460
+ "Nunito Sans",
461
+ "Helvetica Neue",
462
+ Helvetica,
463
+ Arial,
464
+ sans-serif;
465
+ }
466
+ .storybook-page h2 {
467
+ display: inline-block;
468
+ vertical-align: top;
469
+ margin: 0 0 4px;
470
+ font-weight: 700;
471
+ font-size: 32px;
472
+ line-height: 1;
473
+ }
474
+ .storybook-page p {
475
+ margin: 1em 0;
476
+ }
477
+ .storybook-page a {
478
+ color: inherit;
479
+ }
480
+ .storybook-page ul {
481
+ margin: 1em 0;
482
+ padding-left: 30px;
483
+ }
484
+ .storybook-page li {
485
+ margin-bottom: 8px;
486
+ }
487
+ .storybook-page .tip {
488
+ display: inline-block;
489
+ vertical-align: top;
490
+ margin-right: 10px;
491
+ border-radius: 1em;
492
+ background: #e7fdd8;
493
+ padding: 4px 12px;
494
+ color: #357a14;
495
+ font-weight: 700;
496
+ font-size: 11px;
497
+ line-height: 12px;
498
+ }
499
+ .storybook-page .tip-wrapper {
500
+ margin-top: 40px;
501
+ margin-bottom: 40px;
502
+ font-size: 13px;
503
+ line-height: 20px;
504
+ }
505
+ .storybook-page .tip-wrapper svg {
506
+ display: inline-block;
507
+ vertical-align: top;
508
+ margin-top: 3px;
509
+ margin-right: 4px;
510
+ width: 12px;
511
+ height: 12px;
512
+ }
513
+ .storybook-page .tip-wrapper svg path {
514
+ fill: #1ea7fd;
515
+ }
516
+ /*# sourceMappingURL=index.css.map */
package/dist/index.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/stories/button.css","../src/stories/header.css","../src/stories/page.css"],"sourcesContent":["/* 기존 스타일 유지 */\n.storybook-button {\n display: inline-block;\n cursor: pointer;\n border: 0;\n border-radius: 3em;\n font-weight: 700;\n line-height: 1;\n font-family: \"Nunito Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n}\n.storybook-button--primary {\n background-color: #555ab9;\n color: white;\n}\n.storybook-button--secondary {\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n background-color: transparent;\n color: #333;\n}\n.storybook-button--small {\n padding: 10px 16px;\n font-size: 12px;\n}\n.storybook-button--medium {\n padding: 11px 20px;\n font-size: 14px;\n}\n.storybook-button--large {\n padding: 12px 24px;\n font-size: 16px;\n}\n\n/* ActionButton 스타일 */\n.action-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-family: \"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui,\n sans-serif;\n font-weight: 600;\n border-radius: 8px;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n min-width: fit-content;\n white-space: nowrap;\n}\n\n/* Size 스타일 */\n.action-button--xlarge {\n height: 56px;\n padding: 0 24px;\n font-size: 17px;\n min-width: 34px;\n}\n\n.action-button--large {\n height: 48px;\n padding: 0 24px;\n font-size: 17px;\n min-width: 34px;\n}\n\n.action-button--medium {\n height: 36px;\n padding: 0 20px;\n font-size: 15px;\n min-width: 34px;\n}\n\n.action-button--small {\n height: 28px;\n padding: 0 16px;\n font-size: 13px;\n min-width: 30px;\n}\n\n/* Primary Solid 스타일 */\n.action-button--primary.action-button--solid {\n background-color: var(--color-semantic-bg-primary);\n color: var(--color-semantic-fg-inverted);\n}\n\n.action-button--primary.action-button--solid:hover:not(:disabled),\n.action-button--primary.action-button--solid.action-button--hovered:not(\n :disabled\n ) {\n background-color: var(--color-semantic-bg-primary-hovered);\n}\n\n.action-button--primary.action-button--solid:disabled,\n.action-button--primary.action-button--solid.action-button--disabled {\n background-color: var(--color-semantic-bg-normal-disabled);\n color: var(--color-semantic-fg-disabled);\n cursor: not-allowed;\n}\n\n/* Primary Outline 스타일 */\n.action-button--primary.action-button--outline {\n background-color: transparent;\n color: var(--color-semantic-fg-primary);\n border: 1px solid var(--color-semantic-border-normal);\n}\n\n.action-button--primary.action-button--outline:hover:not(:disabled),\n.action-button--primary.action-button--outline.action-button--hovered:not(\n :disabled\n ) {\n background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--primary.action-button--outline:disabled,\n.action-button--primary.action-button--outline.action-button--disabled {\n color: var(--color-semantic-fg-disabled);\n border-color: var(--color-semantic-border-weak);\n background-color: var(--color-semantic-bg-white);\n cursor: not-allowed;\n}\n\n/* Primary Ghost 스타일 */\n.action-button--primary.action-button--ghost {\n background-color: transparent;\n color: var(--color-semantic-fg-primary);\n}\n\n.action-button--primary.action-button--ghost:hover:not(:disabled),\n.action-button--primary.action-button--ghost.action-button--hovered:not(\n :disabled\n ) {\n background-color: var(--color-semantic-bg-primary-weak);\n}\n\n.action-button--primary.action-button--ghost:disabled,\n.action-button--primary.action-button--ghost.action-button--disabled {\n color: var(--color-semantic-fg-disabled);\n background-color: var(--color-semantic-bg-white);\n cursor: not-allowed;\n}\n\n/* Neutral Solid 스타일 */\n.action-button--neutral.action-button--solid {\n background-color: var(--color-semantic-bg-inverted);\n color: var(--color-semantic-fg-white);\n}\n\n.action-button--neutral.action-button--solid:hover:not(:disabled),\n.action-button--neutral.action-button--solid.action-button--hovered:not(\n :disabled\n ) {\n background-color: var(--color-semantic-bg-inverted);\n}\n\n.action-button--neutral.action-button--solid:disabled,\n.action-button--neutral.action-button--solid.action-button--disabled {\n background-color: var(--color-semantic-bg-normal-disabled);\n color: var(--color-semantic-fg-disabled);\n cursor: not-allowed;\n}\n\n/* Neutral Outline 스타일 */\n.action-button--neutral.action-button--outline {\n background-color: transparent;\n color: var(--color-semantic-fg-normal);\n border: 1px solid var(--color-semantic-border-normal);\n}\n\n.action-button--neutral.action-button--outline:hover:not(:disabled),\n.action-button--neutral.action-button--outline.action-button--hovered:not(\n :disabled\n ) {\n background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--neutral.action-button--outline:disabled,\n.action-button--neutral.action-button--outline.action-button--disabled {\n color: var(--color-semantic-fg-disabled);\n border-color: var(--color-semantic-border-weak);\n background-color: var(--color-semantic-bg-white);\n cursor: not-allowed;\n}\n\n/* Neutral Ghost 스타일 */\n.action-button--neutral.action-button--ghost {\n background-color: transparent;\n color: var(--color-semantic-fg-normal);\n}\n\n.action-button--neutral.action-button--ghost:hover:not(:disabled),\n.action-button--neutral.action-button--ghost.action-button--hovered:not(\n :disabled\n ) {\n background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--neutral.action-button--ghost:disabled,\n.action-button--neutral.action-button--ghost.action-button--disabled {\n color: var(--color-semantic-fg-disabled);\n cursor: not-allowed;\n}\n\n/* Secondary Solid 스타일 */\n.action-button--secondary.action-button--solid {\n background-color: var(--color-semantic-bg-normal);\n color: var(--color-semantic-fg-normal);\n}\n\n.action-button--secondary.action-button--solid:hover:not(:disabled),\n.action-button--secondary.action-button--solid.action-button--hovered:not(\n :disabled\n ) {\n background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--secondary.action-button--solid:disabled,\n.action-button--secondary.action-button--solid.action-button--disabled {\n background-color: var(--color-semantic-bg-normal-disabled);\n color: var(--color-semantic-fg-disabled);\n cursor: not-allowed;\n}\n\n/* Loading 상태 */\n.action-button--loading {\n position: relative;\n pointer-events: none;\n}\n\n.action-button--loading .action-button__content {\n opacity: 0;\n}\n\n.action-button__content {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n.action-button__spinner {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.action-button__spinner-svg {\n width: 20px;\n height: 20px;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.action-button__spinner-circle {\n opacity: 1;\n}\n\n/* 로딩 상태일 때 hovered와 동일한 스타일 적용 */\n.action-button--primary.action-button--solid.action-button--loading {\n background-color: var(--color-semantic-bg-primary-hovered);\n color: var(--color-semantic-fg-inverted);\n}\n\n.action-button--primary.action-button--outline.action-button--loading {\n background-color: var(--color-semantic-bg-normal-hovered);\n color: var(--color-semantic-fg-primary);\n}\n\n.action-button--primary.action-button--ghost.action-button--loading {\n background-color: var(--color-semantic-bg-primary-weak);\n color: var(--color-semantic-fg-primary);\n}\n\n.action-button--neutral.action-button--solid.action-button--loading {\n background-color: var(--color-semantic-bg-inverted);\n color: var(--color-semantic-fg-white);\n}\n\n.action-button--neutral.action-button--outline.action-button--loading {\n background-color: var(--color-semantic-bg-normal-hovered);\n color: var(--color-semantic-fg-normal);\n}\n\n.action-button--neutral.action-button--ghost.action-button--loading {\n background-color: var(--color-semantic-bg-normal-hovered);\n color: var(--color-semantic-fg-normal);\n}\n\n.action-button--secondary.action-button--solid.action-button--loading {\n background-color: var(--color-semantic-bg-normal-hovered);\n color: var(--color-semantic-fg-normal);\n}\n\n/* 아이콘 스타일 */\n.action-button__prefix-icon,\n.action-button__suffix-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.action-button--small .action-button__prefix-icon,\n.action-button--small .action-button__suffix-icon {\n width: 16px;\n height: 16px;\n}\n\n.action-button--medium .action-button__prefix-icon,\n.action-button--medium .action-button__suffix-icon {\n width: 18px;\n height: 18px;\n}\n\n.action-button--large .action-button__prefix-icon,\n.action-button--large .action-button__suffix-icon {\n width: 20px;\n height: 20px;\n}\n\n.action-button--xlarge .action-button__prefix-icon,\n.action-button--xlarge .action-button__suffix-icon {\n width: 24px;\n height: 24px;\n}\n\n.action-button__label {\n display: inline-flex;\n align-items: center;\n}\n\n/* IconButton 스타일 */\n.icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: \"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui,\n sans-serif;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n padding: 0;\n flex-shrink: 0;\n}\n\n/* Size 스타일 */\n.icon-button--xlarge {\n width: 56px;\n height: 56px;\n border-radius: 8px;\n}\n\n.icon-button--large {\n width: 48px;\n height: 48px;\n border-radius: 6px;\n}\n\n.icon-button--medium {\n width: 36px;\n height: 36px;\n border-radius: 4px;\n}\n\n.icon-button--small {\n width: 28px;\n height: 28px;\n border-radius: 4px;\n}\n\n/* Icon 크기 */\n.icon-button__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n.icon-button--xlarge .icon-button__icon,\n.icon-button--large .icon-button__icon {\n width: 24px;\n height: 24px;\n}\n\n.icon-button--medium .icon-button__icon {\n width: 20px;\n height: 20px;\n}\n\n.icon-button--small .icon-button__icon {\n width: 16px;\n height: 16px;\n}\n\n/* Primary Solid 스타일 */\n.icon-button--primary.icon-button--solid {\n background-color: var(--color-semantic-bg-primary);\n color: var(--color-semantic-fg-inverted);\n}\n\n.icon-button--primary.icon-button--solid:hover:not(:disabled),\n.icon-button--primary.icon-button--solid.icon-button--hovered:not(:disabled) {\n background-color: var(--color-semantic-bg-primary-hovered);\n}\n\n.icon-button--primary.icon-button--solid:disabled,\n.icon-button--primary.icon-button--solid.icon-button--disabled {\n background-color: var(--color-semantic-bg-normal-disabled);\n color: var(--color-semantic-fg-disabled);\n cursor: not-allowed;\n}\n\n/* Primary Outline 스타일 */\n.icon-button--primary.icon-button--outline {\n background-color: transparent;\n color: var(--color-semantic-fg-primary);\n border: 1px solid var(--color-semantic-border-normal);\n}\n\n.icon-button--primary.icon-button--outline:hover:not(:disabled),\n.icon-button--primary.icon-button--outline.icon-button--hovered:not(:disabled) {\n background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.icon-button--primary.icon-button--outline:disabled,\n.icon-button--primary.icon-button--outline.icon-button--disabled {\n color: var(--color-semantic-fg-disabled);\n border-color: var(--color-semantic-border-weak);\n background-color: var(--color-semantic-bg-white);\n cursor: not-allowed;\n}\n\n/* Primary Weak 스타일 */\n.icon-button--primary.icon-button--weak {\n background-color: var(--color-semantic-bg-week-primary);\n color: var(--color-semantic-fg-primary);\n}\n\n.icon-button--primary.icon-button--weak:hover:not(:disabled),\n.icon-button--primary.icon-button--weak.icon-button--hovered:not(:disabled) {\n background-color: var(--color-semantic-bg-week-primary-hovered);\n}\n\n/* Neutral Solid 스타일 */\n.icon-button--neutral.icon-button--solid {\n background-color: var(--color-semantic-bg-inverted);\n color: var(--color-semantic-fg-white);\n}\n\n.icon-button--neutral.icon-button--solid:hover:not(:disabled),\n.icon-button--neutral.icon-button--solid.icon-button--hovered:not(:disabled) {\n background-color: var(--color-semantic-bg-inverted);\n}\n\n.icon-button--neutral.icon-button--solid:disabled,\n.icon-button--neutral.icon-button--solid.icon-button--disabled {\n background-color: var(--color-semantic-bg-normal-disabled);\n color: var(--color-semantic-fg-disabled);\n cursor: not-allowed;\n}\n\n/* Neutral Outline 스타일 */\n.icon-button--neutral.icon-button--outline {\n background-color: transparent;\n color: var(--color-semantic-fg-normal);\n border: 1px solid var(--color-semantic-border-normal);\n}\n\n.icon-button--neutral.icon-button--outline:hover:not(:disabled),\n.icon-button--neutral.icon-button--outline.icon-button--hovered:not(:disabled) {\n background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.icon-button--neutral.icon-button--outline:disabled,\n.icon-button--neutral.icon-button--outline.icon-button--disabled {\n color: var(--color-semantic-fg-disabled);\n border-color: var(--color-semantic-border-weak);\n background-color: var(--color-semantic-bg-white);\n cursor: not-allowed;\n}\n\n/* Neutral Weak 스타일 */\n.icon-button--neutral.icon-button--weak {\n background-color: var(--color-semantic-bg-week-neutral-dark);\n color: var(--color-semantic-fg-normal);\n}\n\n.icon-button--neutral.icon-button--weak:hover:not(:disabled),\n.icon-button--neutral.icon-button--weak.icon-button--hovered:not(:disabled) {\n background-color: var(--color-semantic-bg-week-neutral-dark-hovered);\n}\n\n/* Weak 타입은 disabled 상태를 가지지 않음 - 어두운 배경일 때 */\n.icon-button--neutral.icon-button--weak.dark {\n color: var(--color-semantic-fg-white);\n}\n\n.icon-button--neutral.icon-button--weak.dark:hover:not(:disabled),\n.icon-button--neutral.icon-button--weak.dark.icon-button--hovered:not(\n :disabled\n ) {\n background-color: rgba(255, 255, 255, 0.1);\n}\n",".storybook-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n padding: 15px 20px;\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n}\n\n.storybook-header svg {\n display: inline-block;\n vertical-align: top;\n}\n\n.storybook-header h1 {\n display: inline-block;\n vertical-align: top;\n margin: 6px 0 6px 10px;\n font-weight: 700;\n font-size: 20px;\n line-height: 1;\n}\n\n.storybook-header button + button {\n margin-left: 10px;\n}\n\n.storybook-header .welcome {\n margin-right: 10px;\n color: #333;\n font-size: 14px;\n}\n",".storybook-page {\n margin: 0 auto;\n padding: 48px 20px;\n max-width: 600px;\n color: #333;\n font-size: 14px;\n line-height: 24px;\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n}\n\n.storybook-page h2 {\n display: inline-block;\n vertical-align: top;\n margin: 0 0 4px;\n font-weight: 700;\n font-size: 32px;\n line-height: 1;\n}\n\n.storybook-page p {\n margin: 1em 0;\n}\n\n.storybook-page a {\n color: inherit;\n}\n\n.storybook-page ul {\n margin: 1em 0;\n padding-left: 30px;\n}\n\n.storybook-page li {\n margin-bottom: 8px;\n}\n\n.storybook-page .tip {\n display: inline-block;\n vertical-align: top;\n margin-right: 10px;\n border-radius: 1em;\n background: #e7fdd8;\n padding: 4px 12px;\n color: #357a14;\n font-weight: 700;\n font-size: 11px;\n line-height: 12px;\n}\n\n.storybook-page .tip-wrapper {\n margin-top: 40px;\n margin-bottom: 40px;\n font-size: 13px;\n line-height: 20px;\n}\n\n.storybook-page .tip-wrapper svg {\n display: inline-block;\n vertical-align: top;\n margin-top: 3px;\n margin-right: 4px;\n width: 12px;\n height: 12px;\n}\n\n.storybook-page .tip-wrapper svg path {\n fill: #1ea7fd;\n}\n"],"mappings":"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","names":[]}
package/dist/index.d.mts ADDED
@@ -0,0 +1,76 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import React from 'react';
3
+
4
+ type ButtonSize = "xlarge" | "large" | "medium" | "small";
5
+ type ButtonVariant = "primary" | "neutral" | "secondary";
6
+ type ButtonShape = "solid" | "outline" | "ghost";
7
+ type ButtonState = "enabled" | "hovered" | "loading" | "disabled";
8
+ type IconButtonSize = "xlarge" | "large" | "medium" | "small";
9
+ type IconButtonVariant = "primary" | "neutral";
10
+ type IconButtonType = "solid" | "outline" | "weak";
11
+ type IconButtonState = "enabled" | "hovered" | "disabled";
12
+ interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
13
+ /** 버튼 크기 */
14
+ size?: ButtonSize;
15
+ /** 버튼 타입 (primary, neutral, secondary) */
16
+ variant?: ButtonVariant;
17
+ /** 버튼 모양 (solid, outline, ghost) */
18
+ shape?: ButtonShape;
19
+ /** 버튼 상태 */
20
+ state?: ButtonState;
21
+ /** 버튼 텍스트 */
22
+ children: React.ReactNode;
23
+ /** Prefix 아이콘 */
24
+ prefixIcon?: React.ReactNode;
25
+ /** Suffix 아이콘 */
26
+ suffixIcon?: React.ReactNode;
27
+ /** 로딩 상태일 때 표시할 스피너 */
28
+ loading?: boolean;
29
+ }
30
+ /** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */
31
+ declare const ActionButton: ({ size, variant, shape, state, children, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
32
+ interface ButtonProps {
33
+ /** Is this the principal call to action on the page? */
34
+ primary?: boolean;
35
+ /** What background color to use */
36
+ backgroundColor?: string;
37
+ /** How large should the button be? */
38
+ size?: "small" | "medium" | "large";
39
+ /** Button contents */
40
+ label: string;
41
+ /** Optional click handler */
42
+ onClick?: () => void;
43
+ }
44
+ /** Primary UI component for user interaction */
45
+ declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
46
+ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
47
+ /** 버튼 크기 */
48
+ size?: IconButtonSize;
49
+ /** 버튼 타입 (primary 또는 neutral) */
50
+ variant?: IconButtonVariant;
51
+ /** 버튼 모양 (solid, outline, weak) */
52
+ iconType?: IconButtonType;
53
+ /** 버튼 상태 */
54
+ state?: IconButtonState;
55
+ /** 아이콘 (Heroicons 또는 React 컴포넌트) */
56
+ icon: React.ReactNode;
57
+ /** 아이콘에 대한 접근성 라벨 */
58
+ "aria-label": string;
59
+ }
60
+ /** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */
61
+ declare const IconButton: ({ size, variant, iconType, state, icon, className, disabled, type, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
62
+
63
+ type User = {
64
+ name: string;
65
+ };
66
+ interface HeaderProps {
67
+ user?: User;
68
+ onLogin?: () => void;
69
+ onLogout?: () => void;
70
+ onCreateAccount?: () => void;
71
+ }
72
+ declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => react_jsx_runtime.JSX.Element;
73
+
74
+ declare const Page: React.FC;
75
+
76
+ export { ActionButton, type ActionButtonProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonState, type ButtonVariant, Header, type HeaderProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, type IconButtonVariant, Page };