@astral/ui 0.4.0 → 0.4.1-alpha.10

package/esm/Tooltip/Tooltip.js

@@ -0,0 +1,30 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { StyledTooltip } from './styled';
+import { TooltipSizes } from './constants';
+export var Tooltip = forwardRef(function (_a, ref) {
+    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"]);
+    return (_jsx(StyledTooltip, __assign({ ref: ref, size: size, placement: placement }, props, { children: children }), void 0));
+});

package/esm/Tooltip/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum TooltipSizes {
+    MEDIUM = "medium",
+    SMALL = "small"
+}

package/esm/Tooltip/constants.js

@@ -0,0 +1,5 @@
+export var TooltipSizes;
+(function (TooltipSizes) {
+    TooltipSizes["MEDIUM"] = "medium";
+    TooltipSizes["SMALL"] = "small";
+})(TooltipSizes || (TooltipSizes = {}));

package/esm/Tooltip/index.d.ts

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

package/esm/Tooltip/index.js

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

package/esm/Tooltip/styled.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledTooltip: import("@emotion/styled").StyledComponent<import("@mui/material").TooltipProps & {
+    size?: "medium" | "small" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/esm/Tooltip/styled.js

@@ -0,0 +1,69 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@mui/material';
+import { styled } from '../styles';
+import { TooltipSizes } from './constants';
+export var StyledTooltip = styled(function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(Tooltip, __assign({}, props, { classes: { popper: className } }), void 0));
+})(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) {
+    var theme = _a.theme;
+    return theme.palette.grey[900];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.small;
+}, function (_a) {
+    var size = _a.size, theme = _a.theme;
+    return size === TooltipSizes.SMALL
+        ? theme.typography.small.fontSize
+        : theme.typography.ui.fontSize;
+}, function (_a) {
+    var size = _a.size, theme = _a.theme;
+    return size === TooltipSizes.SMALL
+        ? theme.typography.small.lineHeight
+        : theme.typography.ui.lineHeight;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.typography.fontWeightRegular;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[900];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(3);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(3);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(2);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(2);
+});
+var templateObject_1;

package/esm/Tooltip/types.d.ts

@@ -0,0 +1,6 @@
+import { TooltipProps as MuiTooltipProps } from '@mui/material/Tooltip';
+import { TooltipSizes } from './constants';
+export declare type TooltipSize = `${TooltipSizes}`;
+export declare type TooltipProps = MuiTooltipProps & {
+    size?: TooltipSize;
+};

package/esm/Typography/Typography.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TypographyProps as MuiTypographyProps } from '@mui/material/Typography';
+import { Variant } from '@mui/material/styles/createTypography';
+export declare type TypographyProps = Omit<MuiTypographyProps, 'variant'> & {
+    variant?: Variant | 'h7' | 'h8' | 'h9' | 'ui' | 'link' | 'pointer' | 'small' | 'code';
+};
+export declare const Typography: ({ variant, children, ...props }: TypographyProps) => JSX.Element;
+export default Typography;

package/esm/Typography/index.js

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

package/{types/src → esm}/index.d.ts

@@ -1,5 +1,3 @@
-export * from './createStylesCache';
-export * from './createStylesServer';
 export * from './StylesCacheProvider';
 export * from './Button';
 export * from './ButtonBase';
@@ -19,4 +17,5 @@ export * from './TextField';
 export * from './FormHelperText';
 export * from './Grid';
 export * from './Tag';
+export * from './Tooltip';
 export * from './TextArea';

package/esm/index.js

@@ -1 +1,21 @@
-export * from './src';
+export * from './StylesCacheProvider';
+export * from './Button';
+export * from './ButtonBase';
+export * from './IconButton';
+export * from './Badge';
+export * from './Checkbox';
+export * from './FormControlLabel';
+export * from './Typography';
+export * from './Menu';
+export * from './MenuItem';
+export * from './MenuList';
+export * from './theme';
+export * from './styles';
+export * from './ThemeProvider';
+export * from './GlobalStyles';
+export * from './TextField';
+export * from './FormHelperText';
+export * from './Grid';
+export * from './Tag';
+export * from './Tooltip';
+export * from './TextArea';

package/esm/server/index.d.ts

@@ -0,0 +1,2 @@
+export * from './createStylesCache';
+export * from './createStylesServer';

package/esm/server/index.js

@@ -0,0 +1,2 @@
+export * from './createStylesCache';
+export * from './createStylesServer';

package/esm/styles/index.d.ts

@@ -0,0 +1 @@
+export { default as styled } from '@emotion/styled';

package/esm/styles/index.js

@@ -0,0 +1 @@
+export { default as styled } from '@emotion/styled';

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

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

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

@@ -1,10 +1,7 @@
 import { Palette as MuiPalette, Theme as MuiTheme, PaletteColor, ThemeOptions } from '@mui/material/styles';
-import { TypographyThemeOptions } from './typography';
 import { Background, Color } from './palette';
 import { FontsUrls } from './components';
 import { Brand } from './constants';
-import { Elevation } from './elevation';
-import { Shape } from './shape';
 export declare type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
     red: Color;
     green: Color;
@@ -13,16 +10,11 @@ export declare type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
     primary: PaletteColor & Color;
     background: Background;
 };
-export declare type Theme = Omit<MuiTheme, 'shadows' | 'palette' | 'shape' | 'typography'> & {
-    elevation: Elevation;
-    palette: Palette;
-    shape: Shape;
-    typography: TypographyThemeOptions;
-};
+export declare type Theme = MuiTheme;
 declare type CreateThemeParams = {
     brand: Brand;
     options?: ThemeOptions;
     fontsUrls: FontsUrls;
 };
-export declare const createTheme: (params: CreateThemeParams) => Theme;
+export declare const createTheme: (params: CreateThemeParams) => MuiTheme;
 export {};

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

@@ -1,4 +1,4 @@
-import { createTheme as createMuiTheme, responsiveFontSizes, } from '@mui/material/styles';
+import { createTheme as createMuiTheme, } from '@mui/material/styles';
 import { merge } from 'lodash-es';
 import { typography } from './typography';
 import { getPalette } from './palette';
@@ -14,6 +14,6 @@ export var createTheme = function (params) {
         palette: getPalette(brand),
         components: getComponents(fontsUrls),
     };
-    var muiTheme = responsiveFontSizes(createMuiTheme(merge({}, themeOptions, options)));
+    var muiTheme = createMuiTheme(merge({}, themeOptions, options));
     return merge(muiTheme, { elevation: elevation, shape: shape });
 };

package/{types/src → esm}/theme/typography.d.ts

@@ -3,6 +3,7 @@ import { CSSProperties } from 'react';
 declare type CustomTypographyVariantStyle = {
     fontSize: CSSProperties['fontSize'];
     fontWeight: CSSProperties['fontWeight'];
+    lineHeight: CSSProperties['lineHeight'];
 };
 export declare type TypographyThemeOptions = Typography & {
     h7: CustomTypographyVariantStyle;

package/esm/{src/theme → theme}/typography.js

@@ -16,90 +16,105 @@ export var typography = {
         return {
             fontSize: pxToRem(35, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: pxToRem(40, this.htmlFontSize),
         };
     },
     get h2() {
         return {
             fontSize: pxToRem(29, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: pxToRem(32, this.htmlFontSize),
         };
     },
     get h3() {
         return {
             fontSize: pxToRem(24, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: pxToRem(28, this.htmlFontSize),
         };
     },
     get h4() {
         return {
             fontSize: pxToRem(20, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: pxToRem(24, this.htmlFontSize),
         };
     },
     get h5() {
         return {
             fontSize: pxToRem(16, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: pxToRem(24, this.htmlFontSize),
         };
     },
     get h6() {
         return {
             fontSize: pxToRem(14, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: pxToRem(16, this.htmlFontSize),
         };
     },
     get h7() {
         return {
             fontSize: pxToRem(12, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: pxToRem(20, this.htmlFontSize),
         };
     },
     get h8() {
         return {
             fontSize: pxToRem(12, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: pxToRem(16, this.htmlFontSize),
         };
     },
     get h9() {
         return {
             fontSize: pxToRem(11, this.htmlFontSize),
             fontWeight: this.fontWeightBold,
+            lineHeight: pxToRem(16, this.htmlFontSize),
         };
     },
     get button() {
         return {
             fontSize: pxToRem(14, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: pxToRem(24, this.htmlFontSize),
         };
     },
     get ui() {
         return {
             fontSize: pxToRem(14, this.htmlFontSize),
             fontWeight: this.fontWeightRegular,
+            lineHeight: pxToRem(20, this.htmlFontSize),
         };
     },
     get link() {
         return {
             fontSize: pxToRem(14, this.htmlFontSize),
             fontWeight: this.fontWeightRegular,
+            lineHeight: pxToRem(20, this.htmlFontSize),
         };
     },
     get pointer() {
         return {
             fontSize: pxToRem(12, this.htmlFontSize),
             fontWeight: this.fontWeightMedium,
+            lineHeight: pxToRem(16, this.htmlFontSize),
         };
     },
     get small() {
         return {
             fontSize: pxToRem(12, this.htmlFontSize),
             fontWeight: this.fontWeightRegular,
+            lineHeight: pxToRem(16, this.htmlFontSize),
         };
     },
     get code() {
         return {
             fontSize: pxToRem(12, this.htmlFontSize),
             fontWeight: this.fontWeightLight,
+            lineHeight: pxToRem(20, this.htmlFontSize),
         };
     },
     body1: {

package/{esm/src/index.js → index.d.ts}

@@ -1,5 +1,3 @@
-export * from './createStylesCache';
-export * from './createStylesServer';
 export * from './StylesCacheProvider';
 export * from './Button';
 export * from './ButtonBase';
@@ -19,4 +17,5 @@ export * from './TextField';
 export * from './FormHelperText';
 export * from './Grid';
 export * from './Tag';
+export * from './Tooltip';
 export * from './TextArea';

package/{cjs/src/index.js → index.js}

@@ -10,8 +10,6 @@ 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("./createStylesCache"), exports);
-__exportStar(require("./createStylesServer"), exports);
 __exportStar(require("./StylesCacheProvider"), exports);
 __exportStar(require("./Button"), exports);
 __exportStar(require("./ButtonBase"), exports);
@@ -31,4 +29,5 @@ __exportStar(require("./TextField"), exports);
 __exportStar(require("./FormHelperText"), exports);
 __exportStar(require("./Grid"), exports);
 __exportStar(require("./Tag"), exports);
+__exportStar(require("./Tooltip"), exports);
 __exportStar(require("./TextArea"), exports);

package/package.json

@@ -1,8 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "0.4.0",
-  "type": "module",
-  "source": "./src/index.ts",
+  "version": "0.4.1-alpha.10",
   "jest": {
     "moduleNameMapper": {
       "^lodash-es$": "lodash"
@@ -33,14 +31,7 @@
   },
   "keywords": [],
   "sideEffects": false,
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
-  "module": "./esm/index.js",
-  "exports": {
-    ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js",
-      "types": "./types/index.d.ts"
-    }
-  }
-}
+  "types": "./esm/index.d.ts",
+  "main": "./index.js",
+  "module": "./esm/index.js"
+}

package/server/createStylesCache/index.d.ts

@@ -0,0 +1,2 @@
+export { default as createStylesCache } from '@emotion/cache';
+export type { EmotionCache as StylesCache } from '@emotion/cache';

package/server/createStylesServer/index.d.ts

@@ -0,0 +1 @@
+export { default as createStylesServer } from '@emotion/server/create-instance';

package/server/index.d.ts

@@ -0,0 +1,2 @@
+export * from './createStylesCache';
+export * from './createStylesServer';

package/server/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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("./createStylesCache"), exports);
+__exportStar(require("./createStylesServer"), exports);

package/styles/index.d.ts

@@ -0,0 +1 @@
+export { default as styled } from '@emotion/styled';

package/{cjs/src/styles/styled/styled.js → styles/index.js}

@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styled = void 0;
-var styled_1 = __importDefault(require("@emotion/styled"));
-exports.styled = styled_1.default;
+var styled_1 = require("@emotion/styled");
+Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return __importDefault(styled_1).default; } });

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

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

package/theme/baseTheme.d.ts

@@ -0,0 +1,20 @@
+import { 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';
+export declare type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
+    red: Color;
+    green: Color;
+    yellow: Color;
+    grey: Color;
+    primary: PaletteColor & Color;
+    background: Background;
+};
+export declare type Theme = MuiTheme;
+declare type CreateThemeParams = {
+    brand: Brand;
+    options?: ThemeOptions;
+    fontsUrls: FontsUrls;
+};
+export declare const createTheme: (params: CreateThemeParams) => MuiTheme;
+export {};

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

@@ -17,7 +17,7 @@ var createTheme = function (params) {
         palette: (0, palette_1.getPalette)(brand),
         components: (0, components_1.getComponents)(fontsUrls),
     };
-    var muiTheme = (0, styles_1.responsiveFontSizes)((0, styles_1.createTheme)((0, lodash_es_1.merge)({}, themeOptions, options)));
+    var muiTheme = (0, styles_1.createTheme)((0, lodash_es_1.merge)({}, themeOptions, options));
     return (0, lodash_es_1.merge)(muiTheme, { elevation: elevation_1.elevation, shape: shape_1.shape });
 };
 exports.createTheme = createTheme;

package/theme/components/MuiFormHelperText.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiFormHelperText: Components<Theme>['MuiFormHelperText'];
+export default MuiFormHelperText;

package/theme/components/MuiFormLabel.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiFormLabel: Components<Theme>['MuiFormLabel'];
+export default MuiFormLabel;