@sonamu-kit/react-components 0.1.0 → 0.1.2

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 (146) hide show
  1. package/dist/components/index.d.ts +65 -0
  2. package/dist/components/ui/accordion.d.ts +7 -0
  3. package/dist/components/ui/alert-dialog.d.ts +20 -0
  4. package/dist/components/ui/alert.d.ts +8 -0
  5. package/dist/components/ui/aspect-ratio.d.ts +3 -0
  6. package/dist/components/ui/async-select.d.ts +36 -0
  7. package/dist/components/ui/avatar.d.ts +6 -0
  8. package/dist/components/ui/badge.d.ts +9 -0
  9. package/dist/components/ui/breadcrumb.d.ts +19 -0
  10. package/dist/components/ui/button.d.ts +13 -0
  11. package/dist/components/ui/calendar.d.ts +5 -0
  12. package/dist/components/ui/card.d.ts +9 -0
  13. package/dist/components/ui/carousel.d.ts +18 -0
  14. package/dist/components/ui/checkbox.d.ts +8 -0
  15. package/dist/components/ui/collapsible.d.ts +5 -0
  16. package/dist/components/ui/combobox.d.ts +20 -0
  17. package/dist/components/ui/command.d.ts +80 -0
  18. package/dist/components/ui/common-modal.d.ts +28 -0
  19. package/dist/components/ui/context-menu.d.ts +27 -0
  20. package/dist/components/ui/date-input.d.ts +7 -0
  21. package/dist/components/ui/date-picker.d.ts +26 -0
  22. package/dist/components/ui/date-selector-multiple.d.ts +38 -0
  23. package/dist/components/ui/dialog.d.ts +19 -0
  24. package/dist/components/ui/drawer.d.ts +22 -0
  25. package/dist/components/ui/dropdown-menu.d.ts +27 -0
  26. package/dist/components/ui/form.d.ts +23 -0
  27. package/dist/components/ui/hover-card.d.ts +6 -0
  28. package/dist/components/ui/image-uploader.d.ts +14 -0
  29. package/dist/components/ui/input-otp.d.ts +34 -0
  30. package/dist/components/ui/input.d.ts +7 -0
  31. package/dist/components/ui/label.d.ts +5 -0
  32. package/dist/components/ui/menubar.d.ts +28 -0
  33. package/dist/components/ui/month-picker-multiple.d.ts +41 -0
  34. package/dist/components/ui/multi-image-uploader.d.ts +15 -0
  35. package/dist/components/ui/multi-select.d.ts +229 -0
  36. package/dist/components/ui/navigation-menu.d.ts +12 -0
  37. package/dist/components/ui/pagination.d.ts +10 -0
  38. package/dist/components/ui/popover.d.ts +7 -0
  39. package/dist/components/ui/progress.d.ts +4 -0
  40. package/dist/components/ui/radio-group.d.ts +5 -0
  41. package/dist/components/ui/resizable.d.ts +23 -0
  42. package/dist/components/ui/scroll-area.d.ts +5 -0
  43. package/dist/components/ui/select.d.ts +20 -0
  44. package/dist/components/ui/separator.d.ts +4 -0
  45. package/dist/components/ui/sheet.d.ts +25 -0
  46. package/dist/components/ui/sidebar.d.ts +69 -0
  47. package/dist/components/ui/skeleton.d.ts +2 -0
  48. package/dist/components/ui/slider.d.ts +8 -0
  49. package/dist/components/ui/sonner.d.ts +4 -0
  50. package/dist/components/ui/switch.d.ts +8 -0
  51. package/dist/components/ui/table.d.ts +24 -0
  52. package/dist/components/ui/tabs.d.ts +7 -0
  53. package/dist/components/ui/textarea.d.ts +7 -0
  54. package/dist/components/ui/toast.d.ts +15 -0
  55. package/dist/components/ui/toaster.d.ts +1 -0
  56. package/dist/components/ui/toggle-group.d.ts +12 -0
  57. package/dist/components/ui/toggle.d.ts +12 -0
  58. package/dist/components/ui/tooltip.d.ts +7 -0
  59. package/dist/hooks/index.d.ts +1 -0
  60. package/dist/hooks/use-toast.d.ts +44 -0
  61. package/dist/index.d.ts +3 -0
  62. package/dist/lib/caster.d.ts +3 -0
  63. package/dist/lib/helpers.d.ts +72 -0
  64. package/dist/lib/index.d.ts +6 -0
  65. package/{src/lib/lazy-upload.ts → dist/lib/lazy-upload.d.ts} +1 -12
  66. package/dist/lib/use-mobile.d.ts +1 -0
  67. package/dist/lib/utils.d.ts +2 -0
  68. package/dist/react-components.es.js +28375 -0
  69. package/package.json +105 -76
  70. package/COMPONENTS_LIST.md +0 -106
  71. package/COMPONENTS_STATUS.md +0 -114
  72. package/HELPERS_GUIDE.md +0 -489
  73. package/MIGRATION_PLAN.md +0 -404
  74. package/SETUP_GUIDE.md +0 -125
  75. package/components.json +0 -21
  76. package/postcss.config.js +0 -6
  77. package/src/components/index.ts +0 -315
  78. package/src/components/ui/accordion.tsx +0 -54
  79. package/src/components/ui/alert-dialog.tsx +0 -115
  80. package/src/components/ui/alert.tsx +0 -49
  81. package/src/components/ui/aspect-ratio.tsx +0 -5
  82. package/src/components/ui/async-select.tsx +0 -186
  83. package/src/components/ui/avatar.tsx +0 -45
  84. package/src/components/ui/badge.tsx +0 -38
  85. package/src/components/ui/breadcrumb.tsx +0 -102
  86. package/src/components/ui/button.tsx +0 -54
  87. package/src/components/ui/calendar.tsx +0 -193
  88. package/src/components/ui/card.tsx +0 -65
  89. package/src/components/ui/carousel.tsx +0 -243
  90. package/src/components/ui/checkbox.tsx +0 -67
  91. package/src/components/ui/collapsible.tsx +0 -9
  92. package/src/components/ui/combobox.tsx +0 -135
  93. package/src/components/ui/command.tsx +0 -143
  94. package/src/components/ui/common-modal.tsx +0 -95
  95. package/src/components/ui/context-menu.tsx +0 -189
  96. package/src/components/ui/date-picker.tsx +0 -112
  97. package/src/components/ui/date-selector-multiple.tsx +0 -197
  98. package/src/components/ui/dialog.tsx +0 -104
  99. package/src/components/ui/drawer.tsx +0 -100
  100. package/src/components/ui/dropdown-menu.tsx +0 -189
  101. package/src/components/ui/form.tsx +0 -171
  102. package/src/components/ui/hover-card.tsx +0 -27
  103. package/src/components/ui/image-uploader.tsx +0 -251
  104. package/src/components/ui/input-otp.tsx +0 -69
  105. package/src/components/ui/input.tsx +0 -38
  106. package/src/components/ui/label.tsx +0 -19
  107. package/src/components/ui/menubar.tsx +0 -231
  108. package/src/components/ui/month-picker-multiple.tsx +0 -351
  109. package/src/components/ui/multi-image-uploader.tsx +0 -283
  110. package/src/components/ui/multi-select.tsx +0 -1143
  111. package/src/components/ui/navigation-menu.tsx +0 -120
  112. package/src/components/ui/pagination.tsx +0 -72
  113. package/src/components/ui/popover.tsx +0 -42
  114. package/src/components/ui/progress.tsx +0 -25
  115. package/src/components/ui/radio-group.tsx +0 -38
  116. package/src/components/ui/resizable.tsx +0 -42
  117. package/src/components/ui/scroll-area.tsx +0 -46
  118. package/src/components/ui/select.tsx +0 -235
  119. package/src/components/ui/separator.tsx +0 -24
  120. package/src/components/ui/sheet.tsx +0 -119
  121. package/src/components/ui/sidebar.tsx +0 -683
  122. package/src/components/ui/skeleton.tsx +0 -7
  123. package/src/components/ui/slider.tsx +0 -57
  124. package/src/components/ui/sonner.tsx +0 -39
  125. package/src/components/ui/switch.tsx +0 -63
  126. package/src/components/ui/table.tsx +0 -94
  127. package/src/components/ui/tabs.tsx +0 -53
  128. package/src/components/ui/textarea.tsx +0 -34
  129. package/src/components/ui/toast.tsx +0 -122
  130. package/src/components/ui/toaster.tsx +0 -29
  131. package/src/components/ui/toggle-group.tsx +0 -55
  132. package/src/components/ui/toggle.tsx +0 -41
  133. package/src/components/ui/tooltip.tsx +0 -28
  134. package/src/hooks/index.ts +0 -2
  135. package/src/hooks/use-toast.ts +0 -189
  136. package/src/icons.d.ts +0 -1
  137. package/src/index.ts +0 -4
  138. package/src/lib/caster.ts +0 -66
  139. package/src/lib/helpers.ts +0 -394
  140. package/src/lib/index.ts +0 -31
  141. package/src/lib/use-mobile.ts +0 -19
  142. package/src/lib/utils.ts +0 -6
  143. package/src/styles/globals.css +0 -658
  144. package/tailwind.config.ts +0 -8
  145. package/tsconfig.json +0 -31
  146. package/tsconfig.node.json +0 -11
@@ -1,658 +0,0 @@
1
- @import url("https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/pretendard.min.css");
2
- @import "react-day-picker/dist/style.css";
3
- @import "tailwindcss";
4
-
5
- /* Tailwind v4: 외부 패키지에서 사용할 때 소스 경로 지정 */
6
- @source "../components/**/*.tsx";
7
- @source "../hooks/**/*.ts";
8
- @source "../lib/**/*.ts";
9
-
10
- /* VSCode CSS 린터: Tailwind v4의 새 문법 경고 무시 */
11
- /* @custom-variant, @theme는 Tailwind v4에서 정상 작동 */
12
- @custom-variant dark (&:is(.dark *));
13
-
14
- :root {
15
- /* Typography font sizes */
16
- --text-2xl: 24px;
17
- --text-xl: 18px;
18
- --text-lg: 15px;
19
- --text-base: 13px;
20
- --text-sm: 12px;
21
- --text-xs: 11px;
22
- /* The default background color for the application. */
23
- --background: rgba(255, 255, 255, 1);
24
- /* The default color for elements or text that appears on top of the background. */
25
- --foreground: rgba(23, 23, 23, 1);
26
- /* The background color for cards, modals, and other containers. */
27
- --card: rgba(255, 255, 255, 1);
28
- /* The default color for text or elements that appear on top of cards, modals and other background containers. */
29
- --card-foreground: rgba(23, 23, 23, 1);
30
- /* The background color for dropdowns and tooltips. */
31
- --popover: rgba(255, 255, 255, 1);
32
- /* The default color for text or elements that appear on top of dropdowns and tooltips. */
33
- --popover-foreground: rgba(23, 23, 23, 1);
34
- /* The primary color used for buttons, links, and other interactive elements. */
35
- --primary: rgba(94, 105, 209, 1);
36
- /* The default color for text or elements that appear on top of primary colored elements. */
37
- --primary-foreground: rgba(255, 255, 255, 1);
38
- /* The secondary color used for secondary(but NOT-DESTRUCTIVE) buttons and interactive elements. */
39
- --secondary: rgba(245, 245, 247, 1);
40
- /* The default color for text or elements that appear on top of secondary colored elements. */
41
- --secondary-foreground: rgba(23, 23, 23, 1);
42
- /* The muted color used for less prominent elements, such as disabled buttons or disabled text. */
43
- --muted: rgba(245, 245, 247, 1);
44
- /* The default color for text or elements that appear on top of muted colored elements. */
45
- --muted-foreground: rgba(113, 113, 122, 1);
46
- /* The accent color used for highlights, links, and other interactive elements. */
47
- --accent: rgba(93, 133, 255, 1);
48
- /* The default color for text or elements that appear on top of accent colored elements. */
49
- --accent-foreground: rgba(255, 255, 255, 1);
50
- /* The color used for background in destructive actions, such as delete buttons or error messages. */
51
- --destructive: rgba(239, 68, 68, 1);
52
- /* The default color for text or elements that appear on top of destructive colored elements. */
53
- --destructive-foreground: rgba(255, 255, 255, 1);
54
- /* The default border color for elements such as inputs, buttons, and other containers. */
55
- --border: rgba(229, 229, 234, 1);
56
- /* The default background color for input fields once the text has been filled. Should be either transparent or match the input-background. */
57
- --input: rgba(0, 0, 0, 0);
58
- /* The default background color for input fields, text areas, and other input elements. */
59
- --input-background: rgba(248, 248, 250, 1);
60
- /* The background color for switch toggle in the off state. */
61
- --switch-background: rgba(229, 229, 234, 1);
62
- /* The default font weight for medium text. */
63
- --font-weight-medium: 500;
64
- /* The default font weight for normal text. */
65
- --font-weight-normal: 400;
66
- /* The color for focus rings, outlines, and other focus indicators. */
67
- --ring: rgba(94, 105, 209, 1);
68
- /* Shadow for small elevations, such as cards or modals. */
69
- --elevation-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.04),
70
- 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
71
- /* The color for chart elements, such as a bar or line in a chart. */
72
- --chart-1: rgba(94, 105, 209, 1);
73
- /* The color for another chart element, such as a bar or line in a chart. */
74
- --chart-2: rgba(93, 133, 255, 1);
75
- /* The color for another chart element, such as a bar or line in a chart. */
76
- --chart-3: rgba(146, 164, 255, 1);
77
- /* The color for another chart element, such as a bar or line in a chart. */
78
- --chart-4: rgba(114, 226, 159, 1);
79
- /* The color for another chart element, such as a bar or line in a chart. */
80
- --chart-5: rgba(242, 190, 0, 1);
81
- /* The color for another chart element, such as a bar or line in a chart. */
82
- --chart-6: rgba(255, 153, 153, 1);
83
- /* The color for another chart element, such as a bar or line in a chart. */
84
- --chart-7: rgba(132, 227, 183, 1);
85
- /* The color for another chart element, such as a bar or line in a chart. */
86
- --chart-8: rgba(197, 245, 200, 1);
87
- /* The color for another chart element, such as a bar or line in a chart. */
88
- --chart-9: rgba(255, 238, 182, 1);
89
- /* The color for another chart element, such as a bar or line in a chart. */
90
- --chart-10: rgba(255, 204, 153, 1);
91
- /* The default border radius for elements such as buttons, tooltip, and other containers. */
92
- --radius: 5px;
93
- /* Border radius for button elements. */
94
- --radius-button: 5px;
95
- /* Border radius for card elements. */
96
- --radius-card: 5px;
97
- /* Border radius for navigation elements. */
98
- --radius-nav: 10px;
99
- /* Border radius for toggle elements. */
100
- --radius-toggle: 20px;
101
- /* Computed border radius values for Tailwind */
102
- --radius-sm: calc(var(--radius) - 2px);
103
- --radius-md: var(--radius);
104
- --radius-lg: calc(var(--radius) + 2px);
105
- --radius-xl: var(--radius-nav);
106
- /* The background color for sidebars, navigation menus, and other persistent elements. */
107
- --sidebar: rgba(250, 250, 252, 1);
108
- /* The default color for text or elements that appear on top of sidebars, navigation menus, and other persistent elements. */
109
- --sidebar-foreground: rgba(23, 23, 23, 1);
110
- /* The primary color used for buttons, links, and other interactive elements in sidebars and navigation menus. */
111
- --sidebar-primary: rgba(94, 105, 209, 1);
112
- /* The default color for text or elements that appear on top of primary colored elements in sidebars and navigation menus. */
113
- --sidebar-primary-foreground: rgba(255, 255, 255, 1);
114
- /* The accent color used for highlights, links, and other interactive elements in sidebars and navigation menus. */
115
- --sidebar-accent: rgba(93, 133, 255, 1);
116
- /* The default color for text or elements that appear on top of accent colored elements in sidebars and navigation menus. */
117
- --sidebar-accent-foreground: rgba(255, 255, 255, 1);
118
- /* The default border color for elements in sidebars and navigation menus. */
119
- --sidebar-border: rgba(229, 229, 234, 1);
120
- /* The default color for focus rings, outlines, and other focus indicators in sidebars and navigation menus. */
121
- --sidebar-ring: rgba(94, 105, 209, 1);
122
- }
123
-
124
- .dark {
125
- --background: rgba(9, 9, 9, 1);
126
- --foreground: rgba(255, 255, 255, 1);
127
- --card: rgba(29, 31, 36, 1);
128
- --card-foreground: rgba(255, 255, 255, 1);
129
- --popover: rgba(26, 28, 31, 1);
130
- --popover-foreground: rgba(255, 255, 255, 1);
131
- --primary: rgba(94, 105, 209, 1);
132
- --primary-foreground: rgba(254, 254, 255, 1);
133
- --secondary: rgba(35, 38, 44, 1);
134
- --secondary-foreground: rgba(227, 228, 232, 1);
135
- --muted: rgba(149, 150, 153, 1);
136
- --muted-foreground: rgba(149, 150, 153, 1);
137
- --accent: rgba(93, 133, 255, 1);
138
- --accent-foreground: rgba(255, 255, 255, 1);
139
- --destructive: rgba(255, 101, 101, 1);
140
- --destructive-foreground: rgba(255, 255, 255, 1);
141
- --border: rgba(42, 44, 49, 1);
142
- --input: rgba(0, 0, 0, 0);
143
- --input-background: rgba(29, 31, 36, 1);
144
- --switch-background: rgba(52, 54, 59, 1);
145
- --ring: rgba(83, 107, 229, 1);
146
- --font-weight-medium: 500;
147
- --font-weight-normal: 400;
148
- --chart-1: rgba(94, 105, 209, 1);
149
- --chart-2: rgba(93, 133, 255, 1);
150
- --chart-3: rgba(146, 164, 255, 1);
151
- --chart-4: rgba(114, 226, 159, 1);
152
- --chart-5: rgba(242, 190, 0, 1);
153
- --chart-6: rgba(255, 153, 153, 1);
154
- --chart-7: rgba(132, 227, 183, 1);
155
- --chart-8: rgba(197, 245, 200, 1);
156
- --chart-9: rgba(255, 238, 182, 1);
157
- --chart-10: rgba(255, 204, 153, 1);
158
- --sidebar: rgba(21, 22, 25, 1);
159
- --sidebar-foreground: rgba(255, 255, 255, 1);
160
- --sidebar-primary: rgba(94, 105, 209, 1);
161
- --sidebar-primary-foreground: rgba(254, 254, 255, 1);
162
- --sidebar-accent: rgba(93, 133, 255, 1);
163
- --sidebar-accent-foreground: rgba(255, 255, 255, 1);
164
- --sidebar-border: rgba(38, 39, 43, 1);
165
- --sidebar-ring: rgba(83, 107, 229, 1);
166
- }
167
-
168
- /* VSCode CSS 린터: Tailwind v4의 @theme 문법 경고 무시 */
169
- @theme inline {
170
- /* Font Sizes - Tailwind v4 매핑 */
171
- --font-size-2xl: 24px;
172
- --font-size-xl: 18px;
173
- --font-size-lg: 15px;
174
- --font-size-base: 13px;
175
- --font-size-sm: 12px;
176
- --font-size-xs: 11px;
177
-
178
- /* Colors */
179
- --color-background: var(--background);
180
- --color-foreground: var(--foreground);
181
- --color-card: var(--card);
182
- --color-card-foreground: var(--card-foreground);
183
- --color-popover: var(--popover);
184
- --color-popover-foreground: var(--popover-foreground);
185
- --color-primary: var(--primary);
186
- --color-primary-foreground: var(--primary-foreground);
187
- --color-secondary: var(--secondary);
188
- --color-secondary-foreground: var(--secondary-foreground);
189
- --color-muted: var(--muted);
190
- --color-muted-foreground: var(--muted-foreground);
191
- --color-accent: var(--accent);
192
- --color-accent-foreground: var(--accent-foreground);
193
- --color-destructive: var(--destructive);
194
- --color-destructive-foreground: var(--destructive-foreground);
195
- --color-border: var(--border);
196
- --color-input: var(--input);
197
- --color-input-background: var(--input-background);
198
- --color-switch-background: var(--switch-background);
199
- --color-ring: var(--ring);
200
- --color-chart-1: var(--chart-1);
201
- --color-chart-2: var(--chart-2);
202
- --color-chart-3: var(--chart-3);
203
- --color-chart-4: var(--chart-4);
204
- --color-chart-5: var(--chart-5);
205
- --color-chart-6: var(--chart-6);
206
- --color-chart-7: var(--chart-7);
207
- --color-chart-8: var(--chart-8);
208
- --color-chart-9: var(--chart-9);
209
- --color-chart-10: var(--chart-10);
210
-
211
- /* Border Radius */
212
- --radius-sm: calc(var(--radius) - 2px);
213
- --radius-md: var(--radius);
214
- --radius-lg: calc(var(--radius) + 2px);
215
- --radius-xl: var(--radius-nav);
216
- --radius-button: var(--radius-button);
217
- --radius-card: var(--radius-card);
218
- --radius-nav: var(--radius-nav);
219
- --radius-toggle: var(--radius-toggle);
220
-
221
- /* Shadow */
222
- --shadow-sm: var(--elevation-sm);
223
-
224
- /* Sidebar Colors */
225
- --color-sidebar: var(--sidebar);
226
- --color-sidebar-foreground: var(--sidebar-foreground);
227
- --color-sidebar-primary: var(--sidebar-primary);
228
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
229
- --color-sidebar-accent: var(--sidebar-accent);
230
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
231
- --color-sidebar-border: var(--sidebar-border);
232
- --color-sidebar-ring: var(--sidebar-ring);
233
-
234
- /* Animations - tailwindcss-animate 대체 */
235
- --animate-accordion-down: accordion-down 0.2s ease-out;
236
- --animate-accordion-up: accordion-up 0.2s ease-out;
237
- --animate-collapsible-down: collapsible-down 0.2s ease-out;
238
- --animate-collapsible-up: collapsible-up 0.2s ease-out;
239
- --animate-fade-in: fade-in 0.2s ease-out;
240
- --animate-fade-out: fade-out 0.2s ease-out;
241
- --animate-slide-in-from-top: slide-in-from-top 0.2s ease-out;
242
- --animate-slide-in-from-bottom: slide-in-from-bottom 0.2s ease-out;
243
- --animate-slide-in-from-left: slide-in-from-left 0.2s ease-out;
244
- --animate-slide-in-from-right: slide-in-from-right 0.2s ease-out;
245
- --animate-slide-out-to-top: slide-out-to-top 0.2s ease-out;
246
- --animate-slide-out-to-bottom: slide-out-to-bottom 0.2s ease-out;
247
- --animate-slide-out-to-left: slide-out-to-left 0.2s ease-out;
248
- --animate-slide-out-to-right: slide-out-to-right 0.2s ease-out;
249
- --animate-spin: spin 1s linear infinite;
250
- --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
251
- --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
252
- --animate-bounce: bounce 1s infinite;
253
- }
254
-
255
- @layer base {
256
- * {
257
- border-color: var(--border);
258
- }
259
-
260
- *:focus-visible {
261
- outline: 2px solid var(--ring);
262
- outline-offset: 2px;
263
- }
264
-
265
- body {
266
- background: var(--background);
267
- color: var(--foreground);
268
- font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
269
- Roboto, sans-serif;
270
- }
271
- }
272
-
273
- /* Semantic UI의 font-size: 100%를 강제 override (Tailwind v4에서 필수) */
274
- /* Tailwind utilities보다 높은 우선순위로 적용 */
275
- @layer utilities {
276
- .text-base {
277
- font-size: var(--text-base) !important;
278
- }
279
- .text-sm {
280
- font-size: var(--text-sm) !important;
281
- }
282
- .text-lg {
283
- font-size: var(--text-lg) !important;
284
- }
285
- .text-xl {
286
- font-size: var(--text-xl) !important;
287
- }
288
- .text-2xl {
289
- font-size: var(--text-2xl) !important;
290
- }
291
- .text-xs {
292
- font-size: var(--text-xs) !important;
293
- }
294
- }
295
-
296
- /**
297
- * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
298
- */
299
- @layer base {
300
- :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
301
- h1 {
302
- font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
303
- Roboto, sans-serif;
304
- font-size: var(--text-2xl);
305
- font-weight: var(--font-weight-medium);
306
- line-height: 1.5;
307
- }
308
-
309
- h2 {
310
- font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
311
- Roboto, sans-serif;
312
- font-size: var(--text-xl);
313
- font-weight: var(--font-weight-medium);
314
- line-height: 1.5;
315
- }
316
-
317
- h3 {
318
- font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
319
- Roboto, sans-serif;
320
- font-size: var(--text-lg);
321
- font-weight: var(--font-weight-medium);
322
- line-height: 1.5;
323
- }
324
-
325
- h4 {
326
- font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
327
- Roboto, sans-serif;
328
- font-size: var(--text-base);
329
- font-weight: var(--font-weight-medium);
330
- line-height: 1.5;
331
- }
332
-
333
- p {
334
- font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
335
- Roboto, sans-serif;
336
- font-size: var(--text-base);
337
- font-weight: var(--font-weight-normal);
338
- line-height: 1.5;
339
- }
340
-
341
- label {
342
- font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
343
- Roboto, sans-serif;
344
- font-size: var(--text-sm);
345
- font-weight: var(--font-weight-normal);
346
- line-height: 1.5;
347
- }
348
-
349
- button {
350
- font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
351
- Roboto, sans-serif;
352
- font-size: var(--text-base);
353
- font-weight: var(--font-weight-medium);
354
- line-height: 1.5;
355
- }
356
-
357
- input {
358
- font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
359
- Roboto, sans-serif;
360
- font-size: var(--text-base);
361
- font-weight: var(--font-weight-normal);
362
- line-height: 1.5;
363
- }
364
- }
365
- }
366
-
367
- html {
368
- font-size: var(--font-size);
369
- }
370
-
371
- /* Custom Scrollbar Styles */
372
- ::-webkit-scrollbar {
373
- width: 8px;
374
- height: 8px;
375
- }
376
-
377
- ::-webkit-scrollbar-track {
378
- background: transparent;
379
- }
380
-
381
- ::-webkit-scrollbar-thumb {
382
- background: var(--border);
383
- border-radius: var(--radius);
384
- }
385
-
386
- ::-webkit-scrollbar-thumb:hover {
387
- background: var(--muted-foreground);
388
- }
389
-
390
- /* Firefox */
391
- * {
392
- scrollbar-width: thin;
393
- scrollbar-color: var(--border) transparent;
394
- }
395
-
396
- /* Custom component styles */
397
- @layer components {
398
- /* Sidebar link styles - reset default anchor styles */
399
- [data-sidebar] a,
400
- [data-slot="sidebar"] a,
401
- [data-slot="sidebar-menu-sub-button"] {
402
- color: inherit !important;
403
- text-decoration: none !important;
404
- }
405
-
406
- [data-slot="sidebar-menu-sub-button"]:hover,
407
- [data-sidebar] a:hover {
408
- color: var(--sidebar-accent-foreground) !important;
409
- background-color: var(--sidebar-accent) !important;
410
- text-decoration: none !important;
411
- }
412
-
413
- [data-slot="sidebar-menu-sub-button"][data-active="true"] {
414
- color: var(--sidebar-accent-foreground) !important;
415
- background-color: var(--sidebar-accent) !important;
416
- }
417
-
418
- [data-slot="pagination-link"] {
419
- display: inline-flex;
420
- align-items: center;
421
- justify-content: center;
422
- height: 2rem;
423
- width: 2rem;
424
- border-radius: var(--radius-md);
425
- font-size: var(--text-sm);
426
- font-weight: var(--font-weight-medium);
427
- transition: all 0.2s;
428
- }
429
-
430
- [data-slot="pagination-ellipsis"] {
431
- display: flex;
432
- align-items: center;
433
- justify-content: center;
434
- height: 2rem;
435
- width: 2rem;
436
- }
437
-
438
- [data-slot="table-container"] {
439
- border-radius: var(--radius-card);
440
- overflow: hidden;
441
- }
442
-
443
- [data-slot="table-row"] {
444
- border-color: color-mix(in srgb, var(--border) 40%, transparent);
445
- }
446
-
447
- /* Calendar date range styles - react-day-picker v8 */
448
- .rdp {
449
- --rdp-cell-size: 2rem;
450
- --rdp-accent-color: var(--primary);
451
- --rdp-background-color: var(--primary);
452
- }
453
-
454
- /* Range selection - start date */
455
- .rdp-day_range_start:not(.rdp-day_range_end) {
456
- background-color: var(--primary) !important;
457
- color: var(--primary-foreground) !important;
458
- border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
459
- }
460
-
461
- /* Range selection - end date */
462
- .rdp-day_range_end:not(.rdp-day_range_start) {
463
- background-color: var(--primary) !important;
464
- color: var(--primary-foreground) !important;
465
- border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
466
- }
467
-
468
- /* Range selection - single day (start = end) */
469
- .rdp-day_range_start.rdp-day_range_end {
470
- background-color: var(--primary) !important;
471
- color: var(--primary-foreground) !important;
472
- border-radius: var(--radius-md) !important;
473
- }
474
-
475
- /* Range selection - middle dates (연결된 배경) */
476
- .rdp-day_range_middle {
477
- background-color: color-mix(
478
- in srgb,
479
- var(--primary) 15%,
480
- transparent
481
- ) !important;
482
- border-radius: 0 !important;
483
- }
484
-
485
- /* Hover states */
486
- .rdp-day:not(.rdp-day_selected):not(.rdp-day_range_start):not(
487
- .rdp-day_range_end
488
- ):not(.rdp-day_range_middle):hover {
489
- background-color: var(--secondary) !important;
490
- }
491
-
492
- /* Selected single date */
493
- .rdp-day_selected:not(.rdp-day_range_start):not(.rdp-day_range_end):not(
494
- .rdp-day_range_middle
495
- ) {
496
- background-color: var(--primary) !important;
497
- color: var(--primary-foreground) !important;
498
- }
499
- }
500
-
501
- /* Keyframe animations - tailwindcss-animate 대체 */
502
- @keyframes accordion-down {
503
- from {
504
- height: 0;
505
- }
506
- to {
507
- height: var(--radix-accordion-content-height);
508
- }
509
- }
510
-
511
- @keyframes accordion-up {
512
- from {
513
- height: var(--radix-accordion-content-height);
514
- }
515
- to {
516
- height: 0;
517
- }
518
- }
519
-
520
- @keyframes collapsible-down {
521
- from {
522
- height: 0;
523
- }
524
- to {
525
- height: var(--radix-collapsible-content-height);
526
- }
527
- }
528
-
529
- @keyframes collapsible-up {
530
- from {
531
- height: var(--radix-collapsible-content-height);
532
- }
533
- to {
534
- height: 0;
535
- }
536
- }
537
-
538
- @keyframes fade-in {
539
- from {
540
- opacity: 0;
541
- }
542
- to {
543
- opacity: 1;
544
- }
545
- }
546
-
547
- @keyframes fade-out {
548
- from {
549
- opacity: 1;
550
- }
551
- to {
552
- opacity: 0;
553
- }
554
- }
555
-
556
- @keyframes slide-in-from-top {
557
- from {
558
- transform: translateY(-100%);
559
- }
560
- to {
561
- transform: translateY(0);
562
- }
563
- }
564
-
565
- @keyframes slide-in-from-bottom {
566
- from {
567
- transform: translateY(100%);
568
- }
569
- to {
570
- transform: translateY(0);
571
- }
572
- }
573
-
574
- @keyframes slide-in-from-left {
575
- from {
576
- transform: translateX(-100%);
577
- }
578
- to {
579
- transform: translateX(0);
580
- }
581
- }
582
-
583
- @keyframes slide-in-from-right {
584
- from {
585
- transform: translateX(100%);
586
- }
587
- to {
588
- transform: translateX(0);
589
- }
590
- }
591
-
592
- @keyframes slide-out-to-top {
593
- from {
594
- transform: translateY(0);
595
- }
596
- to {
597
- transform: translateY(-100%);
598
- }
599
- }
600
-
601
- @keyframes slide-out-to-bottom {
602
- from {
603
- transform: translateY(0);
604
- }
605
- to {
606
- transform: translateY(100%);
607
- }
608
- }
609
-
610
- @keyframes slide-out-to-left {
611
- from {
612
- transform: translateX(0);
613
- }
614
- to {
615
- transform: translateX(-100%);
616
- }
617
- }
618
-
619
- @keyframes slide-out-to-right {
620
- from {
621
- transform: translateX(0);
622
- }
623
- to {
624
- transform: translateX(100%);
625
- }
626
- }
627
-
628
- @keyframes spin {
629
- to {
630
- transform: rotate(360deg);
631
- }
632
- }
633
-
634
- @keyframes ping {
635
- 75%,
636
- 100% {
637
- transform: scale(2);
638
- opacity: 0;
639
- }
640
- }
641
-
642
- @keyframes pulse {
643
- 50% {
644
- opacity: 0.5;
645
- }
646
- }
647
-
648
- @keyframes bounce {
649
- 0%,
650
- 100% {
651
- transform: translateY(-25%);
652
- animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
653
- }
654
- 50% {
655
- transform: none;
656
- animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
657
- }
658
- }
@@ -1,8 +0,0 @@
1
- import type { Config } from "tailwindcss";
2
-
3
- const config: Config = {
4
- content: ["./src/**/*.{ts,tsx}"],
5
- plugins: [],
6
- };
7
-
8
- export default config;
package/tsconfig.json DELETED
@@ -1,31 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "target": "ES2020",
4
- "useDefineForClassFields": true,
5
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
6
- "module": "ESNext",
7
- "skipLibCheck": true,
8
-
9
- /* Bundler mode */
10
- "moduleResolution": "bundler",
11
- "allowImportingTsExtensions": true,
12
- "resolveJsonModule": true,
13
- "isolatedModules": true,
14
- "noEmit": true,
15
- "jsx": "react-jsx",
16
-
17
- /* Linting */
18
- "strict": true,
19
- "noUnusedLocals": true,
20
- "noUnusedParameters": true,
21
- "noFallthroughCasesInSwitch": true,
22
-
23
- /* Path mapping */
24
- "baseUrl": ".",
25
- "paths": {
26
- "@/*": ["./src/*"]
27
- }
28
- },
29
- "include": ["src"],
30
- "references": [{ "path": "./tsconfig.node.json" }]
31
- }
@@ -1,11 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "composite": true,
4
- "skipLibCheck": true,
5
- "module": "ESNext",
6
- "moduleResolution": "bundler",
7
- "allowSyntheticDefaultImports": true
8
- },
9
- "include": ["tailwind.config.ts", "postcss.config.js"]
10
- }
11
-