@tpc-mare/mare-ui-components-react 1.0.2 → 1.0.3-beta.0

package/dist/shared/{Paginator-QTDpAJ-N.js → Paginator-BRQx1GRQ.js}

@@ -1,59 +1,58 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { useRef as P, useState as R, useEffect as k } from "react";
+"use client";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useRef as P, useState as w, useEffect as R } from "react";
 import { Pagination as c } from "@ark-ui/react/pagination";
-import { B as h } from "./Button-C2ULmKj3.js";
-import { S as N } from "./SelectField-CcnbnPEi.js";
-import { c as b } from "./createReactComponent-Cb6Pzf10.js";
-import { I as M, a as j } from "./IconChevronRight-DEIDRsvg.js";
-const I = [["path", { d: "M11 7l-5 5l5 5", key: "svg-0" }], ["path", { d: "M17 7l-5 5l5 5", key: "svg-1" }]], W = b("outline", "chevrons-left", "ChevronsLeft", I);
-const O = [["path", { d: "M7 7l5 5l-5 5", key: "svg-0" }], ["path", { d: "M13 7l5 5l-5 5", key: "svg-1" }]], T = b("outline", "chevrons-right", "ChevronsRight", O), _ = (a) => `
+import { B as h } from "./Button-BqFuDnSs.js";
+import { S as j } from "./SelectField-BAuctVIF.js";
+import { IconChevronsLeft as N, IconChevronLeft as k, IconChevronRight as W, IconChevronsRight as I } from "@tabler/icons-react";
+const O = (a) => `
 	mare:w-full mare:flex mare:flex-wrap mare:items-center mare:gap-2
 	${a ? "mare:justify-between" : "mare:justify-center"}
-`, q = "mare:flex mare:items-center mare:gap-2 mare:min-w-50", A = "mare:text-default mare:tpc-typography-body-s", B = "mare:max-w-20", E = "mare:flex mare:items-center mare:justify-center mare:gap-2 mare:min-w-3xs", L = "mare:flex mare:items-center mare:justify-center mare:gap-2", V = `
+`, T = "mare:flex mare:items-center mare:gap-2 mare:min-w-50", M = "mare:text-default mare:tpc-typography-body-s", q = "mare:max-w-20", A = "mare:flex mare:items-center mare:justify-center mare:gap-2 mare:min-w-3xs", B = "mare:flex mare:items-center mare:justify-center mare:gap-2", E = `
 	mare:shrink-0 mare:size-10 mare:flex mare:items-center mare:justify-center mare:truncate
 	mare:rounded-full mare:tpc-typography-label-s mare:text-default mare:cursor-pointer
 	mare:bg-transparent mare:border-none mare:hover:bg-hover
 	mare:ark-selected:bg-accent-weak! mare:ark-selected:text-accent! mare:ark-selected:hover:bg-accent-weak!
-`, C = (a, n) => {
-  let s = (a + 2) * 40 + (a + 1) * 8;
-  return n && (s += 96), s;
-}, $ = ({
+`, b = (a, n) => {
+  let i = (a + 2) * 40 + (a + 1) * 8;
+  return n && (i += 96), i;
+}, V = ({
   requestedPageLinkSize: a,
   containerWidth: n,
-  rowsPerPageWidth: s,
+  rowsPerPageWidth: i,
   showFirstLastLinks: o
 }) => {
   if (!n) return a;
-  let i = a, l = C(i, o) + s;
-  for (; l > n && i > 1; )
-    i -= 1, l = C(i, o) + s;
-  return i;
-}, D = (a, n, s) => {
+  let s = a, l = b(s, o) + i;
+  for (; l > n && s > 1; )
+    s -= 1, l = b(s, o) + i;
+  return s;
+}, L = (a, n, i) => {
   if (n <= 0) return [];
-  const o = Math.min(s, n), i = Math.max(1, Math.min(a - Math.floor((o - 1) / 2), n - o + 1));
-  return Array.from({ length: o }, (l, g) => i + g);
+  const o = Math.min(i, n), s = Math.max(1, Math.min(a - Math.floor((o - 1) / 2), n - o + 1));
+  return Array.from({ length: o }, (l, g) => s + g);
 };
-function X({
+function J({
   count: a,
   page: n,
-  defaultPage: s,
+  defaultPage: i,
   onPageChange: o,
-  pageSize: i,
+  pageSize: s,
   defaultPageSize: l,
   onPageSizeChange: g,
-  pageLinkSize: d = 5,
+  pageLinkSize: u = 5,
   showFirstLastLinks: m = !0,
   rowsPerPageOptions: f,
-  rowsPerPageOptionsLabel: S = "Rows per page"
+  rowsPerPageOptionsLabel: C = "Rows per page"
 }) {
-  const p = !!f?.length, v = P(null), y = P(null), [z, w] = R(d);
-  return k(() => {
+  const p = !!f?.length, v = P(null), y = P(null), [S, z] = w(u);
+  return R(() => {
     const r = v.current;
     if (!r) return;
     const t = () => {
-      w(
-        $({
-          requestedPageLinkSize: d,
+      z(
+        V({
+          requestedPageLinkSize: u,
           containerWidth: r.clientWidth,
           rowsPerPageWidth: y.current?.clientWidth ?? 0,
           showFirstLastLinks: m
@@ -65,28 +64,28 @@ function X({
     return x.observe(r), () => {
       x.disconnect();
     };
-  }, [d, m]), /* @__PURE__ */ u(
+  }, [u, m]), /* @__PURE__ */ d(
     c.Root,
     {
       ref: v,
-      className: _(p),
+      className: O(p),
       count: a,
       page: n,
-      defaultPage: s,
-      pageSize: i,
+      defaultPage: i,
+      pageSize: s,
       defaultPageSize: l,
       onPageChange: (r) => o?.(r.page),
       onPageSizeChange: (r) => g?.(r.pageSize),
       children: [
-        p && /* @__PURE__ */ u(
+        p && /* @__PURE__ */ d(
           "div",
           {
             ref: y,
-            className: q,
+            className: T,
             children: [
-              /* @__PURE__ */ e("span", { className: A, children: S }),
-              /* @__PURE__ */ e("span", { className: B, children: /* @__PURE__ */ e(c.Context, { children: (r) => /* @__PURE__ */ e(
-                N,
+              /* @__PURE__ */ e("span", { className: M, children: C }),
+              /* @__PURE__ */ e("span", { className: q, children: /* @__PURE__ */ e(c.Context, { children: (r) => /* @__PURE__ */ e(
+                j,
                 {
                   value: String(r.pageSize),
                   onValueChange: (t) => {
@@ -105,14 +104,14 @@ function X({
             ]
           }
         ),
-        /* @__PURE__ */ u("div", { className: E, children: [
+        /* @__PURE__ */ d("div", { className: A, children: [
           m && /* @__PURE__ */ e(c.FirstTrigger, { asChild: !0, children: /* @__PURE__ */ e(
             h,
             {
               severity: "ghost",
               size: "small",
               iconOnly: !0,
-              icon: /* @__PURE__ */ e(W, {})
+              icon: /* @__PURE__ */ e(N, {})
             }
           ) }),
           /* @__PURE__ */ e(c.PrevTrigger, { asChild: !0, children: /* @__PURE__ */ e(
@@ -121,19 +120,19 @@ function X({
               severity: "ghost",
               size: "small",
               iconOnly: !0,
-              icon: /* @__PURE__ */ e(M, {})
+              icon: /* @__PURE__ */ e(k, {})
             }
           ) }),
-          /* @__PURE__ */ e("div", { className: L, children: /* @__PURE__ */ e(c.Context, { children: (r) => D(
+          /* @__PURE__ */ e("div", { className: B, children: /* @__PURE__ */ e(c.Context, { children: (r) => L(
             r.page,
             r.totalPages,
-            z
+            S
           ).map((t) => /* @__PURE__ */ e(
             c.Item,
             {
               type: "page",
               value: t,
-              className: V,
+              className: E,
               children: t
             },
             t
@@ -144,7 +143,7 @@ function X({
               severity: "ghost",
               size: "small",
               iconOnly: !0,
-              icon: /* @__PURE__ */ e(j, {})
+              icon: /* @__PURE__ */ e(W, {})
             }
           ) }),
           m && /* @__PURE__ */ e(c.LastTrigger, { asChild: !0, children: /* @__PURE__ */ e(
@@ -153,7 +152,7 @@ function X({
               severity: "ghost",
               size: "small",
               iconOnly: !0,
-              icon: /* @__PURE__ */ e(T, {})
+              icon: /* @__PURE__ */ e(I, {})
             }
           ) })
         ] })
@@ -162,5 +161,5 @@ function X({
   );
 }
 export {
-  X as P
+  J as P
 };

package/dist/shared/{PanelMenu-BpjNM7O_.js → PanelMenu-Dw-K6H2C.js}

@@ -1,7 +1,8 @@
+"use client";
 import { jsx as a, jsxs as s, Fragment as u } from "react/jsx-runtime";
 import { useMemo as x } from "react";
 import { createTreeCollection as f, TreeView as n } from "@ark-ui/react/tree-view";
-import { I as b } from "./IconChevronDown-ev2ML7Ex.js";
+import { IconChevronDown as b } from "@tabler/icons-react";
 const g = "mare:flex mare:flex-col mare:gap-1", v = "mare:flex mare:flex-col mare:gap-1", k = `
 	mare:group mare:flex mare:items-center mare:gap-2 mare:min-h-10 mare:px-3 mare:py-2
 	mare:rounded-menu-item mare:cursor-pointer mare:select-none mare:outline-none
@@ -44,9 +45,15 @@ function p({
         children: /* @__PURE__ */ s(n.Branch, { className: v, children: [
           /* @__PURE__ */ s(n.BranchControl, { className: k, children: [
             /* @__PURE__ */ a(n.BranchText, { className: N, children: i(e, m) }),
-            /* @__PURE__ */ a(n.BranchIndicator, { className: y, children: /* @__PURE__ */ a(b, { size: "1em" }) })
+            /* @__PURE__ */ a(
+              n.BranchIndicator,
+              {
+                className: y,
+                children: /* @__PURE__ */ a(b, { size: "1em" })
+              }
+            )
           ] }),
-          /* @__PURE__ */ a(n.BranchContent, { className: C, children: e.items.map((o, r) => /* @__PURE__ */ a(
+          /* @__PURE__ */ a(n.BranchContent, { className: C, children: (e.items ?? []).map((o, r) => /* @__PURE__ */ a(
             p,
             {
               node: o,
@@ -83,7 +90,10 @@ function p({
   );
 }
 function V({
-  items: e,
+  /* Default a [] aunque el tipo diga que es requerido: `items={data}`
+   * con data de un fetch sin resolver llega `undefined` en el primer
+   * render y el .map() de abajo tiraba pantalla blanca. */
+  items: e = [],
   expandedValue: t,
   defaultExpandedValue: m,
   onExpandedChange: l,

package/dist/shared/Password-BWNvygrO.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsxs as r, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { forwardRef as D } from "react";
+import { PasswordInput as l } from "@ark-ui/react/password-input";
+import { useFieldContext as O } from "@ark-ui/react/field";
+import { IconEye as T, IconEyeOff as W } from "@tabler/icons-react";
+import { m as q } from "./InputText.types-KhlkzHMw-BtRY371_.js";
+import { u as B, m as G, d as H, f as J } from "./field-layout-o6bDLvVU.js";
+import { o as K } from "./index-ByQ37VXf.js";
+import { u as Q } from "./useControllableValue-DhckT_e1.js";
+const U = "mare:relative mare:w-full mare:group", X = "mare:relative mare:w-full", Y = `
+	mare:hidden mare:group-focus-within:flex mare:flex-col mare:gap-2
+	mare:absolute mare:top-full mare:left-0 mare:mt-2 mare:z-50 mare:w-full
+	mare:p-4 mare:rounded-input mare:border mare:border-default mare:bg-raised
+	mare:shadow-[0_2px_6px_0_rgba(0,0,0,0.16)]
+`, M = "mare:tpc-typography-label-s mare:text-default", ee = "mare:border-t mare:border-default", ae = "mare:flex mare:flex-col mare:gap-2", re = "mare:h-1 mare:w-full mare:bg-neutral-weak mare:rounded-md mare:overflow-hidden", le = {
+  weak: "mare:w-1/3 mare:bg-danger",
+  medium: "mare:w-2/3 mare:bg-warning",
+  strong: "mare:w-full mare:bg-positive"
+}, me = (a) => `mare:h-full mare:rounded-md mare:transition-[width] mare:duration-500 mare:ease-in-out ${a ? le[a] : "mare:w-0"}`, se = "mare:tpc-typography-body-s mare:text-default", te = "mare:flex mare:flex-col mare:gap-1 mare:my-0 mare:pl-0 mare:list-none", oe = "mare:tpc-typography-body-s mare:text-default", ie = "^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})", ne = "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})", de = (a, s = ie, t = ne) => a ? new RegExp(t).test(a) ? "strong" : new RegExp(s).test(a) ? "medium" : "weak" : null, xe = D(
+  function({
+    value: s,
+    defaultValue: t = "",
+    onValueChange: g,
+    size: b = "medium",
+    rounded: w = !1,
+    invalid: v = !1,
+    disabled: x = !1,
+    toggleMask: o = !0,
+    showIcon: y = /* @__PURE__ */ e(T, {}),
+    hideIcon: N = /* @__PURE__ */ e(W, {}),
+    feedback: n = !0,
+    header: d,
+    footer: c,
+    promptLabel: I = "Please enter a password",
+    weakLabel: F = "Weak",
+    mediumLabel: P = "Medium",
+    strongLabel: S = "Strong",
+    mediumRegex: z,
+    strongRegex: C,
+    ...u
+  }, E) {
+    const [f, L] = Q(
+      s,
+      t,
+      g
+    ), m = B(), p = O(), _ = K(b, q, "medium"), $ = v || (p?.invalid ?? !1), h = x || (p?.disabled ?? !1), R = o ? G(m?.iconSide ?? null, "right") : m?.iconSide ?? null, k = H({
+      size: _,
+      rounded: w,
+      hasFloatLabel: m?.hasFloatLabel ?? !1,
+      iconSide: R
+    }), A = m?.hasFloatLabel ? " " : u.placeholder, i = n ? de(f, z, C) : null, V = i ? { weak: F, medium: P, strong: S }[i] : I;
+    return /* @__PURE__ */ r(
+      l.Root,
+      {
+        className: U,
+        invalid: $,
+        disabled: h,
+        visible: o ? void 0 : !1,
+        children: [
+          /* @__PURE__ */ r(l.Control, { className: X, children: [
+            /* @__PURE__ */ e(
+              l.Input,
+              {
+                ref: E,
+                ...u,
+                placeholder: A,
+                value: f,
+                onChange: (Z) => {
+                  L(Z.target.value);
+                },
+                className: k
+              }
+            ),
+            o && /* @__PURE__ */ e(
+              l.VisibilityTrigger,
+              {
+                className: J("right", {
+                  disabled: h,
+                  interactive: !0
+                }),
+                children: /* @__PURE__ */ e(l.Indicator, { fallback: y, children: N })
+              }
+            )
+          ] }),
+          n && /* @__PURE__ */ r("div", { className: Y, children: [
+            d && /* @__PURE__ */ e("div", { className: M, children: d }),
+            /* @__PURE__ */ r("div", { className: ae, children: [
+              /* @__PURE__ */ e("div", { className: re, children: /* @__PURE__ */ e(
+                "div",
+                {
+                  className: me(i)
+                }
+              ) }),
+              /* @__PURE__ */ e("span", { className: se, children: V })
+            ] }),
+            c && /* @__PURE__ */ r(j, { children: [
+              /* @__PURE__ */ e("div", { className: ee }),
+              /* @__PURE__ */ e("ul", { className: te, children: c })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+function ye({ children: a }) {
+  return /* @__PURE__ */ e("li", { className: oe, children: a });
+}
+export {
+  xe as P,
+  ye as a
+};

package/dist/shared/RadioGroup-CHgzVvZO.js

@@ -0,0 +1,145 @@
+import { jsx as e, jsxs as v } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { RadioGroup as r } from "@ark-ui/react/radio-group";
+import { o as m } from "./index-ByQ37VXf.js";
+const w = ["small", "medium", "large"], y = ["horizontal", "vertical"], R = `
+	mare:flex mare:gap-4
+	mare:ark-vertical:flex-col
+	mare:ark-horizontal:flex-row
+	mare:ark-disabled:cursor-default
+`, N = `
+	mare:relative mare:inline-flex mare:items-center mare:gap-2
+	mare:select-none mare:cursor-pointer
+	mare:ark-disabled:cursor-default
+	mare:data-size-small:gap-1.5
+	mare:data-size-medium:gap-2
+	mare:data-size-large:gap-2.5
+`, I = `
+	mare:relative mare:inline-flex mare:items-center mare:justify-center mare:shrink-0
+	mare:rounded-full mare:border mare:border-strong mare:bg-transparent
+	mare:shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+	mare:transition-[border-width,border-color] mare:duration-200
+	mare:overflow-hidden
+
+	mare:data-size-small:w-4.5 mare:data-size-small:h-4.5
+	mare:data-size-medium:w-6 mare:data-size-medium:h-6
+	mare:data-size-large:w-8 mare:data-size-large:h-8
+
+	mare:not-ark-disabled:hover:border-accent
+
+	mare:ark-checked:border-accent
+	mare:data-size-small:ark-checked:border-[6px]
+	mare:data-size-medium:ark-checked:border-[8px]
+	mare:data-size-large:ark-checked:border-[11px]
+	mare:not-ark-disabled:ark-checked:hover:border-accent-hover
+
+	mare:ark-disabled:border-disabled!
+
+	mare:ark-invalid:border-danger!
+`, G = `
+	mare:invisible mare:rounded-full mare:bg-[var(--color-fg-on-accent)]
+
+	mare:data-size-small:w-2 mare:data-size-small:h-2
+	mare:data-size-medium:w-2.5 mare:data-size-medium:h-2.5
+	mare:data-size-large:w-3 mare:data-size-large:h-3
+
+	mare:ark-checked:visible
+	mare:ark-disabled:ark-checked:bg-disabled!
+	mare:ark-invalid:ark-checked:bg-[var(--color-fg-on-danger)]!
+`, _ = `
+	mare:text-default
+	mare:data-size-small:tpc-typography-body-s
+	mare:data-size-medium:tpc-typography-body-m
+	mare:data-size-large:tpc-typography-body-l
+	mare:ark-disabled:text-disabled
+`, j = `
+	mare:sr-only
+`, V = x(
+  function({
+    /* Default a [] aunque el tipo diga que es requerido: `items={data}`
+     * con data de un fetch sin resolver llega `undefined` en el primer
+     * render y el .map() de abajo tiraba pantalla blanca. */
+    items: l = [],
+    value: i,
+    defaultValue: s,
+    onValueChange: t,
+    size: o = "small",
+    orientation: c = "vertical",
+    disabled: n = !1,
+    invalid: b = !1,
+    readOnly: p = !1,
+    required: u = !1,
+    name: h,
+    form: f,
+    id: k
+  }, z) {
+    const d = m(o, w, "small"), g = m(
+      c,
+      y,
+      "vertical"
+    );
+    return /* @__PURE__ */ e(
+      r.Root,
+      {
+        ref: z,
+        value: i,
+        defaultValue: s,
+        onValueChange: (a) => {
+          a.value && t?.(a.value);
+        },
+        orientation: g,
+        disabled: n,
+        invalid: b,
+        readOnly: p,
+        required: u,
+        name: h,
+        form: f,
+        id: k,
+        className: R,
+        children: l.map((a) => /* @__PURE__ */ v(
+          r.Item,
+          {
+            value: a.value,
+            disabled: a.disabled,
+            className: N,
+            "data-size": d,
+            children: [
+              /* @__PURE__ */ e(
+                r.ItemControl,
+                {
+                  className: I,
+                  "data-size": d,
+                  children: /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: G,
+                      "data-size": d
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ e(
+                r.ItemText,
+                {
+                  className: _,
+                  "data-size": d,
+                  children: a.label
+                }
+              ),
+              /* @__PURE__ */ e(
+                r.ItemHiddenInput,
+                {
+                  className: j
+                }
+              )
+            ]
+          },
+          a.value
+        ))
+      }
+    );
+  }
+);
+export {
+  V as R
+};

package/dist/shared/SearchField-Cuw3MVaD.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { a as L, I as t } from "./IconField-Bp2H10B1.js";
+import { P } from "./ProgressSpinner-B-lrS-tu.js";
+import { IconSearch as R, IconX as V } from "@tabler/icons-react";
+import { forwardRef as j } from "react";
+import { u as k } from "./useControllableValue-DhckT_e1.js";
+const w = (e) => !!e.value && e.clearable, z = (e) => e.loading && !e.disabled, y = j(
+  function({
+    value: h,
+    defaultValue: d = "",
+    onValueChange: i,
+    loading: l = !1,
+    clearable: s = !1,
+    disabled: n = !1,
+    leftIcon: a = /* @__PURE__ */ o(R, {}),
+    clearIcon: C = /* @__PURE__ */ o(V, {}),
+    rightIcon: r,
+    onClear: S,
+    ...v
+  }, I) {
+    const [c, g] = k(
+      h,
+      d,
+      i
+    ), u = w({ value: c, clearable: s }), f = z({ loading: l, disabled: n }), x = !!r || s || l, m = /* @__PURE__ */ o(
+      L,
+      {
+        ref: I,
+        ...v,
+        value: c,
+        onValueChange: g,
+        disabled: n,
+        rounded: !0
+      }
+    );
+    if (!x)
+      return /* @__PURE__ */ o(
+        t,
+        {
+          icon: a,
+          position: "left",
+          disabled: n,
+          children: m
+        }
+      );
+    const F = r ?? (f ? /* @__PURE__ */ o(P, { className: "mare:size-5" }) : null) ?? (u ? C : null), p = !r && !f && u;
+    return /* @__PURE__ */ o(
+      t,
+      {
+        icon: a,
+        position: "left",
+        disabled: n,
+        children: /* @__PURE__ */ o(
+          t,
+          {
+            icon: F,
+            position: "right",
+            disabled: n,
+            onIconClick: p ? () => {
+              i?.(""), S?.();
+            } : void 0,
+            iconLabel: p ? "Clear" : void 0,
+            children: m
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  y as S
+};

package/dist/shared/{SegmentedControl-BfE3jNM6.js → SegmentedControl-D3znmx9l.js}

@@ -32,7 +32,10 @@ const S = ["small", "medium"], w = `
     mare:transition-colors mare:duration-200 mare:h-full
 `, N = "mare:px-0.5", j = "mare:sr-only";
 function H({
-  items: r,
+  /* Default a [] aunque el tipo diga que es requerido: `items={data}`
+   * con data de un fetch sin resolver llega `undefined` en el primer
+   * render y el .map() de abajo tiraba pantalla blanca. */
+  items: r = [],
   value: o,
   defaultValue: n,
   onValueChange: s,