@solostylist/ui-kit 1.0.79 → 1.0.80

package/dist/s-snackbar-message/s-snackbar-message.d.ts

@@ -1,28 +1,82 @@
 import { AlertProps, SnackbarProps } from '@mui/material';
 import * as React from 'react';
-interface SSnackbarMessageProps {
+/**
+ * Props interface for SSnackbarMessage component
+ */
+export interface SSnackbarMessageProps {
+    /** Message content - can be string or React element */
     message?: string | React.ReactNode;
+    /** Callback fired when snackbar should close */
     onClose?: () => void;
+    /** Whether the snackbar is open */
     open?: boolean;
+    /** Additional props passed to the Snackbar component */
     snackbarProps?: SnackbarProps;
+    /** Additional props passed to the Alert component */
     alertProps?: AlertProps;
 }
+/**
+ * SSnackbarMessage - A notification snackbar component that displays temporary messages.
+ * Combines Material-UI Snackbar with Alert for styled notifications.
+ *
+ * Key features:
+ * - Auto-hide after 10 seconds by default
+ * - Positioned at top-center for better visibility
+ * - Uses Alert component for consistent styling and severity levels
+ * - Configurable Snackbar and Alert props for customization
+ * - Default error severity (can be overridden via alertProps)
+ * - Full-width alert for better readability
+ *
+ * @param props - SSnackbarMessageProps with message and configuration
+ * @returns JSX.Element - Snackbar notification with Alert styling
+ */
 declare const SSnackbarMessage: ({ message, onClose, open, snackbarProps, alertProps, }: SSnackbarMessageProps) => React.JSX.Element;
 export default SSnackbarMessage;
+/**
+ * Options for opening a snackbar message
+ */
 export interface SnackbarMessageOpenOptions {
+    /** The message to display */
     message: string;
 }
+/**
+ * Parameters for the handleOpen function
+ */
 export interface handleOpenParams {
+    /** Message configuration */
     snackbarMessageOptions: SnackbarMessageOpenOptions;
+    /** Optional Snackbar props for customization */
     snackbarProps?: SnackbarProps;
+    /** Optional Alert props for customization */
     alertProps?: AlertProps;
 }
+/**
+ * Context value interface for SnackbarMessage system
+ */
 export interface SnackbarMessageContextProps {
+    /** Function to open a snackbar message with optional customization */
     handleOpen: ({ snackbarMessageOptions, snackbarProps, alertProps }: handleOpenParams) => void;
+    /** Function to close the snackbar */
     handleClose: () => void;
+    /** Current open state of the snackbar */
     open: boolean;
 }
+/**
+ * Provider component that manages a global snackbar notification system.
+ * This enables any component in the app to display toast-like notifications
+ * without managing snackbar state locally.
+ *
+ * @param children - Child components that can use the snackbar context
+ * @returns JSX.Element - Provider with snackbar management and rendered snackbar
+ */
 export declare const SnackbarMessageProvider: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
+/**
+ * Hook to access the snackbar message context.
+ * Must be used within a SnackbarMessageProvider.
+ *
+ * @returns SnackbarMessageContextProps - Context with snackbar management functions
+ * @throws Error if used outside of SnackbarMessageProvider
+ */
 export declare const useSnackbarMessage: () => SnackbarMessageContextProps;

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

@@ -1,13 +1,106 @@
 import { AuBankAccountElement, CardCvcElement, CardExpiryElement, CardNumberElement, FpxBankElement, IbanElement, IdealBankElement } from '@stripe/react-stripe-js';
 import { STextFieldProps } from '../s-text-field';
+/**
+ * Union type of all supported Stripe Elements
+ * Includes card payment elements and various regional payment methods
+ */
 export type StripeElement = typeof AuBankAccountElement | typeof CardCvcElement | typeof CardExpiryElement | typeof CardNumberElement | typeof FpxBankElement | typeof IbanElement | typeof IdealBankElement;
+/**
+ * Props for Stripe-integrated text field components
+ * Extends STextField props but excludes conflicting props that are handled by Stripe
+ */
 export interface StripeTextFieldProps<T extends StripeElement> extends Omit<STextFieldProps, 'onChange' | 'inputComponent' | 'inputProps'> {
+    /** Props passed directly to the Stripe Element */
     inputProps?: React.ComponentProps<T>;
+    /** Custom error message to display when validation fails */
     labelErrorMessage?: string;
+    /** Change handler for Stripe Element events */
     onChange?: React.ComponentProps<T>['onChange'];
+    /** 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;

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

@@ -13,6 +13,7 @@ const n = (t) => {
         inputLabel: {
           ...e == null ? void 0 : e.inputLabel,
           shrink: !0
+          // Always shrink label since Stripe elements don't support placeholder-driven shrinking
         },
         input: {
           ...e == null ? void 0 : e.input,
@@ -20,8 +21,10 @@ const n = (t) => {
             ...m,
             ...(p = e == null ? void 0 : e.input) == null ? void 0 : p.inputProps,
             component: o
+            // Pass Stripe element as component
           },
           inputComponent: b
+          // Custom input component for Stripe integration
         }
       },
       error: i,

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

@@ -1,4 +1,27 @@
 import { InputBaseComponentProps } from '@mui/material/InputBase';
 import * as React from 'react';
+/**
+ * Stripe input component with Material-UI theme integration
+ *
+ * A wrapper component that adapts Stripe Elements to work seamlessly with
+ * Material-UI's input styling system. Handles theme-aware styling and
+ * provides proper focus management integration.
+ *
+ * Features:
+ * - Automatic theme-based text coloring (dark/light mode support)
+ * - Focus management through imperative handle
+ * - Seamless integration with Material-UI form components
+ * - Stripe Elements styling customization
+ *
+ * This component is typically used internally by SStripe components
+ * rather than directly in application code.
+ */
+/**
+ * Forward ref component for Stripe Elements integration with Material-UI
+ *
+ * @param props - InputBase component props with additional Stripe-specific options
+ * @param ref - Forward ref for focus management
+ * @returns JSX element containing configured Stripe element
+ */
 declare const StripeInput: React.ForwardRefExoticComponent<Omit<InputBaseComponentProps, "ref"> & React.RefAttributes<any>>;
 export default StripeInput;

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

@@ -18,6 +18,7 @@ const R = o.forwardRef(function(e, r) {
         ...s,
         style: {
           base: {
+            // Apply theme-appropriate text color
             color: a.palette.mode === "dark" ? "rgb(255, 255, 255)" : c[800]
           }
         }

package/dist/s-text-editor/index.d.ts

@@ -1,2 +1,4 @@
 export { default } from './s-text-editor';
 export type { STextEditorProps } from './s-text-editor';
+export { STextEditorToolbar } from './s-text-editor-toolbar';
+export type { STextEditorToolbarProps } from './s-text-editor-toolbar';

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

@@ -1,4 +1,6 @@
-import { default as o } from "./s-text-editor.js";
+import { default as t } from "./s-text-editor.js";
+import { STextEditorToolbar as f } from "./s-text-editor-toolbar.js";
 export {
-  o as default
+  f as STextEditorToolbar,
+  t as default
 };

package/dist/s-text-editor/s-text-editor-toolbar.d.ts

@@ -1,6 +1,39 @@
 import { Editor } from '@tiptap/react';
 import * as React from 'react';
+/**
+ * Props for the STextEditorToolbar component
+ */
 export interface STextEditorToolbarProps {
+    /** The Tiptap editor instance - null when editor is not yet initialized */
     editor: Editor | null;
 }
+/**
+ * Rich text editor toolbar component with comprehensive formatting controls
+ *
+ * Provides a full-featured toolbar for text formatting including:
+ * - Text styles: paragraph, headings (H1-H6)
+ * - Format options: bold, italic, strikethrough
+ * - Lists: bulleted and numbered
+ * - Code blocks
+ * - Link management with popover interface
+ *
+ * The toolbar dynamically enables/disables controls based on editor capabilities
+ * and current selection context. Link editing is handled through a popover with
+ * URL input field.
+ *
+ * @param editor - The Tiptap editor instance (null during initialization)
+ * @returns JSX element containing the complete editor toolbar
+ *
+ * @example
+ * ```tsx
+ * const editor = useEditor({ extensions: [...] });
+ *
+ * return (
+ *   <div>
+ *     <STextEditorToolbar editor={editor} />
+ *     <EditorContent editor={editor} />
+ *   </div>
+ * );
+ * ```
+ */
 export declare const STextEditorToolbar: ({ editor }: STextEditorToolbarProps) => React.JSX.Element;

package/dist/s-text-editor/s-text-editor-toolbar.js

@@ -1,12 +1,12 @@
 import { j as c } from "../jsx-runtime-DywqP_6a.js";
 import * as r from "react";
-import { c as t } from "../createSvgIcon-DN-sh_sr.js";
+import { c as t } from "../createSvgIcon-9XY7lJan.js";
 import { MenuItem as u } from "@mui/material";
 import { usePopover as g } from "../hooks/use-popover.js";
 import m from "../s-text-field/s-text-field.js";
-import { I as f, S as x, F as d } from "../Select-D54ugORZ.js";
-import { S as v } from "../Stack-ISlVeD89.js";
-import { P as j } from "../Menu-CGTDGEoX.js";
+import { I as f, S as x, F as d } from "../Select-CT0Hpudx.js";
+import { S as v } from "../Stack-W0weBtf9.js";
+import { P as j } from "../Menu-DbldWmqB.js";
 const k = t(/* @__PURE__ */ c.jsx("path", {
   d: "M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zm5.2 0 4.6-4.6-4.6-4.6L16 6l6 6-6 6z"
 }), "Code"), H = t(/* @__PURE__ */ c.jsx("path", {

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

@@ -5,7 +5,7 @@ import { Placeholder as m } from "@tiptap/extension-placeholder";
 import { useEditor as c, EditorContent as f } from "@tiptap/react";
 import { StarterKit as u } from "@tiptap/starter-kit";
 import { STextEditorToolbar as x } from "./s-text-editor-toolbar.js";
-import { B as d } from "../Box-reWd7MO-.js";
+import { B as d } from "../Box-Bfkq7uIw.js";
 const z = ({
   content: r,
   editable: o = !0,

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

@@ -1,11 +1,34 @@
 import { default as React } from 'react';
 import { TextField } from '@mui/material';
+/**
+ * Props for STextField component - extends Material-UI TextField props
+ * but replaces the 'error' prop to use string messages instead of boolean
+ */
 export type STextFieldProps = Omit<React.ComponentProps<typeof TextField>, 'error'> & {
+    /** Field label displayed above the input */
     label?: string | React.ReactNode;
+    /** Whether the field is required (shows asterisk in label) */
     required?: boolean;
+    /** Error message to display (string instead of boolean for better UX) */
     error?: string;
+    /** HTML id attribute for the input element */
     htmlFor?: string;
+    /** Help text shown in tooltip next to the label */
     hint?: string;
 };
+/**
+ * STextField - A standardized text input component that wraps Material-UI TextField
+ * with consistent form labeling, validation, and help text patterns.
+ *
+ * Key features:
+ * - Integrates with SForm for consistent label and error handling
+ * - Supports string-based error messages for better user experience
+ * - Maintains full Material-UI TextField API compatibility
+ * - Provides accessible form labeling with htmlFor/id association
+ * - Includes help text tooltip functionality
+ *
+ * @param props - STextFieldProps with form integration and Material-UI TextField props
+ * @returns JSX.Element - Wrapped TextField with form labeling and validation
+ */
 declare const STextField: ({ label, required, error, type, htmlFor, hint, ...props }: STextFieldProps) => React.JSX.Element;
 export default STextField;

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

@@ -1,6 +1,36 @@
 import { default as React } from 'react';
+/**
+ * Props for the STextTruncation component
+ */
 export interface STextTruncationProps {
+    /** The text content to display with truncation functionality */
     text?: string;
 }
+/**
+ * Text truncation component with expandable "See more" functionality
+ *
+ * Automatically truncates long text content and provides a "See more" link
+ * to expand the full content. The truncation threshold is set at 20 words.
+ * Uses CSS classes for styling the truncated vs expanded states.
+ *
+ * Features:
+ * - Automatic word count-based truncation (20+ words triggers truncation)
+ * - Toggle between truncated and expanded states
+ * - CSS class-based styling for different states
+ * - Accessible link interaction for expansion/collapse
+ *
+ * Requires accompanying CSS file (./index.css) that defines:
+ * - .truncated-text: Styling for truncated state
+ * - .full-text: Styling for expanded state
+ * - .see-more: Styling for the toggle link
+ *
+ * @param text - The text content to display and potentially truncate
+ * @returns JSX element containing text with optional truncation controls
+ *
+ * @example
+ * ```tsx
+ * <STextTruncation text="Very long text content that will be truncated after twenty words and show a see more link for users to expand the full content when needed..." />
+ * ```
+ */
 declare const STextTruncation: ({ text }: STextTruncationProps) => React.JSX.Element;
 export default STextTruncation;

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

@@ -1,14 +1,35 @@
 import { Theme, ThemeOptions, ThemeProviderProps } from '@mui/material';
 import * as React from 'react';
+/**
+ * Props interface for SThemeProvider component
+ */
 export interface SThemeProviderProps extends Omit<ThemeProviderProps, 'defaultMode' | 'theme'> {
+    /** Child components to receive theme context */
     children: React.ReactNode;
-    /**
-     * This is for the docs site. You can ignore it or remove it.
-     */
+    /** Disable custom theme for testing/docs (falls back to no theme) */
     disableCustomTheme?: boolean;
+    /** Additional theme component overrides */
     themeComponents?: ThemeOptions['components'];
+    /** Default color mode (defaults to 'dark') */
     defaultMode?: 'light' | 'dark' | 'system' | undefined;
+    /** 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
+ * - Dark 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;
 export default SThemeProvider;

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

@@ -13,21 +13,27 @@ const w = ({
   disableCustomTheme: o,
   themeComponents: t,
   defaultMode: m = "dark",
+  // Dark mode by default
   theme: i,
   ...a
 }) => {
   const n = s.useMemo(() => o ? {} : p({
-    // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
+    // CSS variables configuration for dynamic theming
     cssVariables: {
       colorSchemeSelector: "data-mui-color-scheme",
       cssVarPrefix: "s"
+      // All CSS vars prefixed with '--s-'
     },
     colorSchemes: S,
-    // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
+    // Light/dark color schemes
     typography: j,
+    // Custom typography scales
     shadows: g,
+    // Custom shadow definitions
     shape: z,
+    // Border radius and shape settings
     components: {
+      // Merge all component customizations
       ...d,
       ...u,
       ...h,
@@ -35,6 +41,7 @@ const w = ({
       ...x,
       ...f,
       ...t
+      // Allow external overrides
     }
   }), [o, t]);
   return o ? /* @__PURE__ */ e.jsx(s.Fragment, { children: r }) : /* @__PURE__ */ e.jsx(

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

@@ -1,6 +1,33 @@
 import * as React from 'react';
+/**
+ * Props interface for STip component
+ */
 export interface STipProps {
+    /** The tip message to display */
     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
+ */
 declare const STip: ({ message }: STipProps) => React.JSX.Element;
 export default STip;

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

@@ -1,7 +1,7 @@
 import { j as t } from "../jsx-runtime-DywqP_6a.js";
-import { c as e } from "../createSvgIcon-DN-sh_sr.js";
-import { S as s } from "../Stack-ISlVeD89.js";
-import { T as r } from "../Typography-D38zoHJr.js";
+import { c as e } from "../createSvgIcon-9XY7lJan.js";
+import { S as s } from "../Stack-W0weBtf9.js";
+import { T as r } from "../Typography-CeAbQ9LX.js";
 const a = e(/* @__PURE__ */ t.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: o }) => /* @__PURE__ */ t.jsxs(
@@ -13,9 +13,11 @@ const a = e(/* @__PURE__ */ t.jsx("path", {
       display: "flex",
       alignItems: "center",
       bgcolor: "var(--s-palette-background-default)",
+      // Use CSS custom property for theming
       borderRadius: 1,
       p: 1,
       color: "var(--s-palette-text-secondary)"
+      // Use CSS custom property for theming
     },
     children: [
       /* @__PURE__ */ t.jsx(a, { sx: { fontSize: 16 } }),

package/dist/svgIconClasses-BYFQaEQ7.js

@@ -0,0 +1,10 @@
+import { g as r } from "./colorManipulator-CPZHCebU.js";
+import { g as t } from "./generateUtilityClasses-D-O3RBPF.js";
+function s(o) {
+  return r("MuiSvgIcon", o);
+}
+const n = t("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
+export {
+  s as g,
+  n as s
+};

package/dist/{tabClasses-LXCeUS4i.js → tabClasses-CXQXD3XZ.js}

@@ -1,5 +1,5 @@
-import { g as e } from "./generateUtilityClasses-BpNk3DNr.js";
-import { g as a } from "./createTheme-DuP3DZSF.js";
+import { g as e } from "./generateUtilityClasses-D-O3RBPF.js";
+import { g as a } from "./colorManipulator-CPZHCebU.js";
 function i(t) {
   return a("MuiTab", t);
 }

package/dist/theme/components/avatar.js

@@ -1,5 +1,5 @@
 import { j as r } from "../../jsx-runtime-DywqP_6a.js";
-import { c as o } from "../../createSvgIcon-DN-sh_sr.js";
+import { c as o } from "../../createSvgIcon-9XY7lJan.js";
 const s = o(/* @__PURE__ */ r.jsx("path", {
   d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
 }), "Person"), c = {