@danielcruzcode/ui-core 0.1.2 → 0.1.4

package/dist/index.esm10.js

@@ -1,54 +1,69 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { root as g, heading as b } from "./index.esm27.js";
-import { Carousel as k } from "./index.esm5.js";
-import { ProductCard as w } from "./index.esm9.js";
-function A({
-  products: s,
-  title: o,
-  autoplay: t = !1,
-  autoplayMs: a = 4e3,
-  slidesPerView: i = { mobile: 1, tablet: 2, desktop: 4 },
-  onAddToCart: l,
-  onWishlist: m,
-  onProductClick: n,
-  formatPrice: c,
-  loading: d = !1,
-  skeletonCount: p = 4
-}) {
-  const f = d ? Array.from({ length: p }).map((r, h) => ({
-    id: `skeleton-${h}`,
-    title: "",
-    images: [],
-    price: 0,
-    loading: !0
-  })) : s;
-  return /* @__PURE__ */ u("section", { className: g, "aria-label": o ?? "Productos", children: [
-    o && /* @__PURE__ */ e("h2", { className: b, children: o }),
-    /* @__PURE__ */ e(
-      k,
-      {
-        autoplay: t,
-        autoplayMs: a,
-        slidesPerView: i,
-        gap: 4,
-        showArrows: !0,
-        showDots: !0,
-        loop: !0,
-        children: f.map((r) => /* @__PURE__ */ e(
-          w,
-          {
-            ...r,
-            onAddToCart: l,
-            onWishlist: m,
-            onClick: n,
-            formatPrice: c
-          },
-          r.id
-        ))
-      }
-    )
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import e from "@emotion/styled";
+import { keyframes as A } from "@emotion/react";
+import { tokens as o } from "@danielcruzcode/design-tokens";
+import { Card as O } from "./index.esm8.js";
+import { Badge as B } from "./index.esm3.js";
+import { Button as R } from "./index.esm2.js";
+const U = A`0%{background-position:-200% 0}100%{background-position:200% 0}`, H = e.div`display:flex;flex-direction:column;height:100%;`, S = e.div`position:relative;width:100%;padding-top:100%;overflow:hidden;background-color:${o.color.surface};`, T = e.img`position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform ${o.transition.normal};${S}:hover &{transform:scale(1.04);}`, V = e.div`position:absolute;top:${o.space.sm};left:${o.space.sm};display:flex;flex-direction:column;gap:4px;`, _ = e.button`position:absolute;top:${o.space.sm};right:${o.space.sm};width:32px;height:32px;border-radius:${o.radius.full};border:1px solid ${o.color.border};background-color:${o.color.background};display:flex;align-items:center;justify-content:center;cursor:pointer;color:${o.color.textMuted};transition:color ${o.transition.fast},border-color ${o.transition.fast};&:hover{color:${o.color.danger};border-color:${o.color.danger};}&:focus-visible{outline:2px solid ${o.color.borderFocus};outline-offset:2px;}`, q = e.div`position:absolute;inset:0;background-color:rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;`, E = e.span`font-family:${o.font.body};font-size:13px;font-weight:600;color:${o.color.textMuted};`, G = e.div`display:flex;flex-direction:column;gap:4px;padding:${o.space.sm};flex:1;`, J = e.p`font-family:${o.font.body};font-size:14px;font-weight:500;color:${o.color.text};display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;margin:0;height:2.5rem;`, K = e.p`font-family:${o.font.body};font-size:12px;color:${o.color.textMuted};margin:0;`, C = e.div`display:flex;align-items:center;gap:4px;`, N = e.span`font-family:${o.font.body};font-size:12px;color:${o.color.textMuted};`, P = e.div`display:flex;align-items:baseline;gap:${o.space.sm};flex-wrap:wrap;margin-top:auto;`, Q = e.span`font-family:${o.font.body};font-size:18px;font-weight:700;color:${o.color.text};`, X = e.span`font-family:${o.font.body};font-size:13px;color:${o.color.textMuted};text-decoration:line-through;`, Y = e.span`font-family:${o.font.body};font-size:12px;color:${o.color.textMuted};`, Z = e.div`display:flex;flex-direction:column;gap:${o.space.sm};padding:0 ${o.space.sm} ${o.space.sm};`, D = e.button`background:none;border:none;cursor:pointer;font-family:${o.font.body};font-size:13px;color:${o.color.brand};padding:0;text-align:center;&:hover{text-decoration:underline;}&:focus-visible{outline:2px solid ${o.color.borderFocus};outline-offset:2px;}`, u = e.div`border-radius:${o.radius.md};background:linear-gradient(90deg,${o.color.surface} 25%,${o.color.surfaceHover} 50%,${o.color.surface} 75%);background-size:200% 100%;animation:${U} 1.5s ease-in-out infinite;`, oo = e(u)`width:100%;padding-top:100%;`, h = e(u)`height:14px;border-radius:${o.radius.sm};`, to = e(u)`height:40px;border-radius:${o.radius.md};`;
+function eo({ rating: r }) {
+  return /* @__PURE__ */ t(C, { "aria-label": `${r} de 5 estrellas`, role: "img", children: Array.from({ length: 5 }).map((s, l) => /* @__PURE__ */ t("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: l < Math.round(r) ? "#F9AB00" : "none", stroke: "#F9AB00", strokeWidth: "1", "aria-hidden": "true", children: /* @__PURE__ */ t("path", { d: "M6 1l1.39 2.82L10.5 4.27l-2.25 2.19.53 3.09L6 8l-2.78 1.55.53-3.09L1.5 4.27l3.11-.45L6 1z" }) }, l)) });
+}
+function io() {
+  return /* @__PURE__ */ i("article", { "aria-label": "Cargando producto", "aria-busy": "true", children: [
+    /* @__PURE__ */ t(oo, {}),
+    /* @__PURE__ */ i("div", { style: { padding: "8px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
+      /* @__PURE__ */ t(h, { style: { width: "100%" } }),
+      /* @__PURE__ */ t(h, { style: { width: "70%" } }),
+      /* @__PURE__ */ t(h, { style: { width: "50%" } }),
+      /* @__PURE__ */ t(to, {})
+    ] })
+  ] });
+}
+function ho({ id: r, title: s, subtitle: l, images: M, price: g, originalPrice: d, discountPercent: m, badge: x, rating: b, reviewCount: y, installments: a, unavailable: $ = !1, loading: L = !1, onAddToCart: v, onWishlist: k, onQuickView: w, onClick: c, formatPrice: n, className: W }) {
+  if (L) return /* @__PURE__ */ t(io, {});
+  const j = n ? n(g) : String(g), z = d ? n ? n(d) : String(d) : void 0, p = M[0], F = /* @__PURE__ */ i(S, { children: [
+    p && /* @__PURE__ */ t(T, { src: p.src, alt: p.alt, width: 100, height: 100, loading: "lazy" }),
+    /* @__PURE__ */ i(V, { children: [
+      m !== void 0 && /* @__PURE__ */ i(B, { variant: "danger", size: "sm", children: [
+        "-",
+        m,
+        "%"
+      ] }),
+      x && /* @__PURE__ */ t(B, { variant: "brand", size: "sm", children: x })
+    ] }),
+    k && /* @__PURE__ */ t(_, { type: "button", onClick: (f) => {
+      f.stopPropagation(), k(r);
+    }, "aria-label": `Agregar ${s} a favoritos`, children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: /* @__PURE__ */ t("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" }) }) }),
+    $ && /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(E, { children: "Sin stock" }) })
+  ] }), I = /* @__PURE__ */ i(G, { children: [
+    /* @__PURE__ */ t(J, { children: s }),
+    l && /* @__PURE__ */ t(K, { children: l }),
+    b !== void 0 && /* @__PURE__ */ i(C, { children: [
+      /* @__PURE__ */ t(eo, { rating: b }),
+      y !== void 0 && /* @__PURE__ */ i(N, { children: [
+        "(",
+        y,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ i(P, { children: [
+      /* @__PURE__ */ t(Q, { children: j }),
+      z && /* @__PURE__ */ t(X, { children: z })
+    ] }),
+    a && /* @__PURE__ */ i(Y, { children: [
+      a.count,
+      "x ",
+      n ? n(a.value) : a.value
+    ] })
   ] });
+  return /* @__PURE__ */ t(H, { className: W, children: /* @__PURE__ */ t(O, { media: F, body: I, footer: /* @__PURE__ */ i(Z, { children: [
+    v && /* @__PURE__ */ t(R, { variant: "primary", size: "sm", fullWidth: !0, disabled: $, onClick: () => v(r), children: "Agregar" }),
+    w && /* @__PURE__ */ t(D, { type: "button", onClick: (f) => {
+      f.stopPropagation(), w(r);
+    }, children: "Vista rápida" })
+  ] }), hoverable: !!c, onClick: c ? () => c(r) : void 0 }) });
 }
 export {
-  A as ProductShelf
+  ho as ProductCard
 };

package/dist/index.esm11.js

@@ -1,52 +1,28 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useId as b } from "react";
-import { wrapper as f, label as N, selectWrapper as x, chevron as j, errorText as k, select as w, selectError as I } from "./index.esm17.js";
-function g({
-  options: n,
-  value: o,
-  onChange: i,
-  label: d,
-  placeholder: t,
-  error: r,
-  disabled: m = !1,
-  name: u,
-  id: h
-}) {
-  const v = b(), a = h ?? v, c = r ? `${a}-error` : void 0, p = [w, r ? I : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: f, children: [
-    d && /* @__PURE__ */ e("label", { className: N, htmlFor: a, children: d }),
-    /* @__PURE__ */ s("div", { className: x, children: [
-      /* @__PURE__ */ s(
-        "select",
-        {
-          id: a,
-          name: u,
-          className: p,
-          value: o,
-          onChange: (l) => i == null ? void 0 : i(l.target.value),
-          disabled: m,
-          "aria-invalid": r ? !0 : void 0,
-          "aria-describedby": c,
-          children: [
-            t && /* @__PURE__ */ e("option", { value: "", disabled: !0, children: t }),
-            n.map((l) => /* @__PURE__ */ e("option", { value: l.value, disabled: l.disabled, children: l.label }, l.value))
-          ]
-        }
-      ),
-      /* @__PURE__ */ e("span", { className: j, "aria-hidden": "true", children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ e(
-        "path",
-        {
-          d: "M4 6l4 4 4-4",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ) }) })
-    ] }),
-    r && /* @__PURE__ */ e("span", { id: c, className: k, role: "alert", children: r })
+var b = Object.defineProperty, w = Object.defineProperties;
+var C = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var P = Object.prototype.hasOwnProperty, j = Object.prototype.propertyIsEnumerable;
+var a = (e, o, r) => o in e ? b(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, m = (e, o) => {
+  for (var r in o || (o = {}))
+    P.call(o, r) && a(e, r, o[r]);
+  if (n)
+    for (var r of n(o))
+      j.call(o, r) && a(e, r, o[r]);
+  return e;
+}, l = (e, o) => w(e, C(o));
+import { jsxs as A, jsx as t } from "react/jsx-runtime";
+import c from "@emotion/styled";
+import { tokens as i } from "@danielcruzcode/design-tokens";
+import { Carousel as z } from "./index.esm9.js";
+import { ProductCard as D } from "./index.esm10.js";
+const H = c.section`display:flex;flex-direction:column;gap:${i.space.md};`, R = c.h2`font-family:${i.font.display};font-size:24px;color:${i.color.text};margin:0;letter-spacing:0.02em;`;
+function F({ products: e, title: o, autoplay: r = !1, autoplayMs: d = 4e3, slidesPerView: p = { mobile: 1, tablet: 2, desktop: 4 }, onAddToCart: f, onWishlist: u, onProductClick: g, formatPrice: h, loading: x = !1, skeletonCount: y = 4 }) {
+  const k = x ? Array.from({ length: y }).map((s, $) => ({ id: `skeleton-${$}`, title: "", images: [], price: 0, loading: !0 })) : e;
+  return /* @__PURE__ */ A(H, { "aria-label": o != null ? o : "Productos", children: [
+    o && /* @__PURE__ */ t(R, { children: o }),
+    /* @__PURE__ */ t(z, { autoplay: r, autoplayMs: d, slidesPerView: p, gap: "md", showArrows: !0, showDots: !0, loop: !0, children: k.map((s) => /* @__PURE__ */ t(D, l(m({}, s), { onAddToCart: f, onWishlist: u, onClick: g, formatPrice: h }), s.id)) })
   ] });
 }
 export {
-  g as Select
+  F as ProductShelf
 };

package/dist/index.esm12.js

@@ -1,25 +1,14 @@
-import { jsx as a } from "react/jsx-runtime";
-import { vars as c } from "@danielcruzcode/design-tokens";
-import { stackBase as n } from "./index.esm29.js";
-const o = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  stretch: "stretch"
-};
-function l({ gap: t, align: e = "stretch", children: r, as: s = "div" }) {
-  return /* @__PURE__ */ a(
-    s,
-    {
-      className: n,
-      style: {
-        gap: t ? c.space[t] : void 0,
-        alignItems: o[e]
-      },
-      children: r
-    }
-  );
+import { jsx as o } from "react/jsx-runtime";
+import s from "@emotion/styled";
+import { tokens as i } from "@danielcruzcode/design-tokens";
+const l = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch" }, a = s.div`
+  display:flex;flex-direction:column;
+  align-items:${({ align: t }) => l[t]};
+  gap:${({ gap: t }) => t ? i.space[t] : "0"};
+`;
+function p({ gap: t, align: e = "stretch", children: r, as: n, className: c }) {
+  return /* @__PURE__ */ o(a, { as: n, gap: t, align: e, className: c, children: r });
 }
 export {
-  l as Stack
+  p as Stack
 };

package/dist/index.esm13.js

@@ -1,28 +1,15 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { removeButton as o, tagRecipe as a } from "./index.esm14.js";
-function c({ label: r, onRemove: e, variant: i = "default" }) {
-  return /* @__PURE__ */ n("span", { className: a({ variant: i }), children: [
-    r,
-    e && /* @__PURE__ */ t(
-      "button",
-      {
-        type: "button",
-        className: o,
-        onClick: e,
-        "aria-label": `Eliminar ${r}`,
-        children: /* @__PURE__ */ t("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ t(
-          "path",
-          {
-            d: "M9 3L3 9M3 3l6 6",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
-          }
-        ) })
-      }
-    )
-  ] });
+import { jsx as a } from "react/jsx-runtime";
+import p from "@emotion/styled";
+import { tokens as n } from "@danielcruzcode/design-tokens";
+const m = { sm: "640px", md: "768px", lg: "1024px", xl: "1280px", full: "100%" }, o = p.div`
+  width:100%;margin-inline:auto;padding-inline:${n.space.md};
+  max-width:${({ maxWidth: i }) => m[i]};
+  @media screen and (min-width:640px){padding-inline:${n.space.lg};}
+  @media screen and (min-width:1024px){padding-inline:${n.space.xl};}
+`;
+function s({ maxWidth: i = "xl", children: d, as: e, className: t }) {
+  return /* @__PURE__ */ a(o, { as: e, maxWidth: i, className: t, children: d });
 }
 export {
-  c as Tag
+  s as Container
 };

package/dist/index.esm14.js

@@ -1,9 +1,24 @@
-import "./index.esm31.js";
-/* empty css            */
-/* empty css            */
-import { c as a } from "./index.esm34.js";
-var i = a({ defaultClassName: "_13mmpdy0", variantClassNames: { variant: { default: "_13mmpdy1", brand: "_13mmpdy2" } }, defaultVariants: { variant: "default" }, compoundVariants: [] }), p = "_13mmpdy3";
+import { useRef as l, useState as f, useCallback as p, useEffect as c } from "react";
+import { areOptionsEqual as E, arePluginsEqual as O, canUseDOM as w } from "./index.esm15.js";
+import m from "./index.esm16.js";
+function b(e = {}, r = []) {
+  const t = l(e), n = l(r), [u, s] = f(), [a, d] = f(), o = p(() => {
+    u && u.reInit(t.current, n.current);
+  }, [u]);
+  return c(() => {
+    E(t.current, e) || (t.current = e, o());
+  }, [e, o]), c(() => {
+    O(n.current, r) || (n.current = r, o());
+  }, [r, o]), c(() => {
+    if (w() && a) {
+      m.globalOptions = b.globalOptions;
+      const i = m(a, t.current, n.current);
+      return s(i), () => i.destroy();
+    } else
+      s(void 0);
+  }, [a, s]), [d, u];
+}
+b.globalOptions = void 0;
 export {
-  p as removeButton,
-  i as tagRecipe
+  b as default
 };

package/dist/index.esm15.js

@@ -1,7 +1,35 @@
-/* empty css            */
-/* empty css            */
-import { c as r } from "./index.esm34.js";
-var t = r({ defaultClassName: "_12rozn90", variantClassNames: { variant: { primary: "_12rozn91", secondary: "_12rozn92", ghost: "_12rozn93", danger: "_12rozn94" }, size: { sm: "_12rozn95", md: "_12rozn96", lg: "_12rozn97" }, fullWidth: { true: "_12rozn98" } }, defaultVariants: { variant: "primary", size: "md" }, compoundVariants: [] });
+function y(n) {
+  return Object.prototype.toString.call(n) === "[object Object]";
+}
+function a(n) {
+  return y(n) || Array.isArray(n);
+}
+function p() {
+  return !!(typeof window != "undefined" && window.document && window.document.createElement);
+}
+function l(n, t) {
+  const e = Object.keys(n), c = Object.keys(t);
+  if (e.length !== c.length) return !1;
+  const s = JSON.stringify(Object.keys(n.breakpoints || {})), u = JSON.stringify(Object.keys(t.breakpoints || {}));
+  return s !== u ? !1 : e.every((o) => {
+    const r = n[o], i = t[o];
+    return typeof r == "function" ? `${r}` == `${i}` : !a(r) || !a(i) ? r === i : l(r, i);
+  });
+}
+function f(n) {
+  return n.concat().sort((t, e) => t.name > e.name ? 1 : -1).map((t) => t.options);
+}
+function O(n, t) {
+  if (n.length !== t.length) return !1;
+  const e = f(n), c = f(t);
+  return e.every((s, u) => {
+    const o = c[u];
+    return l(s, o);
+  });
+}
 export {
-  t as buttonRecipe
+  l as areOptionsEqual,
+  O as arePluginsEqual,
+  p as canUseDOM,
+  f as sortAndMapPluginToOptions
 };