@tpc-mare/mare-ui-components-react 0.1.12 → 0.1.14

package/dist/shared/{DialogHeader-CZ5OrC8_.js → DialogHeader-RzfQm-pi.js}

@@ -1,18 +1,18 @@
 import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import { Dialog as a } from "@ark-ui/react/dialog";
+import { Dialog as l } from "@ark-ui/react/dialog";
 import { l as h, i as o, n as d, s as u } from "./DialogFooter-DyltZzK-.js";
 import { B as r } from "./Button-AfMqNCme.js";
-import { C as p } from "./icons-BFOFrum4.js";
-function N({
-  title: l,
+import { I as p } from "./IconX-CpPADKjZ.js";
+function y({
+  title: e,
   leftIcon: i = /* @__PURE__ */ s(p, {}),
-  rightIcon: e,
+  rightIcon: a,
   onLeftIconClick: n,
   onRightIconClick: m,
   border: c = !1
 }) {
   return /* @__PURE__ */ t("div", { className: u(c), children: [
-    i ? /* @__PURE__ */ s("div", { className: h, children: /* @__PURE__ */ s(a.CloseTrigger, { asChild: !0, children: /* @__PURE__ */ s(
+    i ? /* @__PURE__ */ s("div", { className: h, children: /* @__PURE__ */ s(l.CloseTrigger, { asChild: !0, children: /* @__PURE__ */ s(
       r,
       {
         severity: "ghost",
@@ -22,36 +22,36 @@ function N({
         onClick: n
       }
     ) }) }) : null,
-    l ? /* @__PURE__ */ s(
-      a.Title,
+    e ? /* @__PURE__ */ s(
+      l.Title,
       {
         className: o({
           hasLeftIcon: !!i,
-          hasRightIcon: !!e
+          hasRightIcon: !!a
         }),
-        children: l
+        children: e
       }
     ) : /* @__PURE__ */ s(
       "span",
       {
         className: o({
           hasLeftIcon: !!i,
-          hasRightIcon: !!e
+          hasRightIcon: !!a
         })
       }
     ),
-    e ? /* @__PURE__ */ s("div", { className: d, children: /* @__PURE__ */ s(
+    a ? /* @__PURE__ */ s("div", { className: d, children: /* @__PURE__ */ s(
       r,
       {
         severity: "ghost",
         iconOnly: !0,
         size: "xsmall",
-        icon: e,
+        icon: a,
         onClick: m
       }
     ) }) : null
   ] });
 }
 export {
-  N as D
+  y as D
 };

package/dist/shared/{DrawerFooter-OFrTFvy2.js → DrawerFooter-BxOEFQ-W.js}

@@ -2,7 +2,7 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Dialog as t } from "@ark-ui/react/dialog";
 import { Portal as g } from "@ark-ui/react/portal";
 import { B as d } from "./Button-AfMqNCme.js";
-import { C as y } from "./icons-BFOFrum4.js";
+import { I as y } from "./IconX-CpPADKjZ.js";
 const _ = (e) => {
   switch (e) {
     case "left":
@@ -63,7 +63,7 @@ const _ = (e) => {
 	mare:px-6 mare:pb-4 mare:sm:pb-6
 	${e ? "mare:pt-3 mare:sm:pt-6 mare:border-t mare:border-t-default" : "mare:pt-0"}
 `;
-function X({
+function T({
   open: e,
   onOpenChange: a,
   position: m = "left",
@@ -166,7 +166,7 @@ function E({
   return /* @__PURE__ */ r("div", { className: R(e), children: a });
 }
 export {
-  X as D,
+  T as D,
   E as a,
   Y as b
 };

package/dist/shared/IconCheck-DzZA6b2U.js

@@ -0,0 +1,5 @@
+import { c } from "./createReactComponent-Cb6Pzf10.js";
+const e = [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]], t = c("outline", "check", "Check", e);
+export {
+  t as I
+};

package/dist/shared/IconChevronDown-ev2ML7Ex.js

@@ -0,0 +1,5 @@
+import { c as o } from "./createReactComponent-Cb6Pzf10.js";
+const n = [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]], t = o("outline", "chevron-down", "ChevronDown", n);
+export {
+  t as I
+};

package/dist/shared/IconChevronRight-DEIDRsvg.js

@@ -0,0 +1,7 @@
+import { c as o } from "./createReactComponent-Cb6Pzf10.js";
+const e = [["path", { d: "M15 6l-6 6l6 6", key: "svg-0" }]], c = o("outline", "chevron-left", "ChevronLeft", e);
+const t = [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]], h = o("outline", "chevron-right", "ChevronRight", t);
+export {
+  c as I,
+  h as a
+};

package/dist/shared/IconMinus-fS_GL0Et.js

@@ -0,0 +1,5 @@
+import { c as o } from "./createReactComponent-Cb6Pzf10.js";
+const n = [["path", { d: "M5 12l14 0", key: "svg-0" }]], e = o("outline", "minus", "Minus", n);
+export {
+  e as I
+};

package/dist/shared/IconSearch-CgM6jEUh.js

@@ -0,0 +1,5 @@
+import { c as e } from "./createReactComponent-Cb6Pzf10.js";
+const a = [["path", { d: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M21 21l-6 -6", key: "svg-1" }]], c = e("outline", "search", "Search", a);
+export {
+  c as I
+};

package/dist/shared/IconX-CpPADKjZ.js

@@ -0,0 +1,5 @@
+import { c as o } from "./createReactComponent-Cb6Pzf10.js";
+const t = [["path", { d: "M18 6l-12 12", key: "svg-0" }], ["path", { d: "M6 6l12 12", key: "svg-1" }]], c = o("outline", "x", "X", t);
+export {
+  c as I
+};

package/dist/shared/{ImageSlider-CdBVmAYC.js → ImageSlider-Bgb1kNQ4.js}

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { Children as i } from "react";
 import { CarouselRoot as c, CarouselControl as u, CarouselPrevTrigger as d, CarouselItemGroup as h, CarouselItem as p, CarouselNextTrigger as f, CarouselIndicatorGroup as b, CarouselIndicator as g } from "@ark-ui/react/carousel";
-import { d as C, e as w } from "./icons-BFOFrum4.js";
+import { I as C, a as w } from "./IconChevronRight-DEIDRsvg.js";
 const y = "mare:group mare:relative mare:overflow-hidden mare:rounded-container-m", N = "mare:relative mare:flex mare:items-stretch", x = `
 	mare:flex mare:flex-1 mare:min-w-0
 	mare:[scrollbar-width:none] mare:[&::-webkit-scrollbar]:hidden

package/dist/shared/Message-BjC8CCSI.js

@@ -0,0 +1,70 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { B as o } from "./Button-AfMqNCme.js";
+import { I as p } from "./IconX-CpPADKjZ.js";
+const c = (e) => e === "filled" ? `mare:w-full mare:max-w-md mare:rounded-tpc-container-s mare:p-4
+			mare:flex mare:items-start mare:justify-between mare:gap-4
+			mare:data-severity-neutral:bg-alternative
+			mare:data-severity-brand:bg-accent-weak
+			mare:data-severity-positive:bg-positive-weak
+			mare:data-severity-warning:bg-warning-weak
+			mare:data-severity-danger:bg-danger-weak` : "mare:w-full mare:flex mare:items-start mare:justify-between mare:gap-4", g = "mare:flex mare:grow mare:items-start mare:gap-4", x = "mare:shrink-0 mare:text-default mare:[&>svg]:size-3.5", f = "mare:flex mare:grow mare:flex-col mare:gap-2", y = "mare:tpc-typography-label-m mare:text-default", u = {
+  neutral: "mare:text-weak",
+  brand: "mare:text-accent",
+  positive: "mare:text-positive",
+  warning: "mare:text-warning",
+  danger: "mare:text-danger"
+}, w = (e, a, m) => {
+  const r = e === "simple" ? "mare:tpc-typography-body-xs" : "mare:tpc-typography-body-s";
+  return m ? `${r} mare:text-disabled` : e === "simple" ? `${r} ${u[a]}` : `${r} mare:text-default`;
+}, v = (e, a) => a ? "disabled" : e;
+function N({
+  severity: e = "neutral",
+  variant: a = "simple",
+  title: m,
+  icon: r,
+  disabled: i = !1,
+  closable: n = !1,
+  onClose: d,
+  children: l
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: c(a),
+      "data-severity": v(e, i),
+      children: [
+        /* @__PURE__ */ s("div", { className: g, children: [
+          r && /* @__PURE__ */ t("span", { className: x, children: r }),
+          /* @__PURE__ */ s("div", { className: f, children: [
+            m && /* @__PURE__ */ t("p", { className: y, children: m }),
+            l && /* @__PURE__ */ t(
+              "div",
+              {
+                className: w(
+                  a,
+                  e,
+                  i
+                ),
+                children: l
+              }
+            )
+          ] })
+        ] }),
+        n && /* @__PURE__ */ t(
+          o,
+          {
+            severity: "ghost",
+            iconOnly: !0,
+            size: "xsmall",
+            icon: /* @__PURE__ */ t(p, {}),
+            onClick: d,
+            "aria-label": "Close"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  N as M
+};

package/dist/shared/{Paginator-BndcA6Ax.js → Paginator-Bp2nghqW.js}

@@ -1,57 +1,59 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useRef as P, useState as w, useEffect as R } from "react";
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { useRef as P, useState as R, useEffect as k } from "react";
 import { Pagination as c } from "@ark-ui/react/pagination";
 import { B as h } from "./Button-AfMqNCme.js";
-import { S as j } from "./SelectField-CGbdf8C2.js";
-import { f as N, d as k, e as W, g as I } from "./icons-BFOFrum4.js";
-const O = (a) => `
+import { S as N } from "./SelectField-CvKaukCG.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) => `
 	mare:w-full mare:flex mare:flex-wrap mare:items-center mare:gap-2
 	${a ? "mare:justify-between" : "mare:justify-center"}
-`, 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 = `
+`, 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 = `
 	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!
-`, b = (a, n) => {
-  let i = (a + 2) * 40 + (a + 1) * 8;
-  return n && (i += 96), i;
-}, V = ({
+`, C = (a, n) => {
+  let s = (a + 2) * 40 + (a + 1) * 8;
+  return n && (s += 96), s;
+}, $ = ({
   requestedPageLinkSize: a,
   containerWidth: n,
-  rowsPerPageWidth: i,
+  rowsPerPageWidth: s,
   showFirstLastLinks: o
 }) => {
   if (!n) return a;
-  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) => {
+  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) => {
   if (n <= 0) return [];
-  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);
+  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);
 };
-function J({
+function X({
   count: a,
   page: n,
-  defaultPage: i,
+  defaultPage: s,
   onPageChange: o,
-  pageSize: s,
+  pageSize: i,
   defaultPageSize: l,
   onPageSizeChange: g,
-  pageLinkSize: u = 5,
+  pageLinkSize: d = 5,
   showFirstLastLinks: m = !0,
   rowsPerPageOptions: f,
-  rowsPerPageOptionsLabel: C = "Rows per page"
+  rowsPerPageOptionsLabel: S = "Rows per page"
 }) {
-  const p = !!f?.length, v = P(null), y = P(null), [S, z] = w(u);
-  return R(() => {
+  const p = !!f?.length, v = P(null), y = P(null), [z, w] = R(d);
+  return k(() => {
     const r = v.current;
     if (!r) return;
     const t = () => {
-      z(
-        V({
-          requestedPageLinkSize: u,
+      w(
+        $({
+          requestedPageLinkSize: d,
           containerWidth: r.clientWidth,
           rowsPerPageWidth: y.current?.clientWidth ?? 0,
           showFirstLastLinks: m
@@ -63,28 +65,28 @@ function J({
     return x.observe(r), () => {
       x.disconnect();
     };
-  }, [u, m]), /* @__PURE__ */ d(
+  }, [d, m]), /* @__PURE__ */ u(
     c.Root,
     {
       ref: v,
-      className: O(p),
+      className: _(p),
       count: a,
       page: n,
-      defaultPage: i,
-      pageSize: s,
+      defaultPage: s,
+      pageSize: i,
       defaultPageSize: l,
       onPageChange: (r) => o?.(r.page),
       onPageSizeChange: (r) => g?.(r.pageSize),
       children: [
-        p && /* @__PURE__ */ d(
+        p && /* @__PURE__ */ u(
           "div",
           {
             ref: y,
-            className: T,
+            className: q,
             children: [
-              /* @__PURE__ */ e("span", { className: M, children: C }),
-              /* @__PURE__ */ e("span", { className: q, children: /* @__PURE__ */ e(c.Context, { children: (r) => /* @__PURE__ */ e(
-                j,
+              /* @__PURE__ */ e("span", { className: A, children: S }),
+              /* @__PURE__ */ e("span", { className: B, children: /* @__PURE__ */ e(c.Context, { children: (r) => /* @__PURE__ */ e(
+                N,
                 {
                   value: String(r.pageSize),
                   onValueChange: (t) => {
@@ -103,14 +105,14 @@ function J({
             ]
           }
         ),
-        /* @__PURE__ */ d("div", { className: A, children: [
+        /* @__PURE__ */ u("div", { className: E, children: [
           m && /* @__PURE__ */ e(c.FirstTrigger, { asChild: !0, children: /* @__PURE__ */ e(
             h,
             {
               severity: "ghost",
               size: "small",
               iconOnly: !0,
-              icon: /* @__PURE__ */ e(N, {})
+              icon: /* @__PURE__ */ e(W, {})
             }
           ) }),
           /* @__PURE__ */ e(c.PrevTrigger, { asChild: !0, children: /* @__PURE__ */ e(
@@ -119,19 +121,19 @@ function J({
               severity: "ghost",
               size: "small",
               iconOnly: !0,
-              icon: /* @__PURE__ */ e(k, {})
+              icon: /* @__PURE__ */ e(M, {})
             }
           ) }),
-          /* @__PURE__ */ e("div", { className: B, children: /* @__PURE__ */ e(c.Context, { children: (r) => L(
+          /* @__PURE__ */ e("div", { className: L, children: /* @__PURE__ */ e(c.Context, { children: (r) => D(
             r.page,
             r.totalPages,
-            S
+            z
           ).map((t) => /* @__PURE__ */ e(
             c.Item,
             {
               type: "page",
               value: t,
-              className: E,
+              className: V,
               children: t
             },
             t
@@ -142,7 +144,7 @@ function J({
               severity: "ghost",
               size: "small",
               iconOnly: !0,
-              icon: /* @__PURE__ */ e(W, {})
+              icon: /* @__PURE__ */ e(j, {})
             }
           ) }),
           m && /* @__PURE__ */ e(c.LastTrigger, { asChild: !0, children: /* @__PURE__ */ e(
@@ -151,7 +153,7 @@ function J({
               severity: "ghost",
               size: "small",
               iconOnly: !0,
-              icon: /* @__PURE__ */ e(I, {})
+              icon: /* @__PURE__ */ e(T, {})
             }
           ) })
         ] })
@@ -160,5 +162,5 @@ function J({
   );
 }
 export {
-  J as P
+  X as P
 };

package/dist/shared/{PanelMenu-Bz-fg6px.js → PanelMenu-BpjNM7O_.js}

@@ -1,7 +1,7 @@
 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 { a as b } from "./icons-BFOFrum4.js";
+import { I as b } from "./IconChevronDown-ev2ML7Ex.js";
 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,7 +44,7 @@ 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, {}) })
+            /* @__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(
             p,

package/dist/shared/Password-BMKy8dAy.js

@@ -0,0 +1,95 @@
+import { jsxs as r, jsx as e, Fragment as M } from "react/jsx-runtime";
+import { PasswordInput as l } from "@ark-ui/react/password-input";
+import { useFieldContext as R } from "@ark-ui/react/field";
+import { u as $, m as A, d as Z, f as j } from "./field-layout-D34MpDMB.js";
+import { c as h } from "./createReactComponent-Cb6Pzf10.js";
+const O = [["path", { d: "M10.585 10.587a2 2 0 0 0 2.829 2.828", key: "svg-0" }], ["path", { d: "M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87", key: "svg-1" }], ["path", { d: "M3 3l18 18", key: "svg-2" }]], D = h("outline", "eye-off", "EyeOff", O);
+const T = [["path", { d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0", key: "svg-0" }], ["path", { d: "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6", key: "svg-1" }]], V = h("outline", "eye", "Eye", T), W = "mare:relative mare:w-full mare:group", q = "mare:relative mare:w-full", B = `
+	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)]
+`, G = "mare:tpc-typography-label-s mare:text-default", H = "mare:border-t mare:border-default", J = "mare:flex mare:flex-col mare:gap-2", K = "mare:h-1 mare:w-full mare:bg-neutral-weak mare:rounded-md mare:overflow-hidden", Q = {
+  weak: "mare:w-1/3 mare:bg-danger",
+  medium: "mare:w-2/3 mare:bg-warning",
+  strong: "mare:w-full mare:bg-positive"
+}, U = (a) => `mare:h-full mare:rounded-md mare:transition-[width] mare:duration-500 mare:ease-in-out ${a ? Q[a] : "mare:w-0"}`, X = "mare:tpc-typography-body-s mare:text-default", Y = "mare:flex mare:flex-col mare:gap-1 mare:my-0 mare:pl-0 mare:list-none", ee = "mare:tpc-typography-body-s mare:text-default", ae = "^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})", re = "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})", le = (a, s = ae, m = re) => a ? new RegExp(m).test(a) ? "strong" : new RegExp(s).test(a) ? "medium" : "weak" : null;
+function ne({
+  value: a = "",
+  onValueChange: s,
+  size: m = "medium",
+  rounded: g = !1,
+  invalid: b = !1,
+  disabled: v = !1,
+  toggleMask: o = !0,
+  showIcon: w = /* @__PURE__ */ e(V, {}),
+  hideIcon: y = /* @__PURE__ */ e(D, {}),
+  feedback: n = !0,
+  header: d,
+  footer: c,
+  promptLabel: x = "Please enter a password",
+  weakLabel: N = "Weak",
+  mediumLabel: _ = "Medium",
+  strongLabel: k = "Strong",
+  mediumRegex: I,
+  strongRegex: E,
+  ...u
+}) {
+  const t = $(), f = R(), F = b || (f?.invalid ?? !1), p = v || (f?.disabled ?? !1), P = o ? A(t?.iconSide ?? null, "right") : t?.iconSide ?? null, S = Z({
+    size: m,
+    rounded: g,
+    hasFloatLabel: t?.hasFloatLabel ?? !1,
+    iconSide: P
+  }), C = t?.hasFloatLabel ? " " : u.placeholder, i = n ? le(a, I, E) : null, L = i ? { weak: N, medium: _, strong: k }[i] : x;
+  return /* @__PURE__ */ r(
+    l.Root,
+    {
+      className: W,
+      invalid: F,
+      disabled: p,
+      visible: o ? void 0 : !1,
+      children: [
+        /* @__PURE__ */ r(l.Control, { className: q, children: [
+          /* @__PURE__ */ e(
+            l.Input,
+            {
+              ...u,
+              placeholder: C,
+              value: a,
+              onChange: (z) => s?.(z.target.value),
+              className: S
+            }
+          ),
+          o && /* @__PURE__ */ e(
+            l.VisibilityTrigger,
+            {
+              className: j("right", {
+                disabled: p,
+                interactive: !0
+              }),
+              children: /* @__PURE__ */ e(l.Indicator, { fallback: w, children: y })
+            }
+          )
+        ] }),
+        n && /* @__PURE__ */ r("div", { className: B, children: [
+          d && /* @__PURE__ */ e("div", { className: G, children: d }),
+          /* @__PURE__ */ r("div", { className: J, children: [
+            /* @__PURE__ */ e("div", { className: K, children: /* @__PURE__ */ e("div", { className: U(i) }) }),
+            /* @__PURE__ */ e("span", { className: X, children: L })
+          ] }),
+          c && /* @__PURE__ */ r(M, { children: [
+            /* @__PURE__ */ e("div", { className: H }),
+            /* @__PURE__ */ e("ul", { className: Y, children: c })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function de({ children: a }) {
+  return /* @__PURE__ */ e("li", { className: ee, children: a });
+}
+export {
+  ne as P,
+  de as a
+};

package/dist/shared/SearchField-DjJHDaR4.js

@@ -0,0 +1,64 @@
+import { jsx as i } from "react/jsx-runtime";
+import { a as C, I as t } from "./IconField-Dh6j6SL1.js";
+import { P as x } from "./ProgressSpinner-B-lrS-tu.js";
+import { I as v } from "./IconSearch-CgM6jEUh.js";
+import { I as F } from "./IconX-CpPADKjZ.js";
+const L = (o) => !!o.value && o.clearable, P = (o) => o.loading && !o.disabled;
+function N({
+  value: o = "",
+  onValueChange: s,
+  loading: e = !1,
+  clearable: c = !1,
+  disabled: n = !1,
+  leftIcon: l = /* @__PURE__ */ i(v, {}),
+  clearIcon: u = /* @__PURE__ */ i(F, {}),
+  rightIcon: r,
+  onClear: h,
+  ...I
+}) {
+  const a = L({ value: o, clearable: c }), m = P({ loading: e, disabled: n }), S = !!r || c || e, p = /* @__PURE__ */ i(
+    C,
+    {
+      ...I,
+      value: o,
+      onValueChange: s,
+      disabled: n,
+      rounded: !0
+    }
+  );
+  if (!S)
+    return /* @__PURE__ */ i(
+      t,
+      {
+        icon: l,
+        position: "left",
+        disabled: n,
+        children: p
+      }
+    );
+  const d = r || (m ? /* @__PURE__ */ i(x, { className: "mare:size-5" }) : a ? u : null), f = !r && !m && a;
+  return /* @__PURE__ */ i(
+    t,
+    {
+      icon: l,
+      position: "left",
+      disabled: n,
+      children: /* @__PURE__ */ i(
+        t,
+        {
+          icon: d,
+          position: "right",
+          disabled: n,
+          onIconClick: f ? () => {
+            s?.(""), h?.();
+          } : void 0,
+          iconLabel: f ? "Clear" : void 0,
+          children: p
+        }
+      )
+    }
+  );
+}
+export {
+  N as S
+};