@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.
- package/README.md +296 -0
- package/dist/accordion/index.js +5 -0
- package/dist/accordion/index.js.map +1 -0
- package/dist/badge/index.js +5 -0
- package/dist/badge/index.js.map +1 -0
- package/dist/button/index.js +6 -0
- package/dist/button/index.js.map +1 -0
- package/dist/card/index.js +4 -0
- package/dist/card/index.js.map +1 -0
- package/dist/carousel/index.js +3 -0
- package/dist/carousel/index.js.map +1 -0
- package/dist/cascader/index.js +4 -0
- package/dist/cascader/index.js.map +1 -0
- package/dist/chart/index.js +4 -0
- package/dist/chart/index.js.map +1 -0
- package/dist/checkbox/index.js +5 -0
- package/dist/checkbox/index.js.map +1 -0
- package/dist/checkbox-group/index.js +4 -0
- package/dist/checkbox-group/index.js.map +1 -0
- package/dist/chunk-2JGAYDZR.js +181 -0
- package/dist/chunk-2JGAYDZR.js.map +1 -0
- package/dist/chunk-3PFA3YG6.js +228 -0
- package/dist/chunk-3PFA3YG6.js.map +1 -0
- package/dist/chunk-4OMLQCUV.js +96 -0
- package/dist/chunk-4OMLQCUV.js.map +1 -0
- package/dist/chunk-4P5EMRFI.js +298 -0
- package/dist/chunk-4P5EMRFI.js.map +1 -0
- package/dist/chunk-5UEWVFF6.js +212 -0
- package/dist/chunk-5UEWVFF6.js.map +1 -0
- package/dist/chunk-5VCGW53O.js +332 -0
- package/dist/chunk-5VCGW53O.js.map +1 -0
- package/dist/chunk-75XESYGN.js +49 -0
- package/dist/chunk-75XESYGN.js.map +1 -0
- package/dist/chunk-7AEGBABZ.js +1102 -0
- package/dist/chunk-7AEGBABZ.js.map +1 -0
- package/dist/chunk-AOITJRSV.js +134 -0
- package/dist/chunk-AOITJRSV.js.map +1 -0
- package/dist/chunk-AWPKZYHT.js +152 -0
- package/dist/chunk-AWPKZYHT.js.map +1 -0
- package/dist/chunk-BNILRB4T.js +37 -0
- package/dist/chunk-BNILRB4T.js.map +1 -0
- package/dist/chunk-BP434VYV.js +448 -0
- package/dist/chunk-BP434VYV.js.map +1 -0
- package/dist/chunk-C7SXY3ZV.js +65 -0
- package/dist/chunk-C7SXY3ZV.js.map +1 -0
- package/dist/chunk-CLLQDCDR.js +560 -0
- package/dist/chunk-CLLQDCDR.js.map +1 -0
- package/dist/chunk-CWHFK7ZC.js +128 -0
- package/dist/chunk-CWHFK7ZC.js.map +1 -0
- package/dist/chunk-D3JWPGCA.js +123 -0
- package/dist/chunk-D3JWPGCA.js.map +1 -0
- package/dist/chunk-DOKTHDG3.js +55 -0
- package/dist/chunk-DOKTHDG3.js.map +1 -0
- package/dist/chunk-DPOSWW22.js +126 -0
- package/dist/chunk-DPOSWW22.js.map +1 -0
- package/dist/chunk-E2CYDDYC.js +39 -0
- package/dist/chunk-E2CYDDYC.js.map +1 -0
- package/dist/chunk-EYTOKUBM.js +401 -0
- package/dist/chunk-EYTOKUBM.js.map +1 -0
- package/dist/chunk-FGWSUPVW.js +356 -0
- package/dist/chunk-FGWSUPVW.js.map +1 -0
- package/dist/chunk-FPOXTCYV.js +166 -0
- package/dist/chunk-FPOXTCYV.js.map +1 -0
- package/dist/chunk-FTJOSVTY.js +104 -0
- package/dist/chunk-FTJOSVTY.js.map +1 -0
- package/dist/chunk-FYHQDFKE.js +164 -0
- package/dist/chunk-FYHQDFKE.js.map +1 -0
- package/dist/chunk-H2HIBD5Y.js +158 -0
- package/dist/chunk-H2HIBD5Y.js.map +1 -0
- package/dist/chunk-J3G5WWGR.js +53 -0
- package/dist/chunk-J3G5WWGR.js.map +1 -0
- package/dist/chunk-JZCHZ4B3.js +487 -0
- package/dist/chunk-JZCHZ4B3.js.map +1 -0
- package/dist/chunk-KBCBVH7B.js +51 -0
- package/dist/chunk-KBCBVH7B.js.map +1 -0
- package/dist/chunk-KNQ7UQ2W.js +143 -0
- package/dist/chunk-KNQ7UQ2W.js.map +1 -0
- package/dist/chunk-KTBPIEP2.js +102 -0
- package/dist/chunk-KTBPIEP2.js.map +1 -0
- package/dist/chunk-L3SP7GHC.js +1023 -0
- package/dist/chunk-L3SP7GHC.js.map +1 -0
- package/dist/chunk-LBJG2UWT.js +100 -0
- package/dist/chunk-LBJG2UWT.js.map +1 -0
- package/dist/chunk-MLDX3Z67.js +470 -0
- package/dist/chunk-MLDX3Z67.js.map +1 -0
- package/dist/chunk-NNSS366W.js +331 -0
- package/dist/chunk-NNSS366W.js.map +1 -0
- package/dist/chunk-OQANRZPV.js +197 -0
- package/dist/chunk-OQANRZPV.js.map +1 -0
- package/dist/chunk-OW5A5IIF.js +175 -0
- package/dist/chunk-OW5A5IIF.js.map +1 -0
- package/dist/chunk-R225A5II.js +187 -0
- package/dist/chunk-R225A5II.js.map +1 -0
- package/dist/chunk-ROR4E6IE.js +119 -0
- package/dist/chunk-ROR4E6IE.js.map +1 -0
- package/dist/chunk-RPAQAZTI.js +54 -0
- package/dist/chunk-RPAQAZTI.js.map +1 -0
- package/dist/chunk-RQBXZKTH.js +452 -0
- package/dist/chunk-RQBXZKTH.js.map +1 -0
- package/dist/chunk-S5XJXU52.js +178 -0
- package/dist/chunk-S5XJXU52.js.map +1 -0
- package/dist/chunk-SAVE5ACL.js +324 -0
- package/dist/chunk-SAVE5ACL.js.map +1 -0
- package/dist/chunk-SERJ3TZE.js +640 -0
- package/dist/chunk-SERJ3TZE.js.map +1 -0
- package/dist/chunk-SK5ECBBK.js +175 -0
- package/dist/chunk-SK5ECBBK.js.map +1 -0
- package/dist/chunk-SOV4PE3P.js +218 -0
- package/dist/chunk-SOV4PE3P.js.map +1 -0
- package/dist/chunk-W7BQYIXF.js +687 -0
- package/dist/chunk-W7BQYIXF.js.map +1 -0
- package/dist/chunk-XMAH5PDW.js +59 -0
- package/dist/chunk-XMAH5PDW.js.map +1 -0
- package/dist/chunk-XOBGEMQY.js +94 -0
- package/dist/chunk-XOBGEMQY.js.map +1 -0
- package/dist/chunk-YNNAOXU5.js +57 -0
- package/dist/chunk-YNNAOXU5.js.map +1 -0
- package/dist/chunk-YZVSDRJD.js +253 -0
- package/dist/chunk-YZVSDRJD.js.map +1 -0
- package/dist/collapse/index.js +4 -0
- package/dist/collapse/index.js.map +1 -0
- package/dist/command/index.js +5 -0
- package/dist/command/index.js.map +1 -0
- package/dist/date-picker/index.js +5 -0
- package/dist/date-picker/index.js.map +1 -0
- package/dist/descriptions/index.js +4 -0
- package/dist/descriptions/index.js.map +1 -0
- package/dist/drawer/index.js +4 -0
- package/dist/drawer/index.js.map +1 -0
- package/dist/dropdown/index.js +5 -0
- package/dist/dropdown/index.js.map +1 -0
- package/dist/empty/index.js +4 -0
- package/dist/empty/index.js.map +1 -0
- package/dist/fetching-overlay/index.js +5 -0
- package/dist/fetching-overlay/index.js.map +1 -0
- package/dist/image/index.js +4 -0
- package/dist/image/index.js.map +1 -0
- package/dist/index.d.ts +2672 -0
- package/dist/index.js +976 -0
- package/dist/index.js.map +1 -0
- package/dist/input/index.js +5 -0
- package/dist/input/index.js.map +1 -0
- package/dist/input-group/index.js +4 -0
- package/dist/input-group/index.js.map +1 -0
- package/dist/input-otp/index.js +4 -0
- package/dist/input-otp/index.js.map +1 -0
- package/dist/input-password/index.js +6 -0
- package/dist/input-password/index.js.map +1 -0
- package/dist/kbd/index.js +4 -0
- package/dist/kbd/index.js.map +1 -0
- package/dist/modal/index.js +4 -0
- package/dist/modal/index.js.map +1 -0
- package/dist/multi-select/index.js +5 -0
- package/dist/multi-select/index.js.map +1 -0
- package/dist/notification/index.js +4 -0
- package/dist/notification/index.js.map +1 -0
- package/dist/pagination/index.js +4 -0
- package/dist/pagination/index.js.map +1 -0
- package/dist/popover/index.js +4 -0
- package/dist/popover/index.js.map +1 -0
- package/dist/progress/index.js +4 -0
- package/dist/progress/index.js.map +1 -0
- package/dist/radio/index.js +4 -0
- package/dist/radio/index.js.map +1 -0
- package/dist/radio-group/index.js +4 -0
- package/dist/radio-group/index.js.map +1 -0
- package/dist/rating/index.js +4 -0
- package/dist/rating/index.js.map +1 -0
- package/dist/ribbon/index.js +4 -0
- package/dist/ribbon/index.js.map +1 -0
- package/dist/select/index.js +6 -0
- package/dist/select/index.js.map +1 -0
- package/dist/skeleton/index.js +4 -0
- package/dist/skeleton/index.js.map +1 -0
- package/dist/slider/index.js +4 -0
- package/dist/slider/index.js.map +1 -0
- package/dist/spinner/index.js +4 -0
- package/dist/spinner/index.js.map +1 -0
- package/dist/stepper/index.js +4 -0
- package/dist/stepper/index.js.map +1 -0
- package/dist/styles/base.css +161 -0
- package/dist/styles/global.css +633 -0
- package/dist/styles/themes/dark.css +84 -0
- package/dist/styles/themes/light.css +84 -0
- package/dist/switch/index.js +4 -0
- package/dist/switch/index.js.map +1 -0
- package/dist/table/index.js +12 -0
- package/dist/table/index.js.map +1 -0
- package/dist/tabs/index.js +5 -0
- package/dist/tabs/index.js.map +1 -0
- package/dist/textarea/index.js +4 -0
- package/dist/textarea/index.js.map +1 -0
- package/dist/toggle/index.js +4 -0
- package/dist/toggle/index.js.map +1 -0
- package/dist/toggle-group/index.js +4 -0
- package/dist/toggle-group/index.js.map +1 -0
- package/dist/tooltip/index.js +4 -0
- package/dist/tooltip/index.js.map +1 -0
- package/dist/transfer/index.js +6 -0
- package/dist/transfer/index.js.map +1 -0
- package/dist/tree/index.js +4 -0
- package/dist/tree/index.js.map +1 -0
- package/dist/tree-select/index.js +6 -0
- package/dist/tree-select/index.js.map +1 -0
- 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 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -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 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -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"]}
|