@astral/ui 0.1.0 → 0.1.1

package/cjs/src/theme/typography.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typography = exports.pxToRem = void 0;
+var HTML_FONT_SIZE = 14;
+// Т.к. нет досутпа к теме, написал функцию для конвертации px в rem
+var pxToRem = function (fontSize, htmlFontSize) {
+    if (htmlFontSize === void 0) { htmlFontSize = HTML_FONT_SIZE; }
+    return fontSize / htmlFontSize + "rem";
+};
+exports.pxToRem = pxToRem;
+exports.typography = {
+    fontSize: 14,
+    htmlFontSize: 14,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 700,
+    fontFamily: ['Ubuntu', 'sans-serif'].join(','),
+    get h1() {
+        return {
+            fontSize: (0, exports.pxToRem)(35, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h2() {
+        return {
+            fontSize: (0, exports.pxToRem)(29, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h3() {
+        return {
+            fontSize: (0, exports.pxToRem)(24, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h4() {
+        return {
+            fontSize: (0, exports.pxToRem)(20, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h5() {
+        return {
+            fontSize: (0, exports.pxToRem)(16, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h6() {
+        return {
+            fontSize: (0, exports.pxToRem)(14, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h7() {
+        return {
+            fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h8() {
+        return {
+            fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h9() {
+        return {
+            fontSize: (0, exports.pxToRem)(11, this.htmlFontSize),
+            fontWeight: this.fontWeightBold,
+        };
+    },
+    get button() {
+        return {
+            fontSize: (0, exports.pxToRem)(14, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get ui() {
+        return {
+            fontSize: (0, exports.pxToRem)(14, this.htmlFontSize),
+            fontWeight: this.fontWeightRegular,
+        };
+    },
+    get link() {
+        return {
+            fontSize: (0, exports.pxToRem)(14, this.htmlFontSize),
+            fontWeight: this.fontWeightRegular,
+        };
+    },
+    get pointer() {
+        return {
+            fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get small() {
+        return {
+            fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
+            fontWeight: this.fontWeightRegular,
+        };
+    },
+    get code() {
+        return {
+            fontSize: (0, exports.pxToRem)(12, this.htmlFontSize),
+            fontWeight: this.fontWeightLight,
+        };
+    },
+    body1: {
+        fontSize: '1rem',
+    },
+};

package/esm/index.d.ts

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

package/esm/index.js

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

package/esm/src/Badge/Badge.d.ts

@@ -0,0 +1,3 @@
+import { BadgeProps } from './types';
+declare const Badge: ({ children, color, ...props }: BadgeProps) => JSX.Element;
+export default Badge;

package/esm/src/Badge/Badge.js

@@ -0,0 +1,29 @@
+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 { StyledBadge } from './styled';
+var Badge = function (_a) {
+    var children = _a.children, color = _a.color, props = __rest(_a, ["children", "color"]);
+    return (_jsx(StyledBadge, __assign({ customColor: color }, props, { max: 99 }, { children: children }), void 0));
+};
+export default Badge;

package/esm/src/Badge/index.d.ts

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

package/esm/src/Badge/index.js

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

package/esm/src/Badge/styled.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { Theme } from '../theme';
+import { BadgeColor, BadgeProps } from './types';
+export declare const StyledBadge: import("@emotion/styled").StyledComponent<{
+    classes?: (Partial<import("@mui/material").BadgeUnstyledClasses> & {
+        colorPrimary?: string | undefined;
+        colorSecondary?: string | undefined;
+        colorError?: string | undefined;
+        colorInfo?: string | undefined;
+        colorSuccess?: string | undefined;
+        colorWarning?: string | undefined;
+        anchorOriginTopRightRectangular?: string | undefined;
+        anchorOriginBottomRightRectangular?: string | undefined;
+        anchorOriginTopLeftRectangular?: string | undefined;
+        anchorOriginBottomLeftRectangular?: string | undefined;
+        anchorOriginTopRightCircular?: string | undefined;
+        anchorOriginBottomRightCircular?: string | undefined;
+        anchorOriginTopLeftCircular?: string | undefined;
+        anchorOriginBottomLeftCircular?: string | undefined;
+        overlapRectangular?: string | undefined;
+        overlapCircular?: string | undefined;
+    }) | undefined;
+    color?: "primary" | "secondary" | "default" | "error" | "warning" | "info" | "success" | undefined;
+    overlap?: "circular" | "rectangular" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "dot" | "standard" | undefined;
+} & {
+    anchorOrigin?: import("@mui/material").BadgeOrigin | undefined;
+    components?: {
+        Root?: import("react").ElementType<any> | undefined;
+        Badge?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    componentsProps?: {
+        root?: (import("react").HTMLAttributes<HTMLSpanElement> & import("@mui/material").BadgeUnstyledComponentsPropsOverrides) | undefined;
+        badge?: (import("react").HTMLAttributes<HTMLSpanElement> & import("@mui/material").BadgeUnstyledComponentsPropsOverrides) | undefined;
+    } | undefined;
+    badgeContent?: import("react").ReactNode;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").BadgeUnstyledClasses> | undefined;
+    invisible?: boolean | undefined;
+    max?: number | undefined;
+    showZero?: boolean | undefined;
+    variant?: string | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "variant" | "components" | "componentsProps" | "invisible" | "overlap" | "anchorOrigin" | "badgeContent" | "max" | "showZero"> & {
+    theme?: Theme | undefined;
+} & Omit<BadgeProps, "color"> & {
+    customColor: BadgeColor;
+}, {}, {}>;

package/esm/src/Badge/styled.js

@@ -0,0 +1,60 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Badge } from '@mui/material';
+import { styled } from '../styles';
+var getBgColor = function (_a) {
+    var customColor = _a.customColor, theme = _a.theme;
+    if (customColor === 'grey')
+        return theme.palette.grey[300];
+    if (customColor === 'errorLight')
+        return theme.palette.error.light;
+    if (customColor === 'success')
+        return theme.palette.success.light;
+    if (customColor === 'primary')
+        return theme.palette.primary.main;
+    if (customColor === 'white')
+        return theme.palette.background.default;
+    if (customColor === 'error')
+        return theme.palette.error.dark;
+    return theme.palette.primary.main;
+};
+var getTextColor = function (_a) {
+    var customColor = _a.customColor, theme = _a.theme;
+    if (customColor === 'grey')
+        return theme.palette.text.primary;
+    if (customColor === 'primary')
+        return theme.palette.primary.contrastText;
+    if (customColor === 'white')
+        return theme.palette.primary.main;
+    if (customColor === 'error')
+        return theme.palette.error.contrastText;
+    if (customColor === 'errorLight')
+        return theme.palette.error.dark;
+    if (customColor === 'success')
+        return theme.palette.success.dark;
+    return theme.palette.primary.contrastText;
+};
+export var StyledBadge = styled(Badge, {
+    shouldForwardProp: function (prop) { return prop !== 'customColor'; },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiBadge-badge {\n    height: 20px;\n    border-radius: 12px;\n    line-height: 20px;\n    background-color: ", ";\n    color: ", ";\n    padding: ", ";\n    font-size: ", ";\n    border: 2px solid ", ";\n  }\n\n  .MuiBadge-dot {\n    width: 12px;\n    height: 12px;\n    border: 2px solid ", ";\n  }\n"], ["\n  .MuiBadge-badge {\n    height: 20px;\n    border-radius: 12px;\n    line-height: 20px;\n    background-color: ", ";\n    color: ", ";\n    padding: ", ";\n    font-size: ", ";\n    border: 2px solid ", ";\n  }\n\n  .MuiBadge-dot {\n    width: 12px;\n    height: 12px;\n    border: 2px solid ", ";\n  }\n"])), function (_a) {
+    var customColor = _a.customColor, theme = _a.theme;
+    return getBgColor({ customColor: customColor, theme: theme });
+}, function (_a) {
+    var customColor = _a.customColor, theme = _a.theme;
+    return getTextColor({ customColor: customColor, theme: theme });
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(0, 1);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.typography.small.fontSize;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.common.white;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.common.white;
+});
+var templateObject_1;

package/esm/src/Badge/types.d.ts

@@ -0,0 +1,5 @@
+import { BadgeProps as MuiBadgeProps } from '@mui/material/Badge/Badge';
+export declare type BadgeColor = 'primary' | 'grey' | 'white' | 'errorLight' | 'error' | 'success';
+export declare type BadgeProps = Omit<MuiBadgeProps, 'color'> & {
+    color: BadgeColor;
+};

package/esm/src/Badge/types.js

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

package/esm/src/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from './types';
+export declare const Button: ({ children, startIcon, endIcon, loading, ...props }: ButtonProps) => JSX.Element;

package/esm/src/Button/Button.js

@@ -0,0 +1,29 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircularProgress } from '../CircularProgress';
+import { StyledButton } from './styled';
+export var Button = function (_a) {
+    var children = _a.children, startIcon = _a.startIcon, endIcon = _a.endIcon, loading = _a.loading, props = __rest(_a, ["children", "startIcon", "endIcon", "loading"]);
+    return (_jsxs(StyledButton, __assign({ loading: loading }, props, { children: [_jsx("span", { children: startIcon }, void 0), children, loading && _jsx(CircularProgress, {}, void 0), _jsx("span", { children: endIcon }, void 0)] }), void 0));
+};

package/esm/src/Button/index.d.ts

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

package/esm/src/Button/index.js

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

package/esm/src/Button/styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Theme } from '../theme';
+export declare const StyledButton: import("@emotion/styled").StyledComponent<Omit<import("@mui/base/ButtonUnstyled/ButtonUnstyledProps").default<"button", {}>, "color" | "variant" | "size"> & {
+    color?: "primary" | "error" | "warning" | "success" | undefined;
+    variant?: "link" | "light" | "text" | "contained" | undefined;
+    size?: "large" | "medium" | undefined;
+} & {
+    theme?: Theme | undefined;
+} & {
+    loading?: boolean | undefined;
+    startIcon?: import("react").ReactNode;
+    endIcon?: import("react").ReactNode;
+}, {}, {}>;

package/esm/src/Button/styled.js

@@ -0,0 +1,30 @@
+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';
+import { ButtonBase, ButtonVariants } from '../ButtonBase';
+var getProgressColor = function (_a) {
+    var theme = _a.theme, variant = _a.variant;
+    if (variant === ButtonVariants.CONTAINED)
+        return theme.palette.primary.contrastText;
+    return theme.palette.grey['900'];
+};
+export var StyledButton = styled(ButtonBase, {
+    shouldForwardProp: function (prop) {
+        return prop !== 'startIcon' && prop !== 'endIcon' && prop !== 'loading';
+    },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: ", ";\n  color: ", ";\n\n  > span:first-of-type {\n    display: inherit;\n    margin-right: ", ";\n  }\n\n  > span:last-of-type {\n    display: inherit;\n    margin-left: ", ";\n  }\n\n  .MuiCircularProgress-root {\n    width: 16px !important;\n    height: 16px !important;\n    transform: translate(-50%, -50%);\n    position: absolute;\n\n    color: ", ";\n  }\n"], ["\n  pointer-events: ", ";\n  color: ", ";\n\n  > span:first-of-type {\n    display: inherit;\n    margin-right: ", ";\n  }\n\n  > span:last-of-type {\n    display: inherit;\n    margin-left: ", ";\n  }\n\n  .MuiCircularProgress-root {\n    width: 16px !important;\n    height: 16px !important;\n    transform: translate(-50%, -50%);\n    position: absolute;\n\n    color: ", ";\n  }\n"])), function (_a) {
+    var loading = _a.loading;
+    return (loading ? 'none' : 'inherit');
+}, function (_a) {
+    var loading = _a.loading;
+    return loading && 'transparent';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(2);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(2);
+}, getProgressColor);
+var templateObject_1;

package/esm/src/Button/types.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { BaseButtonProps } from '../ButtonBase';
+export declare type ButtonProps = BaseButtonProps & {
+    loading?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+};

package/esm/src/Button/types.js

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

package/esm/src/ButtonBase/ButtonBase.d.ts

@@ -0,0 +1,2 @@
+import { BaseButtonProps } from './types';
+export declare const ButtonBase: ({ children, variant, color, ...props }: BaseButtonProps) => JSX.Element;

package/esm/src/ButtonBase/ButtonBase.js

@@ -0,0 +1,29 @@
+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 { ButtonColors, ButtonVariants } from './constants';
+import { StyledButtonBase } from './styled';
+export var ButtonBase = function (_a) {
+    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? ButtonVariants.CONTAINED : _b, _c = _a.color, color = _c === void 0 ? ButtonColors.PRIMARY : _c, props = __rest(_a, ["children", "variant", "color"]);
+    return (_jsx(StyledButtonBase, __assign({}, props, { customColor: color, customVariant: variant }, { children: children }), void 0));
+};

package/esm/src/ButtonBase/constants.d.ts

@@ -0,0 +1,22 @@
+export declare enum ButtonColors {
+    ERROR = "error",
+    SUCCESS = "success",
+    WARNING = "warning",
+    PRIMARY = "primary"
+}
+export declare enum ButtonVariants {
+    CONTAINED = "contained",
+    LIGHT = "light",
+    TEXT = "text",
+    LINK = "link"
+}
+export declare enum ButtonSizes {
+    MEDIUM = "medium",
+    LARGE = "large"
+}
+export declare enum ButtonStates {
+    DEFAULT = "default",
+    ACTIVE = "active",
+    FOCUS = "focus",
+    HOVER = "hover"
+}

package/esm/src/ButtonBase/constants.js

@@ -0,0 +1,26 @@
+export var ButtonColors;
+(function (ButtonColors) {
+    ButtonColors["ERROR"] = "error";
+    ButtonColors["SUCCESS"] = "success";
+    ButtonColors["WARNING"] = "warning";
+    ButtonColors["PRIMARY"] = "primary";
+})(ButtonColors || (ButtonColors = {}));
+export var ButtonVariants;
+(function (ButtonVariants) {
+    ButtonVariants["CONTAINED"] = "contained";
+    ButtonVariants["LIGHT"] = "light";
+    ButtonVariants["TEXT"] = "text";
+    ButtonVariants["LINK"] = "link";
+})(ButtonVariants || (ButtonVariants = {}));
+export var ButtonSizes;
+(function (ButtonSizes) {
+    ButtonSizes["MEDIUM"] = "medium";
+    ButtonSizes["LARGE"] = "large";
+})(ButtonSizes || (ButtonSizes = {}));
+export var ButtonStates;
+(function (ButtonStates) {
+    ButtonStates["DEFAULT"] = "default";
+    ButtonStates["ACTIVE"] = "active";
+    ButtonStates["FOCUS"] = "focus";
+    ButtonStates["HOVER"] = "hover";
+})(ButtonStates || (ButtonStates = {}));

package/esm/src/ButtonBase/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ButtonBase';
+export * from './constants';
+export * from './types';

package/esm/src/ButtonBase/index.js

@@ -0,0 +1,3 @@
+export * from './ButtonBase';
+export * from './constants';
+export * from './types';

package/esm/src/ButtonBase/styled.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { Palette, Theme } from '../theme';
+import { BaseButtonProps, ButtonColor, ButtonSize, ButtonState, ButtonVariant } from './types';
+declare type StyledButtonBaseThemeProps = {
+    customColor?: ButtonColor;
+    customVariant?: ButtonVariant;
+    size?: ButtonSize;
+    theme: Theme;
+};
+export declare const getColor: ({ theme, customVariant, customColor, buttonState, }: StyledButtonBaseThemeProps & {
+    buttonState: ButtonState;
+}) => string;
+export declare const getBgText: ({ palette, buttonState, colorVariant, }: {
+    palette: Palette;
+    buttonState: ButtonState;
+    colorVariant: string;
+}) => string;
+export declare const getBgColor: ({ customColor, customVariant, buttonState, theme, }: StyledButtonBaseThemeProps & {
+    buttonState: ButtonState;
+}) => string;
+export declare const getButtonHeight: ({ size, }: StyledButtonBaseThemeProps) => string;
+export declare const getButtonPadding: ({ size, theme, }: StyledButtonBaseThemeProps) => string;
+export declare const getDisabledBgColor: ({ theme, customVariant, }: StyledButtonBaseThemeProps) => string;
+export declare const StyledButtonBase: import("@emotion/styled").StyledComponent<Pick<import("@mui/base/ButtonUnstyled").ButtonUnstyledOwnProps & Omit<any, keyof import("@mui/base/ButtonUnstyled").ButtonUnstyledOwnProps> & {
+    component?: import("react").ElementType<any> | undefined;
+}, string | number | symbol> & import("react").RefAttributes<any> & {
+    theme?: Theme | undefined;
+} & Omit<BaseButtonProps, "color" | "variant"> & {
+    customColor?: "primary" | "error" | "warning" | "success" | undefined;
+    customVariant?: "link" | "light" | "text" | "contained" | undefined;
+}, {}, {}>;
+export {};