@shohojdhara/atomix 0.3.7 → 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 (53) hide show
  1. package/dist/atomix.css +77 -0
  2. package/dist/atomix.css.map +1 -1
  3. package/dist/atomix.min.css +77 -0
  4. package/dist/atomix.min.css.map +1 -1
  5. package/dist/charts.js.map +1 -1
  6. package/dist/core.d.ts +2 -2
  7. package/dist/core.js.map +1 -1
  8. package/dist/forms.js.map +1 -1
  9. package/dist/heavy.js.map +1 -1
  10. package/dist/index.d.ts +578 -515
  11. package/dist/index.esm.js +3157 -2626
  12. package/dist/index.esm.js.map +1 -1
  13. package/dist/index.js +10496 -9973
  14. package/dist/index.js.map +1 -1
  15. package/dist/index.min.js +1 -1
  16. package/dist/index.min.js.map +1 -1
  17. package/dist/theme.d.ts +237 -420
  18. package/dist/theme.js +1629 -1701
  19. package/dist/theme.js.map +1 -1
  20. package/package.json +1 -1
  21. package/src/components/DataTable/DataTable.stories.tsx +238 -0
  22. package/src/components/DataTable/DataTable.test.tsx +450 -0
  23. package/src/components/DataTable/DataTable.tsx +384 -61
  24. package/src/components/DatePicker/DatePicker.tsx +29 -38
  25. package/src/components/Upload/Upload.tsx +539 -40
  26. package/src/lib/composables/useDataTable.ts +355 -15
  27. package/src/lib/composables/useDatePicker.ts +19 -0
  28. package/src/lib/constants/components.ts +10 -0
  29. package/src/lib/theme/adapters/cssVariableMapper.ts +29 -14
  30. package/src/lib/theme/adapters/index.ts +1 -4
  31. package/src/lib/theme/config/configLoader.ts +53 -35
  32. package/src/lib/theme/core/composeTheme.ts +22 -30
  33. package/src/lib/theme/core/createTheme.ts +49 -26
  34. package/src/lib/theme/core/index.ts +0 -1
  35. package/src/lib/theme/generators/generateCSSNested.ts +4 -3
  36. package/src/lib/theme/generators/generateCSSVariables.ts +24 -16
  37. package/src/lib/theme/index.ts +10 -17
  38. package/src/lib/theme/runtime/ThemeApplicator.ts +6 -109
  39. package/src/lib/theme/runtime/ThemeErrorBoundary.tsx +3 -3
  40. package/src/lib/theme/runtime/ThemeProvider.tsx +186 -44
  41. package/src/lib/theme/runtime/useTheme.ts +1 -1
  42. package/src/lib/theme/runtime/useThemeTokens.ts +7 -16
  43. package/src/lib/theme/test/testTheme.ts +2 -1
  44. package/src/lib/theme/types.ts +14 -14
  45. package/src/lib/theme/utils/componentTheming.ts +35 -27
  46. package/src/lib/theme/utils/domUtils.ts +57 -15
  47. package/src/lib/theme/utils/injectCSS.ts +0 -1
  48. package/src/lib/theme/utils/themeHelpers.ts +1 -39
  49. package/src/lib/theme/utils/themeUtils.ts +1 -170
  50. package/src/lib/types/components.ts +145 -0
  51. package/src/lib/utils/dataTableExport.ts +143 -0
  52. package/src/styles/06-components/_components.data-table.scss +95 -0
  53. package/src/lib/hooks/useThemeTokens.ts +0 -105
package/dist/atomix.css CHANGED
@@ -5041,6 +5041,12 @@ a, a:hover {
5041
5041
  display: flex;
5042
5042
  align-items: center;
5043
5043
  justify-content: space-between;
5044
+ position: relative;
5045
+ }
5046
+ .c-data-table__header-actions {
5047
+ display: flex;
5048
+ align-items: center;
5049
+ gap: 0.5rem;
5044
5050
  }
5045
5051
  .c-data-table__sort-icon {
5046
5052
  margin-left: 0.5rem;
@@ -5050,6 +5056,47 @@ a, a:hover {
5050
5056
  .c-data-table__header-cell[aria-sort] .c-data-table__sort-icon {
5051
5057
  color: var(--atomix-primary);
5052
5058
  }
5059
+ .c-data-table__column-filter {
5060
+ width: 120px;
5061
+ padding: 0.25rem 0.5rem;
5062
+ font-size: 0.875rem;
5063
+ border: 1px solid var(--atomix-border-color);
5064
+ border-radius: 4px;
5065
+ background-color: var(--atomix-white);
5066
+ color: var(--atomix-body-color);
5067
+ }
5068
+ .c-data-table__column-filter:focus {
5069
+ outline: none;
5070
+ border-color: var(--atomix-primary);
5071
+ }
5072
+ .c-data-table__resize-handle {
5073
+ position: absolute;
5074
+ top: 0;
5075
+ right: 0;
5076
+ width: 4px;
5077
+ height: 100%;
5078
+ cursor: col-resize;
5079
+ background-color: transparent;
5080
+ z-index: 1;
5081
+ }
5082
+ .c-data-table__resize-handle:hover {
5083
+ background-color: var(--atomix-primary);
5084
+ opacity: 0.5;
5085
+ }
5086
+ .c-data-table__resize-handle:active {
5087
+ background-color: var(--atomix-primary);
5088
+ opacity: 1;
5089
+ }
5090
+ .c-data-table__header-cell {
5091
+ position: relative;
5092
+ }
5093
+ .c-data-table__header-cell--dragging {
5094
+ opacity: 0.5;
5095
+ cursor: move;
5096
+ }
5097
+ .c-data-table__header-cell--drag-over {
5098
+ border-left: 2px solid var(--atomix-primary);
5099
+ }
5053
5100
  .c-data-table__cell {
5054
5101
  padding: 0.75rem 1rem;
5055
5102
  border-bottom: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
@@ -5064,6 +5111,17 @@ a, a:hover {
5064
5111
  .c-data-table__row[role=button] {
5065
5112
  cursor: pointer;
5066
5113
  }
5114
+ .c-data-table__row--selected {
5115
+ background-color: rgba(var(--atomix-primary-rgb), 0.1);
5116
+ }
5117
+ .c-data-table__cell--selection {
5118
+ width: 48px;
5119
+ text-align: center;
5120
+ padding: 0.75rem 0.5rem;
5121
+ }
5122
+ .c-data-table__radio {
5123
+ cursor: pointer;
5124
+ }
5067
5125
  .c-data-table__loading-cell {
5068
5126
  padding: 2rem;
5069
5127
  text-align: center;
@@ -5094,11 +5152,30 @@ a, a:hover {
5094
5152
  .c-data-table--loading {
5095
5153
  opacity: 0.7;
5096
5154
  }
5155
+ .c-data-table--sticky-header thead {
5156
+ position: sticky;
5157
+ top: var(--sticky-header-offset, 0);
5158
+ z-index: 10;
5159
+ background-color: var(--atomix-data-table-header-bg);
5160
+ }
5097
5161
  .c-data-table-toolbar {
5098
5162
  display: flex;
5099
5163
  align-items: center;
5100
5164
  justify-content: space-between;
5101
5165
  margin-bottom: 1rem;
5166
+ gap: 1rem;
5167
+ flex-wrap: wrap;
5168
+ }
5169
+ .c-data-table-toolbar__left {
5170
+ display: flex;
5171
+ align-items: center;
5172
+ gap: 1rem;
5173
+ flex: 1 1;
5174
+ }
5175
+ .c-data-table-toolbar__right {
5176
+ display: flex;
5177
+ align-items: center;
5178
+ gap: 0.5rem;
5102
5179
  }
5103
5180
  .c-data-table-search {
5104
5181
  flex: 0 0 auto;