@nethru/ui 2.0.1 → 2.0.2

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";

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/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.2",
   "main": "base/index.js",
   "files": [
     "/base"