@danielcruzcode/ui-core 0.1.5 → 0.1.6

package/dist/components/Carousel/Carousel.d.ts

@@ -9,6 +9,7 @@ export interface CarouselProps {
     children: React.ReactNode[];
     autoplay?: boolean;
     autoplayMs?: number;
+    pauseOnHover?: boolean;
     showArrows?: boolean;
     showDots?: boolean;
     loop?: boolean;
@@ -17,6 +18,6 @@ export interface CarouselProps {
     gap?: keyof typeof tokens.space;
     onSlideChange?: (index: number) => void;
 }
-export declare function Carousel({ children, autoplay, autoplayMs, showArrows, showDots, loop, slidesPerView, slidesPerGroup, gap, onSlideChange, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function Carousel({ children, autoplay, autoplayMs, pauseOnHover, showArrows, showDots, loop, slidesPerView, slidesPerGroup, gap, onSlideChange, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Carousel.d.ts.map

package/dist/components/Carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAA;AAEtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,aAAa,GAAG,MAAM,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAA;AAEjF,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAA;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAmCD,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EAAE,QAAgB,EAAE,UAAiB,EAAE,UAAiB,EAAE,QAAe,EACjF,IAAY,EAAE,aAAiB,EAAE,cAAkB,EAAE,GAAG,EAAE,aAAa,GACxE,EAAE,aAAa,2CAwEf"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAA;AAEtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,aAAa,GAAG,MAAM,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAA;AAEjF,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAA;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAmCD,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EAAE,QAAgB,EAAE,UAAiB,EAAE,YAAmB,EAClE,UAAiB,EAAE,QAAe,EAClC,IAAY,EAAE,aAAiB,EAAE,cAAkB,EAAE,GAAG,EAAE,aAAa,GACxE,EAAE,aAAa,2CAwFf"}

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { tokens } from '@danielcruzcode/design-tokens';
+import useEmblaCarousel from 'embla-carousel-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+const GAP_PX = { sm: 8, md: 16, lg: 24, xl: 32 };
+function getSpv(slidesPerView, width) {
+    if (typeof slidesPerView === 'number')
+        return slidesPerView;
+    if (width >= 1024)
+        return slidesPerView.desktop;
+    if (width >= 640)
+        return slidesPerView.tablet;
+    return slidesPerView.mobile;
+}
+const ArrowBtn = styled.button `
+  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
+  display:flex;align-items:center;justify-content:center;
+  width:36px;height:36px;border-radius:${tokens.radius.full};
+  border:1px solid ${tokens.color.border};background-color:${tokens.color.background};
+  color:${tokens.color.text};cursor:pointer;box-shadow:${tokens.shadow.sm};
+  transition:box-shadow ${tokens.transition.fast};
+  &:hover{box-shadow:${tokens.shadow.md};}
+  &:focus-visible{outline:2px solid ${tokens.color.borderFocus};outline-offset:2px;}
+  &:disabled{opacity:0.4;cursor:not-allowed;}
+`;
+const ArrowPrev = styled(ArrowBtn) `left:${tokens.space.sm};`;
+const ArrowNext = styled(ArrowBtn) `right:${tokens.space.sm};`;
+const Dot = styled.button `
+  width:${({ active }) => (active ? '20px' : '8px')};height:8px;
+  border-radius:${tokens.radius.full};
+  background-color:${({ active }) => (active ? tokens.color.brand : tokens.color.border)};
+  border:none;cursor:pointer;padding:0;
+  transition:background-color ${tokens.transition.fast},width ${tokens.transition.fast};
+  &:focus-visible{outline:2px solid ${tokens.color.borderFocus};outline-offset:2px;}
+`;
+const Dots = styled.div `display:flex;justify-content:center;gap:${tokens.space.sm};margin-top:${tokens.space.sm};`;
+export function Carousel({ children, autoplay = false, autoplayMs = 4000, pauseOnHover = true, showArrows = true, showDots = true, loop = false, slidesPerView = 1, slidesPerGroup = 1, gap, onSlideChange, }) {
+    const gapPx = gap ? (GAP_PX[gap] ?? 0) : 0;
+    const [emblaRef, emblaApi] = useEmblaCarousel({ loop, slidesToScroll: slidesPerGroup, align: 'start' });
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollSnaps, setScrollSnaps] = useState([]);
+    const [hovered, setHovered] = useState(false);
+    const slidesPerViewRef = useRef(slidesPerView);
+    slidesPerViewRef.current = slidesPerView;
+    const containerRef = useRef(null);
+    const [spv, setSpv] = useState(1);
+    // Use ResizeObserver on the container — reliable in iframes and custom viewports
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(([entry]) => {
+            const width = entry.contentRect.width;
+            setSpv(getSpv(slidesPerViewRef.current, width));
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    const onSelect = useCallback(() => {
+        if (!emblaApi)
+            return;
+        const index = emblaApi.selectedScrollSnap();
+        setSelectedIndex(index);
+        onSlideChange?.(index);
+    }, [emblaApi, onSlideChange]);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        setScrollSnaps(emblaApi.scrollSnapList());
+        emblaApi.on('select', onSelect);
+        emblaApi.on('reInit', onSelect);
+        return () => { emblaApi.off('select', onSelect); emblaApi.off('reInit', onSelect); };
+    }, [emblaApi, onSelect]);
+    useEffect(() => { emblaApi?.reInit(); }, [emblaApi, spv]);
+    useEffect(() => {
+        if (!autoplay || !emblaApi)
+            return;
+        if (pauseOnHover && hovered)
+            return;
+        const id = setInterval(() => emblaApi.scrollNext(), autoplayMs);
+        return () => clearInterval(id);
+    }, [autoplay, autoplayMs, emblaApi, pauseOnHover, hovered]);
+    const slideWidth = `calc((100% - ${gapPx * (spv - 1)}px) / ${spv})`;
+    return (_jsxs("div", { ref: containerRef, style: { position: 'relative', width: '100%' }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [_jsx("div", { ref: emblaRef, style: { overflow: 'hidden' }, children: _jsx("div", { style: { display: 'flex', gap: gapPx }, children: children.map((child, i) => (_jsx("div", { style: { flex: `0 0 ${slideWidth}`, minWidth: 0 }, children: child }, i))) }) }), showArrows && (_jsxs(_Fragment, { children: [_jsx(ArrowPrev, { type: "button", "aria-label": "Slide anterior", onClick: () => emblaApi?.scrollPrev(), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M10 12L6 8l4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx(ArrowNext, { type: "button", "aria-label": "Slide siguiente", onClick: () => emblaApi?.scrollNext(), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })), showDots && (_jsx(Dots, { children: scrollSnaps.map((_, i) => (_jsx(Dot, { active: i === selectedIndex, type: "button", onClick: () => emblaApi?.scrollTo(i), "aria-label": `Ir al slide ${i + 1}` }, i))) }))] }));
+}
+//# sourceMappingURL=Carousel.js.map

package/dist/components/Carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.tsx"],"names":[],"mappings":"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"}

package/dist/index.cjs9.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("@emotion/styled"),t=require("./index.cjs14.js"),q=require("./index.cjs15.js"),s=require("react"),C={sm:8,md:16,lg:24,xl:32};function b(r,l){return typeof r=="number"?r:l>=1024?r.desktop:l>=640?r.tablet:r.mobile}const v=d.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("@emotion/styled"),t=require("./index.cjs14.js"),N=require("./index.cjs15.js"),s=require("react"),T={sm:8,md:16,lg:24,xl:32};function _(r,i){return typeof r=="number"?r:i>=1024?r.desktop:i>=640?r.tablet:r.mobile}const w=d.button`
   position:absolute;top:50%;transform:translateY(-50%);z-index:10;
   display:flex;align-items:center;justify-content:center;
   width:36px;height:36px;border-radius:${t.tokens.radius.full};
@@ -8,11 +8,11 @@
   &:hover{box-shadow:${t.tokens.shadow.md};}
   &:focus-visible{outline:2px solid ${t.tokens.color.borderFocus};outline-offset:2px;}
   &:disabled{opacity:0.4;cursor:not-allowed;}
-`,z=d(v)`left:${t.tokens.space.sm};`,B=d(v)`right:${t.tokens.space.sm};`,F=d.button`
+`,z=d(w)`left:${t.tokens.space.sm};`,D=d(w)`right:${t.tokens.space.sm};`,P=d.button`
   width:${({active:r})=>r?"20px":"8px"};height:8px;
   border-radius:${t.tokens.radius.full};
   background-color:${({active:r})=>r?t.tokens.color.brand:t.tokens.color.border};
   border:none;cursor:pointer;padding:0;
   transition:background-color ${t.tokens.transition.fast},width ${t.tokens.transition.fast};
   &:focus-visible{outline:2px solid ${t.tokens.color.borderFocus};outline-offset:2px;}
-`,N=d.div`display:flex;justify-content:center;gap:${t.tokens.space.sm};margin-top:${t.tokens.space.sm};`;function R({children:r,autoplay:l=!1,autoplayMs:x=4e3,showArrows:w=!0,showDots:$=!0,loop:j=!1,slidesPerView:u=1,slidesPerGroup:g=1,gap:p,onSlideChange:a}){var k;const h=p&&(k=C[p])!=null?k:0,[y,e]=q({loop:j,slidesToScroll:g,align:"start"}),[m,S]=s.useState(0),[I,L]=s.useState([]),[f,E]=s.useState(()=>typeof window!="undefined"?b(u,window.innerWidth):1);s.useEffect(()=>{if(typeof window=="undefined")return;const n=()=>E(b(u,window.innerWidth));return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[u]);const c=s.useCallback(()=>{if(!e)return;const n=e.selectedScrollSnap();S(n),a==null||a(n)},[e,a]);s.useEffect(()=>{if(e)return L(e.scrollSnapList()),e.on("select",c),e.on("reInit",c),()=>{e.off("select",c),e.off("reInit",c)}},[e,c]),s.useEffect(()=>{e==null||e.reInit()},[e,f]),s.useEffect(()=>{if(!l||!e)return;const n=setInterval(()=>e.scrollNext(),x);return()=>clearInterval(n)},[l,x,e]);const W=`calc((100% - ${h*(f-1)}px) / ${f})`;return o.jsxs("div",{style:{position:"relative",width:"100%"},children:[o.jsx("div",{ref:y,style:{overflow:"hidden"},children:o.jsx("div",{style:{display:"flex",gap:h},children:r.map((n,i)=>o.jsx("div",{style:{flex:`0 0 ${W}`,minWidth:0},children:n},i))})}),w&&o.jsxs(o.Fragment,{children:[o.jsx(z,{type:"button","aria-label":"Slide anterior",onClick:()=>e==null?void 0:e.scrollPrev(),children:o.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:o.jsx("path",{d:"M10 12L6 8l4-4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),o.jsx(B,{type:"button","aria-label":"Slide siguiente",onClick:()=>e==null?void 0:e.scrollNext(),children:o.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:o.jsx("path",{d:"M6 4l4 4-4 4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),$&&o.jsx(N,{children:I.map((n,i)=>o.jsx(F,{active:i===m,type:"button",onClick:()=>e==null?void 0:e.scrollTo(i),"aria-label":`Ir al slide ${i+1}`},i))})]})}exports.Carousel=R;
+`,G=d.div`display:flex;justify-content:center;gap:${t.tokens.space.sm};margin-top:${t.tokens.space.sm};`;function O({children:r,autoplay:i=!1,autoplayMs:f=4e3,pauseOnHover:x=!0,showArrows:m=!0,showDots:y=!0,loop:S=!1,slidesPerView:h=1,slidesPerGroup:R=1,gap:p,onSlideChange:u}){var g;const k=p&&(g=T[p])!=null?g:0,[I,e]=N({loop:S,slidesToScroll:R,align:"start"}),[L,q]=s.useState(0),[E,C]=s.useState([]),[b,v]=s.useState(!1),$=s.useRef(h);$.current=h;const j=s.useRef(null),[a,M]=s.useState(1);s.useEffect(()=>{const n=j.current;if(!n)return;const c=new ResizeObserver(([B])=>{const F=B.contentRect.width;M(_($.current,F))});return c.observe(n),()=>c.disconnect()},[]);const l=s.useCallback(()=>{if(!e)return;const n=e.selectedScrollSnap();q(n),u==null||u(n)},[e,u]);s.useEffect(()=>{if(e)return C(e.scrollSnapList()),e.on("select",l),e.on("reInit",l),()=>{e.off("select",l),e.off("reInit",l)}},[e,l]),s.useEffect(()=>{e==null||e.reInit()},[e,a]),s.useEffect(()=>{if(!i||!e||x&&b)return;const n=setInterval(()=>e.scrollNext(),f);return()=>clearInterval(n)},[i,f,e,x,b]);const W=`calc((100% - ${k*(a-1)}px) / ${a})`;return o.jsxs("div",{ref:j,style:{position:"relative",width:"100%"},onMouseEnter:()=>v(!0),onMouseLeave:()=>v(!1),children:[o.jsx("div",{ref:I,style:{overflow:"hidden"},children:o.jsx("div",{style:{display:"flex",gap:k},children:r.map((n,c)=>o.jsx("div",{style:{flex:`0 0 ${W}`,minWidth:0},children:n},c))})}),m&&o.jsxs(o.Fragment,{children:[o.jsx(z,{type:"button","aria-label":"Slide anterior",onClick:()=>e==null?void 0:e.scrollPrev(),children:o.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:o.jsx("path",{d:"M10 12L6 8l4-4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),o.jsx(D,{type:"button","aria-label":"Slide siguiente",onClick:()=>e==null?void 0:e.scrollNext(),children:o.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:o.jsx("path",{d:"M6 4l4 4-4 4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),y&&o.jsx(G,{children:E.map((n,c)=>o.jsx(P,{active:c===L,type:"button",onClick:()=>e==null?void 0:e.scrollTo(c),"aria-label":`Ir al slide ${c+1}`},c))})]})}exports.Carousel=O;

package/dist/index.esm9.js

@@ -1,76 +1,92 @@
-import { jsxs as m, jsx as n, Fragment as C } from "react/jsx-runtime";
-import d from "@emotion/styled";
-import { tokens as o } from "./index.esm14.js";
-import F from "./index.esm15.js";
-import { useState as p, useEffect as a, useCallback as N } from "react";
-const D = { sm: 8, md: 16, lg: 24, xl: 32 };
-function w(r, s) {
-  return typeof r == "number" ? r : s >= 1024 ? r.desktop : s >= 640 ? r.tablet : r.mobile;
+import { jsxs as y, jsx as o, Fragment as _ } from "react/jsx-runtime";
+import c from "@emotion/styled";
+import { tokens as e } from "./index.esm14.js";
+import G from "./index.esm15.js";
+import { useState as a, useRef as S, useEffect as u, useCallback as P } from "react";
+const X = { sm: 8, md: 16, lg: 24, xl: 32 };
+function Y(r, i) {
+  return typeof r == "number" ? r : i >= 1024 ? r.desktop : i >= 640 ? r.tablet : r.mobile;
 }
-const $ = d.button`
+const I = c.button`
   position:absolute;top:50%;transform:translateY(-50%);z-index:10;
   display:flex;align-items:center;justify-content:center;
-  width:36px;height:36px;border-radius:${o.radius.full};
-  border:1px solid ${o.color.border};background-color:${o.color.background};
-  color:${o.color.text};cursor:pointer;box-shadow:${o.shadow.sm};
-  transition:box-shadow ${o.transition.fast};
-  &:hover{box-shadow:${o.shadow.md};}
-  &:focus-visible{outline:2px solid ${o.color.borderFocus};outline-offset:2px;}
+  width:36px;height:36px;border-radius:${e.radius.full};
+  border:1px solid ${e.color.border};background-color:${e.color.background};
+  color:${e.color.text};cursor:pointer;box-shadow:${e.shadow.sm};
+  transition:box-shadow ${e.transition.fast};
+  &:hover{box-shadow:${e.shadow.md};}
+  &:focus-visible{outline:2px solid ${e.color.borderFocus};outline-offset:2px;}
   &:disabled{opacity:0.4;cursor:not-allowed;}
-`, T = d($)`left:${o.space.sm};`, _ = d($)`right:${o.space.sm};`, G = d.button`
+`, q = c(I)`left:${e.space.sm};`, H = c(I)`right:${e.space.sm};`, J = c.button`
   width:${({ active: r }) => r ? "20px" : "8px"};height:8px;
-  border-radius:${o.radius.full};
-  background-color:${({ active: r }) => r ? o.color.brand : o.color.border};
+  border-radius:${e.radius.full};
+  background-color:${({ active: r }) => r ? e.color.brand : e.color.border};
   border:none;cursor:pointer;padding:0;
-  transition:background-color ${o.transition.fast},width ${o.transition.fast};
-  &:focus-visible{outline:2px solid ${o.color.borderFocus};outline-offset:2px;}
-`, M = d.div`display:flex;justify-content:center;gap:${o.space.sm};margin-top:${o.space.sm};`;
-function J({
+  transition:background-color ${e.transition.fast},width ${e.transition.fast};
+  &:focus-visible{outline:2px solid ${e.color.borderFocus};outline-offset:2px;}
+`, K = c.div`display:flex;justify-content:center;gap:${e.space.sm};margin-top:${e.space.sm};`;
+function V({
   children: r,
-  autoplay: s = !1,
-  autoplayMs: h = 4e3,
-  showArrows: k = !0,
-  showDots: g = !0,
-  loop: y = !1,
-  slidesPerView: u = 1,
-  slidesPerGroup: S = 1,
-  gap: x,
-  onSlideChange: c
+  autoplay: i = !1,
+  autoplayMs: p = 4e3,
+  pauseOnHover: h = !0,
+  showArrows: L = !0,
+  showDots: j = !0,
+  loop: R = !1,
+  slidesPerView: x = 1,
+  slidesPerGroup: W = 1,
+  gap: b,
+  onSlideChange: d
 }) {
-  var v;
-  const b = x && (v = D[x]) != null ? v : 0, [I, t] = F({ loop: y, slidesToScroll: S, align: "start" }), [L, j] = p(0), [W, E] = p([]), [f, z] = p(() => typeof window != "undefined" ? w(u, window.innerWidth) : 1);
-  a(() => {
-    if (typeof window == "undefined") return;
-    const e = () => z(w(u, window.innerWidth));
-    return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-  }, [u]);
-  const l = N(() => {
+  var w;
+  const v = b && (w = X[b]) != null ? w : 0, [B, t] = G({ loop: R, slidesToScroll: W, align: "start" }), [C, E] = a(0), [F, M] = a([]), [m, $] = a(!1), k = S(x);
+  k.current = x;
+  const g = S(null), [f, N] = a(1);
+  u(() => {
+    const n = g.current;
+    if (!n) return;
+    const s = new ResizeObserver(([D]) => {
+      const T = D.contentRect.width;
+      N(Y(k.current, T));
+    });
+    return s.observe(n), () => s.disconnect();
+  }, []);
+  const l = P(() => {
     if (!t) return;
-    const e = t.selectedScrollSnap();
-    j(e), c == null || c(e);
-  }, [t, c]);
-  a(() => {
+    const n = t.selectedScrollSnap();
+    E(n), d == null || d(n);
+  }, [t, d]);
+  u(() => {
     if (t)
-      return E(t.scrollSnapList()), t.on("select", l), t.on("reInit", l), () => {
+      return M(t.scrollSnapList()), t.on("select", l), t.on("reInit", l), () => {
         t.off("select", l), t.off("reInit", l);
       };
-  }, [t, l]), a(() => {
+  }, [t, l]), u(() => {
     t == null || t.reInit();
-  }, [t, f]), a(() => {
-    if (!s || !t) return;
-    const e = setInterval(() => t.scrollNext(), h);
-    return () => clearInterval(e);
-  }, [s, h, t]);
-  const B = `calc((100% - ${b * (f - 1)}px) / ${f})`;
-  return /* @__PURE__ */ m("div", { style: { position: "relative", width: "100%" }, children: [
-    /* @__PURE__ */ n("div", { ref: I, style: { overflow: "hidden" }, children: /* @__PURE__ */ n("div", { style: { display: "flex", gap: b }, children: r.map((e, i) => /* @__PURE__ */ n("div", { style: { flex: `0 0 ${B}`, minWidth: 0 }, children: e }, i)) }) }),
-    k && /* @__PURE__ */ m(C, { children: [
-      /* @__PURE__ */ n(T, { type: "button", "aria-label": "Slide anterior", onClick: () => t == null ? void 0 : t.scrollPrev(), children: /* @__PURE__ */ n("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M10 12L6 8l4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
-      /* @__PURE__ */ n(_, { type: "button", "aria-label": "Slide siguiente", onClick: () => t == null ? void 0 : t.scrollNext(), children: /* @__PURE__ */ n("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
-    ] }),
-    g && /* @__PURE__ */ n(M, { children: W.map((e, i) => /* @__PURE__ */ n(G, { active: i === L, type: "button", onClick: () => t == null ? void 0 : t.scrollTo(i), "aria-label": `Ir al slide ${i + 1}` }, i)) })
-  ] });
+  }, [t, f]), u(() => {
+    if (!i || !t || h && m) return;
+    const n = setInterval(() => t.scrollNext(), p);
+    return () => clearInterval(n);
+  }, [i, p, t, h, m]);
+  const z = `calc((100% - ${v * (f - 1)}px) / ${f})`;
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      ref: g,
+      style: { position: "relative", width: "100%" },
+      onMouseEnter: () => $(!0),
+      onMouseLeave: () => $(!1),
+      children: [
+        /* @__PURE__ */ o("div", { ref: B, style: { overflow: "hidden" }, children: /* @__PURE__ */ o("div", { style: { display: "flex", gap: v }, children: r.map((n, s) => /* @__PURE__ */ o("div", { style: { flex: `0 0 ${z}`, minWidth: 0 }, children: n }, s)) }) }),
+        L && /* @__PURE__ */ y(_, { children: [
+          /* @__PURE__ */ o(q, { type: "button", "aria-label": "Slide anterior", onClick: () => t == null ? void 0 : t.scrollPrev(), children: /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ o("path", { d: "M10 12L6 8l4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+          /* @__PURE__ */ o(H, { type: "button", "aria-label": "Slide siguiente", onClick: () => t == null ? void 0 : t.scrollNext(), children: /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ o("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+        ] }),
+        j && /* @__PURE__ */ o(K, { children: F.map((n, s) => /* @__PURE__ */ o(J, { active: s === C, type: "button", onClick: () => t == null ? void 0 : t.scrollTo(s), "aria-label": `Ir al slide ${s + 1}` }, s)) })
+      ]
+    }
+  );
 }
 export {
-  J as Carousel
+  V as Carousel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielcruzcode/ui-core",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "publishConfig": {
     "access": "public"
   },