@solostylist/ui-kit 1.0.167 → 1.0.168

package/dist/s-autocomplete/index.js

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

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

@@ -23,20 +23,18 @@ export interface SAutocompleteProps<T, Multiple extends boolean | undefined, Dis
     htmlFor?: string;
 }
 /**
- * SAutocomplete - A standardized autocomplete/combobox component that wraps Material-UI Autocomplete
- * with consistent form labeling, validation, and help text patterns.
- *
- * Key features:
- * - Maintains full Material-UI Autocomplete API and type safety
- * - Integrates with SForm for consistent label and error handling
- * - Supports all autocomplete modes: single/multiple selection, free solo, etc.
- * - Provides accessible form labeling with htmlFor/id association
- * - Uses forwardRef for proper ref forwarding to underlying components
- * - Disables portal by default for better layout predictability
- *
- * @param props - SAutocompleteProps with form integration and Material-UI Autocomplete props
- * @param ref - Forward ref to the underlying Autocomplete component
- * @returns JSX.Element - Wrapped Autocomplete with form labeling and validation
+ * Type definition for SAutocomplete component with generic support
+ */
+export interface SAutocompleteComponent {
+    <T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined>(props: SAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> & {
+        ref?: React.ForwardedRef<unknown>;
+    }): React.JSX.Element;
+    displayName?: string;
+}
+/**
+ * A standardized autocomplete/combobox component that wraps Material-UI Autocomplete
+ * with consistent form labeling, validation, and help text patterns. Maintains full
+ * Material-UI API compatibility while providing enhanced form integration.
  */
-declare const SAutocomplete: React.ForwardRefExoticComponent<Omit<SAutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined>, "ref"> & React.RefAttributes<unknown>>;
+export declare const SAutocomplete: SAutocompleteComponent;
 export default SAutocomplete;

package/dist/s-autocomplete/s-autocomplete.js

@@ -1,29 +1,37 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { forwardRef as i, useId as p } from "react";
-import { Autocomplete as a, TextField as n } from "@mui/material";
-import c from "../s-form/s-form.js";
-const F = i(
+import { j as e } from "../jsx-runtime-OVHDjVDe.js";
+import { forwardRef as s, useId as m } from "react";
+import { Autocomplete as c, TextField as f } from "@mui/material";
+import { SForm as h } from "../s-form/s-form.js";
+const t = s(
   ({
-    label: e = "",
-    required: r = !1,
-    error: m,
-    htmlFor: l,
-    ...s
+    label: r = "",
+    required: o = !1,
+    error: l,
+    htmlFor: i,
+    ...n
   }, d) => {
-    const u = p(), o = l ?? u;
-    return /* @__PURE__ */ t.jsx(c, { error: m, label: e, required: r, htmlFor: o, children: /* @__PURE__ */ t.jsx(
-      a,
+    const u = m(), a = i ?? u;
+    return /* @__PURE__ */ e.jsx(h, { error: l, label: r, required: o, htmlFor: a, children: /* @__PURE__ */ e.jsx(
+      c,
       {
         disablePortal: !0,
         fullWidth: !0,
-        renderInput: (f) => /* @__PURE__ */ t.jsx(n, { ...f }),
-        id: o,
-        ...s,
+        renderInput: (p) => /* @__PURE__ */ e.jsx(f, { ...p }),
+        id: a,
+        ...n,
         ref: d
       }
     ) });
   }
 );
+t.displayName = "SAutocomplete";
+try {
+  t.displayName = "SAutocomplete", t.__docgenInfo = { description: `A standardized autocomplete/combobox component that wraps Material-UI Autocomplete
+with consistent form labeling, validation, and help text patterns. Maintains full
+Material-UI API compatibility while providing enhanced form integration.`, displayName: "SAutocomplete", props: { renderInput: { defaultValue: null, description: "Optional custom renderInput function for advanced input customization", name: "renderInput", required: !1, type: { name: "((params: AutocompleteRenderInputParams) => ReactNode)" } }, label: { defaultValue: null, description: "Field label displayed above the autocomplete", name: "label", required: !1, type: { name: "ReactNode" } }, required: { defaultValue: null, description: "Whether the field is required (shows asterisk in label)", name: "required", required: !1, type: { name: "boolean" } }, error: { defaultValue: null, description: "Error message to display below the field", name: "error", required: !1, type: { name: "string" } }, htmlFor: { defaultValue: null, description: "HTML id attribute for the input element", name: "htmlFor", required: !1, type: { name: "string" } } } };
+} catch {
+}
 export {
-  F as default
+  t as SAutocomplete,
+  t as default
 };

package/dist/s-avatar/index.js

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

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

@@ -1,10 +1,25 @@
 import { AvatarProps } from '@mui/material';
+/**
+ * Props interface for SAvatar component
+ */
 export interface SAvatarProps {
+    /** URL of the avatar image to display */
     avatar?: string;
+    /** Name of the user, used for initials fallback and optional display */
     name?: string;
+    /** Whether to display the name alongside the avatar */
     showName?: boolean;
+    /** Size of the avatar in pixels (width and height) */
     size?: number;
+    /** Additional props to pass to the underlying Material-UI Avatar component */
     avatarProps?: AvatarProps;
 }
-declare const SAvatar: ({ avatar, name, showName, size, avatarProps }: SAvatarProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A flexible avatar component that displays user profile images with fallback to initials.
+ * Built on Material-UI Avatar with optional name display and customizable sizing.
+ */
+export declare const SAvatar: {
+    ({ avatar, name, showName, size, avatarProps }: SAvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default SAvatar;

package/dist/s-avatar/s-avatar.js

@@ -1,20 +1,33 @@
 import { j as i } from "../jsx-runtime-OVHDjVDe.js";
-import { Box as l, Avatar as d, Typography as e } from "@mui/material";
-import h from "../s-lazy-image/s-lazy-image.js";
-const f = ({ avatar: o, name: r, showName: a = !1, size: t = 40, avatarProps: s }) => /* @__PURE__ */ i.jsxs(l, { display: "flex", alignItems: "center", gap: 2, children: [
-  /* @__PURE__ */ i.jsx(d, { sx: { width: t, height: t, fontSize: 16 }, ...s, children: o ? /* @__PURE__ */ i.jsx(
-    h,
+import { Box as n, Avatar as o, Typography as d } from "@mui/material";
+import "../s-lazy-image/index.js";
+import p from "../s-lazy-image/s-lazy-image.js";
+const r = ({ avatar: e, name: a, showName: l = !1, size: t = 40, avatarProps: s }) => /* @__PURE__ */ i.jsxs(n, { display: "flex", alignItems: "center", gap: 2, children: [
+  /* @__PURE__ */ i.jsx(o, { sx: { width: t, height: t, fontSize: 16 }, ...s, children: e ? /* @__PURE__ */ i.jsx(
+    p,
     {
-      src: o,
-      alt: r || "Avatar",
+      src: e,
+      alt: a || "Avatar",
       width: t,
       height: t,
       variant: "circular",
       style: { borderRadius: "50%" }
     }
-  ) : (r == null ? void 0 : r[0]) || "A" }),
-  a && /* @__PURE__ */ i.jsx(e, { variant: "body1", fontSize: 20, children: r })
+  ) : (a == null ? void 0 : a[0]) || "A" }),
+  l && /* @__PURE__ */ i.jsx(d, { variant: "body1", fontSize: 20, children: a })
 ] });
+r.displayName = "SAvatar";
+try {
+  r.displayName = "SAvatar", r.__docgenInfo = { description: `A flexible avatar component that displays user profile images with fallback to initials.
+Built on Material-UI Avatar with optional name display and customizable sizing.`, displayName: "SAvatar", props: { avatar: { defaultValue: null, description: "URL of the avatar image to display", name: "avatar", required: !1, type: { name: "string" } }, name: { defaultValue: null, description: "Name of the user, used for initials fallback and optional display", name: "name", required: !1, type: { name: "string" } }, showName: { defaultValue: { value: "false" }, description: "Whether to display the name alongside the avatar", name: "showName", required: !1, type: { name: "boolean" } }, size: { defaultValue: { value: "40" }, description: "Size of the avatar in pixels (width and height)", name: "size", required: !1, type: { name: "number" } }, avatarProps: { defaultValue: null, description: "Additional props to pass to the underlying Material-UI Avatar component", name: "avatarProps", required: !1, type: { name: "AvatarProps" } } } };
+} catch {
+}
+try {
+  savatar.displayName = "savatar", savatar.__docgenInfo = { description: `A flexible avatar component that displays user profile images with fallback to initials.
+Built on Material-UI Avatar with optional name display and customizable sizing.`, displayName: "savatar", props: { avatar: { defaultValue: null, description: "URL of the avatar image to display", name: "avatar", required: !1, type: { name: "string" } }, name: { defaultValue: null, description: "Name of the user, used for initials fallback and optional display", name: "name", required: !1, type: { name: "string" } }, showName: { defaultValue: { value: "false" }, description: "Whether to display the name alongside the avatar", name: "showName", required: !1, type: { name: "boolean" } }, size: { defaultValue: { value: "40" }, description: "Size of the avatar in pixels (width and height)", name: "size", required: !1, type: { name: "number" } }, avatarProps: { defaultValue: null, description: "Additional props to pass to the underlying Material-UI Avatar component", name: "avatarProps", required: !1, type: { name: "AvatarProps" } } } };
+} catch {
+}
 export {
-  f as default
+  r as SAvatar,
+  r as default
 };

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

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

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

@@ -1,5 +1,8 @@
 import { default as React } from 'react';
 import { TypographyProps } from '@mui/material';
+/**
+ * Props interface for SBlurText component
+ */
 export interface SBlurTextProps extends Omit<TypographyProps, 'children'> {
     /** The text content to animate */
     text: string;
@@ -26,18 +29,6 @@ export interface SBlurTextProps extends Omit<TypographyProps, 'children'> {
 }
 /**
  * A Typography component that animates text with a blur effect when it comes into view.
- * Supports word-by-word or letter-by-letter animation with customizable timing and effects.
- * Built on MUI Typography with full styling support.
- *
- * @example
- * ```tsx
- * <SBlurText
- *   text="Hello world, this text will blur in"
- *   variant="h1"
- *   animateBy="words"
- *   delay={150}
- * />
- * ```
  */
-declare const SBlurText: React.FC<SBlurTextProps>;
+export declare const SBlurText: React.FC<SBlurTextProps>;
 export default SBlurText;

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

@@ -1,80 +1,86 @@
 import { j as y } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as R, useRef as V, useEffect as D, useMemo as b } from "react";
+import { useState as k, useRef as R, useEffect as E, useMemo as g } from "react";
 import { Typography as F } from "@mui/material";
 import { motion as M } from "framer-motion";
-const _ = (s, a) => {
-  const i = /* @__PURE__ */ new Set([...Object.keys(s), ...a.flatMap((t) => Object.keys(t))]), o = {};
-  return i.forEach((t) => {
-    o[t] = [s[t], ...a.map((l) => l[t])];
-  }), o;
-}, H = ({
-  text: s,
-  delay: a = 100,
-  animateBy: i = "words",
-  direction: o = "top",
-  threshold: t = 0.1,
+const N = (r, o) => {
+  const s = /* @__PURE__ */ new Set([...Object.keys(r), ...o.flatMap((e) => Object.keys(e))]), n = {};
+  return s.forEach((e) => {
+    n[e] = [r[e], ...o.map((l) => l[e])];
+  }), n;
+}, c = ({
+  text: r,
+  delay: o = 100,
+  animateBy: s = "words",
+  direction: n = "top",
+  threshold: e = 0.1,
   rootMargin: l = "0px",
-  animationFrom: h,
-  animationTo: d,
-  easing: w = (n) => n,
-  onAnimationComplete: x,
-  stepDuration: j = 0.35,
-  variant: g = "body1",
-  component: v = "p",
-  sx: S,
-  ...T
+  animationFrom: b,
+  animationTo: h,
+  easing: v = (i) => i,
+  onAnimationComplete: w,
+  stepDuration: x = 0.35,
+  variant: V = "body1",
+  component: q = "p",
+  sx: T,
+  ...C
 }) => {
-  const n = i === "words" ? s.split(" ") : s.split(""), [k, C] = R(!1), c = V(null);
-  D(() => {
-    if (!c.current) return;
-    const r = new IntersectionObserver(
-      ([e]) => {
-        e.isIntersecting && (C(!0), r.unobserve(c.current));
+  const i = s === "words" ? r.split(" ") : r.split(""), [_, S] = k(!1), u = R(null);
+  E(() => {
+    if (!u.current) return;
+    const a = new IntersectionObserver(
+      ([t]) => {
+        t.isIntersecting && (S(!0), a.unobserve(u.current));
       },
-      { threshold: t, rootMargin: l }
+      { threshold: e, rootMargin: l }
     );
-    return r.observe(c.current), () => r.disconnect();
-  }, [t, l]);
-  const E = b(
-    () => o === "top" ? { filter: "blur(10px)", opacity: 0, y: -50 } : { filter: "blur(10px)", opacity: 0, y: 50 },
-    [o]
-  ), I = b(
+    return a.observe(u.current), () => a.disconnect();
+  }, [e, l]);
+  const j = g(
+    () => n === "top" ? { filter: "blur(10px)", opacity: 0, y: -50 } : { filter: "blur(10px)", opacity: 0, y: 50 },
+    [n]
+  ), A = g(
     () => [
       {
         filter: "blur(5px)",
         opacity: 0.5,
-        y: o === "top" ? 5 : -5
+        y: n === "top" ? 5 : -5
       },
       { filter: "blur(0px)", opacity: 1, y: 0 }
     ],
-    [o]
-  ), u = h ?? E, f = d ?? I, p = f.length + 1, O = j * (p - 1), A = Array.from({ length: p }, (r, e) => p === 1 ? 0 : e / (p - 1));
-  return /* @__PURE__ */ y.jsx(F, { ref: c, variant: g, component: v, sx: S, ...T, children: n.map((r, e) => {
-    const K = _(u, f), m = {
-      duration: O,
-      times: A,
-      delay: e * a / 1e3
+    [n]
+  ), p = b ?? j, d = h ?? A, m = d.length + 1, D = x * (m - 1), I = Array.from({ length: m }, (a, t) => m === 1 ? 0 : t / (m - 1));
+  return /* @__PURE__ */ y.jsx(F, { ref: u, variant: V, component: q, sx: T, ...C, children: i.map((a, t) => {
+    const B = N(p, d), f = {
+      duration: D,
+      times: I,
+      delay: t * o / 1e3
     };
-    return m.ease = w, /* @__PURE__ */ y.jsxs(
+    return f.ease = v, /* @__PURE__ */ y.jsxs(
       M.span,
       {
-        initial: u,
-        animate: k ? K : u,
-        transition: m,
-        onAnimationComplete: e === n.length - 1 ? x : void 0,
+        initial: p,
+        animate: _ ? B : p,
+        transition: f,
+        onAnimationComplete: t === i.length - 1 ? w : void 0,
         style: {
           display: "inline-block",
           willChange: "transform, filter, opacity"
         },
         children: [
-          r === " " ? " " : r,
-          i === "words" && e < n.length - 1 && " "
+          a === " " ? " " : a,
+          s === "words" && t < i.length - 1 && " "
         ]
       },
-      e
+      t
     );
   }) });
 };
+c.displayName = "SBlurText";
+try {
+  c.displayName = "SBlurText", c.__docgenInfo = { description: "A Typography component that animates text with a blur effect when it comes into view.", displayName: "SBlurText", props: { text: { defaultValue: null, description: "The text content to animate", name: "text", required: !0, type: { name: "string" } }, delay: { defaultValue: { value: "100" }, description: "Delay between animating each segment in milliseconds", name: "delay", required: !1, type: { name: "number" } }, animateBy: { defaultValue: { value: "words" }, description: "Animation granularity - animate by words or individual letters", name: "animateBy", required: !1, type: { name: "enum", value: [{ value: '"words"' }, { value: '"letters"' }] } }, direction: { defaultValue: { value: "top" }, description: "Direction of the blur animation", name: "direction", required: !1, type: { name: "enum", value: [{ value: '"top"' }, { value: '"bottom"' }] } }, threshold: { defaultValue: { value: "0.1" }, description: "Intersection observer threshold for triggering animation", name: "threshold", required: !1, type: { name: "number" } }, rootMargin: { defaultValue: { value: "0px" }, description: "Intersection observer root margin", name: "rootMargin", required: !1, type: { name: "string" } }, animationFrom: { defaultValue: null, description: "Custom starting animation state", name: "animationFrom", required: !1, type: { name: "Record<string, string | number>" } }, animationTo: { defaultValue: null, description: "Custom ending animation states (array for multi-step animations)", name: "animationTo", required: !1, type: { name: "Record<string, string | number>[]" } }, easing: { defaultValue: { value: "(t) => t" }, description: "Custom easing function for animation timing", name: "easing", required: !1, type: { name: "((t: number) => number)" } }, onAnimationComplete: { defaultValue: null, description: "Callback fired when animation completes", name: "onAnimationComplete", required: !1, type: { name: "(() => void)" } }, stepDuration: { defaultValue: { value: "0.35" }, description: "Duration of each animation step in seconds", name: "stepDuration", required: !1, type: { name: "number" } } } };
+} catch {
+}
 export {
-  H as default
+  c as SBlurText,
+  c as default
 };

package/dist/s-breadcrumbs/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-breadcrumbs.js";
+import { SBreadcrumbs as e } from "./s-breadcrumbs.js";
 export {
-  o as default
+  e as default
 };

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

@@ -1,18 +1,37 @@
 import { default as React } from 'react';
 import { BreadcrumbsProps, SxProps, Theme } from '@mui/material';
+/**
+ * Represents a single breadcrumb item in the navigation path
+ */
 export interface BreadcrumbItem {
+    /** The display text for the breadcrumb item */
     label: string;
+    /** Navigation URL for link-based breadcrumbs */
     to?: string;
+    /** Click handler for action-based breadcrumbs */
     onClick?: (event: React.MouseEvent) => void;
+    /** Indicates if this is the current/active page */
     isCurrent?: boolean;
 }
+/**
+ * Props for the SBreadcrumbs component
+ */
 export interface SBreadcrumbsProps extends Omit<BreadcrumbsProps, 'children'> {
+    /** Array of breadcrumb items to display */
     items: BreadcrumbItem[];
+    /** Custom separator element between breadcrumb items */
     separator?: React.ReactNode;
+    /** Custom link component (e.g., React Router Link) for navigation */
     LinkComponent?: React.ElementType;
+    /** Color of the current (active) breadcrumb item */
     currentColor?: string;
+    /** Color of clickable breadcrumb links */
     linkColor?: string;
+    /** System prop for custom styling */
     sx?: SxProps<Theme>;
 }
-declare const SBreadcrumbs: React.ForwardRefExoticComponent<Omit<SBreadcrumbsProps, "ref"> & React.RefAttributes<HTMLElement>>;
+/**
+ * A breadcrumb navigation component for displaying hierarchical navigation paths.
+ */
+export declare const SBreadcrumbs: React.ForwardRefExoticComponent<Omit<SBreadcrumbsProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SBreadcrumbs;

package/dist/s-breadcrumbs/s-breadcrumbs.js

@@ -1,43 +1,52 @@
-import { j as o } from "../jsx-runtime-OVHDjVDe.js";
-import { forwardRef as f } from "react";
-import { C as i } from "../ChevronRight-CnDWPrOm.js";
-import { Breadcrumbs as $, Typography as t, Link as e } from "@mui/material";
-const j = f(
+import { j as r } from "../jsx-runtime-OVHDjVDe.js";
+import { forwardRef as b } from "react";
+import { C as y } from "../ChevronRight-CnDWPrOm.js";
+import { Breadcrumbs as h, Typography as u, Link as t } from "@mui/material";
+const l = b(
   ({
-    items: a,
-    separator: u = /* @__PURE__ */ o.jsx(i, { fontSize: "small" }),
-    LinkComponent: s,
-    currentColor: c = "text.primary",
-    linkColor: n = "primary.main",
-    sx: b,
-    ...h
-  }, p) => /* @__PURE__ */ o.jsx($, { ref: p, separator: u, sx: b, ...h, children: a.map((r, l) => {
-    const d = l === a.length - 1;
-    return r.isCurrent ?? d ? /* @__PURE__ */ o.jsx(t, { color: c, children: r.label }, `${r.label}-${l}`) : r.onClick ? /* @__PURE__ */ o.jsx(
-      e,
+    items: n,
+    separator: c = /* @__PURE__ */ r.jsx(y, { fontSize: "small" }),
+    LinkComponent: i,
+    currentColor: s = "text.primary",
+    linkColor: o = "primary.main",
+    sx: m,
+    ...d
+  }, p) => /* @__PURE__ */ r.jsx(h, { ref: p, separator: c, sx: m, ...d, children: n.map((e, a) => {
+    const f = a === n.length - 1;
+    return e.isCurrent ?? f ? /* @__PURE__ */ r.jsx(u, { color: s, children: e.label }, `${e.label}-${a}`) : e.onClick ? /* @__PURE__ */ r.jsx(
+      t,
       {
         component: "button",
-        onClick: r.onClick,
-        color: n,
+        onClick: e.onClick,
+        color: o,
         underline: "hover",
         sx: { cursor: "pointer", background: "none", border: "none", padding: 0, font: "inherit" },
-        children: r.label
+        children: e.label
       },
-      `${r.label}-${l}`
-    ) : r.to ? s ? /* @__PURE__ */ o.jsx(
-      e,
+      `${e.label}-${a}`
+    ) : e.to ? i ? /* @__PURE__ */ r.jsx(
+      t,
       {
-        component: s,
-        to: r.to,
-        color: n,
+        component: i,
+        to: e.to,
+        color: o,
         underline: "hover",
-        children: r.label
+        children: e.label
       },
-      `${r.label}-${l}`
-    ) : /* @__PURE__ */ o.jsx(e, { href: r.to, color: n, underline: "hover", children: r.label }, `${r.label}-${l}`) : /* @__PURE__ */ o.jsx(t, { color: c, children: r.label }, `${r.label}-${l}`);
+      `${e.label}-${a}`
+    ) : /* @__PURE__ */ r.jsx(t, { href: e.to, color: o, underline: "hover", children: e.label }, `${e.label}-${a}`) : /* @__PURE__ */ r.jsx(u, { color: s, children: e.label }, `${e.label}-${a}`);
   }) })
 );
-j.displayName = "SBreadcrumbs";
+l.displayName = "SBreadcrumbs";
+try {
+  l.displayName = "SBreadcrumbs", l.__docgenInfo = { description: "A breadcrumb navigation component for displaying hierarchical navigation paths.", displayName: "SBreadcrumbs", props: { sx: { defaultValue: null, description: "System prop for custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, separator: { defaultValue: { value: '<ChevronRightIcon fontSize="small" />' }, description: "Custom separator element between breadcrumb items", name: "separator", required: !1, type: { name: "ReactNode" } }, LinkComponent: { defaultValue: null, description: "Custom link component (e.g., React Router Link) for navigation", name: "LinkComponent", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, currentColor: { defaultValue: { value: "text.primary" }, description: "Color of the current (active) breadcrumb item", name: "currentColor", required: !1, type: { name: "string" } }, linkColor: { defaultValue: { value: "primary.main" }, description: "Color of clickable breadcrumb links", name: "linkColor", required: !1, type: { name: "string" } } } };
+} catch {
+}
+try {
+  sbreadcrumbs.displayName = "sbreadcrumbs", sbreadcrumbs.__docgenInfo = { description: "A breadcrumb navigation component for displaying hierarchical navigation paths.", displayName: "sbreadcrumbs", props: { sx: { defaultValue: null, description: "System prop for custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, separator: { defaultValue: { value: '<ChevronRightIcon fontSize="small" />' }, description: "Custom separator element between breadcrumb items", name: "separator", required: !1, type: { name: "ReactNode" } }, LinkComponent: { defaultValue: null, description: "Custom link component (e.g., React Router Link) for navigation", name: "LinkComponent", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, currentColor: { defaultValue: { value: "text.primary" }, description: "Color of the current (active) breadcrumb item", name: "currentColor", required: !1, type: { name: "string" } }, linkColor: { defaultValue: { value: "primary.main" }, description: "Color of clickable breadcrumb links", name: "linkColor", required: !1, type: { name: "string" } } } };
+} catch {
+}
 export {
-  j as default
+  l as SBreadcrumbs,
+  l as default
 };

package/dist/s-button/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-button.js";
+import { SButton as a } from "./s-button.js";
 export {
-  o as default
+  a as default
 };

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

@@ -1,6 +1,12 @@
 import { default as React } from 'react';
 import { ButtonProps } from '@mui/material';
+/**
+ * Props interface for SButton component
+ */
 export interface SButtonProps extends ButtonProps {
 }
-declare const SButton: React.ForwardRefExoticComponent<Omit<SButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A versatile button component built on Material-UI Button with consistent theming and accessibility features.
+ */
+export declare const SButton: React.ForwardRefExoticComponent<Omit<SButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default SButton;

package/dist/s-button/s-button.js

@@ -1,7 +1,17 @@
-import { j as r } from "../jsx-runtime-OVHDjVDe.js";
-import { forwardRef as m } from "react";
-import { Button as f } from "@mui/material";
-const p = m((t, o) => /* @__PURE__ */ r.jsx(f, { ref: o, ...t }));
+import { j as n } from "../jsx-runtime-OVHDjVDe.js";
+import { forwardRef as r } from "react";
+import { Button as i } from "@mui/material";
+const o = r((t, e) => /* @__PURE__ */ n.jsx(i, { ref: e, ...t }));
+o.displayName = "SButton";
+try {
+  o.displayName = "SButton", o.__docgenInfo = { description: "A versatile button component built on Material-UI Button with consistent theming and accessibility features.", displayName: "SButton", props: {} };
+} catch {
+}
+try {
+  sbutton.displayName = "sbutton", sbutton.__docgenInfo = { description: "A versatile button component built on Material-UI Button with consistent theming and accessibility features.", displayName: "sbutton", props: {} };
+} catch {
+}
 export {
-  p as default
+  o as SButton,
+  o as default
 };

package/dist/s-button-link/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-button-link.js";
+import { SButtonLink as a } from "./s-button-link.js";
 export {
-  o as default
+  a as default
 };

package/dist/s-button-link/s-button-link.d.ts

@@ -1,3 +1,4 @@
+import { LinkProps, TypographyProps } from '@mui/material';
 import * as React from 'react';
 /**
  * Props interface for SButtonLink component
@@ -12,40 +13,25 @@ export interface SButtonLinkProps {
     /** URL for the link (defaults to '#') */
     href?: string;
     /** Component to render the link as (e.g., RouterLink for client-side routing) */
-    component?: any;
+    component?: React.ElementType;
     /** Target attribute for the link (e.g., '_blank' for new tab) */
     target?: string;
     /** Color of the surrounding text */
-    color?: string;
+    color?: TypographyProps['color'];
     /** Color of the link itself (overrides default link color) */
-    linkColor?: string;
+    linkColor?: LinkProps['color'];
     /** Line height for the typography */
-    lineHeight?: string;
+    lineHeight?: TypographyProps['lineHeight'];
     /** Typography variant for the container text */
-    variant?: 'body1' | 'body2' | 'button' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'inherit' | 'overline' | 'subtitle1' | 'subtitle2';
+    variant?: TypographyProps['variant'];
     /** Click handler for the link */
-    onClick?: () => void;
+    onClick?: LinkProps['onClick'];
 }
 /**
- * SButtonLink - A flexible link component that combines text and a clickable link element.
- * Useful for creating contextual links within text content, such as "Don't have an account? Sign up here."
- *
- * Key features:
- * - Supports text before and after the main link
- * - Configurable typography variant and colors
- * - Component prop for integration with routing libraries (e.g., React Router)
- * - Target attribute support for controlling link behavior
- * - Consistent cursor and font size inheritance
- * - Default fallback values for common use cases
- *
- * Common use cases:
- * - Authentication flows ("Already have an account? Sign in")
- * - Call-to-action text with embedded links
- * - Help text with contextual links
- * - Navigation breadcrumbs with text context
- *
- * @param props - SButtonLinkProps with text content, link configuration, and styling
- * @returns JSX.Element - Typography containing text with embedded link
+ * A flexible link component that combines text and a clickable link element.
  */
-declare const SButtonLink: ({ onClick, beforeText, afterText, mainText, href, component, target, color, linkColor, variant, lineHeight, }: SButtonLinkProps) => React.JSX.Element;
+export declare const SButtonLink: {
+    ({ onClick, beforeText, afterText, mainText, href, component, target, color, linkColor, variant, lineHeight, }: SButtonLinkProps): React.JSX.Element;
+    displayName: string;
+};
 export default SButtonLink;