@nethru/ui 2.0.0 → 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/deprecated/Accordion.js

@@ -0,0 +1,45 @@
+import MuiAccordion from "@mui/material/Accordion";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  border: '1px solid #eaeaea',
+  boxShadow: 'none',
+  '.MuiAccordionDetails-root': {
+    pt: 0,
+    pl: 8,
+    pr: 8
+  },
+  '.MuiFormLabel-root.MuiInputLabel-root': {
+    fontSize: '14px'
+  },
+  '.MuiInputBase-input.MuiInput-input': {
+    color: '#555',
+    fontSize: '15px'
+  },
+  '.MuiTabs-root.MuiTabs-vertical': {
+    mt: 2
+  },
+  '.MuiTabs-root.MuiTabs-vertical .MuiButtonBase-root.MuiTab-root': {
+    fontSize: '14px',
+    minWidth: '32px',
+    maxWidth: '32px'
+  },
+  '.MuiButtonBase-root.MuiToggleButton-root': {
+    pt: '1px',
+    pb: '1px',
+    fontSize: '12px'
+  }
+};
+export default function Accordion({
+  children,
+  sx,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(MuiAccordion, {
+    sx: {
+      ...sx,
+      ...styles
+    },
+    ...props,
+    children: children
+  });
+}

package/base/deprecated/AccordionDetails.js

@@ -0,0 +1,19 @@
+import MuiAccordionDetails from "@mui/material/AccordionDetails";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  mb: 2
+};
+export default function AccordionDetails({
+  children,
+  sx,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(MuiAccordionDetails, {
+    sx: {
+      ...sx,
+      ...styles
+    },
+    ...props,
+    children: children
+  });
+}

package/base/deprecated/AccordionSummary.js

@@ -0,0 +1,35 @@
+import { Stack, Typography } from "@mui/material";
+import MuiAccordionSummary from "@mui/material/AccordionSummary";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function AccordionSummary({
+  title,
+  desc,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [title && /*#__PURE__*/_jsx(MuiAccordionSummary, {
+      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+      ...props,
+      children: /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "flex-end",
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          children: title
+        }), desc && /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          color: "#aaa",
+          children: desc
+        })]
+      })
+    }), !title && /*#__PURE__*/_jsx(MuiAccordionSummary, {
+      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+      ...props,
+      children: children
+    })]
+  });
+}

package/base/deprecated/AppendableFormList.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { Button, IconButton, Stack, Tooltip, Typography } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function AppendableFormList({
+  gap = 1,
+  forms,
+  renderForm,
+  addOns,
+  onAppend,
+  onRemove,
+  readOnly
+}) {
+  return /*#__PURE__*/_jsxs(Stack, {
+    gap: gap,
+    children: [/*#__PURE__*/_jsxs(_Fragment, {
+      children: [forms.map((form, index) => /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "end",
+        gap: 2,
+        children: [renderForm(form, index), !readOnly && /*#__PURE__*/_jsx(Tooltip, {
+          title: "\uC0AD\uC81C",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: _ => onRemove(index),
+            size: "small",
+            sx: {
+              ml: '-10px',
+              mb: '-5px'
+            },
+            children: /*#__PURE__*/_jsx(DeleteIcon, {
+              fontSize: "small"
+            })
+          })
+        })]
+      }, index)), forms.length === 0 && /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        sx: {
+          color: '#999'
+        },
+        children: "\uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4"
+      })]
+    }), !readOnly && /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        startIcon: /*#__PURE__*/_jsx(AddIcon, {}),
+        onClick: onAppend,
+        children: "\uCD94\uAC00"
+      }), addOns]
+    })]
+  });
+}

package/base/deprecated/AvatarDropdown.js

@@ -0,0 +1,80 @@
+import { useMemo, useState } from 'react';
+import { Avatar, Box, IconButton } from '@mui/material';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Divider from '@mui/material/Divider';
+import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
+import { red } from '@mui/material/colors';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function AvatarDropdown({
+  name,
+  color,
+  bgcolor,
+  children,
+  onProfileClick,
+  onLogoutClick,
+  ...props
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const firstLetter = useMemo(() => {
+    return name && name.length > 0 ? name[0].toUpperCase() : "?";
+  }, [name]);
+  const handleClick = event => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+  const styles = {
+    color: color ? color : '#fff',
+    bgcolor: bgcolor ? bgcolor : red[900],
+    width: 32,
+    height: 32,
+    fontSize: 16
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    ...props,
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      onClick: handleClick,
+      size: "small",
+      sx: {
+        ml: 2
+      },
+      children: /*#__PURE__*/_jsx(Avatar, {
+        sx: styles,
+        children: firstLetter
+      })
+    }), /*#__PURE__*/_jsxs(Menu, {
+      anchorEl: anchorEl,
+      open: open,
+      onClose: handleClose,
+      onClick: handleClose,
+      sx: {
+        '.MuiButtonBase-root.MuiMenuItem-root': {
+          fontSize: 14
+        }
+      },
+      children: [/*#__PURE__*/_jsxs(MenuItem, {
+        onClick: onProfileClick,
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(Avatar, {
+            sx: {
+              ...styles,
+              mr: 1,
+              fontSize: 13,
+              width: 22,
+              height: 22
+            },
+            children: firstLetter
+          })
+        }), name]
+      }), /*#__PURE__*/_jsx(Divider, {}), children, children && /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(MenuItem, {
+        onClick: onLogoutClick,
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(LogoutRoundedIcon, {
+            fontSize: "small"
+          })
+        }), "\uB85C\uADF8\uC544\uC6C3"]
+      })]
+    })]
+  });
+}

package/base/deprecated/Button.js

@@ -0,0 +1,61 @@
+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/CircularProgress.js

@@ -0,0 +1,33 @@
+import { Box, Typography } from "@mui/material";
+import MuiCircularProgress from "@mui/material/CircularProgress";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function CircularProgress(props) {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      position: 'relative',
+      display: 'inline-flex'
+    },
+    children: [/*#__PURE__*/_jsx(MuiCircularProgress, {
+      variant: "determinate",
+      ...props
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        position: 'absolute',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "div",
+        color: "text.secondary",
+        children: `${Math.round(props.value)}%`
+      })
+    })]
+  });
+}

package/base/deprecated/FormLabel.js

@@ -0,0 +1,23 @@
+import React from "react";
+import MuiFormLabel from "@mui/material/FormLabel";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function FormLabel({
+  value = false,
+  children,
+  sx,
+  ...props
+}) {
+  const styles = {
+    color: value ? 'rgba(0, 0, 0, 0.87)' : 'rgba(0, 0, 0, 0.6)',
+    fontSize: value ? 16 : 14,
+    fontWeight: value ? 600 : 400
+  };
+  return /*#__PURE__*/_jsx(MuiFormLabel, {
+    sx: {
+      ...sx,
+      ...styles
+    },
+    ...props,
+    children: children
+  });
+}

package/base/deprecated/GroupSelect.js

@@ -0,0 +1,67 @@
+import { Autocomplete, TextField } from "@mui/material";
+import Paper from "@mui/material/Paper";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function GroupSelect({
+  id,
+  options,
+  groupKey,
+  value,
+  onSelect,
+  placeholder,
+  disableClearable = false,
+  sx,
+  ...props
+}) {
+  const styles = {
+    '.MuiInputLabel-root, .MuiInputBase-input': {
+      fontSize: '0.875rem'
+    }
+  };
+  const paperStyles = {
+    '& .MuiAutocomplete-groupLabel': {
+      fontSize: '0.8rem',
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    '& .MuiAutocomplete-option': {
+      color: '#333',
+      fontSize: '0.875rem',
+      paddingTop: '3px',
+      paddingBottom: '3px'
+    },
+    '& .MuiAutocomplete-noOptions': {
+      fontSize: '0.8rem'
+    }
+  };
+  const handleSelect = (event, value, reason) => {
+    if (reason !== 'selectOption') return;
+    if (onSelect) onSelect(id, value);
+  };
+  function CustomPaper(props) {
+    return /*#__PURE__*/_jsx(Paper, {
+      ...props,
+      sx: paperStyles
+    });
+  }
+  return /*#__PURE__*/_jsx(Autocomplete, {
+    id: id,
+    size: "small",
+    options: options,
+    groupBy: option => option[groupKey],
+    value: value,
+    onChange: handleSelect,
+    blurOnSelect: true,
+    disableClearable: disableClearable,
+    noOptionsText: "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4",
+    PaperComponent: CustomPaper,
+    renderInput: params => /*#__PURE__*/_jsx(TextField, {
+      ...params,
+      label: placeholder
+    }),
+    sx: {
+      ...sx,
+      ...styles
+    },
+    ...props
+  });
+}

package/base/deprecated/ListItem.js

@@ -0,0 +1,21 @@
+import MuiListItem from "@mui/material/ListItem";
+import { Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ListItem({
+  grid,
+  spacing = 10,
+  verticalAlign = 'flex-start',
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(MuiListItem, {
+    ...props,
+    children: [grid && /*#__PURE__*/_jsx(Grid, {
+      container: true,
+      columnSpacing: spacing,
+      alignItems: verticalAlign,
+      children: children
+    }), !grid && children]
+  });
+}

package/base/deprecated/ListItemDivider.js

@@ -0,0 +1,15 @@
+import { Divider } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ListItemDivider({
+  sx,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Divider, {
+    sx: {
+      ...sx,
+      mt: 3,
+      mb: 2
+    },
+    ...props
+  });
+}

package/base/deprecated/ListItemGrid.js

@@ -0,0 +1,12 @@
+import { Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ListItemGrid({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    ...props,
+    children: children
+  });
+}

package/base/deprecated/ListItemText.js

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import MuiListItemText from "@mui/material/ListItemText";
+import HelpIcon from "@mui/icons-material/Help";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ListItemText({
+  primary,
+  secondary,
+  tooltip,
+  ...props
+}) {
+  const [hover, setHover] = useState(false);
+  return /*#__PURE__*/_jsx(MuiListItemText, {
+    primary: typeof primary === 'string' ? /*#__PURE__*/_jsx(Typography, {
+      fontSize: 17,
+      fontWeight: 600,
+      children: primary
+    }) : /*#__PURE__*/_jsx(Box, {
+      children: primary
+    }),
+    secondary: /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      spacing: 0.5,
+      children: [/*#__PURE__*/_jsx(Box, {
+        color: "rgba(0, 0, 0, 0.6)",
+        fontSize: 14,
+        children: secondary
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: tooltip,
+        children: /*#__PURE__*/_jsx(HelpIcon, {
+          sx: {
+            fontSize: 18,
+            visibility: tooltip && hover ? 'visible' : 'hidden'
+          }
+        })
+      })]
+    }),
+    disableTypography: true,
+    onMouseEnter: _ => setHover(true),
+    onMouseLeave: _ => setHover(false),
+    ...props
+  });
+}

package/base/deprecated/ReferenceChipList.js

@@ -0,0 +1,59 @@
+import { Chip, Stack, Link } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ReferenceChipList({
+  references,
+  onClick,
+  chipStyles,
+  chipProps,
+  sx,
+  ...props
+}) {
+  const handleClick = (id, event) => {
+    if (onClick) onClick(id, event);
+  };
+  return /*#__PURE__*/_jsx(Stack, {
+    direction: "row",
+    gap: 0.5,
+    sx: {
+      flexWrap: 'wrap',
+      ...sx
+    },
+    ...props,
+    children: references.map((reference, index) => {
+      return reference.href ? /*#__PURE__*/_jsx(Link, {
+        href: reference.href,
+        underline: "none",
+        onClick: event => handleClick(reference.id, event),
+        children: /*#__PURE__*/_jsx(ReferenceChip, {
+          name: reference.name,
+          sx: chipStyles,
+          ...chipProps
+        })
+      }, index) : /*#__PURE__*/_jsx(ReferenceChip, {
+        name: reference.name,
+        onClick: event => reference.clickable && handleClick(reference.id, event),
+        sx: {
+          cursor: reference.clickable ? 'pointer' : 'default',
+          ...chipStyles
+        },
+        ...chipProps
+      }, index);
+    })
+  });
+}
+function ReferenceChip({
+  name,
+  sx,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Chip, {
+    variant: "outlined",
+    label: name,
+    size: "small",
+    sx: {
+      fontSize: '13px',
+      ...sx
+    },
+    ...props
+  });
+}

package/base/deprecated/Section.js

@@ -0,0 +1,22 @@
+import { Paper } from "@mui/material";
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Section = /*#__PURE__*/forwardRef(({
+  children,
+  sx,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(Paper, {
+    ref: ref,
+    variant: "outlined",
+    square: false,
+    sx: {
+      marginTop: '20px',
+      padding: 3,
+      ...sx
+    },
+    ...props,
+    children: children
+  });
+});
+export default Section;

package/base/deprecated/ShadowedSection.js

@@ -0,0 +1,36 @@
+import { Box, Divider, Stack, Typography } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function ShadowedSection({
+  label,
+  children,
+  marginTop = '20px',
+  sx,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      sx: {
+        mt: marginTop
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "subtitle1",
+        children: label
+      })
+    }), /*#__PURE__*/_jsxs(Stack, {
+      sx: {
+        backgroundColor: '#fff',
+        boxShadow: '0 0.3rem 0.3rem rgba(0, 0, 0, 0.03) !important'
+      },
+      children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Stack, {
+        sx: {
+          padding: 3,
+          ...sx
+        },
+        ...props,
+        children: children
+      }), /*#__PURE__*/_jsx(Divider, {})]
+    })]
+  });
+}

package/base/deprecated/StatusChip.js

@@ -0,0 +1,34 @@
+import { Chip } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import ErrorIcon from "@mui/icons-material/Error";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function StatusChip({
+  id,
+  label,
+  status,
+  onOperate,
+  sx,
+  ...props
+}) {
+  const styles = {
+    '&': {
+      bgcolor: status === 'normal' ? '#4caf50' : '#fff'
+    },
+    '.MuiSvgIcon-root.MuiChip-deleteIcon': {
+      cursor: onOperate ? 'pointer' : 'default'
+    }
+  };
+  return /*#__PURE__*/_jsx(Chip, {
+    id: id,
+    label: label,
+    variant: status === 'normal' ? 'filled' : 'outlined',
+    color: status === 'normal' ? 'success' : 'default',
+    deleteIcon: status === 'normal' ? /*#__PURE__*/_jsx(CheckCircleIcon, {}) : /*#__PURE__*/_jsx(ErrorIcon, {}),
+    onDelete: _ => onOperate && onOperate(id, status),
+    sx: {
+      ...sx,
+      ...styles
+    },
+    ...props
+  });
+}

package/base/deprecated/TabbedSection.js

@@ -0,0 +1,37 @@
+import { Stack, Tab } from "@mui/material";
+import Tabs from "./Tabs";
+import Section from "./Section";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function TabbedSection({
+  orientation,
+  labels = [],
+  tabProps = {},
+  sectionProps = {},
+  children,
+  ...props
+}) {
+  const styles = {
+    mt: 0,
+    width: orientation === 'vertical' ? '100%' : 'unset'
+  };
+  return /*#__PURE__*/_jsxs(Stack, {
+    direction: orientation === 'vertical' ? 'row' : 'column',
+    children: [/*#__PURE__*/_jsx(Tabs, {
+      orientation: orientation,
+      ...props,
+      children: labels.map((label, index) => /*#__PURE__*/_jsx(Tab, {
+        label: label,
+        wrapped: orientation === 'vertical',
+        ...tabProps
+      }, index))
+    }), /*#__PURE__*/_jsx(Section, {
+      sx: {
+        ...styles,
+        ...sectionProps.sx
+      },
+      ...sectionProps,
+      children: children
+    })]
+  });
+}

package/base/deprecated/Tabs.js

@@ -0,0 +1,38 @@
+import React from "react";
+import MuiTabs from "@mui/material/Tabs";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function Tabs({
+  orientation,
+  sx,
+  ...props
+}) {
+  const vertical = orientation === 'vertical';
+  const styles = {
+    ml: vertical ? 0 : 0.5,
+    mr: vertical ? 0 : 0.5,
+    mt: vertical ? 0.5 : 0,
+    mb: vertical ? 0.5 : 0,
+    '& .MuiButtonBase-root.MuiTab-root': {
+      fontSize: '15px'
+    },
+    '&.MuiTabs-root.MuiTabs-vertical': {
+      minWidth: '40px',
+      maxWidth: '40px'
+    },
+    '&.MuiTabs-root.MuiTabs-vertical .MuiButtonBase-root.MuiTab-root': {
+      minWidth: '40px',
+      maxWidth: '40px'
+    }
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(MuiTabs, {
+      orientation: orientation,
+      sx: {
+        ...styles,
+        ...sx
+      },
+      ...props
+    })
+  });
+}

package/base/deprecated/TextField.js

@@ -0,0 +1,25 @@
+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
+    })
+  });
+}

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";
@@ -30,4 +31,24 @@ export { default as Snackbar } from "./Snackbar";
 export { default as Switch } from "./Switch";
 export * from './frame/sidebar/SidebarContext';
 export { default as Error } from "./error/Error";
-export { default as HttpError } from "./error/HttpError";
+export { default as HttpError } from "./error/HttpError";
+export { default as Accordion } from "./deprecated/Accordion";
+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";
+export { default as ListItem } from "./deprecated/ListItem";
+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";

package/base/styles/button.js

@@ -0,0 +1,199 @@
+import { blue, grey, orange, red } from "../colors";
+export const primary = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'primary' && ownerState.variant === 'contained' && {
+      color: theme.palette.primary.contrastText,
+      backgroundColor: theme.palette.primary.main,
+      ':hover': {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: '#242424'
+      },
+      ':active': {
+        color: grey[300],
+        backgroundColor: '#141414'
+      },
+      ':disabled': {
+        color: grey[500],
+        backgroundColor: grey[300]
+      }
+    };
+  },
+  outlined: (ownerState, theme) => {
+    return ownerState.color === 'primary' && ownerState.variant === 'outlined' && {
+      color: grey[900],
+      backgroundColor: '#fff',
+      borderColor: grey[700],
+      ':hover': {
+        color: grey[900],
+        backgroundColor: grey[10]
+      },
+      ':active': {
+        color: grey[900],
+        backgroundColor: grey[20]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff',
+        borderColor: grey[400]
+      }
+    };
+  },
+  text: (ownerState, theme) => {
+    return ownerState.color === 'primary' && ownerState.variant === 'text' && {
+      color: grey[900],
+      backgroundColor: '#fff',
+      ':hover': {
+        color: grey[900],
+        backgroundColor: grey[100]
+      },
+      ':active': {
+        color: grey[900],
+        backgroundColor: grey[200]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff'
+      }
+    };
+  }
+};
+export const info = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'info' && ownerState.variant === 'contained' && {
+      color: theme.palette.info.contrastText,
+      backgroundColor: theme.palette.info.main,
+      ':hover': {
+        color: theme.palette.info.contrastText,
+        backgroundColor: blue[600]
+      },
+      ':active': {
+        color: theme.palette.info.contrastText,
+        backgroundColor: blue[800]
+      },
+      ':disabled': {
+        color: grey[500],
+        backgroundColor: grey[300]
+      }
+    };
+  },
+  outlined: (ownerState, theme) => {
+    return ownerState.color === 'info' && ownerState.variant === 'outlined' && {
+      color: blue[500],
+      backgroundColor: '#fff',
+      borderColor: blue[500],
+      ':hover': {
+        color: blue[500],
+        backgroundColor: blue[50]
+      },
+      ':active': {
+        color: blue[500],
+        backgroundColor: blue[100]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff',
+        borderColor: grey[400]
+      }
+    };
+  },
+  text: (ownerState, theme) => {
+    return ownerState.color === 'info' && ownerState.variant === 'text' && {
+      color: blue[500],
+      backgroundColor: '#fff',
+      ':hover': {
+        color: blue[500],
+        backgroundColor: blue[50]
+      },
+      ':active': {
+        color: blue[500],
+        backgroundColor: blue[100]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff'
+      }
+    };
+  }
+};
+export const warning = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'warning' && ownerState.variant === 'contained' && {
+      color: theme.palette.warning.contrastText,
+      backgroundColor: theme.palette.warning.main,
+      ':hover': {
+        color: theme.palette.warning.contrastText,
+        backgroundColor: orange[600]
+      },
+      ':active': {
+        color: theme.palette.warning.contrastText,
+        backgroundColor: orange[800]
+      },
+      ':disabled': {
+        color: grey[500],
+        backgroundColor: grey[300]
+      }
+    };
+  }
+};
+export const error = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'error' && ownerState.variant === 'contained' && {
+      color: theme.palette.error.contrastText,
+      backgroundColor: theme.palette.error.main,
+      ':hover': {
+        color: theme.palette.error.contrastText,
+        backgroundColor: red[600]
+      },
+      ':active': {
+        color: theme.palette.error.contrastText,
+        backgroundColor: red[800]
+      },
+      ':disabled': {
+        color: grey[500],
+        backgroundColor: grey[300]
+      }
+    };
+  },
+  outlined: (ownerState, theme) => {
+    return ownerState.color === 'error' && ownerState.variant === 'outlined' && {
+      color: red[700],
+      backgroundColor: '#fff',
+      borderColor: red[600],
+      ':hover': {
+        color: red[700],
+        backgroundColor: red[50] //'#fef2f4',
+      },
+
+      ':active': {
+        color: red[700],
+        backgroundColor: red[100] //'#fcdee5',
+      },
+
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff',
+        borderColor: grey[400]
+      }
+    };
+  },
+  text: (ownerState, theme) => {
+    return ownerState.color === 'error' && ownerState.variant === 'text' && {
+      color: red[700],
+      backgroundColor: '#fff',
+      ':hover': {
+        color: red[700],
+        backgroundColor: red[50] //'#fef2f4',
+      },
+
+      ':active': {
+        color: red[700],
+        backgroundColor: red[100] //'#fcdee5',
+      },
+
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff'
+      }
+    };
+  }
+};

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.0",
+  "version": "2.0.2",
   "main": "base/index.js",
   "files": [
     "/base"