@machinemetrics/mm-react-components 0.2.3-1 → 0.2.3-11

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.
Files changed (99) hide show
  1. package/README.md +96 -30
  2. package/agent-docs/agent-documentation-reference.md +247 -0
  3. package/agent-docs/ai-agent-guide.md +554 -0
  4. package/agent-docs/ai-agent-init-guide.md +461 -0
  5. package/agent-docs/chakra-migration-readme.md +265 -0
  6. package/agent-docs/chakra-migration-troubleshooting.md +649 -0
  7. package/agent-docs/component-mapping-reference.md +466 -0
  8. package/agent-docs/init-readme.md +283 -0
  9. package/agent-docs/init-troubleshooting.md +550 -0
  10. package/agent-docs/setup-reference.md +365 -0
  11. package/dist/App.d.ts.map +1 -1
  12. package/dist/README.md +96 -30
  13. package/dist/components/ui/alert-dialog.d.ts +15 -0
  14. package/dist/components/ui/alert-dialog.d.ts.map +1 -0
  15. package/dist/components/ui/alert.d.ts +10 -0
  16. package/dist/components/ui/alert.d.ts.map +1 -0
  17. package/dist/components/ui/avatar.d.ts +7 -0
  18. package/dist/components/ui/avatar.d.ts.map +1 -0
  19. package/dist/components/ui/breadcrumb.d.ts +12 -0
  20. package/dist/components/ui/breadcrumb.d.ts.map +1 -0
  21. package/dist/components/ui/button.d.ts +1 -1
  22. package/dist/components/ui/button.d.ts.map +1 -1
  23. package/dist/components/ui/card.d.ts +10 -0
  24. package/dist/components/ui/card.d.ts.map +1 -0
  25. package/dist/components/ui/chart.d.ts +41 -0
  26. package/dist/components/ui/chart.d.ts.map +1 -0
  27. package/dist/components/ui/form.d.ts +25 -0
  28. package/dist/components/ui/form.d.ts.map +1 -0
  29. package/dist/components/ui/progress.d.ts +1 -0
  30. package/dist/components/ui/progress.d.ts.map +1 -1
  31. package/dist/components/ui/separator.d.ts +5 -0
  32. package/dist/components/ui/separator.d.ts.map +1 -0
  33. package/dist/components/ui/sonner.d.ts +4 -0
  34. package/dist/components/ui/sonner.d.ts.map +1 -0
  35. package/dist/components/ui/textarea.d.ts +4 -0
  36. package/dist/components/ui/textarea.d.ts.map +1 -0
  37. package/dist/docs/GETTING_STARTED.md +293 -0
  38. package/dist/index.d.ts +14 -2
  39. package/dist/index.d.ts.map +1 -1
  40. package/dist/lib/mm-react-components.css +1 -0
  41. package/dist/main.d.ts +0 -1
  42. package/dist/main.d.ts.map +1 -1
  43. package/dist/mm-react-components.es.js +10964 -927
  44. package/dist/mm-react-components.es.js.map +1 -1
  45. package/dist/mm-react-components.umd.js +27 -9
  46. package/dist/mm-react-components.umd.js.map +1 -1
  47. package/dist/preview/AlertDialogPreview.d.ts +2 -0
  48. package/dist/preview/AlertDialogPreview.d.ts.map +1 -0
  49. package/dist/preview/AlertPreview.d.ts +2 -0
  50. package/dist/preview/AlertPreview.d.ts.map +1 -0
  51. package/dist/preview/AvatarPreview.d.ts +2 -0
  52. package/dist/preview/AvatarPreview.d.ts.map +1 -0
  53. package/dist/preview/BreadcrumbPreview.d.ts +2 -0
  54. package/dist/preview/BreadcrumbPreview.d.ts.map +1 -0
  55. package/dist/preview/CardPreview.d.ts +2 -0
  56. package/dist/preview/CardPreview.d.ts.map +1 -0
  57. package/dist/preview/ChartPreview.d.ts +2 -0
  58. package/dist/preview/ChartPreview.d.ts.map +1 -0
  59. package/dist/preview/CheckboxPreview.d.ts.map +1 -1
  60. package/dist/preview/DataTablePreview.d.ts.map +1 -1
  61. package/dist/preview/FormPreview.d.ts +2 -0
  62. package/dist/preview/FormPreview.d.ts.map +1 -0
  63. package/dist/preview/InputPreview.d.ts.map +1 -1
  64. package/dist/preview/LabelPreview.d.ts.map +1 -1
  65. package/dist/preview/RadioGroupPreview.d.ts.map +1 -1
  66. package/dist/preview/SeparatorPreview.d.ts +2 -0
  67. package/dist/preview/SeparatorPreview.d.ts.map +1 -0
  68. package/dist/preview/SonnerPreview.d.ts +2 -0
  69. package/dist/preview/SonnerPreview.d.ts.map +1 -0
  70. package/dist/preview/TabsPreview.d.ts.map +1 -1
  71. package/dist/preview/TextareaPreview.d.ts +2 -0
  72. package/dist/preview/TextareaPreview.d.ts.map +1 -0
  73. package/dist/preview/data-table/data-table-preview_column-content.d.ts +1 -1
  74. package/dist/preview/data-table/data-table-preview_column-content.d.ts.map +1 -1
  75. package/dist/preview/page-header/PageHeaderPreview.d.ts.map +1 -1
  76. package/dist/scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.config.json +512 -0
  77. package/dist/scripts/chakra-to-shadcn-migrator/lib/args.js +63 -0
  78. package/dist/scripts/chakra-to-shadcn-migrator/lib/colors.js +14 -0
  79. package/dist/scripts/chakra-to-shadcn-migrator/lib/config.js +15 -0
  80. package/dist/scripts/chakra-to-shadcn-migrator/lib/deps.js +125 -0
  81. package/dist/scripts/chakra-to-shadcn-migrator/lib/file-io.js +44 -0
  82. package/dist/scripts/chakra-to-shadcn-migrator/lib/render.js +89 -0
  83. package/dist/scripts/chakra-to-shadcn-migrator/lib/transform.js +550 -0
  84. package/dist/scripts/chakra-to-shadcn-migrator/package.json +11 -0
  85. package/dist/scripts/init.cjs +208 -0
  86. package/dist/scripts/npx-init.cjs +409 -0
  87. package/dist/tailwind.base.config.js +88 -0
  88. package/dist/themes/carbide.css +187 -32
  89. package/package.json +58 -10
  90. package/src/index.css +99 -498
  91. package/dist/index.css +0 -536
  92. package/dist/tailwind.config.export.js +0 -153
  93. package/dist/themes/complete.css +0 -8
  94. package/scripts/README.md +0 -171
  95. package/scripts/chakra-to-shadcn-migrator/README.md +0 -107
  96. package/src/themes/carbide.css +0 -1257
  97. package/src/themes/complete.css +0 -8
  98. package/tailwind.config.export.js +0 -153
  99. /package/{scripts → dist/scripts}/chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js +0 -0
@@ -0,0 +1,41 @@
1
+ import * as React from 'react';
2
+ import * as RechartsPrimitive from 'recharts';
3
+ declare const THEMES: {
4
+ readonly light: "";
5
+ readonly dark: ".dark";
6
+ };
7
+ export type ChartConfig = {
8
+ [k in string]: {
9
+ label?: React.ReactNode;
10
+ icon?: React.ComponentType;
11
+ } & ({
12
+ color?: string;
13
+ theme?: never;
14
+ } | {
15
+ color?: never;
16
+ theme: Record<keyof typeof THEMES, string>;
17
+ });
18
+ };
19
+ declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<'div'> & {
20
+ config: ChartConfig;
21
+ children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
22
+ }): import("react/jsx-runtime").JSX.Element;
23
+ declare const ChartStyle: ({ id, config }: {
24
+ id: string;
25
+ config: ChartConfig;
26
+ }) => import("react/jsx-runtime").JSX.Element | null;
27
+ declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
28
+ declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<'div'> & {
29
+ hideLabel?: boolean;
30
+ hideIndicator?: boolean;
31
+ indicator?: 'line' | 'dot' | 'dashed';
32
+ nameKey?: string;
33
+ labelKey?: string;
34
+ }): import("react/jsx-runtime").JSX.Element | null;
35
+ declare const ChartLegend: typeof RechartsPrimitive.Legend;
36
+ declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<'div'> & Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
37
+ hideIcon?: boolean;
38
+ nameKey?: string;
39
+ }): import("react/jsx-runtime").JSX.Element | null;
40
+ export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };
41
+ //# sourceMappingURL=chart.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/components/ui/chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,UAAU,CAAC;AAK9C,QAAA,MAAM,MAAM;;;CAAwC,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;KACvB,CAAC,IAAI,MAAM,GAAG;QACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,GAAG,CACA;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,KAAK,CAAA;KAAE,GACjC;QAAE,KAAK,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC,MAAM,OAAO,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAChE;CACF,CAAC;AAkBF,iBAAS,cAAc,CAAC,EACtB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,cAAc,CAC5B,OAAO,iBAAiB,CAAC,mBAAmB,CAC7C,CAAC,UAAU,CAAC,CAAC;CACf,2CAsBA;AAED,QAAA,MAAM,UAAU,GAAI,gBAAgB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,mDA+BtE,CAAC;AAEF,QAAA,MAAM,YAAY,kCAA4B,CAAC;AAE/C,iBAAS,mBAAmB,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAiB,EACjB,SAAiB,EACjB,aAAqB,EACrB,KAAK,EACL,cAAc,EACd,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,OAAO,CAAC,GACvD,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,kDA2HF;AAED,QAAA,MAAM,WAAW,iCAA2B,CAAC;AAE7C,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAgB,EAChB,OAAO,EACP,aAAwB,EACxB,OAAO,GACR,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAC5B,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,SAAS,GAAG,eAAe,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,kDA4CF;AAyCD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EAClB,UAAU,GACX,CAAC"}
@@ -0,0 +1,25 @@
1
+ import * as React from 'react';
2
+ import * as LabelPrimitive from '@radix-ui/react-label';
3
+ import { Slot } from '@radix-ui/react-slot';
4
+ import { type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
5
+ declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
6
+ declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
7
+ declare const useFormField: () => {
8
+ invalid: boolean;
9
+ isDirty: boolean;
10
+ isTouched: boolean;
11
+ isValidating: boolean;
12
+ error?: import("react-hook-form").FieldError;
13
+ id: string;
14
+ name: string;
15
+ formItemId: string;
16
+ formDescriptionId: string;
17
+ formMessageId: string;
18
+ };
19
+ declare function FormItem({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
20
+ declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
21
+ declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
22
+ declare function FormDescription({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
23
+ declare function FormMessage({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element | null;
24
+ export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };
25
+ //# sourceMappingURL=form.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,iBAAiB,CAAC;AAKzB,QAAA,MAAM,IAAI,4MAAe,CAAC;AAa1B,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,4CAMtC,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;;;;CAqBjB,CAAC;AAUF,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAYrE;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAYlD;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAiBnE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAW1E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,kDAkBtE;AAED,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,GACV,CAAC"}
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as ProgressPrimitive from '@radix-ui/react-progress';
3
+ import './progress-animations.css';
3
4
  declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
4
5
  export { Progress };
5
6
  //# sourceMappingURL=progress.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAI9D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,2CAyBrD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
1
+ {"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAG9D,OAAO,2BAA2B,CAAC;AAEnC,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,2CAyBrD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ import * as SeparatorPrimitive from '@radix-ui/react-separator';
3
+ declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
4
+ export { Separator };
5
+ //# sourceMappingURL=separator.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/ui/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAIhE,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAA0B,EAC1B,UAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAatD;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
@@ -0,0 +1,4 @@
1
+ import { ToasterProps } from 'sonner';
2
+ declare const Toaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
3
+ export { Toaster };
4
+ //# sourceMappingURL=sonner.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sonner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEzD,QAAA,MAAM,OAAO,GAAI,cAAc,YAAY,4CAiB1C,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
@@ -0,0 +1,4 @@
1
+ import * as React from 'react';
2
+ declare function Textarea({ className, ...props }: React.ComponentProps<'textarea'>): import("react/jsx-runtime").JSX.Element;
3
+ export { Textarea };
4
+ //# sourceMappingURL=textarea.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/ui/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAW1E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
@@ -0,0 +1,293 @@
1
+ # Getting Started with MM React Components
2
+
3
+ This guide will help you get up and running with MM React Components in your application.
4
+
5
+ ## 🚀 Quick Start (Recommended)
6
+
7
+ The fastest way to get started is with our automated setup:
8
+
9
+ ```bash
10
+ # Install the package
11
+ npm install @machinemetrics/mm-react-components
12
+
13
+ # Run the automated setup
14
+ npx @machinemetrics/mm-react-components/setup
15
+ ```
16
+
17
+ This will:
18
+
19
+ - ✅ Copy the Tailwind configuration
20
+ - ✅ Create PostCSS configuration
21
+ - ✅ Set up the complete theme
22
+ - ✅ Create an example component
23
+ - ✅ Generate all necessary files
24
+
25
+ ## 📋 Manual Setup
26
+
27
+ If you prefer to set up manually:
28
+
29
+ ### 1. Install Dependencies
30
+
31
+ ```bash
32
+ npm install @machinemetrics/mm-react-components tailwindcss postcss autoprefixer
33
+ ```
34
+
35
+ ### 2. Configure Tailwind CSS
36
+
37
+ ```bash
38
+ cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
39
+ ```
40
+
41
+ ### 3. Create PostCSS Configuration
42
+
43
+ ```javascript
44
+ // postcss.config.js
45
+ export default {
46
+ plugins: {
47
+ tailwindcss: {},
48
+ autoprefixer: {},
49
+ },
50
+ };
51
+ ```
52
+
53
+ ### 4. Import Styles
54
+
55
+ ```css
56
+ /* src/index.css or your main CSS file */
57
+ @import '@machinemetrics/mm-react-components/styles';
58
+ ```
59
+
60
+ **What's included (118 KB, 18 KB gzipped):**
61
+
62
+ - ✅ Tailwind CSS utilities (fully compiled for all component classes)
63
+ - ✅ Carbide theme variables and component overrides
64
+ - ✅ All component styles including focus states, rings, borders
65
+ - ✅ Dark mode support
66
+ - ✅ Custom animations
67
+
68
+ **Note:** The `/styles` export maps to `dist/lib/mm-react-components.css` in the package.
69
+
70
+ ### 5. Use Components
71
+
72
+ ```tsx
73
+ import { Button, Input, Badge } from '@machinemetrics/mm-react-components';
74
+
75
+ function App() {
76
+ return (
77
+ <div>
78
+ <Button variant="primary">Start Monitoring</Button>
79
+ <Input placeholder="Enter machine ID..." />
80
+ <Badge variant="secondary">Status</Badge>
81
+ </div>
82
+ );
83
+ }
84
+ ```
85
+
86
+ ## 🎨 Theme System
87
+
88
+ ### Base Theme (Default)
89
+
90
+ The base theme provides a modern, professional look with:
91
+
92
+ - OKLCH color system for better perceptual uniformity
93
+ - Noto Sans and Inconsolata fonts
94
+ - Complete dark mode support
95
+ - Chart and sidebar color systems
96
+
97
+ ### Carbide Theme (Industrial)
98
+
99
+ The Carbide theme adds industrial styling:
100
+
101
+ - Manufacturing-appropriate color palette
102
+ - MachineMetrics brand colors
103
+ - Enhanced component styling for industrial applications
104
+
105
+ #### Activating Carbide Theme
106
+
107
+ ```tsx
108
+ import { activateCarbideTheme } from '@machinemetrics/mm-react-components';
109
+
110
+ // Activate Carbide theme
111
+ activateCarbideTheme();
112
+ ```
113
+
114
+ Or add the class manually:
115
+
116
+ ```html
117
+ <html class="carbide"></html>
118
+ ```
119
+
120
+ ## 🔧 Build System Support
121
+
122
+ ### Vite
123
+
124
+ ```javascript
125
+ // vite.config.js
126
+ import { defineConfig } from 'vite';
127
+ import react from '@vitejs/plugin-react';
128
+ import tailwindcss from '@tailwindcss/vite';
129
+
130
+ export default defineConfig({
131
+ plugins: [react(), tailwindcss()],
132
+ });
133
+ ```
134
+
135
+ ### Create React App
136
+
137
+ ```bash
138
+ # Install additional dependencies
139
+ npm install @craco/craco
140
+
141
+ # Create craco.config.js
142
+ module.exports = {
143
+ style: {
144
+ postcss: {
145
+ plugins: [
146
+ require('tailwindcss'),
147
+ require('autoprefixer'),
148
+ ],
149
+ },
150
+ },
151
+ };
152
+ ```
153
+
154
+ ### Next.js
155
+
156
+ ```javascript
157
+ // next.config.js
158
+ /** @type {import('next').NextConfig} */
159
+ const nextConfig = {
160
+ experimental: {
161
+ appDir: true,
162
+ },
163
+ };
164
+
165
+ module.exports = nextConfig;
166
+ ```
167
+
168
+ ## 📦 Available Exports
169
+
170
+ The package provides several export paths:
171
+
172
+ ```javascript
173
+ // Main components and utilities
174
+ import { Button, Input, Badge } from '@machinemetrics/mm-react-components';
175
+
176
+ // Theme utilities
177
+ import {
178
+ activateCarbideTheme,
179
+ toggleDarkMode,
180
+ } from '@machinemetrics/mm-react-components';
181
+
182
+ // CSS imports
183
+ import '@machinemetrics/mm-react-components/styles';
184
+
185
+ // Configuration
186
+ import tailwindConfig from '@machinemetrics/mm-react-components/tailwind.config';
187
+
188
+ // Documentation
189
+ import '@machinemetrics/mm-react-components/README';
190
+ import '@machinemetrics/mm-react-components/docs/tailwind-setup';
191
+ ```
192
+
193
+ ## 🎯 Common Use Cases
194
+
195
+ ### Manufacturing Dashboard
196
+
197
+ ```tsx
198
+ import {
199
+ Button,
200
+ Card,
201
+ DataTable,
202
+ Progress,
203
+ activateCarbideTheme,
204
+ } from '@machinemetrics/mm-react-components';
205
+
206
+ function ManufacturingDashboard() {
207
+ useEffect(() => {
208
+ activateCarbideTheme();
209
+ }, []);
210
+
211
+ return (
212
+ <div className="p-6 space-y-6">
213
+ <Card>
214
+ <CardHeader>
215
+ <CardTitle>Machine Status</CardTitle>
216
+ </CardHeader>
217
+ <CardContent>
218
+ <Progress value={75} />
219
+ </CardContent>
220
+ </Card>
221
+
222
+ <DataTable
223
+ data={machineData}
224
+ columns={columns}
225
+ onRowClick={handleRowClick}
226
+ />
227
+ </div>
228
+ );
229
+ }
230
+ ```
231
+
232
+ ### Form with Validation
233
+
234
+ ```tsx
235
+ import { Input, Button, Label } from '@machinemetrics/mm-react-components';
236
+
237
+ function MachineForm() {
238
+ return (
239
+ <form className="space-y-4">
240
+ <div>
241
+ <Label htmlFor="machine-id">Machine ID</Label>
242
+ <Input id="machine-id" placeholder="Enter machine ID" />
243
+ </div>
244
+
245
+ <div>
246
+ <Label htmlFor="description">Description</Label>
247
+ <Input id="description" placeholder="Enter description" />
248
+ </div>
249
+
250
+ <Button type="submit">Save Machine</Button>
251
+ </form>
252
+ );
253
+ }
254
+ ```
255
+
256
+ ## 🐛 Troubleshooting
257
+
258
+ ### Styles Not Loading
259
+
260
+ 1. **Check import order**: Make sure the theme import comes before other CSS
261
+ 2. **Verify Tailwind config**: Ensure the content paths include the component library
262
+ 3. **Check build process**: Make sure your build system processes CSS through Tailwind
263
+
264
+ ### Theme Not Applying
265
+
266
+ 1. **Activate Carbide theme**: Call `activateCarbideTheme()` or add `carbide` class
267
+ 2. **Check CSS variables**: Verify that CSS custom properties are defined
268
+ 3. **Inspect elements**: Use browser dev tools to check computed styles
269
+
270
+ ### Build Errors
271
+
272
+ 1. **TypeScript errors**: Ensure you have the latest types installed
273
+ 2. **Import errors**: Check that you're using the correct import paths
274
+ 3. **CSS processing**: Verify PostCSS and Tailwind are configured correctly
275
+
276
+ ## 📚 Additional Resources
277
+
278
+ - [Complete API Reference](./API.md)
279
+ - [Tailwind Setup Guide](./TAILWIND_SETUP.md)
280
+ - [Component Examples](./EXAMPLES.md)
281
+ - [Theme Customization](./THEMES.md)
282
+
283
+ ## 🤝 Support
284
+
285
+ For support and questions:
286
+
287
+ - GitHub Issues: [Create an issue](https://github.com/machinemetrics/mm-react-components/issues)
288
+ - Documentation: [Read the docs](https://github.com/machinemetrics/mm-react-components#readme)
289
+ - Examples: [View examples](./EXAMPLES.md)
290
+
291
+ ---
292
+
293
+ Happy building! 🏭✨
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import './lib/styles.css';
1
2
  export { cn } from './lib/utils';
2
3
  export { Button, buttonVariants } from './components/ui/button';
3
4
  export { Input } from './components/ui/input';
@@ -23,11 +24,22 @@ export { Toggle } from './components/ui/toggle';
23
24
  export { Slider, LabeledSlider } from './components/ui/slider';
24
25
  export { Calendar } from './components/ui/calendar';
25
26
  export { Collapsible, CollapsibleTrigger, CollapsibleContent, } from './components/ui/collapsible';
26
- export { DataTable } from './components/ui/data-table';
27
- export { DataTablePagination } from './components/ui/data-table';
27
+ export { DataTable, DataTablePagination, ResponsiveTable, TABLE_TOKENS, createColumnDescriptor, createTextColumn, createNumericColumn, createBadgeColumn, createSelectionColumn, createMultiBadgeColumn, createDateColumn, createColumnRegistry, resolveColumnOrder, resolveColumnVisibility, useDataTableState, useBreakpoint, useTableController, DataTableToolbar, exportTableToCSV, } from './components/ui/data-table';
28
+ export type { ColumnDefaults, ColumnDescriptor, ColumnRegistry, DataTableProps, DataTableInitialState, } from './components/ui/data-table';
28
29
  export { Progress } from './components/ui/progress';
29
30
  export { Dropzone, DropzoneContent, DropzoneEmptyState, } from './components/ui/dropzone';
30
31
  export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from './components/ui/accordion';
31
32
  export { Popover, PopoverTrigger, PopoverContent, } from './components/ui/popover';
32
33
  export { DateRangePicker } from './components/ui/date-range-picker';
34
+ export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, } from './components/ui/card';
35
+ export type { ChartConfig } from './components/ui/chart';
36
+ export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, } from './components/ui/chart';
37
+ export { Alert, AlertTitle, AlertDescription } from './components/ui/alert';
38
+ export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } from './components/ui/alert-dialog';
39
+ export { Textarea } from './components/ui/textarea';
40
+ export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, } from './components/ui/form';
41
+ export { Toaster } from './components/ui/sonner';
42
+ export { Separator } from './components/ui/separator';
43
+ export { Avatar, AvatarImage, AvatarFallback } from './components/ui/avatar';
44
+ export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } from './components/ui/breadcrumb';
33
45
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}