@solostylist/ui-kit 1.0.78 → 1.0.80

package/dist/s-moving-border/s-moving-border.d.ts

@@ -1,11 +1,52 @@
 import { default as React } from 'react';
 import { BoxProps } from '@mui/material';
+/**
+ * Props for the SMovingBorder component, extending Material-UI BoxProps
+ */
 export interface SMovingBorderProps extends BoxProps {
+    /** Duration of one complete animation cycle in milliseconds (default: 6000) */
     duration?: number;
+    /** Additional CSS class name for styling */
     className?: string;
+    /** Color of the glow effect (default: '#38bdf8') */
     glowColor?: string;
+    /** Size of the glow effect in pixels (default: 250) */
     glowSize?: number;
+    /** Content to render inside the moving border container */
     children: React.ReactNode;
 }
+/**
+ * Animated border component with moving glow effects
+ *
+ * Creates an animated border with glowing elements that move around the perimeter
+ * of the container. Uses two glow elements with 180° phase offset to create
+ * a continuous flowing effect around rounded rectangle borders.
+ *
+ * Features:
+ * - Smooth animation along border path using SVG and Framer Motion
+ * - Customizable glow color and size
+ * - Two offset glow elements for continuous effect
+ * - Responsive and performant animation using requestAnimationFrame
+ * - Full-width container with padding for glow visibility
+ *
+ * @param className - Additional CSS class for styling
+ * @param duration - Animation cycle duration in milliseconds (default: 6000ms)
+ * @param children - Content to render inside the border
+ * @param glowColor - Color of the moving glow effects (default: bright blue)
+ * @param glowSize - Size of glow effects in pixels (default: 250px)
+ * @param props - Additional Material-UI Box props
+ * @returns JSX element with animated moving border effects
+ *
+ * @example
+ * ```tsx
+ * <SMovingBorder
+ *   duration={4000}
+ *   glowColor="#ff6b6b"
+ *   glowSize={200}
+ * >
+ *   <YourContent />
+ * </SMovingBorder>
+ * ```
+ */
 declare function SMovingBorder({ className, duration, children, glowColor, glowSize, ...props }: SMovingBorderProps): import("react/jsx-runtime").JSX.Element;
 export default SMovingBorder;

package/dist/s-moving-border/s-moving-border.js

@@ -12,7 +12,9 @@ const E = 250, A = "#38bdf8", d = (o, r) => ({
   opacity: 0.5,
   background: `radial-gradient(${r} 40%, transparent 60%)`,
   filter: "blur(12px)",
+  // Creates the soft glow effect
   pointerEvents: "none"
+  // Prevents interference with user interactions
 });
 function m({
   children: o,
@@ -75,7 +77,8 @@ function k({
   const a = x(null), h = x(null);
   return w(() => () => {
     h.current !== null && window.cancelAnimationFrame(h.current);
-  }, []), /* @__PURE__ */ t.jsxs(
+  }, []), // Main container with relative positioning for absolute children
+  /* @__PURE__ */ t.jsxs(
     i,
     {
       position: "relative",
@@ -116,6 +119,7 @@ function k({
                   width: 120,
                   height: 120,
                   opacity: 0,
+                  // Hidden by default
                   filter: "blur(16px)",
                   borderRadius: "50%",
                   transform: "translate(-50%, -50%)",

package/dist/s-multi-select/s-multi-select.d.ts

@@ -1,14 +1,37 @@
 import { SChipsProps } from '../s-chips';
 import * as React from 'react';
+/**
+ * Props interface for SMultiSelect component
+ * @template T - Type of the option values (string, number, or boolean)
+ */
 export interface SMultiSelectProps<T = string> {
+    /** Label text displayed in the input field */
     label: string;
+    /** Callback fired when the selection changes */
     onChange?: (value: T[]) => void;
+    /** Array of options with label and value pairs */
     options: readonly {
         label: string;
         value: T;
     }[];
+    /** Currently selected values */
     value: T[];
+    /** Additional props to pass to the chips component */
     chipProps?: Omit<SChipsProps, 'chips'>;
 }
+/**
+ * SMultiSelect - A multi-selection dropdown component that displays selected items as chips.
+ *
+ * Key features:
+ * - Generic typing for different value types (string, number, boolean)
+ * - Popover-based dropdown menu for option selection
+ * - Selected values displayed as removable chips below the input
+ * - Dynamic menu width matching the input field
+ * - Toggle selection behavior (click to select/deselect)
+ * - Integration with SChips component for consistent chip styling
+ *
+ * @param props - SMultiSelectProps with options, values, and configuration
+ * @returns JSX.Element - Multi-select input with chip display
+ */
 declare function SMultiSelect<T = string>({ label, onChange, options, value, chipProps, }: SMultiSelectProps<T>): React.JSX.Element;
 export default SMultiSelect;

package/dist/s-multi-select/s-multi-select.js

@@ -1,11 +1,11 @@
 import { j as t } from "../jsx-runtime-DywqP_6a.js";
 import * as c from "react";
-import { c as h } from "../createSvgIcon-DN-sh_sr.js";
+import { c as h } from "../createSvgIcon-9XY7lJan.js";
 import { Stack as j, OutlinedInput as M } from "@mui/material";
 import { usePopover as v } from "../hooks/use-popover.js";
 import S from "../s-chips/s-chips.js";
-import { M as R } from "../Menu-CGTDGEoX.js";
-import { M as b } from "../MenuItem-Bdna3McP.js";
+import { M as R } from "../Menu-DbldWmqB.js";
+import { M as b } from "../MenuItem-BHTJlag0.js";
 const I = h(/* @__PURE__ */ t.jsx("path", {
   d: "M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15z"
 }), "UnfoldMore");

package/dist/s-no-ssr/s-no-ssr.d.ts

@@ -1,8 +1,46 @@
 import * as React from 'react';
+/**
+ * Props for the SNoSSR component
+ */
 export interface SNoSsrProps {
+    /** Content to render only on the client side */
     children?: React.ReactNode;
+    /** Whether to defer rendering until after initial paint */
     defer?: boolean;
+    /** Content to show during server-side rendering or while loading */
     fallback?: React.ReactNode;
 }
+/**
+ * Component that prevents server-side rendering of its children
+ *
+ * Based on Material-UI's NoSSR component but without prop-types dependency.
+ * Useful for components that:
+ * - Depend on browser-only APIs (localStorage, document, window)
+ * - Have different server vs client rendering (e.g., dynamic content)
+ * - Need to avoid hydration mismatches
+ * - Require client-side only libraries
+ *
+ * The component uses Material-UI's enhanced effect hook to ensure proper
+ * timing with React's concurrent features and server-side rendering.
+ *
+ * @param children - Content that should only render on client side
+ * @param defer - If true, delays rendering until after initial paint (default: false)
+ * @param fallback - Content to show during SSR and initial client load (default: null)
+ * @returns JSX fragment containing either fallback or children based on mount state
+ *
+ * @example
+ * ```tsx
+ * <SNoSSR fallback={<div>Loading...</div>}>
+ *   <ComponentThatUsesLocalStorage />
+ * </SNoSSR>
+ *
+ * // With defer for performance
+ * <SNoSSR defer fallback={<Skeleton />}>
+ *   <ExpensiveClientOnlyComponent />
+ * </SNoSSR>
+ * ```
+ *
+ * @see https://github.com/mui/material-ui/blob/master/packages/mui-base/src/NoSsr/NoSsr.tsx
+ */
 declare const SNoSsr: (props: SNoSsrProps) => React.JSX.Element;
 export default SNoSsr;

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

@@ -1,8 +1,37 @@
 import { default as React } from 'react';
 import { PaginationProps } from '@mui/material';
+/**
+ * Props for the SPagination component, extending Material-UI's PaginationProps
+ */
 export interface SPaginationProps extends PaginationProps {
+    /** Whether the pagination is in a loading state - shows skeleton when true */
     loading?: boolean;
+    /** Total number of pages - component returns empty fragment when 0 */
     count?: number;
 }
+/**
+ * Enhanced pagination component with responsive sizing and loading states
+ *
+ * Features:
+ * - Responsive sizing (small on mobile, medium on larger screens)
+ * - Loading skeleton state
+ * - Conditional rendering (hidden when count is 0)
+ * - Full-width container layout
+ *
+ * @param loading - When true, displays loading skeleton instead of pagination
+ * @param count - Total number of pages (defaults to 0, hides component when 0)
+ * @param props - All other Material-UI Pagination props
+ * @returns JSX element containing responsive pagination or loading skeleton
+ *
+ * @example
+ * ```tsx
+ * <SPagination
+ *   count={totalPages}
+ *   page={currentPage}
+ *   onChange={handlePageChange}
+ *   loading={isLoading}
+ * />
+ * ```
+ */
 declare const SPagination: ({ loading, count, ...props }: SPaginationProps) => React.JSX.Element;
 export default SPagination;

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

@@ -1,16 +1,51 @@
 import { SelectProps } from '@mui/material';
+/** Base type constraint for select options - can be primitives or objects */
 type BaseOption = string | number | Record<string, any>;
+/**
+ * Props interface for SSelect component - extends Material-UI SelectProps
+ * with enhanced option handling and form integration.
+ *
+ * @template T - Type of the option values (string, number, or object)
+ */
 export type SSelectProps<T extends BaseOption = string> = Omit<SelectProps, 'error' | 'variant'> & {
+    /** Array of options to display in the select dropdown */
     options?: T[];
+    /** Key to use for option display text (required for object options) */
     optionLabel?: T extends object ? keyof T : never;
+    /** Key to use for option values (required for object options) */
     optionValue?: T extends object ? keyof T : never;
+    /** Placeholder text shown when no option is selected */
     placeholder?: string;
+    /** Visual variant of the select input */
     variant?: 'outlined' | 'filled' | 'standard';
+    /** Field label displayed above the select */
     label?: string | React.ReactNode;
+    /** Error message to display below the field */
     error?: string;
+    /** Whether the field is required (shows asterisk in label) */
     required?: boolean;
+    /** Whether to use simple value rendering (for primitive values) */
     simple?: boolean;
+    /** HTML id attribute for the select element */
     htmlFor?: string;
 };
+/**
+ * SSelect - A flexible select component that handles both primitive and object options
+ * with consistent form labeling, validation, and help text patterns.
+ *
+ * Key features:
+ * - Generic typing for type-safe option handling
+ * - Support for both primitive (string/number) and object options
+ * - Configurable option label and value extraction for objects
+ * - Placeholder support with proper styling
+ * - Single and multiple selection modes
+ * - Simple mode for primitive value rendering
+ * - Integrates with SForm for consistent label and error handling
+ * - Proper disabled option support
+ *
+ * @param props - SSelectProps with options, form integration, and Material-UI Select props
+ * @param ref - Forward ref to the underlying Select component
+ * @returns JSX.Element - Wrapped Select with form labeling and enhanced option handling
+ */
 declare const SSelect: import('react').ForwardRefExoticComponent<Omit<SSelectProps<BaseOption>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default SSelect;

package/dist/s-select/s-select.js

@@ -1,59 +1,63 @@
 import { j as u } from "../jsx-runtime-DywqP_6a.js";
-import { forwardRef as b, useState as m, useEffect as V } from "react";
-import { Select as E, MenuItem as O } from "@mui/material";
-import R from "../s-form/s-form.js";
-const M = b(
+import { forwardRef as p, useState as C } from "react";
+import { Select as w, MenuItem as E } from "@mui/material";
+import I from "../s-form/s-form.js";
+const M = p(
   ({
-    options: t = [],
+    options: r = [],
     optionLabel: c = "name",
-    optionValue: i = "id",
-    placeholder: d,
+    optionValue: g = "id",
+    placeholder: s,
     label: v = "",
     error: x,
     required: y = !1,
-    variant: $ = "outlined",
-    simple: g = !1,
-    htmlFor: o,
-    ...n
+    variant: O = "outlined",
+    simple: h = !1,
+    htmlFor: d,
+    ...t
   }, j) => {
-    const [p, S] = m(n.value ?? null);
-    V(() => {
-      S(n.value ?? null);
-    }, [n.value]);
-    const a = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[c]), l = (e) => typeof e == "string" || typeof e == "number" ? e : e[i];
-    return /* @__PURE__ */ u.jsx(R, { error: x, label: v, required: y, htmlFor: o, children: /* @__PURE__ */ u.jsx(
-      E,
+    const i = t.value !== void 0, [S, V] = C(t.multiple ? [] : null), b = i ? t.value : S, o = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[c]), l = (e) => typeof e == "string" || typeof e == "number" ? e : e[g];
+    return /* @__PURE__ */ u.jsx(I, { error: x, label: v, required: y, htmlFor: d, children: /* @__PURE__ */ u.jsx(
+      w,
       {
-        id: o,
+        id: d,
         displayEmpty: !0,
         fullWidth: !0,
         defaultValue: "",
         ref: j,
-        renderValue: n.multiple ? (e) => {
-          const r = e;
-          return r.length === 0 ? /* @__PURE__ */ u.jsx("span", { style: { color: "var(--s-palette-text-secondary)" }, children: d }) : r.map((f) => {
-            const s = t.find((h) => l(h) === l(f));
-            return s ? a(s) : "";
+        renderValue: t.multiple ? (e) => {
+          const n = e;
+          return n.length === 0 ? /* @__PURE__ */ u.jsx("span", { style: { color: "var(--s-palette-text-secondary)" }, children: s }) : n == null ? void 0 : n.map((a) => {
+            const f = r.find((m) => l(m) === l(a));
+            return f ? o(f) : "";
           }).filter(Boolean).join(", ");
         } : (e) => {
-          const r = e;
-          if (r == null || r === "")
-            return /* @__PURE__ */ u.jsx("span", { style: { color: "var(--s-palette-text-secondary)" }, children: d });
-          if (g)
-            return a(r);
-          const f = t.find((s) => l(s) === l(r));
-          return f ? a(f) : "";
+          const n = e;
+          if (n == null || n === "")
+            return /* @__PURE__ */ u.jsx("span", { style: { color: "var(--s-palette-text-secondary)" }, children: s });
+          if (h)
+            return o(n);
+          const a = r.find((f) => l(f) === l(n));
+          return a ? o(a) : "";
         },
-        ...n,
-        value: t.length ? p ?? "" : "",
-        children: t == null ? void 0 : t.map((e, r) => /* @__PURE__ */ u.jsx(
-          O,
+        ...t,
+        value: r.length ? b ?? "" : "",
+        onChange: (e, n) => {
+          if (t.onChange)
+            t.onChange(e, n);
+          else if (!i) {
+            const a = e.target.value;
+            V(a);
+          }
+        },
+        children: r == null ? void 0 : r.map((e, n) => /* @__PURE__ */ u.jsx(
+          E,
           {
             disabled: (e == null ? void 0 : e.disabled) ?? !1,
             value: l(e),
-            children: a(e)
+            children: o(e)
           },
-          `${l(e)}-${r}`
+          `${l(e)}-${n}`
         ))
       }
     ) });

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

@@ -1,11 +1,41 @@
 import { default as React } from 'react';
 import { SkeletonProps } from '@mui/material';
+/**
+ * Props interface for SSkeleton component - extends Material-UI SkeletonProps
+ * with enhanced component presets and customization options
+ */
 export interface SSkeletonProps extends Omit<SkeletonProps, 'variant' | 'height' | 'width' | 'component'> {
+    /** Visual variant of the skeleton */
     variant?: 'circular' | 'rectangular' | 'rounded' | 'text';
+    /** Height of the skeleton (number for px, string for CSS units) */
     height?: number | string;
+    /** Width of the skeleton (number for px, string for CSS units) */
     width?: number | string;
+    /** Font size for text variant skeletons */
     fontSize?: number | string;
-    component?: string;
+    /** Pre-defined component preset for common UI elements */
+    component?: 'button' | 'checkbox' | 'radio-button' | 'avatar' | 'rounded-avatar' | 'icon-button' | 'typography' | 'title-typography';
 }
+/**
+ * SSkeleton - An enhanced skeleton loading component with pre-defined component presets.
+ * Wraps Material-UI Skeleton with common UI element configurations for consistent loading states.
+ *
+ * Key features:
+ * - Pre-defined presets for common UI components (buttons, avatars, checkboxes, etc.)
+ * - Customizable dimensions and font sizes
+ * - All Material-UI Skeleton variants supported
+ * - Consistent sizing across the design system
+ * - Fallback to custom configuration when no preset is specified
+ *
+ * Component presets provide standardized skeleton sizes that match actual component dimensions:
+ * - button: 32px height, rounded variant
+ * - checkbox/radio-button: 24px square/circle
+ * - avatar: 54px square or 48px circle
+ * - icon-button: 32px circle
+ * - typography: Full width text or 200px title
+ *
+ * @param props - SSkeletonProps with preset options and Material-UI Skeleton props
+ * @returns JSX.Element - Configured skeleton based on preset or custom settings
+ */
 declare const SSkeleton: ({ variant, width, height, fontSize, component, ...props }: SSkeletonProps) => React.JSX.Element;
 export default SSkeleton;

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

@@ -1,14 +1,42 @@
 import { AutosuggestionsConfigUserSpecified, CopilotTextarea } from '@copilotkit/react-textarea';
+/**
+ * Props for SSmartTextField component - extends CopilotTextarea props
+ * with form integration and enhanced configuration options
+ */
 export type SSmartTextFieldProps = Omit<React.ComponentProps<typeof CopilotTextarea>, 'autosuggestionsConfig'> & {
+    /** Configuration for AI-powered autosuggestions */
     autosuggestionsConfig?: AutosuggestionsConfigUserSpecified;
+    /** Field label displayed above the textarea */
     label?: string | React.ReactNode;
+    /** Help text shown in tooltip next to the label */
     hint?: string;
+    /** Error message to display below the field */
     error?: string;
+    /** Whether the field is required (shows asterisk in label) */
     required?: boolean;
+    /** HTML id attribute for the textarea element */
     htmlFor?: string;
+    /** Minimum number of visible text rows */
     minRows?: number;
+    /** Maximum number of visible text rows */
     maxRows?: number;
+    /** Initial number of rows (defaults to minRows if not specified) */
     rows?: number;
 };
+/**
+ * SSmartTextField - An AI-powered textarea component that integrates CopilotKit's autosuggestion
+ * capabilities with the design system's form patterns and styling.
+ *
+ * Key features:
+ * - AI-powered text autosuggestions via CopilotKit integration
+ * - Consistent form labeling, validation, and help text patterns via SForm
+ * - Configurable row limits with vertical resize capability
+ * - Theme-aware styling with focus states and hover effects
+ * - Customizable autosuggestion configuration for different use cases
+ * - Full CopilotTextarea API compatibility
+ *
+ * @param props - SSmartTextFieldProps with AI config, form integration, and CopilotTextarea props
+ * @returns JSX.Element - AI-enhanced textarea with form labeling and validation
+ */
 export declare function SSmartTextField({ autosuggestionsConfig, label, hint, error, required, htmlFor, minRows, maxRows, rows, ...props }: SSmartTextFieldProps): import("react/jsx-runtime").JSX.Element;
 export default SSmartTextField;