@machinemetrics/mm-react-components 0.2.3-1 → 0.2.3-10
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 +96 -30
- package/agent-docs/agent-documentation-reference.md +247 -0
- package/agent-docs/ai-agent-guide.md +554 -0
- package/agent-docs/ai-agent-init-guide.md +461 -0
- package/agent-docs/chakra-migration-readme.md +265 -0
- package/agent-docs/chakra-migration-troubleshooting.md +649 -0
- package/agent-docs/component-mapping-reference.md +466 -0
- package/agent-docs/init-readme.md +283 -0
- package/agent-docs/init-troubleshooting.md +550 -0
- package/agent-docs/setup-reference.md +365 -0
- package/dist/App.d.ts.map +1 -1
- package/dist/README.md +96 -30
- package/dist/components/ui/alert-dialog.d.ts +15 -0
- package/dist/components/ui/alert-dialog.d.ts.map +1 -0
- package/dist/components/ui/alert.d.ts +10 -0
- package/dist/components/ui/alert.d.ts.map +1 -0
- package/dist/components/ui/avatar.d.ts +7 -0
- package/dist/components/ui/avatar.d.ts.map +1 -0
- package/dist/components/ui/breadcrumb.d.ts +12 -0
- package/dist/components/ui/breadcrumb.d.ts.map +1 -0
- package/dist/components/ui/button.d.ts +1 -1
- package/dist/components/ui/button.d.ts.map +1 -1
- package/dist/components/ui/card.d.ts +10 -0
- package/dist/components/ui/card.d.ts.map +1 -0
- package/dist/components/ui/chart.d.ts +41 -0
- package/dist/components/ui/chart.d.ts.map +1 -0
- package/dist/components/ui/form.d.ts +25 -0
- package/dist/components/ui/form.d.ts.map +1 -0
- package/dist/components/ui/progress.d.ts +1 -0
- package/dist/components/ui/progress.d.ts.map +1 -1
- package/dist/components/ui/separator.d.ts +5 -0
- package/dist/components/ui/separator.d.ts.map +1 -0
- package/dist/components/ui/sonner.d.ts +4 -0
- package/dist/components/ui/sonner.d.ts.map +1 -0
- package/dist/components/ui/textarea.d.ts +4 -0
- package/dist/components/ui/textarea.d.ts.map +1 -0
- package/dist/docs/GETTING_STARTED.md +293 -0
- package/dist/index.d.ts +14 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/lib/mm-react-components.css +1 -0
- package/dist/main.d.ts +0 -1
- package/dist/main.d.ts.map +1 -1
- package/dist/mm-react-components.es.js +10964 -927
- package/dist/mm-react-components.es.js.map +1 -1
- package/dist/mm-react-components.umd.js +27 -9
- package/dist/mm-react-components.umd.js.map +1 -1
- package/dist/preview/AlertDialogPreview.d.ts +2 -0
- package/dist/preview/AlertDialogPreview.d.ts.map +1 -0
- package/dist/preview/AlertPreview.d.ts +2 -0
- package/dist/preview/AlertPreview.d.ts.map +1 -0
- package/dist/preview/AvatarPreview.d.ts +2 -0
- package/dist/preview/AvatarPreview.d.ts.map +1 -0
- package/dist/preview/BreadcrumbPreview.d.ts +2 -0
- package/dist/preview/BreadcrumbPreview.d.ts.map +1 -0
- package/dist/preview/CardPreview.d.ts +2 -0
- package/dist/preview/CardPreview.d.ts.map +1 -0
- package/dist/preview/ChartPreview.d.ts +2 -0
- package/dist/preview/ChartPreview.d.ts.map +1 -0
- package/dist/preview/CheckboxPreview.d.ts.map +1 -1
- package/dist/preview/DataTablePreview.d.ts.map +1 -1
- package/dist/preview/FormPreview.d.ts +2 -0
- package/dist/preview/FormPreview.d.ts.map +1 -0
- package/dist/preview/InputPreview.d.ts.map +1 -1
- package/dist/preview/LabelPreview.d.ts.map +1 -1
- package/dist/preview/RadioGroupPreview.d.ts.map +1 -1
- package/dist/preview/SeparatorPreview.d.ts +2 -0
- package/dist/preview/SeparatorPreview.d.ts.map +1 -0
- package/dist/preview/SonnerPreview.d.ts +2 -0
- package/dist/preview/SonnerPreview.d.ts.map +1 -0
- package/dist/preview/TabsPreview.d.ts.map +1 -1
- package/dist/preview/TextareaPreview.d.ts +2 -0
- package/dist/preview/TextareaPreview.d.ts.map +1 -0
- package/dist/preview/data-table/data-table-preview_column-content.d.ts +1 -1
- package/dist/preview/data-table/data-table-preview_column-content.d.ts.map +1 -1
- package/dist/preview/page-header/PageHeaderPreview.d.ts.map +1 -1
- package/dist/scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.config.json +512 -0
- package/dist/scripts/chakra-to-shadcn-migrator/lib/args.js +63 -0
- package/dist/scripts/chakra-to-shadcn-migrator/lib/colors.js +14 -0
- package/dist/scripts/chakra-to-shadcn-migrator/lib/config.js +15 -0
- package/dist/scripts/chakra-to-shadcn-migrator/lib/deps.js +125 -0
- package/dist/scripts/chakra-to-shadcn-migrator/lib/file-io.js +44 -0
- package/dist/scripts/chakra-to-shadcn-migrator/lib/render.js +89 -0
- package/dist/scripts/chakra-to-shadcn-migrator/lib/transform.js +550 -0
- package/dist/scripts/chakra-to-shadcn-migrator/package.json +11 -0
- package/dist/scripts/init.cjs +207 -0
- package/dist/tailwind.base.config.js +88 -0
- package/dist/themes/carbide.css +187 -32
- package/package.json +58 -10
- package/src/index.css +99 -498
- package/dist/index.css +0 -536
- package/dist/tailwind.config.export.js +0 -153
- package/dist/themes/complete.css +0 -8
- package/scripts/README.md +0 -171
- package/scripts/chakra-to-shadcn-migrator/README.md +0 -107
- package/src/themes/carbide.css +0 -1257
- package/src/themes/complete.css +0 -8
- package/tailwind.config.export.js +0 -153
- /package/{scripts → dist/scripts}/chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js +0 -0
|
@@ -0,0 +1,365 @@
|
|
|
1
|
+
# Setup Reference for AI Agents
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
This reference provides detailed setup instructions for the MachineMetrics React Components library. The library uses a **ZERO-CONFIG** approach - no build tools or configuration files required.
|
|
6
|
+
|
|
7
|
+
## Setup Approach
|
|
8
|
+
|
|
9
|
+
The library provides pre-compiled CSS with everything included:
|
|
10
|
+
|
|
11
|
+
- Uses `/styles` import (pre-compiled CSS)
|
|
12
|
+
- No build tools required
|
|
13
|
+
- No configuration files needed
|
|
14
|
+
- 118 KB CSS (18 KB gzipped)
|
|
15
|
+
|
|
16
|
+
## Dependencies
|
|
17
|
+
|
|
18
|
+
### Required
|
|
19
|
+
|
|
20
|
+
| Package | Version | Purpose |
|
|
21
|
+
| ------------------------------------- | ------- | ------------------ |
|
|
22
|
+
| `@machinemetrics/mm-react-components` | latest | Component library |
|
|
23
|
+
| `react` | ^19.1.1 | React library |
|
|
24
|
+
| `react-dom` | ^19.1.1 | React DOM renderer |
|
|
25
|
+
|
|
26
|
+
**That's it!** No build tools required.
|
|
27
|
+
|
|
28
|
+
## Configuration
|
|
29
|
+
|
|
30
|
+
### CSS Import
|
|
31
|
+
|
|
32
|
+
**File**: `src/index.css` (or `src/main.css`)
|
|
33
|
+
|
|
34
|
+
```css
|
|
35
|
+
/* MM React Components - Pre-compiled CSS */
|
|
36
|
+
@import '@machinemetrics/mm-react-components/styles';
|
|
37
|
+
|
|
38
|
+
/* Your existing CSS here */
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
**That's it!** No other configuration files needed.
|
|
42
|
+
|
|
43
|
+
**Alternative locations**:
|
|
44
|
+
|
|
45
|
+
- `src/App.css`
|
|
46
|
+
- `src/styles.css`
|
|
47
|
+
- `src/global.css`
|
|
48
|
+
|
|
49
|
+
### 4. Package.json Scripts
|
|
50
|
+
|
|
51
|
+
**Recommended scripts**:
|
|
52
|
+
|
|
53
|
+
```json
|
|
54
|
+
{
|
|
55
|
+
"scripts": {
|
|
56
|
+
"dev": "vite",
|
|
57
|
+
"build": "vite build",
|
|
58
|
+
"preview": "vite preview",
|
|
59
|
+
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
60
|
+
"type-check": "tsc --noEmit"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Framework-Specific Setup
|
|
66
|
+
|
|
67
|
+
### React with Vite
|
|
68
|
+
|
|
69
|
+
**Project creation**:
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
npm create vite@latest my-app -- --template react-ts
|
|
73
|
+
cd my-app
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
**Setup**:
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
# Install the component library
|
|
80
|
+
npm install @machinemetrics/mm-react-components
|
|
81
|
+
|
|
82
|
+
# Add CSS import to src/index.css
|
|
83
|
+
echo '@import "@machinemetrics/mm-react-components/styles";' | cat - src/index.css > temp && mv temp src/index.css
|
|
84
|
+
|
|
85
|
+
# Add Carbide class to src/App.tsx root element
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
**No Vite configuration needed!** Just import and use components.
|
|
89
|
+
|
|
90
|
+
### Next.js
|
|
91
|
+
|
|
92
|
+
**Project creation**:
|
|
93
|
+
|
|
94
|
+
```bash
|
|
95
|
+
npx create-next-app@latest my-app --typescript
|
|
96
|
+
cd my-app
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
**Required dependencies**:
|
|
100
|
+
|
|
101
|
+
```bash
|
|
102
|
+
npm install @machinemetrics/mm-react-components
|
|
103
|
+
npm install class-variance-authority clsx tailwind-merge @radix-ui/react-slot lucide-react
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
**Next.js configuration**:
|
|
107
|
+
|
|
108
|
+
```javascript
|
|
109
|
+
// next.config.js
|
|
110
|
+
/** @type {import('next').NextConfig} */
|
|
111
|
+
const nextConfig = {
|
|
112
|
+
transpilePackages: ['@machinemetrics/mm-react-components'],
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
module.exports = nextConfig;
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Create React App
|
|
119
|
+
|
|
120
|
+
**Project creation**:
|
|
121
|
+
|
|
122
|
+
```bash
|
|
123
|
+
npx create-react-app my-app --template typescript
|
|
124
|
+
cd my-app
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
**Required dependencies**:
|
|
128
|
+
|
|
129
|
+
```bash
|
|
130
|
+
npm install @machinemetrics/mm-react-components
|
|
131
|
+
npm install class-variance-authority clsx tailwind-merge @radix-ui/react-slot lucide-react
|
|
132
|
+
npm install -D tailwindcss autoprefixer postcss
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
**CRA configuration**:
|
|
136
|
+
|
|
137
|
+
```javascript
|
|
138
|
+
// craco.config.js (if using CRACO)
|
|
139
|
+
module.exports = {
|
|
140
|
+
style: {
|
|
141
|
+
postcss: {
|
|
142
|
+
plugins: [require('tailwindcss'), require('autoprefixer')],
|
|
143
|
+
},
|
|
144
|
+
},
|
|
145
|
+
};
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## Component Usage Patterns
|
|
149
|
+
|
|
150
|
+
### Basic Component Import
|
|
151
|
+
|
|
152
|
+
```tsx
|
|
153
|
+
import { Button, Input, Card } from '@machinemetrics/mm-react-components';
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### Component with Icons
|
|
157
|
+
|
|
158
|
+
```tsx
|
|
159
|
+
import { Button } from '@machinemetrics/mm-react-components';
|
|
160
|
+
import { Plus, Trash2 } from 'lucide-react';
|
|
161
|
+
|
|
162
|
+
function MyComponent() {
|
|
163
|
+
return (
|
|
164
|
+
<Button>
|
|
165
|
+
<Plus className="w-4 h-4" />
|
|
166
|
+
Add Item
|
|
167
|
+
</Button>
|
|
168
|
+
);
|
|
169
|
+
}
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### Custom Styling
|
|
173
|
+
|
|
174
|
+
```tsx
|
|
175
|
+
import { Button } from '@machinemetrics/mm-react-components';
|
|
176
|
+
import { cn } from '@machinemetrics/mm-react-components';
|
|
177
|
+
|
|
178
|
+
function CustomButton({ className, ...props }) {
|
|
179
|
+
return <Button className={cn('custom-styles', className)} {...props} />;
|
|
180
|
+
}
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Theme Application
|
|
184
|
+
|
|
185
|
+
```tsx
|
|
186
|
+
// App.tsx
|
|
187
|
+
import '@machinemetrics/mm-react-components/themes/carbide';
|
|
188
|
+
|
|
189
|
+
function App() {
|
|
190
|
+
return (
|
|
191
|
+
<div className="carbide">
|
|
192
|
+
<YourApp />
|
|
193
|
+
</div>
|
|
194
|
+
);
|
|
195
|
+
}
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
## Troubleshooting Reference
|
|
199
|
+
|
|
200
|
+
### Common Error Messages
|
|
201
|
+
|
|
202
|
+
| Error | Cause | Solution |
|
|
203
|
+
| ----------------------------------------------------------------------- | ----------------------- | ------------------------------------------------- |
|
|
204
|
+
| `Module not found: Can't resolve '@machinemetrics/mm-react-components'` | Package not installed | `npm install @machinemetrics/mm-react-components` |
|
|
205
|
+
| `Cannot find module 'tailwindcss'` | Tailwind not installed | `npm install -D tailwindcss` |
|
|
206
|
+
| `PostCSS plugin tailwindcss requires Tailwind CSS` | Tailwind config missing | Create `tailwind.config.js` |
|
|
207
|
+
| `Cannot resolve dependency 'lucide-react'` | Icons package missing | `npm install lucide-react` |
|
|
208
|
+
| `Cannot find module 'clsx'` | Utility missing | `npm install clsx` |
|
|
209
|
+
|
|
210
|
+
### Build Issues
|
|
211
|
+
|
|
212
|
+
| Issue | Cause | Solution |
|
|
213
|
+
| --------------------------- | -------------------------- | --------------------------------------------- |
|
|
214
|
+
| Build fails with CSS errors | PostCSS not configured | Create `postcss.config.js` |
|
|
215
|
+
| Components not styled | Theme not imported | Import Carbide theme in CSS |
|
|
216
|
+
| Icons not displaying | Lucide React not installed | `npm install lucide-react` |
|
|
217
|
+
| TypeScript errors | Types not found | Install `@types/react` and `@types/react-dom` |
|
|
218
|
+
|
|
219
|
+
### Runtime Issues
|
|
220
|
+
|
|
221
|
+
| Issue | Cause | Solution |
|
|
222
|
+
| -------------------------- | ------------------------- | ----------------------------------------- |
|
|
223
|
+
| Components render unstyled | Carbide class not applied | Add `className="carbide"` to root |
|
|
224
|
+
| Icons not showing | Import path incorrect | Use `import { Icon } from 'lucide-react'` |
|
|
225
|
+
| Styling conflicts | CSS order issues | Import theme CSS first |
|
|
226
|
+
| Performance issues | Bundle size | Use tree shaking for imports |
|
|
227
|
+
|
|
228
|
+
## Validation Steps
|
|
229
|
+
|
|
230
|
+
### 1. Dependency Check
|
|
231
|
+
|
|
232
|
+
```bash
|
|
233
|
+
# Check if all dependencies are installed
|
|
234
|
+
npm list @machinemetrics/mm-react-components
|
|
235
|
+
npm list tailwindcss
|
|
236
|
+
npm list lucide-react
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
### 2. Configuration Check
|
|
240
|
+
|
|
241
|
+
```bash
|
|
242
|
+
# Verify configuration files exist
|
|
243
|
+
ls -la tailwind.config.js
|
|
244
|
+
ls -la postcss.config.js
|
|
245
|
+
ls -la src/index.css
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
### 3. Import Test
|
|
249
|
+
|
|
250
|
+
```tsx
|
|
251
|
+
// Test component import
|
|
252
|
+
import { Button } from '@machinemetrics/mm-react-components';
|
|
253
|
+
|
|
254
|
+
function TestComponent() {
|
|
255
|
+
return <Button>Test</Button>;
|
|
256
|
+
}
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
### 4. Theme Test
|
|
260
|
+
|
|
261
|
+
```tsx
|
|
262
|
+
// Test theme application
|
|
263
|
+
function ThemeTest() {
|
|
264
|
+
return (
|
|
265
|
+
<div className="carbide">
|
|
266
|
+
<div className="bg-primary text-primary-foreground p-4">Theme Test</div>
|
|
267
|
+
</div>
|
|
268
|
+
);
|
|
269
|
+
}
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
### 5. Build Test
|
|
273
|
+
|
|
274
|
+
```bash
|
|
275
|
+
# Test build process
|
|
276
|
+
npm run build
|
|
277
|
+
|
|
278
|
+
# Test development server
|
|
279
|
+
npm run dev
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
## Performance Optimization
|
|
283
|
+
|
|
284
|
+
### Bundle Size Optimization
|
|
285
|
+
|
|
286
|
+
```tsx
|
|
287
|
+
// Import only needed components
|
|
288
|
+
import { Button } from '@machinemetrics/mm-react-components';
|
|
289
|
+
|
|
290
|
+
// Instead of
|
|
291
|
+
import * as Components from '@machinemetrics/mm-react-components';
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
### Tree Shaking
|
|
295
|
+
|
|
296
|
+
```javascript
|
|
297
|
+
// webpack.config.js
|
|
298
|
+
module.exports = {
|
|
299
|
+
optimization: {
|
|
300
|
+
usedExports: true,
|
|
301
|
+
sideEffects: false,
|
|
302
|
+
},
|
|
303
|
+
};
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
### CSS Optimization
|
|
307
|
+
|
|
308
|
+
```css
|
|
309
|
+
/* Use only needed theme parts */
|
|
310
|
+
@import '@machinemetrics/mm-react-components/themes/carbide';
|
|
311
|
+
|
|
312
|
+
/* Purge unused CSS */
|
|
313
|
+
/* Tailwind will automatically purge unused styles */
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
## Security Considerations
|
|
317
|
+
|
|
318
|
+
### Dependency Security
|
|
319
|
+
|
|
320
|
+
```bash
|
|
321
|
+
# Check for vulnerabilities
|
|
322
|
+
npm audit
|
|
323
|
+
|
|
324
|
+
# Fix vulnerabilities
|
|
325
|
+
npm audit fix
|
|
326
|
+
```
|
|
327
|
+
|
|
328
|
+
### Content Security Policy
|
|
329
|
+
|
|
330
|
+
```html
|
|
331
|
+
<!-- Add CSP for external resources -->
|
|
332
|
+
<meta
|
|
333
|
+
http-equiv="Content-Security-Policy"
|
|
334
|
+
content="default-src 'self'; style-src 'self' 'unsafe-inline';"
|
|
335
|
+
/>
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
## Monitoring and Debugging
|
|
339
|
+
|
|
340
|
+
### Development Tools
|
|
341
|
+
|
|
342
|
+
```tsx
|
|
343
|
+
// Add development helpers
|
|
344
|
+
if (process.env.NODE_ENV === 'development') {
|
|
345
|
+
console.log('MM Components loaded');
|
|
346
|
+
}
|
|
347
|
+
```
|
|
348
|
+
|
|
349
|
+
### Error Boundaries
|
|
350
|
+
|
|
351
|
+
```tsx
|
|
352
|
+
import { ErrorBoundary } from 'react-error-boundary';
|
|
353
|
+
|
|
354
|
+
function App() {
|
|
355
|
+
return (
|
|
356
|
+
<ErrorBoundary fallback={<div>Something went wrong</div>}>
|
|
357
|
+
<YourApp />
|
|
358
|
+
</ErrorBoundary>
|
|
359
|
+
);
|
|
360
|
+
}
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
## Conclusion
|
|
364
|
+
|
|
365
|
+
This reference provides comprehensive setup instructions for the MachineMetrics React Components library. Use this as a guide for automated setup tools and manual configuration processes. Always test your setup thoroughly to ensure everything is working correctly.
|
package/dist/App.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAsEA,iBAAS,GAAG,4CAmPX;AAED,eAAe,GAAG,CAAC"}
|
package/dist/README.md
CHANGED
|
@@ -17,39 +17,89 @@ A comprehensive React component library designed specifically for MachineMetrics
|
|
|
17
17
|
npm install @machinemetrics/mm-react-components
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
+
**Required Dependencies:**
|
|
21
|
+
|
|
22
|
+
- React 19+
|
|
23
|
+
- React DOM 19+
|
|
24
|
+
|
|
25
|
+
**Optional Dependencies (only if using `/themes/carbide`):**
|
|
26
|
+
|
|
27
|
+
- Tailwind CSS 4.0+
|
|
28
|
+
- PostCSS 8.5+
|
|
29
|
+
- Autoprefixer 10+
|
|
30
|
+
|
|
31
|
+
> 💡 **Note:** When using `/styles` (recommended), no build tools are required! The CSS is fully compiled.
|
|
32
|
+
|
|
20
33
|
## Quick Start
|
|
21
34
|
|
|
22
|
-
###
|
|
35
|
+
### 🚀 Automated Setup (Recommended)
|
|
36
|
+
|
|
37
|
+
The fastest way to get started:
|
|
23
38
|
|
|
24
39
|
```bash
|
|
25
|
-
|
|
40
|
+
# Install the package
|
|
41
|
+
npm install @machinemetrics/mm-react-components
|
|
42
|
+
|
|
43
|
+
# Run the automated setup
|
|
44
|
+
npx @machinemetrics/mm-react-components/setup
|
|
26
45
|
```
|
|
27
46
|
|
|
28
|
-
|
|
47
|
+
This will automatically:
|
|
48
|
+
|
|
49
|
+
- ✅ Copy Tailwind configuration
|
|
50
|
+
- ✅ Create PostCSS configuration
|
|
51
|
+
- ✅ Set up the complete theme
|
|
52
|
+
- ✅ Create an example component
|
|
53
|
+
- ✅ Generate all necessary files
|
|
54
|
+
|
|
55
|
+
### 📋 Manual Setup
|
|
29
56
|
|
|
30
|
-
|
|
57
|
+
If you prefer manual setup:
|
|
58
|
+
|
|
59
|
+
#### 1. Install the Library
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
npm install @machinemetrics/mm-react-components
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
**Optional:** Only install Tailwind if you want to use `/themes/carbide` instead of `/styles`:
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
npm install -D tailwindcss postcss autoprefixer
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
#### 2. (Optional) Configure Tailwind CSS
|
|
72
|
+
|
|
73
|
+
> 💡 Skip this step if using `/styles` - Tailwind configuration is not needed!
|
|
74
|
+
|
|
75
|
+
**Only if using `/themes/carbide`:**
|
|
31
76
|
|
|
32
77
|
```bash
|
|
33
78
|
cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
|
|
34
79
|
```
|
|
35
80
|
|
|
36
|
-
|
|
81
|
+
Note: The exported config is the main config (no preview-only utilities). The preview app in this repo uses a separate `tailwind.preview.config.js` that imports the main config and adds preview utilities.
|
|
37
82
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
83
|
+
#### 3. Import Styles
|
|
84
|
+
|
|
85
|
+
Import the complete styles including Tailwind CSS, base styles, and Carbide theme:
|
|
86
|
+
|
|
87
|
+
```ts
|
|
88
|
+
// In your main entry (e.g., src/main.tsx)
|
|
89
|
+
import '@machinemetrics/mm-react-components/styles';
|
|
90
|
+
document.documentElement.classList.add('carbide');
|
|
41
91
|
```
|
|
42
92
|
|
|
43
|
-
**
|
|
93
|
+
**What's included in `/styles` (118 KB, 18 KB gzipped):**
|
|
44
94
|
|
|
45
|
-
- ✅ Tailwind CSS reset
|
|
95
|
+
- ✅ Tailwind CSS reset and utilities (compiled)
|
|
46
96
|
- ✅ Base theme variables (OKLCH color system)
|
|
47
97
|
- ✅ Carbide industrial theme
|
|
48
|
-
- ✅ All component styles
|
|
98
|
+
- ✅ All component styles (focus states, rings, borders, etc.)
|
|
49
99
|
- ✅ Dark mode support
|
|
50
100
|
- ✅ Animations and utilities
|
|
51
101
|
|
|
52
|
-
|
|
102
|
+
#### 4. Use Components
|
|
53
103
|
|
|
54
104
|
```tsx
|
|
55
105
|
import { Button, Input } from '@machinemetrics/mm-react-components';
|
|
@@ -64,9 +114,11 @@ function App() {
|
|
|
64
114
|
}
|
|
65
115
|
```
|
|
66
116
|
|
|
67
|
-
###
|
|
117
|
+
### 📚 Documentation
|
|
68
118
|
|
|
69
|
-
|
|
119
|
+
- [Getting Started Guide](./docs/GETTING_STARTED.md) - Complete setup guide
|
|
120
|
+
- [Tailwind Setup Guide](./docs/TAILWIND_SETUP.md) - Detailed configuration
|
|
121
|
+
- [Quick Start Template](./templates/quick-start.html) - Live demo
|
|
70
122
|
|
|
71
123
|
## Theme System
|
|
72
124
|
|
|
@@ -86,23 +138,40 @@ The component library includes a comprehensive theme system with two main themes
|
|
|
86
138
|
- Enhanced component styling for industrial applications
|
|
87
139
|
- Complete dark mode support
|
|
88
140
|
|
|
89
|
-
###
|
|
141
|
+
### Import Options
|
|
90
142
|
|
|
91
|
-
#### Option 1: Complete
|
|
143
|
+
#### Option 1: Complete Styles (Recommended - 118 KB gzipped)
|
|
92
144
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
145
|
+
Import everything including Tailwind utilities, theme, and animations:
|
|
146
|
+
|
|
147
|
+
```ts
|
|
148
|
+
import '@machinemetrics/mm-react-components/styles';
|
|
149
|
+
document.documentElement.classList.add('carbide');
|
|
96
150
|
```
|
|
97
151
|
|
|
98
|
-
|
|
152
|
+
**Includes:**
|
|
99
153
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
154
|
+
- ✅ All Tailwind utilities (compiled)
|
|
155
|
+
- ✅ Carbide theme variables
|
|
156
|
+
- ✅ Component styles with focus states
|
|
157
|
+
- ✅ Dark mode support
|
|
158
|
+
- ✅ Animations
|
|
159
|
+
|
|
160
|
+
#### Option 2: Theme Only (41 KB - if you already have Tailwind)
|
|
161
|
+
|
|
162
|
+
Import just the Carbide theme variables and component overrides:
|
|
163
|
+
|
|
164
|
+
```ts
|
|
165
|
+
import '@machinemetrics/mm-react-components/themes/carbide';
|
|
166
|
+
document.documentElement.classList.add('carbide');
|
|
104
167
|
```
|
|
105
168
|
|
|
169
|
+
**Use this if:**
|
|
170
|
+
|
|
171
|
+
- You already have Tailwind CSS in your project
|
|
172
|
+
- You want to minimize bundle size
|
|
173
|
+
- You're using our components with your own Tailwind config
|
|
174
|
+
|
|
106
175
|
#### Option 3: Use Theme Utilities
|
|
107
176
|
|
|
108
177
|
```tsx
|
|
@@ -213,16 +282,13 @@ This includes:
|
|
|
213
282
|
### Alternative Import Methods
|
|
214
283
|
|
|
215
284
|
```css
|
|
216
|
-
/* Import
|
|
217
|
-
@import '@machinemetrics/mm-react-components/
|
|
218
|
-
|
|
219
|
-
/* Import Carbide theme for industrial styling */
|
|
220
|
-
@import '@machinemetrics/mm-react-components/themes/carbide';
|
|
285
|
+
/* Import complete styles including Carbide theme */
|
|
286
|
+
@import '@machinemetrics/mm-react-components/styles';
|
|
221
287
|
```
|
|
222
288
|
|
|
223
289
|
```tsx
|
|
224
290
|
// Import in JavaScript/TypeScript
|
|
225
|
-
import '@machinemetrics/mm-react-components/
|
|
291
|
+
import '@machinemetrics/mm-react-components/styles';
|
|
226
292
|
```
|
|
227
293
|
|
|
228
294
|
## TypeScript Support
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
3
|
+
declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
|
|
15
|
+
//# sourceMappingURL=alert-dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAKrE,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAI3D;AAED,iBAAS,iBAAiB,CAAC,EACzB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAI1D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAW3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAc3D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,2CAQzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,2CAQ/D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAO1D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAO1D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,GAClB,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const alertVariants: (props?: ({
|
|
4
|
+
variant?: "default" | "destructive" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
declare function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Alert, AlertTitle, AlertDescription };
|
|
10
|
+
//# sourceMappingURL=alert.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAEF,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,2CASlE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
3
|
+
declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export { Avatar, AvatarImage, AvatarFallback };
|
|
7
|
+
//# sourceMappingURL=avatar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAI1D,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAWnD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,2CAWvD;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
declare function Breadcrumb({ ...props }: React.ComponentProps<'nav'>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & {
|
|
6
|
+
asChild?: boolean;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
|
|
12
|
+
//# sourceMappingURL=breadcrumb.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/ui/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAE5D;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ1E;AAED,iBAAS,cAAc,CAAC,EACtB,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,2CAUA;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW5E;AAED,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAY5B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAa9B;AAED,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "
|
|
4
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
5
5
|
size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EA8BnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,2CAUF;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
declare function Card({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
|
|
10
|
+
//# sourceMappingURL=card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWjE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,CAAC"}
|