@solostylist/ui-kit 1.0.167 → 1.0.169

package/dist/s-theme-provider/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-theme-provider.js";
+import { SThemeProvider as o } from "./s-theme-provider.js";
 export {
   o as default
 };

package/dist/s-theme-provider/s-theme-provider.d.ts

@@ -15,21 +15,9 @@ export interface SThemeProviderProps extends Omit<ThemeProviderProps, 'defaultMo
     /** Custom theme object to merge with internal theme */
     theme?: Theme;
 }
-/**
- * SThemeProvider - Central theme provider for the design system.
- *
- * Features:
- * - Material-UI v6 CSS variables integration with 's-' prefix
- * - System mode default with light/dark/system mode support
- * - Comprehensive component customizations
- * - Custom color schemes, typography, shadows, and shapes
- * - Modular theme customizations from separate files
- * - Theme merging capability for external overrides
- * - Memoized theme creation for performance
- * - Transition disabling for smoother mode switching
- *
- * @param props - SThemeProviderProps with theme configuration
- * @returns JSX.Element - ThemeProvider with custom design system theme
- */
-declare const SThemeProvider: ({ children, disableCustomTheme, themeComponents, defaultMode, theme, ...themeProviderProps }: SThemeProviderProps) => React.JSX.Element;
+/** Central theme provider for the design system. */
+export declare const SThemeProvider: {
+    ({ children, disableCustomTheme, themeComponents, defaultMode, theme, ...themeProviderProps }: SThemeProviderProps): React.JSX.Element;
+    displayName: string;
+};
 export default SThemeProvider;

package/dist/s-theme-provider/s-theme-provider.js

@@ -1,60 +1,70 @@
-import { j as s } from "../jsx-runtime-OVHDjVDe.js";
-import * as e from "react";
-import { createTheme as p, ThemeProvider as c } from "@mui/material";
-import { components as f } from "../theme/components/components.js";
-import { dataDisplayCustomizations as u } from "../theme/customizations/data-display.js";
+import { j as a } from "../jsx-runtime-OVHDjVDe.js";
+import * as m from "react";
+import { createTheme as d, ThemeProvider as u } from "@mui/material";
+import { components as p } from "../theme/components/components.js";
+import { dataDisplayCustomizations as c } from "../theme/customizations/data-display.js";
 import { feedbackCustomizations as h } from "../theme/customizations/feedback.js";
-import { inputsCustomizations as l } from "../theme/customizations/inputs.js";
-import { navigationCustomizations as x } from "../theme/customizations/navigation.js";
-import { surfacesCustomizations as d } from "../theme/customizations/surfaces.js";
-import { shape as z, shadows as g, typography as j, colorSchemes as y } from "../theme/theme-primitives.js";
-const w = ({
-  children: r,
-  disableCustomTheme: o,
-  themeComponents: t,
-  defaultMode: m = "system",
+import { inputsCustomizations as f } from "../theme/customizations/inputs.js";
+import { navigationCustomizations as y } from "../theme/customizations/navigation.js";
+import { surfacesCustomizations as v } from "../theme/customizations/surfaces.js";
+import { shape as C, shadows as g, typography as _, colorSchemes as T } from "../theme/theme-primitives.js";
+const o = ({
+  children: e,
+  disableCustomTheme: t,
+  themeComponents: r,
+  defaultMode: s = "system",
   // System preference by default
-  theme: i,
-  ...a
+  theme: n,
+  ...i
 }) => {
-  const n = e.useMemo(() => o ? {} : p({
+  const l = m.useMemo(() => t ? {} : d({
     // CSS variables configuration for dynamic theming
     cssVariables: {
       colorSchemeSelector: "data-mui-color-scheme",
       cssVarPrefix: "s"
       // All CSS vars prefixed with '--s-'
     },
-    colorSchemes: y,
+    colorSchemes: T,
     // Light/dark color schemes
-    typography: j,
+    typography: _,
     // Custom typography scales
     shadows: g,
     // Custom shadow definitions
-    shape: z,
+    shape: C,
     // Border radius and shape settings
     components: {
       // Merge all component customizations
-      ...l,
-      ...u,
-      ...h,
-      ...x,
-      ...d,
       ...f,
-      ...t
+      ...c,
+      ...h,
+      ...y,
+      ...v,
+      ...p,
+      ...r
       // Allow external overrides
     }
-  }), [o, t]);
-  return o ? /* @__PURE__ */ s.jsx(e.Fragment, { children: r }) : /* @__PURE__ */ s.jsx(
-    c,
+  }), [t, r]);
+  return t ? /* @__PURE__ */ a.jsx(m.Fragment, { children: e }) : /* @__PURE__ */ a.jsx(
+    u,
     {
       disableTransitionOnChange: !0,
-      ...a,
-      theme: { ...n, ...i },
-      defaultMode: m,
-      children: r
+      ...i,
+      theme: { ...l, ...n },
+      defaultMode: s,
+      children: e
     }
   );
 };
+o.displayName = "SThemeProvider";
+try {
+  o.displayName = "SThemeProvider", o.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "SThemeProvider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"system"' }, { value: '"light"' }, { value: '"dark"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
+} catch {
+}
+try {
+  sthemeprovider.displayName = "sthemeprovider", sthemeprovider.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "sthemeprovider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"system"' }, { value: '"light"' }, { value: '"dark"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
+} catch {
+}
 export {
-  w as default
+  o as SThemeProvider,
+  o as default
 };

package/dist/s-theme-switch/s-theme-switch.js

@@ -1,31 +1,31 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { useRef as f, useCallback as m } from "react";
+import { j as e } from "../jsx-runtime-OVHDjVDe.js";
+import { useRef as g, useCallback as l } from "react";
 import { IconButton as w } from "@mui/material";
-import { flushSync as M } from "react-dom";
-import { c as h } from "../createSvgIcon-DxwgGAVe.js";
-const k = h(/* @__PURE__ */ t.jsx("path", {
+import { flushSync as y } from "react-dom";
+import { c as m } from "../createSvgIcon-DxwgGAVe.js";
+const M = m(/* @__PURE__ */ e.jsx("path", {
   d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1"
-}), "DarkMode"), j = h(/* @__PURE__ */ t.jsx("path", {
+}), "DarkMode"), v = m(/* @__PURE__ */ e.jsx("path", {
   d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z"
-}), "LightMode"), z = ({ mode: n, setMode: c, sx: l }) => {
-  const o = f(null), u = n === "dark", s = m(() => {
+}), "LightMode"), V = ({ mode: t, setMode: s, sx: d }) => {
+  const n = g(null), u = t === "dark", a = l(() => {
     setTimeout(() => {
-      c == null || c(n === "dark" ? "light" : "dark");
+      s == null || s(t === "dark" ? "light" : "dark");
     }, 0);
-  }, [n, c]), d = m(async () => {
-    if (!o.current || !document.startViewTransition) {
-      s();
+  }, [t, s]), h = l(async () => {
+    if (!n.current || !document.startViewTransition) {
+      a();
       return;
     }
     await document.startViewTransition(() => {
-      M(() => {
-        s();
+      y(() => {
+        a();
       });
     }).ready;
-    const { top: e, left: i, width: p, height: x } = o.current.getBoundingClientRect(), r = i + p / 2, a = e + x / 2, g = Math.hypot(Math.max(i, window.innerWidth - i), Math.max(e, window.innerHeight - e));
+    const { top: c, left: o, width: p, height: x } = n.current.getBoundingClientRect(), i = o + p / 2, r = c + x / 2, f = Math.hypot(Math.max(o, window.innerWidth - o), Math.max(c, window.innerHeight - c));
     document.documentElement.animate(
       {
-        clipPath: [`circle(0px at ${r}px ${a}px)`, `circle(${g}px at ${r}px ${a}px)`]
+        clipPath: [`circle(0px at ${i}px ${r}px)`, `circle(${f}px at ${i}px ${r}px)`]
       },
       {
         duration: 700,
@@ -33,9 +33,13 @@ const k = h(/* @__PURE__ */ t.jsx("path", {
         pseudoElement: "::view-transition-new(root)"
       }
     );
-  }, [s]);
-  return /* @__PURE__ */ t.jsx(w, { ref: o, onClick: d, sx: l, children: u ? /* @__PURE__ */ t.jsx(j, {}) : /* @__PURE__ */ t.jsx(k, {}) });
+  }, [a]);
+  return /* @__PURE__ */ e.jsx(w, { ref: n, onClick: h, sx: d, children: u ? /* @__PURE__ */ e.jsx(v, {}) : /* @__PURE__ */ e.jsx(M, {}) });
 };
+try {
+  sthemeswitch.displayName = "sthemeswitch", sthemeswitch.__docgenInfo = { description: "", displayName: "sthemeswitch", props: { mode: { defaultValue: null, description: "", name: "mode", required: !1, type: { name: "enum", value: [{ value: '"system"' }, { value: '"light"' }, { value: '"dark"' }] } }, setMode: { defaultValue: null, description: "", name: "setMode", required: !1, type: { name: "((mode: SThemeMode) => void)" } }, sx: { defaultValue: null, description: "", name: "sx", required: !1, type: { name: "SxProps<Theme>" } } } };
+} catch {
+}
 export {
-  z as default
+  V as default
 };

package/dist/s-tip/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-tip.js";
+import { STip as f } from "./s-tip.js";
 export {
-  o as default
+  f as default
 };

package/dist/s-tip/s-tip.d.ts

@@ -7,27 +7,10 @@ export interface STipProps {
     message: string;
 }
 /**
- * STip - A styled tip/hint component for displaying helpful information to users.
- * Features a lightbulb icon and "Tip." prefix for clear visual identification.
- *
- * Key features:
- * - Distinctive lightbulb icon for immediate recognition
- * - Bold "Tip." prefix for clear categorization
- * - Consistent background and text coloring
- * - Rounded corners for modern appearance
- * - Horizontal layout with proper spacing
- * - CSS custom properties for theme integration
- * - Compact 16px icon size for subtle presence
- *
- * Common use cases:
- * - Form hints and guidance
- * - Feature explanations
- * - Best practice suggestions
- * - User onboarding tips
- * - Contextual help information
- *
- * @param props - STipProps with the message to display
- * @returns JSX.Element - Styled tip component with icon and message
+ * A simple tip component that displays helpful information with a lightbulb icon.
  */
-declare const STip: ({ message }: STipProps) => React.JSX.Element;
+export declare const STip: {
+    ({ message }: STipProps): React.JSX.Element;
+    displayName: string;
+};
 export default STip;

package/dist/s-tip/s-tip.js

@@ -1,11 +1,11 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { c } from "../createSvgIcon-DxwgGAVe.js";
-import { S as i } from "../Stack-Cq2r2NmC.js";
-import { T as o } from "../Typography-B7LOtCzI.js";
-const s = c(/* @__PURE__ */ t.jsx("path", {
+import { j as e } from "../jsx-runtime-OVHDjVDe.js";
+import { c as a } from "../createSvgIcon-DxwgGAVe.js";
+import { S as r } from "../Stack-Cq2r2NmC.js";
+import { T as s } from "../Typography-C8jwvSWe.js";
+const o = a(/* @__PURE__ */ e.jsx("path", {
   d: "M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7m2 11.7V16h-4v-2.3C8.48 12.63 7 11.53 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.49-1.51 3.65-3 4.7"
-}), "LightbulbOutline"), l = ({ message: r }) => /* @__PURE__ */ t.jsxs(
-  i,
+}), "LightbulbOutline"), i = ({ message: t }) => /* @__PURE__ */ e.jsxs(
+  r,
   {
     direction: "row",
     spacing: 1,
@@ -18,15 +18,25 @@ const s = c(/* @__PURE__ */ t.jsx("path", {
       color: "text.secondary"
     },
     children: [
-      /* @__PURE__ */ t.jsx(s, { sx: { fontSize: 16 } }),
-      /* @__PURE__ */ t.jsxs(o, { variant: "body2", children: [
-        /* @__PURE__ */ t.jsx(o, { component: "span", sx: { fontWeight: "bold" }, variant: "inherit", children: "Tip." }),
+      /* @__PURE__ */ e.jsx(o, { sx: { fontSize: 16 } }),
+      /* @__PURE__ */ e.jsxs(s, { variant: "body2", children: [
+        /* @__PURE__ */ e.jsx(s, { component: "span", sx: { fontWeight: "bold" }, variant: "inherit", children: "Tip." }),
         " ",
-        r
+        t
       ] })
     ]
   }
 );
+i.displayName = "STip";
+try {
+  i.displayName = "STip", i.__docgenInfo = { description: "A simple tip component that displays helpful information with a lightbulb icon.", displayName: "STip", props: { message: { defaultValue: null, description: "The tip message to display", name: "message", required: !0, type: { name: "string" } } } };
+} catch {
+}
+try {
+  stip.displayName = "stip", stip.__docgenInfo = { description: "A simple tip component that displays helpful information with a lightbulb icon.", displayName: "stip", props: { message: { defaultValue: null, description: "The tip message to display", name: "message", required: !0, type: { name: "string" } } } };
+} catch {
+}
 export {
-  l as default
+  i as STip,
+  i as default
 };

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

@@ -1,4 +1,12 @@
-import { default as o } from "./s-two-pane-layout.js";
+import { STwoPaneLayout as n } from "./s-two-pane-layout.js";
+try {
+  stwopanelayout.displayName = "stwopanelayout", stwopanelayout.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "stwopanelayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
+} catch {
+}
+try {
+  STwoPaneLayoutProps.displayName = "STwoPaneLayoutProps", STwoPaneLayoutProps.__docgenInfo = { description: "Props for the STwoPaneLayout component", displayName: "STwoPaneLayoutProps", props: {} };
+} catch {
+}
 export {
-  o as default
+  n as default
 };

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

@@ -1,5 +1,8 @@
 import { FC, ReactNode } from 'react';
 import { SxProps, Theme } from '@mui/material';
+/**
+ * Props for the STwoPaneLayout component
+ */
 export interface STwoPaneLayoutProps {
     /** Content to display in the sidebar pane */
     sidebar: ReactNode;
@@ -44,5 +47,8 @@ export interface STwoPaneLayoutProps {
     /** Padding for content header. Default: 2 */
     contentHeaderPadding?: number | string;
 }
-declare const STwoPaneLayout: FC<STwoPaneLayoutProps>;
+/**
+ * A flexible two-pane layout component with customizable sidebar and content areas.
+ */
+export declare const STwoPaneLayout: FC<STwoPaneLayoutProps>;
 export default STwoPaneLayout;

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

@@ -1,71 +1,81 @@
-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
+import { j as e } from "../jsx-runtime-OVHDjVDe.js";
+import { Box as a } from "@mui/material";
+import { SFlexBox as D } from "../s-flex-box/s-flex-box.js";
+import { SOverlayScrollbar as h } from "../s-overlay-scrollbar/s-overlay-scrollbar.js";
+const r = ({
+  sidebar: t,
+  content: l,
+  sidebarWidth: x = 280,
+  height: y = "calc(100vh - 65px)",
+  containerSx: S,
+  sidebarSx: g,
+  contentSx: P,
+  sidebarHeaderSx: q,
+  contentHeaderSx: V,
+  sidebarScrollSx: d,
+  contentScrollSx: i,
+  disableBorder: o = !1,
+  sidebarHeader: s,
+  contentHeader: u,
+  enableSidebarScroll: v = !0,
+  enableContentScroll: c = !1,
+  sidebarPosition: n = "left",
+  sidebarPadding: f = 1,
+  contentPadding: m = 1,
+  sidebarHeaderPadding: C = 2,
+  contentHeaderPadding: H = 2
 }) => {
-  const j = /* @__PURE__ */ r.jsxs(
-    e,
+  const p = /* @__PURE__ */ e.jsxs(
+    a,
     {
       sx: {
-        width: u,
-        borderRight: !h && x === "left" ? 1 : 0,
-        borderLeft: !h && x === "right" ? 1 : 0,
+        width: x,
+        borderRight: !o && n === "left" ? 1 : 0,
+        borderLeft: !o && n === "right" ? 1 : 0,
         borderColor: "divider",
         display: "flex",
         flexDirection: "column",
-        ...a
+        ...g
       },
       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 }) })
+        s && /* @__PURE__ */ e.jsx(a, { sx: { p: C, borderBottom: 1, borderColor: "divider", ...q }, children: s }),
+        /* @__PURE__ */ e.jsx(a, { sx: { flex: 1, minHeight: 0 }, children: v ? /* @__PURE__ */ e.jsx(h, { children: /* @__PURE__ */ e.jsx(a, { sx: { p: f, ...d }, children: t }) }) : /* @__PURE__ */ e.jsx(a, { sx: { p: f, height: "100%", overflow: "hidden", ...d }, children: t }) })
       ]
     }
-  ), 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 }) })
+  ), b = /* @__PURE__ */ e.jsxs(a, { sx: { flex: 1, display: "flex", flexDirection: "column", ...P }, height: "100%", children: [
+    u && /* @__PURE__ */ e.jsx(a, { sx: { p: H, borderBottom: 1, borderColor: "divider", ...V }, children: u }),
+    /* @__PURE__ */ e.jsx(a, { sx: { flex: 1, overflow: c ? "auto" : "hidden" }, children: c ? /* @__PURE__ */ e.jsx(h, { children: /* @__PURE__ */ e.jsx(a, { sx: { p: m, ...i }, children: l }) }) : /* @__PURE__ */ e.jsx(a, { sx: { p: m, height: "100%", ...i }, children: l }) })
   ] });
-  return /* @__PURE__ */ r.jsx(
-    L,
+  return /* @__PURE__ */ e.jsx(
+    D,
     {
       sx: {
-        height: v,
+        height: y,
         flexDirection: "row",
         width: "100%",
         overflow: "hidden",
-        ...w
+        ...S
       },
-      children: x === "left" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-        j,
-        m
-      ] }) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-        m,
-        j
+      children: n === "left" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        p,
+        b
+      ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        b,
+        p
       ] })
     }
   );
 };
+r.displayName = "STwoPaneLayout";
+try {
+  r.displayName = "STwoPaneLayout", r.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "STwoPaneLayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
+} catch {
+}
+try {
+  stwopanelayout.displayName = "stwopanelayout", stwopanelayout.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "stwopanelayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
+} catch {
+}
 export {
-  T as default
+  r as STwoPaneLayout,
+  r as default
 };

package/dist/s-typewriter-text/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-typewriter-text.js";
+import { STypewriterText as t } from "./s-typewriter-text.js";
 export {
-  o as default
+  t as default
 };

package/dist/s-typewriter-text/s-typewriter-text.d.ts

@@ -1,12 +1,28 @@
 import { TypographyProps } from '@mui/material';
+/**
+ * Props interface for STypewriterText component
+ */
 export interface STypewriterTextProps extends Omit<TypographyProps, 'children'> {
+    /** The text to display with typewriter effect. Can be a single string or array of strings for sequential display. */
     text: string | string[];
+    /** Speed of typing animation in milliseconds per character */
     speed?: number;
+    /** Character to display as the typing cursor */
     cursor?: string;
+    /** Whether the cursor should blink */
     cursorBlinking?: boolean;
+    /** Whether to loop the animation continuously */
     loop?: boolean;
+    /** Speed of deletion animation in milliseconds per character (when looping) */
     deleteSpeed?: number;
+    /** Delay in milliseconds before deleting text (when looping) */
     delay?: number;
 }
-declare function STypewriterText({ text, speed, cursor, cursorBlinking, loop, deleteSpeed, delay, ...typographyProps }: STypewriterTextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * An animated text component that creates a typewriter effect with customizable speed and looping.
+ */
+export declare const STypewriterText: {
+    ({ text, speed, cursor, cursorBlinking, loop, deleteSpeed, delay, ...typographyProps }: STypewriterTextProps): React.JSX.Element;
+    displayName: string;
+};
 export default STypewriterText;

package/dist/s-typewriter-text/s-typewriter-text.js

@@ -1,44 +1,54 @@
-import { j as y } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as n, useEffect as j } from "react";
-import { Typography as k, Box as D } from "@mui/material";
-function B({
-  text: r,
-  speed: c = 100,
-  cursor: T = "|",
-  cursorBlinking: g = !0,
-  loop: l = !1,
-  deleteSpeed: f = 50,
-  delay: u = 1500,
-  ...h
-}) {
-  const [s, x] = n(""), [i, m] = n(0), [o, p] = n(!1), [A, I] = n(0), a = Array.isArray(r) ? r : [r], t = a[A] || "";
-  return j(() => {
-    if (!t) return;
-    const d = setTimeout(
+import { j as h } from "../jsx-runtime-OVHDjVDe.js";
+import { useState as a, useEffect as _ } from "react";
+import { Typography as V, Box as v } from "@mui/material";
+const s = ({
+  text: t,
+  speed: p = 100,
+  cursor: g = "|",
+  cursorBlinking: x = !0,
+  loop: u = !1,
+  deleteSpeed: d = 50,
+  delay: c = 1500,
+  ...b
+}) => {
+  const [n, m] = a(""), [i, y] = a(0), [l, f] = a(!1), [w, T] = a(0), o = Array.isArray(t) ? t : [t], r = o[w] || "";
+  return _(() => {
+    if (!r) return;
+    const q = setTimeout(
       () => {
-        o ? s.length > 0 ? x((e) => e.slice(0, -1)) : (p(!1), m(0), I((e) => (e + 1) % a.length)) : i < t.length ? (x((e) => e + t[i]), m((e) => e + 1)) : l && setTimeout(() => p(!0), u);
+        l ? n.length > 0 ? m((e) => e.slice(0, -1)) : (f(!1), y(0), T((e) => (e + 1) % o.length)) : i < r.length ? (m((e) => e + r[i]), y((e) => e + 1)) : u && setTimeout(() => f(!0), c);
       },
-      o ? f : c
+      l ? d : p
     );
-    return () => clearTimeout(d);
-  }, [i, o, t, l, c, f, u, s, a.length]), /* @__PURE__ */ y.jsxs(k, { component: "span", ...h, children: [
-    s,
-    /* @__PURE__ */ y.jsx(
-      D,
+    return () => clearTimeout(q);
+  }, [i, l, r, u, p, d, c, n, o.length]), /* @__PURE__ */ h.jsxs(V, { component: "span", ...b, children: [
+    n,
+    /* @__PURE__ */ h.jsx(
+      v,
       {
         component: "span",
         sx: {
-          animation: g ? "blink 1s infinite" : "none",
+          animation: x ? "blink 1s infinite" : "none",
           "@keyframes blink": {
             "0%, 50%": { opacity: 1 },
             "51%, 100%": { opacity: 0 }
           }
         },
-        children: T
+        children: g
       }
     )
   ] });
+};
+s.displayName = "STypewriterText";
+try {
+  s.displayName = "STypewriterText", s.__docgenInfo = { description: "An animated text component that creates a typewriter effect with customizable speed and looping.", displayName: "STypewriterText", props: { text: { defaultValue: null, description: "The text to display with typewriter effect. Can be a single string or array of strings for sequential display.", name: "text", required: !0, type: { name: "string | string[]" } }, speed: { defaultValue: { value: "100" }, description: "Speed of typing animation in milliseconds per character", name: "speed", required: !1, type: { name: "number" } }, cursor: { defaultValue: { value: "|" }, description: "Character to display as the typing cursor", name: "cursor", required: !1, type: { name: "string" } }, cursorBlinking: { defaultValue: { value: "true" }, description: "Whether the cursor should blink", name: "cursorBlinking", required: !1, type: { name: "boolean" } }, loop: { defaultValue: { value: "false" }, description: "Whether to loop the animation continuously", name: "loop", required: !1, type: { name: "boolean" } }, deleteSpeed: { defaultValue: { value: "50" }, description: "Speed of deletion animation in milliseconds per character (when looping)", name: "deleteSpeed", required: !1, type: { name: "number" } }, delay: { defaultValue: { value: "1500" }, description: "Delay in milliseconds before deleting text (when looping)", name: "delay", required: !1, type: { name: "number" } } } };
+} catch {
+}
+try {
+  stypewritertext.displayName = "stypewritertext", stypewritertext.__docgenInfo = { description: "An animated text component that creates a typewriter effect with customizable speed and looping.", displayName: "stypewritertext", props: { text: { defaultValue: null, description: "The text to display with typewriter effect. Can be a single string or array of strings for sequential display.", name: "text", required: !0, type: { name: "string | string[]" } }, speed: { defaultValue: { value: "100" }, description: "Speed of typing animation in milliseconds per character", name: "speed", required: !1, type: { name: "number" } }, cursor: { defaultValue: { value: "|" }, description: "Character to display as the typing cursor", name: "cursor", required: !1, type: { name: "string" } }, cursorBlinking: { defaultValue: { value: "true" }, description: "Whether the cursor should blink", name: "cursorBlinking", required: !1, type: { name: "boolean" } }, loop: { defaultValue: { value: "false" }, description: "Whether to loop the animation continuously", name: "loop", required: !1, type: { name: "boolean" } }, deleteSpeed: { defaultValue: { value: "50" }, description: "Speed of deletion animation in milliseconds per character (when looping)", name: "deleteSpeed", required: !1, type: { name: "number" } }, delay: { defaultValue: { value: "1500" }, description: "Delay in milliseconds before deleting text (when looping)", name: "delay", required: !1, type: { name: "number" } } } };
+} catch {
 }
 export {
-  B as default
+  s as STypewriterText,
+  s as default
 };