@mdigital_ui/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 (205) hide show
  1. package/README.md +296 -0
  2. package/dist/accordion/index.js +5 -0
  3. package/dist/accordion/index.js.map +1 -0
  4. package/dist/badge/index.js +5 -0
  5. package/dist/badge/index.js.map +1 -0
  6. package/dist/button/index.js +6 -0
  7. package/dist/button/index.js.map +1 -0
  8. package/dist/card/index.js +4 -0
  9. package/dist/card/index.js.map +1 -0
  10. package/dist/carousel/index.js +3 -0
  11. package/dist/carousel/index.js.map +1 -0
  12. package/dist/cascader/index.js +4 -0
  13. package/dist/cascader/index.js.map +1 -0
  14. package/dist/chart/index.js +4 -0
  15. package/dist/chart/index.js.map +1 -0
  16. package/dist/checkbox/index.js +5 -0
  17. package/dist/checkbox/index.js.map +1 -0
  18. package/dist/checkbox-group/index.js +4 -0
  19. package/dist/checkbox-group/index.js.map +1 -0
  20. package/dist/chunk-2JGAYDZR.js +181 -0
  21. package/dist/chunk-2JGAYDZR.js.map +1 -0
  22. package/dist/chunk-3PFA3YG6.js +228 -0
  23. package/dist/chunk-3PFA3YG6.js.map +1 -0
  24. package/dist/chunk-4OMLQCUV.js +96 -0
  25. package/dist/chunk-4OMLQCUV.js.map +1 -0
  26. package/dist/chunk-4P5EMRFI.js +298 -0
  27. package/dist/chunk-4P5EMRFI.js.map +1 -0
  28. package/dist/chunk-5UEWVFF6.js +212 -0
  29. package/dist/chunk-5UEWVFF6.js.map +1 -0
  30. package/dist/chunk-5VCGW53O.js +332 -0
  31. package/dist/chunk-5VCGW53O.js.map +1 -0
  32. package/dist/chunk-75XESYGN.js +49 -0
  33. package/dist/chunk-75XESYGN.js.map +1 -0
  34. package/dist/chunk-7AEGBABZ.js +1102 -0
  35. package/dist/chunk-7AEGBABZ.js.map +1 -0
  36. package/dist/chunk-AOITJRSV.js +134 -0
  37. package/dist/chunk-AOITJRSV.js.map +1 -0
  38. package/dist/chunk-AWPKZYHT.js +152 -0
  39. package/dist/chunk-AWPKZYHT.js.map +1 -0
  40. package/dist/chunk-BNILRB4T.js +37 -0
  41. package/dist/chunk-BNILRB4T.js.map +1 -0
  42. package/dist/chunk-BP434VYV.js +448 -0
  43. package/dist/chunk-BP434VYV.js.map +1 -0
  44. package/dist/chunk-C7SXY3ZV.js +65 -0
  45. package/dist/chunk-C7SXY3ZV.js.map +1 -0
  46. package/dist/chunk-CLLQDCDR.js +560 -0
  47. package/dist/chunk-CLLQDCDR.js.map +1 -0
  48. package/dist/chunk-CWHFK7ZC.js +128 -0
  49. package/dist/chunk-CWHFK7ZC.js.map +1 -0
  50. package/dist/chunk-D3JWPGCA.js +123 -0
  51. package/dist/chunk-D3JWPGCA.js.map +1 -0
  52. package/dist/chunk-DOKTHDG3.js +55 -0
  53. package/dist/chunk-DOKTHDG3.js.map +1 -0
  54. package/dist/chunk-DPOSWW22.js +126 -0
  55. package/dist/chunk-DPOSWW22.js.map +1 -0
  56. package/dist/chunk-E2CYDDYC.js +39 -0
  57. package/dist/chunk-E2CYDDYC.js.map +1 -0
  58. package/dist/chunk-EYTOKUBM.js +401 -0
  59. package/dist/chunk-EYTOKUBM.js.map +1 -0
  60. package/dist/chunk-FGWSUPVW.js +356 -0
  61. package/dist/chunk-FGWSUPVW.js.map +1 -0
  62. package/dist/chunk-FPOXTCYV.js +166 -0
  63. package/dist/chunk-FPOXTCYV.js.map +1 -0
  64. package/dist/chunk-FTJOSVTY.js +104 -0
  65. package/dist/chunk-FTJOSVTY.js.map +1 -0
  66. package/dist/chunk-FYHQDFKE.js +164 -0
  67. package/dist/chunk-FYHQDFKE.js.map +1 -0
  68. package/dist/chunk-H2HIBD5Y.js +158 -0
  69. package/dist/chunk-H2HIBD5Y.js.map +1 -0
  70. package/dist/chunk-J3G5WWGR.js +53 -0
  71. package/dist/chunk-J3G5WWGR.js.map +1 -0
  72. package/dist/chunk-JZCHZ4B3.js +487 -0
  73. package/dist/chunk-JZCHZ4B3.js.map +1 -0
  74. package/dist/chunk-KBCBVH7B.js +51 -0
  75. package/dist/chunk-KBCBVH7B.js.map +1 -0
  76. package/dist/chunk-KNQ7UQ2W.js +143 -0
  77. package/dist/chunk-KNQ7UQ2W.js.map +1 -0
  78. package/dist/chunk-KTBPIEP2.js +102 -0
  79. package/dist/chunk-KTBPIEP2.js.map +1 -0
  80. package/dist/chunk-L3SP7GHC.js +1023 -0
  81. package/dist/chunk-L3SP7GHC.js.map +1 -0
  82. package/dist/chunk-LBJG2UWT.js +100 -0
  83. package/dist/chunk-LBJG2UWT.js.map +1 -0
  84. package/dist/chunk-MLDX3Z67.js +470 -0
  85. package/dist/chunk-MLDX3Z67.js.map +1 -0
  86. package/dist/chunk-NNSS366W.js +331 -0
  87. package/dist/chunk-NNSS366W.js.map +1 -0
  88. package/dist/chunk-OQANRZPV.js +197 -0
  89. package/dist/chunk-OQANRZPV.js.map +1 -0
  90. package/dist/chunk-OW5A5IIF.js +175 -0
  91. package/dist/chunk-OW5A5IIF.js.map +1 -0
  92. package/dist/chunk-R225A5II.js +187 -0
  93. package/dist/chunk-R225A5II.js.map +1 -0
  94. package/dist/chunk-ROR4E6IE.js +119 -0
  95. package/dist/chunk-ROR4E6IE.js.map +1 -0
  96. package/dist/chunk-RPAQAZTI.js +54 -0
  97. package/dist/chunk-RPAQAZTI.js.map +1 -0
  98. package/dist/chunk-RQBXZKTH.js +452 -0
  99. package/dist/chunk-RQBXZKTH.js.map +1 -0
  100. package/dist/chunk-S5XJXU52.js +178 -0
  101. package/dist/chunk-S5XJXU52.js.map +1 -0
  102. package/dist/chunk-SAVE5ACL.js +324 -0
  103. package/dist/chunk-SAVE5ACL.js.map +1 -0
  104. package/dist/chunk-SERJ3TZE.js +640 -0
  105. package/dist/chunk-SERJ3TZE.js.map +1 -0
  106. package/dist/chunk-SK5ECBBK.js +175 -0
  107. package/dist/chunk-SK5ECBBK.js.map +1 -0
  108. package/dist/chunk-SOV4PE3P.js +218 -0
  109. package/dist/chunk-SOV4PE3P.js.map +1 -0
  110. package/dist/chunk-W7BQYIXF.js +687 -0
  111. package/dist/chunk-W7BQYIXF.js.map +1 -0
  112. package/dist/chunk-XMAH5PDW.js +59 -0
  113. package/dist/chunk-XMAH5PDW.js.map +1 -0
  114. package/dist/chunk-XOBGEMQY.js +94 -0
  115. package/dist/chunk-XOBGEMQY.js.map +1 -0
  116. package/dist/chunk-YNNAOXU5.js +57 -0
  117. package/dist/chunk-YNNAOXU5.js.map +1 -0
  118. package/dist/chunk-YZVSDRJD.js +253 -0
  119. package/dist/chunk-YZVSDRJD.js.map +1 -0
  120. package/dist/collapse/index.js +4 -0
  121. package/dist/collapse/index.js.map +1 -0
  122. package/dist/command/index.js +5 -0
  123. package/dist/command/index.js.map +1 -0
  124. package/dist/date-picker/index.js +5 -0
  125. package/dist/date-picker/index.js.map +1 -0
  126. package/dist/descriptions/index.js +4 -0
  127. package/dist/descriptions/index.js.map +1 -0
  128. package/dist/drawer/index.js +4 -0
  129. package/dist/drawer/index.js.map +1 -0
  130. package/dist/dropdown/index.js +5 -0
  131. package/dist/dropdown/index.js.map +1 -0
  132. package/dist/empty/index.js +4 -0
  133. package/dist/empty/index.js.map +1 -0
  134. package/dist/fetching-overlay/index.js +5 -0
  135. package/dist/fetching-overlay/index.js.map +1 -0
  136. package/dist/image/index.js +4 -0
  137. package/dist/image/index.js.map +1 -0
  138. package/dist/index.d.ts +2672 -0
  139. package/dist/index.js +976 -0
  140. package/dist/index.js.map +1 -0
  141. package/dist/input/index.js +5 -0
  142. package/dist/input/index.js.map +1 -0
  143. package/dist/input-group/index.js +4 -0
  144. package/dist/input-group/index.js.map +1 -0
  145. package/dist/input-otp/index.js +4 -0
  146. package/dist/input-otp/index.js.map +1 -0
  147. package/dist/input-password/index.js +6 -0
  148. package/dist/input-password/index.js.map +1 -0
  149. package/dist/kbd/index.js +4 -0
  150. package/dist/kbd/index.js.map +1 -0
  151. package/dist/modal/index.js +4 -0
  152. package/dist/modal/index.js.map +1 -0
  153. package/dist/multi-select/index.js +5 -0
  154. package/dist/multi-select/index.js.map +1 -0
  155. package/dist/notification/index.js +4 -0
  156. package/dist/notification/index.js.map +1 -0
  157. package/dist/pagination/index.js +4 -0
  158. package/dist/pagination/index.js.map +1 -0
  159. package/dist/popover/index.js +4 -0
  160. package/dist/popover/index.js.map +1 -0
  161. package/dist/progress/index.js +4 -0
  162. package/dist/progress/index.js.map +1 -0
  163. package/dist/radio/index.js +4 -0
  164. package/dist/radio/index.js.map +1 -0
  165. package/dist/radio-group/index.js +4 -0
  166. package/dist/radio-group/index.js.map +1 -0
  167. package/dist/rating/index.js +4 -0
  168. package/dist/rating/index.js.map +1 -0
  169. package/dist/ribbon/index.js +4 -0
  170. package/dist/ribbon/index.js.map +1 -0
  171. package/dist/select/index.js +6 -0
  172. package/dist/select/index.js.map +1 -0
  173. package/dist/skeleton/index.js +4 -0
  174. package/dist/skeleton/index.js.map +1 -0
  175. package/dist/slider/index.js +4 -0
  176. package/dist/slider/index.js.map +1 -0
  177. package/dist/spinner/index.js +4 -0
  178. package/dist/spinner/index.js.map +1 -0
  179. package/dist/stepper/index.js +4 -0
  180. package/dist/stepper/index.js.map +1 -0
  181. package/dist/styles/base.css +161 -0
  182. package/dist/styles/global.css +633 -0
  183. package/dist/styles/themes/dark.css +84 -0
  184. package/dist/styles/themes/light.css +84 -0
  185. package/dist/switch/index.js +4 -0
  186. package/dist/switch/index.js.map +1 -0
  187. package/dist/table/index.js +12 -0
  188. package/dist/table/index.js.map +1 -0
  189. package/dist/tabs/index.js +5 -0
  190. package/dist/tabs/index.js.map +1 -0
  191. package/dist/textarea/index.js +4 -0
  192. package/dist/textarea/index.js.map +1 -0
  193. package/dist/toggle/index.js +4 -0
  194. package/dist/toggle/index.js.map +1 -0
  195. package/dist/toggle-group/index.js +4 -0
  196. package/dist/toggle-group/index.js.map +1 -0
  197. package/dist/tooltip/index.js +4 -0
  198. package/dist/tooltip/index.js.map +1 -0
  199. package/dist/transfer/index.js +6 -0
  200. package/dist/transfer/index.js.map +1 -0
  201. package/dist/tree/index.js +4 -0
  202. package/dist/tree/index.js.map +1 -0
  203. package/dist/tree-select/index.js +6 -0
  204. package/dist/tree-select/index.js.map +1 -0
  205. package/package.json +107 -0
package/README.md ADDED
@@ -0,0 +1,296 @@
1
+ # @mdigital/ui
2
+
3
+ Modern React component library built with Tailwind CSS v4, designed for multi-brand support and maximum customization.
4
+
5
+ ## Features
6
+
7
+ - ✅ **50+ Components** - Comprehensive UI component library
8
+ - ✅ **Tailwind CSS v4** - Modern utility-first CSS framework
9
+ - ✅ **TypeScript** - Full type safety and IntelliSense
10
+ - ✅ **Dark Mode** - Built-in dark mode support
11
+ - ✅ **Multi-Brand** - CSS variable-based theming system
12
+ - ✅ **Tree-Shakeable** - Optimal bundle size with ESM
13
+ - ✅ **Accessible** - WCAG 2.1 AA compliant
14
+ - ✅ **React 19** - Modern React patterns (no forwardRef)
15
+
16
+ ## Installation
17
+
18
+ ```bash
19
+ npm install @mdigital/ui
20
+ ```
21
+
22
+ ### Peer Dependencies
23
+
24
+ Make sure you have these installed:
25
+
26
+ ```bash
27
+ npm install react react-dom tailwindcss
28
+ ```
29
+
30
+ ## Quick Start
31
+
32
+ ### 1. Configure Tailwind
33
+
34
+ Add the package path to your `tailwind.config.js`:
35
+
36
+ ```javascript
37
+ export default {
38
+ content: [
39
+ './src/**/*.{js,ts,jsx,tsx}',
40
+ './node_modules/@mdigital/ui/dist/**/*.{js,ts,jsx,tsx}',
41
+ ],
42
+ }
43
+ ```
44
+
45
+ ### 2. Import Styles
46
+
47
+ In your main CSS file or layout:
48
+
49
+ ```css
50
+ /* app/globals.css or src/index.css */
51
+ @import '@mdigital/ui/styles/base.css';
52
+ @import '@mdigital/ui/styles/themes/light.css';
53
+
54
+ /* Optional: Dark mode */
55
+ @import '@mdigital/ui/styles/themes/dark.css';
56
+ ```
57
+
58
+ ### 3. Use Components
59
+
60
+ ```tsx
61
+ import { Button, Input, Card } from '@mdigital/ui'
62
+
63
+ function App() {
64
+ return (
65
+ <Card>
66
+ <Input label="Email" placeholder="Enter your email" />
67
+ <Button variant="solid" color="primary">
68
+ Submit
69
+ </Button>
70
+ </Card>
71
+ )
72
+ }
73
+ ```
74
+
75
+ ## Import Patterns
76
+
77
+ ### Named Imports (Recommended)
78
+
79
+ ```tsx
80
+ import { Button, Input, Select } from '@mdigital/ui'
81
+ ```
82
+
83
+ ### Direct Imports (Better Tree-Shaking)
84
+
85
+ ```tsx
86
+ import Button from '@mdigital/ui/button'
87
+ import Input from '@mdigital/ui/input'
88
+ ```
89
+
90
+ ### Type Imports
91
+
92
+ ```tsx
93
+ import type { ButtonProps, InputProps } from '@mdigital/ui'
94
+ ```
95
+
96
+ ## Theming
97
+
98
+ ### CSS Variable Overrides
99
+
100
+ Customize the design system by overriding CSS variables:
101
+
102
+ ```css
103
+ :root {
104
+ /* Brand colors */
105
+ --color-primary: oklch(0.55 0.22 270);
106
+ --color-accent: oklch(0.75 0.18 45);
107
+
108
+ /* Component sizes */
109
+ --button-height-md: 2.5rem;
110
+ --input-height-md: 2.5rem;
111
+
112
+ /* Border radius */
113
+ --radius-md: 0.5rem;
114
+ }
115
+ ```
116
+
117
+ ### Dark Mode
118
+
119
+ Enable dark mode by adding the `dark` class to your HTML element:
120
+
121
+ ```tsx
122
+ // Example with state
123
+ const [isDark, setIsDark] = useState(false)
124
+
125
+ <html className={isDark ? 'dark' : ''}>
126
+ <body>{children}</body>
127
+ </html>
128
+ ```
129
+
130
+ All components automatically adapt to dark mode via CSS variables.
131
+
132
+ ### Creating Custom Themes
133
+
134
+ Create your own theme file:
135
+
136
+ ```css
137
+ /* my-brand-theme.css */
138
+ :root {
139
+ --color-primary: oklch(0.6 0.2 150); /* Green */
140
+ --color-secondary: oklch(0.5 0.15 30); /* Orange */
141
+ --color-background: oklch(98% 0 0);
142
+ --color-text-primary: oklch(20% 0 0);
143
+ }
144
+ ```
145
+
146
+ ## Components
147
+
148
+ ### Core Components
149
+
150
+ - **Button** - Primary action buttons with variants
151
+ - **Input** - Form input with validation
152
+ - **Select** - Dropdown selection
153
+ - **Checkbox** - Toggle option
154
+ - **Radio** - Single selection
155
+ - **Switch** - Toggle switch
156
+ - **Textarea** - Multi-line text input
157
+
158
+ ### Display Components
159
+
160
+ - **Card** - Content container
161
+ - **Badge** - Status indicator
162
+ - **Tag** - Label chip
163
+ - **Avatar** - User profile image
164
+ - **Skeleton** - Loading placeholder
165
+ - **Empty** - Empty state
166
+ - **Spinner** - Loading indicator
167
+
168
+ ### Navigation
169
+
170
+ - **Tabs** - Tabbed navigation
171
+ - **Breadcrumbs** - Hierarchical navigation
172
+ - **Pagination** - Page navigation
173
+ - **Dropdown** - Dropdown menu
174
+
175
+ ### Feedback
176
+
177
+ - **Modal** - Dialog overlay
178
+ - **Drawer** - Side panel
179
+ - **Tooltip** - Hover information
180
+ - **Popover** - Contextual popup
181
+ - **Notification** - Toast message
182
+ - **Progress** - Progress indicator
183
+
184
+ ### Data Display
185
+
186
+ - **Table** - Data table with sorting
187
+ - **Descriptions** - Key-value pairs
188
+ - **Tree** - Hierarchical data
189
+ - **Timeline** - Event timeline
190
+
191
+ ### Advanced
192
+
193
+ - **DatePicker** - Date selection
194
+ - **Upload** - File upload
195
+ - **Transfer** - Dual list selector
196
+ - **Cascader** - Cascading selection
197
+ - **TreeSelect** - Tree selection
198
+
199
+ [See full component list and documentation](https://storybook.mdigital.com)
200
+
201
+ ## Customization
202
+
203
+ ### Three Levels of Customization
204
+
205
+ #### 1. CSS Variables (Global)
206
+
207
+ ```css
208
+ :root {
209
+ --color-primary: oklch(0.55 0.22 270);
210
+ }
211
+ ```
212
+
213
+ #### 2. className Prop (Instance)
214
+
215
+ ```tsx
216
+ <Button className="shadow-lg hover:scale-105">
217
+ Custom Button
218
+ </Button>
219
+ ```
220
+
221
+ #### 3. Wrapper Components (New Variants)
222
+
223
+ ```tsx
224
+ function GlassButton({ className, ...props }) {
225
+ return (
226
+ <Button
227
+ className={cn(
228
+ 'bg-white/10 backdrop-blur-md border-white/20',
229
+ className
230
+ )}
231
+ {...props}
232
+ />
233
+ )
234
+ }
235
+ ```
236
+
237
+ ## TypeScript
238
+
239
+ Full TypeScript support with auto-generated types:
240
+
241
+ ```tsx
242
+ import type { ButtonProps } from '@mdigital/ui'
243
+
244
+ const MyButton: React.FC<ButtonProps> = (props) => {
245
+ return <Button {...props} />
246
+ }
247
+ ```
248
+
249
+ ## Accessibility
250
+
251
+ All components follow WCAG 2.1 AA standards:
252
+
253
+ - ✅ Keyboard navigation
254
+ - ✅ Screen reader support
255
+ - ✅ Focus indicators
256
+ - ✅ ARIA attributes
257
+ - ✅ Color contrast compliance
258
+
259
+ ## Bundle Size
260
+
261
+ Optimized for minimal bundle impact:
262
+
263
+ - Single component: ~3-8kb (gzipped)
264
+ - Full package (tree-shaken): ~20-40kb (gzipped)
265
+ - CSS variables: ~2kb (gzipped)
266
+
267
+ ## Browser Support
268
+
269
+ - Chrome (latest 2 versions)
270
+ - Firefox (latest 2 versions)
271
+ - Safari (latest 2 versions)
272
+ - Edge (latest 2 versions)
273
+
274
+ ## Documentation
275
+
276
+ - [Storybook](https://storybook.mdigital.com) - Interactive component playground
277
+ - [Theming Guide](./docs/theming.md) - Detailed theming documentation
278
+ - [Migration Guide](./docs/migration.md) - Upgrade guides
279
+
280
+ ## Contributing
281
+
282
+ Internal contributions welcome! Please follow the [contribution guidelines](./CONTRIBUTING.md).
283
+
284
+ ## License
285
+
286
+ MIT © MDigital
287
+
288
+ ## Support
289
+
290
+ For issues or questions:
291
+ - Internal Slack: #design-system
292
+ - Issues: [GitHub Issues](https://github.com/mdigital/ui/issues)
293
+
294
+ ---
295
+
296
+ Made with ❤️ by the MDigital Design System Team
@@ -0,0 +1,5 @@
1
+ export { accordion_default as default } from '../chunk-CWHFK7ZC.js';
2
+ import '../chunk-5UEWVFF6.js';
3
+ import '../chunk-YNNAOXU5.js';
4
+ //# sourceMappingURL=index.js.map
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -0,0 +1,5 @@
1
+ export { badge_default as default } from '../chunk-FTJOSVTY.js';
2
+ import '../chunk-5UEWVFF6.js';
3
+ import '../chunk-YNNAOXU5.js';
4
+ //# sourceMappingURL=index.js.map
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -0,0 +1,6 @@
1
+ export { button_default as default } from '../chunk-LBJG2UWT.js';
2
+ import '../chunk-J3G5WWGR.js';
3
+ import '../chunk-5UEWVFF6.js';
4
+ import '../chunk-YNNAOXU5.js';
5
+ //# sourceMappingURL=index.js.map
6
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -0,0 +1,4 @@
1
+ export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants, card_default as default } from '../chunk-XOBGEMQY.js';
2
+ import '../chunk-YNNAOXU5.js';
3
+ //# sourceMappingURL=index.js.map
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -0,0 +1,3 @@
1
+ export { carousel_default as default } from '../chunk-4OMLQCUV.js';
2
+ //# sourceMappingURL=index.js.map
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -0,0 +1,4 @@
1
+ export { cascader_default as default } from '../chunk-SERJ3TZE.js';
2
+ import '../chunk-YNNAOXU5.js';
3
+ //# sourceMappingURL=index.js.map
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -0,0 +1,4 @@
1
+ export { AreaChart, BarChart, ComposedChart, LineChart, PieChart, axisLineStyle, axisTickStyle, chartContainerVariants, cursorStyle, getChartColor, gridStyle, legendStyle, tooltipStyle } from '../chunk-BP434VYV.js';
2
+ import '../chunk-YNNAOXU5.js';
3
+ //# sourceMappingURL=index.js.map
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -0,0 +1,5 @@
1
+ export { checkbox_default as default } from '../chunk-H2HIBD5Y.js';
2
+ import '../chunk-5UEWVFF6.js';
3
+ import '../chunk-YNNAOXU5.js';
4
+ //# sourceMappingURL=index.js.map
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -0,0 +1,4 @@
1
+ export { checkbox_group_default as default } from '../chunk-RPAQAZTI.js';
2
+ import '../chunk-YNNAOXU5.js';
3
+ //# sourceMappingURL=index.js.map
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -0,0 +1,181 @@
1
+ import { spinner_default } from './chunk-J3G5WWGR.js';
2
+ import { getValidationStatus, cn, iconSizes, statusMessageVariants } from './chunk-YNNAOXU5.js';
3
+ import { cva } from 'class-variance-authority';
4
+ import { X } from 'lucide-react';
5
+ import React from 'react';
6
+ import { jsxs, jsx } from 'react/jsx-runtime';
7
+
8
+ var inputVariants = cva(
9
+ "w-full placeholder:text-text-muted rounded-md focus:border-primary disabled:opacity-50 disabled:cursor-not-allowed read-only:bg-surface read-only:cursor-default outline-none text-text-primary transition-colors",
10
+ {
11
+ variants: {
12
+ variant: {
13
+ outline: "bg-background border border-border",
14
+ filled: "bg-surface border border-transparent"
15
+ },
16
+ status: {
17
+ default: "",
18
+ error: "!border-error focus:!border-error",
19
+ warning: "!border-warning focus:!border-warning",
20
+ info: "!border-info focus:!border-info",
21
+ success: "!border-success focus:!border-success"
22
+ },
23
+ size: {
24
+ xs: "h-8 px-3 text-xs",
25
+ sm: "h-[var(--input-height-sm)] px-1 text-sm",
26
+ md: "h-[var(--input-height-md)] px-2 text-base",
27
+ lg: "h-[var(--input-height-lg)] px-3 text-lg"
28
+ },
29
+ fullWidth: {
30
+ true: "w-full",
31
+ false: "max-w-full"
32
+ }
33
+ },
34
+ defaultVariants: {
35
+ variant: "outline",
36
+ status: "default",
37
+ size: "md",
38
+ fullWidth: true
39
+ }
40
+ }
41
+ );
42
+ var Input = React.memo(
43
+ ({
44
+ variant = "outline",
45
+ size = "md",
46
+ label,
47
+ error,
48
+ warning,
49
+ info,
50
+ success,
51
+ helperText,
52
+ messagePosition = "bottom",
53
+ leftIcon,
54
+ rightIcon,
55
+ clearable = false,
56
+ onClear,
57
+ loading = false,
58
+ maxLength,
59
+ showCount = false,
60
+ fullWidth = true,
61
+ className,
62
+ wrapperClassName,
63
+ value,
64
+ onChange,
65
+ ref,
66
+ ...props
67
+ }) => {
68
+ const [internalValue, setInternalValue] = React.useState("");
69
+ const currentValue = value !== void 0 ? value : internalValue;
70
+ const { status, message: helperMessage } = getValidationStatus({
71
+ error,
72
+ warning,
73
+ info,
74
+ success,
75
+ helperText
76
+ });
77
+ const handleChange = React.useCallback(
78
+ (e) => {
79
+ if (value === void 0) setInternalValue(e.target.value);
80
+ onChange?.(e);
81
+ },
82
+ [value, onChange]
83
+ );
84
+ const handleClear = React.useCallback(() => {
85
+ if (value === void 0) setInternalValue("");
86
+ onClear?.();
87
+ }, [value, onClear]);
88
+ const showClear = clearable && currentValue && !props.disabled && !props.readOnly;
89
+ const hasRightIcon = rightIcon || showClear || loading;
90
+ const inputElement = /* @__PURE__ */ jsxs(
91
+ "div",
92
+ {
93
+ className: cn(
94
+ "relative w-full",
95
+ wrapperClassName,
96
+ loading && "opacity-50 cursor-not-allowed"
97
+ ),
98
+ children: [
99
+ leftIcon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-secondary", children: leftIcon }),
100
+ /* @__PURE__ */ jsx(
101
+ "input",
102
+ {
103
+ ref,
104
+ className: cn(
105
+ inputVariants({ variant, status, size, fullWidth }),
106
+ !!leftIcon && "pl-10",
107
+ !!hasRightIcon && "pr-8",
108
+ className
109
+ ),
110
+ value: currentValue,
111
+ onChange: handleChange,
112
+ maxLength,
113
+ "aria-invalid": status === "error",
114
+ "aria-describedby": helperMessage ? `input-helper-${status}` : void 0,
115
+ ...props
116
+ }
117
+ ),
118
+ /* @__PURE__ */ jsxs("div", { className: "absolute right-3 flex gap-2 items-center h-full top-0 text-text-secondary", children: [
119
+ showClear && !loading && /* @__PURE__ */ jsx(
120
+ "button",
121
+ {
122
+ type: "button",
123
+ onClick: handleClear,
124
+ className: "flex items-center h-full top-0 text-text-muted hover:text-text-primary",
125
+ "aria-label": "Clear input",
126
+ children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
127
+ }
128
+ ),
129
+ loading ? /* @__PURE__ */ jsx(spinner_default, {}) : rightIcon
130
+ ] })
131
+ ]
132
+ }
133
+ );
134
+ if (!label && !helperMessage && !showCount) return inputElement;
135
+ return /* @__PURE__ */ jsxs(
136
+ "div",
137
+ {
138
+ className: cn(
139
+ "w-full flex flex-col relative",
140
+ !fullWidth && "inline-block"
141
+ ),
142
+ children: [
143
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center relative mb-0.5", children: [
144
+ label && /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-text-secondary", children: [
145
+ label,
146
+ props.required && /* @__PURE__ */ jsx("span", { className: "text-error ml-1", children: "*" })
147
+ ] }),
148
+ helperMessage && messagePosition === "top" && /* @__PURE__ */ jsx(
149
+ "p",
150
+ {
151
+ id: `input-helper-${status}`,
152
+ className: statusMessageVariants({ status }),
153
+ children: helperMessage
154
+ }
155
+ ),
156
+ showCount && maxLength && /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-secondary absolute right-0", children: [
157
+ String(currentValue).length,
158
+ "/",
159
+ maxLength
160
+ ] })
161
+ ] }),
162
+ inputElement,
163
+ helperMessage && messagePosition === "bottom" && /* @__PURE__ */ jsx(
164
+ "p",
165
+ {
166
+ id: `input-helper-${status}`,
167
+ className: cn(statusMessageVariants({ status }), "mt-0.5"),
168
+ children: helperMessage
169
+ }
170
+ )
171
+ ]
172
+ }
173
+ );
174
+ }
175
+ );
176
+ Input.displayName = "Input";
177
+ var input_default = Input;
178
+
179
+ export { input_default };
180
+ //# sourceMappingURL=chunk-2JGAYDZR.js.map
181
+ //# sourceMappingURL=chunk-2JGAYDZR.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/input/index.tsx"],"names":[],"mappings":"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","file":"chunk-2JGAYDZR.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport { X } from 'lucide-react'\nimport React from 'react'\n\nimport Spinner from '../spinner'\n\nimport {\n cn,\n getValidationStatus,\n iconSizes,\n statusMessageVariants,\n} from '../utils'\nimport type { InputProps } from './types'\n\nconst inputVariants = cva(\n 'w-full placeholder:text-text-muted rounded-md focus:border-primary disabled:opacity-50 disabled:cursor-not-allowed read-only:bg-surface read-only:cursor-default outline-none text-text-primary transition-colors',\n {\n variants: {\n variant: {\n outline: 'bg-background border border-border',\n filled: 'bg-surface border border-transparent',\n },\n status: {\n default: '',\n error: '!border-error focus:!border-error',\n warning: '!border-warning focus:!border-warning',\n info: '!border-info focus:!border-info',\n success: '!border-success focus:!border-success',\n },\n size: {\n xs: 'h-8 px-3 text-xs',\n sm: 'h-[var(--input-height-sm)] px-1 text-sm',\n md: 'h-[var(--input-height-md)] px-2 text-base',\n lg: 'h-[var(--input-height-lg)] px-3 text-lg',\n },\n fullWidth: {\n true: 'w-full',\n false: 'max-w-full',\n },\n },\n defaultVariants: {\n variant: 'outline',\n status: 'default',\n size: 'md',\n fullWidth: true,\n },\n },\n)\n\nconst Input = React.memo<InputProps>(\n ({\n variant = 'outline',\n size = 'md',\n label,\n error,\n warning,\n info,\n success,\n helperText,\n messagePosition = 'bottom',\n leftIcon,\n rightIcon,\n clearable = false,\n onClear,\n loading = false,\n maxLength,\n showCount = false,\n fullWidth = true,\n className,\n wrapperClassName,\n value,\n onChange,\n ref,\n ...props\n }) => {\n const [internalValue, setInternalValue] = React.useState('')\n const currentValue = value !== undefined ? value : internalValue\n\n // Use shared validation status utility\n const { status, message: helperMessage } = getValidationStatus({\n error,\n warning,\n info,\n success,\n helperText,\n })\n\n const handleChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (value === undefined) setInternalValue(e.target.value)\n onChange?.(e)\n },\n [value, onChange],\n )\n\n const handleClear = React.useCallback(() => {\n if (value === undefined) setInternalValue('')\n onClear?.()\n }, [value, onClear])\n\n const showClear =\n clearable && currentValue && !props.disabled && !props.readOnly\n const hasRightIcon = rightIcon || showClear || loading\n\n const inputElement = (\n <div\n className={cn(\n 'relative w-full',\n wrapperClassName,\n loading && 'opacity-50 cursor-not-allowed',\n )}\n >\n {leftIcon && (\n <div className=\"absolute left-3 flex items-center h-full top-0 text-text-secondary\">\n {leftIcon}\n </div>\n )}\n <input\n ref={ref}\n className={cn(\n inputVariants({ variant, status, size, fullWidth }),\n !!leftIcon && 'pl-10',\n !!hasRightIcon && 'pr-8',\n className,\n )}\n value={currentValue}\n onChange={handleChange}\n maxLength={maxLength}\n aria-invalid={status === 'error'}\n aria-describedby={\n helperMessage ? `input-helper-${status}` : undefined\n }\n {...props}\n />\n <div className=\"absolute right-3 flex gap-2 items-center h-full top-0 text-text-secondary\">\n {showClear && !loading && (\n <button\n type=\"button\"\n onClick={handleClear}\n className=\"flex items-center h-full top-0 text-text-muted hover:text-text-primary\"\n aria-label=\"Clear input\"\n >\n <X className={iconSizes[size]} />\n </button>\n )}\n {loading ? <Spinner /> : rightIcon}\n </div>\n </div>\n )\n\n if (!label && !helperMessage && !showCount) return inputElement\n\n return (\n <div\n className={cn(\n 'w-full flex flex-col relative',\n !fullWidth && 'inline-block',\n )}\n >\n <div className=\"flex gap-2 items-center relative mb-0.5\">\n {label && (\n <p className=\"text-sm font-medium text-text-secondary\">\n {label}\n {props.required && <span className=\"text-error ml-1\">*</span>}\n </p>\n )}\n {helperMessage && messagePosition === 'top' && (\n <p\n id={`input-helper-${status}`}\n className={statusMessageVariants({ status })}\n >\n {helperMessage}\n </p>\n )}\n {showCount && maxLength && (\n <span className=\"text-xs text-text-secondary absolute right-0\">\n {String(currentValue).length}/{maxLength}\n </span>\n )}\n </div>\n {inputElement}\n {helperMessage && messagePosition === 'bottom' && (\n <p\n id={`input-helper-${status}`}\n className={cn(statusMessageVariants({ status }), 'mt-0.5')}\n >\n {helperMessage}\n </p>\n )}\n </div>\n )\n },\n)\n\nInput.displayName = 'Input'\n\nexport type * from './types'\nexport default Input\n"]}