@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.
- package/cjs/src/DashboardLayout/DashboardLayout.js +28 -0
- package/cjs/src/DashboardLayout/Header/Header.js +22 -0
- package/cjs/src/DashboardLayout/Header/index.js +14 -0
- package/cjs/src/DashboardLayout/Header/styled.js +32 -0
- package/cjs/src/DashboardLayout/Header/types.js +2 -0
- package/cjs/src/DashboardLayout/Main/Main.js +22 -0
- package/cjs/src/DashboardLayout/Main/index.js +13 -0
- package/cjs/src/DashboardLayout/Main/styled.js +10 -0
- package/cjs/src/DashboardLayout/SideBar/SideBar.js +22 -0
- package/cjs/src/DashboardLayout/SideBar/index.js +13 -0
- package/cjs/src/DashboardLayout/SideBar/styled.js +23 -0
- package/cjs/src/DashboardLayout/index.js +13 -0
- package/cjs/src/DashboardLayout/styled.js +11 -0
- package/cjs/src/Tooltip/Tooltip.js +33 -0
- package/cjs/src/Tooltip/constants.js +8 -0
- package/cjs/src/Tooltip/index.js +14 -0
- package/cjs/src/Tooltip/styled.js +72 -0
- package/cjs/src/Tooltip/types.js +2 -0
- package/cjs/src/declaration/index.js +14 -0
- package/cjs/src/index.js +2 -0
- package/cjs/src/theme/baseTheme.js +1 -1
- package/cjs/src/theme/typography.js +15 -0
- package/esm/src/DashboardLayout/DashboardLayout.js +24 -0
- package/esm/src/DashboardLayout/Header/Header.js +19 -0
- package/esm/src/DashboardLayout/Header/index.js +2 -0
- package/esm/src/DashboardLayout/Header/styled.js +29 -0
- package/{types/src/theme/__tests__/BaseTheme.test.d.ts → esm/src/DashboardLayout/Header/types.js} +0 -0
- package/esm/src/DashboardLayout/Main/Main.js +19 -0
- package/esm/src/DashboardLayout/Main/index.js +1 -0
- package/esm/src/DashboardLayout/Main/styled.js +7 -0
- package/esm/src/DashboardLayout/SideBar/SideBar.js +19 -0
- package/esm/src/DashboardLayout/SideBar/index.js +1 -0
- package/esm/src/DashboardLayout/SideBar/styled.js +20 -0
- package/esm/src/DashboardLayout/index.js +1 -0
- package/esm/src/DashboardLayout/styled.js +8 -0
- package/esm/src/Tooltip/Tooltip.js +30 -0
- package/esm/src/Tooltip/constants.js +5 -0
- package/esm/src/Tooltip/index.js +2 -0
- package/esm/src/Tooltip/styled.js +69 -0
- package/esm/src/Tooltip/types.js +1 -0
- package/esm/src/declaration/index.js +2 -0
- package/esm/src/index.js +2 -0
- package/esm/src/theme/baseTheme.js +2 -2
- package/esm/src/theme/typography.js +15 -0
- package/package.json +4 -12
- package/types/index.d.ts +0 -1
- package/types/src/Badge/Badge.d.ts +0 -4
- package/types/src/Badge/index.d.ts +0 -2
- package/types/src/Badge/styled.d.ts +0 -50
- package/types/src/Badge/types.d.ts +0 -5
- package/types/src/Button/Button.d.ts +0 -3
- package/types/src/Button/index.d.ts +0 -2
- package/types/src/Button/styled.d.ts +0 -13
- package/types/src/Button/types.d.ts +0 -7
- package/types/src/ButtonBase/ButtonBase.d.ts +0 -3
- package/types/src/ButtonBase/constants.d.ts +0 -22
- package/types/src/ButtonBase/index.d.ts +0 -3
- package/types/src/ButtonBase/styled.d.ts +0 -27
- package/types/src/ButtonBase/types.d.ts +0 -11
- package/types/src/Checkbox/Checkbox.d.ts +0 -3
- package/types/src/Checkbox/icons.d.ts +0 -5
- package/types/src/Checkbox/index.d.ts +0 -2
- package/types/src/Checkbox/styled.d.ts +0 -4
- package/types/src/Checkbox/types.d.ts +0 -2
- package/types/src/CircularProgress/CircularProgress.d.ts +0 -4
- package/types/src/CircularProgress/constants.d.ts +0 -8
- package/types/src/CircularProgress/index.d.ts +0 -2
- package/types/src/CircularProgress/styled.d.ts +0 -7
- package/types/src/CircularProgress/types.d.ts +0 -8
- package/types/src/FormControlLabel/FormControlLabel.d.ts +0 -3
- package/types/src/FormControlLabel/index.d.ts +0 -2
- package/types/src/FormControlLabel/styled.d.ts +0 -3
- package/types/src/FormControlLabel/types.d.ts +0 -2
- package/types/src/FormHelperText/FormHelperText.d.ts +0 -4
- package/types/src/FormHelperText/index.d.ts +0 -1
- package/types/src/FormHelperText/styled.d.ts +0 -41
- package/types/src/FormHelperText/types.d.ts +0 -6
- package/types/src/GlobalStyles/GlobalStyles.d.ts +0 -3
- package/types/src/GlobalStyles/index.d.ts +0 -1
- package/types/src/Grid/Grid.d.ts +0 -3
- package/types/src/Grid/index.d.ts +0 -2
- package/types/src/Grid/styled.d.ts +0 -13
- package/types/src/Grid/types.d.ts +0 -30
- package/types/src/IconButton/IconButton.d.ts +0 -3
- package/types/src/IconButton/index.d.ts +0 -1
- package/types/src/IconButton/styled.d.ts +0 -19
- package/types/src/Menu/Menu.d.ts +0 -3
- package/types/src/Menu/index.d.ts +0 -1
- package/types/src/MenuItem/MenuItem.d.ts +0 -3
- package/types/src/MenuItem/index.d.ts +0 -1
- package/types/src/MenuList/MenuList.d.ts +0 -3
- package/types/src/MenuList/index.d.ts +0 -2
- package/types/src/MenuList/styled.d.ts +0 -20
- package/types/src/MenuList/types.d.ts +0 -2
- package/types/src/Radio/Icon.d.ts +0 -3
- package/types/src/Radio/Radio.d.ts +0 -4
- package/types/src/Radio/index.d.ts +0 -2
- package/types/src/Radio/styled.d.ts +0 -4
- package/types/src/Radio/types.d.ts +0 -2
- package/types/src/RadioGroup/RadioGroup.d.ts +0 -2
- package/types/src/StylesCacheProvider/index.d.ts +0 -1
- package/types/src/Tag/Tag.d.ts +0 -3
- package/types/src/Tag/constants.d.ts +0 -21
- package/types/src/Tag/index.d.ts +0 -2
- package/types/src/Tag/styled.d.ts +0 -26
- package/types/src/Tag/types.d.ts +0 -12
- package/types/src/TextArea/TextArea.d.ts +0 -3
- package/types/src/TextArea/index.d.ts +0 -2
- package/types/src/TextArea/types.d.ts +0 -2
- package/types/src/TextField/TextField.d.ts +0 -4
- package/types/src/TextField/index.d.ts +0 -2
- package/types/src/TextField/types.d.ts +0 -6
- package/types/src/ThemeProvider/ThemeProvider.d.ts +0 -7
- package/types/src/ThemeProvider/index.d.ts +0 -1
- package/types/src/Typography/Typography.d.ts +0 -8
- package/types/src/Typography/index.d.ts +0 -1
- package/types/src/createStylesCache/index.d.ts +0 -2
- package/types/src/createStylesServer/index.d.ts +0 -1
- package/types/src/index.d.ts +0 -22
- package/types/src/styles/index.d.ts +0 -1
- package/types/src/styles/styled/index.d.ts +0 -1
- package/types/src/styles/styled/styled.d.ts +0 -2
- package/types/src/styles/styled/types.d.ts +0 -48
- package/types/src/theme/baseTheme.d.ts +0 -28
- package/types/src/theme/components/MuiFormHelperText.d.ts +0 -4
- package/types/src/theme/components/MuiFormLabel.d.ts +0 -4
- package/types/src/theme/components/MuiInputBase.d.ts +0 -4
- package/types/src/theme/components/MuiInputLabel.d.ts +0 -4
- package/types/src/theme/components/MuiOutlinedInput.d.ts +0 -4
- package/types/src/theme/components/MuiTypography.d.ts +0 -21
- package/types/src/theme/components/components.d.ts +0 -21
- package/types/src/theme/components/index.d.ts +0 -1
- package/types/src/theme/constants.d.ts +0 -9
- package/types/src/theme/elevation.d.ts +0 -8
- package/types/src/theme/hooks/index.d.ts +0 -1
- package/types/src/theme/hooks/useTheme/index.d.ts +0 -2
- package/types/src/theme/index.d.ts +0 -6
- package/types/src/theme/palette/brandPalette.d.ts +0 -15
- package/types/src/theme/palette/index.d.ts +0 -2
- package/types/src/theme/palette/palette.d.ts +0 -29
- package/types/src/theme/shape.d.ts +0 -6
- 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,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 {};
|
package/esm/src/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createTheme as createMuiTheme,
|
|
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 =
|
|
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
|
+
"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
|
-
"
|
|
38
|
-
|
|
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,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,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,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,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,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,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 +0,0 @@
|
|
|
1
|
-
export * from './FormHelperText';
|