@danielcruzcode/ui-core 0.1.4 → 0.1.6

package/dist/index.esm18.js

@@ -0,0 +1,52 @@
+const s = {
+  color: {
+    red: {
+      100: "#FDECEA",
+      500: "#E31837"
+    },
+    neutral: {
+      0: "#FFFFFF",
+      100: "#F5F5F5",
+      300: "#D1D1D1",
+      700: "#4A4A4A",
+      900: "#1A1A1A"
+    },
+    green: {
+      100: "#E8F5EA",
+      500: "#0A8920",
+      600: "#077319"
+    },
+    yellow: {
+      100: "#FEF7E0",
+      500: "#F9AB00"
+    }
+  },
+  space: {
+    2: "8px",
+    4: "16px",
+    6: "24px",
+    8: "32px"
+  },
+  radius: {
+    sm: "4px",
+    md: "8px",
+    full: "9999px"
+  },
+  font: {
+    family: {
+      body: "'DM Sans', sans-serif",
+      display: "'Bebas Neue', sans-serif"
+    }
+  },
+  shadow: {
+    sm: "0 1px 2px 0 rgba(0,0,0,0.08)",
+    md: "0 4px 8px 0 rgba(0,0,0,0.12)"
+  },
+  transition: {
+    fast: "100ms ease",
+    normal: "200ms ease"
+  }
+};
+export {
+  s as primitives
+};

package/dist/index.esm2.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as u, Fragment as h } from "react/jsx-runtime";
 import f from "@emotion/styled";
-import { tokens as o } from "@danielcruzcode/design-tokens";
+import { tokens as o } from "./index.esm14.js";
 const g = {
   primary: `background-color:${o.color.brand};color:#fff;border:none;&:hover:not(:disabled){background-color:${o.color.brandHover};}&:active:not(:disabled){background-color:${o.color.brandHover};box-shadow:${o.shadow.sm};}`,
   secondary: `background-color:transparent;color:${o.color.brand};border:1.5px solid ${o.color.brand};&:hover:not(:disabled){background-color:${o.color.brandSubtle};}`,

package/dist/index.esm3.js

@@ -1,6 +1,6 @@
 import { jsx as c } from "react/jsx-runtime";
 import l from "@emotion/styled";
-import { tokens as o } from "@danielcruzcode/design-tokens";
+import { tokens as o } from "./index.esm14.js";
 const t = {
   brand: `background-color: ${o.color.brandSubtle}; color: ${o.color.brand};`,
   success: `background-color: ${o.color.successSubtle}; color: ${o.color.success};`,

package/dist/index.esm4.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import t from "@emotion/styled";
-import { tokens as o } from "@danielcruzcode/design-tokens";
+import { tokens as o } from "./index.esm14.js";
 const d = {
   default: `background-color:${o.color.surface};color:${o.color.text};border:1px solid ${o.color.border};`,
   brand: `background-color:${o.color.brandSubtle};color:${o.color.brand};border:1px solid ${o.color.brand};`

package/dist/index.esm5.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as n } from "react/jsx-runtime";
 import e from "@emotion/styled";
-import { tokens as o } from "@danielcruzcode/design-tokens";
+import { tokens as o } from "./index.esm14.js";
 import { useId as I } from "react";
 const w = e.div`display:flex;flex-direction:column;gap:4px;font-family:${o.font.body};`, z = e.label`font-size:13px;font-weight:500;color:${o.color.text};`, M = e.span`color:${o.color.danger};margin-left:2px;`, S = e.div`
   display:flex;align-items:center;gap:${o.space.sm};

package/dist/index.esm6.js

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
 import n from "@emotion/styled";
-import { tokens as o } from "@danielcruzcode/design-tokens";
+import { tokens as o } from "./index.esm14.js";
 import { useId as m } from "react";
 const g = n.div`display:flex;flex-direction:column;gap:4px;font-family:${o.font.body};`, $ = n.label`font-size:13px;font-weight:500;color:${o.color.text};`, v = n.div`position:relative;display:flex;align-items:center;`, y = n.select`
   width:100%;height:40px;padding-inline-start:${o.space.sm};padding-inline-end:36px;

package/dist/index.esm7.js

@@ -1,6 +1,6 @@
 import { jsxs as f, jsx as e } from "react/jsx-runtime";
 import i from "@emotion/styled";
-import { tokens as t } from "@danielcruzcode/design-tokens";
+import { tokens as t } from "./index.esm14.js";
 import { useId as x, useRef as b, useEffect as k } from "react";
 const g = i.label`
   display: inline-flex; align-items: center; gap: ${t.space.sm};

package/dist/index.esm8.js

@@ -1,6 +1,6 @@
 import { jsxs as h, jsx as a } from "react/jsx-runtime";
 import e from "@emotion/styled";
-import { tokens as o } from "@danielcruzcode/design-tokens";
+import { tokens as o } from "./index.esm14.js";
 const v = { none: "0", sm: o.space.sm, md: o.space.md, lg: o.space.lg }, f = e.article`
   display:flex;flex-direction:column;background-color:${o.color.background};
   border-radius:${o.radius.md};border:1px solid ${o.color.border};

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 "@danielcruzcode/design-tokens";
-import F from "./index.esm14.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.4",
+  "version": "0.1.6",
   "publishConfig": {
     "access": "public"
   },