@papernote/ui 1.0.0 → 1.2.0

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 (84) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +455 -445
  3. package/dist/components/CurrencyInput.d.ts +52 -0
  4. package/dist/components/CurrencyInput.d.ts.map +1 -0
  5. package/dist/components/DataTable.d.ts +3 -1
  6. package/dist/components/DataTable.d.ts.map +1 -1
  7. package/dist/components/Modal.d.ts.map +1 -1
  8. package/dist/components/Page.d.ts +2 -0
  9. package/dist/components/Page.d.ts.map +1 -1
  10. package/dist/components/PageLayout.d.ts +5 -1
  11. package/dist/components/PageLayout.d.ts.map +1 -1
  12. package/dist/components/Spreadsheet.d.ts +129 -0
  13. package/dist/components/Spreadsheet.d.ts.map +1 -0
  14. package/dist/components/Tabs.d.ts +5 -1
  15. package/dist/components/Tabs.d.ts.map +1 -1
  16. package/dist/components/index.d.ts +6 -0
  17. package/dist/components/index.d.ts.map +1 -1
  18. package/dist/index.d.ts +336 -5
  19. package/dist/index.esm.js +51152 -174
  20. package/dist/index.esm.js.map +1 -1
  21. package/dist/index.js +51145 -143
  22. package/dist/index.js.map +1 -1
  23. package/dist/styles.css +1187 -11
  24. package/dist/utils/excelExport.d.ts +143 -0
  25. package/dist/utils/excelExport.d.ts.map +1 -0
  26. package/dist/utils/index.d.ts +2 -0
  27. package/dist/utils/index.d.ts.map +1 -1
  28. package/package.json +13 -3
  29. package/src/components/AdminModal.css +49 -49
  30. package/src/components/CurrencyInput.stories.tsx +290 -0
  31. package/src/components/CurrencyInput.tsx +193 -0
  32. package/src/components/DataTable.stories.tsx +87 -0
  33. package/src/components/DataTable.tsx +149 -37
  34. package/src/components/Modal.stories.tsx +64 -0
  35. package/src/components/Modal.tsx +15 -2
  36. package/src/components/Page.stories.tsx +76 -0
  37. package/src/components/Page.tsx +35 -3
  38. package/src/components/PageLayout.stories.tsx +75 -0
  39. package/src/components/PageLayout.tsx +28 -9
  40. package/src/components/RoleManager.css +10 -10
  41. package/src/components/Spreadsheet.css +216 -0
  42. package/src/components/Spreadsheet.stories.tsx +362 -0
  43. package/src/components/Spreadsheet.tsx +351 -0
  44. package/src/components/SpreadsheetSimple.stories.tsx +27 -0
  45. package/src/components/Tabs.stories.tsx +31 -0
  46. package/src/components/Tabs.tsx +28 -4
  47. package/src/components/TimePicker.tsx +1 -1
  48. package/src/components/Toast.tsx +9 -9
  49. package/src/components/__tests__/Input.test.tsx +22 -26
  50. package/src/components/index.ts +11 -2
  51. package/src/styles/index.css +44 -6
  52. package/src/utils/excelExport.stories.tsx +535 -0
  53. package/src/utils/excelExport.ts +225 -0
  54. package/src/utils/index.ts +3 -0
  55. package/src/utils/sqlToNaturalLanguage.ts +1 -1
  56. package/tailwind.config.js +253 -253
  57. package/dist/components/Button.stories.d.ts +0 -51
  58. package/dist/components/Button.stories.d.ts.map +0 -1
  59. package/dist/components/ChartVisualizationUI.d.ts +0 -21
  60. package/dist/components/ChartVisualizationUI.d.ts.map +0 -1
  61. package/dist/components/ChatUI.d.ts +0 -23
  62. package/dist/components/ChatUI.d.ts.map +0 -1
  63. package/dist/components/CommissionDashboardUI.d.ts +0 -25
  64. package/dist/components/CommissionDashboardUI.d.ts.map +0 -1
  65. package/dist/components/DataTable.stories.d.ts +0 -23
  66. package/dist/components/DataTable.stories.d.ts.map +0 -1
  67. package/dist/components/FormField.d.ts +0 -35
  68. package/dist/components/FormField.d.ts.map +0 -1
  69. package/dist/components/Input.stories.d.ts +0 -366
  70. package/dist/components/Input.stories.d.ts.map +0 -1
  71. package/dist/components/InsightsPanelUI.d.ts +0 -21
  72. package/dist/components/InsightsPanelUI.d.ts.map +0 -1
  73. package/dist/components/PaymentHistoryTimeline.d.ts +0 -34
  74. package/dist/components/PaymentHistoryTimeline.d.ts.map +0 -1
  75. package/dist/components/RelationshipManagerUI.d.ts +0 -60
  76. package/dist/components/RelationshipManagerUI.d.ts.map +0 -1
  77. package/dist/components/RoleManager.d.ts +0 -19
  78. package/dist/components/RoleManager.d.ts.map +0 -1
  79. package/dist/components/SplitCommissionBadge.d.ts +0 -18
  80. package/dist/components/SplitCommissionBadge.d.ts.map +0 -1
  81. package/dist/components/__tests__/Button.test.d.ts +0 -2
  82. package/dist/components/__tests__/Button.test.d.ts.map +0 -1
  83. package/dist/components/__tests__/Input.test.d.ts +0 -2
  84. package/dist/components/__tests__/Input.test.d.ts.map +0 -1
@@ -1,254 +1,254 @@
1
- /** @type {import('tailwindcss').Config} */
2
- export default {
3
- content: [
4
- "./index.html",
5
- "./src/**/*.{js,ts,jsx,tsx}",
6
- ],
7
- theme: {
8
- extend: {
9
- colors: {
10
- // Primary: Warm slate tones (ink on paper feel)
11
- primary: {
12
- 50: '#f8fafc', // Very light slate
13
- 100: '#f1f5f9', // Light slate
14
- 200: '#e2e8f0', // Soft slate
15
- 300: '#cbd5e1', // Medium slate
16
- 400: '#94a3b8', // Slate
17
- 500: '#64748b', // Base slate (like ink)
18
- 600: '#475569', // Deep slate
19
- 700: '#334155', // Darker slate
20
- 800: '#1e293b', // Very dark slate
21
- 900: '#0f172a', // Nearly black
22
- 950: '#020617', // Black
23
- },
24
- // Accent: Subtle warm tone (very muted, Claude-like)
25
- accent: {
26
- 50: '#fafaf8', // Nearly white with warmth
27
- 100: '#f5f5f0', // Very light warm gray
28
- 200: '#e8e7e0', // Soft warm gray
29
- 300: '#d4d2c8', // Medium warm gray
30
- 400: '#a8a599', // Muted warm gray
31
- 500: '#8b8878', // Base muted warm (subtle highlight)
32
- 600: '#6e6d5e', // Deep muted warm
33
- 700: '#565548', // Darker warm gray
34
- 800: '#3f3e35', // Very dark warm
35
- 900: '#2a2922', // Nearly black warm
36
- },
37
- // Success: Muted emerald green
38
- success: {
39
- 50: '#f0fdf4',
40
- 100: '#dcfce7',
41
- 200: '#bbf7d0',
42
- 300: '#86efac',
43
- 400: '#4ade80',
44
- 500: '#10b981', // Softer than before
45
- 600: '#059669',
46
- 700: '#047857',
47
- 800: '#065f46',
48
- 900: '#064e3b',
49
- },
50
- // Warning: Soft amber (slightly different shade than accent)
51
- warning: {
52
- 50: '#fffbeb',
53
- 100: '#fef3c7',
54
- 200: '#fde68a',
55
- 300: '#fcd34d',
56
- 400: '#fbbf24',
57
- 500: '#f59e0b',
58
- 600: '#d97706',
59
- 700: '#b45309',
60
- 800: '#92400e',
61
- 900: '#78350f',
62
- },
63
- // Error: Muted red
64
- error: {
65
- 50: '#fef2f2',
66
- 100: '#fee2e2',
67
- 200: '#fecaca',
68
- 300: '#fca5a5',
69
- 400: '#f87171',
70
- 500: '#ef4444',
71
- 600: '#dc2626',
72
- 700: '#b91c1c',
73
- 800: '#991b1b',
74
- 900: '#7f1d1d',
75
- },
76
- // Paper: Warm off-white backgrounds (like quality paper)
77
- paper: {
78
- 50: '#fafaf9', // Base page background (very warm white)
79
- 100: '#f5f5f4', // Subtle depth
80
- 200: '#e7e5e4', // Soft borders
81
- 300: '#d6d3d1', // Medium borders
82
- 400: '#a8a29e', // Muted elements
83
- },
84
- // Ink: Text colors (warm grays)
85
- ink: {
86
- 50: '#fafaf9', // Very light text
87
- 100: '#f5f5f4', // Light text
88
- 200: '#e7e5e4', // Subtle text
89
- 300: '#d6d3d1', // Muted text
90
- 400: '#a8a29e', // Light body text
91
- 500: '#78716c', // Body text
92
- 600: '#57534e', // Strong body text
93
- 700: '#44403c', // Headings
94
- 800: '#292524', // Strong headings
95
- 900: '#1c1917', // Black text
96
- },
97
- // Keep neutral for backwards compatibility
98
- neutral: {
99
- 25: '#fcfcfd',
100
- 50: '#f8fafc',
101
- 100: '#f1f5f9',
102
- 200: '#e2e8f0',
103
- 300: '#cbd5e1',
104
- 400: '#94a3b8',
105
- 500: '#64748b',
106
- 600: '#475569',
107
- 700: '#334155',
108
- 800: '#1e293b',
109
- 900: '#0f172a',
110
- 950: '#020617',
111
- }
112
- },
113
- fontFamily: {
114
- sans: [
115
- 'ui-sans-serif',
116
- 'system-ui',
117
- '-apple-system',
118
- 'BlinkMacSystemFont',
119
- 'Segoe UI',
120
- 'Roboto',
121
- 'Inter',
122
- 'Helvetica Neue',
123
- 'Arial',
124
- 'Noto Sans',
125
- 'sans-serif',
126
- 'Apple Color Emoji',
127
- 'Segoe UI Emoji',
128
- ],
129
- mono: [
130
- 'JetBrains Mono Variable',
131
- 'JetBrains Mono',
132
- 'Fira Code',
133
- 'Monaco',
134
- 'Consolas',
135
- 'Liberation Mono',
136
- 'Courier New',
137
- 'monospace'
138
- ],
139
- },
140
- fontSize: {
141
- '2xs': ['0.625rem', { lineHeight: '0.875rem' }],
142
- 'xs': ['0.75rem', { lineHeight: '1.125rem' }],
143
- 'sm': ['0.875rem', { lineHeight: '1.375rem' }], // Increased line-height
144
- 'base': ['1rem', { lineHeight: '1.625rem' }], // More comfortable reading (16px/26px)
145
- 'lg': ['1.125rem', { lineHeight: '1.875rem' }],
146
- 'xl': ['1.25rem', { lineHeight: '2rem' }],
147
- '2xl': ['1.5rem', { lineHeight: '2.25rem' }],
148
- '3xl': ['1.875rem', { lineHeight: '2.5rem' }],
149
- '4xl': ['2.25rem', { lineHeight: '2.75rem' }],
150
- '5xl': ['3rem', { lineHeight: '3.25rem' }],
151
- '6xl': ['3.75rem', { lineHeight: '1' }],
152
- '7xl': ['4.5rem', { lineHeight: '1' }],
153
- '8xl': ['6rem', { lineHeight: '1' }],
154
- '9xl': ['8rem', { lineHeight: '1' }],
155
- },
156
- spacing: {
157
- '4.5': '1.125rem',
158
- '5.5': '1.375rem',
159
- '6.5': '1.625rem',
160
- '7.5': '1.875rem',
161
- '8.5': '2.125rem',
162
- '9.5': '2.375rem',
163
- '17': '4.25rem',
164
- '18': '4.5rem',
165
- '19': '4.75rem',
166
- '21': '5.25rem',
167
- '22': '5.5rem',
168
- '23': '5.75rem',
169
- '25': '6.25rem',
170
- '26': '6.5rem',
171
- '27': '6.75rem',
172
- '29': '7.25rem',
173
- '30': '7.5rem',
174
- '31': '7.75rem',
175
- '33': '8.25rem',
176
- '34': '8.5rem',
177
- '35': '8.75rem',
178
- },
179
- borderRadius: {
180
- '4xl': '2rem',
181
- '5xl': '2.5rem',
182
- },
183
- boxShadow: {
184
- 'xs': '0 1px 2px 0 rgb(0 0 0 / 0.03)', // Very subtle
185
- 'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)', // Soft paper lift
186
- 'md': '0 2px 4px 0 rgb(0 0 0 / 0.06)', // Gentle elevation
187
- 'lg': '0 4px 6px -1px rgb(0 0 0 / 0.08)', // Moderate elevation
188
- 'xl': '0 10px 15px -3px rgb(0 0 0 / 0.1)', // Strong elevation
189
- '2xl': '0 20px 25px -5px rgb(0 0 0 / 0.12)', // Maximum elevation
190
- 'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.04)', // Subtle inner shadow
191
- 'paper': '0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.03)', // Paper-like shadow
192
- 'card': '0 2px 4px 0 rgb(0 0 0 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.02)', // Card shadow
193
- },
194
- animation: {
195
- 'fade-in': 'fadeIn 0.5s ease-in-out',
196
- 'fade-in-up': 'fadeInUp 0.5s ease-out',
197
- 'slide-in': 'slideIn 0.3s ease-out',
198
- 'slide-in-right': 'slideInRight 0.3s ease-out',
199
- 'bounce-subtle': 'bounceSubtle 2s infinite',
200
- 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
201
- 'shimmer': 'shimmer 2s linear infinite',
202
- 'float': 'float 6s ease-in-out infinite',
203
- 'scale-in': 'scaleIn 0.2s ease-out',
204
- },
205
- keyframes: {
206
- fadeIn: {
207
- '0%': { opacity: '0' },
208
- '100%': { opacity: '1' },
209
- },
210
- fadeInUp: {
211
- '0%': { opacity: '0', transform: 'translateY(10px)' },
212
- '100%': { opacity: '1', transform: 'translateY(0)' },
213
- },
214
- slideIn: {
215
- '0%': { transform: 'translateX(-10px)', opacity: '0' },
216
- '100%': { transform: 'translateX(0)', opacity: '1' },
217
- },
218
- slideInRight: {
219
- '0%': { transform: 'translateX(10px)', opacity: '0' },
220
- '100%': { transform: 'translateX(0)', opacity: '1' },
221
- },
222
- bounceSubtle: {
223
- '0%, 100%': { transform: 'translateY(0)' },
224
- '50%': { transform: 'translateY(-2px)' },
225
- },
226
- shimmer: {
227
- '0%': { transform: 'translateX(-100%)' },
228
- '100%': { transform: 'translateX(100%)' },
229
- },
230
- float: {
231
- '0%, 100%': { transform: 'translateY(0px)' },
232
- '50%': { transform: 'translateY(-10px)' },
233
- },
234
- scaleIn: {
235
- '0%': { transform: 'scale(0.9)', opacity: '0' },
236
- '100%': { transform: 'scale(1)', opacity: '1' },
237
- },
238
- },
239
- backdropBlur: {
240
- 'xs': '2px',
241
- },
242
- backgroundImage: {
243
- 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
244
- 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
245
- 'grid-pattern': `url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23e2e8f0' fill-opacity='0.4'%3e%3ccircle cx='30' cy='30' r='1.5'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e")`,
246
- // Subtle paper texture (very fine grain)
247
- 'paper-texture': `url("data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noise'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3e%3cfeColorMatrix type='saturate' values='0'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3e%3c/svg%3e")`,
248
- // Very subtle grain for cards
249
- 'subtle-grain': `url("data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noise'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3e%3cfeColorMatrix type='saturate' values='0'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3e%3c/svg%3e")`,
250
- },
251
- },
252
- },
253
- plugins: [],
1
+ /** @type {import('tailwindcss').Config} */
2
+ export default {
3
+ content: [
4
+ "./index.html",
5
+ "./src/**/*.{js,ts,jsx,tsx}",
6
+ ],
7
+ theme: {
8
+ extend: {
9
+ colors: {
10
+ // Primary: Warm slate tones (ink on paper feel)
11
+ primary: {
12
+ 50: '#f8fafc', // Very light slate
13
+ 100: '#f1f5f9', // Light slate
14
+ 200: '#e2e8f0', // Soft slate
15
+ 300: '#cbd5e1', // Medium slate
16
+ 400: '#94a3b8', // Slate
17
+ 500: '#64748b', // Base slate (like ink)
18
+ 600: '#475569', // Deep slate
19
+ 700: '#334155', // Darker slate
20
+ 800: '#1e293b', // Very dark slate
21
+ 900: '#0f172a', // Nearly black
22
+ 950: '#020617', // Black
23
+ },
24
+ // Accent: Subtle warm tone (very muted, Claude-like)
25
+ accent: {
26
+ 50: '#fafaf8', // Nearly white with warmth
27
+ 100: '#f5f5f0', // Very light warm gray
28
+ 200: '#e8e7e0', // Soft warm gray
29
+ 300: '#d4d2c8', // Medium warm gray
30
+ 400: '#a8a599', // Muted warm gray
31
+ 500: '#8b8878', // Base muted warm (subtle highlight)
32
+ 600: '#6e6d5e', // Deep muted warm
33
+ 700: '#565548', // Darker warm gray
34
+ 800: '#3f3e35', // Very dark warm
35
+ 900: '#2a2922', // Nearly black warm
36
+ },
37
+ // Success: Muted emerald green
38
+ success: {
39
+ 50: '#f0fdf4',
40
+ 100: '#dcfce7',
41
+ 200: '#bbf7d0',
42
+ 300: '#86efac',
43
+ 400: '#4ade80',
44
+ 500: '#10b981', // Softer than before
45
+ 600: '#059669',
46
+ 700: '#047857',
47
+ 800: '#065f46',
48
+ 900: '#064e3b',
49
+ },
50
+ // Warning: Soft amber (slightly different shade than accent)
51
+ warning: {
52
+ 50: '#fffbeb',
53
+ 100: '#fef3c7',
54
+ 200: '#fde68a',
55
+ 300: '#fcd34d',
56
+ 400: '#fbbf24',
57
+ 500: '#f59e0b',
58
+ 600: '#d97706',
59
+ 700: '#b45309',
60
+ 800: '#92400e',
61
+ 900: '#78350f',
62
+ },
63
+ // Error: Muted red
64
+ error: {
65
+ 50: '#fef2f2',
66
+ 100: '#fee2e2',
67
+ 200: '#fecaca',
68
+ 300: '#fca5a5',
69
+ 400: '#f87171',
70
+ 500: '#ef4444',
71
+ 600: '#dc2626',
72
+ 700: '#b91c1c',
73
+ 800: '#991b1b',
74
+ 900: '#7f1d1d',
75
+ },
76
+ // Paper: Warm off-white backgrounds (like quality paper)
77
+ paper: {
78
+ 50: '#fafaf9', // Base page background (very warm white)
79
+ 100: '#f5f5f4', // Subtle depth
80
+ 200: '#e7e5e4', // Soft borders
81
+ 300: '#d6d3d1', // Medium borders
82
+ 400: '#a8a29e', // Muted elements
83
+ },
84
+ // Ink: Text colors (warm grays)
85
+ ink: {
86
+ 50: '#fafaf9', // Very light text
87
+ 100: '#f5f5f4', // Light text
88
+ 200: '#e7e5e4', // Subtle text
89
+ 300: '#d6d3d1', // Muted text
90
+ 400: '#a8a29e', // Light body text
91
+ 500: '#78716c', // Body text
92
+ 600: '#57534e', // Strong body text
93
+ 700: '#44403c', // Headings
94
+ 800: '#292524', // Strong headings
95
+ 900: '#1c1917', // Black text
96
+ },
97
+ // Keep neutral for backwards compatibility
98
+ neutral: {
99
+ 25: '#fcfcfd',
100
+ 50: '#f8fafc',
101
+ 100: '#f1f5f9',
102
+ 200: '#e2e8f0',
103
+ 300: '#cbd5e1',
104
+ 400: '#94a3b8',
105
+ 500: '#64748b',
106
+ 600: '#475569',
107
+ 700: '#334155',
108
+ 800: '#1e293b',
109
+ 900: '#0f172a',
110
+ 950: '#020617',
111
+ }
112
+ },
113
+ fontFamily: {
114
+ sans: [
115
+ 'ui-sans-serif',
116
+ 'system-ui',
117
+ '-apple-system',
118
+ 'BlinkMacSystemFont',
119
+ 'Segoe UI',
120
+ 'Roboto',
121
+ 'Inter',
122
+ 'Helvetica Neue',
123
+ 'Arial',
124
+ 'Noto Sans',
125
+ 'sans-serif',
126
+ 'Apple Color Emoji',
127
+ 'Segoe UI Emoji',
128
+ ],
129
+ mono: [
130
+ 'JetBrains Mono Variable',
131
+ 'JetBrains Mono',
132
+ 'Fira Code',
133
+ 'Monaco',
134
+ 'Consolas',
135
+ 'Liberation Mono',
136
+ 'Courier New',
137
+ 'monospace'
138
+ ],
139
+ },
140
+ fontSize: {
141
+ '2xs': ['0.625rem', { lineHeight: '0.875rem' }],
142
+ 'xs': ['0.75rem', { lineHeight: '1.125rem' }],
143
+ 'sm': ['0.875rem', { lineHeight: '1.375rem' }], // Increased line-height
144
+ 'base': ['1rem', { lineHeight: '1.625rem' }], // More comfortable reading (16px/26px)
145
+ 'lg': ['1.125rem', { lineHeight: '1.875rem' }],
146
+ 'xl': ['1.25rem', { lineHeight: '2rem' }],
147
+ '2xl': ['1.5rem', { lineHeight: '2.25rem' }],
148
+ '3xl': ['1.875rem', { lineHeight: '2.5rem' }],
149
+ '4xl': ['2.25rem', { lineHeight: '2.75rem' }],
150
+ '5xl': ['3rem', { lineHeight: '3.25rem' }],
151
+ '6xl': ['3.75rem', { lineHeight: '1' }],
152
+ '7xl': ['4.5rem', { lineHeight: '1' }],
153
+ '8xl': ['6rem', { lineHeight: '1' }],
154
+ '9xl': ['8rem', { lineHeight: '1' }],
155
+ },
156
+ spacing: {
157
+ '4.5': '1.125rem',
158
+ '5.5': '1.375rem',
159
+ '6.5': '1.625rem',
160
+ '7.5': '1.875rem',
161
+ '8.5': '2.125rem',
162
+ '9.5': '2.375rem',
163
+ '17': '4.25rem',
164
+ '18': '4.5rem',
165
+ '19': '4.75rem',
166
+ '21': '5.25rem',
167
+ '22': '5.5rem',
168
+ '23': '5.75rem',
169
+ '25': '6.25rem',
170
+ '26': '6.5rem',
171
+ '27': '6.75rem',
172
+ '29': '7.25rem',
173
+ '30': '7.5rem',
174
+ '31': '7.75rem',
175
+ '33': '8.25rem',
176
+ '34': '8.5rem',
177
+ '35': '8.75rem',
178
+ },
179
+ borderRadius: {
180
+ '4xl': '2rem',
181
+ '5xl': '2.5rem',
182
+ },
183
+ boxShadow: {
184
+ 'xs': '0 1px 2px 0 rgb(0 0 0 / 0.03)', // Very subtle
185
+ 'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)', // Soft paper lift
186
+ 'md': '0 2px 4px 0 rgb(0 0 0 / 0.06)', // Gentle elevation
187
+ 'lg': '0 4px 6px -1px rgb(0 0 0 / 0.08)', // Moderate elevation
188
+ 'xl': '0 10px 15px -3px rgb(0 0 0 / 0.1)', // Strong elevation
189
+ '2xl': '0 20px 25px -5px rgb(0 0 0 / 0.12)', // Maximum elevation
190
+ 'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.04)', // Subtle inner shadow
191
+ 'paper': '0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.03)', // Paper-like shadow
192
+ 'card': '0 2px 4px 0 rgb(0 0 0 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.02)', // Card shadow
193
+ },
194
+ animation: {
195
+ 'fade-in': 'fadeIn 0.5s ease-in-out',
196
+ 'fade-in-up': 'fadeInUp 0.5s ease-out',
197
+ 'slide-in': 'slideIn 0.3s ease-out',
198
+ 'slide-in-right': 'slideInRight 0.3s ease-out',
199
+ 'bounce-subtle': 'bounceSubtle 2s infinite',
200
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
201
+ 'shimmer': 'shimmer 2s linear infinite',
202
+ 'float': 'float 6s ease-in-out infinite',
203
+ 'scale-in': 'scaleIn 0.2s ease-out',
204
+ },
205
+ keyframes: {
206
+ fadeIn: {
207
+ '0%': { opacity: '0' },
208
+ '100%': { opacity: '1' },
209
+ },
210
+ fadeInUp: {
211
+ '0%': { opacity: '0', transform: 'translateY(10px)' },
212
+ '100%': { opacity: '1', transform: 'translateY(0)' },
213
+ },
214
+ slideIn: {
215
+ '0%': { transform: 'translateX(-10px)', opacity: '0' },
216
+ '100%': { transform: 'translateX(0)', opacity: '1' },
217
+ },
218
+ slideInRight: {
219
+ '0%': { transform: 'translateX(10px)', opacity: '0' },
220
+ '100%': { transform: 'translateX(0)', opacity: '1' },
221
+ },
222
+ bounceSubtle: {
223
+ '0%, 100%': { transform: 'translateY(0)' },
224
+ '50%': { transform: 'translateY(-2px)' },
225
+ },
226
+ shimmer: {
227
+ '0%': { transform: 'translateX(-100%)' },
228
+ '100%': { transform: 'translateX(100%)' },
229
+ },
230
+ float: {
231
+ '0%, 100%': { transform: 'translateY(0px)' },
232
+ '50%': { transform: 'translateY(-10px)' },
233
+ },
234
+ scaleIn: {
235
+ '0%': { transform: 'scale(0.9)', opacity: '0' },
236
+ '100%': { transform: 'scale(1)', opacity: '1' },
237
+ },
238
+ },
239
+ backdropBlur: {
240
+ 'xs': '2px',
241
+ },
242
+ backgroundImage: {
243
+ 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
244
+ 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
245
+ 'grid-pattern': `url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23e2e8f0' fill-opacity='0.4'%3e%3ccircle cx='30' cy='30' r='1.5'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e")`,
246
+ // Subtle paper texture (very fine grain)
247
+ 'paper-texture': `url("data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noise'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3e%3cfeColorMatrix type='saturate' values='0'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3e%3c/svg%3e")`,
248
+ // Very subtle grain for cards
249
+ 'subtle-grain': `url("data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noise'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3e%3cfeColorMatrix type='saturate' values='0'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3e%3c/svg%3e")`,
250
+ },
251
+ },
252
+ },
253
+ plugins: [],
254
254
  }
@@ -1,51 +0,0 @@
1
- import type { StoryObj } from '@storybook/react';
2
- import Button from './Button';
3
- declare const meta: {
4
- title: string;
5
- component: typeof Button;
6
- parameters: {
7
- layout: string;
8
- };
9
- tags: string[];
10
- argTypes: {
11
- variant: {
12
- control: "select";
13
- options: string[];
14
- };
15
- size: {
16
- control: "select";
17
- options: string[];
18
- };
19
- loading: {
20
- control: "boolean";
21
- };
22
- disabled: {
23
- control: "boolean";
24
- };
25
- fullWidth: {
26
- control: "boolean";
27
- };
28
- iconOnly: {
29
- control: "boolean";
30
- };
31
- };
32
- };
33
- export default meta;
34
- type Story = StoryObj<typeof meta>;
35
- export declare const Primary: Story;
36
- export declare const Secondary: Story;
37
- export declare const Ghost: Story;
38
- export declare const Danger: Story;
39
- export declare const Outline: Story;
40
- export declare const WithIcon: Story;
41
- export declare const IconRight: Story;
42
- export declare const IconOnly: Story;
43
- export declare const Loading: Story;
44
- export declare const Disabled: Story;
45
- export declare const WithBadge: Story;
46
- export declare const Small: Story;
47
- export declare const Large: Story;
48
- export declare const FullWidth: Story;
49
- export declare const AllVariants: Story;
50
- export declare const AllSizes: Story;
51
- //# sourceMappingURL=Button.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/components/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC"}
@@ -1,21 +0,0 @@
1
- import React from 'react';
2
- export interface ChartData {
3
- type: string;
4
- title: string;
5
- charts?: any[];
6
- chartType?: string;
7
- data?: any;
8
- lastUpdated?: string;
9
- message?: string;
10
- }
11
- export interface ChartVisualizationUIProps {
12
- chartData: ChartData | null;
13
- isLoading: boolean;
14
- error: string | null;
15
- reportId: string;
16
- title?: string;
17
- height?: string;
18
- onRefresh?: () => void;
19
- }
20
- export declare const ChartVisualizationUI: React.FC<ChartVisualizationUIProps>;
21
- //# sourceMappingURL=ChartVisualizationUI.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChartVisualizationUI.d.ts","sourceRoot":"","sources":["../../src/components/ChartVisualizationUI.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AA+FD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA2HpE,CAAC"}
@@ -1,23 +0,0 @@
1
- import React from 'react';
2
- export interface ChatMessage {
3
- id: string;
4
- role: 'user' | 'assistant';
5
- content: string;
6
- timestamp: Date;
7
- }
8
- export interface ChatUIProps {
9
- messages: ChatMessage[];
10
- inputValue: string;
11
- isLoading: boolean;
12
- suggestedQuestions?: string[];
13
- isMinimized?: boolean;
14
- className?: string;
15
- messagesEndRef?: React.RefObject<HTMLDivElement | null>;
16
- onInputChange: (value: string) => void;
17
- onSendMessage: () => void;
18
- onKeyPress: (e: React.KeyboardEvent) => void;
19
- onSuggestedQuestion?: (question: string) => void;
20
- onMinimize?: (minimized: boolean) => void;
21
- }
22
- export declare const ChatUI: React.FC<ChatUIProps>;
23
- //# sourceMappingURL=ChatUI.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChatUI.d.ts","sourceRoot":"","sources":["../../src/components/ChatUI.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACxD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC7C,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmIxC,CAAC"}
@@ -1,25 +0,0 @@
1
- import React from 'react';
2
- import './CommissionDashboardUI.css';
3
- export interface MonthlyCommission {
4
- year: number;
5
- month: number;
6
- totalCommission: number;
7
- totalPaid: number;
8
- totalUnpaid: number;
9
- lineItemCount: number;
10
- }
11
- export interface CommissionSummary {
12
- userId: string;
13
- userName: string;
14
- currentYearTotal: number;
15
- currentMonthTotal: number;
16
- monthlyBreakdown: MonthlyCommission[];
17
- }
18
- export interface CommissionDashboardUIProps {
19
- summary: CommissionSummary | null;
20
- isLoading: boolean;
21
- error: string | null;
22
- onRefresh?: () => void;
23
- }
24
- export declare const CommissionDashboardUI: React.FC<CommissionDashboardUIProps>;
25
- //# sourceMappingURL=CommissionDashboardUI.d.ts.map