@tpc-mare/mare-ui-components-react 0.1.21 → 0.1.23

package/dist/shared/FilterChipDropdownMultiple-D2eMYXyS.js

@@ -0,0 +1,162 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as N, useMemo as x } from "react";
+import { createListCollection as I, SelectRoot as D, SelectControl as z, SelectTrigger as _, SelectPositioner as j, SelectContent as O, SelectItem as q, SelectItemText as E } from "@ark-ui/react/select";
+import { C as g } from "./Checkbox-BXnSN2vK.js";
+import { I as F } from "./IconChevronDown-ev2ML7Ex.js";
+import { I as M } from "./IconSearch-CgM6jEUh.js";
+const P = {
+  medium: "mare:h-10",
+  large: "mare:h-12"
+}, T = {
+  medium: "mare:px-3.5",
+  large: "mare:px-4"
+}, $ = (r) => `
+	mare:group mare:inline-flex mare:items-center mare:gap-1.5 mare:max-w-full
+	mare:rounded-full mare:border mare:cursor-pointer mare:select-none
+	mare:tpc-typography-body-s mare:transition-colors mare:duration-150
+	${P[r]} ${T[r]}
+	mare:bg-default mare:text-default mare:border-default
+	mare:ark-open:outline-solid mare:ark-open:outline-2 mare:ark-open:outline-accent mare:ark-open:-outline-offset-2
+	mare:not-ark-disabled:hover:bg-hover
+	mare:ark-disabled:cursor-not-allowed mare:ark-disabled:text-disabled mare:ark-disabled:border-disabled-default
+	mare:data-[invalid]:outline-solid mare:data-[invalid]:outline-2 mare:data-[invalid]:outline-danger mare:data-[invalid]:-outline-offset-2
+`, B = "mare:truncate mare:data-[placeholder-shown]:text-weak", K = "mare:flex mare:items-center mare:shrink-0 mare:[&>svg]:size-4 mare:transition-transform mare:ark-open:rotate-180", L = `
+	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)]
+	mare:max-h-72 mare:overflow-y-auto
+	mare:min-w-[var(--reference-width)]
+	mare:z-50
+`, Q = `
+	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
+`, R = "mare:flex-auto mare:bg-transparent mare:outline-none mare:text-default mare:placeholder:text-weak mare:tpc-typography-body-s", V = "mare:flex mare:items-center mare:shrink-0 mare:text-weak", G = "mare:flex mare:items-center mare:gap-2 mare:py-2 mare:px-3 mare:mb-0.5 mare:rounded-menu-item mare:cursor-pointer mare:hover:bg-hover mare:tpc-typography-body-s mare:text-default", H = `
+	mare:group/option mare:flex mare:items-center mare:gap-2
+	mare:w-full mare:min-h-8 mare:py-2 mare:px-3 mare:cursor-pointer mare:rounded-menu-item
+	mare:tpc-typography-body-s mare:text-default
+	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
+`, J = "mare:py-2 mare:px-3 mare:tpc-typography-body-s mare:text-weak", y = (r, m) => {
+  const a = r.filter((l) => !l.disabled);
+  return a.length > 0 && a.every((l) => m.includes(l.value));
+}, U = (r, m) => {
+  const a = r.filter((n) => !n.disabled).map((n) => n.value), l = m.filter((n) => !a.includes(n));
+  return y(r, m) ? l : [...l, ...a];
+}, W = (r, m) => r.filter((a) => m.includes(a.value)).map((a) => a.label).join(", ");
+function ae({
+  value: r = [],
+  onValueChange: m,
+  options: a,
+  placeholder: l = "Select…",
+  size: n = "medium",
+  disabled: k = !1,
+  invalid: v = !1,
+  filter: s = !1,
+  headerLabel: d,
+  hasCheckbox: f = !0,
+  showToggleAll: c = !1,
+  renderOption: h
+}) {
+  const [u, b] = N(""), o = x(() => {
+    if (!s) return a;
+    const e = u.trim().toLowerCase();
+    return e ? a.filter(
+      (p) => p.label.toLowerCase().includes(e)
+    ) : a;
+  }, [s, u, a]), w = x(
+    () => I({
+      items: o,
+      itemToValue: (e) => e.value,
+      itemToString: (e) => e.label,
+      isItemDisabled: (e) => !!e.disabled
+    }),
+    [o]
+  ), S = W(a, r), C = y(o, r);
+  return /* @__PURE__ */ i(
+    D,
+    {
+      multiple: !0,
+      closeOnSelect: !1,
+      collection: w,
+      value: r,
+      disabled: k,
+      invalid: v,
+      onValueChange: (e) => m?.(e.value),
+      onOpenChange: (e) => {
+        e.open || b("");
+      },
+      children: [
+        /* @__PURE__ */ t(z, { children: /* @__PURE__ */ i(_, { className: $(n), children: [
+          /* @__PURE__ */ t("span", { className: B, children: S || l }),
+          /* @__PURE__ */ t("span", { className: K, children: /* @__PURE__ */ t(F, { size: "1em" }) })
+        ] }) }),
+        /* @__PURE__ */ t(j, { children: /* @__PURE__ */ i(O, { className: L, children: [
+          s && /* @__PURE__ */ i("div", { className: Q, children: [
+            /* @__PURE__ */ t(
+              "input",
+              {
+                className: R,
+                value: u,
+                onChange: (e) => b(e.target.value),
+                onKeyDown: (e) => {
+                  e.key === "Enter" && e.preventDefault(), e.key !== "Escape" && e.stopPropagation();
+                },
+                placeholder: "Buscar…"
+              }
+            ),
+            /* @__PURE__ */ t("span", { className: V, children: /* @__PURE__ */ t(M, { size: "1em" }) })
+          ] }),
+          (c || d) && /* @__PURE__ */ i(
+            "div",
+            {
+              className: G,
+              onClick: c ? () => m?.(
+                U(
+                  o,
+                  r
+                )
+              ) : void 0,
+              children: [
+                c && f && /* @__PURE__ */ t(
+                  g,
+                  {
+                    checked: C,
+                    readOnly: !0
+                  }
+                ),
+                d && /* @__PURE__ */ t("span", { children: d })
+              ]
+            }
+          ),
+          o.length === 0 && /* @__PURE__ */ t("div", { className: J, children: "Sin resultados" }),
+          o.map((e) => {
+            const p = r.includes(e.value);
+            return /* @__PURE__ */ i(
+              q,
+              {
+                item: e,
+                className: H,
+                children: [
+                  f && /* @__PURE__ */ t(
+                    g,
+                    {
+                      checked: p,
+                      readOnly: !0
+                    }
+                  ),
+                  /* @__PURE__ */ t(E, { children: h ? h(e) : e.label })
+                ]
+              },
+              e.value
+            );
+          })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  ae as F
+};

package/dist/shared/FilterChipDropdownSingle-4G5LDRCw.js

@@ -0,0 +1,135 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { useState as y, useMemo as c } from "react";
+import { createListCollection as v, SelectRoot as S, SelectControl as I, SelectTrigger as C, SelectValueText as N, SelectClearTrigger as z, SelectIndicator as T, SelectPositioner as D, SelectContent as _, SelectItem as j, SelectItemText as L, SelectItemIndicator as V } from "@ark-ui/react/select";
+import { I as q } from "./IconX-CpPADKjZ.js";
+import { I as E } from "./IconChevronDown-ev2ML7Ex.js";
+import { I as F } from "./IconSearch-CgM6jEUh.js";
+import { I as P } from "./IconCheck-DzZA6b2U.js";
+const $ = {
+  medium: "mare:h-10",
+  large: "mare:h-12"
+}, B = {
+  medium: "mare:px-3.5",
+  large: "mare:px-4"
+}, K = (r) => `
+	mare:group mare:relative mare:inline-flex mare:items-center mare:gap-1.5 mare:max-w-full
+	mare:rounded-full mare:border mare:cursor-pointer mare:select-none
+	mare:tpc-typography-body-s mare:transition-colors mare:duration-150
+	${$[r]} ${B[r]}
+	mare:bg-default mare:text-default mare:border-default
+	mare:focus-within:outline-solid mare:focus-within:outline-2 mare:focus-within:outline-accent mare:focus-within:-outline-offset-2
+	mare:not-ark-disabled:hover:bg-hover
+	mare:ark-disabled:cursor-not-allowed mare:ark-disabled:text-disabled mare:ark-disabled:border-disabled-default
+	mare:data-[invalid]:outline-solid mare:data-[invalid]:outline-2 mare:data-[invalid]:outline-danger mare:data-[invalid]:-outline-offset-2
+`, M = "mare:flex-auto mare:flex mare:items-center mare:cursor-pointer mare:bg-transparent mare:text-left mare:min-w-0", Q = "mare:truncate mare:data-[placeholder-shown]:text-weak", R = "mare:flex mare:items-center mare:shrink-0 mare:text-base mare:cursor-pointer mare:hover:text-weak", X = "mare:flex mare:items-center mare:shrink-0 mare:[&>svg]:size-4 mare:transition-transform mare:ark-open:rotate-180", A = `
+	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)]
+	mare:max-h-72 mare:overflow-y-auto
+	mare:min-w-[var(--reference-width)]
+	mare:z-50
+`, G = `
+	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
+`, H = "mare:flex-auto mare:bg-transparent mare:outline-none mare:text-default mare:placeholder:text-weak mare:tpc-typography-body-s", J = "mare:flex mare:items-center mare:shrink-0 mare:text-weak", O = `
+	mare:group/option mare:flex mare:items-center mare:justify-between mare:gap-2
+	mare:w-full mare:min-h-8 mare:py-2 mare:px-3 mare:cursor-pointer mare:rounded-menu-item
+	mare:tpc-typography-body-s mare:text-default
+	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
+`, U = "mare:flex mare:items-center mare:text-accent", W = "mare:py-2 mare:px-3 mare:tpc-typography-body-s mare:text-weak";
+function le({
+  value: r = null,
+  onValueChange: d,
+  options: m,
+  placeholder: u = "Select…",
+  size: f = "medium",
+  disabled: p = !1,
+  invalid: h = !1,
+  filter: o = !1,
+  clearable: x = !1,
+  renderOption: n,
+  checkIcon: g,
+  clearIcon: b
+}) {
+  const [i, s] = y(""), l = c(() => {
+    if (!o) return m;
+    const e = i.trim().toLowerCase();
+    return e ? m.filter((k) => k.label.toLowerCase().includes(e)) : m;
+  }, [o, i, m]), w = c(
+    () => v({
+      items: l,
+      itemToValue: (e) => e.value,
+      itemToString: (e) => e.label,
+      isItemDisabled: (e) => !!e.disabled
+    }),
+    [l]
+  );
+  return /* @__PURE__ */ t(
+    S,
+    {
+      collection: w,
+      value: r == null ? [] : [r],
+      disabled: p,
+      invalid: h,
+      onValueChange: (e) => d?.(e.value[0] ?? null),
+      onOpenChange: (e) => {
+        e.open || s("");
+      },
+      children: [
+        /* @__PURE__ */ t(I, { className: K(f), children: [
+          /* @__PURE__ */ a(C, { className: M, children: /* @__PURE__ */ a(
+            N,
+            {
+              className: Q,
+              placeholder: u
+            }
+          ) }),
+          x && /* @__PURE__ */ a(z, { className: R, children: b ?? /* @__PURE__ */ a(q, { size: "1em" }) }),
+          /* @__PURE__ */ a(T, { className: X, children: /* @__PURE__ */ a(E, { size: "1em" }) })
+        ] }),
+        /* @__PURE__ */ a(D, { children: /* @__PURE__ */ t(_, { className: A, children: [
+          o && /* @__PURE__ */ t("div", { className: G, children: [
+            /* @__PURE__ */ a(
+              "input",
+              {
+                className: H,
+                value: i,
+                onChange: (e) => s(e.target.value),
+                onKeyDown: (e) => {
+                  e.key === "Enter" && e.preventDefault(), e.key !== "Escape" && e.stopPropagation();
+                },
+                placeholder: "Buscar…"
+              }
+            ),
+            /* @__PURE__ */ a("span", { className: J, children: /* @__PURE__ */ a(F, { size: "1em" }) })
+          ] }),
+          l.length === 0 && /* @__PURE__ */ a("div", { className: W, children: "Sin resultados" }),
+          l.map((e) => /* @__PURE__ */ t(
+            j,
+            {
+              item: e,
+              className: O,
+              children: [
+                /* @__PURE__ */ a(L, { children: n ? n(e) : e.label }),
+                /* @__PURE__ */ a(
+                  V,
+                  {
+                    className: U,
+                    children: g ?? /* @__PURE__ */ a(P, { size: "1em" })
+                  }
+                )
+              ]
+            },
+            e.value
+          ))
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  le as F
+};

package/dist/shared/FilterChipGroup-BzE-EQsA.js

@@ -0,0 +1,19 @@
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as l } from "react";
+const c = "mare:inline-flex mare:flex-wrap mare:gap-2", p = (e, i) => i ? Array.isArray(e) ? e : [] : typeof e == "string" ? [e] : [], f = (e, i) => e.includes(i), d = (e, i, o) => o ? e.includes(i) ? e.filter((r) => r !== i) : [...e, i] : e[0] === i ? void 0 : i, m = l(null);
+function g({
+  multiple: e = !1,
+  value: i,
+  onValueChange: o,
+  children: r
+}) {
+  const t = p(i, e), s = {
+    isSelected: (n) => f(t, n),
+    toggle: (n) => o?.(d(t, n, e))
+  };
+  return /* @__PURE__ */ a("div", { className: c, children: /* @__PURE__ */ a(m.Provider, { value: s, children: r }) });
+}
+export {
+  g as F,
+  m as a
+};

package/dist/shared/OverlayBadge-jHzuklUb.js

@@ -0,0 +1,60 @@
+import { jsxs as x, jsx as d } from "react/jsx-runtime";
+import { useRef as b, useState as R, useLayoutEffect as w } from "react";
+import { B as M } from "./Badge-WC6my4Aw.js";
+const v = "mare:relative mare:inline-flex mare:w-fit", B = `
+	mare:absolute mare:top-0 mare:end-0 mare:origin-[100%_0]
+	mare:m-0 mare:outline mare:outline-tpc-bg-default
+`;
+function N(a, c, l, u = 0, s = 0) {
+  const t = a.getBoundingClientRect(), r = t.width / 2, n = t.height / 2, m = c.getBoundingClientRect(), p = Number.parseFloat(
+    getComputedStyle(a).borderRadius.replaceAll("px", "")
+  );
+  if (m.width > p) return "";
+  const e = l * (Math.PI / 180), o = (r + u) * Math.cos(e), i = (n + s) * Math.sin(e);
+  return `translate(${-Math.abs(r - o)}px, ${Math.abs(n - i)}px)`;
+}
+const y = 45, g = "translate(50%, -50%)";
+function O({
+  children: a,
+  severity: c = "accent",
+  icon: l,
+  value: u,
+  offsetX: s = 0,
+  offsetY: t = 0
+}) {
+  const r = b(null), n = b(null), [m, p] = R(g);
+  return w(() => {
+    const e = r.current, o = n.current;
+    if (!e || !o) return;
+    const i = () => {
+      const h = e.firstElementChild;
+      h && p(
+        N(h, o, y, s, t) || g
+      );
+    };
+    i();
+    const f = new ResizeObserver(i);
+    return f.observe(e, { box: "border-box" }), () => f.disconnect();
+  }, [s, t]), /* @__PURE__ */ x("span", { className: v, children: [
+    /* @__PURE__ */ d("span", { ref: r, children: a }),
+    /* @__PURE__ */ d(
+      "span",
+      {
+        ref: n,
+        className: B,
+        style: { transform: m },
+        children: /* @__PURE__ */ d(
+          M,
+          {
+            severity: c,
+            icon: l,
+            children: u
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  O
+};

package/dist/shared/SegmentedControl-BpH7DANc.js

@@ -0,0 +1,94 @@
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import { SegmentGroupRoot as g, SegmentGroupItem as f, SegmentGroupItemControl as h, SegmentGroupItemText as x, SegmentGroupItemHiddenInput as b } from "@ark-ui/react/segment-group";
+const v = `
+    mare:inline-flex mare:select-none mare:rounded-tpc-segmented-control-container
+    mare:bg-tpc-bg-neutral-weak mare:gap-1 mare:p-1
+    mare:ark-disabled:opacity-40
+`, k = (r) => `
+    mare:inline-flex mare:items-center mare:justify-center mare:overflow-hidden mare:relative
+    mare:cursor-pointer mare:select-none
+    ${r === "equal" ? "mare:flex-1" : "mare:grow"}
+    mare:rounded-tpc-segmented-control-segment
+    mare:data-size-small:h-8
+    mare:data-size-medium:h-10
+
+    mare:text-tpc-fg-weak
+    mare:not-ark-disabled:hover:bg-tpc-bg-hover
+    mare:ark-disabled:cursor-not-allowed
+
+    mare:ark-checked:bg-tpc-bg-default
+    mare:ark-checked:text-tpc-fg-default
+
+    mare:tpc-typography-label-s
+    mare:transition-colors mare:duration-200
+`, y = `
+    mare:relative mare:flex-auto mare:inline-flex mare:items-center mare:justify-center mare:gap-2
+    mare:data-size-small:py-1 mare:data-size-small:px-3
+    mare:data-size-medium:py-2.5 mare:data-size-medium:px-3.5
+    mare:transition-colors mare:duration-200 mare:h-full
+`, z = "mare:px-0.5", S = "mare:sr-only";
+function I({
+  items: r,
+  value: l,
+  defaultValue: n,
+  onValueChange: o,
+  size: m = "small",
+  optionWidth: s = "auto",
+  disabled: d = !1,
+  renderOption: t,
+  name: i,
+  form: c,
+  id: u
+}) {
+  return /* @__PURE__ */ a(
+    g,
+    {
+      value: l,
+      defaultValue: n,
+      onValueChange: (e) => {
+        e.value && o?.(e.value);
+      },
+      disabled: d,
+      name: i,
+      form: c,
+      id: u,
+      className: v,
+      children: r.map((e) => /* @__PURE__ */ p(
+        f,
+        {
+          value: e.value,
+          disabled: e.disabled,
+          className: k(s),
+          "data-size": m,
+          children: [
+            /* @__PURE__ */ a(
+              h,
+              {
+                className: y,
+                "data-size": m,
+                children: t ? t(e) : /* @__PURE__ */ a(
+                  x,
+                  {
+                    className: z,
+                    "data-size": m,
+                    children: e.label
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ a(
+              b,
+              {
+                className: S
+              }
+            )
+          ]
+        },
+        e.value
+      ))
+    }
+  );
+}
+export {
+  I as S
+};