@astral/ui 0.3.1 → 0.4.1-alpha.1

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 (142) hide show
  1. package/cjs/src/DashboardLayout/DashboardLayout.js +28 -0
  2. package/cjs/src/DashboardLayout/Header/Header.js +22 -0
  3. package/cjs/src/DashboardLayout/Header/index.js +14 -0
  4. package/cjs/src/DashboardLayout/Header/styled.js +32 -0
  5. package/cjs/src/DashboardLayout/Header/types.js +2 -0
  6. package/cjs/src/DashboardLayout/Main/Main.js +22 -0
  7. package/cjs/src/DashboardLayout/Main/index.js +13 -0
  8. package/cjs/src/DashboardLayout/Main/styled.js +10 -0
  9. package/cjs/src/DashboardLayout/SideBar/SideBar.js +22 -0
  10. package/cjs/src/DashboardLayout/SideBar/index.js +13 -0
  11. package/cjs/src/DashboardLayout/SideBar/styled.js +23 -0
  12. package/cjs/src/DashboardLayout/index.js +13 -0
  13. package/cjs/src/DashboardLayout/styled.js +11 -0
  14. package/cjs/src/Tooltip/Tooltip.js +33 -0
  15. package/cjs/src/Tooltip/constants.js +8 -0
  16. package/cjs/src/Tooltip/index.js +14 -0
  17. package/cjs/src/Tooltip/styled.js +72 -0
  18. package/cjs/src/Tooltip/types.js +2 -0
  19. package/cjs/src/declaration/index.js +14 -0
  20. package/cjs/src/index.js +2 -0
  21. package/cjs/src/theme/baseTheme.js +1 -1
  22. package/cjs/src/theme/typography.js +15 -0
  23. package/esm/src/DashboardLayout/DashboardLayout.js +24 -0
  24. package/esm/src/DashboardLayout/Header/Header.js +19 -0
  25. package/esm/src/DashboardLayout/Header/index.js +2 -0
  26. package/esm/src/DashboardLayout/Header/styled.js +29 -0
  27. package/{types/src/theme/__tests__/BaseTheme.test.d.ts → esm/src/DashboardLayout/Header/types.js} +0 -0
  28. package/esm/src/DashboardLayout/Main/Main.js +19 -0
  29. package/esm/src/DashboardLayout/Main/index.js +1 -0
  30. package/esm/src/DashboardLayout/Main/styled.js +7 -0
  31. package/esm/src/DashboardLayout/SideBar/SideBar.js +19 -0
  32. package/esm/src/DashboardLayout/SideBar/index.js +1 -0
  33. package/esm/src/DashboardLayout/SideBar/styled.js +20 -0
  34. package/esm/src/DashboardLayout/index.js +1 -0
  35. package/esm/src/DashboardLayout/styled.js +8 -0
  36. package/esm/src/Tooltip/Tooltip.js +30 -0
  37. package/esm/src/Tooltip/constants.js +5 -0
  38. package/esm/src/Tooltip/index.js +2 -0
  39. package/esm/src/Tooltip/styled.js +69 -0
  40. package/esm/src/Tooltip/types.js +1 -0
  41. package/esm/src/declaration/index.js +2 -0
  42. package/esm/src/index.js +2 -0
  43. package/esm/src/theme/baseTheme.js +2 -2
  44. package/esm/src/theme/typography.js +15 -0
  45. package/package.json +4 -12
  46. package/types/index.d.ts +0 -1
  47. package/types/src/Badge/Badge.d.ts +0 -4
  48. package/types/src/Badge/index.d.ts +0 -2
  49. package/types/src/Badge/styled.d.ts +0 -50
  50. package/types/src/Badge/types.d.ts +0 -5
  51. package/types/src/Button/Button.d.ts +0 -3
  52. package/types/src/Button/index.d.ts +0 -2
  53. package/types/src/Button/styled.d.ts +0 -13
  54. package/types/src/Button/types.d.ts +0 -7
  55. package/types/src/ButtonBase/ButtonBase.d.ts +0 -3
  56. package/types/src/ButtonBase/constants.d.ts +0 -22
  57. package/types/src/ButtonBase/index.d.ts +0 -3
  58. package/types/src/ButtonBase/styled.d.ts +0 -27
  59. package/types/src/ButtonBase/types.d.ts +0 -11
  60. package/types/src/Checkbox/Checkbox.d.ts +0 -3
  61. package/types/src/Checkbox/icons.d.ts +0 -5
  62. package/types/src/Checkbox/index.d.ts +0 -2
  63. package/types/src/Checkbox/styled.d.ts +0 -4
  64. package/types/src/Checkbox/types.d.ts +0 -2
  65. package/types/src/CircularProgress/CircularProgress.d.ts +0 -4
  66. package/types/src/CircularProgress/constants.d.ts +0 -8
  67. package/types/src/CircularProgress/index.d.ts +0 -2
  68. package/types/src/CircularProgress/styled.d.ts +0 -7
  69. package/types/src/CircularProgress/types.d.ts +0 -8
  70. package/types/src/FormControlLabel/FormControlLabel.d.ts +0 -3
  71. package/types/src/FormControlLabel/index.d.ts +0 -2
  72. package/types/src/FormControlLabel/styled.d.ts +0 -3
  73. package/types/src/FormControlLabel/types.d.ts +0 -2
  74. package/types/src/FormHelperText/FormHelperText.d.ts +0 -4
  75. package/types/src/FormHelperText/index.d.ts +0 -1
  76. package/types/src/FormHelperText/styled.d.ts +0 -41
  77. package/types/src/FormHelperText/types.d.ts +0 -6
  78. package/types/src/GlobalStyles/GlobalStyles.d.ts +0 -3
  79. package/types/src/GlobalStyles/index.d.ts +0 -1
  80. package/types/src/Grid/Grid.d.ts +0 -3
  81. package/types/src/Grid/index.d.ts +0 -2
  82. package/types/src/Grid/styled.d.ts +0 -13
  83. package/types/src/Grid/types.d.ts +0 -30
  84. package/types/src/IconButton/IconButton.d.ts +0 -3
  85. package/types/src/IconButton/index.d.ts +0 -1
  86. package/types/src/IconButton/styled.d.ts +0 -19
  87. package/types/src/Menu/Menu.d.ts +0 -3
  88. package/types/src/Menu/index.d.ts +0 -1
  89. package/types/src/MenuItem/MenuItem.d.ts +0 -3
  90. package/types/src/MenuItem/index.d.ts +0 -1
  91. package/types/src/MenuList/MenuList.d.ts +0 -3
  92. package/types/src/MenuList/index.d.ts +0 -2
  93. package/types/src/MenuList/styled.d.ts +0 -20
  94. package/types/src/MenuList/types.d.ts +0 -2
  95. package/types/src/Radio/Icon.d.ts +0 -3
  96. package/types/src/Radio/Radio.d.ts +0 -4
  97. package/types/src/Radio/index.d.ts +0 -2
  98. package/types/src/Radio/styled.d.ts +0 -4
  99. package/types/src/Radio/types.d.ts +0 -2
  100. package/types/src/RadioGroup/RadioGroup.d.ts +0 -2
  101. package/types/src/StylesCacheProvider/index.d.ts +0 -1
  102. package/types/src/Tag/Tag.d.ts +0 -3
  103. package/types/src/Tag/constants.d.ts +0 -21
  104. package/types/src/Tag/index.d.ts +0 -2
  105. package/types/src/Tag/styled.d.ts +0 -26
  106. package/types/src/Tag/types.d.ts +0 -12
  107. package/types/src/TextArea/TextArea.d.ts +0 -3
  108. package/types/src/TextArea/index.d.ts +0 -2
  109. package/types/src/TextArea/types.d.ts +0 -2
  110. package/types/src/TextField/TextField.d.ts +0 -4
  111. package/types/src/TextField/index.d.ts +0 -2
  112. package/types/src/TextField/types.d.ts +0 -6
  113. package/types/src/ThemeProvider/ThemeProvider.d.ts +0 -7
  114. package/types/src/ThemeProvider/index.d.ts +0 -1
  115. package/types/src/Typography/Typography.d.ts +0 -8
  116. package/types/src/Typography/index.d.ts +0 -1
  117. package/types/src/createStylesCache/index.d.ts +0 -2
  118. package/types/src/createStylesServer/index.d.ts +0 -1
  119. package/types/src/index.d.ts +0 -22
  120. package/types/src/styles/index.d.ts +0 -1
  121. package/types/src/styles/styled/index.d.ts +0 -1
  122. package/types/src/styles/styled/styled.d.ts +0 -2
  123. package/types/src/styles/styled/types.d.ts +0 -48
  124. package/types/src/theme/baseTheme.d.ts +0 -28
  125. package/types/src/theme/components/MuiFormHelperText.d.ts +0 -4
  126. package/types/src/theme/components/MuiFormLabel.d.ts +0 -4
  127. package/types/src/theme/components/MuiInputBase.d.ts +0 -4
  128. package/types/src/theme/components/MuiInputLabel.d.ts +0 -4
  129. package/types/src/theme/components/MuiOutlinedInput.d.ts +0 -4
  130. package/types/src/theme/components/MuiTypography.d.ts +0 -21
  131. package/types/src/theme/components/components.d.ts +0 -21
  132. package/types/src/theme/components/index.d.ts +0 -1
  133. package/types/src/theme/constants.d.ts +0 -9
  134. package/types/src/theme/elevation.d.ts +0 -8
  135. package/types/src/theme/hooks/index.d.ts +0 -1
  136. package/types/src/theme/hooks/useTheme/index.d.ts +0 -2
  137. package/types/src/theme/index.d.ts +0 -6
  138. package/types/src/theme/palette/brandPalette.d.ts +0 -15
  139. package/types/src/theme/palette/index.d.ts +0 -2
  140. package/types/src/theme/palette/palette.d.ts +0 -29
  141. package/types/src/theme/shape.d.ts +0 -6
  142. package/types/src/theme/typography.d.ts +0 -19
@@ -0,0 +1,19 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { forwardRef } from 'react';
14
+ import { StyledDrawer } from './styled';
15
+ export var SideBar = forwardRef(function (_a, ref) {
16
+ var children = _a.children;
17
+ return (_jsx(StyledDrawer, __assign({ ref: ref, open: true, variant: "persistent" }, { children: children }), void 0));
18
+ });
19
+ export default SideBar;
@@ -0,0 +1 @@
1
+ export * from './SideBar';
@@ -0,0 +1,20 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ import { Drawer } from '@mui/material';
6
+ import { styled } from '../../styles';
7
+ export var StyledDrawer = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n z-index: ", ";\n grid-column: 1;\n width: 241px;\n position: relative;\n .MuiPaper-root {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n background-color: ", ";\n padding: ", ";\n border-right: 1px solid ", ";\n }\n"], ["\n z-index: ", ";\n grid-column: 1;\n width: 241px;\n position: relative;\n .MuiPaper-root {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n background-color: ", ";\n padding: ", ";\n border-right: 1px solid ", ";\n }\n"])), function (_a) {
8
+ var theme = _a.theme;
9
+ return theme.zIndex.appBar - 1;
10
+ }, function (_a) {
11
+ var theme = _a.theme;
12
+ return theme.palette.background.element;
13
+ }, function (_a) {
14
+ var theme = _a.theme;
15
+ return theme.spacing(5, 0);
16
+ }, function (_a) {
17
+ var theme = _a.theme;
18
+ return theme.palette.grey[300];
19
+ });
20
+ var templateObject_1;
@@ -0,0 +1 @@
1
+ export * from './DashboardLayout';
@@ -0,0 +1,8 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ import { Grid } from '../Grid';
6
+ import { styled } from '../styles';
7
+ export var StyledDashboard = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-height: 100vh;\n"], ["\n min-height: 100vh;\n"])));
8
+ var templateObject_1;
@@ -0,0 +1,30 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
+ import { forwardRef } from 'react';
25
+ import { StyledTooltip } from './styled';
26
+ import { TooltipSizes } from './constants';
27
+ export var Tooltip = forwardRef(function (_a, ref) {
28
+ var children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.size, size = _c === void 0 ? TooltipSizes.MEDIUM : _c, props = __rest(_a, ["children", "placement", "size"]);
29
+ return (_jsx(StyledTooltip, __assign({ ref: ref, size: size, placement: placement }, props, { children: children }), void 0));
30
+ });
@@ -0,0 +1,5 @@
1
+ export var TooltipSizes;
2
+ (function (TooltipSizes) {
3
+ TooltipSizes["MEDIUM"] = "medium";
4
+ TooltipSizes["SMALL"] = "small";
5
+ })(TooltipSizes || (TooltipSizes = {}));
@@ -0,0 +1,2 @@
1
+ export * from './Tooltip';
2
+ export * from './types';
@@ -0,0 +1,69 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ var __assign = (this && this.__assign) || function () {
6
+ __assign = Object.assign || function(t) {
7
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
8
+ s = arguments[i];
9
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
10
+ t[p] = s[p];
11
+ }
12
+ return t;
13
+ };
14
+ return __assign.apply(this, arguments);
15
+ };
16
+ var __rest = (this && this.__rest) || function (s, e) {
17
+ var t = {};
18
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
19
+ t[p] = s[p];
20
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
21
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
22
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
23
+ t[p[i]] = s[p[i]];
24
+ }
25
+ return t;
26
+ };
27
+ import { jsx as _jsx } from "react/jsx-runtime";
28
+ import { Tooltip } from '@mui/material';
29
+ import { styled } from '../styles';
30
+ import { TooltipSizes } from './constants';
31
+ export var StyledTooltip = styled(function (_a) {
32
+ var className = _a.className, props = __rest(_a, ["className"]);
33
+ return (_jsx(Tooltip, __assign({}, props, { classes: { popper: className } }), void 0));
34
+ })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n & .MuiTooltip-tooltip {\n margin: 0;\n background-color: ", ";\n border-radius: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n }\n\n & .MuiTooltip-arrow {\n color: ", ";\n }\n\n &&[data-popper-placement*='top'] .MuiTooltip-tooltip {\n margin-bottom: ", ";\n }\n\n &&[data-popper-placement*='bottom'] .MuiTooltip-tooltip {\n margin-top: ", ";\n }\n\n &&[data-popper-placement*='left'] .MuiTooltip-tooltip {\n margin-right: ", ";\n }\n\n &&[data-popper-placement*='right'] .MuiTooltip-tooltip {\n margin-left: ", ";\n }\n"], ["\n & .MuiTooltip-tooltip {\n margin: 0;\n background-color: ", ";\n border-radius: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n }\n\n & .MuiTooltip-arrow {\n color: ", ";\n }\n\n &&[data-popper-placement*='top'] .MuiTooltip-tooltip {\n margin-bottom: ", ";\n }\n\n &&[data-popper-placement*='bottom'] .MuiTooltip-tooltip {\n margin-top: ", ";\n }\n\n &&[data-popper-placement*='left'] .MuiTooltip-tooltip {\n margin-right: ", ";\n }\n\n &&[data-popper-placement*='right'] .MuiTooltip-tooltip {\n margin-left: ", ";\n }\n"])), function (_a) {
35
+ var theme = _a.theme;
36
+ return theme.palette.grey[900];
37
+ }, function (_a) {
38
+ var theme = _a.theme;
39
+ return theme.shape.small;
40
+ }, function (_a) {
41
+ var size = _a.size, theme = _a.theme;
42
+ return size === TooltipSizes.SMALL
43
+ ? theme.typography.small.fontSize
44
+ : theme.typography.ui.fontSize;
45
+ }, function (_a) {
46
+ var size = _a.size, theme = _a.theme;
47
+ return size === TooltipSizes.SMALL
48
+ ? theme.typography.small.lineHeight
49
+ : theme.typography.ui.lineHeight;
50
+ }, function (_a) {
51
+ var theme = _a.theme;
52
+ return theme.typography.fontWeightRegular;
53
+ }, function (_a) {
54
+ var theme = _a.theme;
55
+ return theme.palette.grey[900];
56
+ }, function (_a) {
57
+ var theme = _a.theme;
58
+ return theme.spacing(3);
59
+ }, function (_a) {
60
+ var theme = _a.theme;
61
+ return theme.spacing(3);
62
+ }, function (_a) {
63
+ var theme = _a.theme;
64
+ return theme.spacing(2);
65
+ }, function (_a) {
66
+ var theme = _a.theme;
67
+ return theme.spacing(2);
68
+ });
69
+ var templateObject_1;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,2 @@
1
+ export * from './mui-material.d';
2
+ export * from './emotion.d';
package/esm/src/index.js CHANGED
@@ -19,4 +19,6 @@ export * from './TextField';
19
19
  export * from './FormHelperText';
20
20
  export * from './Grid';
21
21
  export * from './Tag';
22
+ export * from './Tooltip';
22
23
  export * from './TextArea';
24
+ export * from './declaration';
@@ -1,4 +1,4 @@
1
- import { createTheme as createMuiTheme, responsiveFontSizes, } from '@mui/material/styles';
1
+ import { createTheme as createMuiTheme, } from '@mui/material/styles';
2
2
  import { merge } from 'lodash-es';
3
3
  import { typography } from './typography';
4
4
  import { getPalette } from './palette';
@@ -14,6 +14,6 @@ export var createTheme = function (params) {
14
14
  palette: getPalette(brand),
15
15
  components: getComponents(fontsUrls),
16
16
  };
17
- var muiTheme = responsiveFontSizes(createMuiTheme(merge({}, themeOptions, options)));
17
+ var muiTheme = createMuiTheme(merge({}, themeOptions, options));
18
18
  return merge(muiTheme, { elevation: elevation, shape: shape });
19
19
  };
@@ -16,90 +16,105 @@ export var typography = {
16
16
  return {
17
17
  fontSize: pxToRem(35, this.htmlFontSize),
18
18
  fontWeight: this.fontWeightMedium,
19
+ lineHeight: pxToRem(40, this.htmlFontSize),
19
20
  };
20
21
  },
21
22
  get h2() {
22
23
  return {
23
24
  fontSize: pxToRem(29, this.htmlFontSize),
24
25
  fontWeight: this.fontWeightMedium,
26
+ lineHeight: pxToRem(32, this.htmlFontSize),
25
27
  };
26
28
  },
27
29
  get h3() {
28
30
  return {
29
31
  fontSize: pxToRem(24, this.htmlFontSize),
30
32
  fontWeight: this.fontWeightMedium,
33
+ lineHeight: pxToRem(28, this.htmlFontSize),
31
34
  };
32
35
  },
33
36
  get h4() {
34
37
  return {
35
38
  fontSize: pxToRem(20, this.htmlFontSize),
36
39
  fontWeight: this.fontWeightMedium,
40
+ lineHeight: pxToRem(24, this.htmlFontSize),
37
41
  };
38
42
  },
39
43
  get h5() {
40
44
  return {
41
45
  fontSize: pxToRem(16, this.htmlFontSize),
42
46
  fontWeight: this.fontWeightMedium,
47
+ lineHeight: pxToRem(24, this.htmlFontSize),
43
48
  };
44
49
  },
45
50
  get h6() {
46
51
  return {
47
52
  fontSize: pxToRem(14, this.htmlFontSize),
48
53
  fontWeight: this.fontWeightMedium,
54
+ lineHeight: pxToRem(16, this.htmlFontSize),
49
55
  };
50
56
  },
51
57
  get h7() {
52
58
  return {
53
59
  fontSize: pxToRem(12, this.htmlFontSize),
54
60
  fontWeight: this.fontWeightMedium,
61
+ lineHeight: pxToRem(20, this.htmlFontSize),
55
62
  };
56
63
  },
57
64
  get h8() {
58
65
  return {
59
66
  fontSize: pxToRem(12, this.htmlFontSize),
60
67
  fontWeight: this.fontWeightMedium,
68
+ lineHeight: pxToRem(16, this.htmlFontSize),
61
69
  };
62
70
  },
63
71
  get h9() {
64
72
  return {
65
73
  fontSize: pxToRem(11, this.htmlFontSize),
66
74
  fontWeight: this.fontWeightBold,
75
+ lineHeight: pxToRem(16, this.htmlFontSize),
67
76
  };
68
77
  },
69
78
  get button() {
70
79
  return {
71
80
  fontSize: pxToRem(14, this.htmlFontSize),
72
81
  fontWeight: this.fontWeightMedium,
82
+ lineHeight: pxToRem(24, this.htmlFontSize),
73
83
  };
74
84
  },
75
85
  get ui() {
76
86
  return {
77
87
  fontSize: pxToRem(14, this.htmlFontSize),
78
88
  fontWeight: this.fontWeightRegular,
89
+ lineHeight: pxToRem(20, this.htmlFontSize),
79
90
  };
80
91
  },
81
92
  get link() {
82
93
  return {
83
94
  fontSize: pxToRem(14, this.htmlFontSize),
84
95
  fontWeight: this.fontWeightRegular,
96
+ lineHeight: pxToRem(20, this.htmlFontSize),
85
97
  };
86
98
  },
87
99
  get pointer() {
88
100
  return {
89
101
  fontSize: pxToRem(12, this.htmlFontSize),
90
102
  fontWeight: this.fontWeightMedium,
103
+ lineHeight: pxToRem(16, this.htmlFontSize),
91
104
  };
92
105
  },
93
106
  get small() {
94
107
  return {
95
108
  fontSize: pxToRem(12, this.htmlFontSize),
96
109
  fontWeight: this.fontWeightRegular,
110
+ lineHeight: pxToRem(16, this.htmlFontSize),
97
111
  };
98
112
  },
99
113
  get code() {
100
114
  return {
101
115
  fontSize: pxToRem(12, this.htmlFontSize),
102
116
  fontWeight: this.fontWeightLight,
117
+ lineHeight: pxToRem(20, this.htmlFontSize),
103
118
  };
104
119
  },
105
120
  body1: {
package/package.json CHANGED
@@ -1,8 +1,7 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "0.3.1",
3
+ "version": "0.4.1-alpha.1",
4
4
  "type": "module",
5
- "source": "./src/index.ts",
6
5
  "jest": {
7
6
  "moduleNameMapper": {
8
7
  "^lodash-es$": "lodash"
@@ -33,14 +32,7 @@
33
32
  },
34
33
  "keywords": [],
35
34
  "sideEffects": false,
35
+ "types": "./esm/index.d.ts",
36
36
  "main": "./cjs/index.js",
37
- "types": "./types/index.d.ts",
38
- "module": "./esm/index.js",
39
- "exports": {
40
- ".": {
41
- "import": "./esm/index.js",
42
- "require": "./cjs/index.js",
43
- "types": "./types/index.d.ts"
44
- }
45
- }
46
- }
37
+ "module": "./esm/index.js"
38
+ }
package/types/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './src';
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import { BadgeProps } from './types';
3
- declare const Badge: ({ children, color, ...props }: BadgeProps) => JSX.Element;
4
- export default Badge;
@@ -1,2 +0,0 @@
1
- export * from './Badge';
2
- export * from './types';
@@ -1,50 +0,0 @@
1
- /// <reference types="react" />
2
- import { Theme } from '../theme';
3
- import { BadgeColor, BadgeProps } from './types';
4
- export declare const StyledBadge: import("@emotion/styled").StyledComponent<{
5
- classes?: (Partial<import("@mui/material").BadgeUnstyledClasses> & {
6
- colorPrimary?: string | undefined;
7
- colorSecondary?: string | undefined;
8
- colorError?: string | undefined;
9
- colorInfo?: string | undefined;
10
- colorSuccess?: string | undefined;
11
- colorWarning?: string | undefined;
12
- anchorOriginTopRightRectangular?: string | undefined;
13
- anchorOriginBottomRightRectangular?: string | undefined;
14
- anchorOriginTopLeftRectangular?: string | undefined;
15
- anchorOriginBottomLeftRectangular?: string | undefined;
16
- anchorOriginTopRightCircular?: string | undefined;
17
- anchorOriginBottomRightCircular?: string | undefined;
18
- anchorOriginTopLeftCircular?: string | undefined;
19
- anchorOriginBottomLeftCircular?: string | undefined;
20
- overlapRectangular?: string | undefined;
21
- overlapCircular?: string | undefined;
22
- }) | undefined;
23
- color?: "primary" | "secondary" | "default" | "error" | "warning" | "info" | "success" | undefined;
24
- overlap?: "circular" | "rectangular" | undefined;
25
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
26
- variant?: "standard" | "dot" | undefined;
27
- } & {
28
- anchorOrigin?: import("@mui/material").BadgeOrigin | undefined;
29
- components?: {
30
- Root?: import("react").ElementType<any> | undefined;
31
- Badge?: import("react").ElementType<any> | undefined;
32
- } | undefined;
33
- componentsProps?: {
34
- root?: (import("react").HTMLAttributes<HTMLSpanElement> & import("@mui/material").BadgeUnstyledComponentsPropsOverrides) | undefined;
35
- badge?: (import("react").HTMLAttributes<HTMLSpanElement> & import("@mui/material").BadgeUnstyledComponentsPropsOverrides) | undefined;
36
- } | undefined;
37
- badgeContent?: import("react").ReactNode;
38
- children?: import("react").ReactNode;
39
- classes?: Partial<import("@mui/material").BadgeUnstyledClasses> | undefined;
40
- invisible?: boolean | undefined;
41
- max?: number | undefined;
42
- showZero?: boolean | undefined;
43
- variant?: string | undefined;
44
- } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
45
- ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
46
- }, "components" | "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "componentsProps" | "invisible" | "anchorOrigin" | "overlap" | "badgeContent" | "max" | "showZero"> & {
47
- theme?: Theme | undefined;
48
- } & Omit<BadgeProps, "color"> & {
49
- customColor: BadgeColor;
50
- }, {}, {}>;
@@ -1,5 +0,0 @@
1
- import { BadgeProps as MuiBadgeProps } from '@mui/material/Badge/Badge';
2
- export declare type BadgeColor = 'primary' | 'grey' | 'white' | 'errorLight' | 'error' | 'success';
3
- export declare type BadgeProps = Omit<MuiBadgeProps, 'color'> & {
4
- color: BadgeColor;
5
- };
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { ButtonProps } from './types';
3
- export declare const Button: ({ children, startIcon, endIcon, loading, ...props }: ButtonProps) => JSX.Element;
@@ -1,2 +0,0 @@
1
- export * from './Button';
2
- export * from './types';
@@ -1,13 +0,0 @@
1
- /// <reference types="react" />
2
- import { Theme } from '../theme';
3
- export declare const StyledButton: import("@emotion/styled").StyledComponent<Omit<import("@mui/base/ButtonUnstyled/ButtonUnstyledProps").default<"button", {}>, "color" | "variant" | "size"> & {
4
- color?: "primary" | "error" | "warning" | "success" | undefined;
5
- variant?: "link" | "light" | "text" | "contained" | undefined;
6
- size?: "large" | "medium" | undefined;
7
- } & {
8
- theme?: Theme | undefined;
9
- } & {
10
- loading?: boolean | undefined;
11
- startIcon?: import("react").ReactNode;
12
- endIcon?: import("react").ReactNode;
13
- }, {}, {}>;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { BaseButtonProps } from '../ButtonBase';
3
- export declare type ButtonProps = BaseButtonProps & {
4
- loading?: boolean;
5
- startIcon?: React.ReactNode;
6
- endIcon?: React.ReactNode;
7
- };
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { BaseButtonProps } from './types';
3
- export declare const ButtonBase: ({ children, variant, color, ...props }: BaseButtonProps) => JSX.Element;
@@ -1,22 +0,0 @@
1
- export declare enum ButtonColors {
2
- ERROR = "error",
3
- SUCCESS = "success",
4
- WARNING = "warning",
5
- PRIMARY = "primary"
6
- }
7
- export declare enum ButtonVariants {
8
- CONTAINED = "contained",
9
- LIGHT = "light",
10
- TEXT = "text",
11
- LINK = "link"
12
- }
13
- export declare enum ButtonSizes {
14
- MEDIUM = "medium",
15
- LARGE = "large"
16
- }
17
- export declare enum ButtonStates {
18
- DEFAULT = "default",
19
- ACTIVE = "active",
20
- FOCUS = "focus",
21
- HOVER = "hover"
22
- }
@@ -1,3 +0,0 @@
1
- export * from './ButtonBase';
2
- export * from './constants';
3
- export * from './types';
@@ -1,27 +0,0 @@
1
- /// <reference types="react" />
2
- import { Theme } from '../theme';
3
- import { BaseButtonProps, ButtonColor, ButtonSize, ButtonState, ButtonVariant } from './types';
4
- declare type StyledButtonBaseThemeProps = {
5
- customColor?: ButtonColor;
6
- customVariant?: ButtonVariant;
7
- size?: ButtonSize;
8
- theme: Theme;
9
- };
10
- export declare const getColor: ({ theme, customVariant, customColor, buttonState, }: StyledButtonBaseThemeProps & {
11
- buttonState: ButtonState;
12
- }) => string;
13
- export declare const getBgColor: ({ customColor, customVariant, buttonState, theme, }: StyledButtonBaseThemeProps & {
14
- buttonState: ButtonState;
15
- }) => string;
16
- export declare const getButtonHeight: ({ size, }: StyledButtonBaseThemeProps) => string;
17
- export declare const getButtonPadding: ({ size, theme, }: StyledButtonBaseThemeProps) => string;
18
- export declare const getDisabledBgColor: ({ theme, customVariant, }: StyledButtonBaseThemeProps) => string;
19
- export declare const StyledButtonBase: import("@emotion/styled").StyledComponent<Pick<import("@mui/base/ButtonUnstyled").ButtonUnstyledOwnProps & Omit<any, keyof import("@mui/base/ButtonUnstyled").ButtonUnstyledOwnProps> & {
20
- component?: import("react").ElementType<any> | undefined;
21
- }, string | number | symbol> & import("react").RefAttributes<any> & {
22
- theme?: Theme | undefined;
23
- } & Omit<BaseButtonProps, "color" | "variant"> & {
24
- customColor?: "primary" | "error" | "warning" | "success" | undefined;
25
- customVariant?: "link" | "light" | "text" | "contained" | undefined;
26
- }, {}, {}>;
27
- export {};
@@ -1,11 +0,0 @@
1
- import { ButtonUnstyledProps } from '@mui/base/ButtonUnstyled';
2
- import { ButtonColors, ButtonSizes, ButtonStates, ButtonVariants } from './constants';
3
- export declare type ButtonColor = `${ButtonColors}`;
4
- export declare type ButtonVariant = `${ButtonVariants}`;
5
- export declare type ButtonSize = `${ButtonSizes}`;
6
- export declare type ButtonState = `${ButtonStates}`;
7
- export declare type BaseButtonProps = Omit<ButtonUnstyledProps, 'color' | 'variant' | 'size'> & {
8
- color?: ButtonColor;
9
- variant?: ButtonVariant;
10
- size?: ButtonSize;
11
- };
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { CheckboxProps } from './types';
3
- export declare const Checkbox: ({ icon, checkedIcon, indeterminateIcon, ...props }: CheckboxProps) => JSX.Element;
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- import { SvgIconProps } from '@mui/material';
3
- export declare const DefaultIcon: React.FunctionComponent<SvgIconProps>;
4
- export declare const CheckedIcon: React.FunctionComponent<SvgIconProps>;
5
- export declare const IndeterminateIcon: React.FunctionComponent<SvgIconProps>;
@@ -1,2 +0,0 @@
1
- export * from './Checkbox';
2
- export * from './types';
@@ -1,4 +0,0 @@
1
- import { CheckboxProps } from './types';
2
- export declare const StyledCheckbox: import("@emotion/styled").StyledComponent<import("@mui/material").CheckboxProps & {
3
- theme?: import("..").Theme | undefined;
4
- } & CheckboxProps, {}, {}>;
@@ -1,2 +0,0 @@
1
- import { CheckboxProps as MuiCheckboxProps } from '@mui/material';
2
- export declare type CheckboxProps = Omit<MuiCheckboxProps, 'size' | 'color'>;
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import { CircularProgressProps } from './types';
3
- export declare const CircularProgress: ({ color, size, ...props }: CircularProgressProps) => JSX.Element;
4
- export default CircularProgress;
@@ -1,8 +0,0 @@
1
- export declare enum CircularProgressColors {
2
- PRIMARY = "primary",
3
- INVERTED = "inverted"
4
- }
5
- export declare enum CircularProgressSizes {
6
- SMALL = "small",
7
- MEDIUM = "medium"
8
- }
@@ -1,2 +0,0 @@
1
- export * from './CircularProgress';
2
- export * from './types';
@@ -1,7 +0,0 @@
1
- import { Theme } from '../theme';
2
- import { CircularProgressProps } from './types';
3
- export declare const StyledCircularProgress: import("@emotion/styled").StyledComponent<import("@mui/material").CircularProgressProps & {
4
- theme?: Theme | undefined;
5
- } & Omit<CircularProgressProps, "color" | "size"> & {
6
- customColor?: "primary" | "inverted" | undefined;
7
- }, {}, {}>;
@@ -1,8 +0,0 @@
1
- import { CircularProgressProps as MuiCircularProgressProps } from '@mui/material';
2
- import { CircularProgressColors, CircularProgressSizes } from './constants';
3
- export declare type CircularProgressColor = `${CircularProgressColors}`;
4
- export declare type CircularProgressSize = `${CircularProgressSizes}`;
5
- export declare type CircularProgressProps = Omit<MuiCircularProgressProps, 'color' | 'size'> & {
6
- color?: CircularProgressColor;
7
- size?: CircularProgressSize;
8
- };
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { FormControlLabelProps } from './types';
3
- export declare const FormControlLabel: ({ ...props }: FormControlLabelProps) => JSX.Element;
@@ -1,2 +0,0 @@
1
- export * from './FormControlLabel';
2
- export * from './types';
@@ -1,3 +0,0 @@
1
- export declare const StyledFormControlLabel: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlLabelProps & {
2
- theme?: import("..").Theme | undefined;
3
- }, {}, {}>;
@@ -1,2 +0,0 @@
1
- import { FormControlLabelProps as MuiFormControlLabelProps } from '@mui/material/FormControlLabel';
2
- export declare type FormControlLabelProps = MuiFormControlLabelProps;
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import { FormHelperTextProps } from './types';
3
- export declare const FormHelperText: React.FC<FormHelperTextProps>;
4
- export default FormHelperText;
@@ -1 +0,0 @@
1
- export * from './FormHelperText';