@astral/ui 0.15.0 → 0.16.0
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/DatePicker/DatePicker.d.ts +4 -0
- package/DatePicker/DatePicker.js +70 -0
- package/DatePicker/index.d.ts +1 -0
- package/DatePicker/index.js +13 -0
- package/DatePicker/types.d.ts +3 -0
- package/DatePicker/types.js +2 -0
- package/LocalizationProvider/LocalizationProvider.d.ts +4 -0
- package/LocalizationProvider/LocalizationProvider.js +27 -0
- package/LocalizationProvider/index.d.ts +1 -0
- package/LocalizationProvider/index.js +13 -0
- package/LocalizationProvider/types.d.ts +2 -0
- package/LocalizationProvider/types.js +2 -0
- package/esm/DatePicker/DatePicker.d.ts +4 -0
- package/esm/DatePicker/DatePicker.js +67 -0
- package/esm/DatePicker/index.d.ts +1 -0
- package/esm/DatePicker/index.js +1 -0
- package/esm/DatePicker/types.d.ts +3 -0
- package/esm/DatePicker/types.js +1 -0
- package/esm/LocalizationProvider/LocalizationProvider.d.ts +4 -0
- package/esm/LocalizationProvider/LocalizationProvider.js +20 -0
- package/esm/LocalizationProvider/index.d.ts +1 -0
- package/esm/LocalizationProvider/index.js +1 -0
- package/esm/LocalizationProvider/types.d.ts +2 -0
- package/esm/LocalizationProvider/types.js +1 -0
- package/esm/index.d.ts +2 -0
- package/esm/index.js +2 -0
- package/esm/theme/__tests__/BaseTheme.test.js +1 -1
- package/esm/theme/components/MuiCalendarPicker.d.ts +2 -0
- package/esm/theme/components/MuiCalendarPicker.js +16 -0
- package/esm/theme/components/MuiOutlinedInput.js +3 -0
- package/esm/theme/components/MuiPickersDay.d.ts +2 -0
- package/esm/theme/components/MuiPickersDay.js +46 -0
- package/esm/theme/components/MuiYearPicker.d.ts +2 -0
- package/esm/theme/components/MuiYearPicker.js +13 -0
- package/esm/theme/components/components.js +6 -0
- package/esm/theme/elevation.js +5 -5
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/package.json +3 -2
- package/theme/__tests__/BaseTheme.test.js +1 -1
- package/theme/components/MuiCalendarPicker.d.ts +2 -0
- package/theme/components/MuiCalendarPicker.js +19 -0
- package/theme/components/MuiOutlinedInput.js +3 -0
- package/theme/components/MuiPickersDay.d.ts +2 -0
- package/theme/components/MuiPickersDay.js +49 -0
- package/theme/components/MuiYearPicker.d.ts +2 -0
- package/theme/components/MuiYearPicker.js +16 -0
- package/theme/components/components.js +6 -0
- package/theme/elevation.js +5 -5
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
+
exports.DatePicker = void 0;
|
|
26
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
27
|
+
var react_1 = require("react");
|
|
28
|
+
var lab_1 = require("@mui/lab");
|
|
29
|
+
var icons_1 = require("@astral/icons");
|
|
30
|
+
var TextField_1 = require("../TextField");
|
|
31
|
+
var componentsProps = {
|
|
32
|
+
switchViewButton: {
|
|
33
|
+
sx: {
|
|
34
|
+
padding: 1,
|
|
35
|
+
borderRadius: 1,
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
leftArrowButton: {
|
|
39
|
+
sx: {
|
|
40
|
+
padding: 1,
|
|
41
|
+
borderRadius: 1,
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
rightArrowButton: {
|
|
45
|
+
sx: {
|
|
46
|
+
padding: 1,
|
|
47
|
+
borderRadius: 1,
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
};
|
|
51
|
+
exports.DatePicker = (0, react_1.forwardRef)(function (props, ref) {
|
|
52
|
+
var _a = props.value, value = _a === void 0 ? new Date() : _a, _b = props.mask, mask = _b === void 0 ? '__.__.____' : _b, restProps = __rest(props, ["value", "mask"]);
|
|
53
|
+
var renderInput = (0, react_1.useCallback)(function (params) {
|
|
54
|
+
var textFieldParams = params;
|
|
55
|
+
return (0, jsx_runtime_1.jsx)(TextField_1.TextField, __assign({}, textFieldParams), void 0);
|
|
56
|
+
}, []);
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)(lab_1.DatePicker, __assign({}, restProps, { ref: ref, value: value, mask: mask, showDaysOutsideCurrentMonth: true, renderInput: renderInput, components: { OpenPickerIcon: icons_1.CalendarOutlineMd }, componentsProps: componentsProps, OpenPickerButtonProps: {
|
|
58
|
+
sx: {
|
|
59
|
+
borderRadius: 1,
|
|
60
|
+
},
|
|
61
|
+
}, PaperProps: {
|
|
62
|
+
sx: {
|
|
63
|
+
marginTop: 2,
|
|
64
|
+
boxShadow: function (theme) { return theme.elevation[200]; },
|
|
65
|
+
},
|
|
66
|
+
}, PopperProps: {
|
|
67
|
+
placement: 'bottom-start',
|
|
68
|
+
} }), void 0));
|
|
69
|
+
});
|
|
70
|
+
exports.default = exports.DatePicker;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DatePicker';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
+
};
|
|
12
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
+
__exportStar(require("./DatePicker"), exports);
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { DatePickerProps as MuiDatePickerProps } from '@mui/lab';
|
|
2
|
+
export declare type DatePickerProps = Omit<MuiDatePickerProps<Date>, 'components' | 'renderInput' | 'showDaysOutsideCurrentMonth' | 'components' | 'componentsProps' | 'OpenPickerButtonProps' | 'PaperProps' | 'PopperProps'>;
|
|
3
|
+
export declare type DatePickerValue = Date;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.LocalizationProvider = void 0;
|
|
18
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
var AdapterDateFns_1 = __importDefault(require("@mui/lab/AdapterDateFns"));
|
|
20
|
+
var lab_1 = require("@mui/lab");
|
|
21
|
+
var locale_1 = require("date-fns/locale");
|
|
22
|
+
var LocalizationProvider = function (_a) {
|
|
23
|
+
var children = _a.children, _b = _a.locale, locale = _b === void 0 ? locale_1.ru : _b;
|
|
24
|
+
return ((0, jsx_runtime_1.jsx)(lab_1.LocalizationProvider, __assign({ dateAdapter: AdapterDateFns_1.default, locale: locale }, { children: children }), void 0));
|
|
25
|
+
};
|
|
26
|
+
exports.LocalizationProvider = LocalizationProvider;
|
|
27
|
+
exports.default = exports.LocalizationProvider;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './LocalizationProvider';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
+
};
|
|
12
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
+
__exportStar(require("./LocalizationProvider"), exports);
|
|
@@ -0,0 +1,67 @@
|
|
|
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, useCallback } from 'react';
|
|
25
|
+
import { DatePicker as MuiDatePicker } from '@mui/lab';
|
|
26
|
+
import { CalendarOutlineMd } from '@astral/icons';
|
|
27
|
+
import { TextField } from '../TextField';
|
|
28
|
+
var componentsProps = {
|
|
29
|
+
switchViewButton: {
|
|
30
|
+
sx: {
|
|
31
|
+
padding: 1,
|
|
32
|
+
borderRadius: 1,
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
leftArrowButton: {
|
|
36
|
+
sx: {
|
|
37
|
+
padding: 1,
|
|
38
|
+
borderRadius: 1,
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
rightArrowButton: {
|
|
42
|
+
sx: {
|
|
43
|
+
padding: 1,
|
|
44
|
+
borderRadius: 1,
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
export var DatePicker = forwardRef(function (props, ref) {
|
|
49
|
+
var _a = props.value, value = _a === void 0 ? new Date() : _a, _b = props.mask, mask = _b === void 0 ? '__.__.____' : _b, restProps = __rest(props, ["value", "mask"]);
|
|
50
|
+
var renderInput = useCallback(function (params) {
|
|
51
|
+
var textFieldParams = params;
|
|
52
|
+
return _jsx(TextField, __assign({}, textFieldParams), void 0);
|
|
53
|
+
}, []);
|
|
54
|
+
return (_jsx(MuiDatePicker, __assign({}, restProps, { ref: ref, value: value, mask: mask, showDaysOutsideCurrentMonth: true, renderInput: renderInput, components: { OpenPickerIcon: CalendarOutlineMd }, componentsProps: componentsProps, OpenPickerButtonProps: {
|
|
55
|
+
sx: {
|
|
56
|
+
borderRadius: 1,
|
|
57
|
+
},
|
|
58
|
+
}, PaperProps: {
|
|
59
|
+
sx: {
|
|
60
|
+
marginTop: 2,
|
|
61
|
+
boxShadow: function (theme) { return theme.elevation[200]; },
|
|
62
|
+
},
|
|
63
|
+
}, PopperProps: {
|
|
64
|
+
placement: 'bottom-start',
|
|
65
|
+
} }), void 0));
|
|
66
|
+
});
|
|
67
|
+
export default DatePicker;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DatePicker';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DatePicker';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { DatePickerProps as MuiDatePickerProps } from '@mui/lab';
|
|
2
|
+
export declare type DatePickerProps = Omit<MuiDatePickerProps<Date>, 'components' | 'renderInput' | 'showDaysOutsideCurrentMonth' | 'components' | 'componentsProps' | 'OpenPickerButtonProps' | 'PaperProps' | 'PopperProps'>;
|
|
3
|
+
export declare type DatePickerValue = Date;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
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 AdapterDateFns from '@mui/lab/AdapterDateFns';
|
|
14
|
+
import { LocalizationProvider as MuiLocalizationProvider } from '@mui/lab';
|
|
15
|
+
import { ru } from 'date-fns/locale';
|
|
16
|
+
export var LocalizationProvider = function (_a) {
|
|
17
|
+
var children = _a.children, _b = _a.locale, locale = _b === void 0 ? ru : _b;
|
|
18
|
+
return (_jsx(MuiLocalizationProvider, __assign({ dateAdapter: AdapterDateFns, locale: locale }, { children: children }), void 0));
|
|
19
|
+
};
|
|
20
|
+
export default LocalizationProvider;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './LocalizationProvider';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './LocalizationProvider';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/esm/index.d.ts
CHANGED
package/esm/index.js
CHANGED
|
@@ -49,6 +49,6 @@ describe('createTheme', function () {
|
|
|
49
49
|
});
|
|
50
50
|
it('Theme has elevation params', function () {
|
|
51
51
|
var theme = createTheme({ brand: Brand.SIGN, fontsUrls: fontsUrls });
|
|
52
|
-
expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740
|
|
52
|
+
expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740');
|
|
53
53
|
});
|
|
54
54
|
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export var MuiCalendarPicker = {
|
|
2
|
+
styleOverrides: {
|
|
3
|
+
viewTransitionContainer: function (_a) {
|
|
4
|
+
var theme = _a.theme;
|
|
5
|
+
return {
|
|
6
|
+
maxHeight: 260,
|
|
7
|
+
overflow: 'hidden',
|
|
8
|
+
'& span': {
|
|
9
|
+
color: theme.palette.grey[600],
|
|
10
|
+
width: 41,
|
|
11
|
+
margin: 0,
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
};
|
|
@@ -13,6 +13,9 @@ export var MuiOutlinedInput = {
|
|
|
13
13
|
'&:hover': {
|
|
14
14
|
// FIXME: to theme
|
|
15
15
|
background: '#EEF1F4',
|
|
16
|
+
'&.Mui-disabled': {
|
|
17
|
+
background: theme.palette.background.element,
|
|
18
|
+
},
|
|
16
19
|
},
|
|
17
20
|
'&:hover .MuiOutlinedInput-notchedOutline': {
|
|
18
21
|
borderColor: theme.palette.grey[300],
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
export var MuiPickersDay = {
|
|
2
|
+
styleOverrides: {
|
|
3
|
+
root: function (_a) {
|
|
4
|
+
var theme = _a.theme;
|
|
5
|
+
return {
|
|
6
|
+
width: 41,
|
|
7
|
+
height: 32,
|
|
8
|
+
margin: 0,
|
|
9
|
+
color: theme.palette.grey[900],
|
|
10
|
+
fontSize: theme.typography.link.fontSize,
|
|
11
|
+
fontWeight: theme.typography.fontWeightRegular,
|
|
12
|
+
borderRadius: theme.shape.small,
|
|
13
|
+
'&.MuiPickersDay-today': {
|
|
14
|
+
border: 0,
|
|
15
|
+
fontWeight: theme.typography.fontWeightMedium,
|
|
16
|
+
'&:before': {
|
|
17
|
+
content: '""',
|
|
18
|
+
position: 'absolute',
|
|
19
|
+
height: 2,
|
|
20
|
+
width: 33,
|
|
21
|
+
background: theme.palette.primary[900],
|
|
22
|
+
bottom: theme.spacing(1),
|
|
23
|
+
},
|
|
24
|
+
'&.Mui-selected': {
|
|
25
|
+
'&:before': {
|
|
26
|
+
background: theme.palette.primary[200],
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
'&.Mui-selected': {
|
|
31
|
+
fontWeight: theme.typography.fontWeightRegular,
|
|
32
|
+
},
|
|
33
|
+
'&.Mui-focusVisible': {
|
|
34
|
+
background: theme.palette.primary[200],
|
|
35
|
+
},
|
|
36
|
+
'&.MuiPickersDay-dayOutsideMonth': {
|
|
37
|
+
color: theme.palette.grey[600],
|
|
38
|
+
},
|
|
39
|
+
'&.Mui-disabled': {
|
|
40
|
+
color: theme.palette.grey[300],
|
|
41
|
+
fontWeight: theme.typography.fontWeightRegular,
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export var MuiYearPicker = {
|
|
2
|
+
styleOverrides: {
|
|
3
|
+
root: function (_a) {
|
|
4
|
+
var theme = _a.theme;
|
|
5
|
+
return {
|
|
6
|
+
'& .PrivatePickersYear-yearButton': {
|
|
7
|
+
fontSize: theme.typography.link.fontSize,
|
|
8
|
+
borderRadius: theme.shape.small,
|
|
9
|
+
},
|
|
10
|
+
};
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
};
|
|
@@ -10,6 +10,9 @@ import { MuiDialog } from './MuiDialog';
|
|
|
10
10
|
import { MuiDialogTitle } from './MuiDialogTitle';
|
|
11
11
|
import { MuiDialogContent } from './MuiDialogContent';
|
|
12
12
|
import { MuiDialogActions } from './MuiDialogActions';
|
|
13
|
+
import { MuiPickersDay } from './MuiPickersDay';
|
|
14
|
+
import { MuiCalendarPicker } from './MuiCalendarPicker';
|
|
15
|
+
import { MuiYearPicker } from './MuiYearPicker';
|
|
13
16
|
var getMuiCssBaseline = function (fontUrls) { return ({
|
|
14
17
|
styleOverrides: "\n @font-face {\n font-family: 'Ubuntu';\n font-style: 'normal';\n font-weight: 300;\n font-display: swap;\n src: url(".concat(fontUrls.light.woff2, ") format('woff2'), url(").concat(fontUrls.light.woff, ") format('woff');\n }\n @font-face {\n font-family: 'Ubuntu';\n font-style: 'normal';\n font-weight: 400;\n font-display: swap;\n src: url(").concat(fontUrls.regular.woff2, ") format('woff2'), url(").concat(fontUrls.regular.woff, ") format('woff');\n }\n @font-face {\n font-family: 'Ubuntu';\n font-style: 'normal';\n font-weight: 500;\n font-display: swap;\n src: url(").concat(fontUrls.medium.woff2, ") format('woff2'), url(").concat(fontUrls.medium.woff, ") format('woff');\n }\n @font-face {\n font-family: 'Ubuntu';\n font-style: 'normal';\n font-weight: 700;\n font-display: swap;\n src: url(").concat(fontUrls.bold.woff2, ") format('woff2'), url(").concat(fontUrls.bold.woff, ") format('woff');\n }\n "),
|
|
15
18
|
}); };
|
|
@@ -76,4 +79,7 @@ export var getComponents = function (fontUrls) { return ({
|
|
|
76
79
|
MuiDialogTitle: MuiDialogTitle,
|
|
77
80
|
MuiDialogContent: MuiDialogContent,
|
|
78
81
|
MuiDialogActions: MuiDialogActions,
|
|
82
|
+
MuiPickersDay: MuiPickersDay,
|
|
83
|
+
MuiCalendarPicker: MuiCalendarPicker,
|
|
84
|
+
MuiYearPicker: MuiYearPicker,
|
|
79
85
|
}); };
|
package/esm/theme/elevation.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var elevation = {
|
|
2
|
-
100: '0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740
|
|
3
|
-
200: '0px 0px 1px 0px #072D574F, 0px 3px 5px 0px #072D5733
|
|
4
|
-
300: '0px 0px 1px 0px #072D574F, 0px 8px 12px 0px #072D5726
|
|
5
|
-
400: '0px 0px 1px 0px #072D574F, 0px 10px 18px 0px #072D5726
|
|
6
|
-
500: '0px 0px 1px 0px #072D574F, 0px 18px 28px 0px #072D5726
|
|
2
|
+
100: '0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740',
|
|
3
|
+
200: '0px 0px 1px 0px #072D574F, 0px 3px 5px 0px #072D5733',
|
|
4
|
+
300: '0px 0px 1px 0px #072D574F, 0px 8px 12px 0px #072D5726',
|
|
5
|
+
400: '0px 0px 1px 0px #072D574F, 0px 10px 18px 0px #072D5726',
|
|
6
|
+
500: '0px 0px 1px 0px #072D574F, 0px 18px 28px 0px #072D5726',
|
|
7
7
|
};
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -49,3 +49,5 @@ __exportStar(require("./ThemeProvider"), exports);
|
|
|
49
49
|
__exportStar(require("./TextField"), exports);
|
|
50
50
|
__exportStar(require("./Typography"), exports);
|
|
51
51
|
__exportStar(require("./Tooltip"), exports);
|
|
52
|
+
__exportStar(require("./DatePicker"), exports);
|
|
53
|
+
__exportStar(require("./LocalizationProvider"), exports);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astral/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"browser": "./src/index.ts",
|
|
5
5
|
"jest": {
|
|
6
6
|
"moduleNameMapper": {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
}
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@astral/icons": "^0.
|
|
11
|
+
"@astral/icons": "^0.16.0",
|
|
12
12
|
"@emotion/cache": "11.7.1",
|
|
13
13
|
"@emotion/react": "11.8.1",
|
|
14
14
|
"@emotion/server": "11.4.0",
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
"@mui/base": "5.0.0-alpha.69",
|
|
17
17
|
"@mui/lab": "5.0.0-alpha.70",
|
|
18
18
|
"@mui/material": "5.4.3",
|
|
19
|
+
"date-fns": "^2.28.0",
|
|
19
20
|
"lodash-es": "4.17.21",
|
|
20
21
|
"react-imask": "^6.4.2"
|
|
21
22
|
},
|
|
@@ -51,6 +51,6 @@ describe('createTheme', function () {
|
|
|
51
51
|
});
|
|
52
52
|
it('Theme has elevation params', function () {
|
|
53
53
|
var theme = (0, baseTheme_1.createTheme)({ brand: constants_1.Brand.SIGN, fontsUrls: fontsUrls });
|
|
54
|
-
expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740
|
|
54
|
+
expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740');
|
|
55
55
|
});
|
|
56
56
|
});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.MuiCalendarPicker = void 0;
|
|
4
|
+
exports.MuiCalendarPicker = {
|
|
5
|
+
styleOverrides: {
|
|
6
|
+
viewTransitionContainer: function (_a) {
|
|
7
|
+
var theme = _a.theme;
|
|
8
|
+
return {
|
|
9
|
+
maxHeight: 260,
|
|
10
|
+
overflow: 'hidden',
|
|
11
|
+
'& span': {
|
|
12
|
+
color: theme.palette.grey[600],
|
|
13
|
+
width: 41,
|
|
14
|
+
margin: 0,
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
};
|
|
@@ -16,6 +16,9 @@ exports.MuiOutlinedInput = {
|
|
|
16
16
|
'&:hover': {
|
|
17
17
|
// FIXME: to theme
|
|
18
18
|
background: '#EEF1F4',
|
|
19
|
+
'&.Mui-disabled': {
|
|
20
|
+
background: theme.palette.background.element,
|
|
21
|
+
},
|
|
19
22
|
},
|
|
20
23
|
'&:hover .MuiOutlinedInput-notchedOutline': {
|
|
21
24
|
borderColor: theme.palette.grey[300],
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.MuiPickersDay = void 0;
|
|
4
|
+
exports.MuiPickersDay = {
|
|
5
|
+
styleOverrides: {
|
|
6
|
+
root: function (_a) {
|
|
7
|
+
var theme = _a.theme;
|
|
8
|
+
return {
|
|
9
|
+
width: 41,
|
|
10
|
+
height: 32,
|
|
11
|
+
margin: 0,
|
|
12
|
+
color: theme.palette.grey[900],
|
|
13
|
+
fontSize: theme.typography.link.fontSize,
|
|
14
|
+
fontWeight: theme.typography.fontWeightRegular,
|
|
15
|
+
borderRadius: theme.shape.small,
|
|
16
|
+
'&.MuiPickersDay-today': {
|
|
17
|
+
border: 0,
|
|
18
|
+
fontWeight: theme.typography.fontWeightMedium,
|
|
19
|
+
'&:before': {
|
|
20
|
+
content: '""',
|
|
21
|
+
position: 'absolute',
|
|
22
|
+
height: 2,
|
|
23
|
+
width: 33,
|
|
24
|
+
background: theme.palette.primary[900],
|
|
25
|
+
bottom: theme.spacing(1),
|
|
26
|
+
},
|
|
27
|
+
'&.Mui-selected': {
|
|
28
|
+
'&:before': {
|
|
29
|
+
background: theme.palette.primary[200],
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
'&.Mui-selected': {
|
|
34
|
+
fontWeight: theme.typography.fontWeightRegular,
|
|
35
|
+
},
|
|
36
|
+
'&.Mui-focusVisible': {
|
|
37
|
+
background: theme.palette.primary[200],
|
|
38
|
+
},
|
|
39
|
+
'&.MuiPickersDay-dayOutsideMonth': {
|
|
40
|
+
color: theme.palette.grey[600],
|
|
41
|
+
},
|
|
42
|
+
'&.Mui-disabled': {
|
|
43
|
+
color: theme.palette.grey[300],
|
|
44
|
+
fontWeight: theme.typography.fontWeightRegular,
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.MuiYearPicker = void 0;
|
|
4
|
+
exports.MuiYearPicker = {
|
|
5
|
+
styleOverrides: {
|
|
6
|
+
root: function (_a) {
|
|
7
|
+
var theme = _a.theme;
|
|
8
|
+
return {
|
|
9
|
+
'& .PrivatePickersYear-yearButton': {
|
|
10
|
+
fontSize: theme.typography.link.fontSize,
|
|
11
|
+
borderRadius: theme.shape.small,
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
};
|
|
@@ -13,6 +13,9 @@ var MuiDialog_1 = require("./MuiDialog");
|
|
|
13
13
|
var MuiDialogTitle_1 = require("./MuiDialogTitle");
|
|
14
14
|
var MuiDialogContent_1 = require("./MuiDialogContent");
|
|
15
15
|
var MuiDialogActions_1 = require("./MuiDialogActions");
|
|
16
|
+
var MuiPickersDay_1 = require("./MuiPickersDay");
|
|
17
|
+
var MuiCalendarPicker_1 = require("./MuiCalendarPicker");
|
|
18
|
+
var MuiYearPicker_1 = require("./MuiYearPicker");
|
|
16
19
|
var getMuiCssBaseline = function (fontUrls) { return ({
|
|
17
20
|
styleOverrides: "\n @font-face {\n font-family: 'Ubuntu';\n font-style: 'normal';\n font-weight: 300;\n font-display: swap;\n src: url(".concat(fontUrls.light.woff2, ") format('woff2'), url(").concat(fontUrls.light.woff, ") format('woff');\n }\n @font-face {\n font-family: 'Ubuntu';\n font-style: 'normal';\n font-weight: 400;\n font-display: swap;\n src: url(").concat(fontUrls.regular.woff2, ") format('woff2'), url(").concat(fontUrls.regular.woff, ") format('woff');\n }\n @font-face {\n font-family: 'Ubuntu';\n font-style: 'normal';\n font-weight: 500;\n font-display: swap;\n src: url(").concat(fontUrls.medium.woff2, ") format('woff2'), url(").concat(fontUrls.medium.woff, ") format('woff');\n }\n @font-face {\n font-family: 'Ubuntu';\n font-style: 'normal';\n font-weight: 700;\n font-display: swap;\n src: url(").concat(fontUrls.bold.woff2, ") format('woff2'), url(").concat(fontUrls.bold.woff, ") format('woff');\n }\n "),
|
|
18
21
|
}); };
|
|
@@ -79,5 +82,8 @@ var getComponents = function (fontUrls) { return ({
|
|
|
79
82
|
MuiDialogTitle: MuiDialogTitle_1.MuiDialogTitle,
|
|
80
83
|
MuiDialogContent: MuiDialogContent_1.MuiDialogContent,
|
|
81
84
|
MuiDialogActions: MuiDialogActions_1.MuiDialogActions,
|
|
85
|
+
MuiPickersDay: MuiPickersDay_1.MuiPickersDay,
|
|
86
|
+
MuiCalendarPicker: MuiCalendarPicker_1.MuiCalendarPicker,
|
|
87
|
+
MuiYearPicker: MuiYearPicker_1.MuiYearPicker,
|
|
82
88
|
}); };
|
|
83
89
|
exports.getComponents = getComponents;
|
package/theme/elevation.js
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.elevation = void 0;
|
|
4
4
|
exports.elevation = {
|
|
5
|
-
100: '0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740
|
|
6
|
-
200: '0px 0px 1px 0px #072D574F, 0px 3px 5px 0px #072D5733
|
|
7
|
-
300: '0px 0px 1px 0px #072D574F, 0px 8px 12px 0px #072D5726
|
|
8
|
-
400: '0px 0px 1px 0px #072D574F, 0px 10px 18px 0px #072D5726
|
|
9
|
-
500: '0px 0px 1px 0px #072D574F, 0px 18px 28px 0px #072D5726
|
|
5
|
+
100: '0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740',
|
|
6
|
+
200: '0px 0px 1px 0px #072D574F, 0px 3px 5px 0px #072D5733',
|
|
7
|
+
300: '0px 0px 1px 0px #072D574F, 0px 8px 12px 0px #072D5726',
|
|
8
|
+
400: '0px 0px 1px 0px #072D574F, 0px 10px 18px 0px #072D5726',
|
|
9
|
+
500: '0px 0px 1px 0px #072D574F, 0px 18px 28px 0px #072D5726',
|
|
10
10
|
};
|