@solostylist/ui-kit 1.0.167 → 1.0.169

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

@@ -5,36 +5,20 @@ import { Theme } from '../theme/types';
  * Props interface for SLabel component
  */
 export interface SLabelProps {
-    /** Primary label text or element */
+    /** Main label text or element to display prominently */
     label?: string | React.ReactNode;
-    /** Additional child elements rendered below the content */
+    /** Child elements to render below the label, typically form controls */
     children?: React.ReactNode;
-    /** Help text displayed as a tooltip next to the label */
+    /** Tooltip hint text shown on hover of the help icon */
     hint?: string;
-    /** Custom styling props */
+    /** Custom styles using Material-UI sx prop for layout customization */
     sx?: SxProps<Theme> | undefined;
 }
 /**
- * SLabel - A flexible label component for displaying titled content with optional help text.
- * Provides consistent typography and spacing for label-content pairs throughout the application.
- *
- * Key features:
- * - Primary label with medium font weight (1rem)
- * - Secondary content with lighter weight and color (0.875rem)
- * - Optional help tooltip with icon indicator
- * - Flexible content support (string or React elements)
- * - Full width container with customizable styling
- * - Consistent line height and spacing
- * - CSS custom property integration for theming
- *
- * Common use cases:
- * - Form field labels with descriptions
- * - Settings or configuration displays
- * - Data presentation with context
- * - Information cards with titles and descriptions
- *
- * @param props - SLabelProps with label, content, and styling options
- * @returns JSX.Element - Styled label with content and optional help text
+ * An enhanced label component that provides structured labeling with optional hints and tooltips.
  */
-declare const SLabel: ({ label, children, hint, sx }: SLabelProps) => React.JSX.Element;
+export declare const SLabel: {
+    ({ label, children, hint, sx }: SLabelProps): React.JSX.Element;
+    displayName: string;
+};
 export default SLabel;

package/dist/s-label/s-label.js

@@ -1,15 +1,25 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import { c as i } from "../createSvgIcon-DxwgGAVe.js";
-import { Stack as o, Box as s, Tooltip as l } from "@mui/material";
-const m = i(/* @__PURE__ */ e.jsx("path", {
+import { c as r } from "../createSvgIcon-DxwgGAVe.js";
+import { Stack as a, Box as s, Tooltip as d } from "@mui/material";
+const c = r(/* @__PURE__ */ e.jsx("path", {
   d: "M11 18h2v-2h-2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4"
-}), "HelpOutlineOutlined"), p = ({ label: n, children: r, hint: t, sx: c }) => /* @__PURE__ */ e.jsxs(o, { width: "100%", sx: c, children: [
-  /* @__PURE__ */ e.jsxs(o, { direction: "row", alignItems: "center", mb: 1, children: [
-    /* @__PURE__ */ e.jsx(s, { sx: { fontSize: "0.875rem", fontWeight: 500, lineHeight: 1.57, color: "text.secondary" }, children: n }),
-    t ? /* @__PURE__ */ e.jsx(l, { title: t, placement: "top", children: /* @__PURE__ */ e.jsx(m, { sx: { marginLeft: "4px", fontSize: 16, color: "text.secondary" } }) }) : null
+}), "HelpOutlineOutlined"), l = ({ label: t, children: o, hint: n, sx: i }) => /* @__PURE__ */ e.jsxs(a, { width: "100%", sx: i, children: [
+  /* @__PURE__ */ e.jsxs(a, { direction: "row", alignItems: "center", mb: 1, children: [
+    /* @__PURE__ */ e.jsx(s, { sx: { fontSize: "0.875rem", fontWeight: 500, lineHeight: 1.57, color: "text.secondary" }, children: t }),
+    n ? /* @__PURE__ */ e.jsx(d, { title: n, placement: "top", children: /* @__PURE__ */ e.jsx(c, { sx: { marginLeft: "4px", fontSize: 16, color: "text.secondary" } }) }) : null
   ] }),
-  r
+  o
 ] });
+l.displayName = "SLabel";
+try {
+  l.displayName = "SLabel", l.__docgenInfo = { description: "An enhanced label component that provides structured labeling with optional hints and tooltips.", displayName: "SLabel", props: { label: { defaultValue: null, description: "Main label text or element to display prominently", name: "label", required: !1, type: { name: "ReactNode" } }, children: { defaultValue: null, description: "Child elements to render below the label, typically form controls", name: "children", required: !1, type: { name: "ReactNode" } }, hint: { defaultValue: null, description: "Tooltip hint text shown on hover of the help icon", name: "hint", required: !1, type: { name: "string" } }, sx: { defaultValue: null, description: "Custom styles using Material-UI sx prop for layout customization", name: "sx", required: !1, type: { name: "SxProps<Theme>" } } } };
+} catch {
+}
+try {
+  slabel.displayName = "slabel", slabel.__docgenInfo = { description: "An enhanced label component that provides structured labeling with optional hints and tooltips.", displayName: "slabel", props: { label: { defaultValue: null, description: "Main label text or element to display prominently", name: "label", required: !1, type: { name: "ReactNode" } }, children: { defaultValue: null, description: "Child elements to render below the label, typically form controls", name: "children", required: !1, type: { name: "ReactNode" } }, hint: { defaultValue: null, description: "Tooltip hint text shown on hover of the help icon", name: "hint", required: !1, type: { name: "string" } }, sx: { defaultValue: null, description: "Custom styles using Material-UI sx prop for layout customization", name: "sx", required: !1, type: { name: "SxProps<Theme>" } } } };
+} catch {
+}
 export {
-  p as default
+  l as SLabel,
+  l as default
 };

package/dist/s-language-switcher/index.js

@@ -1,6 +1,6 @@
-import { SLanguagePopover as o, default as g, defaultLanguageOptions as t } from "./s-language-switcher.js";
+import { SLanguagePopover as g, SLanguageSwitcher as o, defaultLanguageOptions as t } from "./s-language-switcher.js";
 export {
-  o as SLanguagePopover,
-  g as default,
+  g as SLanguagePopover,
+  o as default,
   t as defaultLanguageOptions
 };

package/dist/s-language-switcher/s-language-switcher.d.ts

@@ -16,48 +16,35 @@ export interface SLanguagePopoverProps {
     menuWidth?: string | number;
     flagSize?: number;
 }
-export declare function SLanguagePopover({ anchorEl, onClose, open, onLanguageChange, languages, currentLanguage, menuWidth, flagSize, }: SLanguagePopoverProps): React.JSX.Element;
+export declare const SLanguagePopover: ({ anchorEl, onClose, open, onLanguageChange, languages, currentLanguage, menuWidth, flagSize, }: SLanguagePopoverProps) => React.JSX.Element;
+/**
+ * Props interface for SLanguageSwitcher component
+ */
 export interface SLanguageSwitcherProps {
-    /**
-     * Custom language options to display
-     */
+    /** Custom language options to display */
     languages?: SLanguageOption[];
-    /**
-     * Callback when language changes
-     * If not provided, will use i18n.changeLanguage
-     */
+    /** Callback when language changes (if not provided, will use i18n.changeLanguage) */
     onLanguageChange?: (languageCode: string) => void;
-    /**
-     * Current language code
-     * If not provided, will use i18n.language
-     */
+    /** Current language code (if not provided, will use i18n.language) */
     currentLanguage?: string;
-    /**
-     * Tooltip text for the language button
-     * If not provided and i18n is available, will use t('header:language.tooltip')
-     */
+    /** Tooltip text for the language button */
     tooltipText?: string;
-    /**
-     * Size of the flag icon in the button
-     */
+    /** Size of the flag icon in the button */
     buttonFlagSize?: number;
-    /**
-     * Size of the flag icon in the menu
-     */
+    /** Size of the flag icon in the menu */
     menuFlagSize?: number;
-    /**
-     * Width of the language menu
-     */
+    /** Width of the language menu */
     menuWidth?: string | number;
-    /**
-     * Custom styles for the icon button
-     */
+    /** Custom styles for the icon button */
     sx?: SxProps<Theme>;
-    /**
-     * Whether to use i18n integration
-     * @default true
-     */
+    /** Whether to use i18n integration */
     useI18n?: boolean;
 }
-declare function SLanguageSwitcher({ languages, onLanguageChange, currentLanguage, tooltipText, buttonFlagSize, menuFlagSize, menuWidth, sx, useI18n, }: SLanguageSwitcherProps): React.JSX.Element;
+/**
+ * A language switcher component with flag icons and dropdown menu.
+ */
+export declare const SLanguageSwitcher: {
+    ({ languages, onLanguageChange, currentLanguage, tooltipText, buttonFlagSize, menuFlagSize, menuWidth, sx, useI18n, }: SLanguageSwitcherProps): React.JSX.Element;
+    displayName: string;
+};
 export default SLanguageSwitcher;

package/dist/s-language-switcher/s-language-switcher.js

@@ -1,34 +1,35 @@
-import { j as i } from "../jsx-runtime-OVHDjVDe.js";
-import * as j from "react";
-import I from "react";
-import { useTranslation as R } from "react-i18next";
-import { usePopover as T } from "../hooks/use-popover.js";
-import w from "../s-icon-button/s-icon-button.js";
-import g from "../s-lazy-image/s-lazy-image.js";
-import { L as k, M } from "../Menu-CWq-a1Wz.js";
-import { g as O, M as P } from "../MenuItem-DY_qFSPR.js";
-import { P as o } from "../createTheme-3Wd3hHrj.js";
-import { u as E, c as N, a as _, m as z } from "../DefaultPropsProvider-CaCsvQaq.js";
-import { s as D } from "../styled-B0Z4EDy9.js";
-import { T as F } from "../Typography-B7LOtCzI.js";
-const U = (e) => {
+import { j as o } from "../jsx-runtime-OVHDjVDe.js";
+import * as S from "react";
+import y from "react";
+import { useTranslation as q } from "react-i18next";
+import { usePopover as C } from "../hooks/use-popover.js";
+import { SIconButton as T } from "../s-icon-button/s-icon-button.js";
+import "../s-lazy-image/index.js";
+import { L as z, M as j } from "../Menu-CWq-a1Wz.js";
+import { g as N, M as k } from "../MenuItem-DY_qFSPR.js";
+import { P as t } from "../createTheme-3Wd3hHrj.js";
+import { u as E, c as W, a as F, m as P } from "../DefaultPropsProvider-CaCsvQaq.js";
+import { s as O } from "../styled-B0Z4EDy9.js";
+import L from "../s-lazy-image/s-lazy-image.js";
+import { T as R } from "../Typography-C8jwvSWe.js";
+const M = (e) => {
   const {
-    alignItems: t,
-    classes: n
+    alignItems: a,
+    classes: i
   } = e;
-  return _({
-    root: ["root", t === "flex-start" && "alignItemsFlexStart"]
-  }, O, n);
-}, V = D("div", {
+  return F({
+    root: ["root", a === "flex-start" && "alignItemsFlexStart"]
+  }, N, i);
+}, A = O("div", {
   name: "MuiListItemIcon",
   slot: "Root",
-  overridesResolver: (e, t) => {
+  overridesResolver: (e, a) => {
     const {
-      ownerState: n
+      ownerState: i
     } = e;
-    return [t.root, n.alignItems === "flex-start" && t.alignItemsFlexStart];
+    return [a.root, i.alignItems === "flex-start" && a.alignItemsFlexStart];
   }
-})(z(({
+})(P(({
   theme: e
 }) => ({
   minWidth: 56,
@@ -43,25 +44,25 @@ const U = (e) => {
       marginTop: 8
     }
   }]
-}))), y = /* @__PURE__ */ j.forwardRef(function(t, n) {
-  const r = E({
-    props: t,
+}))), V = /* @__PURE__ */ S.forwardRef(function(a, i) {
+  const l = E({
+    props: a,
     name: "MuiListItemIcon"
   }), {
-    className: c,
-    ...p
-  } = r, f = j.useContext(k), l = {
-    ...r,
-    alignItems: f.alignItems
-  }, d = U(l);
-  return /* @__PURE__ */ i.jsx(V, {
-    className: N(d.root, c),
-    ownerState: l,
-    ref: n,
-    ...p
+    className: u,
+    ...d
+  } = l, g = S.useContext(z), r = {
+    ...l,
+    alignItems: g.alignItems
+  }, p = M(r);
+  return /* @__PURE__ */ o.jsx(A, {
+    className: W(p.root, u),
+    ownerState: r,
+    ref: i,
+    ...d
   });
 });
-process.env.NODE_ENV !== "production" && (y.propTypes = {
+process.env.NODE_ENV !== "production" && (V.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -70,127 +71,148 @@ process.env.NODE_ENV !== "production" && (y.propTypes = {
    * The content of the component, normally `Icon`, `SvgIcon`,
    * or a `@mui/icons-material` SVG icon element.
    */
-  children: o.node,
+  children: t.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: o.object,
+  classes: t.object,
   /**
    * @ignore
    */
-  className: o.string,
+  className: t.string,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
 });
-const b = [
+const I = [
   { code: "en", label: "English", icon: "/assets/flag-uk.svg" },
   { code: "vi", label: "Vietnamese", icon: "/assets/flag-vi.svg" }
-];
-function B({
+], v = ({
   anchorEl: e,
-  onClose: t,
-  open: n = !1,
-  onLanguageChange: r,
-  languages: c = b,
-  currentLanguage: p,
-  menuWidth: f = "220px",
-  flagSize: l = 28
-}) {
-  const d = I.useCallback(
-    (s) => {
-      r == null || r(s), t == null || t();
+  onClose: a,
+  open: i = !1,
+  onLanguageChange: l,
+  languages: u = I,
+  currentLanguage: d,
+  menuWidth: g = "220px",
+  flagSize: r = 28
+}) => {
+  const p = y.useCallback(
+    (n) => {
+      l == null || l(n), a == null || a();
     },
-    [r, t]
+    [l, a]
   );
-  return /* @__PURE__ */ i.jsx(
-    M,
+  return /* @__PURE__ */ o.jsx(
+    j,
     {
       anchorEl: e,
       anchorOrigin: { horizontal: "right", vertical: "bottom" },
-      onClose: t,
-      open: n,
-      slotProps: { paper: { sx: { width: f } } },
+      onClose: a,
+      open: i,
+      slotProps: { paper: { sx: { width: g } } },
       transformOrigin: { horizontal: "right", vertical: "top" },
-      children: c.map((s) => {
-        const a = p === s.code;
-        return /* @__PURE__ */ i.jsxs(
-          P,
+      children: u.map((n) => {
+        const s = d === n.code;
+        return /* @__PURE__ */ o.jsxs(
+          k,
           {
             onClick: () => {
-              d(s.code);
+              p(n.code);
             },
-            selected: a,
+            selected: s,
             sx: { gap: 1 },
             children: [
-              /* @__PURE__ */ i.jsx(y, { children: /* @__PURE__ */ i.jsx(g, { alt: s.label, src: s.icon, height: l, width: l }) }),
-              /* @__PURE__ */ i.jsx(F, { variant: "subtitle2", children: s.label })
+              /* @__PURE__ */ o.jsx(V, { children: /* @__PURE__ */ o.jsx(L, { alt: n.label, src: n.icon, height: r, width: r }) }),
+              /* @__PURE__ */ o.jsx(R, { variant: "subtitle2", children: n.label })
             ]
           },
-          s.code
+          n.code
         );
       })
     }
   );
-}
-function $({
-  languages: e = b,
-  onLanguageChange: t,
-  currentLanguage: n,
-  tooltipText: r,
-  buttonFlagSize: c = 24,
-  menuFlagSize: p = 28,
-  menuWidth: f = "220px",
-  sx: l,
-  useI18n: d = !0
-}) {
-  var v;
-  const { t: s, i18n: a } = d ? R() : { t: null, i18n: null }, x = T(), u = n || ((a == null ? void 0 : a.language) ?? ((v = e[0]) == null ? void 0 : v.code) ?? "en"), m = e.find((h) => h.code === u) || e[0], S = I.useCallback(
-    (h) => {
-      t ? t(h) : a && a.changeLanguage(h);
+}, x = ({
+  languages: e = I,
+  onLanguageChange: a,
+  currentLanguage: i,
+  tooltipText: l,
+  buttonFlagSize: u = 24,
+  menuFlagSize: d = 28,
+  menuWidth: g = "220px",
+  sx: r,
+  useI18n: p = !0
+}) => {
+  var b;
+  const { t: n, i18n: s } = p ? q() : { t: null, i18n: null }, m = C(), h = i || ((s == null ? void 0 : s.language) ?? ((b = e[0]) == null ? void 0 : b.code) ?? "en"), c = e.find((f) => f.code === h) || e[0], w = y.useCallback(
+    (f) => {
+      a ? a(f) : s && s.changeLanguage(f);
     },
-    [t, a]
-  ), L = r || (s ? s("header:language.tooltip") : "Change language");
-  return /* @__PURE__ */ i.jsxs(I.Fragment, { children: [
-    /* @__PURE__ */ i.jsx(
-      w,
+    [a, s]
+  ), _ = l || (n ? n("header:language.tooltip") : "Change language");
+  return /* @__PURE__ */ o.jsxs(y.Fragment, { children: [
+    /* @__PURE__ */ o.jsx(
+      T,
       {
-        onClick: x.handleOpen,
-        ref: x.anchorRef,
-        sx: { display: { xs: "none", lg: "inline-flex" }, ...l },
+        onClick: m.handleOpen,
+        ref: m.anchorRef,
+        sx: { display: { xs: "none", lg: "inline-flex" }, ...r },
         tooltipOptions: {
-          title: L,
+          title: _,
           placement: "top"
         },
-        children: /* @__PURE__ */ i.jsx(
-          g,
+        children: /* @__PURE__ */ o.jsx(
+          L,
           {
-            alt: (m == null ? void 0 : m.label) || u,
-            src: (m == null ? void 0 : m.icon) || "",
-            height: c,
-            width: c
+            alt: (c == null ? void 0 : c.label) || h,
+            src: (c == null ? void 0 : c.icon) || "",
+            height: u,
+            width: u
           }
         )
       }
     ),
-    /* @__PURE__ */ i.jsx(
-      B,
+    /* @__PURE__ */ o.jsx(
+      v,
       {
-        anchorEl: x.anchorRef.current,
-        onClose: x.handleClose,
-        open: x.open,
-        onLanguageChange: S,
+        anchorEl: m.anchorRef.current,
+        onClose: m.handleClose,
+        open: m.open,
+        onLanguageChange: w,
         languages: e,
-        currentLanguage: u,
-        menuWidth: f,
-        flagSize: p
+        currentLanguage: h,
+        menuWidth: g,
+        flagSize: d
       }
     )
   ] });
+};
+x.displayName = "SLanguageSwitcher";
+try {
+  v.displayName = "SLanguagePopover", v.__docgenInfo = { description: "", displayName: "SLanguagePopover", props: { anchorEl: { defaultValue: null, description: "", name: "anchorEl", required: !0, type: { name: "Element | null" } }, onClose: { defaultValue: null, description: "", name: "onClose", required: !1, type: { name: "(() => void)" } }, open: { defaultValue: { value: "false" }, description: "", name: "open", required: !1, type: { name: "boolean" } }, onLanguageChange: { defaultValue: null, description: "", name: "onLanguageChange", required: !1, type: { name: "((languageCode: string) => void)" } }, languages: { defaultValue: { value: `[
+  { code: 'en', label: 'English', icon: '/assets/flag-uk.svg' },
+  { code: 'vi', label: 'Vietnamese', icon: '/assets/flag-vi.svg' },
+]` }, description: "", name: "languages", required: !1, type: { name: "SLanguageOption[]" } }, currentLanguage: { defaultValue: null, description: "", name: "currentLanguage", required: !1, type: { name: "string" } }, menuWidth: { defaultValue: { value: "220px" }, description: "", name: "menuWidth", required: !1, type: { name: "string | number" } }, flagSize: { defaultValue: { value: "28" }, description: "", name: "flagSize", required: !1, type: { name: "number" } } } };
+} catch {
+}
+try {
+  x.displayName = "SLanguageSwitcher", x.__docgenInfo = { description: "A language switcher component with flag icons and dropdown menu.", displayName: "SLanguageSwitcher", props: { languages: { defaultValue: { value: `[
+  { code: 'en', label: 'English', icon: '/assets/flag-uk.svg' },
+  { code: 'vi', label: 'Vietnamese', icon: '/assets/flag-vi.svg' },
+]` }, description: "Custom language options to display", name: "languages", required: !1, type: { name: "SLanguageOption[]" } }, onLanguageChange: { defaultValue: null, description: "Callback when language changes (if not provided, will use i18n.changeLanguage)", name: "onLanguageChange", required: !1, type: { name: "((languageCode: string) => void)" } }, currentLanguage: { defaultValue: null, description: "Current language code (if not provided, will use i18n.language)", name: "currentLanguage", required: !1, type: { name: "string" } }, tooltipText: { defaultValue: null, description: "Tooltip text for the language button", name: "tooltipText", required: !1, type: { name: "string" } }, buttonFlagSize: { defaultValue: { value: "24" }, description: "Size of the flag icon in the button", name: "buttonFlagSize", required: !1, type: { name: "number" } }, menuFlagSize: { defaultValue: { value: "28" }, description: "Size of the flag icon in the menu", name: "menuFlagSize", required: !1, type: { name: "number" } }, menuWidth: { defaultValue: { value: "220px" }, description: "Width of the language menu", name: "menuWidth", required: !1, type: { name: "string | number" } }, sx: { defaultValue: null, description: "Custom styles for the icon button", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, useI18n: { defaultValue: { value: "true" }, description: "Whether to use i18n integration", name: "useI18n", required: !1, type: { name: "boolean" } } } };
+} catch {
+}
+try {
+  slanguageswitcher.displayName = "slanguageswitcher", slanguageswitcher.__docgenInfo = { description: "A language switcher component with flag icons and dropdown menu.", displayName: "slanguageswitcher", props: { languages: { defaultValue: { value: `[
+  { code: 'en', label: 'English', icon: '/assets/flag-uk.svg' },
+  { code: 'vi', label: 'Vietnamese', icon: '/assets/flag-vi.svg' },
+]` }, description: "Custom language options to display", name: "languages", required: !1, type: { name: "SLanguageOption[]" } }, onLanguageChange: { defaultValue: null, description: "Callback when language changes (if not provided, will use i18n.changeLanguage)", name: "onLanguageChange", required: !1, type: { name: "((languageCode: string) => void)" } }, currentLanguage: { defaultValue: null, description: "Current language code (if not provided, will use i18n.language)", name: "currentLanguage", required: !1, type: { name: "string" } }, tooltipText: { defaultValue: null, description: "Tooltip text for the language button", name: "tooltipText", required: !1, type: { name: "string" } }, buttonFlagSize: { defaultValue: { value: "24" }, description: "Size of the flag icon in the button", name: "buttonFlagSize", required: !1, type: { name: "number" } }, menuFlagSize: { defaultValue: { value: "28" }, description: "Size of the flag icon in the menu", name: "menuFlagSize", required: !1, type: { name: "number" } }, menuWidth: { defaultValue: { value: "220px" }, description: "Width of the language menu", name: "menuWidth", required: !1, type: { name: "string | number" } }, sx: { defaultValue: null, description: "Custom styles for the icon button", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, useI18n: { defaultValue: { value: "true" }, description: "Whether to use i18n integration", name: "useI18n", required: !1, type: { name: "boolean" } } } };
+} catch {
 }
 export {
-  B as SLanguagePopover,
-  $ as default,
-  b as defaultLanguageOptions
+  v as SLanguagePopover,
+  x as SLanguageSwitcher,
+  x as default,
+  I as defaultLanguageOptions
 };

package/dist/s-lazy-image/index.js

@@ -1,4 +1,12 @@
-import { default as o } from "./s-lazy-image.js";
+import { default as i } from "./s-lazy-image.js";
+try {
+  slazyimage.displayName = "slazyimage", slazyimage.__docgenInfo = { description: "A lazy-loading image component with skeleton placeholder.", displayName: "slazyimage", props: { src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, variant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } }, style: { defaultValue: null, description: "Custom styles applied to both skeleton and loaded image", name: "style", required: !1, type: { name: "CSSProperties" } }, height: { defaultValue: { value: "100%" }, description: "Image height", name: "height", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width", name: "width", required: !1, type: { name: "string | number" } }, minWidth: { defaultValue: { value: "auto" }, description: "Minimum width constraint", name: "minWidth", required: !1, type: { name: "string | number" } }, minHeight: { defaultValue: { value: "auto" }, description: "Minimum height constraint", name: "minHeight", required: !1, type: { name: "string | number" } } } };
+} catch {
+}
+try {
+  SLazyImageProps.displayName = "SLazyImageProps", SLazyImageProps.__docgenInfo = { description: "Props for the SLazyImage component", displayName: "SLazyImageProps", props: {} };
+} catch {
+}
 export {
-  o as default
+  i as default
 };

package/dist/s-lazy-image/s-lazy-image.d.ts

@@ -1,75 +1,29 @@
 import { default as React } from 'react';
 import { SkeletonProps } from '@mui/material';
 /**
- * Props interface for SLazyImage component with enhanced lazy loading capabilities
- *
- * Extends standard HTML image attributes while providing additional configuration
- * for skeleton loading states, responsive dimensions, and performance optimizations.
+ * Props for the SLazyImage component
  */
 export interface SLazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-    /** Image source URL - triggers loading and skeleton-to-image transition */
+    /** Image source URL */
     src: string;
-    /** Skeleton variant while loading - affects border radius and animation style */
+    /** Skeleton variant while loading */
     variant?: SkeletonProps['variant'];
     /** Custom styles applied to both skeleton and loaded image */
     style?: React.CSSProperties;
-    /** Image height - supports responsive units, falls back to 'auto' if not provided */
+    /** Image height */
     height?: number | string;
-    /** Image width - supports responsive units, falls back to '100%' if not provided */
+    /** Image width */
     width?: number | string;
-    /** Minimum width constraint for skeleton and image */
+    /** Minimum width constraint */
     minWidth?: number | string;
-    /** Minimum height constraint for skeleton and image */
+    /** Minimum height constraint */
     minHeight?: number | string;
 }
 /**
- * SLazyImage - An optimized lazy-loading image component with enhanced performance and UX.
- *
- * This component provides a seamless loading experience by displaying a Material-UI skeleton
- * placeholder while the image loads, then smoothly transitioning to the loaded image.
- * Built with performance optimizations and proper theme integration.
- *
- * Key features:
- * - **Performance Optimized**: Uses display toggling instead of opacity for better rendering performance
- * - **Theme Integration**: Leverages useTheme hook for consistent border radius handling across variants
- * - **Smooth Transitions**: Clean skeleton-to-image transition with proper dimension management
- * - **Responsive Design**: Intelligent dimension handling with responsive fallbacks
- * - **Customizable Variants**: Supports Material-UI skeleton variants (rectangular, rounded, circular)
- * - **Memory Efficient**: Proper state management prevents unnecessary re-renders
- * - **Accessibility Ready**: Maintains all standard HTML image attributes and behaviors
- *
- * Performance improvements:
- * - Display toggling (display: none/block) instead of opacity transitions for better GPU performance
- * - Direct prop usage eliminates unnecessary state and re-renders
- * - Theme-aware border radius calculation reduces style recalculations
- * - Simplified onLoad handler reduces execution overhead
- *
- * @param props - SLazyImageProps configuration object
- * @returns JSX.Element - Optimized image component with loading state management
- *
- * @example
- * ```tsx
- * // Basic usage with skeleton loading
- * <SLazyImage src="/image.jpg" width={300} height={200} />
- *
- * // Circular avatar with custom dimensions
- * <SLazyImage
- *   src="/avatar.jpg"
- *   variant="circular"
- *   width={80}
- *   height={80}
- *   alt="User avatar"
- * />
- *
- * // Responsive image with custom styling
- * <SLazyImage
- *   src="/hero.jpg"
- *   variant="rounded"
- *   style={{ objectFit: 'cover' }}
- *   width="100%"
- *   height={400}
- * />
- * ```
+ * A lazy-loading image component with skeleton placeholder.
  */
-declare const SLazyImage: ({ src, variant, height, width, style, minWidth, minHeight, onLoad, ...props }: SLazyImageProps) => React.JSX.Element;
+declare const SLazyImage: {
+    ({ src, variant, height, width, style, minWidth, minHeight, onLoad, ...props }: SLazyImageProps): React.JSX.Element;
+    displayName: string;
+};
 export default SLazyImage;