@astral/ui 0.1.0 → 0.2.3

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,4 @@
+/// <reference types="react" />
+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?: "standard" | "dot" | 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;
+}, "components" | "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "componentsProps" | "invisible" | "anchorOrigin" | "overlap" | "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,3 @@
+/// <reference types="react" />
+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,33 @@
+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  &:focus {\n    color: ", ";\n  }\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  &:focus {\n    color: ", ";\n  }\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 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,3 @@
+/// <reference types="react" />
+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,27 @@
+/// <reference types="react" />
+import { 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 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 {};

package/esm/src/ButtonBase/styled.js

@@ -0,0 +1,202 @@
+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);
+};
+import ButtonUnstyled, { buttonUnstyledClasses, } from '@mui/base/ButtonUnstyled';
+import { styled } from '../styles';
+import { ButtonSizes, ButtonStates, ButtonVariants } from './constants';
+export var getColor = function (_a) {
+    var theme = _a.theme, customVariant = _a.customVariant, customColor = _a.customColor, buttonState = _a.buttonState;
+    var textColorVariants = {
+        light: {
+            error: {
+                default: theme.palette.red['900'],
+                hover: theme.palette.red['900'],
+                active: theme.palette.red['900'],
+                focus: theme.palette.red['900'],
+            },
+            success: {
+                default: theme.palette.green['900'],
+                hover: theme.palette.green['900'],
+                active: theme.palette.green['900'],
+                focus: theme.palette.green['900'],
+            },
+            primary: {
+                default: theme.palette.grey['900'],
+                hover: theme.palette.grey['900'],
+                active: theme.palette.primary['800'],
+                focus: theme.palette.grey['900'],
+            },
+            warning: {
+                default: theme.palette.yellow['900'],
+                hover: theme.palette.yellow['900'],
+                active: theme.palette.yellow['900'],
+                focus: theme.palette.yellow['900'],
+            },
+        },
+        contained: theme.palette.primary.contrastText,
+        text: {
+            default: theme.palette.grey['900'],
+            hover: theme.palette.grey['900'],
+            active: theme.palette.primary['800'],
+            focus: theme.palette.grey['900'],
+        },
+        link: {
+            default: theme.palette.primary['800'],
+            hover: theme.palette.primary['700'],
+            active: theme.palette.primary['900'],
+            focus: theme.palette.primary['800'],
+        },
+    };
+    if (customVariant === ButtonVariants.CONTAINED) {
+        return textColorVariants.contained;
+    }
+    if (customVariant === ButtonVariants.LIGHT && customColor) {
+        return textColorVariants.light[customColor][buttonState];
+    }
+    if (customVariant === ButtonVariants.TEXT) {
+        return textColorVariants.text[buttonState];
+    }
+    return textColorVariants.link[buttonState];
+};
+export var getBgColor = function (_a) {
+    var customColor = _a.customColor, customVariant = _a.customVariant, buttonState = _a.buttonState, theme = _a.theme;
+    var bgColorVariants = {
+        light: {
+            error: {
+                default: theme.palette.red['100'],
+                hover: theme.palette.red['200'],
+                active: theme.palette.red['100'],
+                focus: theme.palette.red['100'],
+            },
+            success: {
+                default: theme.palette.green['100'],
+                hover: theme.palette.green['200'],
+                active: theme.palette.green['100'],
+                focus: theme.palette.green['100'],
+            },
+            primary: {
+                default: theme.palette.grey['100'],
+                hover: theme.palette.grey['200'],
+                active: theme.palette.primary['100'],
+                focus: theme.palette.grey['100'],
+            },
+            warning: {
+                default: theme.palette.yellow['100'],
+                hover: theme.palette.yellow['200'],
+                active: theme.palette.yellow['100'],
+                focus: theme.palette.yellow['100'],
+            },
+        },
+        contained: {
+            error: {
+                default: theme.palette.red['800'],
+                hover: theme.palette.red['700'],
+                active: theme.palette.red['900'],
+                focus: theme.palette.red['800'],
+            },
+            success: {
+                default: theme.palette.green['800'],
+                hover: theme.palette.green['700'],
+                active: theme.palette.green['900'],
+                focus: theme.palette.green['800'],
+            },
+            primary: {
+                default: theme.palette.primary['800'],
+                hover: theme.palette.primary['700'],
+                active: theme.palette.primary['900'],
+                focus: theme.palette.primary['800'],
+            },
+            warning: {
+                default: theme.palette.yellow['800'],
+                hover: theme.palette.yellow['700'],
+                active: theme.palette.yellow['900'],
+                focus: theme.palette.yellow['800'],
+            },
+        },
+        text: {
+            default: 'transparent',
+            hover: theme.palette.grey['200'],
+            active: theme.palette.primary['100'],
+            focus: 'transparent',
+        },
+        link: 'transparent',
+    };
+    if (customVariant === ButtonVariants.LIGHT && customColor) {
+        return bgColorVariants.light[customColor][buttonState];
+    }
+    if (customVariant === ButtonVariants.CONTAINED && customColor) {
+        return bgColorVariants.contained[customColor][buttonState];
+    }
+    if (customVariant === ButtonVariants.TEXT) {
+        return bgColorVariants.text[buttonState];
+    }
+    return bgColorVariants.link;
+};
+export var getButtonHeight = function (_a) {
+    var size = _a.size;
+    if (size === ButtonSizes.LARGE)
+        return '40px';
+    return '32px';
+};
+export var getButtonPadding = function (_a) {
+    var size = _a.size, theme = _a.theme;
+    if (size === ButtonSizes.LARGE)
+        return theme.spacing(2, 4, 2, 4);
+    return theme.spacing(1, 3, 1, 3);
+};
+export var getDisabledBgColor = function (_a) {
+    var theme = _a.theme, customVariant = _a.customVariant;
+    if (customVariant === ButtonVariants.LINK ||
+        customVariant === ButtonVariants.TEXT)
+        return 'transparent';
+    return theme.palette.grey['100'];
+};
+export var StyledButtonBase = styled(ButtonUnstyled, {
+    shouldForwardProp: function (prop) {
+        return prop !== 'customColor' && prop !== 'customVariant';
+    },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  font-family: Ubuntu, serif;\n  padding: ", ";\n  height: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n    outline: 2px solid ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    cursor: unset;\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  border: none;\n  font-family: Ubuntu, serif;\n  padding: ", ";\n  height: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n    outline: 2px solid ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    cursor: unset;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), getButtonPadding, getButtonHeight, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.small;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.typography.button.fontSize;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.typography.button.fontWeight;
+}, function (props) {
+    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.DEFAULT }));
+}, function (props) {
+    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.DEFAULT }));
+}, function (props) {
+    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.HOVER }));
+}, function (props) {
+    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.HOVER }));
+}, function (props) {
+    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.FOCUS }));
+}, function (props) {
+    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.FOCUS }));
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.primary['400'];
+}, function (props) {
+    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.ACTIVE }));
+}, function (props) {
+    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.ACTIVE }));
+}, buttonUnstyledClasses.disabled, getDisabledBgColor, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey['500'];
+});
+var templateObject_1;

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

@@ -0,0 +1,11 @@
+import { ButtonUnstyledProps } from '@mui/base/ButtonUnstyled';
+import { ButtonColors, ButtonSizes, ButtonStates, ButtonVariants } from './constants';
+export declare type ButtonColor = `${ButtonColors}`;
+export declare type ButtonVariant = `${ButtonVariants}`;
+export declare type ButtonSize = `${ButtonSizes}`;
+export declare type ButtonState = `${ButtonStates}`;
+export declare type BaseButtonProps = Omit<ButtonUnstyledProps, 'color' | 'variant' | 'size'> & {
+    color?: ButtonColor;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};

package/esm/src/ButtonBase/types.js

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

package/esm/src/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CheckboxProps } from './types';
+export declare const Checkbox: ({ icon, checkedIcon, indeterminateIcon, ...props }: CheckboxProps) => JSX.Element;