@danielcruzcode/ui-core 0.1.3 → 0.1.4

package/dist/index.esm2.js

@@ -1,8 +1,41 @@
-import { jsx as m } from "react/jsx-runtime";
-import { badgeRecipe as o } from "./index.esm16.js";
-function p({ variant: e = "neutral", size: r = "md", children: a }) {
-  return /* @__PURE__ */ m("span", { className: o({ variant: e, size: r }), children: a });
+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";
+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};}`,
+  ghost: `background-color:transparent;color:${o.color.text};border:none;&:hover:not(:disabled){background-color:${o.color.surface};}`,
+  danger: `background-color:${o.color.danger};color:#fff;border:none;&:hover:not(:disabled){opacity:0.9;}`
+}, $ = {
+  sm: `height:32px;padding-inline:${o.space.sm};font-size:13px;`,
+  md: `height:40px;padding-inline:${o.space.md};font-size:15px;`,
+  lg: `height:48px;padding-inline:${o.space.lg};font-size:17px;`
+}, m = f.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${o.space.sm};
+  border-radius: ${o.radius.md};
+  font-family: ${o.font.body};
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color ${o.transition.fast}, opacity ${o.transition.fast}, box-shadow ${o.transition.fast};
+  text-decoration: none;
+  white-space: nowrap;
+  position: relative;
+  width: ${({ fullWidth: r }) => r ? "100%" : "auto"};
+  &:disabled { cursor: not-allowed; opacity: 0.5; }
+  &:focus-visible { outline: 2px solid ${o.color.borderFocus}; outline-offset: 2px; }
+  ${({ variant: r }) => g[r]}
+  ${({ size: r }) => $[r]}
+`;
+function k({ variant: r = "primary", size: a = "md", fullWidth: d = !1, loading: e = !1, disabled: l = !1, leftIcon: t, rightIcon: i, onClick: s, children: c, type: p = "button", className: b }) {
+  return /* @__PURE__ */ n(m, { type: p, variant: r, size: a, fullWidth: d, disabled: l || e, onClick: s, "aria-busy": e, className: b, children: e ? /* @__PURE__ */ n("output", { "aria-label": "Cargando", style: { display: "inline-flex", alignItems: "center" }, children: /* @__PURE__ */ n("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", style: { animation: "spin 0.75s linear infinite" }, "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }) }) : /* @__PURE__ */ u(h, { children: [
+    t && /* @__PURE__ */ n("span", { "aria-hidden": "true", children: t }),
+    c,
+    i && /* @__PURE__ */ n("span", { "aria-hidden": "true", children: i })
+  ] }) });
 }
 export {
-  p as Badge
+  k as Button
 };

package/dist/index.esm3.js

@@ -1,49 +1,30 @@
-import { jsx as e, jsxs as p, Fragment as f } from "react/jsx-runtime";
-import { buttonRecipe as m } from "./index.esm15.js";
-function v({
-  variant: t = "primary",
-  size: a = "md",
-  fullWidth: l = !1,
-  loading: i = !1,
-  disabled: s = !1,
-  leftIcon: n,
-  rightIcon: r,
-  onClick: o,
-  children: d,
-  type: h = "button",
-  className: u
-}) {
-  const c = m({ variant: t, size: a, fullWidth: l || void 0 });
-  return /* @__PURE__ */ e(
-    "button",
-    {
-      type: h,
-      className: [c, u].filter(Boolean).join(" "),
-      disabled: s || i,
-      onClick: o,
-      "aria-busy": i,
-      children: i ? /* @__PURE__ */ e("output", { "aria-label": "Cargando", style: { display: "inline-flex", alignItems: "center" }, children: /* @__PURE__ */ e(
-        "svg",
-        {
-          width: "16",
-          height: "16",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2.5",
-          strokeLinecap: "round",
-          style: { animation: "spin 0.75s linear infinite" },
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ e("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" })
-        }
-      ) }) : /* @__PURE__ */ p(f, { children: [
-        n && /* @__PURE__ */ e("span", { "aria-hidden": "true", children: n }),
-        d,
-        r && /* @__PURE__ */ e("span", { "aria-hidden": "true", children: r })
-      ] })
-    }
-  );
+import { jsx as c } from "react/jsx-runtime";
+import l from "@emotion/styled";
+import { tokens as o } from "@danielcruzcode/design-tokens";
+const t = {
+  brand: `background-color: ${o.color.brandSubtle}; color: ${o.color.brand};`,
+  success: `background-color: ${o.color.successSubtle}; color: ${o.color.success};`,
+  warning: `background-color: ${o.color.warningSubtle}; color: ${o.color.warning};`,
+  danger: `background-color: ${o.color.dangerSubtle}; color: ${o.color.danger};`,
+  neutral: `background-color: ${o.color.surface}; color: ${o.color.textMuted};`
+}, a = {
+  sm: "font-size: 11px; padding: 2px 6px;",
+  md: `font-size: 13px; padding: 4px ${o.space.sm};`
+}, s = l.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${o.radius.full};
+  font-family: ${o.font.body};
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  ${({ variant: r }) => t[r]}
+  ${({ size: r }) => a[r]}
+`;
+function g({ variant: r = "neutral", size: n = "md", children: e }) {
+  return /* @__PURE__ */ c(s, { variant: r, size: n, children: e });
 }
 export {
-  v as Button
+  g as Badge
 };

package/dist/index.esm4.js

@@ -1,35 +1,32 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { cardRecipe as f, cardMedia as h, cardHeader as p, cardBody as N, cardFooter as u } from "./index.esm23.js";
-function y({
-  media: s,
-  header: i,
-  body: o,
-  footer: t,
-  onClick: e,
-  hoverable: c = !1,
-  className: n,
-  padding: l = "none"
-}) {
-  const a = !!e, v = f({ hoverable: c || void 0, padding: l });
-  return /* @__PURE__ */ m(
-    "article",
-    {
-      className: [v, n].filter(Boolean).join(" "),
-      onClick: e,
-      role: a ? "button" : void 0,
-      tabIndex: a ? 0 : void 0,
-      onKeyDown: a ? (d) => {
-        (d.key === "Enter" || d.key === " ") && (d.preventDefault(), e == null || e());
-      } : void 0,
-      children: [
-        s && /* @__PURE__ */ r("div", { className: h, children: s }),
-        i && /* @__PURE__ */ r("div", { className: p, children: i }),
-        o && /* @__PURE__ */ r("div", { className: N, children: o }),
-        t && /* @__PURE__ */ r("div", { className: u, children: t })
-      ]
-    }
-  );
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import t from "@emotion/styled";
+import { tokens as o } from "@danielcruzcode/design-tokens";
+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};`
+}, a = t.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: ${o.radius.full};
+  font-family: ${o.font.body};
+  font-size: 13px;
+  font-weight: 500;
+  padding: 4px ${o.space.sm};
+  ${({ variant: r }) => d[r]}
+`, c = t.button`
+  display: inline-flex; align-items: center; justify-content: center;
+  background: none; border: none; padding: 0; cursor: pointer;
+  color: inherit; opacity: 0.7; border-radius: ${o.radius.full};
+  &:hover { opacity: 1; }
+  &:focus-visible { outline: 2px solid ${o.color.borderFocus}; outline-offset: 1px; }
+`;
+function f({ label: r, onRemove: n, variant: i = "default" }) {
+  return /* @__PURE__ */ l(a, { variant: i, children: [
+    r,
+    n && /* @__PURE__ */ e(c, { type: "button", onClick: n, "aria-label": `Eliminar ${r}`, children: /* @__PURE__ */ e("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
+  ] });
 }
 export {
-  y as Card
+  f as Tag
 };

package/dist/index.esm5.js

@@ -1,101 +1,40 @@
-import { jsxs as c, jsx as e, Fragment as x } from "react/jsx-runtime";
-import { useRef as g } from "react";
-import y from "./index.esm24.js";
-import $ from "./index.esm25.js";
-import j from "./index.esm26.js";
-import { Swiper as B, SwiperSlide as L } from "./index.esm27.js";
-import { dotActive as N, dot as P, arrowBtn as p, arrowPrev as S, arrowNext as A, dots as C } from "./index.esm28.js";
-/* empty css            */
-const E = { sm: 8, md: 16, lg: 24, xl: 32 };
-function X({
-  children: u,
-  autoplay: s = !1,
-  autoplayMs: m = 4e3,
-  showArrows: i = !0,
-  showDots: o = !0,
-  loop: f = !1,
-  slidesPerView: t = 1,
-  slidesPerGroup: v,
-  gap: a,
-  onSlideChange: n
-}) {
-  var d;
-  const b = g(null), h = a ? (d = E[a]) != null ? d : 16 : 0, k = typeof t == "object" ? {
-    0: { slidesPerView: t.mobile },
-    640: { slidesPerView: t.tablet },
-    1024: { slidesPerView: t.desktop }
-  } : void 0, w = typeof t == "number" ? t : void 0;
-  return /* @__PURE__ */ c("div", { children: [
-    /* @__PURE__ */ e(
-      B,
-      {
-        modules: [
-          ...i ? [y] : [],
-          ...o ? [$] : [],
-          ...s ? [j] : []
-        ],
-        slidesPerView: w,
-        breakpoints: k,
-        spaceBetween: h,
-        slidesPerGroup: v,
-        loop: f,
-        autoplay: s ? { delay: m, disableOnInteraction: !1 } : !1,
-        pagination: o ? {
-          el: ".swiper-custom-dots",
-          clickable: !0,
-          bulletClass: P,
-          bulletActiveClass: N,
-          renderBullet: (r, l) => `<button class="${l}" />`
-        } : !1,
-        navigation: i ? { prevEl: ".swiper-custom-prev", nextEl: ".swiper-custom-next" } : !1,
-        onSwiper: (r) => {
-          b.current = r;
-        },
-        onSlideChange: (r) => n == null ? void 0 : n(r.realIndex),
-        children: u.map((r, l) => /* @__PURE__ */ e(L, { children: r }, l))
-      }
-    ),
-    i && /* @__PURE__ */ c(x, { children: [
-      /* @__PURE__ */ e(
-        "button",
-        {
-          type: "button",
-          className: `${p} ${S} swiper-custom-prev`,
-          "aria-label": "Slide anterior",
-          children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e(
-            "path",
-            {
-              d: "M10 12L6 8l4-4",
-              stroke: "currentColor",
-              strokeWidth: "1.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ) })
-        }
-      ),
-      /* @__PURE__ */ e(
-        "button",
-        {
-          type: "button",
-          className: `${p} ${A} swiper-custom-next`,
-          "aria-label": "Slide siguiente",
-          children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e(
-            "path",
-            {
-              d: "M6 4l4 4-4 4",
-              stroke: "currentColor",
-              strokeWidth: "1.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ) })
-        }
-      )
+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 { 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};
+  border-radius:${o.radius.md};
+  border:1.5px solid ${({ hasError: r }) => r ? o.color.danger : o.color.border};
+  background-color:${({ disabled: r }) => r ? o.color.surface : o.color.background};
+  padding-inline:${o.space.sm};opacity:${({ disabled: r }) => r ? 0.6 : 1};
+  cursor:${({ disabled: r }) => r ? "not-allowed" : "auto"};
+  transition:border-color ${o.transition.fast};
+  &:focus-within {
+    border-color:${({ hasError: r }) => r ? o.color.danger : o.color.borderFocus};
+    box-shadow:0 0 0 3px ${({ hasError: r }) => r ? o.color.dangerSubtle : o.color.brandSubtle};
+  }
+`, j = e.input`
+  flex:1;border:none;outline:none;background:transparent;
+  font-family:${o.font.body};font-size:15px;color:${o.color.text};height:40px;
+  &::placeholder{color:${o.color.textMuted};}&:disabled{cursor:not-allowed;}
+`, b = e.span`display:flex;align-items:center;color:${o.color.textMuted};flex-shrink:0;`, B = e.span`font-size:12px;color:${o.color.textMuted};`, E = e.span`font-size:12px;color:${o.color.danger};`;
+function R({ label: r, placeholder: m, value: h, onChange: i, type: g = "text", error: t, hint: d, disabled: s = !1, required: p = !1, leftIcon: u, rightIcon: f, name: y, id: c }) {
+  const v = I(), l = c != null ? c : v, x = t ? `${l}-error` : void 0, $ = d ? `${l}-hint` : void 0;
+  return /* @__PURE__ */ a(w, { children: [
+    r && /* @__PURE__ */ a(z, { htmlFor: l, children: [
+      r,
+      p && /* @__PURE__ */ n(M, { "aria-hidden": "true", children: " *" })
     ] }),
-    o && /* @__PURE__ */ e("div", { className: `swiper-custom-dots ${C}` })
+    /* @__PURE__ */ a(S, { hasError: !!t, disabled: s, children: [
+      u && /* @__PURE__ */ n(b, { "aria-hidden": "true", children: u }),
+      /* @__PURE__ */ n(j, { id: l, name: y, type: g, placeholder: m, value: h, onChange: (k) => i == null ? void 0 : i(k.target.value), disabled: s, required: p, "aria-invalid": t ? !0 : void 0, "aria-describedby": [x, $].filter(Boolean).join(" ") || void 0 }),
+      f && /* @__PURE__ */ n(b, { "aria-hidden": "true", children: f })
+    ] }),
+    t && /* @__PURE__ */ n(E, { id: x, role: "alert", children: t }),
+    d && !t && /* @__PURE__ */ n(B, { id: $, children: d })
   ] });
 }
 export {
-  X as Carousel
+  R as Input
 };

package/dist/index.esm6.js

@@ -1,61 +1,29 @@
-import { jsxs as h, jsx as r } from "react/jsx-runtime";
-import { useId as p, useRef as x, useEffect as k } from "react";
-import { hiddenInput as m, labelText as w, wrapper as b, wrapperDisabled as j, box as v, boxIndeterminate as B, boxChecked as I } from "./index.esm19.js";
-function M({
-  checked: t = !1,
-  onChange: o,
-  label: l,
-  disabled: n = !1,
-  indeterminate: e = !1,
-  name: c,
-  id: s
-}) {
-  const d = p(), a = s != null ? s : d, i = x(null);
-  k(() => {
-    i.current && (i.current.indeterminate = e);
-  }, [e]);
-  const f = [
-    v,
-    t || e ? e ? B : I : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ h(
-    "label",
-    {
-      htmlFor: a,
-      className: [b, n ? j : ""].filter(Boolean).join(" "),
-      children: [
-        /* @__PURE__ */ r(
-          "input",
-          {
-            ref: i,
-            id: a,
-            name: c,
-            type: "checkbox",
-            className: m,
-            checked: t,
-            disabled: n,
-            onChange: (u) => o == null ? void 0 : o(u.target.checked),
-            "aria-checked": e ? "mixed" : t
-          }
-        ),
-        /* @__PURE__ */ h("span", { className: f, "aria-hidden": "true", children: [
-          e && /* @__PURE__ */ r("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "M1 1h8", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }) }),
-          t && !e && /* @__PURE__ */ r("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ r(
-            "path",
-            {
-              d: "M1 4l3 3 5-6",
-              stroke: "white",
-              strokeWidth: "1.8",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ) })
-        ] }),
-        l && /* @__PURE__ */ r("span", { className: w, children: l })
-      ]
-    }
-  );
+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 { 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;
+  border-radius:${o.radius.md};border:1.5px solid ${({ hasError: e }) => e ? o.color.danger : o.color.border};
+  background-color:${o.color.background};font-family:${o.font.body};font-size:15px;
+  color:${o.color.text};appearance:none;cursor:pointer;transition:border-color ${o.transition.fast};
+  &:focus{outline:none;border-color:${({ hasError: e }) => e ? o.color.danger : o.color.borderFocus};box-shadow:0 0 0 3px ${({ hasError: e }) => e ? o.color.dangerSubtle : o.color.brandSubtle};}
+  &:disabled{background-color:${o.color.surface};cursor:not-allowed;opacity:0.6;}
+`, k = n.span`position:absolute;right:${o.space.sm};pointer-events:none;color:${o.color.textMuted};display:flex;align-items:center;`, w = n.span`font-size:12px;color:${o.color.danger};`;
+function L({ options: e, value: b, onChange: l, label: s, placeholder: p, error: i, disabled: f = !1, name: x, id: d }) {
+  const h = m(), a = d != null ? d : h, u = i ? `${a}-error` : void 0;
+  return /* @__PURE__ */ c(g, { children: [
+    s && /* @__PURE__ */ r($, { htmlFor: a, children: s }),
+    /* @__PURE__ */ c(v, { children: [
+      /* @__PURE__ */ c(y, { id: a, name: x, hasError: !!i, value: b, onChange: (t) => l == null ? void 0 : l(t.target.value), disabled: f, "aria-invalid": i ? !0 : void 0, "aria-describedby": u, children: [
+        p && /* @__PURE__ */ r("option", { value: "", disabled: !0, children: p }),
+        e.map((t) => /* @__PURE__ */ r("option", { value: t.value, disabled: t.disabled, children: t.label }, t.value))
+      ] }),
+      /* @__PURE__ */ r(k, { "aria-hidden": "true", children: /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ r("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+    ] }),
+    i && /* @__PURE__ */ r(w, { id: u, role: "alert", children: i })
+  ] });
 }
 export {
-  M as Checkbox
+  L as Select
 };

package/dist/index.esm7.js

@@ -1,8 +1,32 @@
-import { jsx as i } from "react/jsx-runtime";
-import { containerRecipe as n } from "./index.esm22.js";
-function m({ maxWidth: r = "xl", children: o, as: e = "div" }) {
-  return /* @__PURE__ */ i(e, { className: n({ maxWidth: r }), children: o });
+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 { 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};
+  cursor: ${({ disabled: o }) => o ? "not-allowed" : "pointer"};
+  opacity: ${({ disabled: o }) => o ? 0.5 : 1};
+  font-family: ${t.font.body}; user-select: none;
+`, m = i.input`position:absolute;opacity:0;width:0;height:0;margin:0;`, $ = i.span`
+  width: 18px; height: 18px; border-radius: ${t.radius.sm};
+  border: 1.5px solid ${({ active: o }) => o ? t.color.brand : t.color.border};
+  background-color: ${({ active: o }) => o ? t.color.brand : t.color.background};
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  transition: background-color ${t.transition.fast}, border-color ${t.transition.fast};
+`, w = i.span`font-size: 15px; color: ${t.color.text};`;
+function B({ checked: o = !1, onChange: n, label: l, disabled: a = !1, indeterminate: r = !1, name: h, id: s }) {
+  const p = x(), d = s != null ? s : p, c = b(null);
+  return k(() => {
+    c.current && (c.current.indeterminate = r);
+  }, [r]), /* @__PURE__ */ f(g, { htmlFor: d, disabled: a, children: [
+    /* @__PURE__ */ e(m, { ref: c, id: d, name: h, type: "checkbox", checked: o, disabled: a, onChange: (u) => n == null ? void 0 : n(u.target.checked), "aria-checked": r ? "mixed" : o }),
+    /* @__PURE__ */ f($, { active: o || r, "aria-hidden": "true", children: [
+      r && /* @__PURE__ */ e("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "none", children: /* @__PURE__ */ e("path", { d: "M1 1h8", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }) }),
+      o && !r && /* @__PURE__ */ e("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", children: /* @__PURE__ */ e("path", { d: "M1 4l3 3 5-6", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    ] }),
+    l && /* @__PURE__ */ e(w, { children: l })
+  ] });
 }
 export {
-  m as Container
+  B as Checkbox
 };

package/dist/index.esm8.js

@@ -1,58 +1,37 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { useId as W } from "react";
-import { wrapper as w, label as B, requiredMark as k, iconSlot as h, input as y, errorText as D, hint as E, inputWrapper as F, inputWrapperError as M, inputWrapperDisabled as S } from "./index.esm18.js";
-function A({
-  label: n,
-  placeholder: N,
-  value: v,
-  onChange: s,
-  type: f = "text",
-  error: a,
-  hint: l,
-  disabled: d = !1,
-  required: c = !1,
-  leftIcon: p,
-  rightIcon: o,
-  name: x,
-  id: t
-}) {
-  const b = W(), i = t != null ? t : b, m = a ? `${i}-error` : void 0, u = l ? `${i}-hint` : void 0, j = [
-    F,
-    a ? M : "",
-    d ? S : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("div", { className: w, children: [
-    n && /* @__PURE__ */ r("label", { className: B, htmlFor: i, children: [
-      n,
-      c && /* @__PURE__ */ r("span", { className: k, "aria-hidden": "true", children: [
-        " ",
-        "*"
-      ] })
-    ] }),
-    /* @__PURE__ */ r("div", { className: j, children: [
-      p && /* @__PURE__ */ e("span", { className: h, "aria-hidden": "true", children: p }),
-      /* @__PURE__ */ e(
-        "input",
-        {
-          id: i,
-          name: x,
-          type: f,
-          className: y,
-          placeholder: N,
-          value: v,
-          onChange: (I) => s == null ? void 0 : s(I.target.value),
-          disabled: d,
-          required: c,
-          "aria-invalid": a ? !0 : void 0,
-          "aria-describedby": [m, u].filter(Boolean).join(" ") || void 0
-        }
-      ),
-      o && /* @__PURE__ */ e("span", { className: h, "aria-hidden": "true", children: o })
-    ] }),
-    a && /* @__PURE__ */ e("span", { id: m, className: D, role: "alert", children: a }),
-    l && !a && /* @__PURE__ */ e("span", { id: u, className: E, children: l })
-  ] });
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import e from "@emotion/styled";
+import { tokens as o } from "@danielcruzcode/design-tokens";
+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};
+  overflow:hidden;position:relative;
+  transition:box-shadow ${o.transition.normal},transform ${o.transition.normal};
+  max-width:15rem;height:27rem;padding:${({ padding: r }) => v[r]};
+  ${({ hoverable: r }) => r && `cursor:pointer;&:hover{box-shadow:${o.shadow.sm};transform:translateY(-2px);}`}
+`, x = e.div`width:100%;overflow:hidden;`, $ = e.div`padding:${o.space.sm} ${o.space.md};`, b = e.div`padding:0 ${o.space.md};flex:1;`, g = e.div`padding:${o.space.md};border-top:1px solid ${o.color.border};margin-top:auto;`;
+function j({ media: r, header: i, body: s, footer: l, onClick: d, hoverable: c = !1, className: p, padding: m = "none" }) {
+  const n = !!d;
+  return /* @__PURE__ */ h(
+    f,
+    {
+      hoverable: c || n,
+      padding: m,
+      className: p,
+      onClick: d,
+      role: n ? "button" : void 0,
+      tabIndex: n ? 0 : void 0,
+      onKeyDown: n ? (t) => {
+        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), d == null || d());
+      } : void 0,
+      children: [
+        r && /* @__PURE__ */ a(x, { children: r }),
+        i && /* @__PURE__ */ a($, { children: i }),
+        s && /* @__PURE__ */ a(b, { children: s }),
+        l && /* @__PURE__ */ a(g, { children: l })
+      ]
+    }
+  );
 }
 export {
-  A as Input
+  j as Card
 };