@astral/ui 1.14.0 → 1.15.0

package/esm/Placeholder/styles.d.ts

@@ -11,10 +11,18 @@ export declare const PlaceholderImage: import("@emotion/styled").StyledComponent
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const PlaceholderTitle: import("@emotion/styled").StyledComponent<Pick<import("../Typography").TypographyProps, string | number | symbol> & import("react").RefAttributes<HTMLElement> & {
+export declare const PlaceholderTitle: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
+    variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
+    component?: import("react").ElementType<any> | undefined;
+    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+} & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const PlaceholderDescription: import("@emotion/styled").StyledComponent<Pick<import("../Typography").TypographyProps, string | number | symbol> & import("react").RefAttributes<HTMLElement> & {
+export declare const PlaceholderDescription: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
+    variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
+    component?: import("react").ElementType<any> | undefined;
+    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+} & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const PlaceholderActions: import("@emotion/styled").StyledComponent<{

package/esm/Placeholder/styles.js

@@ -12,7 +12,7 @@ export var PlaceholderRoot = styled.div(templateObject_1 || (templateObject_1 =
     return theme.palette.background.paper;
 });
 export var PlaceholderInnerContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 384px;\n"], ["\n  max-width: 384px;\n"])));
-export var PlaceholderImage = styled.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  height: 162px;\n  margin: auto;\n  margin-bottom: ", ";\n"], ["\n  display: block;\n  width: 100%;\n  height: 162px;\n  margin: auto;\n  margin-bottom: ", ";\n"])), function (_a) {
+export var PlaceholderImage = styled.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  height: 162px;\n  margin: auto auto ", ";\n"], ["\n  display: block;\n  width: 100%;\n  height: 162px;\n  margin: auto auto ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing(8);
 });

package/esm/Typography/Typography.d.ts

@@ -1,4 +1,27 @@
-/// <reference types="react" />
-import { TypographyProps } from './types';
-export declare const Typography: import("react").ForwardRefExoticComponent<Pick<TypographyProps, string | number | symbol> & import("react").RefAttributes<HTMLElement>>;
+import { TypographyPropsVariantOverrides, TypographyTypeMap } from '@mui/material';
+import { OverrideProps } from '@mui/material/OverridableComponent';
+import { Variant } from '@mui/material/styles/createTypography';
+import React from 'react';
+import { Theme } from '../theme';
+import { TypographyColors } from './enums';
+export declare type TypographyColor = keyof typeof TypographyColors;
+export declare type TypographyProps = Omit<OverrideProps<TypographyTypeMap, React.ElementType>, 'variant' | 'color'> & {
+    variant?: Variant | keyof TypographyPropsVariantOverrides;
+    component?: React.ElementType;
+    color?: TypographyColor | ((theme: Theme) => string);
+};
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+        h7: true;
+        h8: true;
+        h9: true;
+        ui: true;
+        link: true;
+        pointer: true;
+        small: true;
+        code: true;
+        div: true;
+    }
+}
+export declare const Typography: React.FC<TypographyProps>;
 export default Typography;

package/esm/Typography/Typography.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Typography as MuiTypography } from '@mui/material';
+import { Typography as MuiTypography, } from '@mui/material';
 import { forwardRef, useMemo } from 'react';
 import { TypographyColors } from './enums';
 export var Typography = forwardRef(function (_a, ref) {

package/esm/Typography/index.d.ts

@@ -1,2 +1 @@
 export * from './Typography';
-export * from './types';

package/esm/Typography/index.js

@@ -1,2 +1 @@
 export * from './Typography';
-export * from './types';

package/esm/docs/Case/Case.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+declare type CaseProps = {
+    title: string;
+    descriptionList?: string[];
+    children: ReactNode;
+};
+export declare const Case: ({ title, descriptionList, children }: CaseProps) => JSX.Element;
+export {};

package/esm/docs/Case/Case.js

@@ -0,0 +1,27 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Typography } from '../../Typography';
+import { CaseWrapper } from './styles';
+export var Case = function (_a) {
+    var title = _a.title, _b = _a.descriptionList, descriptionList = _b === void 0 ? [] : _b, children = _a.children;
+    var subtitles = useMemo(function () {
+        return descriptionList === null || descriptionList === void 0 ? void 0 : descriptionList.map(function (text, index) { return (_jsx(Typography, __assign({ paragraph: true }, { children: text }), index)); });
+    }, [descriptionList]);
+    return (_jsxs(CaseWrapper, { children: [_jsx(Typography, __assign({ variant: "h5", paragraph: true }, { children: title })), subtitles, _jsx("div", __assign({ style: {
+                    padding: '32px 0',
+                    background: '#FAFBFC',
+                    border: '1px solid #DDE2E8',
+                    borderRadius: 3,
+                } }, { children: children }))] }));
+};

package/esm/docs/Case/index.d.ts

@@ -0,0 +1 @@
+export * from './Case';

package/esm/docs/Case/index.js

@@ -0,0 +1 @@
+export * from './Case';

package/esm/docs/Case/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const CaseWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/esm/docs/Case/styles.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '../../styles';
+export var CaseWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: ", ";\n  margin-bottom: ", ";\n"], ["\n  margin-top: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(6);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(6);
+});
+var templateObject_1;

package/esm/docs/ExampleTemplate/ExampleTemplate.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+declare type ExampleTemplateProps = {
+    children?: ReactNode;
+};
+export declare const ExampleTemplate: {
+    ({ children }: ExampleTemplateProps): JSX.Element;
+    Case: ({ title, descriptionList, children }: {
+        title: string;
+        descriptionList?: string[] | undefined;
+        children: ReactNode;
+    }) => JSX.Element;
+};
+export {};

package/esm/docs/ExampleTemplate/ExampleTemplate.js

@@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMediaQuery, useTheme } from '@mui/material';
+import { Case } from '../Case';
+import { ExampleTemplateWrapper } from './styles';
+export var ExampleTemplate = function (_a) {
+    var children = _a.children;
+    var theme = useTheme();
+    var matches = useMediaQuery(theme.breakpoints.down('sm'));
+    return (_jsx(ExampleTemplateWrapper, __assign({ matches: matches }, { children: children })));
+};
+ExampleTemplate.Case = Case;

package/esm/docs/ExampleTemplate/index.d.ts

@@ -0,0 +1 @@
+export * from './ExampleTemplate';

package/esm/docs/ExampleTemplate/index.js

@@ -0,0 +1 @@
+export * from './ExampleTemplate';

package/esm/docs/ExampleTemplate/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type ExampleTemplateWrapperProps = {
+    matches: boolean;
+};
+export declare const ExampleTemplateWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ExampleTemplateWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export {};

package/esm/docs/ExampleTemplate/styles.js

@@ -0,0 +1,10 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '../../styles';
+export var ExampleTemplateWrapper = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
+    var matches = _a.matches;
+    return (matches ? '100%' : '70%');
+});
+var templateObject_1;

package/esm/docs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Case';
+export * from './ExampleTemplate';

package/esm/docs/index.js

@@ -0,0 +1,2 @@
+export * from './Case';
+export * from './ExampleTemplate';

package/esm/index.d.ts

@@ -4,16 +4,17 @@ export * from './Autocomplete';
 export * from './BackdropStack';
 export * from './Badge';
 export * from './Button';
+export * from './DatePickerProvider';
 export * from './Description';
 export * from './Divider';
 export * from './ButtonBase';
 export * from './Checkbox';
 export * from './CircularProgress';
+export * from './ConfigProvider';
 export * from './DashboardLayout';
 export * from './DataGrid';
 export * from './DataGridPagination';
 export * from './DatePicker';
-export * from './DatePickerProvider';
 export * from './Dialog';
 export * from './DialogActions';
 export * from './DialogContent';

package/esm/index.js

@@ -4,16 +4,17 @@ export * from './Autocomplete';
 export * from './BackdropStack';
 export * from './Badge';
 export * from './Button';
+export * from './DatePickerProvider';
 export * from './Description';
 export * from './Divider';
 export * from './ButtonBase';
 export * from './Checkbox';
 export * from './CircularProgress';
+export * from './ConfigProvider';
 export * from './DashboardLayout';
 export * from './DataGrid';
 export * from './DataGridPagination';
 export * from './DatePicker';
-export * from './DatePickerProvider';
 export * from './Dialog';
 export * from './DialogActions';
 export * from './DialogContent';

package/esm/theme/{baseTheme.d.ts → baseTheme/baseTheme.d.ts}

@@ -1,7 +1,7 @@
 import { BreakpointsOptions, Palette as MuiPalette, Theme as MuiTheme, PaletteColor, ThemeOptions } from '@mui/material/styles';
-import { Background, Color } from './palette';
-import { FontsUrls } from './components';
-import { Brand } from './constants';
+import { Background, Color } from '../palette';
+import { FontsUrls } from '../components';
+import { Brand } from '../constants';
 export declare type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
     red: Color;
     green: Color;

package/esm/theme/{baseTheme.js → baseTheme/baseTheme.js}

@@ -1,12 +1,12 @@
 import { createTheme as createMuiTheme, } from '@mui/material/styles';
 import { merge } from 'lodash-es';
-import { typography } from './typography';
-import { getPalette } from './palette';
-import { getComponents } from './components';
-import { SPACING } from './constants';
-import { elevation } from './elevation';
-import { shape } from './shape';
-import { defaultBreakpoints } from './breakpoints';
+import { typography } from '../typography';
+import { getPalette } from '../palette';
+import { getComponents } from '../components';
+import { SPACING } from '../constants';
+import { elevation } from '../elevation';
+import { shape } from '../shape';
+import { defaultBreakpoints } from '../breakpoints';
 export var createTheme = function (params) {
     var brand = params.brand, options = params.options, fontsUrls = params.fontsUrls, _a = params.breakpoints, breakpoints = _a === void 0 ? defaultBreakpoints : _a;
     var themeOptions = {

package/esm/theme/{__tests__/BaseTheme.test.js → baseTheme/baseTheme.test.js}

@@ -1,5 +1,5 @@
-import { createTheme } from '../baseTheme';
 import { Brand } from '../constants';
+import { createTheme } from './baseTheme';
 describe('createTheme', function () {
     var fontsUrls = {
         bold: {

package/esm/theme/baseTheme/index.d.ts

@@ -0,0 +1 @@
+export * from './baseTheme';

package/esm/theme/baseTheme/index.js

@@ -0,0 +1 @@
+export * from './baseTheme';

package/index.d.ts

@@ -4,16 +4,17 @@ export * from './Autocomplete';
 export * from './BackdropStack';
 export * from './Badge';
 export * from './Button';
+export * from './DatePickerProvider';
 export * from './Description';
 export * from './Divider';
 export * from './ButtonBase';
 export * from './Checkbox';
 export * from './CircularProgress';
+export * from './ConfigProvider';
 export * from './DashboardLayout';
 export * from './DataGrid';
 export * from './DataGridPagination';
 export * from './DatePicker';
-export * from './DatePickerProvider';
 export * from './Dialog';
 export * from './DialogActions';
 export * from './DialogContent';

package/index.js

@@ -20,16 +20,17 @@ __exportStar(require("./Autocomplete"), exports);
 __exportStar(require("./BackdropStack"), exports);
 __exportStar(require("./Badge"), exports);
 __exportStar(require("./Button"), exports);
+__exportStar(require("./DatePickerProvider"), exports);
 __exportStar(require("./Description"), exports);
 __exportStar(require("./Divider"), exports);
 __exportStar(require("./ButtonBase"), exports);
 __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./CircularProgress"), exports);
+__exportStar(require("./ConfigProvider"), exports);
 __exportStar(require("./DashboardLayout"), exports);
 __exportStar(require("./DataGrid"), exports);
 __exportStar(require("./DataGridPagination"), exports);
 __exportStar(require("./DatePicker"), exports);
-__exportStar(require("./DatePickerProvider"), exports);
 __exportStar(require("./Dialog"), exports);
 __exportStar(require("./DialogActions"), exports);
 __exportStar(require("./DialogContent"), exports);

package/package.json

@@ -1,13 +1,8 @@
 {
   "name": "@astral/ui",
   "browser": "./src/index.ts",
-  "jest": {
-    "moduleNameMapper": {
-      "^lodash-es$": "lodash"
-    }
-  },
   "dependencies": {
-    "@astral/icons": "^1.14.0",
+    "@astral/icons": "^1.15.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",
@@ -36,7 +31,7 @@
       "require": "./server/index.js"
     }
   },
-  "version": "1.14.0",
+  "version": "1.15.0",
   "author": "Astral.Soft",
   "license": "MIT",
   "repository": {

package/theme/{baseTheme.d.ts → baseTheme/baseTheme.d.ts}

@@ -1,7 +1,7 @@
 import { BreakpointsOptions, Palette as MuiPalette, Theme as MuiTheme, PaletteColor, ThemeOptions } from '@mui/material/styles';
-import { Background, Color } from './palette';
-import { FontsUrls } from './components';
-import { Brand } from './constants';
+import { Background, Color } from '../palette';
+import { FontsUrls } from '../components';
+import { Brand } from '../constants';
 export declare type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
     red: Color;
     green: Color;

package/theme/{baseTheme.js → baseTheme/baseTheme.js}

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = void 0;
 var styles_1 = require("@mui/material/styles");
 var lodash_es_1 = require("lodash-es");
-var typography_1 = require("./typography");
-var palette_1 = require("./palette");
-var components_1 = require("./components");
-var constants_1 = require("./constants");
-var elevation_1 = require("./elevation");
-var shape_1 = require("./shape");
-var breakpoints_1 = require("./breakpoints");
+var typography_1 = require("../typography");
+var palette_1 = require("../palette");
+var components_1 = require("../components");
+var constants_1 = require("../constants");
+var elevation_1 = require("../elevation");
+var shape_1 = require("../shape");
+var breakpoints_1 = require("../breakpoints");
 var createTheme = function (params) {
     var brand = params.brand, options = params.options, fontsUrls = params.fontsUrls, _a = params.breakpoints, breakpoints = _a === void 0 ? breakpoints_1.defaultBreakpoints : _a;
     var themeOptions = {

package/theme/{__tests__/BaseTheme.test.js → baseTheme/baseTheme.test.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var baseTheme_1 = require("../baseTheme");
 var constants_1 = require("../constants");
+var baseTheme_1 = require("./baseTheme");
 describe('createTheme', function () {
     var fontsUrls = {
         bold: {

package/theme/baseTheme/index.d.ts

@@ -0,0 +1 @@
+export * from './baseTheme';

package/theme/baseTheme/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./baseTheme"), exports);

package/Typography/types.d.ts

@@ -1,25 +0,0 @@
-import { OverrideProps } from '@mui/material/OverridableComponent';
-import { TypographyPropsVariantOverrides, TypographyTypeMap } from '@mui/material/Typography';
-import { Variant } from '@mui/material/styles/createTypography';
-import * as React from 'react';
-import { Theme } from '../theme';
-import { TypographyColors } from './enums';
-declare module '@mui/material/Typography' {
-    interface TypographyPropsVariantOverrides {
-        h7: true;
-        h8: true;
-        h9: true;
-        ui: true;
-        link: true;
-        pointer: true;
-        small: true;
-        code: true;
-        div: true;
-    }
-}
-export declare type TypographyColor = keyof typeof TypographyColors;
-export declare type TypographyProps = Omit<OverrideProps<TypographyTypeMap, React.ElementType>, 'variant' | 'color'> & {
-    variant?: Variant | keyof TypographyPropsVariantOverrides;
-    component?: React.ElementType;
-    color?: TypographyColor | ((theme: Theme) => string);
-};

package/Typography/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/esm/Typography/types.d.ts

@@ -1,25 +0,0 @@
-import { OverrideProps } from '@mui/material/OverridableComponent';
-import { TypographyPropsVariantOverrides, TypographyTypeMap } from '@mui/material/Typography';
-import { Variant } from '@mui/material/styles/createTypography';
-import * as React from 'react';
-import { Theme } from '../theme';
-import { TypographyColors } from './enums';
-declare module '@mui/material/Typography' {
-    interface TypographyPropsVariantOverrides {
-        h7: true;
-        h8: true;
-        h9: true;
-        ui: true;
-        link: true;
-        pointer: true;
-        small: true;
-        code: true;
-        div: true;
-    }
-}
-export declare type TypographyColor = keyof typeof TypographyColors;
-export declare type TypographyProps = Omit<OverrideProps<TypographyTypeMap, React.ElementType>, 'variant' | 'color'> & {
-    variant?: Variant | keyof TypographyPropsVariantOverrides;
-    component?: React.ElementType;
-    color?: TypographyColor | ((theme: Theme) => string);
-};

package/theme/__tests__/BaseTheme.test.d.ts

@@ -1 +0,0 @@
-export {};