@solostylist/ui-kit 1.0.185 → 1.0.186

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

@@ -3,7 +3,8 @@ import { SxProps, Theme } from '@mui/material/styles';
 export interface SLanguageOption {
     code: string;
     label: string;
-    icon: string;
+    /** ISO 3166-1 alpha-2 country code for the flag (e.g., 'US', 'GB', 'VN') */
+    countryCode: string;
 }
 export declare const defaultLanguageOptions: SLanguageOption[];
 export interface SLanguagePopoverProps {

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

@@ -1,39 +1,38 @@
-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-_ZW9WiF2.js";
-import { g as T, M as k } from "../MenuItem-DTapLhin.js";
-import { P as s } from "../createTheme-CIXJrNxb.js";
-import { c as M } from "../clsx-OuTLNxxd.js";
-import { u as N, c as P, m as E } from "../DefaultPropsProvider-2MEHB2yv.js";
-import { s as _ } from "../styled-BR6UL29H.js";
-import { T as z } from "../Typography-Cum5_Ehu.js";
-const D = (t) => {
+import { j as c } from "../jsx-runtime-tc70JA_2.js";
+import * as y from "react";
+import x, { createElement as C } from "react";
+import { useTranslation as L } from "react-i18next";
+import { usePopover as w } from "../hooks/use-popover.js";
+import { SIconButton as R } from "../s-icon-button/s-icon-button.js";
+import { L as T, M as U } from "../Menu-_ZW9WiF2.js";
+import { g as F, M as E } from "../MenuItem-DTapLhin.js";
+import { P as a } from "../createTheme-CIXJrNxb.js";
+import { c as N } from "../clsx-OuTLNxxd.js";
+import { u as P, c as _, m as k } from "../DefaultPropsProvider-2MEHB2yv.js";
+import { s as D } from "../styled-BR6UL29H.js";
+import { T as M } from "../Typography-Cum5_Ehu.js";
+const A = (e) => {
   const {
-    alignItems: e,
-    classes: r
-  } = t;
-  return P({
-    root: ["root", e === "flex-start" && "alignItemsFlexStart"]
-  }, T, r);
-}, F = _("div", {
+    alignItems: t,
+    classes: o
+  } = e;
+  return _({
+    root: ["root", t === "flex-start" && "alignItemsFlexStart"]
+  }, F, o);
+}, V = D("div", {
   name: "MuiListItemIcon",
   slot: "Root",
-  overridesResolver: (t, e) => {
+  overridesResolver: (e, t) => {
     const {
-      ownerState: r
-    } = t;
-    return [e.root, r.alignItems === "flex-start" && e.alignItemsFlexStart];
+      ownerState: o
+    } = e;
+    return [t.root, o.alignItems === "flex-start" && t.alignItemsFlexStart];
   }
-})(E(({
-  theme: t
+})(k(({
+  theme: e
 }) => ({
   minWidth: 56,
-  color: (t.vars || t).palette.action.active,
+  color: (e.vars || e).palette.action.active,
   flexShrink: 0,
   display: "inline-flex",
   variants: [{
@@ -44,22 +43,22 @@ const D = (t) => {
       marginTop: 8
     }
   }]
-}))), j = /* @__PURE__ */ I.forwardRef(function(e, r) {
-  const a = N({
-    props: e,
+}))), j = /* @__PURE__ */ y.forwardRef(function(t, o) {
+  const n = P({
+    props: t,
     name: "MuiListItemIcon"
   }), {
-    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
+    className: r,
+    ...i
+  } = n, p = y.useContext(T), l = {
+    ...n,
+    alignItems: p.alignItems
+  }, m = A(l);
+  return /* @__PURE__ */ c.jsx(V, {
+    className: N(m.root, r),
+    ownerState: l,
+    ref: o,
+    ...i
   });
 });
 process.env.NODE_ENV !== "production" && (j.propTypes = {
@@ -71,126 +70,181 @@ process.env.NODE_ENV !== "production" && (j.propTypes = {
    * The content of the component, normally `Icon`, `SvgIcon`,
    * or a `@mui/icons-material` SVG icon element.
    */
-  children: s.node,
+  children: a.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: s.object,
+  classes: a.object,
   /**
    * @ignore
    */
-  className: s.string,
+  className: a.string,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: s.oneOfType([s.arrayOf(s.oneOfType([s.func, s.object, s.bool])), s.func, s.object])
+  sx: a.oneOfType([a.arrayOf(a.oneOfType([a.func, a.object, a.bool])), a.func, a.object])
 });
-const y = [
-  { code: "en", label: "English", icon: "/assets/flag-uk.svg" },
-  { code: "vi", label: "Vietnamese", icon: "/assets/flag-vi.svg" }
-], U = ({
-  anchorEl: t,
-  onClose: e,
-  open: r = !1,
-  onLanguageChange: a,
-  languages: c = y,
-  currentLanguage: p,
-  menuWidth: m = "220px",
-  flagSize: i = 28
+function v() {
+  return v = Object.assign ? Object.assign.bind() : function(e) {
+    for (var t = 1; t < arguments.length; t++) {
+      var o = arguments[t];
+      for (var n in o)
+        Object.prototype.hasOwnProperty.call(o, n) && (e[n] = o[n]);
+    }
+    return e;
+  }, v.apply(this, arguments);
+}
+function $(e, t) {
+  if (e == null) return {};
+  var o = {}, n = Object.keys(e), r, i;
+  for (i = 0; i < n.length; i++)
+    r = n[i], !(t.indexOf(r) >= 0) && (o[r] = e[r]);
+  return o;
+}
+var z = ["cdnSuffix", "cdnUrl", "countryCode", "style", "svg"], B = "https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/", W = "svg", G = 127397, b = function(t) {
+  var o = t.cdnSuffix, n = o === void 0 ? W : o, r = t.cdnUrl, i = r === void 0 ? B : r, p = t.countryCode, l = t.style, m = t.svg, s = m === void 0 ? !1 : m, d = $(t, z);
+  if (typeof p != "string")
+    return null;
+  if (s) {
+    var u = "" + i + p.toLowerCase() + "." + n;
+    return C("img", Object.assign({}, d, {
+      src: u,
+      style: v({
+        display: "inline-block",
+        width: "1em",
+        height: "1em",
+        verticalAlign: "middle"
+      }, l)
+    }));
+  }
+  var f = p.toUpperCase().replace(/./g, function(g) {
+    return String.fromCodePoint(g.charCodeAt(0) + G);
+  });
+  return C("span", Object.assign({
+    role: "img"
+  }, d, {
+    style: v({
+      display: "inline-block",
+      fontSize: "1em",
+      lineHeight: "1em",
+      verticalAlign: "middle"
+    }, l)
+  }), f);
+};
+const I = [
+  { code: "en", label: "English", countryCode: "GB" },
+  { code: "vi", label: "Vietnamese", countryCode: "VN" }
+], H = ({
+  anchorEl: e,
+  onClose: t,
+  open: o = !1,
+  onLanguageChange: n,
+  languages: r = I,
+  currentLanguage: i,
+  menuWidth: p = "220px",
+  flagSize: l = 28
 }) => {
-  const f = x.useCallback(
-    (o) => {
-      a?.(o), e?.();
+  const m = x.useCallback(
+    (s) => {
+      n?.(s), t?.();
     },
-    [a, e]
+    [n, t]
   );
-  return /* @__PURE__ */ n.jsx(
-    R,
+  return /* @__PURE__ */ c.jsx(
+    U,
     {
-      anchorEl: t,
+      anchorEl: e,
       anchorOrigin: { horizontal: "right", vertical: "bottom" },
-      onClose: e,
-      open: r,
-      slotProps: { paper: { sx: { width: m } } },
+      onClose: t,
+      open: o,
+      slotProps: { paper: { sx: { width: p } } },
       transformOrigin: { horizontal: "right", vertical: "top" },
-      children: c.map((o) => {
-        const l = p === o.code;
-        return /* @__PURE__ */ n.jsxs(
-          k,
+      children: r.map((s) => {
+        const d = i === s.code;
+        return /* @__PURE__ */ c.jsxs(
+          E,
           {
             onClick: () => {
-              f(o.code);
+              m(s.code);
             },
-            selected: l,
+            selected: d,
             sx: { gap: 1 },
             children: [
-              /* @__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 })
+              /* @__PURE__ */ c.jsx(j, { children: /* @__PURE__ */ c.jsx(
+                b,
+                {
+                  countryCode: s.countryCode,
+                  svg: !0,
+                  style: { width: l, height: l },
+                  title: s.label
+                }
+              ) }),
+              /* @__PURE__ */ c.jsx(M, { variant: "subtitle2", children: s.label })
             ]
           },
-          o.code
+          s.code
         );
       })
     }
   );
-}, V = ({
-  languages: t = y,
-  onLanguageChange: e,
-  currentLanguage: r,
-  tooltipText: a,
-  buttonFlagSize: c = 24,
-  menuFlagSize: p = 28,
-  menuWidth: m = "220px",
-  sx: i,
-  useI18n: f = !0
+}, K = ({
+  languages: e = I,
+  onLanguageChange: t,
+  currentLanguage: o,
+  tooltipText: n,
+  buttonFlagSize: r = 24,
+  menuFlagSize: i = 28,
+  menuWidth: p = "220px",
+  sx: l,
+  useI18n: m = !0
 }) => {
-  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(
+  const { t: s, i18n: d } = m ? L() : { t: null, i18n: null }, u = w(), f = o || (d?.language ?? e[0]?.code ?? "en"), g = e.find((h) => h.code === f) || e[0], S = x.useCallback(
     (h) => {
-      e ? e(h) : l && l.changeLanguage(h);
+      t ? t(h) : d && d.changeLanguage(h);
     },
-    [e, l]
-  ), S = a || (o ? o("header:language.tooltip") : "Change language");
-  return /* @__PURE__ */ n.jsxs(x.Fragment, { children: [
-    /* @__PURE__ */ n.jsx(
-      w,
+    [t, d]
+  ), O = n || (s ? s("header:language.tooltip") : "Change language");
+  return /* @__PURE__ */ c.jsxs(x.Fragment, { children: [
+    /* @__PURE__ */ c.jsx(
+      R,
       {
-        onClick: d.handleOpen,
-        ref: d.anchorRef,
-        sx: { display: { xs: "none", lg: "inline-flex" }, ...i },
+        onClick: u.handleOpen,
+        ref: u.anchorRef,
+        sx: { display: { xs: "none", lg: "inline-flex" }, ...l },
         tooltipOptions: {
-          title: S,
+          title: O,
           placement: "top"
         },
-        children: /* @__PURE__ */ n.jsx(
-          v,
+        children: /* @__PURE__ */ c.jsx(
+          b,
           {
-            alt: g?.label || u,
-            src: g?.icon || "",
-            height: c,
-            width: c
+            countryCode: g?.countryCode || "US",
+            svg: !0,
+            style: { width: r, height: r },
+            title: g?.label || f
           }
         )
       }
     ),
-    /* @__PURE__ */ n.jsx(
-      U,
+    /* @__PURE__ */ c.jsx(
+      H,
       {
-        anchorEl: d.anchorRef.current,
-        onClose: d.handleClose,
-        open: d.open,
-        onLanguageChange: L,
-        languages: t,
-        currentLanguage: u,
-        menuWidth: m,
-        flagSize: p
+        anchorEl: u.anchorRef.current,
+        onClose: u.handleClose,
+        open: u.open,
+        onLanguageChange: S,
+        languages: e,
+        currentLanguage: f,
+        menuWidth: p,
+        flagSize: i
       }
     )
   ] });
 };
-V.displayName = "SLanguageSwitcher";
+K.displayName = "SLanguageSwitcher";
 export {
-  U as SLanguagePopover,
-  V as SLanguageSwitcher,
-  V as default,
-  y as defaultLanguageOptions
+  H as SLanguagePopover,
+  K as SLanguageSwitcher,
+  K as default,
+  I as defaultLanguageOptions
 };

package/dist/theme/components/icon-button.d.ts

@@ -11,6 +11,9 @@ export declare const MuiIconButton: {
             theme: Theme;
         }) => {
             transition: "all 0.2s ease-in-out";
+            flexShrink: number;
+            width: string;
+            color: "inherit";
             variants: ({
                 props: {
                     size: "small";

package/dist/theme/components/icon-button.js

@@ -1,13 +1,13 @@
-import { alpha as l } from "@mui/material";
-import { brand as t, lightBrand as i, purple as n, lightPurple as p, green as a, lightGreen as c, red as y, lightRed as u, blue as g, lightBlue as d, orange as f, lightOrange as m } from "../theme-primitives.js";
+import { alpha as t } from "@mui/material";
+import { brand as l, lightBrand as i, purple as n, lightPurple as p, green as c, lightGreen as a, red as y, lightRed as u, blue as g, lightBlue as d, orange as f, lightOrange as m } from "../theme-primitives.js";
 const r = (o, e, s) => ({
   color: e[500],
   "&:hover": {
-    backgroundColor: l(e[500], 0.12),
+    backgroundColor: t(e[500], 0.12),
     color: e[600]
   },
   "&:active": {
-    backgroundColor: l(e[500], 0.2)
+    backgroundColor: t(e[500], 0.2)
   },
   "&.Mui-disabled": {
     color: e[300],
@@ -16,22 +16,25 @@ const r = (o, e, s) => ({
   ...o.applyStyles("dark", {
     color: s[400],
     "&:hover": {
-      backgroundColor: l(s[400], 0.12),
+      backgroundColor: t(s[400], 0.12),
       color: s[300]
     },
     "&:active": {
-      backgroundColor: l(s[400], 0.2)
+      backgroundColor: t(s[400], 0.2)
     },
     "&.Mui-disabled": {
       color: s[700],
       opacity: 0.5
     }
   })
-}), b = {
+}), S = {
   styleOverrides: {
     root: ({ theme: o }) => ({
       // borderRadius: (theme.vars || theme).shape.borderRadius,
       transition: "all 0.2s ease-in-out",
+      flexShrink: 0,
+      width: "fit-content",
+      color: "inherit",
       variants: [
         {
           props: {
@@ -77,7 +80,7 @@ const r = (o, e, s) => ({
             color: "primary"
           },
           style: {
-            ...r(o, i, t)
+            ...r(o, i, l)
           }
         },
         {
@@ -93,7 +96,7 @@ const r = (o, e, s) => ({
             color: "success"
           },
           style: {
-            ...r(o, c, a)
+            ...r(o, a, c)
           }
         },
         {
@@ -125,5 +128,5 @@ const r = (o, e, s) => ({
   }
 };
 export {
-  b as MuiIconButton
+  S as MuiIconButton
 };

package/dist/theme/theme-primitives.d.ts

@@ -121,6 +121,7 @@ export declare const colorSchemes: {
                 secondary: string;
             };
             action: {
+                active: string;
                 hover: string;
                 selected: string;
             };
@@ -190,6 +191,7 @@ export declare const colorSchemes: {
                 secondary: string;
             };
             action: {
+                active: string;
                 hover: string;
                 selected: string;
             };

package/dist/theme/theme-primitives.js

@@ -256,6 +256,7 @@ const r = {
       secondary: t[400]
     },
     action: {
+      active: t[50],
       hover: e(t[600], 0.2),
       selected: e(t[600], 0.3)
     },
@@ -324,6 +325,7 @@ const r = {
       secondary: a[600]
     },
     action: {
+      active: a[900],
       hover: e(a[300], 0.2),
       selected: e(a[300], 0.3)
     },

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.185",
+  "version": "1.0.186",
   "description": "advanced ui kit for solostylist",
   "type": "module",
   "main": "dist/main.js",
@@ -146,6 +146,7 @@
     "i18next-http-backend": "^3.0.2",
     "overlayscrollbars-react": "^0.5.6",
     "react": "^19.2.3",
+    "react-country-flag": "^3.1.0",
     "react-dom": "^19.2.3",
     "react-dropzone": "^14.3.8",
     "react-i18next": "^16.5.3",
@@ -203,6 +204,7 @@
     "overlayscrollbars-react": "^0.5.6",
     "prettier": "^3.8.1",
     "react": "^19.2.3",
+    "react-country-flag": "^3.1.0",
     "react-dom": "^19.2.3",
     "react-dropzone": "^14.3.8",
     "react-i18next": "^16.5.3",