@shohojdhara/atomix 0.3.6 → 0.3.8

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 (74) hide show
  1. package/README.md +3 -3
  2. package/dist/atomix.css +77 -0
  3. package/dist/atomix.css.map +1 -1
  4. package/dist/atomix.min.css +77 -0
  5. package/dist/atomix.min.css.map +1 -1
  6. package/dist/charts.js +50 -142
  7. package/dist/charts.js.map +1 -1
  8. package/dist/core.d.ts +2 -2
  9. package/dist/core.js +179 -274
  10. package/dist/core.js.map +1 -1
  11. package/dist/forms.js +50 -142
  12. package/dist/forms.js.map +1 -1
  13. package/dist/heavy.js +179 -274
  14. package/dist/heavy.js.map +1 -1
  15. package/dist/index.d.ts +1255 -1226
  16. package/dist/index.esm.js +2806 -2958
  17. package/dist/index.esm.js.map +1 -1
  18. package/dist/index.js +3113 -3269
  19. package/dist/index.js.map +1 -1
  20. package/dist/index.min.js +1 -1
  21. package/dist/index.min.js.map +1 -1
  22. package/dist/theme.d.ts +313 -667
  23. package/dist/theme.js +1818 -2589
  24. package/dist/theme.js.map +1 -1
  25. package/package.json +1 -1
  26. package/src/components/AtomixGlass/AtomixGlass.tsx +128 -356
  27. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +1 -1
  28. package/src/components/Button/Button.tsx +85 -167
  29. package/src/components/DataTable/DataTable.stories.tsx +238 -0
  30. package/src/components/DataTable/DataTable.test.tsx +450 -0
  31. package/src/components/DataTable/DataTable.tsx +384 -61
  32. package/src/components/DatePicker/DatePicker.tsx +29 -38
  33. package/src/components/Upload/Upload.tsx +539 -40
  34. package/src/lib/composables/useAtomixGlass.ts +7 -7
  35. package/src/lib/composables/useDataTable.ts +355 -15
  36. package/src/lib/composables/useDatePicker.ts +19 -0
  37. package/src/lib/config/loader.ts +2 -3
  38. package/src/lib/constants/components.ts +17 -0
  39. package/src/lib/hooks/usePerformanceMonitor.ts +1 -1
  40. package/src/lib/theme/adapters/cssVariableMapper.ts +29 -14
  41. package/src/lib/theme/adapters/index.ts +1 -4
  42. package/src/lib/theme/config/configLoader.ts +82 -223
  43. package/src/lib/theme/config/loader.ts +15 -21
  44. package/src/lib/theme/constants/constants.ts +1 -1
  45. package/src/lib/theme/core/ThemeRegistry.ts +75 -279
  46. package/src/lib/theme/core/composeTheme.ts +30 -88
  47. package/src/lib/theme/core/createTheme.ts +88 -51
  48. package/src/lib/theme/core/createThemeObject.ts +2 -2
  49. package/src/lib/theme/core/index.ts +15 -2
  50. package/src/lib/theme/errors/errors.ts +1 -1
  51. package/src/lib/theme/generators/generateCSSNested.ts +131 -0
  52. package/src/lib/theme/generators/generateCSSVariables.ts +24 -16
  53. package/src/lib/theme/generators/index.ts +6 -0
  54. package/src/lib/theme/index.ts +45 -27
  55. package/src/lib/theme/runtime/ThemeApplicator.ts +6 -109
  56. package/src/lib/theme/runtime/ThemeErrorBoundary.tsx +1 -1
  57. package/src/lib/theme/runtime/ThemeProvider.tsx +393 -544
  58. package/src/lib/theme/runtime/index.ts +1 -0
  59. package/src/lib/theme/runtime/useTheme.ts +1 -1
  60. package/src/lib/theme/runtime/useThemeTokens.ts +122 -0
  61. package/src/lib/theme/test/testTheme.ts +2 -1
  62. package/src/lib/theme/types.ts +14 -14
  63. package/src/lib/theme/utils/componentTheming.ts +140 -0
  64. package/src/lib/theme/utils/domUtils.ts +57 -15
  65. package/src/lib/theme/utils/injectCSS.ts +0 -1
  66. package/src/lib/theme/utils/naming.ts +100 -0
  67. package/src/lib/theme/utils/themeHelpers.ts +1 -39
  68. package/src/lib/theme/utils/themeUtils.ts +1 -170
  69. package/src/lib/types/components.ts +145 -0
  70. package/src/lib/utils/componentUtils.ts +1 -1
  71. package/src/lib/utils/dataTableExport.ts +143 -0
  72. package/src/lib/utils/memoryMonitor.ts +3 -3
  73. package/src/lib/utils/themeNaming.ts +135 -0
  74. package/src/styles/06-components/_components.data-table.scss +95 -0
package/src/styles/06-components/_components.data-table.scss CHANGED
@@ -64,6 +64,13 @@
64
64
  display: flex;
65
65
  align-items: center;
66
66
  justify-content: space-between;
67
+ position: relative;
68
+ }
69
+
70
+ &__header-actions {
71
+ display: flex;
72
+ align-items: center;
73
+ gap: 0.5rem;
67
74
  }
68
75
 
69
76
  &__sort-icon {
@@ -76,6 +83,55 @@
76
83
  }
77
84
  }
78
85
 
86
+ &__column-filter {
87
+ width: 120px;
88
+ padding: 0.25rem 0.5rem;
89
+ font-size: 0.875rem;
90
+ border: 1px solid var(--#{config.$prefix}border-color);
91
+ border-radius: 4px;
92
+ background-color: var(--#{config.$prefix}white);
93
+ color: var(--#{config.$prefix}body-color);
94
+
95
+ &:focus {
96
+ outline: none;
97
+ border-color: var(--#{config.$prefix}primary);
98
+ }
99
+ }
100
+
101
+ &__resize-handle {
102
+ position: absolute;
103
+ top: 0;
104
+ right: 0;
105
+ width: 4px;
106
+ height: 100%;
107
+ cursor: col-resize;
108
+ background-color: transparent;
109
+ z-index: 1;
110
+
111
+ &:hover {
112
+ background-color: var(--#{config.$prefix}primary);
113
+ opacity: 0.5;
114
+ }
115
+
116
+ &:active {
117
+ background-color: var(--#{config.$prefix}primary);
118
+ opacity: 1;
119
+ }
120
+ }
121
+
122
+ &__header-cell {
123
+ position: relative;
124
+
125
+ &--dragging {
126
+ opacity: 0.5;
127
+ cursor: move;
128
+ }
129
+
130
+ &--drag-over {
131
+ border-left: 2px solid var(--#{config.$prefix}primary);
132
+ }
133
+ }
134
+
79
135
  // Body cells
80
136
  &__cell {
81
137
  padding: data-table.$data-table-cell-padding-y data-table.$data-table-cell-padding-x;
@@ -95,6 +151,21 @@
95
151
  &[role='button'] {
96
152
  cursor: pointer;
97
153
  }
154
+
155
+ &--selected {
156
+ @include dynamic-background(rgba(var(--#{config.$prefix}primary-rgb), 0.1));
157
+ }
158
+ }
159
+
160
+ // Selection cell
161
+ &__cell--selection {
162
+ width: 48px;
163
+ text-align: center;
164
+ padding: data-table.$data-table-cell-padding-y 0.5rem;
165
+ }
166
+
167
+ &__radio {
168
+ cursor: pointer;
98
169
  }
99
170
 
100
171
  // Loading state
@@ -143,6 +214,15 @@
143
214
  &--loading {
144
215
  opacity: 0.7;
145
216
  }
217
+
218
+ &--sticky-header {
219
+ thead {
220
+ position: sticky;
221
+ top: var(--sticky-header-offset, 0);
222
+ z-index: 10;
223
+ @include dynamic-background(var(--#{config.$prefix}data-table-header-bg));
224
+ }
225
+ }
146
226
  }
147
227
 
148
228
  // Toolbar
@@ -151,6 +231,21 @@
151
231
  align-items: center;
152
232
  justify-content: space-between;
153
233
  margin-bottom: 1rem;
234
+ gap: 1rem;
235
+ flex-wrap: wrap;
236
+
237
+ &__left {
238
+ display: flex;
239
+ align-items: center;
240
+ gap: 1rem;
241
+ flex: 1;
242
+ }
243
+
244
+ &__right {
245
+ display: flex;
246
+ align-items: center;
247
+ gap: 0.5rem;
248
+ }
154
249
  }
155
250
 
156
251
  // Search