@1d1s/design-system 0.2.32 → 0.2.34
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/components/AchievementBadge/AchievementBadge.d.ts +29 -0
- package/dist/components/AchievementBadge/AchievementBadge.stories.d.ts +9 -0
- package/dist/components/AchievementBadge/index.d.ts +1 -0
- package/dist/components/Banner/Banner.d.ts +36 -0
- package/dist/components/Banner/Banner.stories.d.ts +9 -0
- package/dist/components/Banner/index.d.ts +1 -0
- package/dist/components/BottomNav/BottomNav.d.ts +34 -0
- package/dist/components/BottomNav/BottomNav.stories.d.ts +7 -0
- package/dist/components/BottomNav/index.d.ts +1 -0
- package/dist/components/Button/Button.d.ts +23 -11
- package/dist/components/Button/Button.stories.d.ts +7 -7
- package/dist/components/Card/Card.d.ts +51 -0
- package/dist/components/Card/Card.stories.d.ts +8 -0
- package/dist/components/Card/index.d.ts +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts +9 -4
- package/dist/components/Checkbox/Checkbox.stories.d.ts +2 -1
- package/dist/components/CircleAvatar/CircleAvatar.d.ts +30 -2
- package/dist/components/CircleAvatar/CircleAvatar.stories.d.ts +5 -0
- package/dist/components/CircularProgress/CircularProgress.d.ts +23 -16
- package/dist/components/CircularProgress/CircularProgress.stories.d.ts +5 -2
- package/dist/components/CommentRow/CommentRow.d.ts +30 -0
- package/dist/components/CommentRow/CommentRow.stories.d.ts +8 -0
- package/dist/components/CommentRow/index.d.ts +1 -0
- package/dist/components/Dropdown/Dropdown.d.ts +24 -45
- package/dist/components/Dropdown/Dropdown.stories.d.ts +8 -4
- package/dist/components/Dropdown/DropdownMenu.d.ts +29 -0
- package/dist/components/Dropdown/MultiSelect.d.ts +26 -0
- package/dist/components/Dropdown/index.d.ts +2 -0
- package/dist/components/Heatmap/Heatmap.d.ts +35 -0
- package/dist/components/Heatmap/Heatmap.stories.d.ts +8 -0
- package/dist/components/Heatmap/index.d.ts +1 -0
- package/dist/components/Icons/Home.d.ts +2 -0
- package/dist/components/Icons/LayoutGrid.d.ts +2 -0
- package/dist/components/Icons/index.d.ts +2 -0
- package/dist/components/ProgressBar/ProgressBar.d.ts +20 -3
- package/dist/components/ProgressBar/ProgressBar.stories.d.ts +1 -0
- package/dist/components/Radio/Radio.d.ts +46 -0
- package/dist/components/Radio/Radio.stories.d.ts +9 -0
- package/dist/components/Radio/index.d.ts +1 -0
- package/dist/components/SectionHeader/SectionHeader.d.ts +31 -0
- package/dist/components/SectionHeader/SectionHeader.stories.d.ts +9 -0
- package/dist/components/SectionHeader/index.d.ts +1 -0
- package/dist/components/StatCard/StatCard.d.ts +29 -0
- package/dist/components/StatCard/StatCard.stories.d.ts +9 -0
- package/dist/components/StatCard/index.d.ts +1 -0
- package/dist/components/StatusBadge/StatusBadge.d.ts +28 -0
- package/dist/components/StatusBadge/StatusBadge.stories.d.ts +8 -0
- package/dist/components/StatusBadge/index.d.ts +1 -0
- package/dist/components/Streak/StreakChip.d.ts +20 -0
- package/dist/components/Streak/StreakChip.stories.d.ts +8 -0
- package/dist/components/Streak/StreakHero.d.ts +23 -0
- package/dist/components/Streak/StreakHero.stories.d.ts +8 -0
- package/dist/components/Streak/index.d.ts +2 -1
- package/dist/components/Stripe/Stripe.d.ts +29 -0
- package/dist/components/Stripe/Stripe.stories.d.ts +9 -0
- package/dist/components/Stripe/index.d.ts +1 -0
- package/dist/components/Tabs/Tabs.d.ts +37 -0
- package/dist/components/Tabs/Tabs.stories.d.ts +9 -0
- package/dist/components/Tabs/index.d.ts +1 -0
- package/dist/components/Tag/ChallengeTag.d.ts +19 -0
- package/dist/components/Tag/ChallengeTag.stories.d.ts +8 -0
- package/dist/components/Tag/FilterChip.d.ts +25 -0
- package/dist/components/Tag/Tag.d.ts +16 -14
- package/dist/components/Tag/Tag.stories.d.ts +6 -1
- package/dist/components/Tag/index.d.ts +2 -0
- package/dist/components/Text/Text.d.ts +2 -2
- package/dist/components/TextField/TextArea.d.ts +23 -0
- package/dist/components/TextField/TextArea.stories.d.ts +10 -0
- package/dist/components/TextField/TextField.d.ts +30 -13
- package/dist/components/TextField/TextField.stories.d.ts +7 -4
- package/dist/components/TextField/index.d.ts +1 -0
- package/dist/components/Toggle/Toggle.d.ts +14 -13
- package/dist/components/Toggle/Toggle.stories.d.ts +5 -5
- package/dist/components/TopNav/TopNav.d.ts +55 -0
- package/dist/components/TopNav/TopNav.stories.d.ts +8 -0
- package/dist/components/TopNav/index.d.ts +1 -0
- package/dist/components/index.d.ts +14 -25
- package/dist/index.es.js +3053 -11804
- package/dist/index.umd.js +1 -45
- package/package.json +2 -25
- package/src/styles/animation.css +109 -35
- package/src/styles/colors.css +25 -2
- package/src/styles/globals.css +1 -3
- package/src/styles/shadow.css +11 -1
- package/src/styles/shape.css +4 -0
- package/src/styles/typography.css +31 -11
- package/dist/components/Accordion/Accordion.d.ts +0 -47
- package/dist/components/Accordion/Accordion.stories.d.ts +0 -8
- package/dist/components/Accordion/index.d.ts +0 -1
- package/dist/components/AppHeader/AppHeader.d.ts +0 -26
- package/dist/components/AppHeader/AppHeader.stories.d.ts +0 -9
- package/dist/components/AppHeader/index.d.ts +0 -1
- package/dist/components/AvatarImagePicker/AvatarImagePicker.d.ts +0 -24
- package/dist/components/AvatarImagePicker/AvatarImagePicker.stories.d.ts +0 -7
- package/dist/components/AvatarImagePicker/index.d.ts +0 -1
- package/dist/components/BannerCarousel/BannerCarousel.d.ts +0 -42
- package/dist/components/BannerCarousel/BannerCarousel.stories.d.ts +0 -10
- package/dist/components/BannerCarousel/index.d.ts +0 -1
- package/dist/components/Calendar/Calendar.d.ts +0 -4
- package/dist/components/Calendar/Calendar.stories.d.ts +0 -15
- package/dist/components/Calendar/index.d.ts +0 -1
- package/dist/components/CheckContainer/CheckContainer.d.ts +0 -17
- package/dist/components/CheckContainer/CheckContainer.stories.d.ts +0 -9
- package/dist/components/CheckContainer/index.d.ts +0 -1
- package/dist/components/CheckList/CheckList.d.ts +0 -37
- package/dist/components/CheckList/CheckList.stories.d.ts +0 -9
- package/dist/components/CheckList/index.d.ts +0 -1
- package/dist/components/CommentThread/CommentThread.d.ts +0 -31
- package/dist/components/CommentThread/CommentThread.stories.d.ts +0 -9
- package/dist/components/CommentThread/index.d.ts +0 -1
- package/dist/components/DatePicker/DatePicker.d.ts +0 -26
- package/dist/components/DatePicker/DatePicker.stories.d.ts +0 -7
- package/dist/components/DatePicker/index.d.ts +0 -1
- package/dist/components/Dialog/Dialog.d.ts +0 -13
- package/dist/components/Dialog/Dialog.stories.d.ts +0 -9
- package/dist/components/Dialog/index.d.ts +0 -1
- package/dist/components/GoalAddList/GoalAddList.d.ts +0 -16
- package/dist/components/GoalAddList/GoalAddList.stories.d.ts +0 -7
- package/dist/components/GoalAddList/index.d.ts +0 -1
- package/dist/components/ImagePicker/ImagePicker.d.ts +0 -50
- package/dist/components/ImagePicker/ImagePicker.stories.d.ts +0 -8
- package/dist/components/ImagePicker/index.d.ts +0 -1
- package/dist/components/ImagePlaceholder/ImagePlaceholder.d.ts +0 -11
- package/dist/components/ImagePlaceholder/index.d.ts +0 -1
- package/dist/components/InfoButton/InfoButton.d.ts +0 -20
- package/dist/components/InfoButton/InfoButton.stories.d.ts +0 -9
- package/dist/components/InfoButton/index.d.ts +0 -1
- package/dist/components/Layout/Layout.d.ts +0 -69
- package/dist/components/Layout/Layout.stories.d.ts +0 -7
- package/dist/components/Layout/LayoutContext.d.ts +0 -12
- package/dist/components/Layout/index.d.ts +0 -2
- package/dist/components/PageWatermark/PageWatermark.d.ts +0 -1
- package/dist/components/PageWatermark/PageWatermark.stories.d.ts +0 -6
- package/dist/components/PageWatermark/index.d.ts +0 -1
- package/dist/components/Pagination/Pagination.d.ts +0 -14
- package/dist/components/Pagination/Pagination.stories.d.ts +0 -9
- package/dist/components/Pagination/index.d.ts +0 -1
- package/dist/components/Profile/Profile.d.ts +0 -37
- package/dist/components/Profile/Profile.stories.d.ts +0 -12
- package/dist/components/Profile/index.d.ts +0 -1
- package/dist/components/RightSidebar/RightSidebar.d.ts +0 -41
- package/dist/components/RightSidebar/RightSidebar.stories.d.ts +0 -14
- package/dist/components/RightSidebar/index.d.ts +0 -1
- package/dist/components/ScheduleCalendar/ScheduleCalendar.d.ts +0 -31
- package/dist/components/ScheduleCalendar/ScheduleCalendar.stories.d.ts +0 -10
- package/dist/components/ScheduleCalendar/index.d.ts +0 -1
- package/dist/components/StatContainer/StatContainer.d.ts +0 -15
- package/dist/components/StatContainer/StatContainer.stories.d.ts +0 -7
- package/dist/components/StatContainer/index.d.ts +0 -1
- package/dist/components/StepIndicator/StepIndicator.d.ts +0 -19
- package/dist/components/StepIndicator/StepIndicator.stories.d.ts +0 -10
- package/dist/components/StepIndicator/index.d.ts +0 -1
- package/dist/components/Streak/Streak.d.ts +0 -31
- package/dist/components/Streak/Streak.stories.d.ts +0 -12
- package/dist/components/ToggleGroup/ToggleGroup.d.ts +0 -21
- package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts +0 -8
- package/dist/components/ToggleGroup/index.d.ts +0 -1
- package/dist/components/Tooltip/Tooltip.d.ts +0 -7
- package/dist/components/Tooltip/Tooltip.stories.d.ts +0 -7
- package/dist/components/Tooltip/index.d.ts +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@1d1s/design-system",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.34",
|
|
4
4
|
"main": "dist/index.umd.js",
|
|
5
5
|
"module": "dist/index.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -40,36 +40,13 @@
|
|
|
40
40
|
"react-dom": "^19.0.0"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@radix-ui/react-accordion": "^1.2.12",
|
|
44
|
-
"@radix-ui/react-alert-dialog": "^1.1.7",
|
|
45
|
-
"@radix-ui/react-aspect-ratio": "^1.1.3",
|
|
46
|
-
"@radix-ui/react-avatar": "^1.1.4",
|
|
47
43
|
"@radix-ui/react-checkbox": "^1.1.5",
|
|
48
|
-
"@radix-ui/react-dialog": "^1.1.7",
|
|
49
|
-
"@radix-ui/react-label": "^2.1.3",
|
|
50
|
-
"@radix-ui/react-menubar": "^1.1.7",
|
|
51
|
-
"@radix-ui/react-popover": "^1.1.7",
|
|
52
|
-
"@radix-ui/react-progress": "^1.1.3",
|
|
53
|
-
"@radix-ui/react-radio-group": "^1.2.4",
|
|
54
|
-
"@radix-ui/react-scroll-area": "^1.2.4",
|
|
55
|
-
"@radix-ui/react-select": "^2.1.7",
|
|
56
|
-
"@radix-ui/react-separator": "^1.1.3",
|
|
57
44
|
"@radix-ui/react-slot": "^1.2.0",
|
|
58
|
-
"@radix-ui/react-switch": "^1.2.5",
|
|
59
|
-
"@radix-ui/react-toggle": "^1.1.3",
|
|
60
|
-
"@radix-ui/react-toggle-group": "^1.1.3",
|
|
61
|
-
"@radix-ui/react-tooltip": "^1.2.8",
|
|
62
45
|
"class-variance-authority": "^0.7.1",
|
|
63
46
|
"clsx": "^2.1.1",
|
|
64
|
-
"cmdk": "^1.1.1",
|
|
65
|
-
"date-fns": "^4.1.0",
|
|
66
47
|
"lucide-react": "^0.487.0",
|
|
67
|
-
"react-day-picker": "8.10.1",
|
|
68
|
-
"react-hook-form": "^7.71.1",
|
|
69
|
-
"react-resizable-panels": "^4.4.1",
|
|
70
48
|
"tailwind-merge": "^3.2.0",
|
|
71
|
-
"tw-animate-css": "^1.2.5"
|
|
72
|
-
"vaul": "^1.1.2"
|
|
49
|
+
"tw-animate-css": "^1.2.5"
|
|
73
50
|
},
|
|
74
51
|
"devDependencies": {
|
|
75
52
|
"@chromatic-com/storybook": "^5.0.0",
|
package/src/styles/animation.css
CHANGED
|
@@ -1,34 +1,116 @@
|
|
|
1
|
+
/* ─────────────────────────────────────────────────────────────
|
|
2
|
+
* Animations — v3 token set (clean names, no dc- prefix).
|
|
3
|
+
* Legacy keyframes (fadeIn/fadeOut/glow/marquee/accordion-*) are
|
|
4
|
+
* kept for backward compat with existing components.
|
|
5
|
+
* ───────────────────────────────────────────────────────────── */
|
|
6
|
+
|
|
7
|
+
@theme inline {
|
|
8
|
+
/* v3 named animations — generates `animate-<name>` utilities */
|
|
9
|
+
--animate-fade-up: fade-up 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
|
|
10
|
+
--animate-fade-in: fade-in 0.3s ease-out both;
|
|
11
|
+
--animate-slide-right: slide-right 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both;
|
|
12
|
+
--animate-pop: pop 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
|
|
13
|
+
--animate-pulse-ring: pulse-ring 1.6s ease-out infinite;
|
|
14
|
+
--animate-shimmer: shimmer 1.4s linear infinite;
|
|
15
|
+
--animate-float: float 2.4s ease-in-out infinite;
|
|
16
|
+
--animate-flame-flicker: flame-flicker 1.8s ease-in-out infinite;
|
|
17
|
+
--animate-heart-pop: heart-pop 0.4s ease-out;
|
|
18
|
+
--animate-confetti: confetti 0.7s ease-out forwards;
|
|
19
|
+
--animate-marquee: marquee 22s linear infinite;
|
|
20
|
+
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
21
|
+
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* ─── v3 keyframes ────────────────────────────────────────── */
|
|
25
|
+
@keyframes fade-up {
|
|
26
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
27
|
+
to { opacity: 1; transform: translateY(0); }
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@keyframes fade-in {
|
|
31
|
+
from { opacity: 0; }
|
|
32
|
+
to { opacity: 1; }
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@keyframes slide-right {
|
|
36
|
+
from { opacity: 0; transform: translateX(-8px); }
|
|
37
|
+
to { opacity: 1; transform: translateX(0); }
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@keyframes pop {
|
|
41
|
+
0% { transform: scale(0.85); opacity: 0; }
|
|
42
|
+
60% { transform: scale(1.08); opacity: 1; }
|
|
43
|
+
100% { transform: scale(1); opacity: 1; }
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@keyframes pulse-ring {
|
|
47
|
+
0% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.35); }
|
|
48
|
+
100% { box-shadow: 0 0 0 14px rgba(255, 87, 34, 0); }
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@keyframes shimmer {
|
|
52
|
+
0% { background-position: -200% 0; }
|
|
53
|
+
100% { background-position: 200% 0; }
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@keyframes float {
|
|
57
|
+
0%, 100% { transform: translateY(0); }
|
|
58
|
+
50% { transform: translateY(-4px); }
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@keyframes flame-flicker {
|
|
62
|
+
0%, 100% { transform: scale(1) rotate(-2deg); filter: hue-rotate(0deg); }
|
|
63
|
+
25% { transform: scale(1.05) rotate(2deg); filter: hue-rotate(-5deg); }
|
|
64
|
+
50% { transform: scale(0.98) rotate(-1deg); filter: hue-rotate(5deg); }
|
|
65
|
+
75% { transform: scale(1.03) rotate(1deg); filter: hue-rotate(-3deg); }
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@keyframes heart-pop {
|
|
69
|
+
0% { transform: scale(1); }
|
|
70
|
+
30% { transform: scale(1.4); }
|
|
71
|
+
60% { transform: scale(0.92); }
|
|
72
|
+
100% { transform: scale(1); }
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@keyframes confetti {
|
|
76
|
+
0% { transform: translate(0, 0) rotate(0); opacity: 1; }
|
|
77
|
+
100% { transform: var(--confetti-end) rotate(720deg); opacity: 0; }
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* ─── Stagger helper — children fade-up in sequence ──────── */
|
|
81
|
+
.stagger-in > * { opacity: 0; animation: fade-up 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
|
|
82
|
+
.stagger-in > *:nth-child(1) { animation-delay: 0.05s; }
|
|
83
|
+
.stagger-in > *:nth-child(2) { animation-delay: 0.12s; }
|
|
84
|
+
.stagger-in > *:nth-child(3) { animation-delay: 0.19s; }
|
|
85
|
+
.stagger-in > *:nth-child(4) { animation-delay: 0.26s; }
|
|
86
|
+
.stagger-in > *:nth-child(5) { animation-delay: 0.33s; }
|
|
87
|
+
.stagger-in > *:nth-child(6) { animation-delay: 0.40s; }
|
|
88
|
+
.stagger-in > *:nth-child(7) { animation-delay: 0.47s; }
|
|
89
|
+
.stagger-in > *:nth-child(8) { animation-delay: 0.54s; }
|
|
90
|
+
|
|
91
|
+
@media (prefers-reduced-motion: reduce) {
|
|
92
|
+
.stagger-in > * { animation: none; opacity: 1; }
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* ─── Legacy (kept for backward compat) ──────────────────── */
|
|
1
96
|
@keyframes fadeIn {
|
|
2
|
-
to {
|
|
3
|
-
opacity: 1;
|
|
4
|
-
}
|
|
97
|
+
to { opacity: 1; }
|
|
5
98
|
}
|
|
6
99
|
|
|
7
100
|
@keyframes fadeOut {
|
|
8
|
-
to {
|
|
9
|
-
opacity: 0;
|
|
10
|
-
}
|
|
101
|
+
to { opacity: 0; }
|
|
11
102
|
}
|
|
12
103
|
|
|
13
104
|
@keyframes glow {
|
|
14
|
-
0% {
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
100% {
|
|
18
|
-
box-shadow: 0 0 4px rgba(255, 0, 0, 1);
|
|
19
|
-
}
|
|
105
|
+
0% { box-shadow: 0 0 2px rgba(255, 0, 0, 0.7); }
|
|
106
|
+
100% { box-shadow: 0 0 4px rgba(255, 0, 0, 1); }
|
|
20
107
|
}
|
|
21
108
|
|
|
22
109
|
@keyframes marquee {
|
|
23
|
-
from {
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
to {
|
|
27
|
-
transform: translateX(-50%);
|
|
28
|
-
}
|
|
110
|
+
from { transform: translateX(0); }
|
|
111
|
+
to { transform: translateX(-50%); }
|
|
29
112
|
}
|
|
30
113
|
|
|
31
|
-
/* Tailwind 없이 직접 작성한 버전 */
|
|
32
114
|
.fade-in {
|
|
33
115
|
opacity: 0;
|
|
34
116
|
animation: fadeIn 0.3s ease-out forwards;
|
|
@@ -45,38 +127,30 @@
|
|
|
45
127
|
|
|
46
128
|
.marquee {
|
|
47
129
|
display: flex;
|
|
48
|
-
width: 200%;
|
|
130
|
+
width: 200%;
|
|
49
131
|
animation-timing-function: linear;
|
|
50
132
|
animation-iteration-count: infinite;
|
|
51
133
|
}
|
|
52
134
|
|
|
53
135
|
.marquee--forward {
|
|
54
136
|
animation-name: marquee;
|
|
55
|
-
animation-duration: 10s;
|
|
137
|
+
animation-duration: 10s;
|
|
56
138
|
animation-direction: normal;
|
|
57
139
|
}
|
|
58
140
|
|
|
59
141
|
.marquee--reverse {
|
|
60
142
|
animation-name: marquee;
|
|
61
|
-
animation-duration: 12s;
|
|
143
|
+
animation-duration: 12s;
|
|
62
144
|
animation-direction: reverse;
|
|
63
145
|
}
|
|
64
146
|
|
|
65
|
-
/* Accordion
|
|
147
|
+
/* Accordion (Radix) */
|
|
66
148
|
@keyframes accordion-down {
|
|
67
|
-
from {
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
to {
|
|
71
|
-
height: var(--radix-accordion-content-height);
|
|
72
|
-
}
|
|
149
|
+
from { height: 0; }
|
|
150
|
+
to { height: var(--radix-accordion-content-height); }
|
|
73
151
|
}
|
|
74
152
|
|
|
75
153
|
@keyframes accordion-up {
|
|
76
|
-
from {
|
|
77
|
-
|
|
78
|
-
}
|
|
79
|
-
to {
|
|
80
|
-
height: 0;
|
|
81
|
-
}
|
|
154
|
+
from { height: var(--radix-accordion-content-height); }
|
|
155
|
+
to { height: 0; }
|
|
82
156
|
}
|
package/src/styles/colors.css
CHANGED
|
@@ -25,11 +25,18 @@
|
|
|
25
25
|
/* Default Colors */
|
|
26
26
|
--color-white: var(--white);
|
|
27
27
|
--color-black: var(--black);
|
|
28
|
-
--color-
|
|
28
|
+
--color-gray-shadow-70: var(--gray-shadow-70);
|
|
29
29
|
--color-warning: var(--warning);
|
|
30
30
|
--color-accent: var(--accent);
|
|
31
31
|
|
|
32
|
+
/* Brand semantic aliases (v3) */
|
|
33
|
+
--color-brand: var(--brand);
|
|
34
|
+
--color-brand-soft: var(--brand-soft);
|
|
35
|
+
--color-brand-softer: var(--brand-softer);
|
|
36
|
+
|
|
32
37
|
/* Green Colors */
|
|
38
|
+
--color-green-200: var(--green-200);
|
|
39
|
+
--color-green-300: var(--green-300);
|
|
33
40
|
--color-green-400: var(--green-400);
|
|
34
41
|
--color-green-500: var(--green-500);
|
|
35
42
|
--color-green-600: var(--green-600);
|
|
@@ -44,7 +51,6 @@
|
|
|
44
51
|
--color-blue-600: var(--blue-600);
|
|
45
52
|
|
|
46
53
|
/* Red Colors */
|
|
47
|
-
|
|
48
54
|
--color-red-300: var(--red-300);
|
|
49
55
|
--color-red-400: var(--red-400);
|
|
50
56
|
--color-red-500: var(--red-500);
|
|
@@ -61,6 +67,11 @@
|
|
|
61
67
|
--color-mint-700: var(--mint-700);
|
|
62
68
|
--color-mint-800: var(--mint-800);
|
|
63
69
|
--color-mint-900: var(--mint-900);
|
|
70
|
+
|
|
71
|
+
/* Sky Colors (v3) */
|
|
72
|
+
--color-sky-100: var(--sky-100);
|
|
73
|
+
--color-sky-200: var(--sky-200);
|
|
74
|
+
--color-sky-700: var(--sky-700);
|
|
64
75
|
}
|
|
65
76
|
|
|
66
77
|
:root {
|
|
@@ -94,7 +105,14 @@
|
|
|
94
105
|
--warning: #ff2020;
|
|
95
106
|
--accent: #ff5722;
|
|
96
107
|
|
|
108
|
+
/* Brand semantic aliases (v3) */
|
|
109
|
+
--brand: var(--main-800);
|
|
110
|
+
--brand-soft: var(--main-200);
|
|
111
|
+
--brand-softer: var(--main-100);
|
|
112
|
+
|
|
97
113
|
/* Green Colors */
|
|
114
|
+
--green-200: #dff5b8;
|
|
115
|
+
--green-300: #c9eb87;
|
|
98
116
|
--green-400: #b8d530;
|
|
99
117
|
--green-500: #8dc71e;
|
|
100
118
|
--green-600: #69b41e;
|
|
@@ -125,4 +143,9 @@
|
|
|
125
143
|
--mint-700: #5ec69d;
|
|
126
144
|
--mint-800: #3eb489;
|
|
127
145
|
--mint-900: #1d9c6d;
|
|
146
|
+
|
|
147
|
+
/* Sky Colors (v3) */
|
|
148
|
+
--sky-100: #e0f2fe;
|
|
149
|
+
--sky-200: #bae6fd;
|
|
150
|
+
--sky-700: #0369a1;
|
|
128
151
|
}
|
package/src/styles/globals.css
CHANGED
|
@@ -15,8 +15,6 @@
|
|
|
15
15
|
--radius-md: calc(var(--radius) - 2px);
|
|
16
16
|
--radius-lg: var(--radius);
|
|
17
17
|
--radius-xl: calc(var(--radius) + 4px);
|
|
18
|
-
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
19
|
-
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
20
18
|
--color-background: var(--background);
|
|
21
19
|
--color-foreground: var(--foreground);
|
|
22
20
|
--color-card: var(--card);
|
|
@@ -122,7 +120,7 @@
|
|
|
122
120
|
}
|
|
123
121
|
body {
|
|
124
122
|
@apply bg-background text-foreground;
|
|
125
|
-
font-family: var(--font-
|
|
123
|
+
font-family: var(--font-body);
|
|
126
124
|
}
|
|
127
125
|
|
|
128
126
|
button,
|
package/src/styles/shadow.css
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
1
|
@theme inline {
|
|
2
2
|
/* shadow */
|
|
3
|
-
--shadow-
|
|
3
|
+
--shadow-sm: var(--shadow-sm);
|
|
4
|
+
--shadow-default: var(--shadow-default);
|
|
5
|
+
--shadow-lg: var(--shadow-lg);
|
|
6
|
+
--shadow-warm: var(--shadow-warm);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
:root {
|
|
10
|
+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
11
|
+
--shadow-default: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
|
|
12
|
+
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
|
|
13
|
+
--shadow-warm: 0 4px 24px rgba(255, 87, 34, 0.10);
|
|
4
14
|
}
|
package/src/styles/shape.css
CHANGED
|
@@ -5,8 +5,10 @@
|
|
|
5
5
|
--radius-1: var(--radius-1);
|
|
6
6
|
--radius-1\.5: var(--radius-1\.5);
|
|
7
7
|
--radius-2: var(--radius-2);
|
|
8
|
+
--radius-2\.5: var(--radius-2\.5);
|
|
8
9
|
--radius-3: var(--radius-3);
|
|
9
10
|
--radius-4: var(--radius-4);
|
|
11
|
+
--radius-full: var(--radius-full);
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
:root {
|
|
@@ -16,6 +18,8 @@
|
|
|
16
18
|
--radius-1: 0.25rem; /* 4px */
|
|
17
19
|
--radius-1\.5: 0.375rem; /* 6px */
|
|
18
20
|
--radius-2: 0.5rem; /* 8px */
|
|
21
|
+
--radius-2\.5: 0.625rem; /* 10px */
|
|
19
22
|
--radius-3: 0.75rem; /* 12px */
|
|
20
23
|
--radius-4: 1rem; /* 16px */
|
|
24
|
+
--radius-full: 9999px;
|
|
21
25
|
}
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
/* font family */
|
|
3
3
|
--font-pretendard: var(--font-pretendard);
|
|
4
4
|
--font-suite: var(--font-suite);
|
|
5
|
+
--font-display: var(--font-display);
|
|
6
|
+
--font-body: var(--font-body);
|
|
5
7
|
|
|
6
8
|
/* font size */
|
|
7
9
|
--text-xs: var(--text-xs);
|
|
@@ -14,7 +16,7 @@
|
|
|
14
16
|
--text-4xl: var(--text-4xl);
|
|
15
17
|
--text-5xl: var(--text-5xl);
|
|
16
18
|
|
|
17
|
-
/* line height */
|
|
19
|
+
/* line height (paired with font-size in Tailwind v4) */
|
|
18
20
|
--text-xs--line-height: var(--text-xs--line-height);
|
|
19
21
|
--text-sm--line-height: var(--text-sm--line-height);
|
|
20
22
|
--text-base--line-height: var(--text-base--line-height);
|
|
@@ -23,6 +25,14 @@
|
|
|
23
25
|
--text-2xl--line-height: var(--text-2xl--line-height);
|
|
24
26
|
--text-3xl--line-height: var(--text-3xl--line-height);
|
|
25
27
|
--text-4xl--line-height: var(--text-4xl--line-height);
|
|
28
|
+
--text-5xl--line-height: var(--text-5xl--line-height);
|
|
29
|
+
|
|
30
|
+
/* font weight (v3) */
|
|
31
|
+
--font-weight-regular: var(--font-weight-regular);
|
|
32
|
+
--font-weight-medium: var(--font-weight-medium);
|
|
33
|
+
--font-weight-semibold: var(--font-weight-semibold);
|
|
34
|
+
--font-weight-bold: var(--font-weight-bold);
|
|
35
|
+
--font-weight-extrabold: var(--font-weight-extrabold);
|
|
26
36
|
}
|
|
27
37
|
|
|
28
38
|
:root {
|
|
@@ -41,6 +51,9 @@
|
|
|
41
51
|
BlinkMacSystemFont,
|
|
42
52
|
"Segoe UI",
|
|
43
53
|
sans-serif;
|
|
54
|
+
/* Semantic aliases (v3) — both default to Pretendard */
|
|
55
|
+
--font-display: var(--font-pretendard);
|
|
56
|
+
--font-body: var(--font-pretendard);
|
|
44
57
|
|
|
45
58
|
/* font size */
|
|
46
59
|
--text-xs: 0.75rem; /* 12px */
|
|
@@ -53,14 +66,21 @@
|
|
|
53
66
|
--text-4xl: 1.75rem; /* 28px */
|
|
54
67
|
--text-5xl: 2rem; /* 32px */
|
|
55
68
|
|
|
56
|
-
/* line height */
|
|
57
|
-
--text-xs--line-height: 1;
|
|
58
|
-
--text-sm--line-height: 1;
|
|
59
|
-
--text-base--line-height: 1;
|
|
60
|
-
--text-lg--line-height:
|
|
61
|
-
--text-xl--line-height:
|
|
62
|
-
--text-2xl--line-height: 1;
|
|
63
|
-
--text-3xl--line-height: 1;
|
|
64
|
-
--text-4xl--line-height: 1;
|
|
65
|
-
--text-5xl--line-height: 1;
|
|
69
|
+
/* line height — body sizes get breathing room, display sizes tighten */
|
|
70
|
+
--text-xs--line-height: 1.5;
|
|
71
|
+
--text-sm--line-height: 1.55;
|
|
72
|
+
--text-base--line-height: 1.6;
|
|
73
|
+
--text-lg--line-height: 1.55;
|
|
74
|
+
--text-xl--line-height: 1.45;
|
|
75
|
+
--text-2xl--line-height: 1.4;
|
|
76
|
+
--text-3xl--line-height: 1.35;
|
|
77
|
+
--text-4xl--line-height: 1.3;
|
|
78
|
+
--text-5xl--line-height: 1.25;
|
|
79
|
+
|
|
80
|
+
/* font weight (v3) */
|
|
81
|
+
--font-weight-regular: 400;
|
|
82
|
+
--font-weight-medium: 500;
|
|
83
|
+
--font-weight-semibold: 600;
|
|
84
|
+
--font-weight-bold: 700;
|
|
85
|
+
--font-weight-extrabold: 800;
|
|
66
86
|
}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
3
|
-
/**
|
|
4
|
-
* Accordion
|
|
5
|
-
* 아코디언 컴포넌트 - 접을 수 있는 콘텐츠 섹션을 제공합니다.
|
|
6
|
-
*
|
|
7
|
-
* @example 단일 아코디언
|
|
8
|
-
* ```tsx
|
|
9
|
-
* <Accordion type="single" collapsible>
|
|
10
|
-
* <AccordionItem value="item-1">
|
|
11
|
-
* <AccordionTrigger>제목</AccordionTrigger>
|
|
12
|
-
* <AccordionContent>내용</AccordionContent>
|
|
13
|
-
* </AccordionItem>
|
|
14
|
-
* </Accordion>
|
|
15
|
-
* ```
|
|
16
|
-
*
|
|
17
|
-
* @example 다중 아코디언
|
|
18
|
-
* ```tsx
|
|
19
|
-
* <Accordion type="multiple">
|
|
20
|
-
* <AccordionItem value="item-1">
|
|
21
|
-
* <AccordionTrigger>제목 1</AccordionTrigger>
|
|
22
|
-
* <AccordionContent>내용 1</AccordionContent>
|
|
23
|
-
* </AccordionItem>
|
|
24
|
-
* <AccordionItem value="item-2">
|
|
25
|
-
* <AccordionTrigger>제목 2</AccordionTrigger>
|
|
26
|
-
* <AccordionContent>내용 2</AccordionContent>
|
|
27
|
-
* </AccordionItem>
|
|
28
|
-
* </Accordion>
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
|
|
32
|
-
/**
|
|
33
|
-
* AccordionItem
|
|
34
|
-
* 각 아코디언 항목을 감싸는 컨테이너
|
|
35
|
-
*/
|
|
36
|
-
declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.ReactElement;
|
|
37
|
-
/**
|
|
38
|
-
* AccordionTrigger
|
|
39
|
-
* 아코디언을 열고 닫는 트리거 버튼
|
|
40
|
-
*/
|
|
41
|
-
declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.ReactElement;
|
|
42
|
-
/**
|
|
43
|
-
* AccordionContent
|
|
44
|
-
* 아코디언의 접히는 콘텐츠 영역
|
|
45
|
-
*/
|
|
46
|
-
declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.ReactElement;
|
|
47
|
-
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { Accordion } from './Accordion';
|
|
3
|
-
declare const meta: Meta<typeof Accordion>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Accordion>;
|
|
6
|
-
export declare const Single: Story;
|
|
7
|
-
export declare const Multiple: Story;
|
|
8
|
-
export declare const DefaultOpen: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Accordion';
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
export interface AppHeaderNavItem {
|
|
3
|
-
key: string;
|
|
4
|
-
label: React.ReactNode;
|
|
5
|
-
disabled?: boolean;
|
|
6
|
-
}
|
|
7
|
-
export interface AppHeaderProps {
|
|
8
|
-
brandName?: string;
|
|
9
|
-
logo?: React.ReactNode;
|
|
10
|
-
navItems?: AppHeaderNavItem[];
|
|
11
|
-
activeKey?: string;
|
|
12
|
-
showProfile?: boolean;
|
|
13
|
-
profileImage?: string;
|
|
14
|
-
showBackButton?: boolean;
|
|
15
|
-
onBackClick?(): void;
|
|
16
|
-
className?: string;
|
|
17
|
-
onLogoClick?(): void;
|
|
18
|
-
onNavChange?(key: string): void;
|
|
19
|
-
onNotificationClick?(): void;
|
|
20
|
-
onProfileClick?(): void;
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* AppHeader
|
|
24
|
-
* 로고, 주요 네비게이션, 우측 액션 아이콘을 포함한 상단 헤더 컴포넌트.
|
|
25
|
-
*/
|
|
26
|
-
export declare function AppHeader({ brandName, logo, navItems, activeKey, showProfile, profileImage, showBackButton, onBackClick, className, onLogoClick, onNavChange, onNotificationClick, onProfileClick, }: AppHeaderProps): React.ReactElement;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { AppHeader } from './AppHeader';
|
|
3
|
-
declare const meta: Meta<typeof AppHeader>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof AppHeader>;
|
|
6
|
-
export declare const WithProfile: Story;
|
|
7
|
-
export declare const WithoutProfile: Story;
|
|
8
|
-
export declare const WithBackButton: Story;
|
|
9
|
-
export declare const Mobile: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './AppHeader';
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
export interface AvatarImagePickerProps extends Omit<React.ComponentPropsWithoutRef<"input">, "size"> {
|
|
3
|
-
/** 원형 이미지 영역 지름(px) */
|
|
4
|
-
size?: number;
|
|
5
|
-
/** 초기 이미지 URL */
|
|
6
|
-
defaultImageUrl?: string;
|
|
7
|
-
/** 하단 변경 버튼 텍스트 */
|
|
8
|
-
changeLabel?: string;
|
|
9
|
-
}
|
|
10
|
-
/**
|
|
11
|
-
* AvatarImagePicker
|
|
12
|
-
* 이미지 업로드 및 미리보기를 위한 컴포넌트
|
|
13
|
-
*
|
|
14
|
-
* @param onChange 파일 선택 시 호출되는 콜백 함수(optional)
|
|
15
|
-
* @param size 원형 이미지 영역 지름(px), 기본값 300
|
|
16
|
-
* @param defaultImageUrl 초기 이미지 URL
|
|
17
|
-
* @param changeLabel 하단 변경 버튼 텍스트(기본값: Change)
|
|
18
|
-
*
|
|
19
|
-
* @example 기본 사용
|
|
20
|
-
* ```tsx
|
|
21
|
-
* <AvatarImagePicker onChange={(e) => console.log(e.target.files)} />
|
|
22
|
-
* ```
|
|
23
|
-
*/
|
|
24
|
-
export declare function AvatarImagePicker({ onChange, size, defaultImageUrl, changeLabel, ...props }: AvatarImagePickerProps): React.ReactElement;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { AvatarImagePicker } from './AvatarImagePicker';
|
|
3
|
-
declare const meta: Meta<typeof AvatarImagePicker>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof AvatarImagePicker>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const WithImage: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './AvatarImagePicker';
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
export interface BannerCarouselItem {
|
|
3
|
-
id?: string | number;
|
|
4
|
-
type: string;
|
|
5
|
-
title: string;
|
|
6
|
-
subtitle: string;
|
|
7
|
-
backgroundImageUrl?: string;
|
|
8
|
-
/** @deprecated `backgroundImageUrl`을 사용하세요. */
|
|
9
|
-
backgroundImage?: string;
|
|
10
|
-
}
|
|
11
|
-
export interface BannerTrackingPayload {
|
|
12
|
-
event: "impression" | "click" | "change";
|
|
13
|
-
componentId?: string;
|
|
14
|
-
bannerId: string;
|
|
15
|
-
bannerIndex: number;
|
|
16
|
-
bannerType: string;
|
|
17
|
-
bannerTitle: string;
|
|
18
|
-
bannerSubtitle: string;
|
|
19
|
-
timestamp: number;
|
|
20
|
-
}
|
|
21
|
-
export interface BannerCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
22
|
-
items: BannerCarouselItem[];
|
|
23
|
-
autoSlideIntervalMs?: number;
|
|
24
|
-
initialIndex?: number;
|
|
25
|
-
enableLoop?: boolean;
|
|
26
|
-
showIndicators?: boolean;
|
|
27
|
-
aspectRatioClassName?: string;
|
|
28
|
-
minHeightPx?: number;
|
|
29
|
-
componentId?: string;
|
|
30
|
-
enableDataLayerTracking?: boolean;
|
|
31
|
-
impressionMode?: "once" | "always";
|
|
32
|
-
onBannerClick?(payload: BannerTrackingPayload): void;
|
|
33
|
-
onBannerImpression?(payload: BannerTrackingPayload): void;
|
|
34
|
-
onBannerChange?(payload: BannerTrackingPayload): void;
|
|
35
|
-
onItemClick?(item: BannerCarouselItem, index: number): void;
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* BannerCarousel
|
|
39
|
-
* 메인 배너 슬라이더 컴포넌트. 자동 슬라이드, 무한 루프, 인디케이터를 지원하며
|
|
40
|
-
* 클릭/노출 추적 콜백 및 dataLayer 이벤트 전송 포인트를 제공합니다.
|
|
41
|
-
*/
|
|
42
|
-
export declare function BannerCarousel({ items, autoSlideIntervalMs, initialIndex, enableLoop, showIndicators, aspectRatioClassName, minHeightPx, componentId, enableDataLayerTracking, impressionMode, onBannerClick, onBannerImpression, onBannerChange, onItemClick, className, ...props }: BannerCarouselProps): React.ReactElement | null;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { BannerCarousel } from './BannerCarousel';
|
|
3
|
-
declare const meta: Meta<typeof BannerCarousel>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof BannerCarousel>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const ImageBackground: Story;
|
|
8
|
-
export declare const Mobile: Story;
|
|
9
|
-
export declare const NoAutoSlide: Story;
|
|
10
|
-
export declare const NoIndicators: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './BannerCarousel';
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { Calendar } from './Calendar';
|
|
3
|
-
declare const meta: Meta<typeof Calendar>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Calendar>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const Range: Story;
|
|
8
|
-
/** 오늘로부터 N일 이전/이후만 클릭 가능 */
|
|
9
|
-
export declare const DisabledOutsideRange: Story;
|
|
10
|
-
/** 오늘 이후 날짜만 클릭 가능 (과거 비활성화) */
|
|
11
|
-
export declare const DisabledPastDays: Story;
|
|
12
|
-
/** 오늘 이전 날짜만 클릭 가능 (미래 비활성화) */
|
|
13
|
-
export declare const DisabledFutureDays: Story;
|
|
14
|
-
/** 특정 날짜 범위만 클릭 가능 */
|
|
15
|
-
export declare const DisabledWithCustomMatcher: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Calendar';
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
export interface CheckContainerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
|
|
3
|
-
label?: React.ReactNode;
|
|
4
|
-
icon?: React.ReactNode;
|
|
5
|
-
children?: React.ReactNode;
|
|
6
|
-
checked?: boolean;
|
|
7
|
-
defaultChecked?: boolean;
|
|
8
|
-
onCheckedChange?(checked: boolean): void;
|
|
9
|
-
showCheckIndicator?: boolean;
|
|
10
|
-
width?: number | string;
|
|
11
|
-
height?: number | string;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* CheckContainer
|
|
15
|
-
* 선택 가능한 카드형 컨테이너. 우측 상단 체크 인디케이터 표시 여부를 제어할 수 있습니다.
|
|
16
|
-
*/
|
|
17
|
-
export declare function CheckContainer({ label, icon, children, checked, defaultChecked, onCheckedChange, showCheckIndicator, width, height, className, disabled, onClick, style, "aria-label": ariaLabel, ...props }: CheckContainerProps): React.ReactElement;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { CheckContainer } from './CheckContainer';
|
|
3
|
-
declare const meta: Meta<typeof CheckContainer>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof CheckContainer>;
|
|
6
|
-
export declare const WithIndicator: Story;
|
|
7
|
-
export declare const WithoutIndicator: Story;
|
|
8
|
-
export declare const CustomSize: Story;
|
|
9
|
-
export declare const WithCustomContent: Story;
|