@nethru/ui 2.0.1 → 2.0.3

package/base/Radio.js

@@ -0,0 +1,22 @@
+import { FormControlLabel } from "@mui/material";
+import MuiRadio from "@mui/material/Radio";
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Radio = /*#__PURE__*/forwardRef(({
+  value,
+  formControlLabelProps,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(FormControlLabel, {
+    ref: ref,
+    label: children,
+    value: value,
+    control: /*#__PURE__*/_jsx(MuiRadio, {
+      ...props,
+      color: "info"
+    }),
+    ...formControlLabelProps
+  });
+});
+export default Radio;

package/base/Select.js

@@ -6,6 +6,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const Select = /*#__PURE__*/forwardRef(({
   label,
   helperText,
+  size,
   children,
   formControlProps,
   ...props
@@ -16,6 +17,7 @@ const Select = /*#__PURE__*/forwardRef(({
   }), [label, formControlProps]);
   return /*#__PURE__*/_jsxs(FormControl, {
     ref: ref,
+    size: size,
     disabled: props.disabled,
     error: props.error,
     sx: styles,

package/base/frame/sidebar/Sidebar.js

@@ -21,7 +21,7 @@ const Sidebar = /*#__PURE__*/forwardRef((props, ref) => {
   const location = useLocation();
   const navigate = useNavigate();
   const handleClick = useCallback(item => {
-    navigate(item.href);
+    navigate(item.href instanceof Array ? item.href[0] : item.href);
   }, [navigate]);
   const handleToggle = useCallback(_ => {
     dispatch({

package/base/frame/sidebar/css/sidebar.module.css

@@ -38,7 +38,7 @@
 
 .toggler {
     position: fixed;
-    top: calc(var(--gnb-height) + 28px);
+    bottom: 28px;
     width: 32px;
     height: 32px;
     background-color: var(--gnb-background-color);

package/base/index.js

@@ -21,6 +21,7 @@ export { default as Frame } from "./frame/Frame";
 export { default as MainHeader } from "./MainHeader";
 export { default as MenuItem } from "./MenuItem";
 export { default as PropertyTable } from "./PropertyTable";
+export { default as Radio } from "./Radio";
 export { default as SearchableSelect } from "./SearchableSelect";
 export { default as SearchTextField } from "./SearchTextField";
 export { default as Sidebar } from "./frame/sidebar/Sidebar";
@@ -36,7 +37,6 @@ export { default as AccordionDetails } from "./deprecated/AccordionDetails";
 export { default as AccordionSummary } from "./deprecated/AccordionSummary";
 export { default as AppendableFormList } from "./deprecated/AppendableFormList";
 export { default as AvatarDropdown } from "./deprecated/AvatarDropdown";
-export { default as Button } from "./deprecated/Button";
 export { default as CircularProgress } from "./deprecated/CircularProgress";
 export { default as FormLabel } from "./deprecated/FormLabel";
 export { default as GroupSelect } from "./deprecated/GroupSelect";
@@ -45,9 +45,7 @@ export { default as ListItemDivider } from "./deprecated/ListItemDivider";
 export { default as ListItemGrid } from "./deprecated/ListItemGrid";
 export { default as ListItemText } from "./deprecated/ListItemText";
 export { default as ReferenceChipList } from "./deprecated/ReferenceChipList";
-export { default as Section } from "./deprecated/Section";
 export { default as ShadowedSection } from "./deprecated/ShadowedSection";
 export { default as StatusChip } from "./deprecated/StatusChip";
 export { default as TabbedSection } from "./deprecated/TabbedSection";
-export { default as Tabs } from "./deprecated/Tabs";
-export { default as TextField } from "./deprecated/TextField";
+export { default as Tabs } from "./deprecated/Tabs";

package/base/styles/createTheme.js

@@ -8,6 +8,7 @@ import * as button from "./mui/button";
 import * as toggleButton from "./mui/toggleButton";
 import * as iconButton from "./mui/iconButton";
 import * as checkbox from "./mui/checkbox";
+import * as radio from "./mui/radio";
 import * as switcher from "./mui/switch";
 import * as select from "./mui/select";
 import * as autocomplete from "./mui/autocomplete";
@@ -54,6 +55,7 @@ export default function createTheme() {
       MuiIcon: icon.styles,
       MuiSvgIcon: icon.styles,
       MuiCheckbox: checkbox.styles,
+      MuiRadio: radio.styles,
       MuiSwitch: switcher.styles,
       MuiSelect: select.styles,
       MuiAutocomplete: autocomplete.styles,

package/base/styles/mui/button.js

@@ -249,14 +249,14 @@ export const styles = {
     }) => ({
       minWidth: 60,
       height: ownerState.color === 'crud' ? 26 : 36,
-      padding: ownerState.color === 'crud' ? '0px 2px' : '8px 12px',
+      padding: ownerState.color === 'crud' ? '0px 2px' : '8px 20px',
       fontSize: typography.bodyMdSemibold.fontSize,
       fontWeight: typography.bodyMdSemibold.fontWeight
     }),
     sizeSmall: {
       minWidth: '50px',
       height: '26px',
-      padding: '8px 8px',
+      padding: '8px 12px',
       fontSize: typography.bodySmSemibold.fontSize,
       fontWeight: typography.bodySmSemibold.fontWeight
     },

package/base/styles/mui/dataGrid.js

@@ -70,7 +70,7 @@ export const styles = {
     cell: ({
       ownerState
     }) => ({
-      minHeight: '40px !important',
+      minHeight: '45px !important',
       paddingTop: 10,
       paddingBottom: 10,
       '&.MuiTypography-bold': {

package/base/styles/mui/formControl.js

@@ -1,8 +1,13 @@
 import typography from "../typography";
 export const styles = {
   styleOverrides: {
-    root: {
-      fontFamily: typography.fontFamily
-    }
+    root: ({
+      ownerState
+    }) => ({
+      fontFamily: typography.fontFamily,
+      '.MuiInputBase-root': {
+        height: ownerState.size === 'small' ? 26 : undefined
+      }
+    })
   }
 };

package/base/styles/mui/formControlLabel.js

@@ -1,9 +1,18 @@
 import typography from "../typography";
+import { grey } from "../../colors";
 export const styles = {
   styleOverrides: {
     root: {
       fontFamily: typography.fontFamily,
-      ...typography.bodyMdMedium
+      ...typography.bodyMdMedium,
+      '.Mui-checked.Mui-disabled + .MuiFormControlLabel-label': {
+        color: grey[700]
+      }
+    },
+    label: {
+      '&.Mui-disabled': {
+        color: grey[400]
+      }
     }
   }
 };

package/base/styles/mui/radio.js

@@ -0,0 +1,30 @@
+import { grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: ({
+      ownerState,
+      theme
+    }) => ({
+      ':hover, &.Mui-focusVisible': {
+        backgroundColor: grey[5]
+      },
+      '&:active': {
+        backgroundColor: grey[10]
+      },
+      '& svg': {
+        fill: grey[700],
+        width: 18,
+        height: 18
+      },
+      '&.Mui-checked svg': {
+        fill: theme.palette.info.main
+      },
+      '&.Mui-disabled svg': {
+        fill: grey[400]
+      },
+      '&.Mui-disabled.Mui-checked svg': {
+        fill: grey[700]
+      }
+    })
+  }
+};

package/base/styles/mui/tabs.js

@@ -4,7 +4,7 @@ export const styles = {
       minHeight: 42
     },
     flexContainer: {
-      gap: 16
+      gap: 24
     },
     flexContainerVertical: ({
       ownerState,

package/base/styles/mui/tooltip.js

@@ -1,6 +1,6 @@
 import typography from "../typography";
 import shadow from "../shadow";
-import { grey } from "../../colors";
+const backgroundColor = 'rgba(101, 101, 101, 0.9)';
 export const styles = {
   defaultProps: {
     arrow: true
@@ -11,12 +11,12 @@ export const styles = {
       ...typography.bodySmMedium
     },
     tooltip: {
-      color: grey[900],
-      backgroundColor: '#fff',
+      color: '#fff',
+      backgroundColor: backgroundColor,
       boxShadow: shadow[4]
     },
     arrow: {
-      color: '#fff'
+      color: backgroundColor
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "main": "base/index.js",
   "files": [
     "/base"

package/base/deprecated/Button.js

@@ -1,61 +0,0 @@
-import { useMemo } from "react";
-import MuiButton from "@mui/material/Button";
-import { Box, CircularProgress, IconButton } from "@mui/material";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Button({
-  label,
-  icon,
-  iconPlacement = 'start',
-  iconSize = '20px',
-  iconProps = {},
-  progressProps = {},
-  loading = false,
-  ...props
-}) {
-  const iconComponent = useMemo(() => {
-    return icon ? /*#__PURE__*/_jsx(Box, {
-      component: icon,
-      sx: {
-        '&.MuiSvgIcon-root': {
-          fontSize: `${iconSize}!important`
-        }
-      },
-      ...iconProps
-    }) : null;
-  }, [icon, iconSize, iconProps]);
-  const startIcon = useMemo(() => {
-    return iconPlacement === 'start' ? iconComponent : null;
-  }, [iconComponent, iconPlacement]);
-  const endIcon = useMemo(() => {
-    return iconPlacement === 'end' ? iconComponent : null;
-  }, [iconComponent, iconPlacement]);
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      position: 'relative',
-      width: 'fit-content'
-    },
-    children: [label ? /*#__PURE__*/_jsx(MuiButton, {
-      startIcon: startIcon,
-      endIcon: endIcon,
-      disabled: loading,
-      ...props,
-      children: label
-    }) : /*#__PURE__*/_jsx(IconButton, {
-      disabled: loading,
-      ...props,
-      children: iconComponent
-    }), loading && /*#__PURE__*/_jsx(CircularProgress, {
-      size: 24,
-      thickness: 6,
-      sx: {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        marginTop: '-12px',
-        marginLeft: '-12px'
-      },
-      ...progressProps
-    })]
-  });
-}

package/base/deprecated/TextField.js

@@ -1,25 +0,0 @@
-import MuiTextField from "@mui/material/TextField";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export default function TextField({
-  width,
-  fontSize,
-  textAlign,
-  inputProps,
-  ...props
-}) {
-  const styles = {
-    fontSize: fontSize ? fontSize : 16,
-    textAlign: textAlign ? textAlign : 'left',
-    width
-  };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(MuiTextField, {
-      inputProps: {
-        ...inputProps,
-        style: styles
-      },
-      ...props
-    })
-  });
-}