@solostylist/ui-kit 1.0.174 → 1.0.176

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

@@ -1,39 +1,39 @@
-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) => {
+import { j as n } from "../jsx-runtime-tc70JA_2.js";
+import * as I from "react";
+import x from "react";
+import { useTranslation as b } from "react-i18next";
+import { usePopover as O } from "../hooks/use-popover.js";
+import { SIconButton as w } from "../s-icon-button/s-icon-button.js";
+import v from "../s-lazy-image/s-lazy-image.js";
+import { L as C, M as R } from "../Menu-DZYzE2Mg.js";
+import { g as T, M as k } from "../MenuItem-BXiIhfBS.js";
+import { P as s } from "../createTheme-f5g1s6ww.js";
+import { c as M } from "../clsx-OuTLNxxd.js";
+import { u as N, c as P, m as E } from "../DefaultPropsProvider-sk0uWcA6.js";
+import { s as _ } from "../styled-B0KflPi-.js";
+import { T as z } from "../Typography-9Kg27dDw.js";
+const D = (t) => {
   const {
-    alignItems: a,
-    classes: i
-  } = e;
-  return F({
-    root: ["root", a === "flex-start" && "alignItemsFlexStart"]
-  }, N, i);
-}, A = O("div", {
+    alignItems: e,
+    classes: r
+  } = t;
+  return P({
+    root: ["root", e === "flex-start" && "alignItemsFlexStart"]
+  }, T, r);
+}, F = _("div", {
   name: "MuiListItemIcon",
   slot: "Root",
-  overridesResolver: (e, a) => {
+  overridesResolver: (t, e) => {
     const {
-      ownerState: i
-    } = e;
-    return [a.root, i.alignItems === "flex-start" && a.alignItemsFlexStart];
+      ownerState: r
+    } = t;
+    return [e.root, r.alignItems === "flex-start" && e.alignItemsFlexStart];
   }
-})(P(({
-  theme: e
+})(E(({
+  theme: t
 }) => ({
   minWidth: 56,
-  color: (e.vars || e).palette.action.active,
+  color: (t.vars || t).palette.action.active,
   flexShrink: 0,
   display: "inline-flex",
   variants: [{
@@ -44,25 +44,25 @@ const M = (e) => {
       marginTop: 8
     }
   }]
-}))), V = /* @__PURE__ */ S.forwardRef(function(a, i) {
-  const l = E({
-    props: a,
+}))), j = /* @__PURE__ */ I.forwardRef(function(e, r) {
+  const a = N({
+    props: e,
     name: "MuiListItemIcon"
   }), {
-    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
+    className: c,
+    ...p
+  } = a, m = I.useContext(C), i = {
+    ...a,
+    alignItems: m.alignItems
+  }, f = D(i);
+  return /* @__PURE__ */ n.jsx(F, {
+    className: M(f.root, c),
+    ownerState: i,
+    ref: r,
+    ...p
   });
 });
-process.env.NODE_ENV !== "production" && (V.propTypes = {
+process.env.NODE_ENV !== "production" && (j.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -71,148 +71,126 @@ process.env.NODE_ENV !== "production" && (V.propTypes = {
    * The content of the component, normally `Icon`, `SvgIcon`,
    * or a `@mui/icons-material` SVG icon element.
    */
-  children: t.node,
+  children: s.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: t.object,
+  classes: s.object,
   /**
    * @ignore
    */
-  className: t.string,
+  className: s.string,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
+  sx: s.oneOfType([s.arrayOf(s.oneOfType([s.func, s.object, s.bool])), s.func, s.object])
 });
-const I = [
+const y = [
   { code: "en", label: "English", icon: "/assets/flag-uk.svg" },
   { code: "vi", label: "Vietnamese", icon: "/assets/flag-vi.svg" }
-], v = ({
-  anchorEl: e,
-  onClose: a,
-  open: i = !1,
-  onLanguageChange: l,
-  languages: u = I,
-  currentLanguage: d,
-  menuWidth: g = "220px",
-  flagSize: r = 28
+], U = ({
+  anchorEl: t,
+  onClose: e,
+  open: r = !1,
+  onLanguageChange: a,
+  languages: c = y,
+  currentLanguage: p,
+  menuWidth: m = "220px",
+  flagSize: i = 28
 }) => {
-  const p = y.useCallback(
-    (n) => {
-      l == null || l(n), a == null || a();
+  const f = x.useCallback(
+    (o) => {
+      a?.(o), e?.();
     },
-    [l, a]
+    [a, e]
   );
-  return /* @__PURE__ */ o.jsx(
-    j,
+  return /* @__PURE__ */ n.jsx(
+    R,
     {
-      anchorEl: e,
+      anchorEl: t,
       anchorOrigin: { horizontal: "right", vertical: "bottom" },
-      onClose: a,
-      open: i,
-      slotProps: { paper: { sx: { width: g } } },
+      onClose: e,
+      open: r,
+      slotProps: { paper: { sx: { width: m } } },
       transformOrigin: { horizontal: "right", vertical: "top" },
-      children: u.map((n) => {
-        const s = d === n.code;
-        return /* @__PURE__ */ o.jsxs(
+      children: c.map((o) => {
+        const l = p === o.code;
+        return /* @__PURE__ */ n.jsxs(
           k,
           {
             onClick: () => {
-              p(n.code);
+              f(o.code);
             },
-            selected: s,
+            selected: l,
             sx: { gap: 1 },
             children: [
-              /* @__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 })
+              /* @__PURE__ */ n.jsx(j, { children: /* @__PURE__ */ n.jsx(v, { alt: o.label, src: o.icon, height: i, width: i }) }),
+              /* @__PURE__ */ n.jsx(z, { variant: "subtitle2", children: o.label })
             ]
           },
-          n.code
+          o.code
         );
       })
     }
   );
-}, x = ({
-  languages: e = I,
-  onLanguageChange: a,
-  currentLanguage: i,
-  tooltipText: l,
-  buttonFlagSize: u = 24,
-  menuFlagSize: d = 28,
-  menuWidth: g = "220px",
-  sx: r,
-  useI18n: p = !0
+}, V = ({
+  languages: t = y,
+  onLanguageChange: e,
+  currentLanguage: r,
+  tooltipText: a,
+  buttonFlagSize: c = 24,
+  menuFlagSize: p = 28,
+  menuWidth: m = "220px",
+  sx: i,
+  useI18n: f = !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);
+  const { t: o, i18n: l } = f ? b() : { t: null, i18n: null }, d = O(), u = r || (l?.language ?? t[0]?.code ?? "en"), g = t.find((h) => h.code === u) || t[0], L = x.useCallback(
+    (h) => {
+      e ? e(h) : l && l.changeLanguage(h);
     },
-    [a, s]
-  ), _ = l || (n ? n("header:language.tooltip") : "Change language");
-  return /* @__PURE__ */ o.jsxs(y.Fragment, { children: [
-    /* @__PURE__ */ o.jsx(
-      T,
+    [e, l]
+  ), S = a || (o ? o("header:language.tooltip") : "Change language");
+  return /* @__PURE__ */ n.jsxs(x.Fragment, { children: [
+    /* @__PURE__ */ n.jsx(
+      w,
       {
-        onClick: m.handleOpen,
-        ref: m.anchorRef,
-        sx: { display: { xs: "none", lg: "inline-flex" }, ...r },
+        onClick: d.handleOpen,
+        ref: d.anchorRef,
+        sx: { display: { xs: "none", lg: "inline-flex" }, ...i },
         tooltipOptions: {
-          title: _,
+          title: S,
           placement: "top"
         },
-        children: /* @__PURE__ */ o.jsx(
-          L,
+        children: /* @__PURE__ */ n.jsx(
+          v,
           {
-            alt: (c == null ? void 0 : c.label) || h,
-            src: (c == null ? void 0 : c.icon) || "",
-            height: u,
-            width: u
+            alt: g?.label || u,
+            src: g?.icon || "",
+            height: c,
+            width: c
           }
         )
       }
     ),
-    /* @__PURE__ */ o.jsx(
-      v,
+    /* @__PURE__ */ n.jsx(
+      U,
       {
-        anchorEl: m.anchorRef.current,
-        onClose: m.handleClose,
-        open: m.open,
-        onLanguageChange: w,
-        languages: e,
-        currentLanguage: h,
-        menuWidth: g,
-        flagSize: d
+        anchorEl: d.anchorRef.current,
+        onClose: d.handleClose,
+        open: d.open,
+        onLanguageChange: L,
+        languages: t,
+        currentLanguage: u,
+        menuWidth: m,
+        flagSize: p
       }
     )
   ] });
 };
-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 {
-}
+V.displayName = "SLanguageSwitcher";
 export {
-  v as SLanguagePopover,
-  x as SLanguageSwitcher,
-  x as default,
-  I as defaultLanguageOptions
+  U as SLanguagePopover,
+  V as SLanguageSwitcher,
+  V as default,
+  y as defaultLanguageOptions
 };

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

@@ -1,12 +1,4 @@
-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 {
-}
+import { default as o } from "./s-lazy-image.js";
 export {
-  i as default
+  o as default
 };

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

@@ -1,61 +1,57 @@
-import { j as i } from "../jsx-runtime-OVHDjVDe.js";
-import { useId as h, useState as v } from "react";
-import { useTheme as I, Box as m, Skeleton as x } from "@mui/material";
-const n = ({
-  src: u,
+import { j as a } from "../jsx-runtime-tc70JA_2.js";
+import { useId as j, useState as y } from "react";
+import { useTheme as L, Box as u, Skeleton as I } from "@mui/material";
+const S = ({
+  src: n,
   variant: e = "rounded",
-  height: a = "100%",
-  width: t = "100%",
-  style: l,
-  minWidth: s = "auto",
-  minHeight: d = "auto",
-  onLoad: r,
+  height: o = "100%",
+  width: s = "100%",
+  style: r,
+  minWidth: d = "auto",
+  minHeight: m = "auto",
+  onLoad: l,
   ...p
 }) => {
-  const c = h(), g = I(), [o, y] = v(!1);
-  return /* @__PURE__ */ i.jsxs(m, { height: a, width: t, children: [
-    !o && /* @__PURE__ */ i.jsx(
-      x,
+  const c = j(), x = L(), [t, i] = y(!1);
+  return /* @__PURE__ */ a.jsxs(u, { height: o, width: s, children: [
+    !t && /* @__PURE__ */ a.jsx(
+      I,
       {
         variant: e,
         id: `image-skeleton-${c}`,
         animation: "wave",
         style: {
-          height: a,
-          width: t,
-          minWidth: s,
-          minHeight: d,
-          ...l
+          height: o,
+          width: s,
+          minWidth: d,
+          minHeight: m,
+          ...r
         }
       }
     ),
-    /* @__PURE__ */ i.jsx(
-      m,
+    /* @__PURE__ */ a.jsx(
+      u,
       {
         component: "img",
-        src: u,
+        src: n,
         style: {
-          height: a,
-          width: t,
-          minWidth: s,
-          minHeight: d,
-          display: o ? "block" : "none",
-          borderRadius: e === "circular" ? "50%" : e === "rounded" ? g.shape.borderRadius : "0px",
-          ...l
+          height: o,
+          width: s,
+          minWidth: d,
+          minHeight: m,
+          display: t ? "block" : "none",
+          borderRadius: e === "circular" ? "50%" : e === "rounded" ? x.shape.borderRadius : "0px",
+          ...r
         },
         onLoad: (f) => {
-          y(!0), r == null || r(f);
+          i(!0), l?.(f);
         },
         ...p
       }
     )
   ] });
 };
-n.displayName = "SLazyImage";
-try {
-  n.displayName = "SLazyImage", n.__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 {
-}
+S.displayName = "SLazyImage";
 export {
-  n as default
+  S as default
 };