@tpc-mare/mare-ui-components-react 0.0.1

package/dist/shared/Checkbox-Ci1b59K1.js

@@ -0,0 +1,134 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { Checkbox as a } from "@ark-ui/react/checkbox";
+import { C as f, M as x } from "./icons-_QeAcImG.js";
+const v = `
+	mare:group/checkbox
+	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
+`, y = `
+	mare:relative mare:inline-flex mare:items-center mare:justify-center
+	mare:shrink-0
+	mare:border-[1.5px] mare:border-strong mare:rounded-checkbox
+	mare:bg-transparent
+	mare:transition-colors mare:duration-150
+
+	mare:data-size-small:w-4.5 mare:data-size-small:h-4.5 mare:data-size-small:min-w-4.5 mare:data-size-small:min-h-4.5
+	mare:data-size-medium:w-6 mare:data-size-medium:h-6 mare:data-size-medium:min-w-6 mare:data-size-medium:min-h-6
+	mare:data-size-large:w-8 mare:data-size-large:h-8 mare:data-size-large:min-w-8 mare:data-size-large:min-h-8
+
+	mare:ark-checked:bg-accent mare:ark-checked:border-accent
+	mare:ark-indeterminate:bg-accent mare:ark-indeterminate:border-accent
+
+	mare:not-ark-disabled:hover:border-accent
+	mare:not-ark-disabled:ark-checked:hover:bg-accent-hover
+	mare:not-ark-disabled:ark-indeterminate:hover:bg-accent-hover
+
+	mare:ark-disabled:border-disabled!
+	mare:ark-disabled:ark-checked:bg-disabled! mare:ark-disabled:ark-checked:border-disabled!
+	mare:ark-disabled:ark-indeterminate:bg-disabled! mare:ark-disabled:ark-indeterminate:border-disabled!
+
+	mare:ark-invalid:border-danger
+	mare:ark-invalid:ark-checked:bg-danger mare:ark-invalid:ark-checked:border-danger
+	mare:ark-invalid:ark-indeterminate:bg-danger mare:ark-invalid:ark-indeterminate:border-danger
+`, i = `
+	mare:flex mare:items-center mare:justify-center
+	mare:w-full mare:h-full
+	mare:text-on-accent
+	mare:ark-disabled:text-disabled!
+`, t = `
+	mare:data-size-small:w-4 mare:data-size-small:h-4
+	mare:data-size-medium:w-5 mare:data-size-medium:h-5
+	mare:data-size-large:w-7 mare:data-size-large:h-7
+`, w = `
+	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
+`, C = `
+	mare:sr-only
+`;
+function M({
+  checked: s,
+  defaultChecked: l,
+  onCheckedChange: n,
+  children: d,
+  size: r = "small",
+  disabled: c = !1,
+  invalid: o = !1,
+  readOnly: b = !1,
+  required: k = !1,
+  name: h,
+  value: g = "on",
+  form: z,
+  id: u
+}) {
+  return /* @__PURE__ */ m(
+    a.Root,
+    {
+      checked: s,
+      defaultChecked: l,
+      onCheckedChange: (p) => {
+        n?.({ checked: p.checked });
+      },
+      disabled: c,
+      invalid: o,
+      readOnly: b,
+      required: k,
+      name: h,
+      value: g,
+      form: z,
+      id: u,
+      className: v,
+      "data-size": r,
+      children: [
+        /* @__PURE__ */ m(
+          a.Control,
+          {
+            className: y,
+            "data-size": r,
+            children: [
+              /* @__PURE__ */ e(a.Indicator, { className: i, children: /* @__PURE__ */ e(
+                f,
+                {
+                  className: t,
+                  "data-size": r
+                }
+              ) }),
+              /* @__PURE__ */ e(
+                a.Indicator,
+                {
+                  indeterminate: !0,
+                  className: i,
+                  children: /* @__PURE__ */ e(
+                    x,
+                    {
+                      className: t,
+                      "data-size": r
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        d && /* @__PURE__ */ e(
+          a.Label,
+          {
+            className: w,
+            "data-size": r,
+            children: d
+          }
+        ),
+        /* @__PURE__ */ e(a.HiddenInput, { className: C })
+      ]
+    }
+  );
+}
+export {
+  M as C
+};

package/dist/shared/Combobox-DZ5SgSv6.js

@@ -0,0 +1,134 @@
+import { jsxs as t, 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 { a as A, b as B, S as F, C as G } from "./icons-_QeAcImG.js";
+const H = {
+  small: "mare:h-10",
+  medium: "mare:h-12"
+}, f = {
+  small: "mare:tpc-typography-body-s",
+  medium: "mare:tpc-typography-body-m"
+}, J = (r) => `
+	mare:relative mare:flex mare:items-center mare:gap-2
+	${H[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) => `
+	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 = `
+	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) => `
+	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 = `
+	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
+`, ee = `
+	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
+`, 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({
+  value: r = null,
+  onValueChange: h,
+  options: m,
+  placeholder: x = "Select…",
+  searchPlaceholder: g = "",
+  size: o = "small",
+  disabled: C = !1,
+  invalid: w = !1,
+  clearable: k = !1,
+  emptyText: y = "Sin resultados",
+  label: i,
+  leadingIcon: s,
+  triggerIcon: v,
+  checkIcon: N,
+  clearIcon: I,
+  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(
+    () => V({
+      items: n,
+      itemToValue: (e) => e.value,
+      itemToString: (e) => e.label,
+      isItemDisabled: (e) => !!e.disabled
+    }),
+    [n]
+  ), u = m.find((e) => e.value === r)?.label ?? null;
+  return /* @__PURE__ */ t(
+    _,
+    {
+      collection: S,
+      value: r == null ? [] : [r],
+      disabled: C,
+      invalid: w,
+      openOnClick: !0,
+      inputValue: l,
+      onValueChange: (e) => h?.(e.value[0] ?? null),
+      onInputValueChange: (e) => {
+        e.reason === "input-change" && d(e.inputValue);
+      },
+      onOpenChange: (e) => {
+        e.open || d("");
+      },
+      children: [
+        i && /* @__PURE__ */ a(j, { className: te, children: i }),
+        /* @__PURE__ */ t($, { className: J(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(E, { children: /* @__PURE__ */ t(M, { className: Z, children: [
+          /* @__PURE__ */ t("div", { className: U, children: [
+            /* @__PURE__ */ a(
+              O,
+              {
+                placeholder: g,
+                className: W(o)
+              }
+            ),
+            /* @__PURE__ */ a("span", { className: p, children: /* @__PURE__ */ a(F, {}) })
+          ] }),
+          /* @__PURE__ */ a(P, { className: re, children: y }),
+          n.map((e) => /* @__PURE__ */ t(
+            Q,
+            {
+              item: e,
+              className: ee,
+              children: [
+                /* @__PURE__ */ a(R, { children: c ? c(e) : e.label }),
+                /* @__PURE__ */ a(
+                  z,
+                  {
+                    className: ae,
+                    children: N ?? /* @__PURE__ */ a(G, {})
+                  }
+                )
+              ]
+            },
+            e.value
+          ))
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  ie as C
+};