@machinemetrics/mm-react-components 0.2.3-3 → 0.2.3-6

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

@@ -0,0 +1,536 @@
+{
+  "dependenciesToRemove": [
+    "@chakra-ui/react",
+    "@chakra-ui/icons",
+    "@chakra-ui/system",
+    "@emotion/react",
+    "@emotion/styled"
+  ],
+  "dependenciesToAdd": {
+    "@machinemetrics/mm-react-components": "beta",
+    "class-variance-authority": "^1.0.0",
+    "tailwind-merge": "^2.5.4",
+    "lucide-react": "^0.469.0",
+    "react-day-picker": "^8.10.1",
+    "date-fns": "^3.6.0",
+    "recharts": "^2.12.7",
+    "react-dropzone": "^14.2.3",
+    "sonner": "^1.4.41",
+    "vaul": "^0.9.0",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-breadcrumb": "^1.1.0",
+    "@radix-ui/react-calendar": "^1.0.0",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-form": "^0.1.0",
+    "@radix-ui/react-textarea": "^1.0.0",
+    "@radix-ui/react-toast": "^1.2.2"
+  },
+  "devDependenciesToAdd": {
+    "tailwindcss": "^3.4.15",
+    "postcss": "^8.4.49",
+    "autoprefixer": "^10.4.20"
+  },
+  "providerInstructions": [
+    "Remove <ChakraProvider> wrapper from your app root (usually in src/index.tsx or src/main.tsx).",
+    "Import the Carbide theme CSS: import '@machinemetrics/mm-react-components/themes/carbide' in your main entry file (e.g., src/index.tsx or src/main.tsx).",
+    "Add the Carbide theme class to your app root element: <div className=\"carbide\"> to enable Carbide theming.",
+    "For dark mode support, add both classes: <div className=\"carbide dark\">",
+    "Remove Chakra-specific theme files and configurations.",
+    "Update any custom Chakra theme tokens to use Tailwind CSS custom properties instead."
+  ],
+  "manualMigrationComponents": {
+    "layoutComponents": [
+      "Box → Replace with <div> element and add appropriate Tailwind classes",
+      "Flex → Replace with <div className='flex'> and add flex-related Tailwind classes",
+      "VStack → Replace with <div className='flex flex-col gap-4'> and adjust spacing as needed",
+      "HStack → Replace with <div className='flex flex-row gap-4'> and adjust spacing as needed",
+      "Stack → Replace with <div className='flex flex-col gap-4'> and adjust direction/spacing as needed",
+      "Container → Replace with <div className='container mx-auto px-4'> and adjust max-width as needed",
+      "Center → Replace with <div className='flex items-center justify-center'>",
+      "SimpleGrid → Replace with <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'> and adjust columns as needed"
+    ],
+    "typographyComponents": [
+      "Heading → Replace with semantic heading elements (h1, h2, h3, etc.) and add Tailwind typography classes",
+      "Text → Replace with semantic text elements (p, span, etc.) and add Tailwind typography classes"
+    ],
+    "formComponents": [
+      "Field → Replace with <div> wrapper and use shadcn/ui form components for inputs",
+      "NumberInput → Replace with <input type='number'> and add Tailwind classes, or use shadcn/ui Input component",
+      "Slider → Replace with <input type='range'> and add Tailwind classes, or use shadcn/ui Slider component",
+      "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"
+    ]
+  },
+  "migrationInstructions": {
+    "layoutComponents": [
+      "Layout components (Box, Flex, VStack, HStack, Stack, Container, Center, SimpleGrid) are replaced with generic JSX elements and Tailwind CSS classes.",
+      "Box → <div> with appropriate Tailwind classes",
+      "Flex → <div className='flex'> with flex-related Tailwind classes",
+      "VStack → <div className='flex flex-col gap-4'> (adjust spacing as needed)",
+      "HStack → <div className='flex flex-row gap-4'> (adjust spacing as needed)",
+      "Stack → <div className='flex flex-col gap-4'> (adjust direction/spacing as needed)",
+      "Container → <div className='container mx-auto px-4'> (adjust max-width as needed)",
+      "Center → <div className='flex items-center justify-center'>",
+      "SimpleGrid → <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'> (adjust columns as needed)"
+    ],
+    "typographyComponents": [
+      "Typography components (Heading, Text) are replaced with semantic HTML elements and Tailwind typography classes.",
+      "Heading → <h1>, <h2>, <h3>, etc. with appropriate Tailwind typography classes",
+      "Text → <p>, <span>, etc. with appropriate Tailwind typography classes",
+      "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"
+    ],
+    "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"
+    ]
+  },
+  "moduleMappings": {
+    "@chakra-ui/react": {
+      "jsxSpecifiers": {
+        "Box": { "tag": "div", "class": "" },
+        "Flex": { "tag": "div", "class": "flex" },
+        "VStack": { "tag": "div", "class": "flex flex-col gap-4" },
+        "HStack": { "tag": "div", "class": "flex flex-row gap-4" },
+        "Stack": { "tag": "div", "class": "flex flex-col gap-4" },
+        "Container": { "tag": "div", "class": "container mx-auto px-4" },
+        "Center": { "tag": "div", "class": "flex items-center justify-center" },
+        "SimpleGrid": { "tag": "div", "class": "grid gap-4" },
+        "Heading": { "tag": "h2", "class": "font-semibold" },
+        "Text": { "tag": "p", "class": "" },
+        "Portal": { "tag": "div", "class": "" },
+        "Separator": { "tag": "hr", "class": "border-t" },
+        "IconButton": {
+          "tag": "button",
+          "class": "inline-flex items-center justify-center"
+        }
+      },
+      "specifiers": {
+        "Badge": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Badge"
+        },
+        "Button": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Button"
+        },
+        "Modal": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Dialog"
+        },
+        "Input": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Input"
+        },
+        "Menu": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DropdownMenu"
+        },
+        "Select": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Select"
+        },
+        "Table": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Table"
+        },
+        "Tabs": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Tabs"
+        },
+        "Tooltip": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Tooltip"
+        },
+        "Drawer": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Drawer"
+        },
+        "Switch": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Switch"
+        },
+        "Checkbox": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Checkbox"
+        },
+        "Radio": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "RadioGroupItem"
+        },
+        "RadioGroup": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "RadioGroup"
+        },
+        "Label": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Label"
+        },
+        "FormLabel": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Label"
+        },
+        "Sheet": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Sheet"
+        },
+        "Skeleton": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Skeleton"
+        },
+        "Collapse": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Collapsible"
+        },
+        "Collapsible": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Collapsible"
+        },
+        "Accordion": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Accordion"
+        },
+        "DataTable": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DataTable"
+        },
+        "Progress": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Progress"
+        },
+        "Slider": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Slider"
+        },
+        "Popover": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Popover"
+        },
+        "PopoverTrigger": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "PopoverTrigger"
+        },
+        "PopoverContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "PopoverContent"
+        },
+        "PopoverAnchor": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "PopoverAnchor"
+        },
+        "ModalOverlay": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DialogOverlay"
+        },
+        "ModalContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DialogContent"
+        },
+        "ModalHeader": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DialogHeader"
+        },
+        "ModalFooter": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DialogFooter"
+        },
+        "ModalBody": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DialogContent"
+        },
+        "DrawerOverlay": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DrawerOverlay"
+        },
+        "DrawerContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DrawerContent"
+        },
+        "DrawerHeader": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DrawerHeader"
+        },
+        "DrawerFooter": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DrawerFooter"
+        },
+        "DrawerCloseButton": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DrawerClose"
+        },
+        "AccordionItem": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AccordionItem"
+        },
+        "AccordionButton": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AccordionTrigger"
+        },
+        "AccordionPanel": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AccordionContent"
+        },
+        "Alert": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Alert"
+        },
+        "AlertDialog": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDialog"
+        },
+        "Avatar": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Avatar"
+        },
+        "Breadcrumb": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Breadcrumb"
+        },
+        "Calendar": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Calendar"
+        },
+        "DateRangePicker": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DateRangePicker"
+        },
+        "Form": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Form"
+        },
+        "FormField": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "FormField"
+        },
+        "FormItem": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "FormItem"
+        },
+        "FormControl": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "FormControl"
+        },
+        "FormDescription": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "FormDescription"
+        },
+        "FormMessage": {
+          "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"
+        },
+        "ChartTooltip": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "ChartTooltip"
+        },
+        "ChartTooltipContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "ChartTooltipContent"
+        },
+        "ChartLegend": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "ChartLegend"
+        },
+        "ChartLegendContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "ChartLegendContent"
+        },
+        "ChartStyle": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "ChartStyle"
+        },
+        "Dropzone": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Dropzone"
+        },
+        "DropzoneContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DropzoneContent"
+        },
+        "DropzoneEmptyState": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DropzoneEmptyState"
+        },
+        "SearchInput": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "SearchInput"
+        },
+        "LabeledSlider": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "LabeledSlider"
+        }
+      },
+      "compoundComponents": {
+        "Alert.Root": { "tag": "div", "class": "rounded-md border p-4" },
+        "Alert.Indicator": { "remove": true },
+        "Alert.Content": { "tag": "div", "class": "flex-1" },
+        "Alert.Title": { "tag": "h5", "class": "font-medium mb-1" },
+        "Alert.Description": { "tag": "div", "class": "text-sm" },
+        "Modal": { "component": "Dialog" },
+        "Dialog.Root": { "component": "Dialog" },
+        "Dialog.Backdrop": { "remove": true },
+        "Dialog.Positioner": { "unwrap": true },
+        "Dialog.Content": { "component": "DialogContent" },
+        "Dialog.Header": { "component": "DialogHeader" },
+        "Dialog.Title": { "component": "DialogTitle" },
+        "Dialog.Description": { "component": "DialogDescription" },
+        "Dialog.Body": { "unwrap": true },
+        "Dialog.Footer": { "component": "DialogFooter" },
+        "Dialog.CloseTrigger": { "component": "DialogClose" },
+        "Drawer.Root": { "component": "Drawer" },
+        "Drawer.Trigger": { "component": "DrawerTrigger" },
+        "Drawer.CloseTrigger": { "component": "DrawerClose" },
+        "Drawer.Portal": { "component": "DrawerPortal" },
+        "Drawer.Overlay": { "component": "DrawerOverlay" },
+        "Drawer.Content": { "component": "DrawerContent" },
+        "Drawer.Header": { "component": "DrawerHeader" },
+        "Drawer.Footer": { "component": "DrawerFooter" },
+        "Drawer.Title": { "component": "DrawerTitle" },
+        "Drawer.Description": { "component": "DrawerDescription" },
+        "Drawer.Handle": { "component": "DrawerHandle" },
+        "Collapse": { "component": "Collapsible" },
+        "Accordion.Root": { "component": "Accordion" },
+        "Accordion.Item": { "component": "AccordionItem" },
+        "Accordion.Trigger": { "component": "AccordionTrigger" },
+        "Accordion.Content": { "component": "AccordionContent" },
+        "Tabs.Root": { "component": "Tabs" },
+        "Tabs.List": { "component": "TabsList" },
+        "Tabs.Trigger": { "component": "TabsTrigger" },
+        "Tabs.Content": { "component": "TabsContent" },
+        "Tabs.Indicator": { "remove": true },
+        "Table.Root": { "component": "Table" },
+        "Table.Header": { "component": "TableHeader" },
+        "Table.Body": { "component": "TableBody" },
+        "Table.Row": { "component": "TableRow" },
+        "Table.ColumnHeader": { "component": "TableHead" },
+        "Table.Cell": { "component": "TableCell" },
+        "Table.Footer": { "component": "TableFooter" },
+        "Menu.Root": { "component": "DropdownMenu" },
+        "Menu.Trigger": { "component": "DropdownMenuTrigger" },
+        "Menu.Content": { "component": "DropdownMenuContent" },
+        "Menu.Item": { "component": "DropdownMenuItem" },
+        "Menu.Separator": { "component": "DropdownMenuSeparator" },
+        "Menu.ItemGroup": { "unwrap": true },
+        "Menu.ItemGroupLabel": { "component": "DropdownMenuLabel" },
+        "Popover.Root": { "component": "Popover" },
+        "Popover.Trigger": { "component": "PopoverTrigger" },
+        "Popover.Content": { "component": "PopoverContent" },
+        "Popover.Anchor": { "component": "PopoverAnchor" },
+        "AlertDialog.Root": { "component": "AlertDialog" },
+        "AlertDialog.Trigger": { "component": "AlertDialogTrigger" },
+        "AlertDialog.Content": { "component": "AlertDialogContent" },
+        "AlertDialog.Header": { "component": "AlertDialogHeader" },
+        "AlertDialog.Footer": { "component": "AlertDialogFooter" },
+        "AlertDialog.Title": { "component": "AlertDialogTitle" },
+        "AlertDialog.Description": { "component": "AlertDialogDescription" },
+        "AlertDialog.Action": { "component": "AlertDialogAction" },
+        "AlertDialog.Cancel": { "component": "AlertDialogCancel" },
+        "AlertDialog.Overlay": { "component": "AlertDialogOverlay" },
+        "AlertDialog.Portal": { "component": "AlertDialogPortal" },
+        "Avatar.Root": { "component": "Avatar" },
+        "Avatar.Image": { "component": "AvatarImage" },
+        "Avatar.Fallback": { "component": "AvatarFallback" },
+        "Breadcrumb.Root": { "component": "Breadcrumb" },
+        "Breadcrumb.List": { "component": "BreadcrumbList" },
+        "Breadcrumb.Item": { "component": "BreadcrumbItem" },
+        "Breadcrumb.Link": { "component": "BreadcrumbLink" },
+        "Breadcrumb.Page": { "component": "BreadcrumbPage" },
+        "Breadcrumb.Separator": { "component": "BreadcrumbSeparator" },
+        "Breadcrumb.Ellipsis": { "component": "BreadcrumbEllipsis" },
+        "Card.Root": { "component": "Card" },
+        "Card.Header": { "component": "CardHeader" },
+        "Card.Title": { "component": "CardTitle" },
+        "Card.Description": { "component": "CardDescription" },
+        "Card.Content": { "component": "CardContent" },
+        "Card.Footer": { "component": "CardFooter" },
+        "Form.Root": { "component": "Form" },
+        "Form.Field": { "component": "FormField" },
+        "Form.Item": { "component": "FormItem" },
+        "Form.Label": { "component": "FormLabel" },
+        "Form.Control": { "component": "FormControl" },
+        "Form.Description": { "component": "FormDescription" },
+        "Form.Message": { "component": "FormMessage" }
+      }
+    },
+    "@chakra-ui/icons": {
+      "default": {
+        "module": "lucide-react"
+      }
+    }
+  },
+  "postSteps": [
+    "Run npm install to sync dependencies.",
+    "Execute npx tailwindcss init -p if the project does not already have Tailwind/PostCSS configuration.",
+    "Review and update any custom Chakra theme tokens to use Tailwind CSS custom properties.",
+    "Update icon imports from @chakra-ui/icons to lucide-react throughout your codebase.",
+    "MANUAL MIGRATION REQUIRED: Replace the following Chakra components with generic JSX elements and 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",
+    "See the manualMigrationComponents section in the config for specific replacement instructions.",
+    "Test all manually migrated components to ensure proper styling and functionality.",
+    "Run npm run lint && npm run test to verify the migration.",
+    "Consider creating a design system documentation for the new component APIs."
+  ]
+}

package/dist/scripts/chakra-to-shadcn-migrator/lib/args.js

@@ -0,0 +1,63 @@
+import process from 'process';
+import { colorize } from './colors.js';
+
+export function parseArgs(argv) {
+  const args = { project: '.', apply: false, includeTests: false, source: [] };
+  const tokens = [...argv];
+  while (tokens.length) {
+    const token = tokens.shift();
+    switch (token) {
+      case '--project':
+      case '-p':
+        args.project = tokens.shift() ?? args.project;
+        break;
+      case '--config':
+      case '-c':
+        args.config = tokens.shift();
+        break;
+      case '--apply':
+        args.apply = true;
+        break;
+      case '--include-tests':
+        args.includeTests = true;
+        break;
+      case '--source': {
+        const next = tokens.shift();
+        if (!next) {
+          throw new Error(
+            '--source requires a comma separated list of directories or glob patterns.',
+          );
+        }
+        args.source = next
+          .split(',')
+          .map((segment) => segment.trim())
+          .filter(Boolean);
+        break;
+      }
+      case '--help':
+      case '-h':
+        printHelp();
+        process.exit(0);
+        break;
+      default:
+        if (token.startsWith('--')) {
+          console.warn(colorize(`Warning: unknown option ${token}`, 'yellow'));
+        }
+        break;
+    }
+  }
+  return args;
+}
+
+export function printHelp() {
+  console.log(
+    `chakra-to-shadcn [options]\n\n` +
+      `Options:\n` +
+      `  -p, --project <path>    Project root (defaults to current directory)\n` +
+      `  -c, --config <path>     Path to chakra-to-shadcn.config.json\n` +
+      `      --apply            Apply safe automated edits\n` +
+      `      --include-tests    Include __tests__/ and *.test.* files while scanning\n` +
+      `      --source <globs>   Comma separated list of folders/globs to scan\n` +
+      `  -h, --help             Show this message\n`,
+  );
+}

package/dist/scripts/chakra-to-shadcn-migrator/lib/colors.js

@@ -0,0 +1,14 @@
+export const colors = {
+  reset: '\u001b[0m',
+  cyan: '\u001b[36m',
+  green: '\u001b[32m',
+  yellow: '\u001b[33m',
+  red: '\u001b[31m',
+  bold: '\u001b[1m',
+  gray: '\u001b[90m',
+};
+
+export const colorize = (value, color) =>
+  `${colors[color] ?? ''}${value}${colors.reset}`;
+
+export const bold = (value) => `${colors.bold}${value}${colors.reset}`;

package/dist/scripts/chakra-to-shadcn-migrator/lib/config.js

@@ -0,0 +1,15 @@
+import fs from 'fs';
+import path from 'path';
+
+export function resolveConfig(projectRoot, override) {
+  if (override) {
+    const explicit = path.resolve(process.cwd(), override);
+    return fs.existsSync(explicit) ? explicit : undefined;
+  }
+  const defaultPath = path.join(projectRoot, 'chakra-to-shadcn.config.json');
+  return fs.existsSync(defaultPath) ? defaultPath : undefined;
+}
+
+export function loadJson(file) {
+  return JSON.parse(fs.readFileSync(file, 'utf8'));
+}