@sorayasm/vietri-ds 0.2.0 → 0.2.1

package/dist/index.js

@@ -12,11 +12,11 @@ import { default as kr } from "@mui/material/CardActions";
 import k from "@mui/material/CardContent";
 import { default as Er } from "@mui/material/CardContent";
 import { default as Ir } from "@mui/material/CardMedia";
-import _ from "@mui/material/Chip";
+import U from "@mui/material/Chip";
 import { default as Mr } from "@mui/material/Chip";
-import { useState as I, useMemo as oe, useId as D, useRef as E, useEffect as U, Children as ie } from "react";
+import { useState as I, useMemo as oe, useId as D, useRef as E, useEffect as X, Children as ie } from "react";
 import w from "@mui/material/IconButton";
-import { ArrowRight as ne, Check as X, ChevronDown as ae, ChevronLeft as Y, ChevronRight as q, Clock as le, Copy as Q, Database as ce, ExternalLink as $, Globe as de, Info as se, LayoutGrid as pe, MapPin as ue, Menu as he, Music as J, Network as me, Play as H, Search as fe, Share2 as ge, ShieldCheck as be, Sparkles as xe, TrendingUp as ve, Users as Fe, X as L } from "lucide-react";
+import { ArrowRight as ne, Check as Y, ChevronDown as ae, ChevronLeft as q, ChevronRight as Q, Clock as le, Copy as J, Database as ce, ExternalLink as $, Globe as de, Info as se, LayoutGrid as pe, MapPin as ue, Menu as he, Music as K, Network as me, Play as H, Search as fe, Share2 as ge, ShieldCheck as be, Sparkles as xe, TrendingUp as ve, Users as Fe, X as L } from "lucide-react";
 import ye from "@mui/material/Table";
 import Ce from "@mui/material/TableBody";
 import M from "@mui/material/TableCell";
@@ -29,9 +29,9 @@ import De from "@mui/material/DialogContent";
 import Ee from "@mui/material/DialogContentText";
 import Ae from "@mui/material/DialogTitle";
 import Ie from "@mui/material/Dialog";
-import K from "@mui/material/Drawer";
+import Z from "@mui/material/Drawer";
 import C from "@mui/material/Link";
-import Z from "@mui/material/Container";
+import P from "@mui/material/Container";
 import We from "@mui/material/Divider";
 import { useTheme as ee, alpha as O, createTheme as Me } from "@mui/material/styles";
 import Te from "@mui/material/TextField";
@@ -46,7 +46,7 @@ import Pe from "@mui/material/MenuItem";
 import { default as zr } from "@mui/material/Tab";
 import { default as Hr } from "@mui/material/Tabs";
 import je from "@mui/material/ButtonBase";
-function Ve() {
+function Ge() {
   return /* @__PURE__ */ e($e, { children: /* @__PURE__ */ e("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) });
 }
 function V({
@@ -69,16 +69,17 @@ function V({
     }
   );
 }
-function Vt({
+function Gt({
   brand: t,
   brandHref: r = "/",
   links: o,
   actions: c,
   ariaLabel: n = "Main",
   menuLabel: a = "Menu",
-  closeLabel: p = "Close menu"
+  closeLabel: p = "Close menu",
+  maxWidth: m = "lg"
 }) {
-  const m = ee(), l = Le(m.breakpoints.up("md"), { noSsr: !0 }), [i, u] = I(!1), f = () => u(!1);
+  const l = ee(), i = Le(l.breakpoints.up("md"), { noSsr: !0 }), [u, f] = I(!1), x = () => f(!1);
   return /* @__PURE__ */ d(
     ze,
     {
@@ -93,9 +94,10 @@ function Vt({
         borderColor: "divider"
       },
       children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ e(P, { maxWidth: m, children: /* @__PURE__ */ d(
           He,
           {
+            disableGutters: !0,
             sx: {
               justifyContent: "space-between",
               gap: 3,
@@ -112,7 +114,7 @@ function Vt({
                   children: t
                 }
               ),
-              l ? /* @__PURE__ */ d(g, { direction: "row", alignItems: "center", spacing: 4, children: [
+              i ? /* @__PURE__ */ d(g, { direction: "row", alignItems: "center", spacing: 4, children: [
                 /* @__PURE__ */ e(s, { component: "nav", "aria-label": n, children: /* @__PURE__ */ e(
                   g,
                   {
@@ -132,24 +134,24 @@ function Vt({
                     edge: "end",
                     color: "inherit",
                     "aria-label": a,
-                    "aria-expanded": i,
-                    onClick: () => u(!0),
-                    children: /* @__PURE__ */ e(Ve, {})
+                    "aria-expanded": u,
+                    onClick: () => f(!0),
+                    children: /* @__PURE__ */ e(Ge, {})
                   }
                 )
               ] })
             ]
           }
-        ),
-        !l && /* @__PURE__ */ e(K, { anchor: "right", open: i, onClose: f, children: /* @__PURE__ */ d(s, { sx: { width: 280, p: 3 }, children: [
-          /* @__PURE__ */ e(g, { alignItems: "flex-end", sx: { mb: 3 }, children: /* @__PURE__ */ e(z, { variant: "text", color: "secondary", onClick: f, children: p }) }),
+        ) }),
+        !i && /* @__PURE__ */ e(Z, { anchor: "right", open: u, onClose: x, children: /* @__PURE__ */ d(s, { sx: { width: 280, p: 3 }, children: [
+          /* @__PURE__ */ e(g, { alignItems: "flex-end", sx: { mb: 3 }, children: /* @__PURE__ */ e(z, { variant: "text", color: "secondary", onClick: x, children: p }) }),
           /* @__PURE__ */ e(s, { component: "nav", "aria-label": n, children: /* @__PURE__ */ e(
             g,
             {
               component: "ul",
               spacing: 3,
               sx: { listStyle: "none", m: 0, p: 0, fontSize: "1.25rem" },
-              children: o.map((b) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(V, { link: b, onClick: f }) }, b.href))
+              children: o.map((b) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(V, { link: b, onClick: x }) }, b.href))
             }
           ) })
         ] }) })
@@ -157,14 +159,14 @@ function Vt({
     }
   );
 }
-const Ge = [
+const Ve = [
   { value: "en", label: "EN" },
   { value: "es", label: "ES" }
 ];
-function Gt({
+function Vt({
   value: t,
   onChange: r,
-  options: o = Ge,
+  options: o = Ve,
   ariaLabel: c = "Language"
 }) {
   return /* @__PURE__ */ e(
@@ -191,7 +193,7 @@ function Nt({ value: t, label: r, description: o }) {
 function te(t, r) {
   return t[r.key];
 }
-function G(t, r) {
+function N(t, r) {
   if (r.sortValue) return r.sortValue(t);
   const o = te(t, r);
   return typeof o == "number" ? o : String(o ?? "");
@@ -214,7 +216,7 @@ function _t({
     if (!i) return r;
     const u = a.direction === "asc" ? 1 : -1;
     return [...r].sort(
-      (f, b) => u * Ne(G(f, i), G(b, i))
+      (f, x) => u * Ne(N(f, i), N(x, i))
     );
   }, [r, t, a]), l = (i) => {
     p(
@@ -342,12 +344,12 @@ function y({ icon: t, label: r, size: o = 18, ...c }) {
 const Xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   ArrowRight: ne,
-  Check: X,
+  Check: Y,
   ChevronDown: ae,
-  ChevronLeft: Y,
-  ChevronRight: q,
+  ChevronLeft: q,
+  ChevronRight: Q,
   Clock: le,
-  Copy: Q,
+  Copy: J,
   Database: ce,
   ExternalLink: $,
   Globe: de,
@@ -355,7 +357,7 @@ const Xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   LayoutGrid: pe,
   MapPin: ue,
   Menu: he,
-  Music: J,
+  Music: K,
   Network: me,
   Play: H,
   Search: fe,
@@ -368,7 +370,7 @@ const Xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 }, Symbol.toStringTag, { value: "Module" }));
 function _e({ color: t, dot: r = !1, ...o }) {
   return /* @__PURE__ */ e(
-    _,
+    U,
     {
       size: "small",
       ...o,
@@ -389,7 +391,7 @@ function _e({ color: t, dot: r = !1, ...o }) {
     }
   );
 }
-function P(t) {
+function j(t) {
   return /* @__PURE__ */ e(
     s,
     {
@@ -474,7 +476,7 @@ function Yt({
             }
           )
         ] }),
-        /* @__PURE__ */ d(Z, { maxWidth: "lg", sx: { position: "relative", zIndex: 1 }, children: [
+        /* @__PURE__ */ d(P, { maxWidth: "lg", sx: { position: "relative", zIndex: 1 }, children: [
           /* @__PURE__ */ d(
             g,
             {
@@ -529,7 +531,7 @@ function Yt({
                             i.label,
                             i.external && /* @__PURE__ */ d(W, { children: [
                               /* @__PURE__ */ e(y, { icon: $, size: 14 }),
-                              /* @__PURE__ */ e(P, { children: m })
+                              /* @__PURE__ */ e(j, { children: m })
                             ] })
                           ]
                         }
@@ -683,7 +685,7 @@ function Kt({
   closeLabel: l = "Close"
 }) {
   const i = D();
-  return /* @__PURE__ */ e(K, { anchor: p, open: t, onClose: r, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ e(Z, { anchor: p, open: t, onClose: r, children: /* @__PURE__ */ d(
     s,
     {
       role: "dialog",
@@ -728,7 +730,7 @@ function Zt({
   copiedDuration: a = 2e3
 }) {
   const [p, m] = I("idle"), l = E(void 0);
-  U(() => () => clearTimeout(l.current), []);
+  X(() => () => clearTimeout(l.current), []);
   async function i() {
     try {
       await navigator.clipboard.writeText(r), m("copied");
@@ -763,12 +765,12 @@ function Zt({
       z,
       {
         onClick: i,
-        startIcon: /* @__PURE__ */ e(y, { icon: p === "copied" ? X : Q }),
+        startIcon: /* @__PURE__ */ e(y, { icon: p === "copied" ? Y : J }),
         fullWidth: !0,
         children: p === "copied" ? c : o
       }
     ),
-    /* @__PURE__ */ e(P, { role: "status", "aria-live": "polite", children: p === "copied" ? c : p === "error" ? n : "" })
+    /* @__PURE__ */ e(j, { role: "status", "aria-live": "polite", children: p === "copied" ? c : p === "error" ? n : "" })
   ] });
 }
 function er({ href: t, children: r = "Skip to content" }) {
@@ -824,7 +826,7 @@ function tr({
           borderColor: "currentColor"
         }
       }),
-      children: /* @__PURE__ */ e(Z, { maxWidth: "lg", children: /* @__PURE__ */ d(
+      children: /* @__PURE__ */ e(P, { maxWidth: "lg", children: /* @__PURE__ */ d(
         g,
         {
           spacing: 2,
@@ -1001,7 +1003,7 @@ function ir({ entries: t, level: r = 3, ariaLabel: o }) {
     }
   );
 }
-const N = {
+const _ = {
   position: "static",
   color: "inherit",
   font: "inherit",
@@ -1039,7 +1041,7 @@ function nr({
         "& a:focus-visible, & button:focus-visible": { outline: "none" }
       }),
       children: /* @__PURE__ */ d(k, { children: [
-        /* @__PURE__ */ e(h, { component: l, variant: "h6", children: n ? /* @__PURE__ */ e(C, { href: n, underline: "none", sx: N, children: t }) : a ? /* @__PURE__ */ e(C, { component: "button", type: "button", onClick: a, underline: "none", sx: N, children: t }) : t }),
+        /* @__PURE__ */ e(h, { component: l, variant: "h6", children: n ? /* @__PURE__ */ e(C, { href: n, underline: "none", sx: _, children: t }) : a ? /* @__PURE__ */ e(C, { component: "button", type: "button", onClick: a, underline: "none", sx: _, children: t }) : t }),
         r && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: r }),
         o && /* @__PURE__ */ e(
           h,
@@ -1056,7 +1058,7 @@ function nr({
           }
         ),
         c.length > 0 && /* @__PURE__ */ e(g, { direction: "row", spacing: 1, useFlexGap: !0, flexWrap: "wrap", sx: { mt: 2 }, children: c.map(
-          (f) => f.color ? /* @__PURE__ */ e(_e, { label: f.label, color: f.color }, f.label) : /* @__PURE__ */ e(_, { label: f.label, size: "small" }, f.label)
+          (f) => f.color ? /* @__PURE__ */ e(_e, { label: f.label, color: f.color }, f.label) : /* @__PURE__ */ e(U, { label: f.label, size: "small" }, f.label)
         ) })
       ] })
     }
@@ -1096,21 +1098,21 @@ function ar({
   return /* @__PURE__ */ d(
     B,
     {
-      sx: (x) => ({
+      sx: (b) => ({
         position: "relative",
         height: "100%",
         overflow: "hidden",
-        ...f && { "&:hover": { borderColor: x.palette.primary.main } },
-        ...Ue(x)
+        ...f && { "&:hover": { borderColor: b.palette.primary.main } },
+        ...Ue(b)
       }),
       children: [
         /* @__PURE__ */ d(
           s,
           {
-            sx: (x) => ({
+            sx: (b) => ({
               position: "relative",
               aspectRatio: "16 / 9",
-              bgcolor: x.vietri.color.chip
+              bgcolor: b.vietri.color.chip
             }),
             children: [
               c && /* @__PURE__ */ e(
@@ -1146,7 +1148,7 @@ function ar({
               a && /* @__PURE__ */ e(
                 s,
                 {
-                  sx: (x) => ({
+                  sx: (b) => ({
                     position: "absolute",
                     top: 8,
                     left: 8,
@@ -1155,8 +1157,8 @@ function ar({
                     borderRadius: 1,
                     fontSize: "0.75rem",
                     fontWeight: 600,
-                    bgcolor: x.vietri.color.action[0],
-                    color: x.vietri.color.onAction
+                    bgcolor: b.vietri.color.action[0],
+                    color: b.vietri.color.onAction
                   }),
                   children: a
                 }
@@ -1201,12 +1203,12 @@ function lr({
   action: p
 }) {
   const m = `h${o}`, l = D(), i = E(null), u = ie.toArray(r);
-  function f(b) {
-    const x = i.current;
-    if (!x) return;
+  function f(x) {
+    const b = i.current;
+    if (!b) return;
     const re = typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    x.scrollBy?.({
-      left: b * x.clientWidth * 0.8,
+    b.scrollBy?.({
+      left: x * b.clientWidth * 0.8,
       behavior: re ? "auto" : "smooth"
     });
   }
@@ -1222,8 +1224,8 @@ function lr({
           /* @__PURE__ */ e(h, { id: l, component: m, variant: "h5", children: t }),
           /* @__PURE__ */ d(g, { direction: "row", spacing: 1, alignItems: "center", children: [
             p,
-            /* @__PURE__ */ e(w, { "aria-label": n, onClick: () => f(-1), children: /* @__PURE__ */ e(y, { icon: Y }) }),
-            /* @__PURE__ */ e(w, { "aria-label": a, onClick: () => f(1), children: /* @__PURE__ */ e(y, { icon: q }) })
+            /* @__PURE__ */ e(w, { "aria-label": n, onClick: () => f(-1), children: /* @__PURE__ */ e(y, { icon: q }) }),
+            /* @__PURE__ */ e(w, { "aria-label": a, onClick: () => f(1), children: /* @__PURE__ */ e(y, { icon: Q }) })
           ] })
         ]
       }
@@ -1233,12 +1235,12 @@ function lr({
       {
         ref: i,
         tabIndex: 0,
-        sx: (b) => ({
+        sx: (x) => ({
           overflowX: "auto",
           pb: 1,
           scrollSnapType: "x proximity",
           "&:focus-visible": {
-            outline: `2px solid ${b.palette.primary.main}`,
+            outline: `2px solid ${x.palette.primary.main}`,
             outlineOffset: 2
           }
         }),
@@ -1248,14 +1250,14 @@ function lr({
             component: "ul",
             role: "list",
             sx: { listStyle: "none", m: 0, p: 0, display: "flex", gap: 2 },
-            children: u.map((b, x) => /* @__PURE__ */ e(
+            children: u.map((x, b) => /* @__PURE__ */ e(
               s,
               {
                 component: "li",
                 sx: { flex: `0 0 ${c}px`, scrollSnapAlign: "start" },
-                children: b
+                children: x
               },
-              x
+              b
             ))
           }
         )
@@ -1276,7 +1278,7 @@ function cr({
   playLabel: a
 }) {
   const [p, m] = I(!n), l = E(!1), i = E(null);
-  return U(() => {
+  return X(() => {
     p && l.current && i.current?.focus();
   }, [p]), /* @__PURE__ */ e(
     s,
@@ -1402,7 +1404,7 @@ function dr({
           s,
           {
             component: "li",
-            sx: (b) => ({
+            sx: (x) => ({
               position: "relative",
               display: "flex",
               gap: 2,
@@ -1410,9 +1412,9 @@ function dr({
               borderBottom: 1,
               borderColor: "divider",
               borderLeft: 4,
-              borderLeftColor: i ? b.palette.primary.main : "transparent",
-              ...u && { "&:hover": { bgcolor: b.palette.action.hover } },
-              ...Ye(b)
+              borderLeftColor: i ? x.palette.primary.main : "transparent",
+              ...u && { "&:hover": { bgcolor: x.palette.action.hover } },
+              ...Ye(x)
             }),
             children: [
               l.imageUrl && /* @__PURE__ */ e(
@@ -1491,7 +1493,7 @@ function sr({
             loading: "lazy",
             sx: { display: "block", width: "100%", height: "100%", objectFit: "cover" }
           }
-        ) : /* @__PURE__ */ e(y, { icon: J, size: 48 })
+        ) : /* @__PURE__ */ e(y, { icon: K, size: 48 })
       }
     ),
     /* @__PURE__ */ d(k, { children: [
@@ -1519,7 +1521,7 @@ function sr({
               endIcon: /* @__PURE__ */ e(y, { icon: $, size: 14 }),
               children: [
                 l.name,
-                /* @__PURE__ */ d(P, { children: [
+                /* @__PURE__ */ d(j, { children: [
                   " ",
                   "– ",
                   t,
@@ -1762,7 +1764,7 @@ const Ze = {
   },
   components: Qe
 };
-function j(t) {
+function G(t) {
   return Me({
     ...Ze,
     vietri: Ke(t),
@@ -1911,7 +1913,7 @@ const S = (t) => [t, t], et = {
     /** Teal for the hovered primary action (7.7:1 with white). */
     tealDark: "#015C68"
   }
-}, pr = j(tt), ur = j(rt), hr = j(ot), it = [
+}, pr = G(tt), ur = G(rt), hr = G(ot), it = [
   { bg: "#E0F2FE", fg: "#0C4A6E", dot: "#0284C7" },
   // sky
   { bg: "#EDE9FE", fg: "#4C1D95", dot: "#7C3AED" },
@@ -1976,9 +1978,9 @@ export {
   tr as Hero,
   y as Icon,
   Or as Input,
-  Gt as LanguageSwitch,
+  Vt as LanguageSwitch,
   ar as MediaCard,
-  Vt as NavBar,
+  Gt as NavBar,
   sr as PlaylistCard,
   nr as ProfileCard,
   qt as SectionHeader,
@@ -1991,11 +1993,11 @@ export {
   ir as Timeline,
   xr as Typography,
   cr as VideoEmbed,
-  P as VisuallyHidden,
+  j as VisuallyHidden,
   it as categoryPalette,
   mr as createCategoryColors,
   qe as createGradients,
-  j as createVietriTheme,
+  G as createVietriTheme,
   tt as editorialColors,
   pr as editorialTheme,
   Xt as icons,