@nethru/ui 1.0.19 → 1.0.21

package/dist/Section.js

@@ -9,9 +9,9 @@ export default function Section({
     variant: "outlined",
     square: false,
     sx: {
-      ...sx,
+      marginTop: '20px',
       padding: 3,
-      marginTop: '20px'
+      ...sx
     },
     ...props,
     children: children

package/dist/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/dist/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/dist/Tabs.js

@@ -10,7 +10,9 @@ export default function Tabs({
   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'
     },

package/dist/index.js

@@ -20,10 +20,12 @@ export { default as MainHeader } from "./MainHeader";
 export { default as SearchTextField } from "./SearchTextField";
 export { default as Section } from "./Section";
 export { default as Select } from "./Select";
+export { default as ShadowedSection } from "./ShadowedSection";
 export { default as Slider } from "./Slider";
 export { default as Snackbar } from "./Snackbar";
 export { default as StatusChip } from "./StatusChip";
 export { default as Switch } from "./Switch";
+export { default as TabbedSection } from "./TabbedSection";
 export { default as Tabs } from "./Tabs";
 export { default as TextField } from "./TextField";
 export { default as Sidebar } from "./sidebar/Sidebar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "main": "dist/index.js",
   "files": [
     "/dist"
@@ -16,6 +16,7 @@
     "@mui/x-data-grid": "^6.18.2",
     "@mui/x-date-pickers": "^6.18.2",
     "@mui/x-tree-view": "^6.17.0",
+    "@nethru/ui": "^1.0.19",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",