@machinemetrics/mm-react-components 0.2.3-13 → 0.2.3-15

package/dist/preview/HeroMetricCardPreview.d.ts

@@ -0,0 +1,2 @@
+export default function HeroMetricCardPreview(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HeroMetricCardPreview.d.ts.map

package/dist/preview/HeroMetricCardPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroMetricCardPreview.d.ts","sourceRoot":"","sources":["../../src/preview/HeroMetricCardPreview.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,qBAAqB,4CAoP5C"}

package/dist/scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.config.json

@@ -7,7 +7,8 @@
     "@emotion/styled"
   ],
   "dependenciesToAdd": {
-    "@machinemetrics/mm-react-components": "*"
+    "@machinemetrics/mm-react-components": "*",
+    "lucide-react": "^0.263.1"
   },
   "devDependenciesToAdd": {},
   "providerInstructions": [
@@ -16,7 +17,10 @@
     "Add the Carbide theme class to your app root element: document.documentElement.classList.add('carbide')",
     "For dark mode support, add both classes: document.documentElement.classList.add('carbide', 'dark')",
     "Remove Chakra-specific theme files and configurations.",
-    "No build tools (Tailwind/PostCSS) required - everything is pre-compiled!"
+    "No build tools (Tailwind/PostCSS) required - everything is pre-compiled!",
+    "Install lucide-react for icons: npm install lucide-react",
+    "Replace Chakra <Icon> components with lucide-react icons directly (e.g., import { Search } from 'lucide-react')",
+    "Replace useDisclosure hook with useState: const [isOpen, setIsOpen] = useState(false)"
   ],
   "manualMigrationComponents": {
     "layoutComponents": [
@@ -40,26 +44,11 @@
       "NativeSelect → Replace with <select> and add Tailwind classes, or use shadcn/ui Select component"
     ],
     "uiComponents": [
-      "IconButton → Replace with <button> and add icon + Tailwind classes, or use shadcn/ui Button with icon variant",
-      "Card → Replace with <div className='rounded-lg border bg-card p-6'> and add shadcn/ui Card component",
-      "Alert → Replace with <div className='rounded-md border p-4'> and add shadcn/ui Alert component",
-      "Portal → Replace with <div> and use React Portal or shadcn/ui Portal component",
-      "Separator → Replace with <hr className='border-t'> and add shadcn/ui Separator component",
-      "Progress → Replace with <div className='w-full bg-gray-200 rounded-full h-2'> and add shadcn/ui Progress component",
-      "Spinner → Replace with <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-900'> and add shadcn/ui Spinner component",
-      "Icon → Replace with Lucide React icons and add appropriate Tailwind classes",
-      "Avatar → Replace with shadcn/ui Avatar component",
-      "Breadcrumb → Replace with shadcn/ui Breadcrumb component",
-      "Calendar → Replace with shadcn/ui Calendar component",
-      "DateRangePicker → Replace with shadcn/ui DateRangePicker component",
-      "Form → Replace with shadcn/ui Form components (Form, FormField, FormItem, etc.)",
-      "Textarea → Replace with shadcn/ui Textarea component",
-      "Toaster → Replace with shadcn/ui Toaster component",
-      "AlertDialog → Replace with shadcn/ui AlertDialog component",
-      "Chart → Replace with shadcn/ui Chart components (ChartContainer, ChartTooltip, etc.)",
-      "Dropzone → Replace with shadcn/ui Dropzone component",
-      "SearchInput → Replace with shadcn/ui SearchInput component"
-    ]
+      "IconButton → Replace with Button component (size='icon' variant) or <button> with icon + Tailwind classes",
+      "Portal → Replace with <div> and use React Portal (React.createPortal)",
+      "Icon → Replace with Lucide React icons directly (no wrapper needed)"
+    ],
+    "note": "Most UI components are now available in mm-react-components: Alert, Avatar, Breadcrumb, Calendar, Card, DateRangePicker, Form, Textarea, Toaster, AlertDialog, Chart, Dropzone, SearchInput, Separator, Progress - these will be automatically mapped by the migration script"
   },
   "migrationInstructions": {
     "layoutComponents": [
@@ -80,33 +69,20 @@
       "Use Tailwind's typography scale (text-sm, text-base, text-lg, etc.) for sizing"
     ],
     "formComponents": [
-      "Form components (Field, NumberInput, Slider, NativeSelect) are replaced with native HTML elements and Tailwind classes.",
-      "Field → <div> wrapper with shadcn/ui form components for inputs",
-      "NumberInput → <input type='number'> with Tailwind classes, or use shadcn/ui Input",
-      "Slider → <input type='range'> with Tailwind classes, or use shadcn/ui Slider",
-      "NativeSelect → <select> with Tailwind classes, or use shadcn/ui Select"
+      "Form components (Field, NumberInput, NativeSelect) have simple replacements:",
+      "Field → <div> wrapper with space-y-2, or use FormItem from mm-react-components",
+      "NumberInput → <input type='number'> with styling, or use Input component",
+      "NativeSelect → <select> with styling, or use Select component from mm-react-components"
     ],
     "uiComponents": [
-      "UI components (IconButton, Card, Alert, Portal, Separator, Progress, Spinner, Icon, Avatar, Breadcrumb, Calendar, DateRangePicker, Form, Textarea, Toaster, AlertDialog, Chart, Dropzone, SearchInput) are replaced with shadcn/ui components or generic JSX elements and Tailwind classes.",
-      "IconButton → <button> with icon + Tailwind classes, or use shadcn/ui Button with icon variant",
-      "Card → <div className='rounded-lg border bg-card p-6'> and add shadcn/ui Card component",
-      "Alert → <div className='rounded-md border p-4'> and add shadcn/ui Alert component",
-      "Portal → <div> and use React Portal or shadcn/ui Portal component",
-      "Separator → <hr className='border-t'> and add shadcn/ui Separator component",
-      "Progress → <div className='w-full bg-gray-200 rounded-full h-2'> and add shadcn/ui Progress component",
-      "Spinner → <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-900'> and add shadcn/ui Spinner component",
-      "Icon → Lucide React icons with appropriate Tailwind classes",
-      "Avatar → shadcn/ui Avatar component",
-      "Breadcrumb → shadcn/ui Breadcrumb component",
-      "Calendar → shadcn/ui Calendar component",
-      "DateRangePicker → shadcn/ui DateRangePicker component",
-      "Form → shadcn/ui Form components (Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage)",
-      "Textarea → shadcn/ui Textarea component",
-      "Toaster → shadcn/ui Toaster component",
-      "AlertDialog → shadcn/ui AlertDialog component",
-      "Chart → shadcn/ui Chart components (ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle)",
-      "Dropzone → shadcn/ui Dropzone component",
-      "SearchInput → shadcn/ui SearchInput component"
+      "Most UI components are now available in mm-react-components and will be automatically mapped:",
+      "✅ Alert, Avatar, Breadcrumb, Calendar, Card, DateRangePicker, Form, Textarea, Toaster, AlertDialog",
+      "✅ Chart, Dropzone, SearchInput, Separator, Progress, Slider, Accordion, Popover",
+      "Only these require manual handling:",
+      "IconButton → Use Button component with size='icon' variant",
+      "Portal → Use React.createPortal",
+      "Icon → Use lucide-react icons directly (no wrapper needed)",
+      "Spinner → Use Loader2 from lucide-react or div with animate-spin"
     ]
   },
   "moduleMappings": {
@@ -127,6 +103,24 @@
         "IconButton": {
           "tag": "button",
           "class": "inline-flex items-center justify-center"
+        },
+        "Spinner": {
+          "tag": "div",
+          "class": "animate-spin rounded-full h-6 w-6 border-2 border-current border-t-transparent",
+          "note": "Replace with Loader2 from lucide-react for better icon"
+        },
+        "NumberInput": {
+          "tag": "input",
+          "class": "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
+          "attributes": { "type": "number" }
+        },
+        "NativeSelect": {
+          "tag": "select",
+          "class": "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+        },
+        "Field": {
+          "tag": "div",
+          "class": "space-y-2"
         }
       },
       "specifiers": {
@@ -298,22 +292,98 @@
           "module": "@machinemetrics/mm-react-components",
           "import": "Alert"
         },
+        "AlertTitle": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertTitle"
+        },
+        "AlertDescription": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDescription"
+        },
         "AlertDialog": {
           "module": "@machinemetrics/mm-react-components",
           "import": "AlertDialog"
         },
+        "AlertDialogOverlay": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDialogOverlay"
+        },
+        "AlertDialogContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDialogContent"
+        },
+        "AlertDialogHeader": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDialogHeader"
+        },
+        "AlertDialogFooter": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDialogFooter"
+        },
+        "AlertDialogBody": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDialogContent"
+        },
         "Avatar": {
           "module": "@machinemetrics/mm-react-components",
           "import": "Avatar"
         },
+        "AvatarImage": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AvatarImage"
+        },
+        "AvatarFallback": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AvatarFallback"
+        },
         "Breadcrumb": {
           "module": "@machinemetrics/mm-react-components",
           "import": "Breadcrumb"
         },
+        "BreadcrumbItem": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "BreadcrumbItem"
+        },
+        "BreadcrumbLink": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "BreadcrumbLink"
+        },
         "Calendar": {
           "module": "@machinemetrics/mm-react-components",
           "import": "Calendar"
         },
+        "Card": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Card"
+        },
+        "CardHeader": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "CardHeader"
+        },
+        "CardBody": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "CardContent"
+        },
+        "CardFooter": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "CardFooter"
+        },
+        "Separator": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Separator"
+        },
+        "Divider": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Separator"
+        },
+        "Textarea": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Textarea"
+        },
+        "Toast": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Toaster"
+        },
         "DateRangePicker": {
           "module": "@machinemetrics/mm-react-components",
           "import": "DateRangePicker"
@@ -342,18 +412,6 @@
           "module": "@machinemetrics/mm-react-components",
           "import": "FormMessage"
         },
-        "Separator": {
-          "module": "@machinemetrics/mm-react-components",
-          "import": "Separator"
-        },
-        "Textarea": {
-          "module": "@machinemetrics/mm-react-components",
-          "import": "Textarea"
-        },
-        "Toaster": {
-          "module": "@machinemetrics/mm-react-components",
-          "import": "Toaster"
-        },
         "ChartContainer": {
           "module": "@machinemetrics/mm-react-components",
           "import": "ChartContainer"
@@ -498,12 +556,19 @@
     }
   },
   "postSteps": [
-    "Run npm install to install @machinemetrics/mm-react-components.",
-    "MANUAL MIGRATION REQUIRED: Replace the following Chakra components with generic JSX elements + Tailwind classes:",
-    "  - Layout: Box, Flex, VStack, HStack, Stack, Container, Center, SimpleGrid",
-    "  - Typography: Heading, Text",
-    "  - Form: Field, NumberInput, Slider, NativeSelect",
-    "  - UI: IconButton, Card, Alert, Portal, Separator, Progress, Spinner, Icon, Avatar, Breadcrumb, Calendar, DateRangePicker, Form, Textarea, Toaster, AlertDialog, Chart, Dropzone, SearchInput",
+    "Run npm install to install @machinemetrics/mm-react-components and lucide-react.",
+    "MIGRATION NOTES:",
+    "  - ChakraProvider has been removed - no provider needed with mm-react-components",
+    "  - Chakra Icon components replaced with lucide-react icons",
+    "  - useDisclosure hook replaced with useState(false)",
+    "  - Spinner → div with animation or lucide-react Loader2 icon",
+    "  - NumberInput → input type='number'",
+    "  - NativeSelect → select element",
+    "  - Field → div wrapper (or use FormItem from mm-react-components)",
+    "MANUAL MIGRATION REQUIRED for layout/typography components:",
+    "  - Layout: Box, Flex, VStack, HStack, Stack, Container, Center, SimpleGrid → use div with Tailwind classes",
+    "  - Typography: Heading, Text → use semantic HTML (h1-h6, p, span) with Tailwind classes",
+    "  - IconButton → Button component with icon variant or button element",
     "See the manualMigrationComponents section in the config for specific replacement instructions.",
     "Test all migrated components to ensure proper styling and functionality.",
     "Run npm run lint && npm run test to verify the migration.",

package/dist/themes/carbide.css

@@ -801,16 +801,30 @@
   color: var(--muted-foreground);
 }
 
+.carbide [data-slot='select-content'] {
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  border-color: var(--border);
+  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
+}
+.carbide.dark [data-slot='select-content'] {
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  border-color: var(--border);
+}
+
 /* =============================
    DROPDOWN MENU
   ============================= */
-.carbide [data-slot='dropdown-menu-content'] {
+.carbide [data-slot='dropdown-menu-content'],
+.carbide [data-slot='dropdown-menu-sub-content'] {
   background-color: var(--popover);
   color: var(--popover-foreground);
   border-color: var(--border);
   box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
 }
-.carbide.dark [data-slot='dropdown-menu-content'] {
+.carbide.dark [data-slot='dropdown-menu-content'],
+.carbide.dark [data-slot='dropdown-menu-sub-content'] {
   background-color: var(--popover);
   color: var(--popover-foreground);
   border-color: var(--border);
@@ -909,21 +923,24 @@
 }
 
 /* =============================
-   OVERLAYS & DIALOG/SHEET/DRAWER
+   OVERLAYS & DIALOG/SHEET/DRAWER/ALERT-DIALOG
   ============================= */
 .carbide [data-slot='dialog-overlay'],
+.carbide [data-slot='alert-dialog-overlay'],
 .carbide [data-slot='sheet-overlay'],
 .carbide [data-slot='drawer-overlay'] {
   background-color: color-mix(in srgb, var(--overlay-bg) 60%, transparent);
   backdrop-filter: blur(2px);
 }
 .carbide.dark [data-slot='dialog-overlay'],
+.carbide.dark [data-slot='alert-dialog-overlay'],
 .carbide.dark [data-slot='sheet-overlay'],
 .carbide.dark [data-slot='drawer-overlay'] {
   background-color: color-mix(in srgb, var(--overlay-bg) 75%, transparent);
 }
 
 .carbide [data-slot='dialog-content'],
+.carbide [data-slot='alert-dialog-content'],
 .carbide [data-slot='sheet-content'],
 .carbide [data-slot='drawer-content'] {
   background-color: var(--card);
@@ -932,6 +949,7 @@
   box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
 }
 .carbide.dark [data-slot='dialog-content'],
+.carbide.dark [data-slot='alert-dialog-content'],
 .carbide.dark [data-slot='sheet-content'],
 .carbide.dark [data-slot='drawer-content'] {
   box-shadow: 0 24px 48px rgba(15, 23, 42, 0.55);
@@ -965,12 +983,14 @@
 }
 
 .carbide [data-slot='dialog-title'],
+.carbide [data-slot='alert-dialog-title'],
 .carbide [data-slot='sheet-title'],
 .carbide [data-slot='drawer-title'] {
   color: var(--card-foreground);
 }
 
 .carbide [data-slot='dialog-description'],
+.carbide [data-slot='alert-dialog-description'],
 .carbide [data-slot='sheet-description'],
 .carbide [data-slot='drawer-description'] {
   color: var(--muted-foreground);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-components",
-  "version": "0.2.3-13",
+  "version": "0.2.3-15",
   "description": "Industrial-grade React components for manufacturing applications",
   "keywords": [
     "react",