@solostylist/ui-kit 1.0.149 → 1.0.150

package/dist/s-two-pane-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-two-pane-layout';
+export type { STwoPaneLayoutProps } from './s-two-pane-layout';

package/dist/s-two-pane-layout/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./s-two-pane-layout.js";
+export {
+  o as default
+};

package/dist/s-two-pane-layout/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

package/dist/s-two-pane-layout/s-two-pane-layout.d.ts

@@ -0,0 +1,48 @@
+import { FC, ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material';
+export interface STwoPaneLayoutProps {
+    /** Content to display in the sidebar pane */
+    sidebar: ReactNode;
+    /** Content to display in the main content pane */
+    content: ReactNode;
+    /** Width of the sidebar in pixels. Default: 280 */
+    sidebarWidth?: number | string;
+    /** Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)' */
+    height?: string | number;
+    /** Custom styles for the main container */
+    containerSx?: SxProps<Theme>;
+    /** Custom styles for the sidebar container */
+    sidebarSx?: SxProps<Theme>;
+    /** Custom styles for the content container */
+    contentSx?: SxProps<Theme>;
+    /** Custom styles for the sidebar header */
+    sidebarHeaderSx?: SxProps<Theme>;
+    /** Custom styles for the content header */
+    contentHeaderSx?: SxProps<Theme>;
+    /** Custom styles for the sidebar scrollable area */
+    sidebarScrollSx?: SxProps<Theme>;
+    /** Custom styles for the content scrollable area */
+    contentScrollSx?: SxProps<Theme>;
+    /** Hide border between sidebar and content. Default: false */
+    disableBorder?: boolean;
+    /** Optional header content for the sidebar */
+    sidebarHeader?: ReactNode;
+    /** Optional header content for the main content area */
+    contentHeader?: ReactNode;
+    /** Enable scrollbar for sidebar. Default: true */
+    enableSidebarScroll?: boolean;
+    /** Enable scrollbar for content. Default: false */
+    enableContentScroll?: boolean;
+    /** Sidebar position. Default: 'left' */
+    sidebarPosition?: 'left' | 'right';
+    /** Padding for sidebar content. Default: 1 */
+    sidebarPadding?: number | string;
+    /** Padding for main content. Default: 0 */
+    contentPadding?: number | string;
+    /** Padding for sidebar header. Default: 2 */
+    sidebarHeaderPadding?: number | string;
+    /** Padding for content header. Default: 2 */
+    contentHeaderPadding?: number | string;
+}
+declare const STwoPaneLayout: FC<STwoPaneLayoutProps>;
+export default STwoPaneLayout;

package/dist/s-two-pane-layout/s-two-pane-layout.js

@@ -0,0 +1,71 @@
+import { j as r } from "../jsx-runtime-OVHDjVDe.js";
+import { Box as e } from "@mui/material";
+import L from "../s-flex-box/s-flex-box.js";
+import p from "../s-overlay-scrollbar/s-overlay-scrollbar.js";
+const T = ({
+  sidebar: l,
+  content: o,
+  sidebarWidth: u = 280,
+  height: v = "calc(100vh - 65px)",
+  containerSx: w,
+  sidebarSx: a,
+  contentSx: g,
+  sidebarHeaderSx: y,
+  contentHeaderSx: B,
+  sidebarScrollSx: i,
+  contentScrollSx: s,
+  disableBorder: h = !1,
+  sidebarHeader: d,
+  contentHeader: t,
+  enableSidebarScroll: D = !0,
+  enableContentScroll: f = !1,
+  sidebarPosition: x = "left",
+  sidebarPadding: n = 1,
+  contentPadding: c = 1,
+  sidebarHeaderPadding: F = 2,
+  contentHeaderPadding: C = 2
+}) => {
+  const j = /* @__PURE__ */ r.jsxs(
+    e,
+    {
+      sx: {
+        width: u,
+        borderRight: !h && x === "left" ? 1 : 0,
+        borderLeft: !h && x === "right" ? 1 : 0,
+        borderColor: "divider",
+        display: "flex",
+        flexDirection: "column",
+        ...a
+      },
+      children: [
+        d && /* @__PURE__ */ r.jsx(e, { sx: { p: F, borderBottom: 1, borderColor: "divider", ...y }, children: d }),
+        /* @__PURE__ */ r.jsx(e, { sx: { flex: 1, minHeight: 0 }, children: D ? /* @__PURE__ */ r.jsx(p, { children: /* @__PURE__ */ r.jsx(e, { sx: { p: n, ...i }, children: l }) }) : /* @__PURE__ */ r.jsx(e, { sx: { p: n, height: "100%", overflow: "hidden", ...i }, children: l }) })
+      ]
+    }
+  ), m = /* @__PURE__ */ r.jsxs(e, { sx: { flex: 1, display: "flex", flexDirection: "column", ...g }, height: "100%", children: [
+    t && /* @__PURE__ */ r.jsx(e, { sx: { p: C, borderBottom: 1, borderColor: "divider", ...B }, children: t }),
+    /* @__PURE__ */ r.jsx(e, { sx: { flex: 1, overflow: f ? "auto" : "hidden" }, children: f ? /* @__PURE__ */ r.jsx(p, { children: /* @__PURE__ */ r.jsx(e, { sx: { p: c, ...s }, children: o }) }) : /* @__PURE__ */ r.jsx(e, { sx: { p: c, height: "100%", ...s }, children: o }) })
+  ] });
+  return /* @__PURE__ */ r.jsx(
+    L,
+    {
+      sx: {
+        height: v,
+        flexDirection: "row",
+        width: "100%",
+        overflow: "hidden",
+        ...w
+      },
+      children: x === "left" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        j,
+        m
+      ] }) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        m,
+        j
+      ] })
+    }
+  );
+};
+export {
+  T as default
+};

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.149",
+  "version": "1.0.150",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",