@solostylist/ui-kit 1.0.166 → 1.0.168

package/dist/s-spotlight-cursor/s-spotlight-cursor.d.ts

@@ -3,61 +3,27 @@ import { HTMLAttributes } from 'react';
  * Configuration interface for spotlight effect appearance and behavior
  */
 export interface SpotlightConfig {
-    /** Radius of the spotlight effect in pixels (recommended: 50-500) */
+    /** Radius of the spotlight effect in pixels */
     radius: number;
-    /** Brightness/opacity of the spotlight effect (range: 0-1, where 0 is invisible and 1 is fully opaque) */
+    /** Brightness/opacity of the spotlight effect (0-1) */
     brightness: number;
-    /** Color of the spotlight effect in hexadecimal format (e.g., '#ff0000', '#00ff00') */
+    /** Color of the spotlight effect in hexadecimal format */
     color: string;
-    /** Smoothing factor for cursor movement - reserved for future implementation */
+    /** Smoothing factor for cursor movement */
     smoothing: number;
 }
 /**
  * Props interface for the SSpotlightCursor component
  */
 export interface SSpotlightCursorProps extends HTMLAttributes<HTMLCanvasElement> {
-    /** Configuration object for spotlight appearance and behavior. If not provided, uses default blue spotlight */
+    /** Configuration object for spotlight appearance and behavior */
     config?: SpotlightConfig;
 }
 /**
- * SSpotlightCursor - Creates an interactive spotlight effect that follows the mouse cursor
- *
- * This component renders a full-screen HTML5 canvas with a radial gradient spotlight that
- * smoothly tracks the user's mouse movement. The spotlight effect is highly customizable
- * and optimized for performance using requestAnimationFrame.
- *
- * Key features:
- * - Mouse-following spotlight with smooth animation
- * - Customizable radius, brightness, color, and smoothing
- * - Performance-optimized with proper cleanup
- * - Responsive design that adapts to window resizing
- * - Non-interfering overlay (pointer-events: none)
- * - Memory-safe event listener management
- *
- * Technical implementation:
- * - Uses HTML5 Canvas with 2D context for rendering
- * - Implements radial gradient for spotlight effect
- * - Leverages requestAnimationFrame for 60fps animations
- * - Automatically handles canvas sizing and viewport changes
- * - Converts hex colors to RGB for gradient creation
- *
- * @param props - SSpotlightCursorProps containing configuration and styling options
- * @returns JSX.Element - Fixed-positioned canvas element rendering the spotlight effect
- *
- * @example
- * // Basic usage with default blue spotlight
- * <SSpotlightCursor />
- *
- * @example
- * // Custom orange spotlight with larger radius
- * <SSpotlightCursor
- *   config={{
- *     radius: 300,
- *     brightness: 0.25,
- *     color: '#ff6b35',
- *     smoothing: 0.1
- *   }}
- * />
+ * Creates an interactive spotlight effect that follows the mouse cursor.
  */
-declare const SSpotlightCursor: ({ config, className, ...props }: SSpotlightCursorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SSpotlightCursor: {
+    ({ config, className, ...props }: SSpotlightCursorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default SSpotlightCursor;

package/dist/s-spotlight-cursor/s-spotlight-cursor.js

@@ -1,45 +1,45 @@
-import { j as g } from "../jsx-runtime-OVHDjVDe.js";
-import { useRef as p, useEffect as x } from "react";
-import { Box as E } from "@mui/material";
-const b = (t) => {
-  const a = p(null);
-  return x(() => {
+import { j as w } from "../jsx-runtime-OVHDjVDe.js";
+import { useRef as S, useEffect as b } from "react";
+import { Box as C } from "@mui/material";
+const x = (t) => {
+  const a = S(null);
+  return b(() => {
     const e = a.current;
     if (!e) return;
-    const o = e.getContext("2d");
-    if (!o) return;
-    let d, r = -1e3, s = -1e3;
-    const c = () => {
+    const n = e.getContext("2d");
+    if (!n) return;
+    let c, r = -1e3, i = -1e3;
+    const d = () => {
       e.width = window.innerWidth, e.height = window.innerHeight;
-    }, l = (n) => {
-      r = n.clientX, s = n.clientY;
+    }, u = (o) => {
+      r = o.clientX, i = o.clientY;
+    }, h = () => {
+      r = -1e3, i = -1e3;
+    }, p = (o) => {
+      const s = parseInt(o.slice(1), 16), f = s >> 16 & 255, g = s >> 8 & 255, v = s & 255;
+      return `${f},${g},${v}`;
     }, m = () => {
-      r = -1e3, s = -1e3;
-    }, h = (n) => {
-      const i = parseInt(n.slice(1), 16), w = i >> 16 & 255, v = i >> 8 & 255, f = i & 255;
-      return `${w},${v},${f}`;
-    }, u = () => {
-      if (o.clearRect(0, 0, e.width, e.height), r !== -1e3 && s !== -1e3) {
-        const n = o.createRadialGradient(r, s, 0, r, s, t.radius || 200), i = h(t.color);
-        n.addColorStop(0, `rgba(${i}, ${t.brightness})`), n.addColorStop(1, "rgba(0,0,0,0)"), o.fillStyle = n, o.fillRect(0, 0, e.width, e.height);
+      if (n.clearRect(0, 0, e.width, e.height), r !== -1e3 && i !== -1e3) {
+        const o = n.createRadialGradient(r, i, 0, r, i, t.radius || 200), s = p(t.color);
+        o.addColorStop(0, `rgba(${s}, ${t.brightness})`), o.addColorStop(1, "rgba(0,0,0,0)"), n.fillStyle = o, n.fillRect(0, 0, e.width, e.height);
       }
-      d = requestAnimationFrame(u);
+      c = requestAnimationFrame(m);
     };
-    return c(), window.addEventListener("resize", c), window.addEventListener("mousemove", l), window.addEventListener("mouseleave", m), d = requestAnimationFrame(u), () => {
-      window.removeEventListener("resize", c), window.removeEventListener("mousemove", l), window.removeEventListener("mouseleave", m), cancelAnimationFrame(d);
+    return d(), window.addEventListener("resize", d), window.addEventListener("mousemove", u), window.addEventListener("mouseleave", h), c = requestAnimationFrame(m), () => {
+      window.removeEventListener("resize", d), window.removeEventListener("mousemove", u), window.removeEventListener("mouseleave", h), cancelAnimationFrame(c);
     };
   }, [t.radius, t.brightness, t.color]), a;
-}, S = ({
+}, l = ({
   config: t = { radius: 200, brightness: 0.15, color: "#0000ff", smoothing: 0.1 },
   className: a,
   ...e
 }) => {
-  const o = b(t);
-  return /* @__PURE__ */ g.jsx(
-    E,
+  const n = x(t);
+  return /* @__PURE__ */ w.jsx(
+    C,
     {
       component: "canvas",
-      ref: o,
+      ref: n,
       className: a,
       sx: {
         position: "fixed",
@@ -54,6 +54,12 @@ const b = (t) => {
     }
   );
 };
+l.displayName = "SSpotlightCursor";
+try {
+  l.displayName = "SSpotlightCursor", l.__docgenInfo = { description: "Creates an interactive spotlight effect that follows the mouse cursor.", displayName: "SSpotlightCursor", props: { config: { defaultValue: { value: "{ radius: 200, brightness: 0.15, color: '#0000ff', smoothing: 0.1 }" }, description: "Configuration object for spotlight appearance and behavior", name: "config", required: !1, type: { name: "SpotlightConfig" } } } };
+} catch {
+}
 export {
-  S as default
+  l as SSpotlightCursor,
+  l as default
 };

package/dist/s-stripe/index.d.ts

@@ -1,2 +1,5 @@
-export { SStripeNumber, SStripeExpiry, SStripeCVC, StripeTextField } from './s-stripe';
+export { StripeTextField } from './s-stripe';
+export { SStripeNumber } from './s-stripe-number';
+export { SStripeExpiry } from './s-stripe-expiry';
+export { SStripeCVC } from './s-stripe-cvc';
 export type { StripeTextFieldProps, StripeElement } from './s-stripe';

package/dist/s-stripe/index.js

@@ -1,7 +1,10 @@
-import { SStripeCVC as S, SStripeExpiry as i, SStripeNumber as p, StripeTextField as t } from "./s-stripe.js";
+import { StripeTextField as p } from "./s-stripe.js";
+import { SStripeNumber as o } from "./s-stripe-number.js";
+import { SStripeExpiry as i } from "./s-stripe-expiry.js";
+import { SStripeCVC as m } from "./s-stripe-cvc.js";
 export {
-  S as SStripeCVC,
+  m as SStripeCVC,
   i as SStripeExpiry,
-  p as SStripeNumber,
-  t as StripeTextField
+  o as SStripeNumber,
+  p as StripeTextField
 };

package/dist/s-stripe/s-stripe-cvc.d.ts

@@ -0,0 +1,8 @@
+import { CardCvcElement } from '@stripe/react-stripe-js';
+import { StripeTextFieldProps } from './s-stripe';
+/** Card security code (CVC/CVV) input field with Stripe integration. */
+export declare function SStripeCVC(props: StripeTextFieldProps<typeof CardCvcElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SStripeCVC {
+    var displayName: string;
+}
+export default SStripeCVC;

package/dist/s-stripe/s-stripe-cvc.js

@@ -0,0 +1,15 @@
+import { j as r } from "../jsx-runtime-OVHDjVDe.js";
+import { CardCvcElement as n } from "@stripe/react-stripe-js";
+import { StripeTextField as a } from "./s-stripe.js";
+function e(t) {
+  return /* @__PURE__ */ r.jsx(a, { label: "CVC", stripeElement: n, ...t });
+}
+e.displayName = "SStripeCVC";
+try {
+  e.displayName = "SStripeCVC", e.__docgenInfo = { description: "Card security code (CVC/CVV) input field with Stripe integration.", displayName: "SStripeCVC", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardCvcElementProps" } }, labelErrorMessage: { defaultValue: null, description: "Custom error message to display when validation fails", name: "labelErrorMessage", required: !1, type: { name: "string" } }, onChange: { defaultValue: null, description: "Change handler for Stripe Element events", name: "onChange", required: !1, type: { name: "((event: StripeCardCvcElementChangeEvent) => any)" } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "CardCvcElementComponent" } } } };
+} catch {
+}
+export {
+  e as SStripeCVC,
+  e as default
+};

package/dist/s-stripe/s-stripe-expiry.d.ts

@@ -0,0 +1,8 @@
+import { CardExpiryElement } from '@stripe/react-stripe-js';
+import { StripeTextFieldProps } from './s-stripe';
+/** Card expiration date input field with Stripe integration. */
+export declare function SStripeExpiry(props: StripeTextFieldProps<typeof CardExpiryElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SStripeExpiry {
+    var displayName: string;
+}
+export default SStripeExpiry;

package/dist/s-stripe/s-stripe-expiry.js

@@ -0,0 +1,15 @@
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import { CardExpiryElement as i } from "@stripe/react-stripe-js";
+import { StripeTextField as n } from "./s-stripe.js";
+function e(r) {
+  return /* @__PURE__ */ t.jsx(n, { label: "Expiration", stripeElement: i, ...r });
+}
+e.displayName = "SStripeExpiry";
+try {
+  e.displayName = "SStripeExpiry", e.__docgenInfo = { description: "Card expiration date input field with Stripe integration.", displayName: "SStripeExpiry", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardExpiryElementProps" } }, labelErrorMessage: { defaultValue: null, description: "Custom error message to display when validation fails", name: "labelErrorMessage", required: !1, type: { name: "string" } }, onChange: { defaultValue: null, description: "Change handler for Stripe Element events", name: "onChange", required: !1, type: { name: "((event: StripeCardExpiryElementChangeEvent) => any)" } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "CardExpiryElementComponent" } } } };
+} catch {
+}
+export {
+  e as SStripeExpiry,
+  e as default
+};

package/dist/s-stripe/s-stripe-number.d.ts

@@ -0,0 +1,8 @@
+import { CardNumberElement } from '@stripe/react-stripe-js';
+import { StripeTextFieldProps } from './s-stripe';
+/** Card number input field with Stripe integration. */
+export declare function SStripeNumber(props: StripeTextFieldProps<typeof CardNumberElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SStripeNumber {
+    var displayName: string;
+}
+export default SStripeNumber;

package/dist/s-stripe/s-stripe-number.js

@@ -0,0 +1,15 @@
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import { CardNumberElement as n } from "@stripe/react-stripe-js";
+import { StripeTextField as a } from "./s-stripe.js";
+function e(r) {
+  return /* @__PURE__ */ t.jsx(a, { label: "Card Number", stripeElement: n, ...r });
+}
+e.displayName = "SStripeNumber";
+try {
+  e.displayName = "SStripeNumber", e.__docgenInfo = { description: "Card number input field with Stripe integration.", displayName: "SStripeNumber", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardNumberElementProps" } }, labelErrorMessage: { defaultValue: null, description: "Custom error message to display when validation fails", name: "labelErrorMessage", required: !1, type: { name: "string" } }, onChange: { defaultValue: null, description: "Change handler for Stripe Element events", name: "onChange", required: !1, type: { name: "((event: StripeCardNumberElementChangeEvent) => any)" } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "CardNumberElementComponent" } } } };
+} catch {
+}
+export {
+  e as SStripeNumber,
+  e as default
+};

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

@@ -19,88 +19,9 @@ export interface StripeTextFieldProps<T extends StripeElement> extends Omit<STex
     /** The Stripe Element component to render */
     stripeElement?: T;
 }
-/**
- * Generic Stripe text field component that integrates Stripe Elements with Material-UI styling
- *
- * Creates a seamless integration between Stripe payment elements and the application's
- * Material-UI design system. Handles the complex integration of Stripe's iframe-based
- * elements with Material-UI's text field styling and behavior.
- *
- * Features:
- * - Consistent Material-UI styling for Stripe elements
- * - Proper label shrinking behavior
- * - Error state handling with custom messages
- * - Theme-aware styling that adapts to dark/light modes
- * - Focus management integration
- *
- * @param props - Configuration props including Stripe element and styling options
- * @returns JSX element containing integrated Stripe element with Material-UI styling
- */
-export declare const StripeTextField: <T extends StripeElement>(props: StripeTextFieldProps<T>) => import("react/jsx-runtime").JSX.Element;
-/**
- * Card number input field with Stripe integration
- *
- * Pre-configured Stripe text field specifically for card number entry.
- * Handles card number formatting, validation, and brand detection automatically.
- *
- * @param props - StripeTextFieldProps configured for CardNumberElement
- * @returns JSX element containing card number input field
- *
- * @example
- * ```tsx
- * <SStripeNumber
- *   onChange={(event) => {
- *     if (event.complete) {
- *       console.log('Card number is valid');
- *     }
- *   }}
- *   inputProps={{
- *     placeholder: '1234 5678 9012 3456'
- *   }}
- * />
- * ```
- */
-export declare function SStripeNumber(props: StripeTextFieldProps<typeof CardNumberElement>): import("react/jsx-runtime").JSX.Element;
-/**
- * Card expiration date input field with Stripe integration
- *
- * Pre-configured Stripe text field for card expiration date entry.
- * Automatically formats input as MM/YY and validates expiration dates.
- *
- * @param props - StripeTextFieldProps configured for CardExpiryElement
- * @returns JSX element containing expiration date input field
- *
- * @example
- * ```tsx
- * <SStripeExpiry
- *   onChange={(event) => {
- *     if (event.error) {
- *       setError(event.error.message);
- *     }
- *   }}
- * />
- * ```
- */
-export declare function SStripeExpiry(props: StripeTextFieldProps<typeof CardExpiryElement>): import("react/jsx-runtime").JSX.Element;
-/**
- * Card security code (CVC/CVV) input field with Stripe integration
- *
- * Pre-configured Stripe text field for card security code entry.
- * Automatically adjusts expected length based on detected card brand
- * (3 digits for most cards, 4 for American Express).
- *
- * @param props - StripeTextFieldProps configured for CardCvcElement
- * @returns JSX element containing CVC input field
- *
- * @example
- * ```tsx
- * <SStripeCVC
- *   onChange={(event) => {
- *     if (event.complete) {
- *       console.log('CVC is valid');
- *     }
- *   }}
- * />
- * ```
- */
-export declare function SStripeCVC(props: StripeTextFieldProps<typeof CardCvcElement>): import("react/jsx-runtime").JSX.Element;
+/** Generic Stripe text field component that integrates Stripe Elements with Material-UI styling. */
+export declare const StripeTextField: {
+    <T extends StripeElement>(props: StripeTextFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default StripeTextField;

package/dist/s-stripe/s-stripe.js

@@ -1,12 +1,11 @@
-import { j as r } from "../jsx-runtime-OVHDjVDe.js";
-import { CardNumberElement as a, CardExpiryElement as E, CardCvcElement as s } from "@stripe/react-stripe-js";
-import C from "../s-text-field/s-text-field.js";
-import b from "./stripe-input.js";
-const n = (t) => {
-  var p;
-  const { helperText: u, slotProps: e, inputProps: m, error: i, labelErrorMessage: l, stripeElement: o, ...x } = t;
-  return /* @__PURE__ */ r.jsx(
-    C,
+import { j as m } from "../jsx-runtime-OVHDjVDe.js";
+import { STextField as d } from "../s-text-field/s-text-field.js";
+import u from "./stripe-input.js";
+const r = (t) => {
+  var a;
+  const { helperText: i, slotProps: e, inputProps: p, error: n, labelErrorMessage: l, stripeElement: s, ...o } = t;
+  return /* @__PURE__ */ m.jsx(
+    d,
     {
       fullWidth: !0,
       slotProps: {
@@ -18,33 +17,31 @@ const n = (t) => {
         input: {
           ...e == null ? void 0 : e.input,
           inputProps: {
-            ...m,
-            ...(p = e == null ? void 0 : e.input) == null ? void 0 : p.inputProps,
-            component: o
+            ...p,
+            ...(a = e == null ? void 0 : e.input) == null ? void 0 : a.inputProps,
+            component: s
             // Pass Stripe element as component
           },
-          inputComponent: b
+          inputComponent: u
           // Custom input component for Stripe integration
         }
       },
-      error: i,
-      helperText: i ? l : u,
-      ...x
+      error: n,
+      helperText: n ? l : i,
+      ...o
     }
   );
 };
-function j(t) {
-  return /* @__PURE__ */ r.jsx(n, { label: "Card Number", stripeElement: a, ...t });
+r.displayName = "StripeTextField";
+try {
+  r.displayName = "StripeTextField", r.__docgenInfo = { description: "Generic Stripe text field component that integrates Stripe Elements with Material-UI styling.", displayName: "StripeTextField", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardCvcElementProps | CardExpiryElementProps | CardNumberElementProps | AuBankAccountElementProps | FpxBankElementProps | IbanElementProps | IdealBankElementProps" } }, labelErrorMessage: { defaultValue: null, description: "Custom error message to display when validation fails", name: "labelErrorMessage", required: !1, type: { name: "string" } }, onChange: { defaultValue: null, description: "Change handler for Stripe Element events", name: "onChange", required: !1, type: { name: "((event: StripeCardCvcElementChangeEvent) => any) | ((event: StripeCardExpiryElementChangeEvent) => any) | ... 5 more ..." } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "StripeElement" } } } };
+} catch {
 }
-function h(t) {
-  return /* @__PURE__ */ r.jsx(n, { label: "Expiration", stripeElement: E, ...t });
-}
-function T(t) {
-  return /* @__PURE__ */ r.jsx(n, { label: "CVC", stripeElement: s, ...t });
+try {
+  sstripe.displayName = "sstripe", sstripe.__docgenInfo = { description: "Generic Stripe text field component that integrates Stripe Elements with Material-UI styling.", displayName: "sstripe", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardCvcElementProps | CardExpiryElementProps | CardNumberElementProps | AuBankAccountElementProps | FpxBankElementProps | IbanElementProps | IdealBankElementProps" } }, labelErrorMessage: { defaultValue: null, description: "Custom error message to display when validation fails", name: "labelErrorMessage", required: !1, type: { name: "string" } }, onChange: { defaultValue: null, description: "Change handler for Stripe Element events", name: "onChange", required: !1, type: { name: "((event: StripeCardCvcElementChangeEvent) => any) | ((event: StripeCardExpiryElementChangeEvent) => any) | ... 5 more ..." } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "StripeElement" } } } };
+} catch {
 }
 export {
-  T as SStripeCVC,
-  h as SStripeExpiry,
-  j as SStripeNumber,
-  n as StripeTextField
+  r as StripeTextField,
+  r as default
 };

package/dist/s-stripe/stripe-input.js

@@ -1,18 +1,18 @@
-import { j as l } from "../jsx-runtime-OVHDjVDe.js";
-import * as t from "react";
-import { gray as d } from "../theme/theme-primitives.js";
-import '../assets/stripe-input.css';const f = t.forwardRef(function(r, s) {
-  const { component: n, options: a, ...o } = r, [e, i] = t.useState(null);
-  return t.useImperativeHandle(
-    s,
+import { j as d } from "../jsx-runtime-OVHDjVDe.js";
+import * as e from "react";
+import { gray as l } from "../theme/theme-primitives.js";
+import '../assets/stripe-input.css';const m = e.forwardRef(function(i, n) {
+  const { component: s, options: a, ...t } = i, [o, p] = e.useState(null);
+  return e.useImperativeHandle(
+    n,
     () => ({
-      focus: () => e.focus()
+      focus: () => o.focus()
     }),
-    [e]
-  ), /* @__PURE__ */ l.jsx(
-    n,
+    [o]
+  ), /* @__PURE__ */ d.jsx(
+    s,
     {
-      onReady: i,
+      onReady: p,
       options: {
         ...a,
         style: {
@@ -20,26 +20,30 @@ import '../assets/stripe-input.css';const f = t.forwardRef(function(r, s) {
             fontFamily: "Outfit, sans-serif",
             lineHeight: "1.5",
             color: "rgb(255, 255, 255)",
-            ...o.disabled && {
+            ...t.disabled && {
               color: "rgba(255, 255, 255, 0.5)"
               // for disabled state
             },
             "&::placeholder": {
-              color: d[600],
-              ...o.disabled && {
+              color: l[600],
+              ...t.disabled && {
                 color: "rgba(255, 255, 255, 0.5)"
                 // for disabled state
               }
             }
           }
         },
-        disabled: o.disabled
+        disabled: t.disabled
         // Pass through the disabled state to Stripe Element
       },
-      ...o
+      ...t
     }
   );
 });
+try {
+  stripeinput.displayName = "stripeinput", stripeinput.__docgenInfo = { description: "Forward ref component for Stripe Elements integration with Material-UI", displayName: "stripeinput", props: {} };
+} catch {
+}
 export {
-  f as default
+  m as default
 };

package/dist/s-tabs/index.js

@@ -1,8 +1,8 @@
-import { default as f } from "./s-tabs.js";
-import { default as r } from "./s-tab.js";
-import { default as l } from "./s-tab-panel.js";
+import { STabs as r } from "./s-tabs.js";
+import { default as f } from "./s-tab.js";
+import { STabPanel as b } from "./s-tab-panel.js";
 export {
-  r as STab,
-  l as STabPanel,
-  f as STabs
+  f as STab,
+  b as STabPanel,
+  r as STabs
 };

package/dist/s-tabs/s-tab-panel.d.ts

@@ -1,10 +1,20 @@
 import { default as React } from 'react';
 import { BoxProps } from '@mui/material';
+/**
+ * Props interface for STabPanel component
+ */
 export interface STabPanelProps extends BoxProps {
+    /** Content to display in the tab panel */
     children?: React.ReactNode;
+    /** Index of this specific tab panel (0-based) */
     index: number;
+    /** Current active tab index from the parent tabs component */
     value: number;
+    /** Keep the panel mounted in the DOM when not active */
     keepMounted?: boolean;
 }
-declare const STabPanel: React.ForwardRefExoticComponent<Omit<STabPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Individual tab content panel component with advanced mounting controls.
+ */
+export declare const STabPanel: React.ForwardRefExoticComponent<Omit<STabPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default STabPanel;

package/dist/s-tabs/s-tab-panel.js

@@ -1,28 +1,37 @@
-import { j as d } from "../jsx-runtime-OVHDjVDe.js";
-import { forwardRef as i } from "react";
-import { Box as p } from "@mui/material";
-const b = i(
-  ({ children: o, value: r, index: a, keepMounted: l = !1, sx: t, ...s }, n) => {
-    const e = r === a;
-    return e || l ? /* @__PURE__ */ d.jsx(
-      p,
+import { j as p } from "../jsx-runtime-OVHDjVDe.js";
+import { forwardRef as u } from "react";
+import { Box as s } from "@mui/material";
+const t = u(
+  ({ children: e, value: l, index: a, keepMounted: r = !1, sx: d, ...i }, o) => {
+    const n = l === a;
+    return n || r ? /* @__PURE__ */ p.jsx(
+      s,
       {
-        ref: n,
+        ref: o,
         role: "tabpanel",
-        hidden: !e,
+        hidden: !n,
         id: `tabpanel-${a}`,
         "aria-labelledby": `tab-${a}`,
         sx: {
-          ...t,
-          display: e ? "block" : "none"
+          ...d,
+          display: n ? "block" : "none"
         },
-        ...s,
-        children: o
+        ...i,
+        children: e
       }
     ) : null;
   }
 );
-b.displayName = "STabPanel";
+t.displayName = "STabPanel";
+try {
+  t.displayName = "STabPanel", t.__docgenInfo = { description: "Individual tab content panel component with advanced mounting controls.", displayName: "STabPanel", props: { children: { defaultValue: null, description: "Content to display in the tab panel", name: "children", required: !1, type: { name: "ReactNode" } }, value: { defaultValue: null, description: "Current active tab index from the parent tabs component", name: "value", required: !0, type: { name: "number" } }, index: { defaultValue: null, description: "Index of this specific tab panel (0-based)", name: "index", required: !0, type: { name: "number" } }, keepMounted: { defaultValue: { value: "false" }, description: "Keep the panel mounted in the DOM when not active", name: "keepMounted", required: !1, type: { name: "boolean" } } } };
+} catch {
+}
+try {
+  stabpanel.displayName = "stabpanel", stabpanel.__docgenInfo = { description: "Individual tab content panel component with advanced mounting controls.", displayName: "stabpanel", props: { children: { defaultValue: null, description: "Content to display in the tab panel", name: "children", required: !1, type: { name: "ReactNode" } }, value: { defaultValue: null, description: "Current active tab index from the parent tabs component", name: "value", required: !0, type: { name: "number" } }, index: { defaultValue: null, description: "Index of this specific tab panel (0-based)", name: "index", required: !0, type: { name: "number" } }, keepMounted: { defaultValue: { value: "false" }, description: "Keep the panel mounted in the DOM when not active", name: "keepMounted", required: !1, type: { name: "boolean" } } } };
+} catch {
+}
 export {
-  b as default
+  t as STabPanel,
+  t as default
 };

package/dist/s-tabs/s-tab.js

@@ -1,8 +1,12 @@
-import { j as a } from "../jsx-runtime-OVHDjVDe.js";
+import { j as e } from "../jsx-runtime-OVHDjVDe.js";
 import { forwardRef as t } from "react";
-import { Tab as m } from "@mui/material";
-const s = t((r, o) => /* @__PURE__ */ a.jsx(m, { ref: o, ...r }));
-s.displayName = "STab";
+import { Tab as p } from "@mui/material";
+const r = t((a, o) => /* @__PURE__ */ e.jsx(p, { ref: o, ...a }));
+r.displayName = "STab";
+try {
+  r.displayName = "STab", r.__docgenInfo = { description: "", displayName: "STab", props: {} };
+} catch {
+}
 export {
-  s as default
+  r as default
 };