@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.min.css CHANGED
@@ -4880,6 +4880,12 @@ a,a:hover{
4880
4880
  align-items:center;
4881
4881
  display:flex;
4882
4882
  justify-content:space-between;
4883
+ position:relative;
4884
+ }
4885
+ .c-data-table__header-actions{
4886
+ align-items:center;
4887
+ display:flex;
4888
+ gap:.5rem;
4883
4889
  }
4884
4890
  .c-data-table__sort-icon{
4885
4891
  color:var(--atomix-gray-500);
@@ -4889,6 +4895,47 @@ a,a:hover{
4889
4895
  .c-data-table__header-cell[aria-sort] .c-data-table__sort-icon{
4890
4896
  color:var(--atomix-primary);
4891
4897
  }
4898
+ .c-data-table__column-filter{
4899
+ background-color:var(--atomix-white);
4900
+ border:1px solid var(--atomix-border-color);
4901
+ border-radius:4px;
4902
+ color:var(--atomix-body-color);
4903
+ font-size:.875rem;
4904
+ padding:.25rem .5rem;
4905
+ width:120px;
4906
+ }
4907
+ .c-data-table__column-filter:focus{
4908
+ border-color:var(--atomix-primary);
4909
+ outline:none;
4910
+ }
4911
+ .c-data-table__resize-handle{
4912
+ background-color:transparent;
4913
+ cursor:col-resize;
4914
+ height:100%;
4915
+ position:absolute;
4916
+ right:0;
4917
+ top:0;
4918
+ width:4px;
4919
+ z-index:1;
4920
+ }
4921
+ .c-data-table__resize-handle:hover{
4922
+ background-color:var(--atomix-primary);
4923
+ opacity:.5;
4924
+ }
4925
+ .c-data-table__resize-handle:active{
4926
+ background-color:var(--atomix-primary);
4927
+ opacity:1;
4928
+ }
4929
+ .c-data-table__header-cell{
4930
+ position:relative;
4931
+ }
4932
+ .c-data-table__header-cell--dragging{
4933
+ cursor:move;
4934
+ opacity:.5;
4935
+ }
4936
+ .c-data-table__header-cell--drag-over{
4937
+ border-left:2px solid var(--atomix-primary);
4938
+ }
4892
4939
  .c-data-table__cell{
4893
4940
  border-bottom:var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
4894
4941
  padding:.75rem 1rem;
@@ -4903,6 +4950,17 @@ a,a:hover{
4903
4950
  .c-data-table__row[role=button]{
4904
4951
  cursor:pointer;
4905
4952
  }
4953
+ .c-data-table__row--selected{
4954
+ background-color:rgba(var(--atomix-primary-rgb), .1);
4955
+ }
4956
+ .c-data-table__cell--selection{
4957
+ padding:.75rem .5rem;
4958
+ text-align:center;
4959
+ width:48px;
4960
+ }
4961
+ .c-data-table__radio{
4962
+ cursor:pointer;
4963
+ }
4906
4964
  .c-data-table__loading-cell{
4907
4965
  padding:2rem;
4908
4966
  text-align:center;
@@ -4931,12 +4989,31 @@ a,a:hover{
4931
4989
  .c-data-table--loading{
4932
4990
  opacity:.7;
4933
4991
  }
4992
+ .c-data-table--sticky-header thead{
4993
+ background-color:var(--atomix-data-table-header-bg);
4994
+ position:sticky;
4995
+ top:var(--sticky-header-offset, 0);
4996
+ z-index:10;
4997
+ }
4934
4998
  .c-data-table-toolbar{
4935
4999
  align-items:center;
4936
5000
  display:flex;
5001
+ flex-wrap:wrap;
5002
+ gap:1rem;
4937
5003
  justify-content:space-between;
4938
5004
  margin-bottom:1rem;
4939
5005
  }
5006
+ .c-data-table-toolbar__left{
5007
+ align-items:center;
5008
+ display:flex;
5009
+ flex:1 1;
5010
+ gap:1rem;
5011
+ }
5012
+ .c-data-table-toolbar__right{
5013
+ align-items:center;
5014
+ display:flex;
5015
+ gap:.5rem;
5016
+ }
4940
5017
  .c-data-table-search{
4941
5018
  flex:0 0 auto;
4942
5019
  }