@tpc-mare/mare-ui-components-react 0.1.11 → 0.1.13

package/dist/shared/{Combobox-oSS0Rlbv.js → Combobox-SkrEe5He.js}

@@ -1,31 +1,34 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import { useState as T, useMemo as b } from "react";
-import { createListCollection as V, ComboboxRoot as _, ComboboxLabel as j, ComboboxControl as $, ComboboxTrigger as q, ComboboxClearTrigger as D, ComboboxPositioner as E, ComboboxContent as M, ComboboxInput as O, ComboboxEmpty as P, ComboboxItem as Q, ComboboxItemText as R, ComboboxItemIndicator as z } from "@ark-ui/react/combobox";
-import { c as A, a as B, S as F, b as G } from "./icons-BFOFrum4.js";
-const H = {
+import { createListCollection as V, ComboboxRoot as _, ComboboxLabel as j, ComboboxControl as z, ComboboxTrigger as $, ComboboxClearTrigger as q, ComboboxPositioner as D, ComboboxContent as E, ComboboxInput as M, ComboboxEmpty as O, ComboboxItem as P, ComboboxItemText as Q, ComboboxItemIndicator as R } from "@ark-ui/react/combobox";
+import { I as X } from "./IconX-CpPADKjZ.js";
+import { I as A } from "./IconChevronDown-ev2ML7Ex.js";
+import { I as B } from "./IconSearch-CgM6jEUh.js";
+import { I as F } from "./IconCheck-DzZA6b2U.js";
+const G = {
   small: "mare:h-10",
   medium: "mare:h-12"
 }, f = {
   small: "mare:tpc-typography-body-s",
   medium: "mare:tpc-typography-body-m"
-}, J = (r) => `
+}, H = (r) => `
 	mare:relative mare:flex mare:items-center mare:gap-2
-	${H[r]}
+	${G[r]}
 	mare:px-3 mare:rounded-input mare:border mare:border-strong mare:bg-default
 	mare:focus-within:outline-solid mare:focus-within:outline-2 mare:focus-within:outline-accent mare:focus-within:-outline-offset-2
 	mare:ark-disabled:text-disabled mare:ark-disabled:border-disabled-default mare:ark-disabled:cursor-not-allowed
 	mare:data-[invalid]:outline-solid mare:data-[invalid]:outline-2 mare:data-[invalid]:outline-danger mare:data-[invalid]:-outline-offset-2
-`, p = "mare:flex mare:items-center mare:shrink-0 mare:text-weak mare:[&>svg]:size-5", K = (r) => `
+`, p = "mare:flex mare:items-center mare:shrink-0 mare:text-weak mare:[&>svg]:size-5", J = (r) => `
 	mare:flex-auto mare:flex mare:items-center mare:cursor-pointer
 	mare:bg-transparent mare:text-left mare:truncate mare:text-default ${f[r]}
-`, U = `
+`, K = `
 	mare:flex mare:items-center mare:gap-2 mare:mb-1 mare:px-3 mare:h-10
 	mare:rounded-input mare:border mare:border-strong mare:bg-default
 	mare:focus-within:outline-solid mare:focus-within:outline-2 mare:focus-within:outline-accent mare:focus-within:-outline-offset-2
-`, W = (r) => `
+`, U = (r) => `
 	mare:flex-auto mare:bg-transparent mare:outline-none mare:text-default
 	mare:placeholder:text-weak ${f[r]}
-`, X = "mare:flex mare:items-center mare:shrink-0 mare:text-base mare:cursor-pointer mare:text-default mare:hover:text-weak", Y = "mare:flex mare:items-center mare:shrink-0 mare:text-lg mare:transition-transform mare:ark-open:rotate-180 mare:text-default", Z = `
+`, W = "mare:flex mare:items-center mare:shrink-0 mare:text-base mare:cursor-pointer mare:text-default mare:hover:text-weak", Y = "mare:flex mare:items-center mare:shrink-0 mare:text-lg mare:transition-transform mare:ark-open:rotate-180 mare:text-default", Z = `
 	mare:flex mare:flex-col mare:gap-0.5 mare:p-1
 	mare:rounded-input mare:border mare:border-default mare:bg-raised
 	mare:shadow-[0_2px_6px_0_rgba(0,0,0,0.16)]
@@ -39,29 +42,29 @@ const H = {
 	mare:ark-highlighted:bg-hover
 	mare:ark-selected:bg-accent-weak mare:ark-selected:text-accent
 	mare:ark-disabled:text-disabled mare:ark-disabled:cursor-not-allowed
-`, ae = "mare:flex mare:items-center mare:text-accent", re = "mare:py-2 mare:px-3 mare:tpc-typography-body-s mare:text-weak", te = "mare:tpc-typography-label-s mare:text-weak mare:mb-1.5 mare:block";
-function ie({
+`, ae = "mare:flex mare:items-center mare:text-accent", re = "mare:py-2 mare:px-3 mare:tpc-typography-body-s mare:text-weak", me = "mare:tpc-typography-label-s mare:text-weak mare:mb-1.5 mare:block";
+function de({
   value: r = null,
   onValueChange: h,
-  options: m,
+  options: t,
   placeholder: x = "Select…",
   searchPlaceholder: g = "",
   size: o = "small",
-  disabled: C = !1,
-  invalid: w = !1,
+  disabled: w = !1,
+  invalid: C = !1,
   clearable: k = !1,
   emptyText: y = "Sin resultados",
   label: i,
   leadingIcon: s,
   triggerIcon: v,
-  checkIcon: N,
-  clearIcon: I,
+  checkIcon: I,
+  clearIcon: N,
   renderOption: c
 }) {
   const [l, d] = T(""), n = b(() => {
     const e = l.trim().toLowerCase();
-    return e ? m.filter((L) => L.label.toLowerCase().includes(e)) : m;
-  }, [l, m]), S = b(
+    return e ? t.filter((S) => S.label.toLowerCase().includes(e)) : t;
+  }, [l, t]), L = b(
     () => V({
       items: n,
       itemToValue: (e) => e.value,
@@ -69,14 +72,14 @@ function ie({
       isItemDisabled: (e) => !!e.disabled
     }),
     [n]
-  ), u = m.find((e) => e.value === r)?.label ?? null;
-  return /* @__PURE__ */ t(
+  ), u = t.find((e) => e.value === r)?.label ?? null;
+  return /* @__PURE__ */ m(
     _,
     {
-      collection: S,
+      collection: L,
       value: r == null ? [] : [r],
-      disabled: C,
-      invalid: w,
+      disabled: w,
+      invalid: C,
       openOnClick: !0,
       inputValue: l,
       onValueChange: (e) => h?.(e.value[0] ?? null),
@@ -87,37 +90,37 @@ function ie({
         e.open || d("");
       },
       children: [
-        i && /* @__PURE__ */ a(j, { className: te, children: i }),
-        /* @__PURE__ */ t($, { className: J(o), children: [
+        i && /* @__PURE__ */ a(j, { className: me, children: i }),
+        /* @__PURE__ */ m(z, { className: H(o), children: [
           s && /* @__PURE__ */ a("span", { className: p, children: s }),
-          /* @__PURE__ */ a(q, { className: K(o), children: u ? /* @__PURE__ */ a("span", { children: u }) : /* @__PURE__ */ a("span", { className: "mare:text-weak", children: x }) }),
-          k && /* @__PURE__ */ a(D, { className: X, children: I ?? /* @__PURE__ */ a(A, {}) }),
-          /* @__PURE__ */ a("span", { className: Y, children: v ?? /* @__PURE__ */ a(B, {}) })
+          /* @__PURE__ */ a($, { className: J(o), children: u ? /* @__PURE__ */ a("span", { children: u }) : /* @__PURE__ */ a("span", { className: "mare:text-weak", children: x }) }),
+          k && /* @__PURE__ */ a(q, { className: W, children: N ?? /* @__PURE__ */ a(X, { size: "1em" }) }),
+          /* @__PURE__ */ a("span", { className: Y, children: v ?? /* @__PURE__ */ a(A, { size: "1em" }) })
         ] }),
-        /* @__PURE__ */ a(E, { children: /* @__PURE__ */ t(M, { className: Z, children: [
-          /* @__PURE__ */ t("div", { className: U, children: [
+        /* @__PURE__ */ a(D, { children: /* @__PURE__ */ m(E, { className: Z, children: [
+          /* @__PURE__ */ m("div", { className: K, children: [
             /* @__PURE__ */ a(
-              O,
+              M,
               {
                 placeholder: g,
-                className: W(o)
+                className: U(o)
               }
             ),
-            /* @__PURE__ */ a("span", { className: p, children: /* @__PURE__ */ a(F, {}) })
+            /* @__PURE__ */ a("span", { className: p, children: /* @__PURE__ */ a(B, {}) })
           ] }),
-          /* @__PURE__ */ a(P, { className: re, children: y }),
-          n.map((e) => /* @__PURE__ */ t(
-            Q,
+          /* @__PURE__ */ a(O, { className: re, children: y }),
+          n.map((e) => /* @__PURE__ */ m(
+            P,
             {
               item: e,
               className: ee,
               children: [
-                /* @__PURE__ */ a(R, { children: c ? c(e) : e.label }),
+                /* @__PURE__ */ a(Q, { children: c ? c(e) : e.label }),
                 /* @__PURE__ */ a(
-                  z,
+                  R,
                   {
                     className: ae,
-                    children: N ?? /* @__PURE__ */ a(G, {})
+                    children: I ?? /* @__PURE__ */ a(F, { size: "1em" })
                   }
                 )
               ]
@@ -130,5 +133,5 @@ function ie({
   );
 }
 export {
-  ie as C
+  de as C
 };

package/dist/shared/Counter-D4Al7Yme.js

@@ -0,0 +1,94 @@
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { NumberInput as t } from "@ark-ui/react/number-input";
+import { B as i } from "./Button-AfMqNCme.js";
+import { I as x } from "./IconMinus-fS_GL0Et.js";
+import { c as I } from "./createReactComponent-Cb6Pzf10.js";
+const v = [["path", { d: "M12 5l0 14", key: "svg-0" }], ["path", { d: "M5 12l14 0", key: "svg-1" }]], C = I("outline", "plus", "Plus", v), N = {
+  small: "mare:w-28",
+  medium: "mare:w-32",
+  large: "mare:w-43"
+}, k = (e, a) => `
+	mare:inline-flex mare:items-center
+	${N[e]}
+	${a === "expandable" ? "mare:h-12 mare:rounded-full mare:border mare:border-default" : ""}
+`, w = {
+  small: "mare:tpc-typography-body-m",
+  medium: "mare:tpc-typography-body-m",
+  large: "mare:tpc-typography-body-l"
+}, M = (e) => `
+	mare:w-full mare:text-center
+	mare:text-default mare:disabled:text-disabled
+	mare:outline-none mare:caret-transparent
+	${w[e]}
+`, O = (e) => e === "default" ? "secondary" : "ghost", S = {
+  small: "xsmall",
+  medium: "small",
+  large: "medium"
+}, $ = (e) => S[e];
+function T({
+  value: e = null,
+  onValueChange: a,
+  size: l = "small",
+  variant: m = "default",
+  disabled: n = !1,
+  disabledIncrement: c = !1,
+  disabledDecrement: d = !1,
+  step: p = 1,
+  id: y,
+  name: f,
+  min: g,
+  max: b
+}) {
+  const o = O(m), s = $(l);
+  return /* @__PURE__ */ h(
+    t.Root,
+    {
+      value: e == null ? "" : String(e),
+      min: g,
+      max: b,
+      step: p,
+      disabled: n,
+      name: f,
+      className: k(l, m),
+      onValueChange: (u) => a?.(
+        u.value === "" ? null : u.valueAsNumber
+      ),
+      children: [
+        /* @__PURE__ */ r(t.DecrementTrigger, { asChild: !0, children: /* @__PURE__ */ r(
+          i,
+          {
+            severity: o,
+            size: s,
+            iconOnly: !0,
+            icon: /* @__PURE__ */ r(x, { stroke: 1.5 }),
+            disabled: n || d,
+            "aria-label": "Decrement"
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          t.Input,
+          {
+            id: y,
+            className: M(l),
+            readOnly: !0,
+            inputMode: "none"
+          }
+        ),
+        /* @__PURE__ */ r(t.IncrementTrigger, { asChild: !0, children: /* @__PURE__ */ r(
+          i,
+          {
+            severity: o,
+            size: s,
+            iconOnly: !0,
+            icon: /* @__PURE__ */ r(C, { stroke: 1.5 }),
+            disabled: n || c,
+            "aria-label": "Increment"
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  T as C
+};