@sinco/react 1.1.2-rc.89 → 1.1.2-rc.90

package/index.esm.js

@@ -8993,7 +8993,9 @@ var components = {
   MuiDialog: {
     styleOverrides: {
       root: {
-        boxShadow: " 0px 2px 1px -2px rgba(24, 39, 75, 0.20), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 1px 3px 0px rgba(24, 39, 75, 0.12)",
+        ".MuiPaper-elevation": {
+          boxShadow: "0px 1px 5px rgba(24, 39, 75, 0.12), 0px 2px 2px rgba(24, 39, 75, 0.14), 0px 3px 1px -2px rgba(24, 39, 75, 0.2) "
+        },
         ".MuiBackdrop-root": {
           backgroundColor: "#f0f0f099",
           backdropFilter: "blur(2px) !important"
@@ -9001,11 +9003,24 @@ var components = {
       }
     }
   },
+  MuiDialogTitle: {
+    styleOverrides: {
+      root: {
+        padding: "8px 16px !important"
+      }
+    }
+  },
   MuiDialogContent: {
     styleOverrides: {
       root: {
-        paddingTop: "8px !important",
-        paddingBottom: "8px"
+        padding: "8px 16px !important"
+      }
+    }
+  },
+  MuiDialogActions: {
+    styleOverrides: {
+      root: {
+        padding: "12px 16px !important"
       }
     }
   },
@@ -9083,7 +9098,7 @@ var components = {
         },
         ".MuiChip-deleteIconMedium": {
           height: 20,
-          widht: 20
+          width: 20
         }
       }
     }
@@ -9366,10 +9381,10 @@ var components = {
       },
       outlined: {
         "&.MuiInputLabel-outlined.MuiInputLabel-sizeSmall ": {
-          transform: "translate(14px,9px) scale(1)"
+          transform: "translate(14px,7px) scale(1)"
         },
         "&.MuiInputLabel-outlined ": {
-          transform: "translate(14px, 15px) scale(1)",
+          transform: "translate(14px, 14px) scale(1)",
           "&.MuiInputLabel-shrink": {
             transform: "translate(14px, -7px) scale(0.75)"
           }
@@ -14417,19 +14432,18 @@ var ProgressSinco = function ProgressSinco(_ref) {
   var timeProgress = time || 10;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
-    showToast = _useState2[0],
-    setShowToast = _useState2[1];
+    showProgress = _useState2[0],
+    setShowProgress = _useState2[1];
   var _useProgress = useProgress(timeProgress, lote),
     progress = _useProgress.progress;
   useEffect(function () {
     if (progress >= 100) {
-      setShowToast(false);
+      setShowProgress(false);
     }
   }, [progress]);
-  return React__default.createElement(React__default.Fragment, null, showToast && React__default.createElement(Stack$1, {
-    position: 'fixed',
+  return React__default.createElement(React__default.Fragment, null, showProgress && React__default.createElement(Stack$1, {
     zIndex: 1000,
-    height: '100%',
+    height: '100vh',
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center'
@@ -14497,49 +14511,48 @@ var CardRadio = function CardRadio(_ref) {
   var _ref$RadioPosition = _ref.RadioPosition,
     RadioPosition = _ref$RadioPosition === void 0 ? 'right' : _ref$RadioPosition,
     states = _ref.states,
-    slotMedia = _ref.slotMedia,
-    slotHeader = _ref.slotHeader,
-    slotContent = _ref.slotContent,
-    _ref$heightPosition = _ref.heightPosition,
-    heightPosition = _ref$heightPosition === void 0 ? 'top' : _ref$heightPosition,
+    media = _ref.media,
+    header = _ref.header,
+    content = _ref.content,
+    _ref$topRadioPosition = _ref.topRadioPosition,
+    topRadioPosition = _ref$topRadioPosition === void 0 ? false : _ref$topRadioPosition,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'primary' : _ref$color,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 180 : _ref$width;
-  var _useState = useState(states === 'active'),
+    value = _ref.value,
+    onChange = _ref.onChange,
+    checked = _ref.checked;
+  var _useState = useState(checked !== null && checked !== void 0 ? checked : false),
     _useState2 = _slicedToArray(_useState, 2),
     isChecked = _useState2[0],
     setIsChecked = _useState2[1];
   var _useState3 = useState(states === 'active'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isActive = _useState4[0],
-    setIsActive = _useState4[1];
+    _useState4 = _slicedToArray(_useState3, 1),
+    isActive = _useState4[0];
   var handleClick = function handleClick() {
     if (states === 'disabled') return;
     setIsChecked(!isChecked);
-    setIsActive(!isActive);
+    onChange(value);
   };
   var getBackgroundColor = function getBackgroundColor() {
     if (states === 'disabled') return '';
-    if (isActive) {
-      return color === 'primary' ? '#2063A014' : '#00BCD414';
-    } else {
-      return color === 'primary' ? '#2063A00A' : '#00BCD40A';
-    }
+    return isChecked ? color === 'primary' ? '#E4ECF4' : color === 'secondary' ? '#00BCD414' : '#FBFBFB' : 'transparent';
   };
   var getBorderColor = function getBorderColor() {
-    return isActive ? color === 'primary' ? '#2063A0' : '#00BCD4' : '#0000001F';
+    return isChecked ? color === 'primary' ? '#2063A080' : color === 'secondary' ? '#00BCD480' : '#00BCD4' : '#0000001F';
+  };
+  var getHoverColor = function getHoverColor() {
+    return color === 'primary' ? '#2063A00A' : color === 'secondary' ? '#00BCD40A' : 'FBFBFB';
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Stack$1, {
-    minWidth: 160,
-    width: width,
-    "data-testid": "card-radio",
+  useEffect(function () {
+    if (checked !== undefined) setIsChecked(checked);
+  }, [checked]);
+  return React__default.createElement(Stack$1, {
     padding: '8px 16px',
     borderRadius: 1,
+    border: "solid 1px ".concat(getBorderColor()),
     sx: {
-      border: isActive ? "solid 1px ".concat(getBorderColor()) : 'solid 1px #0000001F',
       '&:hover': {
-        backgroundColor: states === 'disabled' ? 'none' : getBackgroundColor()
+        backgroundColor: checked ? 'none' : states === 'disabled' ? 'inherit' : getHoverColor()
       },
       cursor: 'pointer'
     },
@@ -14553,19 +14566,19 @@ var CardRadio = function CardRadio(_ref) {
     flexDirection: 'row',
     padding: '0px 16px 0 0',
     gap: 1
-  }, slotMedia && React__default.createElement(Stack$1, null, slotMedia), React__default.createElement(Stack$1, null, slotHeader && React__default.createElement(Typography$1, {
+  }, media && React__default.createElement(Stack$1, null, media), React__default.createElement(Stack$1, null, header && React__default.createElement(Typography$1, {
     variant: "subtitle2",
     color: states === 'disabled' ? 'text.disabled' : isActive ? 'text.primary' : 'text.primary'
-  }, slotContent), slotContent && React__default.createElement(Typography$1, {
+  }, content), content && React__default.createElement(Typography$1, {
     variant: "caption",
     color: states === 'disabled' ? 'text.disabled' : isActive ? 'text.secondary' : 'text.secondary'
-  }, slotContent))), React__default.createElement(Stack$1, {
-    justifyContent: heightPosition === 'top' ? 'flex-start' : 'center'
+  }, content))), React__default.createElement(Stack$1, {
+    justifyContent: topRadioPosition === true ? 'flex-start' : 'center'
   }, React__default.createElement(Radio$1, {
     checked: isChecked,
     color: color,
     disabled: states === 'disabled'
-  })))));
+  }))));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sinco/react",
-  "version": "1.1.2-rc.89",
+  "version": "1.1.2-rc.90",
   "description": "package for the configuration of mui react sinco",
   "private": false,
   "license": "MIT",

package/src/lib/Components/CardRadio.d.ts

@@ -1,17 +1,18 @@
 import React, { FC } from 'react';
 type RadioPosition = 'left' | 'right';
 type RadioStates = 'active' | 'disabled';
-type RadioHeightPosition = 'top' | 'center';
-type RadioColors = 'primary' | 'secondary';
+type CardRadioColors = 'primary' | 'secondary';
 export interface CardRadioProps {
     RadioPosition?: RadioPosition;
-    heightPosition?: RadioHeightPosition;
+    topRadioPosition?: boolean;
     states?: RadioStates;
-    slotMedia?: React.ReactNode;
-    slotHeader?: React.ReactNode | string;
-    slotContent?: React.ReactNode | string;
-    color?: RadioColors;
-    width?: number;
+    media?: React.ReactNode;
+    header?: React.ReactNode | string;
+    content?: React.ReactNode | string;
+    color?: CardRadioColors;
+    onChange: (value: string | number) => void;
+    value: string | number;
+    checked?: boolean;
 }
 export declare const CardRadio: FC<CardRadioProps>;
 export {};