@machinemetrics/mm-react-components 0.2.3-2 → 0.2.3-20
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 +89 -30
- package/agent-docs/agent-documentation-reference.md +364 -0
- package/agent-docs/ai-agent-guide.md +558 -0
- package/agent-docs/ai-agent-init-guide.md +465 -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 +89 -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.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/command.d.ts +19 -0
- package/dist/components/ui/command.d.ts.map +1 -0
- package/dist/components/ui/data-table/TableView.d.ts.map +1 -1
- package/dist/components/ui/data-table/cards/RowCard.d.ts.map +1 -1
- package/dist/components/ui/data-table/index.d.ts +3 -1
- package/dist/components/ui/data-table/index.d.ts.map +1 -1
- package/dist/components/ui/data-table/parts/BatchActionsToolbar.d.ts +6 -0
- package/dist/components/ui/data-table/parts/BatchActionsToolbar.d.ts.map +1 -0
- package/dist/components/ui/data-table/parts/CellContent.d.ts +7 -0
- package/dist/components/ui/data-table/parts/CellContent.d.ts.map +1 -0
- package/dist/components/ui/data-table/parts/ColGroup.d.ts +7 -0
- package/dist/components/ui/data-table/parts/ColGroup.d.ts.map +1 -0
- package/dist/components/ui/data-table/parts/SortableHeader.d.ts +13 -0
- package/dist/components/ui/data-table/parts/SortableHeader.d.ts.map +1 -0
- package/dist/components/ui/data-table/parts/TableBody.d.ts +11 -0
- package/dist/components/ui/data-table/parts/TableBody.d.ts.map +1 -0
- package/dist/components/ui/data-table/parts/TableHeader.d.ts +15 -0
- package/dist/components/ui/data-table/parts/TableHeader.d.ts.map +1 -0
- package/dist/components/ui/data-table/toolbar/DataTableToolbar.d.ts.map +1 -1
- package/dist/components/ui/data-table/types.d.ts +18 -10
- package/dist/components/ui/data-table/types.d.ts.map +1 -1
- package/dist/components/ui/data-table/utils.d.ts +2 -0
- package/dist/components/ui/data-table/utils.d.ts.map +1 -1
- package/dist/components/ui/date-picker.d.ts +36 -0
- package/dist/components/ui/date-picker.d.ts.map +1 -0
- package/dist/components/ui/dropdown-menu.d.ts +1 -1
- package/dist/components/ui/dropdown-menu.d.ts.map +1 -1
- package/dist/components/ui/form.d.ts +25 -0
- package/dist/components/ui/form.d.ts.map +1 -0
- package/dist/components/ui/hero-metric-card/HeroMetricCard.d.ts +4 -0
- package/dist/components/ui/hero-metric-card/HeroMetricCard.d.ts.map +1 -0
- package/dist/components/ui/hero-metric-card/HeroMetricCardItem.d.ts +4 -0
- package/dist/components/ui/hero-metric-card/HeroMetricCardItem.d.ts.map +1 -0
- package/dist/components/ui/hero-metric-card/constants.d.ts +13 -0
- package/dist/components/ui/hero-metric-card/constants.d.ts.map +1 -0
- package/dist/components/ui/hero-metric-card/grid.d.ts +4 -0
- package/dist/components/ui/hero-metric-card/grid.d.ts.map +1 -0
- package/dist/components/ui/hero-metric-card/hooks.d.ts +6 -0
- package/dist/components/ui/hero-metric-card/hooks.d.ts.map +1 -0
- package/dist/components/ui/hero-metric-card/index.d.ts +5 -0
- package/dist/components/ui/hero-metric-card/index.d.ts.map +1 -0
- package/dist/components/ui/hero-metric-card/parsing.d.ts +11 -0
- package/dist/components/ui/hero-metric-card/parsing.d.ts.map +1 -0
- package/dist/components/ui/hero-metric-card/refs.d.ts +3 -0
- package/dist/components/ui/hero-metric-card/refs.d.ts.map +1 -0
- package/dist/components/ui/hero-metric-card/trend.d.ts +4 -0
- package/dist/components/ui/hero-metric-card/trend.d.ts.map +1 -0
- package/dist/components/ui/hero-metric-card/types.d.ts +60 -0
- package/dist/components/ui/hero-metric-card/types.d.ts.map +1 -0
- package/dist/components/ui/hero-metric-card/utils.d.ts +10 -0
- package/dist/components/ui/hero-metric-card/utils.d.ts.map +1 -0
- package/dist/components/ui/pagination.d.ts +14 -0
- package/dist/components/ui/pagination.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/simple-pagination.d.ts +8 -0
- package/dist/components/ui/simple-pagination.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/spinner-carbide.d.ts +5 -0
- package/dist/components/ui/spinner-carbide.d.ts.map +1 -0
- package/dist/components/ui/spinner.d.ts +4 -0
- package/dist/components/ui/spinner.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 +13 -5
- package/dist/index.d.ts +22 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/lib/mm-react-components.css +1 -0
- package/dist/main.d.ts +1 -2
- package/dist/main.d.ts.map +1 -1
- package/dist/mm-react-components.es.js +16536 -7051
- package/dist/mm-react-components.es.js.map +1 -1
- package/dist/mm-react-components.umd.js +28 -11
- 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/ColorsPreview.d.ts +7 -0
- package/dist/preview/ColorsPreview.d.ts.map +1 -0
- package/dist/preview/CommandPreview.d.ts +2 -0
- package/dist/preview/CommandPreview.d.ts.map +1 -0
- package/dist/preview/DataTablePreview.d.ts.map +1 -1
- package/dist/preview/DatePickerPreview.d.ts +2 -0
- package/dist/preview/DatePickerPreview.d.ts.map +1 -0
- package/dist/preview/DateRangePickerPreview.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/HeroMetricCardPreview.d.ts +2 -0
- package/dist/preview/HeroMetricCardPreview.d.ts.map +1 -0
- package/dist/preview/PaginationPreview.d.ts +2 -0
- package/dist/preview/PaginationPreview.d.ts.map +1 -0
- 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/SpinnerPreview.d.ts +2 -0
- package/dist/preview/SpinnerPreview.d.ts.map +1 -0
- package/dist/preview/TextareaPreview.d.ts +2 -0
- package/dist/preview/TextareaPreview.d.ts.map +1 -0
- package/dist/scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.config.json +577 -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 +216 -0
- package/dist/scripts/npx-init.cjs +418 -0
- package/dist/tailwind.base.config.js +89 -0
- package/dist/themes/carbide.css +369 -91
- package/package.json +40 -10
- package/src/index.css +111 -498
- package/dist/index.css +0 -536
- package/dist/themes/base.css +0 -536
- 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/base.css +0 -536
- package/src/themes/carbide.css +0 -1257
- package/src/themes/complete.css +0 -8
- /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":"AAsEA,iBAAS,GAAG,
|
|
1
|
+
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAsEA,iBAAS,GAAG,4CAsSX;AAED,eAAe,GAAG,CAAC"}
|
package/dist/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# @machinemetrics/mm-react-components
|
|
2
2
|
|
|
3
|
+
> **🤖 FOR AI AGENTS:** This library has [extensive AI agent documentation](./agent-docs/agent-documentation-reference.md) for setup and Chakra UI migration. See the [`agent-docs/`](./agent-docs/) folder for comprehensive guides.
|
|
4
|
+
|
|
3
5
|
A comprehensive React component library designed specifically for MachineMetrics industrial and manufacturing applications.
|
|
4
6
|
|
|
5
7
|
## Features
|
|
@@ -10,6 +12,7 @@ A comprehensive React component library designed specifically for MachineMetrics
|
|
|
10
12
|
- 🔧 **TypeScript**: Full TypeScript support with comprehensive type definitions
|
|
11
13
|
- ♿ **Accessible**: WCAG 2.1 AA compliant components
|
|
12
14
|
- 🚀 **Performance**: Optimized for real-time data display and monitoring
|
|
15
|
+
- 🤖 **AI-Agent Ready**: [Comprehensive AI agent documentation](./agent-docs/) with automated setup and migration tools
|
|
13
16
|
|
|
14
17
|
## Installation
|
|
15
18
|
|
|
@@ -17,6 +20,37 @@ A comprehensive React component library designed specifically for MachineMetrics
|
|
|
17
20
|
npm install @machinemetrics/mm-react-components
|
|
18
21
|
```
|
|
19
22
|
|
|
23
|
+
**Required Dependencies:**
|
|
24
|
+
|
|
25
|
+
- React 19+
|
|
26
|
+
- React DOM 19+
|
|
27
|
+
|
|
28
|
+
**Optional Dependencies (only if using `/themes/carbide`):**
|
|
29
|
+
|
|
30
|
+
- Tailwind CSS 4.0+
|
|
31
|
+
- PostCSS 8.5+
|
|
32
|
+
- Autoprefixer 10+
|
|
33
|
+
|
|
34
|
+
> 💡 **Note:** When using `/styles` (recommended), no build tools are required! The CSS is fully compiled.
|
|
35
|
+
|
|
36
|
+
## 🤖 For AI Agents
|
|
37
|
+
|
|
38
|
+
**This library has comprehensive documentation for AI-assisted development!**
|
|
39
|
+
|
|
40
|
+
- **New Project Setup:** [`agent-docs/ai-agent-init-guide.md`](./agent-docs/ai-agent-init-guide.md)
|
|
41
|
+
- **Chakra UI Migration:** [`agent-docs/ai-agent-guide.md`](./agent-docs/ai-agent-guide.md)
|
|
42
|
+
- **Component Mappings (83 components):** [`agent-docs/component-mapping-summary.md`](./agent-docs/component-mapping-summary.md)
|
|
43
|
+
- **Full Documentation Index:** [`agent-docs/agent-documentation-reference.md`](./agent-docs/agent-documentation-reference.md)
|
|
44
|
+
|
|
45
|
+
**Automated Tools:**
|
|
46
|
+
|
|
47
|
+
- ✅ Init script: `npx @machinemetrics/mm-react-components init`
|
|
48
|
+
- ✅ Migration script: `npx @machinemetrics/mm-react-components chakra-to-shadcn`
|
|
49
|
+
- ✅ 98% automation rate for Chakra UI conversion
|
|
50
|
+
- ✅ Zero-config setup option (no build tools needed!)
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
20
54
|
## Quick Start
|
|
21
55
|
|
|
22
56
|
### 🚀 Automated Setup (Recommended)
|
|
@@ -43,13 +77,23 @@ This will automatically:
|
|
|
43
77
|
|
|
44
78
|
If you prefer manual setup:
|
|
45
79
|
|
|
46
|
-
#### 1. Install
|
|
80
|
+
#### 1. Install the Library
|
|
47
81
|
|
|
48
82
|
```bash
|
|
49
|
-
npm install @machinemetrics/mm-react-components
|
|
83
|
+
npm install @machinemetrics/mm-react-components
|
|
50
84
|
```
|
|
51
85
|
|
|
52
|
-
|
|
86
|
+
**Optional:** Only install Tailwind if you want to use `/themes/carbide` instead of `/styles`:
|
|
87
|
+
|
|
88
|
+
```bash
|
|
89
|
+
npm install -D tailwindcss postcss autoprefixer
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
#### 2. (Optional) Configure Tailwind CSS
|
|
93
|
+
|
|
94
|
+
> 💡 Skip this step if using `/styles` - Tailwind configuration is not needed!
|
|
95
|
+
|
|
96
|
+
**Only if using `/themes/carbide`:**
|
|
53
97
|
|
|
54
98
|
```bash
|
|
55
99
|
cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
|
|
@@ -57,29 +101,22 @@ cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js ta
|
|
|
57
101
|
|
|
58
102
|
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.
|
|
59
103
|
|
|
60
|
-
#### 3. Import
|
|
104
|
+
#### 3. Import Styles
|
|
61
105
|
|
|
62
|
-
|
|
106
|
+
Import the complete styles including Tailwind CSS, base styles, and Carbide theme:
|
|
63
107
|
|
|
64
108
|
```ts
|
|
65
109
|
// In your main entry (e.g., src/main.tsx)
|
|
66
110
|
import '@machinemetrics/mm-react-components/styles';
|
|
67
|
-
import '@machinemetrics/mm-react-components/themes/carbide';
|
|
68
111
|
document.documentElement.classList.add('carbide');
|
|
69
112
|
```
|
|
70
113
|
|
|
71
|
-
|
|
114
|
+
**What's included in `/styles` (118 KB, 18 KB gzipped):**
|
|
72
115
|
|
|
73
|
-
|
|
74
|
-
@import '@machinemetrics/mm-react-components/themes/complete';
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
**What's included:**
|
|
78
|
-
|
|
79
|
-
- ✅ Tailwind CSS reset
|
|
116
|
+
- ✅ Tailwind CSS reset and utilities (compiled)
|
|
80
117
|
- ✅ Base theme variables (OKLCH color system)
|
|
81
118
|
- ✅ Carbide industrial theme
|
|
82
|
-
- ✅ All component styles
|
|
119
|
+
- ✅ All component styles (focus states, rings, borders, etc.)
|
|
83
120
|
- ✅ Dark mode support
|
|
84
121
|
- ✅ Animations and utilities
|
|
85
122
|
|
|
@@ -100,9 +137,18 @@ function App() {
|
|
|
100
137
|
|
|
101
138
|
### 📚 Documentation
|
|
102
139
|
|
|
140
|
+
**For AI Agents:**
|
|
141
|
+
|
|
142
|
+
- [AI Agent Documentation Hub](./agent-docs/agent-documentation-reference.md) - Start here!
|
|
143
|
+
- [Setup Guide for AI Agents](./agent-docs/ai-agent-init-guide.md)
|
|
144
|
+
- [Chakra Migration for AI Agents](./agent-docs/ai-agent-guide.md)
|
|
145
|
+
|
|
146
|
+
**For Developers:**
|
|
147
|
+
|
|
103
148
|
- [Getting Started Guide](./docs/GETTING_STARTED.md) - Complete setup guide
|
|
104
149
|
- [Tailwind Setup Guide](./docs/TAILWIND_SETUP.md) - Detailed configuration
|
|
105
|
-
- [
|
|
150
|
+
- [Chakra Migration Guide](./docs/CHAKRA_MIGRATION_GUIDE.md) - Detailed migration reference
|
|
151
|
+
- [Component Mapping Summary](./docs/COMPONENT_MAPPING_SUMMARY.md) - All 83 component mappings
|
|
106
152
|
|
|
107
153
|
## Theme System
|
|
108
154
|
|
|
@@ -122,24 +168,40 @@ The component library includes a comprehensive theme system with two main themes
|
|
|
122
168
|
- Enhanced component styling for industrial applications
|
|
123
169
|
- Complete dark mode support
|
|
124
170
|
|
|
125
|
-
###
|
|
171
|
+
### Import Options
|
|
172
|
+
|
|
173
|
+
#### Option 1: Complete Styles (Recommended - 118 KB gzipped)
|
|
126
174
|
|
|
127
|
-
|
|
175
|
+
Import everything including Tailwind utilities, theme, and animations:
|
|
128
176
|
|
|
129
177
|
```ts
|
|
130
178
|
import '@machinemetrics/mm-react-components/styles';
|
|
131
|
-
import '@machinemetrics/mm-react-components/themes/carbide';
|
|
132
179
|
document.documentElement.classList.add('carbide');
|
|
133
180
|
```
|
|
134
181
|
|
|
135
|
-
|
|
182
|
+
**Includes:**
|
|
136
183
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
184
|
+
- ✅ All Tailwind utilities (compiled)
|
|
185
|
+
- ✅ Carbide theme variables
|
|
186
|
+
- ✅ Component styles with focus states
|
|
187
|
+
- ✅ Dark mode support
|
|
188
|
+
- ✅ Animations
|
|
189
|
+
|
|
190
|
+
#### Option 2: Theme Only (41 KB - if you already have Tailwind)
|
|
191
|
+
|
|
192
|
+
Import just the Carbide theme variables and component overrides:
|
|
193
|
+
|
|
194
|
+
```ts
|
|
195
|
+
import '@machinemetrics/mm-react-components/themes/carbide';
|
|
196
|
+
document.documentElement.classList.add('carbide');
|
|
141
197
|
```
|
|
142
198
|
|
|
199
|
+
**Use this if:**
|
|
200
|
+
|
|
201
|
+
- You already have Tailwind CSS in your project
|
|
202
|
+
- You want to minimize bundle size
|
|
203
|
+
- You're using our components with your own Tailwind config
|
|
204
|
+
|
|
143
205
|
#### Option 3: Use Theme Utilities
|
|
144
206
|
|
|
145
207
|
```tsx
|
|
@@ -250,16 +312,13 @@ This includes:
|
|
|
250
312
|
### Alternative Import Methods
|
|
251
313
|
|
|
252
314
|
```css
|
|
253
|
-
/* Import
|
|
254
|
-
@import '@machinemetrics/mm-react-components/
|
|
255
|
-
|
|
256
|
-
/* Import Carbide theme for industrial styling */
|
|
257
|
-
@import '@machinemetrics/mm-react-components/themes/carbide';
|
|
315
|
+
/* Import complete styles including Carbide theme */
|
|
316
|
+
@import '@machinemetrics/mm-react-components/styles';
|
|
258
317
|
```
|
|
259
318
|
|
|
260
319
|
```tsx
|
|
261
320
|
// Import in JavaScript/TypeScript
|
|
262
|
-
import '@machinemetrics/mm-react-components/
|
|
321
|
+
import '@machinemetrics/mm-react-components/styles';
|
|
263
322
|
```
|
|
264
323
|
|
|
265
324
|
## 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 +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,2CAYF;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"}
|