@astral/ui 0.21.0 → 0.23.0-alpha.0

package/Button/Button.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { ButtonProps } from './types';
-export declare const Button: ({ children, startIcon, endIcon, loading, ...props }: ButtonProps) => JSX.Element;
+export declare const Button: import("react").ForwardRefExoticComponent<Pick<ButtonProps, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "disabled" | "sx" | "variant" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "name" | "type" | "href" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "loading" | "size" | "fullWidth" | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon" | "loadingIndicator" | "loadingPosition"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/Button/Button.js

@@ -10,24 +10,13 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var lab_1 = require("@mui/lab");
 var CircularProgress_1 = require("../CircularProgress");
-var styled_1 = require("./styled");
-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 ((0, jsx_runtime_1.jsxs)(styled_1.StyledButton, __assign({ loading: loading }, props, { children: [(0, jsx_runtime_1.jsx)("span", { children: startIcon }, void 0), children, loading && (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, {}, void 0), (0, jsx_runtime_1.jsx)("span", { children: endIcon }, void 0)] }), void 0));
-};
-exports.Button = Button;
+exports.Button = (0, react_1.forwardRef)(function (props, ref) {
+    return ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ ref: ref }, props, { loadingIndicator: (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { size: "small" }, void 0) }), void 0));
+});
+exports.default = exports.Button;

package/Button/types.d.ts

@@ -1,7 +1,19 @@
-import React from 'react';
-import { BaseButtonProps } from '../ButtonBase';
-export declare type ButtonProps = BaseButtonProps & {
-    loading?: boolean;
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
+import { LoadingButtonProps } from '@mui/lab';
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        contained: true;
+        light: true;
+        text: true;
+        link: true;
+    }
+    interface ButtonPropsColorVariantOverrides {
+        primary: true;
+        success: true;
+        warning: true;
+        error: true;
+    }
+}
+export declare type ButtonProps = Omit<LoadingButtonProps, 'variant' | 'color'> & {
+    variant?: 'contained' | 'light' | 'text' | 'link';
+    color?: 'primary' | 'success' | 'warning' | 'error';
 };

package/ButtonBase/styled.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
 import { Theme } from '../theme';
 import { BaseButtonProps, ButtonColor, ButtonSize, ButtonState, ButtonVariant } from './types';
-declare type StyledButtonBaseThemeProps = {
+export declare type StyledButtonBaseProps = Omit<BaseButtonProps, 'color' | 'variant'> & {
+    customColor?: ButtonColor;
+    customVariant?: ButtonVariant;
+};
+export declare type StyledButtonBaseThemeProps = {
     customColor?: ButtonColor;
     customVariant?: ButtonVariant;
     size?: ButtonSize;
@@ -24,4 +28,3 @@ export declare const StyledButtonBase: import("@emotion/styled").StyledComponent
     customColor?: "error" | "primary" | "success" | "warning" | undefined;
     customVariant?: "link" | "text" | "light" | "contained" | undefined;
 }, {}, {}>;
-export {};

package/ButtonBase/styled.js

@@ -45,13 +45,13 @@ var getColor = function (_a) {
             error: {
                 default: theme.palette.red['900'],
                 hover: theme.palette.red['900'],
-                active: theme.palette.red['900'],
+                active: theme.palette.red['800'],
                 focus: theme.palette.red['900'],
             },
             success: {
                 default: theme.palette.green['900'],
                 hover: theme.palette.green['900'],
-                active: theme.palette.green['900'],
+                active: theme.palette.green['800'],
                 focus: theme.palette.green['900'],
             },
             primary: {
@@ -63,7 +63,7 @@ var getColor = function (_a) {
             warning: {
                 default: theme.palette.yellow['900'],
                 hover: theme.palette.yellow['900'],
-                active: theme.palette.yellow['900'],
+                active: theme.palette.yellow['800'],
                 focus: theme.palette.yellow['900'],
             },
         },
@@ -185,8 +185,9 @@ exports.getButtonPadding = getButtonPadding;
 var getDisabledBgColor = function (_a) {
     var theme = _a.theme, customVariant = _a.customVariant;
     if (customVariant === constants_1.ButtonVariants.LINK ||
-        customVariant === constants_1.ButtonVariants.TEXT)
+        customVariant === constants_1.ButtonVariants.TEXT) {
         return 'transparent';
+    }
     return theme.palette.grey['100'];
 };
 exports.getDisabledBgColor = getDisabledBgColor;
@@ -194,7 +195,7 @@ exports.StyledButtonBase = (0, styles_1.styled)(ButtonUnstyled_1.default, {
     shouldForwardProp: function (prop) {
         return prop !== 'customColor' && prop !== 'customVariant';
     },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ", ";\n  padding: ", ";\n\n  color: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-family: Ubuntu, serif;\n\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:focus {\n    color: ", ";\n\n    background-color: ", ";\n    outline: 2px solid ", ";\n  }\n\n  &:active {\n    color: ", ";\n\n    background-color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    color: ", ";\n\n    background-color: ", ";\n    cursor: unset;\n  }\n"], ["\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ", ";\n  padding: ", ";\n\n  color: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-family: Ubuntu, serif;\n\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:focus {\n    color: ", ";\n\n    background-color: ", ";\n    outline: 2px solid ", ";\n  }\n\n  &:active {\n    color: ", ";\n\n    background-color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    color: ", ";\n\n    background-color: ", ";\n    cursor: unset;\n  }\n"])), exports.getButtonHeight, exports.getButtonPadding, function (props) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ", ";\n  padding: ", ";\n\n  color: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-family: Ubuntu, serif;\n\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:focus {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n\n    background-color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    color: ", ";\n\n    background-color: ", ";\n    cursor: unset;\n  }\n\n  &.", " {\n    outline: 2px solid ", ";\n  }\n"], ["\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ", ";\n  padding: ", ";\n\n  color: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-family: Ubuntu, serif;\n\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:focus {\n    color: ", ";\n\n    background-color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n\n    background-color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    color: ", ";\n\n    background-color: ", ";\n    cursor: unset;\n  }\n\n  &.", " {\n    outline: 2px solid ", ";\n  }\n"])), exports.getButtonHeight, exports.getButtonPadding, function (props) {
     return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.DEFAULT }));
 }, function (_a) {
     var theme = _a.theme;
@@ -215,9 +216,6 @@ exports.StyledButtonBase = (0, styles_1.styled)(ButtonUnstyled_1.default, {
     return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.FOCUS }));
 }, function (props) {
     return (0, exports.getBgColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.FOCUS }));
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.primary['400'];
 }, function (props) {
     return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.ACTIVE }));
 }, function (props) {
@@ -225,5 +223,8 @@ exports.StyledButtonBase = (0, styles_1.styled)(ButtonUnstyled_1.default, {
 }, ButtonUnstyled_1.buttonUnstyledClasses.disabled, function (_a) {
     var theme = _a.theme;
     return theme.palette.grey['500'];
-}, exports.getDisabledBgColor);
+}, exports.getDisabledBgColor, ButtonUnstyled_1.buttonUnstyledClasses.focusVisible, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.primary['400'];
+});
 var templateObject_1;

package/CircularProgress/CircularProgress.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { CircularProgressProps } from './types';
-export declare const CircularProgress: ({ color, size, ...props }: CircularProgressProps) => JSX.Element;
+export declare const CircularProgress: import("react").ForwardRefExoticComponent<Pick<CircularProgressProps, "className" | "style" | "classes" | "sx" | "variant" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "value" | "size" | "disableShrink" | "thickness"> & import("react").RefAttributes<HTMLElement>>;
 export default CircularProgress;

package/CircularProgress/CircularProgress.js

@@ -21,14 +21,19 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CircularProgress = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var constants_1 = require("./constants");
-var styled_1 = require("./styled");
-var CircularProgress = function (_a) {
-    var color = _a.color, size = _a.size, props = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledCircularProgress, __assign({}, props, { size: size === constants_1.CircularProgressSizes.SMALL ? 16 : 24, customColor: color }), void 0));
-};
-exports.CircularProgress = CircularProgress;
+var react_1 = require("react");
+var CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+exports.CircularProgress = (0, react_1.forwardRef)(function (props, ref) {
+    var sizeProp = props.size, color = props.color, restProps = __rest(props, ["size", "color"]);
+    var size = (0, react_1.useMemo)(function () {
+        return sizeProp === 'small' ? 16 : 24;
+    }, [sizeProp]);
+    return ((0, jsx_runtime_1.jsx)(CircularProgress_1.default, __assign({ ref: ref }, restProps, { size: size, color: "inherit", "data-color": color }), void 0));
+});
 exports.default = exports.CircularProgress;

package/CircularProgress/CircularProgressStory.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { CircularProgressProps } from '../CircularProgress';
+export declare type CircularProgressStoryProps = CircularProgressProps;
+export declare const CircularProgressStory: FC<CircularProgressStoryProps>;
+export default CircularProgressStory;

package/CircularProgress/CircularProgressStory.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgressStory = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var CircularProgress_1 = require("../CircularProgress");
+var CircularProgressStory = function (props) {
+    var size = props.size, color = props.color;
+    return (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { size: size, color: color }, void 0);
+};
+exports.CircularProgressStory = CircularProgressStory;
+exports.default = exports.CircularProgressStory;

package/CircularProgress/CircularProgressStoryTemplate.d.ts

@@ -0,0 +1,4 @@
+import { ComponentStory } from '@storybook/react';
+import { CircularProgressStory } from './CircularProgressStory';
+export declare const CircularProgressStoryTemplate: ComponentStory<typeof CircularProgressStory>;
+export default CircularProgressStoryTemplate;

package/CircularProgress/CircularProgressStoryTemplate.js

@@ -0,0 +1,21 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgressStoryTemplate = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var CircularProgressStory_1 = require("./CircularProgressStory");
+var CircularProgressStoryTemplate = function (args) {
+    return (0, jsx_runtime_1.jsx)(CircularProgressStory_1.CircularProgressStory, __assign({}, args), void 0);
+};
+exports.CircularProgressStoryTemplate = CircularProgressStoryTemplate;
+exports.default = exports.CircularProgressStoryTemplate;

package/CircularProgress/types.d.ts

@@ -1,8 +1,11 @@
 import { CircularProgressProps as MuiCircularProgressProps } from '@mui/material';
-import { CircularProgressColors, CircularProgressSizes } from './constants';
-export declare type CircularProgressColor = `${CircularProgressColors}`;
-export declare type CircularProgressSize = `${CircularProgressSizes}`;
+declare module '@mui/material/CircularProgress' {
+    interface CircularProgressPropsColorOverrides {
+        primary: true;
+        inverted: true;
+    }
+}
 export declare type CircularProgressProps = Omit<MuiCircularProgressProps, 'color' | 'size'> & {
-    color?: CircularProgressColor;
-    size?: CircularProgressSize;
+    color?: 'primary' | 'inverted';
+    size?: 'small' | 'medium';
 };

package/DataGrid/DataGrid.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DataGridProps } from './types';
+export declare function DataGrid<T>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onSelectRow, Footer, loading, onSort, keyId, }: DataGridProps<T>): JSX.Element;

package/DataGrid/DataGrid.js

@@ -0,0 +1,64 @@
+"use strict";
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGrid = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Table_1 = require("../Table");
+var DataGridHead_1 = require("./DataGridHead");
+var DataGridBody_1 = require("./DataGridBody");
+var DataGridLoader_1 = __importDefault(require("./DataGridLoader/DataGridLoader"));
+var styled_1 = require("./styled");
+function DataGrid(_a) {
+    var columns = _a.columns, _b = _a.rows, rows = _b === void 0 ? [] : _b, _c = _a.selectedRows, selectedRows = _c === void 0 ? [] : _c, _d = _a.sorting, sorting = _d === void 0 ? [] : _d, maxHeight = _a.maxHeight, _e = _a.minDisplayRows, minDisplayRows = _e === void 0 ? 10 : _e, onSelectRow = _a.onSelectRow, Footer = _a.Footer, loading = _a.loading, onSort = _a.onSort, keyId = _a.keyId;
+    var selectable = Boolean(onSelectRow);
+    var handleSelectAllRows = function (event) {
+        if (!onSelectRow)
+            return;
+        if (event.target.checked) {
+            var mergedSelectedRows = __spreadArray(__spreadArray([], selectedRows, true), rows, true);
+            return onSelectRow(mergedSelectedRows);
+        }
+        var filteredRows = selectedRows.filter(function (selectedRow) { return !rows.find(function (row) { return row[keyId] === selectedRow[keyId]; }); });
+        onSelectRow(filteredRows);
+    };
+    var handleSelectRow = (0, react_1.useCallback)(function (row) {
+        return function (event) {
+            if (!onSelectRow)
+                return;
+            if (event.target.checked) {
+                return onSelectRow(__spreadArray(__spreadArray([], selectedRows, true), [row], false));
+            }
+            return onSelectRow(selectedRows.filter(function (selectedRow) { return selectedRow[keyId] !== row[keyId]; }));
+        };
+    }, [selectedRows, onSelectRow]);
+    var uncheckedRowsCount = (0, react_1.useMemo)(function () {
+        return rows.filter(function (row) {
+            return !selectedRows.find(function (selectedRow) { return selectedRow[keyId] === row[keyId]; });
+        }).length;
+    }, [rows, selectedRows, keyId]);
+    return ((0, jsx_runtime_1.jsxs)(styled_1.DataGridContainer, { children: [(0, jsx_runtime_1.jsxs)(styled_1.StyledTableContainer, __assign({ maxHeight: maxHeight }, { children: [(0, jsx_runtime_1.jsxs)(Table_1.Table, __assign({ stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(DataGridHead_1.DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }, void 0), (0, jsx_runtime_1.jsx)(DataGridBody_1.DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(DataGridLoader_1.default, { loading: loading }, void 0)] }), void 0), Footer] }, void 0));
+}
+exports.DataGrid = DataGrid;

package/DataGrid/DataGridBody/DataGridBody.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DataGridBodyProps } from './types';
+export declare function DataGridBody<T>({ rows, columns, selectable, onSelectRow, selectedRows, minDisplayRows, keyId, }: DataGridBodyProps<T>): JSX.Element;

package/DataGrid/DataGridBody/DataGridBody.js

@@ -0,0 +1,39 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridBody = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Table_1 = require("../../Table");
+var DataGridCell_1 = require("../DataGridCell");
+var Checkbox_1 = require("../../Checkbox");
+var styled_1 = require("./styled");
+function DataGridBody(_a) {
+    var rows = _a.rows, columns = _a.columns, selectable = _a.selectable, onSelectRow = _a.onSelectRow, _b = _a.selectedRows, selectedRows = _b === void 0 ? [] : _b, minDisplayRows = _a.minDisplayRows, keyId = _a.keyId;
+    var renderCells = (0, react_1.useCallback)(function (row, rowId) {
+        return columns.map(function (cell, index) {
+            var cellId = "".concat(rowId, "-").concat(index);
+            return (0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, { row: row, cell: cell }, cellId);
+        });
+    }, [columns]);
+    var renderedRows = (0, react_1.useMemo)(function () {
+        return rows.map(function (row) {
+            var rowId = row[keyId];
+            var checked = selectable &&
+                Boolean(selectedRows.find(function (selectedRow) { return selectedRow[keyId] === rowId; }));
+            return ((0, jsx_runtime_1.jsxs)(Table_1.TableRow, { children: [selectable && ((0, jsx_runtime_1.jsx)(Table_1.TableCell, __assign({ padding: "checkbox" }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: checked, onChange: onSelectRow(row) }, void 0) }), void 0)), renderCells(row, rowId)] }, rowId));
+        });
+    }, [rows, keyId, selectable, selectedRows, onSelectRow, columns]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledTableBody, __assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: renderedRows }), void 0));
+}
+exports.DataGridBody = DataGridBody;

package/DataGrid/DataGridBody/index.d.ts

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

package/DataGrid/DataGridBody/index.js

@@ -0,0 +1,13 @@
+"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("./DataGridBody"), exports);

package/DataGrid/DataGridBody/styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const StyledTableBody: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TableBodyClasses> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "key" | keyof import("react").HTMLAttributes<HTMLTableSectionElement>> & {
+    ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    empty: boolean;
+    minDisplayRows: number;
+}, {}, {}>;

package/DataGrid/DataGridBody/styled.js

@@ -0,0 +1,17 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTableBody = void 0;
+var styles_1 = require("../../styles");
+var Table_1 = require("../../Table");
+var TABLE_ROW_HEIGHT = 44;
+exports.StyledTableBody = (0, styles_1.styled)(Table_1.TableBody, {
+    shouldForwardProp: function (prop) { return prop !== 'empty' && prop !== 'minDisplayRows'; },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n"], ["\n  height: ", ";\n"])), function (_a) {
+    var empty = _a.empty, minDisplayRows = _a.minDisplayRows;
+    return empty ? "".concat(TABLE_ROW_HEIGHT * minDisplayRows, "px") : 'auto';
+});
+var templateObject_1;

package/DataGrid/DataGridBody/types.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent } from 'react';
+import { DataGridColumns, DataGridRow } from '../types';
+export declare type DataGridBodyProps<T = DataGridRow> = {
+    columns: DataGridColumns<T>[];
+    keyId: keyof DataGridRow;
+    selectable?: boolean;
+    selectedRows?: Array<T>;
+    rows: T[];
+    onSelectRow: (row: T) => (event: ChangeEvent<HTMLInputElement>) => void;
+    minDisplayRows: number;
+};

package/DataGrid/DataGridBody/types.js

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

package/DataGrid/DataGridCell/DataGridCell.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CellProps } from './types';
+export declare function DataGridCell<T>({ row, cell: { field, renderCell, format, align }, }: CellProps<T>): JSX.Element;

package/DataGrid/DataGridCell/DataGridCell.js

@@ -0,0 +1,29 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridCell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Table_1 = require("../../Table");
+var Typography_1 = require("../../Typography");
+function DataGridCell(_a) {
+    var row = _a.row, _b = _a.cell, field = _b.field, renderCell = _b.renderCell, format = _b.format, _c = _b.align, align = _c === void 0 ? 'left' : _c;
+    var formattedValue = (0, react_1.useMemo)(function () {
+        if (format) {
+            return format(row);
+        }
+        return row[field];
+    }, [field, format, row]);
+    return ((0, jsx_runtime_1.jsxs)(Table_1.TableCell, __assign({ align: align }, { children: [renderCell && renderCell(row), !renderCell && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { children: formattedValue }, void 0)] }), void 0));
+}
+exports.DataGridCell = DataGridCell;

package/DataGrid/DataGridCell/index.d.ts

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

package/DataGrid/DataGridCell/index.js

@@ -0,0 +1,13 @@
+"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("./DataGridCell"), exports);

package/DataGrid/DataGridCell/types.d.ts

@@ -0,0 +1,5 @@
+import { DataGridColumns } from '../types';
+export declare type CellProps<T> = {
+    row: T;
+    cell: DataGridColumns<T>;
+};

package/DataGrid/DataGridCell/types.js

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

package/DataGrid/DataGridHead/DataGridHead.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DataGridHeadProps } from './types';
+export declare function DataGridHead<T>({ columns, selectable, onSelectAllRows, rowsCount, onSort, sorting, uncheckedRowsCount, }: DataGridHeadProps<T>): JSX.Element;

package/DataGrid/DataGridHead/DataGridHead.js

@@ -0,0 +1,71 @@
+"use strict";
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridHead = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var TableHead_1 = require("../../Table/TableHead");
+var Table_1 = require("../../Table");
+var Checkbox_1 = require("../../Checkbox");
+var constants_1 = require("../constants");
+var DataGridHeadColumn_1 = require("../DataGridHeadColumn");
+function DataGridHead(_a) {
+    var columns = _a.columns, selectable = _a.selectable, onSelectAllRows = _a.onSelectAllRows, rowsCount = _a.rowsCount, onSort = _a.onSort, _b = _a.sorting, sorting = _b === void 0 ? [] : _b, uncheckedRowsCount = _a.uncheckedRowsCount;
+    var checked = (0, react_1.useMemo)(function () { return !Boolean(uncheckedRowsCount) && rowsCount > 0; }, [uncheckedRowsCount, rowsCount]);
+    var indeterminate = (0, react_1.useMemo)(function () { return uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount; }, [uncheckedRowsCount, rowsCount]);
+    var handleSort = (0, react_1.useCallback)(function (field, sortable) { return function () {
+        if (sortable) {
+            var currentSort = sorting.find(function (_a) {
+                var fieldId = _a.fieldId;
+                return fieldId === field;
+            });
+            // если для выбранного столбца текущая сортировка ASC - меняем на DESC
+            if (currentSort && currentSort.sort === constants_1.SortStates.ASC) {
+                var newSorting = __spreadArray(__spreadArray([], sorting.filter(function (_a) {
+                    var fieldId = _a.fieldId;
+                    return fieldId !== field;
+                }), true), [
+                    { fieldId: field, sort: constants_1.SortStates.DESC },
+                ], false);
+                return onSort(newSorting);
+                // если для выбранного столбца текущая сортировка DESC - убираем сортировку
+            }
+            else if (currentSort && currentSort.sort === constants_1.SortStates.DESC) {
+                var newSorting = sorting.filter(function (_a) {
+                    var fieldId = _a.fieldId;
+                    return fieldId !== field;
+                });
+                return onSort(newSorting);
+            }
+            // если для выбранного столбца нет сортировки - добавляем сортировку ASC
+            onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: constants_1.SortStates.ASC }], false));
+        }
+    }; }, [sorting]);
+    var renderColumns = (0, react_1.useMemo)(function () {
+        return columns.map(function (_a) {
+            var field = _a.field, label = _a.label, sortable = _a.sortable, align = _a.align, renderCell = _a.renderCell;
+            return ((0, jsx_runtime_1.jsx)(DataGridHeadColumn_1.DataGridHeadColumn, { sorting: sorting, renderCell: renderCell, field: field, onSort: handleSort, label: label, sortable: sortable, align: align }, void 0));
+        });
+    }, [columns, handleSort, sorting]);
+    return ((0, jsx_runtime_1.jsx)(TableHead_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(Table_1.TableRow, { children: [selectable && ((0, jsx_runtime_1.jsx)(Table_1.TableCell, __assign({ padding: "checkbox" }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: checked, indeterminate: indeterminate, onChange: onSelectAllRows }, void 0) }), void 0)), renderColumns] }, void 0) }, void 0));
+}
+exports.DataGridHead = DataGridHead;

package/DataGrid/DataGridHead/index.d.ts

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