@machinemetrics/mm-react-components 0.2.3-0 → 0.2.3-2

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 (31) hide show
  1. package/README.md +89 -32
  2. package/dist/App.d.ts.map +1 -1
  3. package/dist/README.md +303 -0
  4. package/dist/components/ui/button.d.ts +1 -1
  5. package/dist/docs/GETTING_STARTED.md +285 -0
  6. package/dist/docs/TAILWIND_SETUP.md +8 -1
  7. package/dist/index.d.ts +6 -3
  8. package/dist/index.d.ts.map +1 -1
  9. package/dist/main.d.ts +2 -2
  10. package/dist/main.d.ts.map +1 -1
  11. package/dist/mm-react-components.es.js +1889 -75
  12. package/dist/mm-react-components.es.js.map +1 -1
  13. package/dist/mm-react-components.umd.js +10 -10
  14. package/dist/mm-react-components.umd.js.map +1 -1
  15. package/dist/preview/CheckboxPreview.d.ts.map +1 -1
  16. package/dist/preview/DataTablePreview.d.ts.map +1 -1
  17. package/dist/preview/InputPreview.d.ts.map +1 -1
  18. package/dist/preview/LabelPreview.d.ts.map +1 -1
  19. package/dist/preview/RadioGroupPreview.d.ts.map +1 -1
  20. package/dist/preview/TabsPreview.d.ts.map +1 -1
  21. package/dist/preview/data-table/data-table-preview_column-content.d.ts +1 -1
  22. package/dist/preview/data-table/data-table-preview_column-content.d.ts.map +1 -1
  23. package/dist/preview/page-header/PageHeaderPreview.d.ts.map +1 -1
  24. package/dist/themes/base.css +536 -0
  25. package/dist/themes/complete.css +8 -0
  26. package/docs/TAILWIND_SETUP.md +8 -1
  27. package/package.json +25 -4
  28. package/src/themes/base.css +536 -0
  29. package/src/themes/complete.css +8 -0
  30. package/dist/tailwind.config.export.js +0 -153
  31. package/tailwind.config.export.js +0 -153
package/tailwind.config.export.js DELETED
@@ -1,153 +0,0 @@
1
- /** @type {import('tailwindcss').Config} */
2
- export default {
3
- content: [
4
- './src/**/*.{js,ts,jsx,tsx}',
5
- './node_modules/@machinemetrics/mm-react-components/dist/**/*.{js,ts,jsx,tsx}',
6
- ],
7
- theme: {
8
- extend: {
9
- colors: {
10
- background: 'var(--background)',
11
- foreground: 'var(--foreground)',
12
- card: 'var(--card)',
13
- 'card-foreground': 'var(--card-foreground)',
14
- popover: 'var(--popover)',
15
- 'popover-foreground': 'var(--popover-foreground)',
16
- primary: 'var(--primary)',
17
- 'primary-foreground': 'var(--primary-foreground)',
18
- secondary: 'var(--secondary)',
19
- 'secondary-foreground': 'var(--secondary-foreground)',
20
- muted: 'var(--muted)',
21
- 'muted-foreground': 'var(--muted-foreground)',
22
- accent: 'var(--accent)',
23
- 'accent-foreground': 'var(--accent-foreground)',
24
- destructive: 'var(--destructive)',
25
- 'destructive-foreground': 'var(--destructive-foreground)',
26
- border: 'var(--border)',
27
- input: 'var(--input)',
28
- 'bg-input': 'var(--bg-input)',
29
- 'border-input': 'var(--border-input)',
30
- ring: 'var(--ring)',
31
- // Chart colors for data visualization
32
- 'chart-1': 'var(--chart-1)',
33
- 'chart-2': 'var(--chart-2)',
34
- 'chart-3': 'var(--chart-3)',
35
- 'chart-4': 'var(--chart-4)',
36
- 'chart-5': 'var(--chart-5)',
37
- // Sidebar colors
38
- sidebar: 'var(--sidebar)',
39
- 'sidebar-foreground': 'var(--sidebar-foreground)',
40
- 'sidebar-primary': 'var(--sidebar-primary)',
41
- 'sidebar-primary-foreground': 'var(--sidebar-primary-foreground)',
42
- 'sidebar-accent': 'var(--sidebar-accent)',
43
- 'sidebar-accent-foreground': 'var(--sidebar-accent-foreground)',
44
- 'sidebar-border': 'var(--sidebar-border)',
45
- 'sidebar-ring': 'var(--sidebar-ring)',
46
- },
47
- borderRadius: {
48
- sm: 'var(--radius-sm)',
49
- md: 'var(--radius-md)',
50
- lg: 'var(--radius-lg)',
51
- xl: 'var(--radius-xl)',
52
- },
53
- fontFamily: {
54
- sans: [
55
- 'Noto Sans',
56
- 'Inter',
57
- 'ui-sans-serif',
58
- 'system-ui',
59
- '-apple-system',
60
- 'BlinkMacSystemFont',
61
- 'Segoe UI',
62
- 'Roboto',
63
- 'Helvetica Neue',
64
- 'Arial',
65
- 'sans-serif',
66
- 'Apple Color Emoji',
67
- 'Segoe UI Emoji',
68
- 'Segoe UI Symbol',
69
- 'Noto Color Emoji',
70
- ],
71
- mono: [
72
- 'Inconsolata',
73
- 'ui-monospace',
74
- 'SFMono-Regular',
75
- 'Menlo',
76
- 'Monaco',
77
- 'Consolas',
78
- 'Liberation Mono',
79
- 'Courier New',
80
- 'monospace',
81
- ],
82
- },
83
- fontWeight: {
84
- normal: '400',
85
- medium: '500',
86
- semibold: '600',
87
- bold: 'var(--font-weight-bold)',
88
- },
89
- // Custom variants for component preview interface
90
- spacing: {
91
- sidebar: '16rem', // 256px for sidebar width
92
- },
93
- // Animation utilities for smooth transitions
94
- animation: {
95
- 'fade-in': 'fadeIn 0.2s ease-in-out',
96
- 'slide-in': 'slideIn 0.3s ease-out',
97
- },
98
- keyframes: {
99
- fadeIn: {
100
- '0%': { opacity: '0' },
101
- '100%': { opacity: '1' },
102
- },
103
- slideIn: {
104
- '0%': { transform: 'translateX(-10px)', opacity: '0' },
105
- '100%': { transform: 'translateX(0)', opacity: '1' },
106
- },
107
- },
108
- },
109
- },
110
- plugins: [
111
- // Custom plugin for component preview interface
112
- function ({ addUtilities }) {
113
- const newUtilities = {
114
- '.preview-sidebar': {
115
- width: '16rem',
116
- minHeight: '100vh',
117
- backgroundColor: 'var(--muted)',
118
- borderRight: '1px solid var(--border)',
119
- padding: '1rem',
120
- },
121
- '.preview-main': {
122
- flex: '1',
123
- minWidth: '0',
124
- padding: '2rem',
125
- },
126
- '.preview-card': {
127
- backgroundColor: 'var(--card)',
128
- border: '1px solid var(--border)',
129
- borderRadius: 'var(--radius-lg)',
130
- padding: '1.5rem',
131
- },
132
- '.preview-nav-item': {
133
- width: '100%',
134
- textAlign: 'left',
135
- padding: '0.75rem',
136
- borderRadius: '0.375rem',
137
- fontSize: '0.875rem',
138
- fontWeight: '500',
139
- transition: 'colors 0.2s ease-in-out',
140
- '&:hover': {
141
- backgroundColor: 'var(--muted)',
142
- color: 'var(--foreground)',
143
- },
144
- '&.active': {
145
- backgroundColor: 'var(--primary)',
146
- color: 'var(--primary-foreground)',
147
- },
148
- },
149
- };
150
- addUtilities(newUtilities);
151
- },
152
- ],
153
- };