@tampadevs/react 0.1.0

package/dist/index15.js

@@ -0,0 +1,325 @@
+import { jsxs as t, Fragment as E, jsx as e } from "react/jsx-runtime";
+import { useState as m, useEffect as P } from "react";
+import { clsx as r } from "./index28.js";
+function I(n) {
+  if (!n) return null;
+  const [d, i] = n.split("/").map(Number);
+  return d && i ? `${i / d * 100}%` : null;
+}
+function H({
+  src: n,
+  alt: d,
+  caption: i,
+  credit: o,
+  aspectRatio: u = "",
+  fit: x = "cover",
+  rounded: f = !1,
+  shadow: v = !1,
+  zoomable: a = !1,
+  width: w = "100%",
+  lazy: y = !0,
+  className: k
+}) {
+  const [c, _] = m(!1), [p, h] = m(!1), [L, l] = m(!1), g = I(u);
+  P(() => {
+    const s = (C) => {
+      C.key === "Escape" && (l(!1), document.body.style.overflow = "");
+    };
+    return document.addEventListener("keydown", s), () => {
+      document.removeEventListener("keydown", s), document.body.style.overflow = "";
+    };
+  }, []);
+  const N = () => {
+    _(!0), h(!1);
+  }, j = () => {
+    h(!0), _(!0);
+  }, z = () => {
+    a && !p && (l(!0), document.body.style.overflow = "hidden");
+  }, b = () => {
+    l(!1), document.body.style.overflow = "";
+  };
+  return /* @__PURE__ */ t(E, { children: [
+    /* @__PURE__ */ t(
+      "figure",
+      {
+        className: r("td-image", k),
+        style: { maxWidth: w, "--image-fit": x },
+        children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: r(
+                "td-image__wrapper",
+                f && "td-image__wrapper--rounded",
+                v && "td-image__wrapper--shadow",
+                a && "td-image__wrapper--zoomable"
+              ),
+              onClick: z,
+              role: a ? "button" : void 0,
+              tabIndex: a ? 0 : void 0,
+              "aria-label": a ? "Click to enlarge image" : void 0,
+              children: /* @__PURE__ */ t(
+                "div",
+                {
+                  className: r("td-image__aspect", g && "td-image__aspect--ratio"),
+                  style: g ? { paddingBottom: g } : void 0,
+                  children: [
+                    /* @__PURE__ */ e("div", { className: r("td-image__skeleton", c && "td-image__skeleton--hidden") }),
+                    p ? /* @__PURE__ */ t("div", { className: "td-image__error", children: [
+                      /* @__PURE__ */ e("svg", { fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 1.5,
+                          d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        }
+                      ) }),
+                      /* @__PURE__ */ e("span", { children: "Failed to load image" })
+                    ] }) : /* @__PURE__ */ e(
+                      "img",
+                      {
+                        className: r("td-image__img", c ? "td-image__img--loaded" : "td-image__img--loading"),
+                        src: n,
+                        alt: d,
+                        loading: y ? "lazy" : "eager",
+                        onLoad: N,
+                        onError: j
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          (i || o) && /* @__PURE__ */ t("figcaption", { className: "td-image__caption", children: [
+            i && /* @__PURE__ */ e("div", { className: "td-image__caption-text", children: i }),
+            o && /* @__PURE__ */ t("div", { className: "td-image__credit", children: [
+              "Photo: ",
+              o
+            ] })
+          ] })
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ t(
+      "div",
+      {
+        className: r("td-image__lightbox", L && "td-image__lightbox--open"),
+        onClick: b,
+        children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              className: "td-image__lightbox-close",
+              onClick: b,
+              "aria-label": "Close lightbox",
+              children: /* @__PURE__ */ e("svg", { fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          ),
+          /* @__PURE__ */ e("img", { src: n, alt: d, onClick: (s) => s.stopPropagation() }),
+          (i || o) && /* @__PURE__ */ t("div", { className: "td-image__lightbox-caption", children: [
+            i && /* @__PURE__ */ e("div", { className: "td-image__caption-text", children: i }),
+            o && /* @__PURE__ */ t("div", { className: "td-image__credit", children: [
+              "Photo: ",
+              o
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(M, {})
+  ] });
+}
+function M() {
+  return /* @__PURE__ */ e("style", { children: `
+      .td-image {
+        position: relative;
+      }
+
+      .td-image__wrapper {
+        position: relative;
+        overflow: hidden;
+        background: rgba(28, 36, 56, 0.1);
+      }
+
+      .td-image__wrapper--rounded {
+        border-radius: 0.875rem;
+      }
+
+      .td-image__wrapper--shadow {
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      }
+
+      .td-image__wrapper--zoomable {
+        cursor: zoom-in;
+      }
+
+      .td-image__wrapper--zoomable:hover img {
+        transform: scale(1.02);
+      }
+
+      .td-image__aspect {
+        position: relative;
+        width: 100%;
+      }
+
+      .td-image__aspect--ratio img {
+        position: absolute;
+        inset: 0;
+      }
+
+      .td-image__img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: var(--image-fit, cover);
+        transition: opacity 0.2s ease, transform 0.2s ease;
+      }
+
+      .td-image__img--loading {
+        opacity: 0;
+      }
+
+      .td-image__img--loaded {
+        opacity: 1;
+      }
+
+      .td-image__skeleton {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0.05) 25%,
+          rgba(255, 255, 255, 0.1) 50%,
+          rgba(255, 255, 255, 0.05) 75%
+        );
+        background-size: 200% 100%;
+        animation: td-image-shimmer 1.5s infinite;
+      }
+
+      .td-image__skeleton--hidden {
+        display: none;
+      }
+
+      @keyframes td-image-shimmer {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+      }
+
+      .td-image__error {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        color: rgba(156, 163, 175, 0.6);
+        background: rgba(28, 36, 56, 0.3);
+      }
+
+      .td-image__error svg {
+        width: 48px;
+        height: 48px;
+        opacity: 0.5;
+      }
+
+      .td-image__error span {
+        font-size: 0.875rem;
+      }
+
+      .td-image__caption {
+        padding: 0.75rem 0;
+      }
+
+      .td-image__caption-text {
+        font-size: 0.875rem;
+        color: rgba(156, 163, 175, 0.8);
+        line-height: 1.5;
+      }
+
+      .td-image__credit {
+        font-size: 0.75rem;
+        color: rgba(156, 163, 175, 0.6);
+        margin-top: 0.25rem;
+      }
+
+      .td-image__lightbox {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.9);
+        backdrop-filter: blur(8px);
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.2s ease;
+        cursor: zoom-out;
+      }
+
+      .td-image__lightbox--open {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .td-image__lightbox img {
+        max-width: 90vw;
+        max-height: 90vh;
+        object-fit: contain;
+        border-radius: 0.5rem;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+      }
+
+      .td-image__lightbox-close {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        width: 48px;
+        height: 48px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.1);
+        border: none;
+        border-radius: 50%;
+        color: white;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .td-image__lightbox-close:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      .td-image__lightbox-close svg {
+        width: 24px;
+        height: 24px;
+      }
+
+      .td-image__lightbox-caption {
+        position: absolute;
+        bottom: 2rem;
+        left: 50%;
+        transform: translateX(-50%);
+        text-align: center;
+        color: white;
+        max-width: 80vw;
+      }
+
+      .td-image__lightbox-caption .td-image__caption-text {
+        color: white;
+        font-size: 1rem;
+      }
+
+      .td-image__lightbox-caption .td-image__credit {
+        color: rgba(255, 255, 255, 0.7);
+      }
+    ` });
+}
+export {
+  H as Image
+};
+//# sourceMappingURL=index15.js.map

package/dist/index15.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index15.js","sources":["../src/components/Image.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ImageFit = 'cover' | 'contain' | 'fill' | 'none';\n\nexport interface ImageProps {\n  src: string;\n  alt: string;\n  caption?: string;\n  credit?: string;\n  aspectRatio?: string;\n  fit?: ImageFit;\n  rounded?: boolean;\n  shadow?: boolean;\n  zoomable?: boolean;\n  width?: string;\n  lazy?: boolean;\n  className?: string;\n}\n\nfunction getAspectPadding(aspectRatio: string): string | null {\n  if (!aspectRatio) return null;\n  const [width, height] = aspectRatio.split('/').map(Number);\n  if (width && height) {\n    return `${(height / width) * 100}%`;\n  }\n  return null;\n}\n\nexport function Image({\n  src,\n  alt,\n  caption,\n  credit,\n  aspectRatio = '',\n  fit = 'cover',\n  rounded = false,\n  shadow = false,\n  zoomable = false,\n  width = '100%',\n  lazy = true,\n  className,\n}: ImageProps) {\n  const [isLoaded, setIsLoaded] = useState(false);\n  const [hasError, setHasError] = useState(false);\n  const [lightboxOpen, setLightboxOpen] = useState(false);\n\n  const aspectPadding = getAspectPadding(aspectRatio);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setLightboxOpen(false);\n        document.body.style.overflow = '';\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.overflow = '';\n    };\n  }, []);\n\n  const handleLoad = () => {\n    setIsLoaded(true);\n    setHasError(false);\n  };\n\n  const handleError = () => {\n    setHasError(true);\n    setIsLoaded(true);\n  };\n\n  const openLightbox = () => {\n    if (zoomable && !hasError) {\n      setLightboxOpen(true);\n      document.body.style.overflow = 'hidden';\n    }\n  };\n\n  const closeLightbox = () => {\n    setLightboxOpen(false);\n    document.body.style.overflow = '';\n  };\n\n  return (\n    <>\n      <figure\n        className={clsx('td-image', className)}\n        style={{ maxWidth: width, '--image-fit': fit } as React.CSSProperties}\n      >\n        <div\n          className={clsx(\n            'td-image__wrapper',\n            rounded && 'td-image__wrapper--rounded',\n            shadow && 'td-image__wrapper--shadow',\n            zoomable && 'td-image__wrapper--zoomable'\n          )}\n          onClick={openLightbox}\n          role={zoomable ? 'button' : undefined}\n          tabIndex={zoomable ? 0 : undefined}\n          aria-label={zoomable ? 'Click to enlarge image' : undefined}\n        >\n          <div\n            className={clsx('td-image__aspect', aspectPadding && 'td-image__aspect--ratio')}\n            style={aspectPadding ? { paddingBottom: aspectPadding } : undefined}\n          >\n            <div className={clsx('td-image__skeleton', isLoaded && 'td-image__skeleton--hidden')} />\n\n            {hasError ? (\n              <div className=\"td-image__error\">\n                <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={1.5}\n                    d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n                  />\n                </svg>\n                <span>Failed to load image</span>\n              </div>\n            ) : (\n              <img\n                className={clsx('td-image__img', isLoaded ? 'td-image__img--loaded' : 'td-image__img--loading')}\n                src={src}\n                alt={alt}\n                loading={lazy ? 'lazy' : 'eager'}\n                onLoad={handleLoad}\n                onError={handleError}\n              />\n            )}\n          </div>\n        </div>\n\n        {(caption || credit) && (\n          <figcaption className=\"td-image__caption\">\n            {caption && <div className=\"td-image__caption-text\">{caption}</div>}\n            {credit && <div className=\"td-image__credit\">Photo: {credit}</div>}\n          </figcaption>\n        )}\n      </figure>\n\n      {zoomable && (\n        <div\n          className={clsx('td-image__lightbox', lightboxOpen && 'td-image__lightbox--open')}\n          onClick={closeLightbox}\n        >\n          <button\n            className=\"td-image__lightbox-close\"\n            onClick={closeLightbox}\n            aria-label=\"Close lightbox\"\n          >\n            <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n          <img src={src} alt={alt} onClick={(e) => e.stopPropagation()} />\n          {(caption || credit) && (\n            <div className=\"td-image__lightbox-caption\">\n              {caption && <div className=\"td-image__caption-text\">{caption}</div>}\n              {credit && <div className=\"td-image__credit\">Photo: {credit}</div>}\n            </div>\n          )}\n        </div>\n      )}\n\n      <ImageStyles />\n    </>\n  );\n}\n\nfunction ImageStyles() {\n  return (\n    <style>{`\n      .td-image {\n        position: relative;\n      }\n\n      .td-image__wrapper {\n        position: relative;\n        overflow: hidden;\n        background: rgba(28, 36, 56, 0.1);\n      }\n\n      .td-image__wrapper--rounded {\n        border-radius: 0.875rem;\n      }\n\n      .td-image__wrapper--shadow {\n        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n      }\n\n      .td-image__wrapper--zoomable {\n        cursor: zoom-in;\n      }\n\n      .td-image__wrapper--zoomable:hover img {\n        transform: scale(1.02);\n      }\n\n      .td-image__aspect {\n        position: relative;\n        width: 100%;\n      }\n\n      .td-image__aspect--ratio img {\n        position: absolute;\n        inset: 0;\n      }\n\n      .td-image__img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--image-fit, cover);\n        transition: opacity 0.2s ease, transform 0.2s ease;\n      }\n\n      .td-image__img--loading {\n        opacity: 0;\n      }\n\n      .td-image__img--loaded {\n        opacity: 1;\n      }\n\n      .td-image__skeleton {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(\n          90deg,\n          rgba(255, 255, 255, 0.05) 25%,\n          rgba(255, 255, 255, 0.1) 50%,\n          rgba(255, 255, 255, 0.05) 75%\n        );\n        background-size: 200% 100%;\n        animation: td-image-shimmer 1.5s infinite;\n      }\n\n      .td-image__skeleton--hidden {\n        display: none;\n      }\n\n      @keyframes td-image-shimmer {\n        0% { background-position: 200% 0; }\n        100% { background-position: -200% 0; }\n      }\n\n      .td-image__error {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 0.5rem;\n        color: rgba(156, 163, 175, 0.6);\n        background: rgba(28, 36, 56, 0.3);\n      }\n\n      .td-image__error svg {\n        width: 48px;\n        height: 48px;\n        opacity: 0.5;\n      }\n\n      .td-image__error span {\n        font-size: 0.875rem;\n      }\n\n      .td-image__caption {\n        padding: 0.75rem 0;\n      }\n\n      .td-image__caption-text {\n        font-size: 0.875rem;\n        color: rgba(156, 163, 175, 0.8);\n        line-height: 1.5;\n      }\n\n      .td-image__credit {\n        font-size: 0.75rem;\n        color: rgba(156, 163, 175, 0.6);\n        margin-top: 0.25rem;\n      }\n\n      .td-image__lightbox {\n        position: fixed;\n        inset: 0;\n        z-index: 9999;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: rgba(0, 0, 0, 0.9);\n        backdrop-filter: blur(8px);\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.2s ease;\n        cursor: zoom-out;\n      }\n\n      .td-image__lightbox--open {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      .td-image__lightbox img {\n        max-width: 90vw;\n        max-height: 90vh;\n        object-fit: contain;\n        border-radius: 0.5rem;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n      }\n\n      .td-image__lightbox-close {\n        position: absolute;\n        top: 1rem;\n        right: 1rem;\n        width: 48px;\n        height: 48px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: rgba(255, 255, 255, 0.1);\n        border: none;\n        border-radius: 50%;\n        color: white;\n        cursor: pointer;\n        transition: all 0.15s ease;\n      }\n\n      .td-image__lightbox-close:hover {\n        background: rgba(255, 255, 255, 0.2);\n      }\n\n      .td-image__lightbox-close svg {\n        width: 24px;\n        height: 24px;\n      }\n\n      .td-image__lightbox-caption {\n        position: absolute;\n        bottom: 2rem;\n        left: 50%;\n        transform: translateX(-50%);\n        text-align: center;\n        color: white;\n        max-width: 80vw;\n      }\n\n      .td-image__lightbox-caption .td-image__caption-text {\n        color: white;\n        font-size: 1rem;\n      }\n\n      .td-image__lightbox-caption .td-image__credit {\n        color: rgba(255, 255, 255, 0.7);\n      }\n    `}</style>\n  );\n}\n"],"names":["getAspectPadding","aspectRatio","width","height","Image","src","alt","caption","credit","fit","rounded","shadow","zoomable","lazy","className","isLoaded","setIsLoaded","useState","hasError","setHasError","lightboxOpen","setLightboxOpen","aspectPadding","useEffect","handleKeyDown","e","handleLoad","handleError","openLightbox","closeLightbox","jsxs","Fragment","clsx","jsx","ImageStyles"],"mappings":"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AA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAyLN;AAEN;"}

package/dist/index16.js

@@ -0,0 +1,204 @@
+import { jsxs as c, jsx as t, Fragment as I } from "react/jsx-runtime";
+import { useState as g, useCallback as b, useEffect as C } from "react";
+import { clsx as f } from "./index28.js";
+import { Icon as m } from "./index3.js";
+function T({
+  images: r,
+  autoplay: d = !1,
+  interval: i = 5e3,
+  showDots: p = !0,
+  showArrows: v = !0,
+  showCaptions: w = !1,
+  loop: o = !0,
+  aspectRatio: x = "16/9",
+  className: k
+}) {
+  const [l, s] = g(0), [u, _] = g(!1), n = b(() => {
+    s((e) => e >= r.length - 1 ? o ? 0 : e : e + 1);
+  }, [r.length, o]), N = b(() => {
+    s((e) => e <= 0 ? o ? r.length - 1 : e : e - 1);
+  }, [r.length, o]), y = (e) => {
+    s(e);
+  };
+  if (C(() => {
+    if (!d || u || r.length <= 1) return;
+    const e = setInterval(n, i);
+    return () => clearInterval(e);
+  }, [d, u, i, n, r.length]), r.length === 0) return null;
+  const h = r[l];
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: f("td-carousel", k),
+      onMouseEnter: () => _(!0),
+      onMouseLeave: () => _(!1),
+      style: { "--aspect-ratio": x },
+      children: [
+        /* @__PURE__ */ c("div", { className: "td-carousel__viewport", children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "td-carousel__track",
+              style: { transform: `translateX(-${l * 100}%)` },
+              children: r.map((e, a) => /* @__PURE__ */ t("div", { className: "td-carousel__slide", children: /* @__PURE__ */ t(
+                "img",
+                {
+                  src: e.src,
+                  alt: e.alt,
+                  className: "td-carousel__image",
+                  loading: a === 0 ? "eager" : "lazy"
+                }
+              ) }, a))
+            }
+          ),
+          w && h.title && /* @__PURE__ */ t("div", { className: "td-carousel__caption", children: h.title })
+        ] }),
+        v && r.length > 1 && /* @__PURE__ */ c(I, { children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: "td-carousel__arrow td-carousel__arrow--prev",
+              onClick: N,
+              "aria-label": "Previous slide",
+              disabled: !o && l === 0,
+              children: /* @__PURE__ */ t(m, { name: "chevron-left", size: "lg" })
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: "td-carousel__arrow td-carousel__arrow--next",
+              onClick: n,
+              "aria-label": "Next slide",
+              disabled: !o && l === r.length - 1,
+              children: /* @__PURE__ */ t(m, { name: "chevron-right", size: "lg" })
+            }
+          )
+        ] }),
+        p && r.length > 1 && /* @__PURE__ */ t("div", { className: "td-carousel__dots", children: r.map((e, a) => /* @__PURE__ */ t(
+          "button",
+          {
+            className: f(
+              "td-carousel__dot",
+              a === l && "td-carousel__dot--active"
+            ),
+            onClick: () => y(a),
+            "aria-label": `Go to slide ${a + 1}`
+          },
+          a
+        )) }),
+        /* @__PURE__ */ t("style", { children: `
+        .td-carousel {
+          position: relative;
+          width: 100%;
+        }
+
+        .td-carousel__viewport {
+          position: relative;
+          width: 100%;
+          aspect-ratio: var(--aspect-ratio, 16/9);
+          overflow: hidden;
+          border-radius: 0.75rem;
+          background: rgba(28, 36, 56, 0.5);
+        }
+
+        .td-carousel__track {
+          display: flex;
+          height: 100%;
+          transition: transform 0.5s ease;
+        }
+
+        .td-carousel__slide {
+          flex: 0 0 100%;
+          width: 100%;
+          height: 100%;
+        }
+
+        .td-carousel__image {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+        .td-carousel__caption {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          padding: 1rem 1.5rem;
+          background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+          color: white;
+          font-size: 0.875rem;
+        }
+
+        .td-carousel__arrow {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(28, 36, 56, 0.8);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 50%;
+          color: white;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          z-index: 1;
+        }
+
+        .td-carousel__arrow:hover:not(:disabled) {
+          background: rgba(28, 36, 56, 0.95);
+          border-color: rgba(255, 255, 255, 0.2);
+        }
+
+        .td-carousel__arrow:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .td-carousel__arrow--prev {
+          left: 1rem;
+        }
+
+        .td-carousel__arrow--next {
+          right: 1rem;
+        }
+
+        .td-carousel__dots {
+          display: flex;
+          justify-content: center;
+          gap: 0.5rem;
+          margin-top: 1rem;
+        }
+
+        .td-carousel__dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.3);
+          border: none;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          padding: 0;
+        }
+
+        .td-carousel__dot:hover {
+          background: rgba(255, 255, 255, 0.5);
+        }
+
+        .td-carousel__dot--active {
+          background: #E85A4F;
+          transform: scale(1.25);
+        }
+      ` })
+      ]
+    }
+  );
+}
+export {
+  T as ImageCarousel
+};
+//# sourceMappingURL=index16.js.map

package/dist/index16.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index16.js","sources":["../src/components/ImageCarousel.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { Icon } from './Icon';\n\nexport interface CarouselImage {\n  src: string;\n  alt: string;\n  title?: string;\n}\n\nexport interface ImageCarouselProps {\n  images: CarouselImage[];\n  autoplay?: boolean;\n  interval?: number;\n  showDots?: boolean;\n  showArrows?: boolean;\n  showCaptions?: boolean;\n  loop?: boolean;\n  aspectRatio?: string;\n  className?: string;\n}\n\nexport function ImageCarousel({\n  images,\n  autoplay = false,\n  interval = 5000,\n  showDots = true,\n  showArrows = true,\n  showCaptions = false,\n  loop = true,\n  aspectRatio = '16/9',\n  className,\n}: ImageCarouselProps) {\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [isPaused, setIsPaused] = useState(false);\n\n  const goToNext = useCallback(() => {\n    setCurrentIndex((prev) => {\n      if (prev >= images.length - 1) {\n        return loop ? 0 : prev;\n      }\n      return prev + 1;\n    });\n  }, [images.length, loop]);\n\n  const goToPrev = useCallback(() => {\n    setCurrentIndex((prev) => {\n      if (prev <= 0) {\n        return loop ? images.length - 1 : prev;\n      }\n      return prev - 1;\n    });\n  }, [images.length, loop]);\n\n  const goToSlide = (index: number) => {\n    setCurrentIndex(index);\n  };\n\n  useEffect(() => {\n    if (!autoplay || isPaused || images.length <= 1) return;\n\n    const timer = setInterval(goToNext, interval);\n    return () => clearInterval(timer);\n  }, [autoplay, isPaused, interval, goToNext, images.length]);\n\n  if (images.length === 0) return null;\n\n  const currentImage = images[currentIndex];\n\n  return (\n    <div\n      className={clsx('td-carousel', className)}\n      onMouseEnter={() => setIsPaused(true)}\n      onMouseLeave={() => setIsPaused(false)}\n      style={{ '--aspect-ratio': aspectRatio } as React.CSSProperties}\n    >\n      <div className=\"td-carousel__viewport\">\n        <div\n          className=\"td-carousel__track\"\n          style={{ transform: `translateX(-${currentIndex * 100}%)` }}\n        >\n          {images.map((image, index) => (\n            <div key={index} className=\"td-carousel__slide\">\n              <img\n                src={image.src}\n                alt={image.alt}\n                className=\"td-carousel__image\"\n                loading={index === 0 ? 'eager' : 'lazy'}\n              />\n            </div>\n          ))}\n        </div>\n\n        {showCaptions && currentImage.title && (\n          <div className=\"td-carousel__caption\">{currentImage.title}</div>\n        )}\n      </div>\n\n      {showArrows && images.length > 1 && (\n        <>\n          <button\n            className=\"td-carousel__arrow td-carousel__arrow--prev\"\n            onClick={goToPrev}\n            aria-label=\"Previous slide\"\n            disabled={!loop && currentIndex === 0}\n          >\n            <Icon name=\"chevron-left\" size=\"lg\" />\n          </button>\n          <button\n            className=\"td-carousel__arrow td-carousel__arrow--next\"\n            onClick={goToNext}\n            aria-label=\"Next slide\"\n            disabled={!loop && currentIndex === images.length - 1}\n          >\n            <Icon name=\"chevron-right\" size=\"lg\" />\n          </button>\n        </>\n      )}\n\n      {showDots && images.length > 1 && (\n        <div className=\"td-carousel__dots\">\n          {images.map((_, index) => (\n            <button\n              key={index}\n              className={clsx(\n                'td-carousel__dot',\n                index === currentIndex && 'td-carousel__dot--active'\n              )}\n              onClick={() => goToSlide(index)}\n              aria-label={`Go to slide ${index + 1}`}\n            />\n          ))}\n        </div>\n      )}\n\n      <style>{`\n        .td-carousel {\n          position: relative;\n          width: 100%;\n        }\n\n        .td-carousel__viewport {\n          position: relative;\n          width: 100%;\n          aspect-ratio: var(--aspect-ratio, 16/9);\n          overflow: hidden;\n          border-radius: 0.75rem;\n          background: rgba(28, 36, 56, 0.5);\n        }\n\n        .td-carousel__track {\n          display: flex;\n          height: 100%;\n          transition: transform 0.5s ease;\n        }\n\n        .td-carousel__slide {\n          flex: 0 0 100%;\n          width: 100%;\n          height: 100%;\n        }\n\n        .td-carousel__image {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n\n        .td-carousel__caption {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          padding: 1rem 1.5rem;\n          background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));\n          color: white;\n          font-size: 0.875rem;\n        }\n\n        .td-carousel__arrow {\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          width: 40px;\n          height: 40px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          background: rgba(28, 36, 56, 0.8);\n          border: 1px solid rgba(255, 255, 255, 0.1);\n          border-radius: 50%;\n          color: white;\n          cursor: pointer;\n          transition: all 0.2s ease;\n          z-index: 1;\n        }\n\n        .td-carousel__arrow:hover:not(:disabled) {\n          background: rgba(28, 36, 56, 0.95);\n          border-color: rgba(255, 255, 255, 0.2);\n        }\n\n        .td-carousel__arrow:disabled {\n          opacity: 0.5;\n          cursor: not-allowed;\n        }\n\n        .td-carousel__arrow--prev {\n          left: 1rem;\n        }\n\n        .td-carousel__arrow--next {\n          right: 1rem;\n        }\n\n        .td-carousel__dots {\n          display: flex;\n          justify-content: center;\n          gap: 0.5rem;\n          margin-top: 1rem;\n        }\n\n        .td-carousel__dot {\n          width: 8px;\n          height: 8px;\n          border-radius: 50%;\n          background: rgba(255, 255, 255, 0.3);\n          border: none;\n          cursor: pointer;\n          transition: all 0.2s ease;\n          padding: 0;\n        }\n\n        .td-carousel__dot:hover {\n          background: rgba(255, 255, 255, 0.5);\n        }\n\n        .td-carousel__dot--active {\n          background: #E85A4F;\n          transform: scale(1.25);\n        }\n      `}</style>\n    </div>\n  );\n}\n"],"names":["ImageCarousel","images","autoplay","interval","showDots","showArrows","showCaptions","loop","aspectRatio","className","currentIndex","setCurrentIndex","useState","isPaused","setIsPaused","goToNext","useCallback","prev","goToPrev","goToSlide","index","useEffect","timer","currentImage","jsxs","clsx","jsx","image","Fragment","Icon","_"],"mappings":";;;;AAwBO,SAASA,EAAc;AAAA,EAC5B,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,WAAAC;AACF,GAAuB;AACrB,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAS,CAAC,GAC5C,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAK,GAExCG,IAAWC,EAAY,MAAM;AACjC,IAAAL,EAAgB,CAACM,MACXA,KAAQhB,EAAO,SAAS,IACnBM,IAAO,IAAIU,IAEbA,IAAO,CACf;AAAA,EACH,GAAG,CAAChB,EAAO,QAAQM,CAAI,CAAC,GAElBW,IAAWF,EAAY,MAAM;AACjC,IAAAL,EAAgB,CAACM,MACXA,KAAQ,IACHV,IAAON,EAAO,SAAS,IAAIgB,IAE7BA,IAAO,CACf;AAAA,EACH,GAAG,CAAChB,EAAO,QAAQM,CAAI,CAAC,GAElBY,IAAY,CAACC,MAAkB;AACnC,IAAAT,EAAgBS,CAAK;AAAA,EACvB;AASA,MAPAC,EAAU,MAAM;AACd,QAAI,CAACnB,KAAYW,KAAYZ,EAAO,UAAU,EAAG;AAEjD,UAAMqB,IAAQ,YAAYP,GAAUZ,CAAQ;AAC5C,WAAO,MAAM,cAAcmB,CAAK;AAAA,EAClC,GAAG,CAACpB,GAAUW,GAAUV,GAAUY,GAAUd,EAAO,MAAM,CAAC,GAEtDA,EAAO,WAAW,EAAG,QAAO;AAEhC,QAAMsB,IAAetB,EAAOS,CAAY;AAExC,SACE,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAK,eAAehB,CAAS;AAAA,MACxC,cAAc,MAAMK,EAAY,EAAI;AAAA,MACpC,cAAc,MAAMA,EAAY,EAAK;AAAA,MACrC,OAAO,EAAE,kBAAkBN,EAAA;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,WAAW,eAAehB,IAAe,GAAG,KAAA;AAAA,cAEpD,UAAAT,EAAO,IAAI,CAAC0B,GAAOP,MAClB,gBAAAM,EAAC,OAAA,EAAgB,WAAU,sBACzB,UAAA,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAKC,EAAM;AAAA,kBACX,KAAKA,EAAM;AAAA,kBACX,WAAU;AAAA,kBACV,SAASP,MAAU,IAAI,UAAU;AAAA,gBAAA;AAAA,cAAA,EACnC,GANQA,CAOV,CACD;AAAA,YAAA;AAAA,UAAA;AAAA,UAGFd,KAAgBiB,EAAa,SAC5B,gBAAAG,EAAC,SAAI,WAAU,wBAAwB,YAAa,MAAA,CAAM;AAAA,QAAA,GAE9D;AAAA,QAECrB,KAAcJ,EAAO,SAAS,KAC7B,gBAAAuB,EAAAI,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAASR;AAAA,cACT,cAAW;AAAA,cACX,UAAU,CAACX,KAAQG,MAAiB;AAAA,cAEpC,UAAA,gBAAAgB,EAACG,GAAA,EAAK,MAAK,gBAAe,MAAK,KAAA,CAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEtC,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAASX;AAAA,cACT,cAAW;AAAA,cACX,UAAU,CAACR,KAAQG,MAAiBT,EAAO,SAAS;AAAA,cAEpD,UAAA,gBAAAyB,EAACG,GAAA,EAAK,MAAK,iBAAgB,MAAK,KAAA,CAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACvC,GACF;AAAA,QAGDzB,KAAYH,EAAO,SAAS,KAC3B,gBAAAyB,EAAC,OAAA,EAAI,WAAU,qBACZ,UAAAzB,EAAO,IAAI,CAAC6B,GAAGV,MACd,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAWD;AAAA,cACT;AAAA,cACAL,MAAUV,KAAgB;AAAA,YAAA;AAAA,YAE5B,SAAS,MAAMS,EAAUC,CAAK;AAAA,YAC9B,cAAY,eAAeA,IAAQ,CAAC;AAAA,UAAA;AAAA,UAN/BA;AAAA,QAAA,CAQR,GACH;AAAA,0BAGD,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CA0GN;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGR;"}