@soyfri/shared-library 1.3.7 → 1.3.9

package/components/Gallery/Gallery.js

@@ -0,0 +1,415 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { Box, IconButton, Dialog, DialogContent, Stack, Typography, DialogActions, useMediaQuery } from "@mui/material";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import RotateLeftIcon from "@mui/icons-material/RotateLeft";
+import RotateRightIcon from "@mui/icons-material/RotateRight";
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import CloseIcon from "@mui/icons-material/Close";
+import { B as Button } from "../../Button-UkkP-bNw.js";
+const GalleryThumbnails = ({
+  items,
+  selectedIdx,
+  onSelect,
+  thumbStartIdx,
+  THUMB_VISIBLE_COUNT,
+  handleThumbUp,
+  handleThumbDown,
+  isMobile
+}) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: {
+      display: "flex",
+      flexDirection: isMobile ? "row" : "column",
+      alignItems: "center",
+      minWidth: 70,
+      width: 70,
+      borderRadius: 1,
+      bgcolor: "#f8f9fa",
+      boxSizing: "border-box",
+      py: 1,
+      mb: isMobile ? 2 : 0,
+      px: isMobile ? 1 : 0
+    },
+    children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: handleThumbUp,
+          disabled: thumbStartIdx === 0,
+          sx: { mb: isMobile ? 0 : 1, mr: isMobile ? 1 : 0 },
+          children: isMobile ? /* @__PURE__ */ jsx(KeyboardArrowLeftIcon, {}) : /* @__PURE__ */ jsx(KeyboardArrowUpIcon, {})
+        }
+      ),
+      items.slice(thumbStartIdx, thumbStartIdx + THUMB_VISIBLE_COUNT).map((item, idx) => {
+        const realIdx = thumbStartIdx + idx;
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            onClick: () => onSelect(realIdx),
+            sx: {
+              cursor: "pointer",
+              width: 60,
+              height: 60,
+              borderRadius: 1,
+              border: selectedIdx === realIdx ? "2px solid #1976d2" : "2px solid #eee",
+              overflow: "hidden",
+              bgcolor: "#eee",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              m: isMobile ? "0 4px" : "4px 0"
+            },
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "img",
+                src: item.thumbnail,
+                alt: item.title,
+                sx: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover"
+                }
+              }
+            )
+          },
+          realIdx
+        );
+      }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: handleThumbDown,
+          disabled: thumbStartIdx + THUMB_VISIBLE_COUNT >= items.length,
+          sx: { mt: isMobile ? 0 : 1, ml: isMobile ? 1 : 0 },
+          children: isMobile ? /* @__PURE__ */ jsx(KeyboardArrowRightIcon, {}) : /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {})
+        }
+      )
+    ]
+  }
+);
+const GalleryMain = ({ item, onOpenLightbox, isMobile }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: {
+      width: isMobile ? "80%" : "100%",
+      maxHeight: 431,
+      maxWidth: isMobile ? "80%" : "100%",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "relative",
+      borderRadius: 1,
+      bgcolor: "#f8f9fa",
+      overflow: "hidden",
+      mx: "auto"
+    },
+    children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            width: "100%",
+            height: "100%",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          onClick: onOpenLightbox,
+          children: item.type === "video" ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "video",
+              controls: true,
+              src: item.url,
+              sx: {
+                width: "100%",
+                height: "100%",
+                objectFit: "contain",
+                bgcolor: "#000",
+                borderRadius: 1
+              }
+            }
+          ) : /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "img",
+              src: item.url,
+              alt: item.title,
+              sx: {
+                width: "100%",
+                height: "100%",
+                objectFit: "contain",
+                borderRadius: 1
+              }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          onClick: onOpenLightbox,
+          sx: {
+            position: "absolute",
+            top: 16,
+            right: 16,
+            bgcolor: "#1976d2",
+            "&:hover": { bgcolor: "#1565c0" },
+            boxShadow: 2
+          },
+          children: /* @__PURE__ */ jsx(FullscreenIcon, { sx: { color: "#fff" } })
+        }
+      )
+    ]
+  }
+);
+const GalleryLightbox = ({
+  open,
+  onClose,
+  item,
+  handlePrev,
+  handleNext,
+  zoom,
+  setZoom,
+  rotation,
+  setRotation,
+  videoRef
+}) => /* @__PURE__ */ jsxs(Dialog, { open, onClose, fullWidth: true, maxWidth: "lg", children: [
+  /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      sx: {
+        minHeight: 431,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 2
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "100%", children: [
+          /* @__PURE__ */ jsx(IconButton, { onClick: handlePrev, children: /* @__PURE__ */ jsx(ArrowBackIosNewIcon, {}) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", fontWeight: 600, sx: { flex: 1, textAlign: "center" }, children: item.title }),
+          /* @__PURE__ */ jsx(IconButton, { onClick: handleNext, children: /* @__PURE__ */ jsx(ArrowForwardIosIcon, {}) })
+        ] }),
+        item.type === "video" ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "video",
+            ref: videoRef,
+            src: item.url,
+            controls: true,
+            autoPlay: true,
+            sx: {
+              width: "100%",
+              maxWidth: "900px",
+              maxHeight: "70vh",
+              objectFit: "contain",
+              bgcolor: "#000",
+              borderRadius: 1
+            }
+          },
+          item.url
+        ) : /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "img",
+            src: item.url,
+            alt: item.title,
+            sx: {
+              transform: `scale(${zoom}) rotate(${rotation}deg)`,
+              transition: "transform 0.2s ease",
+              width: "100%",
+              maxWidth: "900px",
+              maxHeight: "70vh",
+              objectFit: "contain",
+              borderRadius: 1
+            }
+          }
+        )
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsxs(
+    DialogActions,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        flexWrap: "wrap",
+        gap: 1
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              startIcon: /* @__PURE__ */ jsx(ZoomInIcon, {}),
+              onClick: () => setZoom((z) => z + 0.25),
+              children: "Zoom +"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              startIcon: /* @__PURE__ */ jsx(ZoomOutIcon, {}),
+              onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)),
+              children: "Zoom −"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              onClick: () => setRotation((r) => r - 90),
+              children: /* @__PURE__ */ jsx(RotateLeftIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              onClick: () => setRotation((r) => r + 90),
+              children: /* @__PURE__ */ jsx(RotateRightIcon, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            startIcon: /* @__PURE__ */ jsx(RestartAltIcon, {}),
+            onClick: () => {
+              setZoom(1);
+              setRotation(0);
+            },
+            children: "Reset"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            startIcon: /* @__PURE__ */ jsx(CloseIcon, {}),
+            onClick: onClose,
+            children: "Cerrar"
+          }
+        )
+      ]
+    }
+  )
+] });
+const Gallery = ({ items, maxWidth = "600px" }) => {
+  const isMobile = useMediaQuery("(max-width:700px)");
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [openLightbox, setOpenLightbox] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  const [rotation, setRotation] = useState(0);
+  const videoRef = useRef(null);
+  const [thumbStartIdx, setThumbStartIdx] = useState(0);
+  const THUMB_VISIBLE_COUNT = isMobile ? 3 : 5;
+  const handleThumbUp = () => {
+    setThumbStartIdx((prev) => Math.max(0, prev - 1));
+  };
+  const handleThumbDown = () => {
+    setThumbStartIdx(
+      (prev) => Math.min(items.length - THUMB_VISIBLE_COUNT, prev + 1)
+    );
+  };
+  const handlePrev = () => {
+    setSelectedIdx((idx) => idx === 0 ? items.length - 1 : idx - 1);
+  };
+  const handleNext = () => {
+    setSelectedIdx(
+      (idx) => idx === items.length - 1 ? 0 : idx + 1
+    );
+  };
+  useEffect(() => {
+    if (!openLightbox) return;
+    const handleKey = (e) => {
+      switch (e.key) {
+        case "ArrowLeft":
+          handlePrev();
+          break;
+        case "ArrowRight":
+          handleNext();
+          break;
+        case "Escape":
+          setOpenLightbox(false);
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [openLightbox, items.length]);
+  useEffect(() => {
+    var _a;
+    if (openLightbox && ((_a = items[selectedIdx]) == null ? void 0 : _a.type) === "video" && videoRef.current) {
+      videoRef.current.currentTime = 0;
+      videoRef.current.play();
+    }
+    setZoom(1);
+    setRotation(0);
+  }, [openLightbox, selectedIdx, items]);
+  return /* @__PURE__ */ jsxs(Stack, { direction: isMobile ? "column" : "row", gap: 3, sx: { maxWidth, mx: "auto", minHeight: 300 }, children: [
+    /* @__PURE__ */ jsx(
+      GalleryThumbnails,
+      {
+        items,
+        selectedIdx,
+        onSelect: setSelectedIdx,
+        thumbStartIdx,
+        THUMB_VISIBLE_COUNT,
+        handleThumbUp,
+        handleThumbDown,
+        isMobile
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      GalleryMain,
+      {
+        item: items[selectedIdx],
+        onOpenLightbox: () => setOpenLightbox(true),
+        isMobile
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      GalleryLightbox,
+      {
+        open: openLightbox,
+        onClose: () => setOpenLightbox(false),
+        item: items[selectedIdx],
+        handlePrev,
+        handleNext,
+        zoom,
+        setZoom,
+        rotation,
+        setRotation,
+        videoRef
+      }
+    )
+  ] });
+};
+export {
+  Gallery
+};
+//# sourceMappingURL=Gallery.js.map

package/components/Gallery/Gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gallery.js","sources":["../../../src/components/Gallery/GalleryThumbnails.tsx","../../../src/components/Gallery/GalleryMain.tsx","../../../src/components/Gallery/GalleryLightbox.tsx","../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box, IconButton } from \"@mui/material\";\nimport KeyboardArrowUpIcon from \"@mui/icons-material/KeyboardArrowUp\";\nimport KeyboardArrowDownIcon from \"@mui/icons-material/KeyboardArrowDown\";\nimport KeyboardArrowLeftIcon from \"@mui/icons-material/KeyboardArrowLeft\";\nimport KeyboardArrowRightIcon from \"@mui/icons-material/KeyboardArrowRight\";\n\n\ninterface Props {\n  items: Array<{\n    url: string;\n    type: string;\n    title: string;\n    thumbnail: string;\n  }>;\n  selectedIdx: number;\n  onSelect: (idx: number) => void;\n  thumbStartIdx: number;\n  THUMB_VISIBLE_COUNT: number;\n  handleThumbUp: () => void;\n  handleThumbDown: () => void;\n  isMobile: boolean;\n}\n\nexport const GalleryThumbnails = ({\n  items,\n  selectedIdx,\n  onSelect,\n  thumbStartIdx,\n  THUMB_VISIBLE_COUNT,\n  handleThumbUp,\n  handleThumbDown,\n  isMobile,\n}: Props) => (\n  <Box\n    sx={{\n      display: \"flex\",\n      flexDirection: isMobile ? \"row\" : \"column\",\n      alignItems: \"center\",\n      minWidth: 70,\n      width: 70,\n      borderRadius: 1,\n      bgcolor: \"#f8f9fa\",\n      boxSizing: \"border-box\",\n      py: 1,\n      mb: isMobile ? 2 : 0,\n      px: isMobile ? 1 : 0,\n    }}\n  >\n    <IconButton\n      size=\"small\"\n      onClick={handleThumbUp}\n      disabled={thumbStartIdx === 0}\n      sx={{ mb: isMobile ? 0 : 1, mr: isMobile ? 1 : 0 }}\n    >\n      {isMobile ? <KeyboardArrowLeftIcon /> : <KeyboardArrowUpIcon />}\n    </IconButton>\n    {items\n      .slice(thumbStartIdx, thumbStartIdx + THUMB_VISIBLE_COUNT)\n      .map((item, idx) => {\n        const realIdx = thumbStartIdx + idx;\n        return (\n          <Box\n            key={realIdx}\n            onClick={() => onSelect(realIdx)}\n            sx={{\n              cursor: \"pointer\",\n              width: 60,\n              height: 60,\n              borderRadius: 1,\n              border:\n                selectedIdx === realIdx\n                  ? \"2px solid #1976d2\"\n                  : \"2px solid #eee\",\n              overflow: \"hidden\",\n              bgcolor: \"#eee\",\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              flexShrink: 0,\n              m: isMobile ? \"0 4px\" : \"4px 0\",\n            }}\n          >\n            <Box\n              component=\"img\"\n              src={item.thumbnail}\n              alt={item.title}\n              sx={{\n                width: \"100%\",\n                height: \"100%\",\n                objectFit: \"cover\",\n              }}\n            />\n          </Box>\n        );\n      })}\n    <IconButton\n      size=\"small\"\n      onClick={handleThumbDown}\n      disabled={thumbStartIdx + THUMB_VISIBLE_COUNT >= items.length}\n      sx={{ mt: isMobile ? 0 : 1, ml: isMobile ? 1 : 0 }}\n    >\n      {isMobile ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}\n    </IconButton>\n  </Box>\n);","import React from \"react\";\nimport { Box, IconButton } from \"@mui/material\";\nimport FullscreenIcon from \"@mui/icons-material/Fullscreen\";\n\ninterface Props {\n  item: {\n  url: string;\n  type: \"image\" | \"video\" | string;\n  title: string;\n  thumbnail: string;\n};\n  onOpenLightbox: () => void;\n  isMobile: boolean;\n}\n\nexport const GalleryMain = ({ item, onOpenLightbox, isMobile }: Props) => (\n  <Box\n    sx={{\n      width: isMobile ? \"80%\" : '100%',\n      maxHeight: 431,\n      maxWidth: isMobile ? \"80%\" : '100%',\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      position: \"relative\",\n      borderRadius: 1,\n      bgcolor: \"#f8f9fa\",\n      overflow: \"hidden\",\n      mx: \"auto\",\n    }}\n  >\n    <Box\n      sx={{\n        width: \"100%\",\n        height: \"100%\",\n        cursor: \"pointer\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n      onClick={onOpenLightbox}\n    >\n      {item.type === \"video\" ? (\n        <Box\n          component=\"video\"\n          controls\n          src={item.url}\n          sx={{\n            width: \"100%\",\n            height: \"100%\",\n            objectFit: \"contain\",\n            bgcolor: \"#000\",\n            borderRadius: 1,\n          }}\n        />\n      ) : (\n        <Box\n          component=\"img\"\n          src={item.url}\n          alt={item.title}\n          sx={{\n            width: \"100%\",\n            height: \"100%\",\n            objectFit: \"contain\",\n            borderRadius: 1,\n          }}\n        />\n      )}\n    </Box>\n    <IconButton\n      onClick={onOpenLightbox}\n      sx={{\n        position: \"absolute\",\n        top: 16,\n        right: 16,\n        bgcolor: \"#1976d2\",\n        \"&:hover\": { bgcolor: \"#1565c0\" },\n        boxShadow: 2,\n      }}\n    >\n      <FullscreenIcon sx={{ color: \"#fff\" }} />\n    </IconButton>\n  </Box>\n);","import React from \"react\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogActions,\n  Stack,\n  IconButton,\n  Box,\n  Typography,\n} from \"@mui/material\";\nimport ArrowBackIosNewIcon from \"@mui/icons-material/ArrowBackIosNew\";\nimport ArrowForwardIosIcon from \"@mui/icons-material/ArrowForwardIos\";\nimport ZoomInIcon from \"@mui/icons-material/ZoomIn\";\nimport ZoomOutIcon from \"@mui/icons-material/ZoomOut\";\nimport RotateLeftIcon from \"@mui/icons-material/RotateLeft\";\nimport RotateRightIcon from \"@mui/icons-material/RotateRight\";\nimport RestartAltIcon from \"@mui/icons-material/RestartAlt\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport { Button } from \"../Button\";\n\n\ninterface Props {\n  open: boolean;\n  onClose: () => void;\n  item: {\n  url: string;\n  type: \"image\" | \"video\" | string;\n  title: string;\n  thumbnail: string;\n};\n  handlePrev: () => void;\n  handleNext: () => void;\n  zoom: number;\n  setZoom: React.Dispatch<React.SetStateAction<number>>;\n  rotation: number;\n  setRotation: React.Dispatch<React.SetStateAction<number>>;\n  videoRef?: React.RefObject<HTMLVideoElement | null>;\n}\n\nexport const GalleryLightbox = ({\n  open,\n  onClose,\n  item,\n  handlePrev,\n  handleNext,\n  zoom,\n  setZoom,\n  rotation,\n  setRotation,\n  videoRef,\n}: Props) => (\n  <Dialog open={open} onClose={onClose} fullWidth maxWidth=\"lg\">\n    <DialogContent\n      sx={{\n        minHeight: 431,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        gap: 2,\n      }}\n    >\n      <Stack direction=\"row\" justifyContent=\"space-between\" alignItems=\"center\" width=\"100%\">\n        <IconButton onClick={handlePrev}>\n          <ArrowBackIosNewIcon />\n        </IconButton>\n        <Typography variant=\"subtitle1\" fontWeight={600} sx={{ flex: 1, textAlign: \"center\" }}>\n          {item.title}\n        </Typography>\n        <IconButton onClick={handleNext}>\n          <ArrowForwardIosIcon />\n        </IconButton>\n      </Stack>\n      {item.type === \"video\" ? (\n        <Box\n          component=\"video\"\n          key={item.url}\n          ref={videoRef}\n          src={item.url}\n          controls\n          autoPlay\n          sx={{\n            width: \"100%\",\n            maxWidth: \"900px\",\n            maxHeight: \"70vh\",\n            objectFit: \"contain\",\n            bgcolor: \"#000\",\n            borderRadius: 1,\n          }}\n        />\n      ) : (\n        <Box\n          component=\"img\"\n          src={item.url}\n          alt={item.title}\n          sx={{\n            transform: `scale(${zoom}) rotate(${rotation}deg)`,\n            transition: \"transform 0.2s ease\",\n            width: \"100%\",\n            maxWidth: \"900px\",\n            maxHeight: \"70vh\",\n            objectFit: \"contain\",\n            borderRadius: 1,\n          }}\n        />\n      )}\n    </DialogContent>\n    <DialogActions\n      sx={{\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        flexWrap: \"wrap\",\n        gap: 1,\n      }}\n    >\n      <Stack direction=\"row\" spacing={1}>\n        <Button\n          variant=\"outlined\"\n          startIcon={<ZoomInIcon />}\n          onClick={() => setZoom((z) => z + 0.25)}\n        >\n          Zoom +\n        </Button>\n        <Button\n          variant=\"outlined\"\n          startIcon={<ZoomOutIcon />}\n          onClick={() => setZoom((z) => Math.max(0.25, z - 0.25))}\n        >\n          Zoom −\n        </Button>\n      </Stack>\n      <Stack direction=\"row\" spacing={1}>\n        <Button\n          variant=\"outlined\"\n          onClick={() => setRotation((r) => r - 90)}\n        >\n            <RotateLeftIcon />\n            </Button>\n        <Button\n          variant=\"outlined\"\n          onClick={() => setRotation((r) => r + 90)}\n        >\n          <RotateRightIcon />\n        </Button>\n      </Stack>\n      <Button\n        variant=\"outlined\"\n        startIcon={<RestartAltIcon />}\n        onClick={() => {\n          setZoom(1);\n          setRotation(0);\n        }}\n      >\n        Reset\n      </Button>\n      <Button\n        variant=\"contained\"\n        startIcon={<CloseIcon />}\n        onClick={onClose}\n      >\n        Cerrar\n      </Button>\n    </DialogActions>\n  </Dialog>\n);","import React, { useState, useRef, useEffect } from \"react\";\nimport { Stack, useMediaQuery } from \"@mui/material\";\nimport { GalleryThumbnails } from \"./GalleryThumbnails\";\nimport { GalleryMain } from \"./GalleryMain\";\nimport { GalleryLightbox } from \"./GalleryLightbox\";\n\nexport interface Props {\n  items: Array<{\n  url: string;\n  type: \"image\" | \"video\" | string;\n  title: string;\n  thumbnail: string;\n}>;\n  maxWidth?: string;\n}\n\n\nexport const Gallery:React.FC<Props> = ({ items, maxWidth='600px' }: Props) => {\n  const isMobile = useMediaQuery(\"(max-width:700px)\");\n  const [selectedIdx, setSelectedIdx] = useState(0);\n  const [openLightbox, setOpenLightbox] = useState(false);\n  const [zoom, setZoom] = useState(1);\n  const [rotation, setRotation] = useState(0);\n  const videoRef = useRef<HTMLVideoElement | null>(null);\n\n  const [thumbStartIdx, setThumbStartIdx] = useState(0);\n  const THUMB_VISIBLE_COUNT = isMobile ? 3 : 5;\n\n  // Flechas para miniaturas\n  const handleThumbUp = () => {\n    setThumbStartIdx((prev) => Math.max(0, prev - 1));\n  };\n  const handleThumbDown = () => {\n    setThumbStartIdx((prev) =>\n      Math.min(items.length - THUMB_VISIBLE_COUNT, prev + 1)\n    );\n  };\n\n  // Navegación entre imágenes\n  const handlePrev = () => {\n    setSelectedIdx((idx) => (idx === 0 ? items.length - 1 : idx - 1));\n  };\n  const handleNext = () => {\n    setSelectedIdx((idx) =>\n      idx === items.length - 1 ? 0 : idx + 1\n    );\n  };\n\n  // Acciones de teclado\n  useEffect(() => {\n    if (!openLightbox) return;\n    const handleKey = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case \"ArrowLeft\":\n          handlePrev();\n          break;\n        case \"ArrowRight\":\n          handleNext();\n          break;\n        case \"Escape\":\n          setOpenLightbox(false);\n          break;\n        default:\n          break;\n      }\n    };\n    window.addEventListener(\"keydown\", handleKey);\n    return () => window.removeEventListener(\"keydown\", handleKey);\n  }, [openLightbox, items.length]);\n\n  // Reset zoom/rotación y autoplay video\n  useEffect(() => {\n    if (\n      openLightbox &&\n      items[selectedIdx]?.type === \"video\" &&\n      videoRef.current\n    ) {\n      videoRef.current.currentTime = 0;\n      videoRef.current.play();\n    }\n    setZoom(1);\n    setRotation(0);\n  }, [openLightbox, selectedIdx, items]);\n\n  return (\n    <Stack direction={isMobile ? \"column\" : \"row\"} gap={3} sx={{ maxWidth: maxWidth, mx: \"auto\", minHeight: 300 }}>\n      <GalleryThumbnails\n        items={items}\n        selectedIdx={selectedIdx}\n        onSelect={setSelectedIdx}\n        thumbStartIdx={thumbStartIdx}\n        THUMB_VISIBLE_COUNT={THUMB_VISIBLE_COUNT}\n        handleThumbUp={handleThumbUp}\n        handleThumbDown={handleThumbDown}\n        isMobile={isMobile}\n      />\n      <GalleryMain\n        item={items[selectedIdx]}\n        onOpenLightbox={() => setOpenLightbox(true)}\n        isMobile={isMobile}\n      />\n      <GalleryLightbox\n        open={openLightbox}\n        onClose={() => setOpenLightbox(false)}\n        item={items[selectedIdx]}\n        handlePrev={handlePrev}\n        handleNext={handleNext}\n        zoom={zoom}\n        setZoom={setZoom}\n        rotation={rotation}\n        setRotation={setRotation}\n        videoRef={videoRef}\n      />\n    </Stack>\n  );\n};\n\nexport default Gallery;"],"names":[],"mappings":"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"}

package/components/Gallery/GalleryLightbox.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+interface Props {
+    open: boolean;
+    onClose: () => void;
+    item: {
+        url: string;
+        type: "image" | "video" | string;
+        title: string;
+        thumbnail: string;
+    };
+    handlePrev: () => void;
+    handleNext: () => void;
+    zoom: number;
+    setZoom: React.Dispatch<React.SetStateAction<number>>;
+    rotation: number;
+    setRotation: React.Dispatch<React.SetStateAction<number>>;
+    videoRef?: React.RefObject<HTMLVideoElement | null>;
+}
+export declare const GalleryLightbox: ({ open, onClose, item, handlePrev, handleNext, zoom, setZoom, rotation, setRotation, videoRef, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/Gallery.d.ts

@@ -0,0 +1,2 @@
+export * from './Gallery/index'
+export {}

package/components/Icon/Icon.cjs

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../index.cjs");
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const sizeMap = {
+  xs: 18,
+  sm: 24,
+  md: 36,
+  lg: 48,
+  xl: 64
+};
+const StyledIcon = material.styled("span")(({ color, fontSize, spin, outlined }) => ({
+  display: "inline-flex",
+  color,
+  fontSize,
+  animation: spin ? "spin 1s linear infinite" : void 0,
+  border: outlined ? "1px solid currentColor" : void 0,
+  borderRadius: "50%",
+  padding: outlined ? 4 : 0,
+  "@keyframes spin": {
+    "0%": { transform: "rotate(0deg)" },
+    "100%": { transform: "rotate(360deg)" }
+  }
+}));
+const Icon = ({
+  children,
+  color = "var(--primary-color)",
+  outlined = false,
+  spin = false,
+  badge,
+  badgeColor = "primary",
+  badgePosition = { vertical: "bottom", horizontal: "right" },
+  badgeSize = "medium",
+  size = "sm",
+  black,
+  white,
+  className
+}) => {
+  const finalColor = React.useMemo(() => {
+    if (white) return "white";
+    if (black) return "black";
+    return color;
+  }, [color, white, black]);
+  const iconSize = sizeMap[size];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Badge,
+    {
+      badgeContent: badge,
+      color: badgeColor,
+      anchorOrigin: badgePosition,
+      invisible: badge === void 0,
+      sx: { ".MuiBadge-badge": { transform: "scale(1)" } },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        StyledIcon,
+        {
+          color: finalColor,
+          fontSize: iconSize,
+          spin,
+          outlined,
+          className: `hsi-icon ${className || ""}`,
+          children
+        }
+      )
+    }
+  );
+};
+exports.Icon = Icon;
+//# sourceMappingURL=Icon.cjs.map

package/components/Icon/Icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.cjs","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\nimport { Badge, SvgIconProps, styled } from '@mui/material';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n  children: ReactNode;\n  color?: string;\n  outlined?: boolean;\n  spin?: boolean;\n  badge?: string | number;\n  badgeColor?: 'primary' | 'secondary' | 'error';\n  badgePosition?: {\n    vertical: 'top' | 'bottom';\n    horizontal: 'right' | 'left';\n  };\n  badgeSize?: 'small' | 'medium' | 'large';\n  size?: IconSize;\n  black?: boolean;\n  white?: boolean;\n  className?: string;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n  xs: 18,\n  sm: 24,\n  md: 36,\n  lg: 48,\n  xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n  color?: string;\n  fontSize?: number;\n  spin?: boolean;\n  outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n  display: 'inline-flex',\n  color: color,\n  fontSize: fontSize,\n  animation: spin ? 'spin 1s linear infinite' : undefined,\n  border: outlined ? '1px solid currentColor' : undefined,\n  borderRadius: '50%',\n  padding: outlined ? 4 : 0,\n  '@keyframes spin': {\n    '0%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(360deg)' },\n  },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n  children,\n  color = 'var(--primary-color)',\n  outlined = false,\n  spin = false,\n  badge,\n  badgeColor = 'primary',\n  badgePosition = { vertical: 'bottom', horizontal: 'right' },\n  badgeSize = 'medium',\n  size = 'sm',\n  black,\n  white,\n  className,\n}) => {\n  const finalColor = useMemo(() => {\n    if (white) return 'white';\n    if (black) return 'black';\n    return color;\n  }, [color, white, black]);\n\n  const iconSize = sizeMap[size];\n\n  return (\n    <Badge\n      badgeContent={badge}\n      color={badgeColor}\n      anchorOrigin={badgePosition}\n      invisible={badge === undefined}\n      sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n    >\n      <StyledIcon\n        color={finalColor}\n        fontSize={iconSize}\n        spin={spin}\n        outlined={outlined}\n        className={`hsi-icon ${className || ''}`}\n      >\n        {children}\n      </StyledIcon>\n    </Badge>\n  );\n};\n\nexport default Icon;"],"names":["styled","useMemo","jsx","Badge"],"mappings":";;;;;;AAuBA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAaA,SAAAA,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAE1C,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAaC,MAAAA,QAAQ,MAAM;AAC/B,QAAI,MAAO,QAAO;AAClB,QAAI,MAAO,QAAO;AAClB,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,OAAO,KAAK,CAAC;AAExB,QAAM,WAAW,QAAQ,IAAI;AAE7B,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UAErC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;"}

package/components/Icon/Icon.d.ts

@@ -0,0 +1,21 @@
+import { default as React, ReactNode } from 'react';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface IconProps {
+    children: ReactNode;
+    color?: string;
+    outlined?: boolean;
+    spin?: boolean;
+    badge?: string | number;
+    badgeColor?: 'primary' | 'secondary' | 'error';
+    badgePosition?: {
+        vertical: 'top' | 'bottom';
+        horizontal: 'right' | 'left';
+    };
+    badgeSize?: 'small' | 'medium' | 'large';
+    size?: IconSize;
+    black?: boolean;
+    white?: boolean;
+    className?: string;
+}
+export declare const Icon: React.FC<IconProps>;
+export default Icon;

package/components/Icon/Icon.js

@@ -0,0 +1,70 @@
+import "../../index.js";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { styled, Badge } from "@mui/material";
+const sizeMap = {
+  xs: 18,
+  sm: 24,
+  md: 36,
+  lg: 48,
+  xl: 64
+};
+const StyledIcon = styled("span")(({ color, fontSize, spin, outlined }) => ({
+  display: "inline-flex",
+  color,
+  fontSize,
+  animation: spin ? "spin 1s linear infinite" : void 0,
+  border: outlined ? "1px solid currentColor" : void 0,
+  borderRadius: "50%",
+  padding: outlined ? 4 : 0,
+  "@keyframes spin": {
+    "0%": { transform: "rotate(0deg)" },
+    "100%": { transform: "rotate(360deg)" }
+  }
+}));
+const Icon = ({
+  children,
+  color = "var(--primary-color)",
+  outlined = false,
+  spin = false,
+  badge,
+  badgeColor = "primary",
+  badgePosition = { vertical: "bottom", horizontal: "right" },
+  badgeSize = "medium",
+  size = "sm",
+  black,
+  white,
+  className
+}) => {
+  const finalColor = useMemo(() => {
+    if (white) return "white";
+    if (black) return "black";
+    return color;
+  }, [color, white, black]);
+  const iconSize = sizeMap[size];
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      badgeContent: badge,
+      color: badgeColor,
+      anchorOrigin: badgePosition,
+      invisible: badge === void 0,
+      sx: { ".MuiBadge-badge": { transform: "scale(1)" } },
+      children: /* @__PURE__ */ jsx(
+        StyledIcon,
+        {
+          color: finalColor,
+          fontSize: iconSize,
+          spin,
+          outlined,
+          className: `hsi-icon ${className || ""}`,
+          children
+        }
+      )
+    }
+  );
+};
+export {
+  Icon
+};
+//# sourceMappingURL=Icon.js.map

package/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\nimport { Badge, SvgIconProps, styled } from '@mui/material';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n  children: ReactNode;\n  color?: string;\n  outlined?: boolean;\n  spin?: boolean;\n  badge?: string | number;\n  badgeColor?: 'primary' | 'secondary' | 'error';\n  badgePosition?: {\n    vertical: 'top' | 'bottom';\n    horizontal: 'right' | 'left';\n  };\n  badgeSize?: 'small' | 'medium' | 'large';\n  size?: IconSize;\n  black?: boolean;\n  white?: boolean;\n  className?: string;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n  xs: 18,\n  sm: 24,\n  md: 36,\n  lg: 48,\n  xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n  color?: string;\n  fontSize?: number;\n  spin?: boolean;\n  outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n  display: 'inline-flex',\n  color: color,\n  fontSize: fontSize,\n  animation: spin ? 'spin 1s linear infinite' : undefined,\n  border: outlined ? '1px solid currentColor' : undefined,\n  borderRadius: '50%',\n  padding: outlined ? 4 : 0,\n  '@keyframes spin': {\n    '0%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(360deg)' },\n  },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n  children,\n  color = 'var(--primary-color)',\n  outlined = false,\n  spin = false,\n  badge,\n  badgeColor = 'primary',\n  badgePosition = { vertical: 'bottom', horizontal: 'right' },\n  badgeSize = 'medium',\n  size = 'sm',\n  black,\n  white,\n  className,\n}) => {\n  const finalColor = useMemo(() => {\n    if (white) return 'white';\n    if (black) return 'black';\n    return color;\n  }, [color, white, black]);\n\n  const iconSize = sizeMap[size];\n\n  return (\n    <Badge\n      badgeContent={badge}\n      color={badgeColor}\n      anchorOrigin={badgePosition}\n      invisible={badge === undefined}\n      sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n    >\n      <StyledIcon\n        color={finalColor}\n        fontSize={iconSize}\n        spin={spin}\n        outlined={outlined}\n        className={`hsi-icon ${className || ''}`}\n      >\n        {children}\n      </StyledIcon>\n    </Badge>\n  );\n};\n\nexport default Icon;"],"names":[],"mappings":";;;;AAuBA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAa,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAE1C,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,MAAO,QAAO;AAClB,QAAI,MAAO,QAAO;AAClB,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,OAAO,KAAK,CAAC;AAExB,QAAM,WAAW,QAAQ,IAAI;AAE7B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UAErC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

package/components/Icon/index.d.ts

@@ -0,0 +1 @@
+export { default as Icon } from './Icon';

package/components/Icon.d.ts

@@ -0,0 +1,2 @@
+export * from './Icon/index'
+export {}