@solostylist/ui-kit 1.0.167 → 1.0.168

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

@@ -1,24 +1,23 @@
-import { j as p } from "../jsx-runtime-OVHDjVDe.js";
-import { useRef as s } from "react";
-import { useColorScheme as g, useTheme as d, Button as h, alpha as e, Box as n } from "@mui/material";
-import b from "../s-moving-border/s-moving-border.js";
-const f = ({
+import { j as i } from "../jsx-runtime-OVHDjVDe.js";
+import { useRef as x } from "react";
+import { useColorScheme as g, useTheme as b, Button as h, alpha as e, Box as o } from "@mui/material";
+import { SMovingBorder as u } from "../s-moving-border/s-moving-border.js";
+const n = ({
   borderRadius: r = 12,
-  children: i,
-  duration: o = 6e3,
-  // 6 second animation cycle
-  ...l
+  children: p,
+  duration: l = 6e3,
+  ...m
 }) => {
-  const m = s(null), { mode: a } = g(), t = d(), x = a === "light" ? (t.vars || t).palette.primary.main : (t.vars || t).palette.primary.light, c = a === "light" ? 90 : 110;
-  return /* @__PURE__ */ p.jsx(
-    b,
+  const s = x(null), { mode: a } = g(), t = b(), c = a === "light" ? (t.vars || t).palette.primary.main : (t.vars || t).palette.primary.light, d = a === "light" ? 90 : 110;
+  return /* @__PURE__ */ i.jsx(
+    u,
     {
-      duration: o,
+      duration: l,
       borderRadius: r,
       height: 60,
-      glowSize: c,
-      glowColor: x,
-      children: /* @__PURE__ */ p.jsx(
+      glowSize: d,
+      glowColor: c,
+      children: /* @__PURE__ */ i.jsx(
         h,
         {
           variant: "text",
@@ -27,13 +26,10 @@ const f = ({
             borderRadius: r,
             position: "relative",
             overflow: "hidden",
-            // Clear, high-contrast background base per theme, with subtle accent overlay
             background: a === "light" ? `linear-gradient(0deg, ${(t.vars || t).palette.background.paper}, ${(t.vars || t).palette.background.paper}),
                  linear-gradient(45deg, ${e(t.palette.primary.main, 0.04)} 0%, transparent 60%)` : `linear-gradient(0deg, ${(t.vars || t).palette.background.default}, ${(t.vars || t).palette.background.default}),
                  linear-gradient(45deg, ${e(t.palette.primary.light, 0.06)} 0%, transparent 60%)`,
-            // Enhanced border with gradient and inner highlight
             border: `1px solid ${a === "light" ? e(t.palette.divider, 0.25) : e(t.palette.divider, 0.4)}`,
-            // Inner highlight for premium glass effect
             "&::before": {
               content: '""',
               position: "absolute",
@@ -44,7 +40,6 @@ const f = ({
               background: a === "light" ? `linear-gradient(90deg, transparent, ${e(t.palette.common.white, 0.6)}, transparent)` : `linear-gradient(90deg, transparent, ${e(t.palette.common.white, 0.2)}, transparent)`,
               borderRadius: `${r}px ${r}px 0 0`
             },
-            // Inner shadow for depth
             "&::after": {
               content: '""',
               position: "absolute",
@@ -53,7 +48,6 @@ const f = ({
               background: a === "light" ? `linear-gradient(180deg, ${e(t.palette.common.white, 0.1)} 0%, transparent 50%)` : `linear-gradient(180deg, ${e(t.palette.common.white, 0.05)} 0%, transparent 50%)`,
               pointerEvents: "none"
             },
-            // Premium shadow system with multiple layers
             boxShadow: a === "light" ? `0 1px 3px ${e(t.palette.common.black, 0.08)}, 
                  0 4px 12px ${e(t.palette.common.black, 0.05)}, 
                  0 16px 24px ${e(t.palette.common.black, 0.03)}, 
@@ -61,25 +55,17 @@ const f = ({
                  0 8px 24px ${e(t.palette.common.black, 0.2)}, 
                  0 16px 32px ${e(t.palette.common.black, 0.1)}, 
                  inset 0 1px 0 ${e(t.palette.common.white, 0.1)}`,
-            // Enhanced backdrop blur
             backdropFilter: "blur(20px) saturate(1.2)",
             WebkitBackdropFilter: "blur(20px) saturate(1.2)",
-            // Smooth premium transitions
             transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",
-            // Advanced hover effects with multiple animations
             "&:hover": {
-              // Keep strong contrast on hover; only adjust subtleties
               background: a === "light" ? `linear-gradient(0deg, ${(t.vars || t).palette.background.paper}, ${(t.vars || t).palette.background.paper}),
                    linear-gradient(45deg, ${e(t.palette.primary.main, 0.08)} 0%, transparent 60%)` : `linear-gradient(0deg, ${(t.vars || t).palette.background.default}, ${(t.vars || t).palette.background.default}),
                    linear-gradient(45deg, ${e(t.palette.primary.light, 0.1)} 0%, transparent 60%)`,
-              // Subtle elevation
               boxShadow: a === "light" ? `0 6px 18px ${e(t.palette.common.black, 0.12)}` : `0 10px 24px ${e(t.palette.common.black, 0.4)}`,
-              // Gentle lift only
               transform: "translateY(-1px)",
-              // Simple border tint for feedback
               border: `1px solid ${a === "light" ? e(t.palette.primary.main, 0.2) : e(t.palette.primary.light, 0.25)}`
             },
-            // Enhanced active state with micro-interactions
             "&:active": {
               transform: "translateY(-1px) scale(1.01)",
               transition: "all 0.15s cubic-bezier(0.4, 0, 0.6, 1)",
@@ -89,7 +75,6 @@ const f = ({
                    0 12px 32px ${e(t.palette.common.black, 0.25)}, 
                    inset 0 1px 0 ${e(t.palette.common.white, 0.1)}`
             },
-            // Premium focus state with animated glow
             "&:focus-visible": {
               outline: "none",
               boxShadow: a === "light" ? `0 4px 12px ${e(t.palette.common.black, 0.12)}, 
@@ -104,19 +89,18 @@ const f = ({
               transform: "translateY(-1px)"
             }
           },
-          ref: m,
+          ref: s,
           disableRipple: !0,
-          ...l,
+          ...m,
           fullWidth: !0,
-          children: /* @__PURE__ */ p.jsxs(
-            n,
+          children: /* @__PURE__ */ i.jsxs(
+            o,
             {
               sx: {
                 position: "relative",
                 zIndex: 2,
                 fontSize: 16,
                 fontWeight: a === "light" ? 700 : 600,
-                // Enhanced gradient with multiple layers
                 background: `
               ${(t.vars || t).palette.gradient.primary}, 
               linear-gradient(135deg, 
@@ -129,20 +113,15 @@ const f = ({
                 WebkitBackgroundClip: "text",
                 color: "transparent",
                 WebkitTextFillColor: "transparent",
-                // Premium transitions with staggered timing
                 transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-position 0.6s ease",
-                // Advanced text effects
                 textShadow: a === "light" ? `0 1px 3px ${e(t.palette.common.black, 0.08)}, 
                    0 2px 6px ${e(t.palette.primary.main, 0.1)}` : `0 2px 4px ${e(t.palette.common.black, 0.4)}, 
                    0 4px 8px ${e(t.palette.primary.light, 0.2)}`,
-                // Enhanced typography
                 letterSpacing: "0.025em",
                 lineHeight: 1.2,
-                // Crisp text rendering
                 WebkitFontSmoothing: "antialiased",
                 MozOsxFontSmoothing: "grayscale",
                 textRendering: "optimizeLegibility",
-                // Hover effects for the text
                 "&:hover": {
                   backgroundPosition: "100% 0, 50% 50%",
                   transform: "scale(1.02)",
@@ -152,7 +131,6 @@ const f = ({
                      0 6px 16px ${e(t.palette.primary.light, 0.25)}, 
                      0 0 30px ${e(t.palette.primary.light, 0.15)}`
                 },
-                // Text glow animation on parent hover
                 "button:hover &": {
                   backgroundPosition: "100% 0, 50% 50%",
                   transform: "scale(1.02)",
@@ -163,7 +141,6 @@ const f = ({
                      0 0 30px ${e(t.palette.primary.light, 0.15)}`,
                   animation: "textGlow 2s ease-in-out infinite alternate"
                 },
-                // Keyframe animation for subtle text glow
                 "@keyframes textGlow": {
                   "0%": {
                     filter: "brightness(1) contrast(1)"
@@ -174,9 +151,9 @@ const f = ({
                 }
               },
               children: [
-                i,
-                /* @__PURE__ */ p.jsx(
-                  n,
+                p,
+                /* @__PURE__ */ i.jsx(
+                  o,
                   {
                     sx: {
                       position: "absolute",
@@ -196,7 +173,7 @@ const f = ({
                         opacity: 0.8
                       }
                     },
-                    children: i
+                    children: p
                   }
                 )
               ]
@@ -207,6 +184,11 @@ const f = ({
     }
   );
 };
+n.displayName = "SGlowButton";
+try {
+  n.displayName = "SGlowButton", n.__docgenInfo = { description: "A visually striking button with animated glowing border effects and gradient text.", displayName: "SGlowButton", props: { borderRadius: { defaultValue: { value: "12" }, description: "Border radius for the button (defaults to 12px)", name: "borderRadius", required: !1, type: { name: "string | number" } }, children: { defaultValue: null, description: "Button content", name: "children", required: !0, type: { name: "ReactNode" } }, duration: { defaultValue: { value: "6000" }, description: "Duration of the moving border animation in milliseconds (defaults to 6000ms)", name: "duration", required: !1, type: { name: "number" } } } };
+} catch {
+}
 export {
-  f as default
+  n as default
 };

package/dist/s-gradient-icon/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './s-gradient-icon';
-export type { GradientIconProps } from './s-gradient-icon';
+export type { SGradientIconProps } from './s-gradient-icon';

package/dist/s-gradient-icon/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-gradient-icon.js";
+import { SGradientIcon as o } from "./s-gradient-icon.js";
 export {
   o as default
 };

package/dist/s-gradient-icon/s-gradient-icon.d.ts

@@ -21,10 +21,8 @@ export interface CustomGradient {
     /** Position of middle color (0-1, default: 0.5) */
     middlePosition?: number;
 }
-/**
- * Props for the GradientIcon component, extending Material-UI SvgIconProps
- */
-export interface GradientIconProps extends SvgIconProps {
+/** Props interface for SGradientIcon component */
+export interface SGradientIconProps extends SvgIconProps {
     /** Whether the icon should show the gradient fill (hover state) */
     hovered?: boolean;
     /** The Material-UI icon component to render with gradient effect */
@@ -52,67 +50,9 @@ export interface GradientIconProps extends SvgIconProps {
     /** Fallback color when gradient is not shown */
     fallbackColor?: string;
 }
-/**
- * Icon component with customizable gradient fill effects
- *
- * Renders a Material-UI icon with conditional gradient coloring based on hover state.
- * Supports multiple gradient themes, directions, custom colors, and animation options.
- *
- * Features:
- * - Multiple predefined gradient themes (blue-cyan, purple-pink, etc.)
- * - Custom gradient colors and directions
- * - Configurable animation duration and easing
- * - Automatic hover detection option
- * - Always-gradient mode
- * - Smooth transitions between states
- * - Full compatibility with Material-UI icon props
- * - Unique gradient IDs to prevent conflicts
- *
- * @param hovered - Whether to apply gradient fill (true) or fallback color (false)
- * @param IconComponent - The Material-UI icon component to render
- * @param sx - Additional Material-UI sx styling props
- * @param strokeWidth - Width of icon stroke if applicable (default: 0)
- * @param gradientTheme - Predefined gradient theme (default: 'blue-cyan')
- * @param customGradient - Custom gradient colors when theme is 'custom'
- * @param gradientDirection - Direction of the gradient (default: 'diagonal')
- * @param animationDuration - Animation duration in milliseconds (default: 300)
- * @param animationEasing - Animation easing function (default: 'ease')
- * @param autoHover - Whether to automatically detect hover state (default: false)
- * @param gradientId - Unique identifier for the gradient (auto-generated if not provided)
- * @param alwaysGradient - Whether to always show gradient (overrides hovered state)
- * @param fallbackColor - Fallback color when gradient is not shown
- * @param props - All other Material-UI SvgIcon props
- * @returns JSX element containing SVG gradient definition and styled icon
- *
- * @example
- * ```tsx
- * import HomeIcon from '@mui/icons-material/Home';
- *
- * // Basic usage
- * <GradientIcon
- *   IconComponent={HomeIcon}
- *   hovered={isHovered}
- * />
- *
- * // Custom gradient
- * <GradientIcon
- *   IconComponent={HomeIcon}
- *   gradientTheme="custom"
- *   customGradient={{
- *     startColor: '#ff6b6b',
- *     endColor: '#4ecdc4'
- *   }}
- *   gradientDirection="vertical"
- * />
- *
- * // Auto hover with custom animation
- * <GradientIcon
- *   IconComponent={HomeIcon}
- *   autoHover
- *   animationDuration={500}
- *   animationEasing="ease-in-out"
- * />
- * ```
- */
-declare const GradientIcon: ({ hovered, IconComponent, sx, strokeWidth, gradientTheme, customGradient, gradientDirection, animationDuration, animationEasing, autoHover, gradientId, alwaysGradient, fallbackColor, ...props }: GradientIconProps) => import("react/jsx-runtime").JSX.Element | null;
-export default GradientIcon;
+/** A customizable icon component that applies gradient effects with multiple themes and animations. */
+export declare const SGradientIcon: {
+    ({ hovered, IconComponent, sx, strokeWidth, gradientTheme, customGradient, gradientDirection, animationDuration, animationEasing, autoHover, gradientId, alwaysGradient, fallbackColor, ...props }: SGradientIconProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default SGradientIcon;

package/dist/s-gradient-icon/s-gradient-icon.js

@@ -1,81 +1,91 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-const E = ({
-  hovered: c = !1,
-  IconComponent: a,
-  sx: m,
+const s = ({
+  hovered: o = !1,
+  IconComponent: u,
+  sx: p,
   strokeWidth: h = 0,
-  gradientTheme: u = "blue-cyan",
-  customGradient: o,
-  gradientDirection: i = "diagonal",
-  animationDuration: y = 300,
-  animationEasing: g = "ease",
+  gradientTheme: g = "blue-cyan",
+  customGradient: n,
+  gradientDirection: m = "diagonal",
+  animationDuration: v = 300,
+  animationEasing: y = "ease",
   autoHover: f = !1,
-  gradientId: j,
-  alwaysGradient: x = !1,
-  fallbackColor: C,
-  ...s
+  gradientId: x,
+  alwaysGradient: c = !1,
+  fallbackColor: b,
+  ...t
 }) => {
-  if (!a)
+  if (!u)
     return null;
-  const r = j || `gradient-${Math.random().toString(36).substr(2, 9)}`, t = {
+  const l = x || `gradient-${Math.random().toString(36).substr(2, 9)}`, a = {
     "blue-cyan": { start: "#1469be", end: "#43ecff" },
     "purple-pink": { start: "#8b5cf6", end: "#ec4899" },
     "orange-red": { start: "#f97316", end: "#ef4444" },
     "green-teal": { start: "#10b981", end: "#06b6d4" },
     "indigo-purple": { start: "#6366f1", end: "#a855f7" },
-    custom: o ? {
-      start: o.startColor,
-      end: o.endColor,
-      middle: o.middleColor,
-      middlePos: o.middlePosition || 0.5
+    custom: n ? {
+      start: n.startColor,
+      end: n.endColor,
+      middle: n.middleColor,
+      middlePos: n.middlePosition || 0.5
     } : { start: "#1469be", end: "#43ecff" }
-  }[u], l = {
+  }[g], r = {
     horizontal: { x1: "0", y1: "0", x2: "1", y2: "0" },
     vertical: { x1: "0", y1: "0", x2: "0", y2: "1" },
     diagonal: { x1: "0", y1: "0", x2: "1", y2: "1" },
     radial: { x1: "0.5", y1: "0.5", x2: "0.5", y2: "0.5" }
-  }[i], b = x || c ? `url(#${r})` : C || "var(--s-palette-text-primary)";
+  }[m], q = c || o ? `url(#${l})` : b || "var(--s-palette-text-primary)";
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("svg", { width: 0, height: 0, children: i === "radial" ? /* @__PURE__ */ e.jsxs("radialGradient", { id: r, cx: "50%", cy: "50%", r: "50%", children: [
-      /* @__PURE__ */ e.jsx("stop", { offset: "0%", stopColor: t.start }),
-      t.middle && /* @__PURE__ */ e.jsx("stop", { offset: `${(t.middlePos || 0.5) * 100}%`, stopColor: t.middle }),
-      /* @__PURE__ */ e.jsx("stop", { offset: "100%", stopColor: t.end })
-    ] }) : /* @__PURE__ */ e.jsxs("linearGradient", { id: r, x1: l.x1, y1: l.y1, x2: l.x2, y2: l.y2, children: [
-      /* @__PURE__ */ e.jsx("stop", { offset: "0%", stopColor: t.start }),
-      t.middle && /* @__PURE__ */ e.jsx("stop", { offset: `${(t.middlePos || 0.5) * 100}%`, stopColor: t.middle }),
-      /* @__PURE__ */ e.jsx("stop", { offset: "100%", stopColor: t.end })
+    /* @__PURE__ */ e.jsx("svg", { width: 0, height: 0, children: m === "radial" ? /* @__PURE__ */ e.jsxs("radialGradient", { id: l, cx: "50%", cy: "50%", r: "50%", children: [
+      /* @__PURE__ */ e.jsx("stop", { offset: "0%", stopColor: a.start }),
+      a.middle && /* @__PURE__ */ e.jsx("stop", { offset: `${(a.middlePos || 0.5) * 100}%`, stopColor: a.middle }),
+      /* @__PURE__ */ e.jsx("stop", { offset: "100%", stopColor: a.end })
+    ] }) : /* @__PURE__ */ e.jsxs("linearGradient", { id: l, x1: r.x1, y1: r.y1, x2: r.x2, y2: r.y2, children: [
+      /* @__PURE__ */ e.jsx("stop", { offset: "0%", stopColor: a.start }),
+      a.middle && /* @__PURE__ */ e.jsx("stop", { offset: `${(a.middlePos || 0.5) * 100}%`, stopColor: a.middle }),
+      /* @__PURE__ */ e.jsx("stop", { offset: "100%", stopColor: a.end })
     ] }) }),
     /* @__PURE__ */ e.jsx(
-      a,
+      u,
       {
-        ...s,
+        ...t,
         sx: {
-          fill: b,
+          fill: q,
           strokeWidth: h,
-          transition: `fill ${y}ms ${g}`,
+          transition: `fill ${v}ms ${y}`,
           // Auto hover functionality
           ...f && {
             "&:hover": {
-              fill: `url(#${r})`
+              fill: `url(#${l})`
             }
           },
-          ...m
+          ...p
           // Allow custom styling to override defaults
         },
-        ...f && !x && {
-          onMouseEnter: (n) => {
-            var d;
-            (d = s.onMouseEnter) == null || d.call(s, n);
+        ...f && !c && {
+          onMouseEnter: (d) => {
+            var i;
+            (i = t.onMouseEnter) == null || i.call(t, d);
           },
-          onMouseLeave: (n) => {
-            var d;
-            (d = s.onMouseLeave) == null || d.call(s, n);
+          onMouseLeave: (d) => {
+            var i;
+            (i = t.onMouseLeave) == null || i.call(t, d);
           }
         }
       }
     )
   ] });
 };
+s.displayName = "SGradientIcon";
+try {
+  s.displayName = "SGradientIcon", s.__docgenInfo = { description: "A customizable icon component that applies gradient effects with multiple themes and animations.", displayName: "SGradientIcon", props: { hovered: { defaultValue: { value: "false" }, description: "Whether the icon should show the gradient fill (hover state)", name: "hovered", required: !1, type: { name: "boolean" } }, IconComponent: { defaultValue: null, description: "The Material-UI icon component to render with gradient effect", name: "IconComponent", required: !0, type: { name: "IconComponent" } }, sx: { defaultValue: null, description: "Additional styling props", name: "sx", required: !1, type: { name: "SxProps" } }, strokeWidth: { defaultValue: { value: "0" }, description: "Stroke width for the icon (default: 0)", name: "strokeWidth", required: !1, type: { name: "number" } }, gradientTheme: { defaultValue: { value: "blue-cyan" }, description: "Predefined gradient theme (default: 'blue-cyan')", name: "gradientTheme", required: !1, type: { name: "enum", value: [{ value: '"custom"' }, { value: '"blue-cyan"' }, { value: '"purple-pink"' }, { value: '"orange-red"' }, { value: '"green-teal"' }, { value: '"indigo-purple"' }] } }, customGradient: { defaultValue: null, description: "Custom gradient colors when theme is 'custom'", name: "customGradient", required: !1, type: { name: "CustomGradient" } }, gradientDirection: { defaultValue: { value: "diagonal" }, description: "Direction of the gradient (default: 'diagonal')", name: "gradientDirection", required: !1, type: { name: "enum", value: [{ value: '"horizontal"' }, { value: '"vertical"' }, { value: '"diagonal"' }, { value: '"radial"' }] } }, animationDuration: { defaultValue: { value: "300" }, description: "Animation duration in milliseconds (default: 300)", name: "animationDuration", required: !1, type: { name: "number" } }, animationEasing: { defaultValue: { value: "ease" }, description: "Animation easing function (default: 'ease')", name: "animationEasing", required: !1, type: { name: "enum", value: [{ value: '"linear"' }, { value: '"ease"' }, { value: '"ease-in"' }, { value: '"ease-out"' }, { value: '"ease-in-out"' }] } }, autoHover: { defaultValue: { value: "false" }, description: "Whether to automatically detect hover state (default: false)", name: "autoHover", required: !1, type: { name: "boolean" } }, gradientId: { defaultValue: null, description: "Unique identifier for the gradient (auto-generated if not provided)", name: "gradientId", required: !1, type: { name: "string" } }, alwaysGradient: { defaultValue: { value: "false" }, description: "Whether to always show gradient (overrides hovered state)", name: "alwaysGradient", required: !1, type: { name: "boolean" } }, fallbackColor: { defaultValue: null, description: "Fallback color when gradient is not shown", name: "fallbackColor", required: !1, type: { name: "string" } } } };
+} catch {
+}
+try {
+  sgradienticon.displayName = "sgradienticon", sgradienticon.__docgenInfo = { description: "A customizable icon component that applies gradient effects with multiple themes and animations.", displayName: "sgradienticon", props: { hovered: { defaultValue: { value: "false" }, description: "Whether the icon should show the gradient fill (hover state)", name: "hovered", required: !1, type: { name: "boolean" } }, IconComponent: { defaultValue: null, description: "The Material-UI icon component to render with gradient effect", name: "IconComponent", required: !0, type: { name: "IconComponent" } }, sx: { defaultValue: null, description: "Additional styling props", name: "sx", required: !1, type: { name: "SxProps" } }, strokeWidth: { defaultValue: { value: "0" }, description: "Stroke width for the icon (default: 0)", name: "strokeWidth", required: !1, type: { name: "number" } }, gradientTheme: { defaultValue: { value: "blue-cyan" }, description: "Predefined gradient theme (default: 'blue-cyan')", name: "gradientTheme", required: !1, type: { name: "enum", value: [{ value: '"custom"' }, { value: '"blue-cyan"' }, { value: '"purple-pink"' }, { value: '"orange-red"' }, { value: '"green-teal"' }, { value: '"indigo-purple"' }] } }, customGradient: { defaultValue: null, description: "Custom gradient colors when theme is 'custom'", name: "customGradient", required: !1, type: { name: "CustomGradient" } }, gradientDirection: { defaultValue: { value: "diagonal" }, description: "Direction of the gradient (default: 'diagonal')", name: "gradientDirection", required: !1, type: { name: "enum", value: [{ value: '"horizontal"' }, { value: '"vertical"' }, { value: '"diagonal"' }, { value: '"radial"' }] } }, animationDuration: { defaultValue: { value: "300" }, description: "Animation duration in milliseconds (default: 300)", name: "animationDuration", required: !1, type: { name: "number" } }, animationEasing: { defaultValue: { value: "ease" }, description: "Animation easing function (default: 'ease')", name: "animationEasing", required: !1, type: { name: "enum", value: [{ value: '"linear"' }, { value: '"ease"' }, { value: '"ease-in"' }, { value: '"ease-out"' }, { value: '"ease-in-out"' }] } }, autoHover: { defaultValue: { value: "false" }, description: "Whether to automatically detect hover state (default: false)", name: "autoHover", required: !1, type: { name: "boolean" } }, gradientId: { defaultValue: null, description: "Unique identifier for the gradient (auto-generated if not provided)", name: "gradientId", required: !1, type: { name: "string" } }, alwaysGradient: { defaultValue: { value: "false" }, description: "Whether to always show gradient (overrides hovered state)", name: "alwaysGradient", required: !1, type: { name: "boolean" } }, fallbackColor: { defaultValue: null, description: "Fallback color when gradient is not shown", name: "fallbackColor", required: !1, type: { name: "string" } } } };
+} catch {
+}
 export {
-  E as default
+  s as SGradientIcon,
+  s as default
 };

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

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

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

@@ -8,37 +8,9 @@ export interface SI18nProviderProps {
     /** Language code to set as active (default: 'en') */
     language?: string;
 }
-/**
- * Internationalization provider component with dynamic language switching
- *
- * Provides i18next internationalization context to child components with
- * dynamic language changing capability. Uses HTTP backend to load translation
- * files and React integration for seamless component-level translations.
- *
- * Features:
- * - Dynamic language switching at runtime
- * - HTTP backend for loading translation files from server
- * - Fallback language support (defaults to English)
- * - Error handling for initialization and language changes
- * - React integration for hooks like useTranslation
- *
- * The component automatically changes the active language when the language
- * prop updates, with proper error handling if the language change fails.
- *
- * @param children - Components that will have access to i18next functionality
- * @param language - Language code to set as active (e.g., 'en', 'es', 'fr')
- * @returns JSX fragment containing children with i18n context
- *
- * @example
- * ```tsx
- * <SI18nProvider language="es">
- *   <App />
- * </SI18nProvider>
- *
- * // In child components:
- * const { t } = useTranslation();
- * return <div>{t('welcome_message')}</div>;
- * ```
- */
-declare const SI18nProvider: ({ children, language }: SI18nProviderProps) => React.JSX.Element;
+/** Internationalization provider component with dynamic language switching support. */
+export declare const SI18nProvider: {
+    ({ children, language }: SI18nProviderProps): React.JSX.Element;
+    displayName: string;
+};
 export default SI18nProvider;

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

@@ -1,10 +1,10 @@
-import { j as a } from "../jsx-runtime-OVHDjVDe.js";
-import * as o from "react";
-import { use as i } from "i18next";
-import s from "i18next-http-backend";
-import { initReactI18next as c, useTranslation as m } from "react-i18next";
-import { logger as n } from "../utils/logger.js";
-i(s).use(c).init({
+import { j as o } from "../jsx-runtime-OVHDjVDe.js";
+import * as i from "react";
+import { use as l } from "i18next";
+import c from "i18next-http-backend";
+import { initReactI18next as d, useTranslation as s } from "react-i18next";
+import { logger as r } from "../utils/logger.js";
+l(c).use(d).init({
   lng: "en",
   // Default language
   fallbackLng: "en",
@@ -12,16 +12,26 @@ i(s).use(c).init({
   interpolation: { escapeValue: !1 }
   // React already escapes values
 }).catch((e) => {
-  n.error("Failed to initialize i18n", e);
+  r.error("Failed to initialize i18n", e);
 });
-const d = ({ children: e, language: t = "en" }) => {
-  const { i18n: r } = m();
-  return o.useEffect(() => {
-    r.changeLanguage(t).catch(() => {
-      n.error(`Failed to change language to ${t}`);
+const n = ({ children: e, language: a = "en" }) => {
+  const { i18n: t } = s();
+  return i.useEffect(() => {
+    t.changeLanguage(a).catch(() => {
+      r.error(`Failed to change language to ${a}`);
     });
-  }, [r, t]), /* @__PURE__ */ a.jsx(o.Fragment, { children: e });
+  }, [t, a]), /* @__PURE__ */ o.jsx(i.Fragment, { children: e });
 };
+n.displayName = "SI18nProvider";
+try {
+  n.displayName = "SI18nProvider", n.__docgenInfo = { description: "Internationalization provider component with dynamic language switching support.", displayName: "SI18nProvider", props: { children: { defaultValue: null, description: "Child components that will have access to internationalization", name: "children", required: !0, type: { name: "ReactNode" } }, language: { defaultValue: { value: "en" }, description: "Language code to set as active (default: 'en')", name: "language", required: !1, type: { name: "string" } } } };
+} catch {
+}
+try {
+  si18nprovider.displayName = "si18nprovider", si18nprovider.__docgenInfo = { description: "Internationalization provider component with dynamic language switching support.", displayName: "si18nprovider", props: { children: { defaultValue: null, description: "Child components that will have access to internationalization", name: "children", required: !0, type: { name: "ReactNode" } }, language: { defaultValue: { value: "en" }, description: "Language code to set as active (default: 'en')", name: "language", required: !1, type: { name: "string" } } } };
+} catch {
+}
 export {
-  d as default
+  n as SI18nProvider,
+  n as default
 };

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

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

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

@@ -1,30 +1,17 @@
 import { default as React } from 'react';
 import { IconButtonProps, TooltipProps } from '@mui/material';
 /**
- * Props interface for SIconButton component - extends Material-UI IconButtonProps
- * with optional tooltip integration
+ * Props interface for SIconButton component
  */
 export interface SIconButtonProps extends IconButtonProps {
     /** Optional tooltip configuration (excludes 'children' which is handled internally) */
     tooltipOptions?: Omit<TooltipProps, 'children'>;
 }
 /**
- * SIconButton - An enhanced icon button component with optional tooltip integration.
- * Wraps Material-UI IconButton with convenient tooltip functionality.
- *
- * Key features:
- * - Full Material-UI IconButton API compatibility
- * - Optional tooltip integration without additional wrapper components
- * - Clean conditional rendering based on tooltip presence
- * - Maintains all IconButton styling and behavior
- * - Simplified tooltip configuration
- *
- * The tooltip is only rendered when tooltipOptions are provided, keeping the DOM
- * clean when tooltips aren't needed. This pattern reduces unnecessary wrapper
- * components and improves performance.
- *
- * @param props - SIconButtonProps with IconButton props and optional tooltip config
- * @returns JSX.Element - IconButton with optional tooltip wrapper
+ * An enhanced icon button component with optional tooltip integration.
  */
-declare const SIconButton: ({ tooltipOptions, ...props }: SIconButtonProps) => React.JSX.Element;
+export declare const SIconButton: {
+    ({ tooltipOptions, ...props }: SIconButtonProps): React.JSX.Element;
+    displayName: string;
+};
 export default SIconButton;

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

@@ -1,6 +1,16 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { Tooltip as s, IconButton as n } from "@mui/material";
-const j = ({ tooltipOptions: o, ...r }) => o ? /* @__PURE__ */ t.jsx(s, { ...o, children: /* @__PURE__ */ t.jsx(n, { ...r }) }) : /* @__PURE__ */ t.jsx(n, { ...r });
+import { j as o } from "../jsx-runtime-OVHDjVDe.js";
+import { Tooltip as l, IconButton as e } from "@mui/material";
+const n = ({ tooltipOptions: t, ...i }) => t ? /* @__PURE__ */ o.jsx(l, { ...t, children: /* @__PURE__ */ o.jsx(e, { ...i }) }) : /* @__PURE__ */ o.jsx(e, { ...i });
+n.displayName = "SIconButton";
+try {
+  n.displayName = "SIconButton", n.__docgenInfo = { description: "An enhanced icon button component with optional tooltip integration.", displayName: "SIconButton", props: { tooltipOptions: { defaultValue: null, description: "Optional tooltip configuration (excludes 'children' which is handled internally)", name: "tooltipOptions", required: !1, type: { name: 'Omit<TooltipProps, "children">' } } } };
+} catch {
+}
+try {
+  siconbutton.displayName = "siconbutton", siconbutton.__docgenInfo = { description: "An enhanced icon button component with optional tooltip integration.", displayName: "siconbutton", props: { tooltipOptions: { defaultValue: null, description: "Optional tooltip configuration (excludes 'children' which is handled internally)", name: "tooltipOptions", required: !1, type: { name: 'Omit<TooltipProps, "children">' } } } };
+} catch {
+}
 export {
-  j as default
+  n as SIconButton,
+  n as default
 };