@tpc-mare/mare-ui-components-react 0.1.26 → 0.1.28

package/dist/shared/{DialogFooter-DyltZzK-.js → DialogFooter-CDlh11Gy.js}

@@ -1,22 +1,23 @@
 import { jsx as a, jsxs as l } from "react/jsx-runtime";
 import { Dialog as r } from "@ark-ui/react/dialog";
-import { Portal as b } from "@ark-ui/react/portal";
-const w = (e) => `
+import { Portal as w } from "@ark-ui/react/portal";
+import { o as h } from "./index-ByQ37VXf.js";
+const _ = (e) => `
 	mare:fixed mare:inset-0 mare:z-40
 	${e ?? "mare:bg-overlay"}
 	mare:ark-open:[animation:mare-dialog-backdrop-enter_300ms_ease-out]
 	mare:ark-closed:[animation:mare-dialog-backdrop-exit_200ms_ease-in]
-`, h = `
+`, k = `
 	mare:fixed mare:inset-0 mare:z-50
 	mare:flex mare:items-center mare:justify-center
 	mare:overflow-y-auto mare:px-0 mare:sm:px-10
-`, _ = {
+`, $ = {
   small: "mare:sm:w-[28rem] mare:sm:max-w-[28rem]",
   medium: "mare:sm:w-[42rem] mare:sm:max-w-[42rem]",
   large: "mare:sm:w-[64rem] mare:sm:max-w-[64rem]"
-}, k = (e) => `
+}, y = (e) => `
 	mare:group/dialog mare:flex mare:flex-col
-	mare:w-full mare:max-w-full mare:max-w-screen ${_[e.size]}
+	mare:w-full mare:max-w-full mare:max-w-screen ${$[e.size]}
 	mare:bg-default mare:text-default
 	mare:shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.10),0px_4px_6px_-2px_rgba(0,0,0,0.05)]
 	mare:fixed mare:sm:relative mare:bottom-0 mare:sm:bottom-auto mare:left-0 mare:sm:left-auto mare:right-0 mare:sm:right-auto
@@ -28,59 +29,60 @@ const w = (e) => `
 	mare:sm:ark-open:[animation:mare-dialog-enter-desktop_300ms_ease-out]
 	mare:sm:ark-closed:[animation:mare-dialog-exit-desktop_200ms_ease-in]
 	${e.fullScreen ? "mare:top-0 mare:rounded-t-none! mare:sm:rounded-tpc-dialog! mare:sm:top-auto mare:max-h-full mare:sm:max-h-[calc(100%-80px)]" : ""}
-`, y = (e) => `
+`, v = (e) => `
 	mare:overflow-y-auto mare:px-6 mare:pb-6
 	${e ? "mare:grow" : ""}
-`, N = (e) => `
+`, C = (e) => `
 	mare:flex mare:w-full mare:items-center mare:justify-between mare:shrink-0
 	mare:h-14 mare:sm:h-16 mare:px-6
 	${e ? "mare:border-b mare:border-default" : ""}
-`, z = "mare:-ml-1.5", O = "mare:-mr-1.5", I = (e) => `
+`, P = "mare:-ml-1.5", R = "mare:-mr-1.5", B = (e) => `
 	mare:grow mare:w-full mare:truncate mare:text-center
 	mare:tpc-typography-label-m mare:text-default
 	${e.hasRightIcon ? "" : "mare:mr-6.5"}
 	${e.hasLeftIcon ? "" : "mare:ml-6.5"}
-`, $ = (e) => `
+`, z = (e) => `
 	mare:flex mare:flex-col-reverse mare:gap-3 mare:justify-end mare:w-full
 	mare:px-6 mare:pb-4 mare:sm:pb-6
 	${e.layout === "row" ? "mare:sm:flex-row" : ""}
 	${e.border ? "mare:pt-3 mare:sm:pt-6 mare:border-t mare:border-t-default" : "mare:pt-0"}
-`;
-function C({
+`, j = ["small", "medium", "large"];
+function E({
   open: e,
   onOpenChange: m,
-  size: t = "medium",
-  fullScreen: o = !1,
+  size: o = "medium",
+  fullScreen: t = !1,
   modal: s = !0,
   closeOnEscape: i = !0,
   dismissableMask: n = !0,
   maskColor: d,
-  portalContainer: p,
-  header: u,
+  portalContainer: u,
+  header: p,
   footer: x,
   children: c,
   "aria-label": f
 }) {
+  const g = h(o, j, "medium");
   return /* @__PURE__ */ a(
     r.Root,
     {
       open: e,
-      onOpenChange: (g) => m?.(g.open),
+      onOpenChange: (b) => m?.(b.open),
       modal: s,
       closeOnEscape: i,
       closeOnInteractOutside: n,
       "aria-label": f,
       lazyMount: !0,
       unmountOnExit: !0,
-      children: /* @__PURE__ */ l(b, { container: p, children: [
-        /* @__PURE__ */ a(r.Backdrop, { className: w(d) }),
-        /* @__PURE__ */ a(r.Positioner, { className: h, children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ l(w, { container: u, children: [
+        /* @__PURE__ */ a(r.Backdrop, { className: _(d) }),
+        /* @__PURE__ */ a(r.Positioner, { className: k, children: /* @__PURE__ */ l(
           r.Content,
           {
-            className: k({ size: t, fullScreen: o }),
+            className: y({ size: g, fullScreen: t }),
             children: [
-              u,
-              /* @__PURE__ */ a("div", { className: y(o), children: c }),
+              p,
+              /* @__PURE__ */ a("div", { className: v(t), children: c }),
               x
             ]
           }
@@ -89,18 +91,18 @@ function C({
     }
   );
 }
-function P({
+function F({
   layout: e = "row",
   border: m = !1,
-  children: t
+  children: o
 }) {
-  return /* @__PURE__ */ a("div", { className: $({ layout: e, border: m }), children: t });
+  return /* @__PURE__ */ a("div", { className: z({ layout: e, border: m }), children: o });
 }
 export {
-  C as D,
-  P as a,
-  I as i,
-  z as l,
-  O as n,
-  N as s
+  E as D,
+  F as a,
+  B as i,
+  C as l,
+  R as n,
+  P as s
 };

package/dist/shared/{DialogHeader-M5Bfyxos.js → DialogHeader-PMBgMjsb.js}

@@ -1,7 +1,7 @@
 import { jsxs as t, jsx as s } from "react/jsx-runtime";
 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-DwJ5RTfQ.js";
+import { s as h, i as o, n as d, l as u } from "./DialogFooter-CDlh11Gy.js";
+import { B as r } from "./Button-C2ULmKj3.js";
 import { I as p } from "./IconX-CpPADKjZ.js";
 function y({
   title: e,

package/dist/shared/{Divider-UgKI7dtK.js → Divider-CSQOHeMo.js}

@@ -1,5 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-const o = `
+import { o as l } from "./index-ByQ37VXf.js";
+const i = ["horizontal", "vertical"], m = `
 	mare:data-layout-horizontal:flex mare:data-layout-horizontal:w-full mare:data-layout-horizontal:relative
 	mare:data-layout-horizontal:items-center mare:data-layout-horizontal:my-0 mare:data-layout-horizontal:mx-0 mare:data-layout-horizontal:py-0
 	mare:data-layout-horizontal:before:absolute mare:data-layout-horizontal:before:block mare:data-layout-horizontal:before:top-1/2
@@ -11,33 +12,34 @@ const o = `
 	mare:data-layout-vertical:before:absolute mare:data-layout-vertical:before:block mare:data-layout-vertical:before:top-0
 	mare:data-layout-vertical:before:start-1/2 mare:data-layout-vertical:before:h-full
 	mare:data-layout-vertical:before:border-s mare:data-layout-vertical:before:border-default
-`, l = `
+`, u = `
 	mare:z-10 mare:bg-default mare:tpc-typography-body-xs mare:text-weak
 	mare:data-layout-horizontal:py-0 mare:data-layout-horizontal:px-4
 	mare:data-layout-vertical:py-4 mare:data-layout-vertical:px-0
 `;
-function d({
-  layout: a = "horizontal",
-  children: t,
-  ...r
+function c({
+  layout: r = "horizontal",
+  children: a,
+  ...o
 }) {
+  const t = l(r, i, "horizontal");
   return /* @__PURE__ */ e(
     "div",
     {
-      className: o,
-      "data-layout": a,
-      ...r,
-      children: t && /* @__PURE__ */ e(
+      className: m,
+      "data-layout": t,
+      ...o,
+      children: a && /* @__PURE__ */ e(
         "div",
         {
-          className: l,
-          "data-layout": a,
-          children: t
+          className: u,
+          "data-layout": t,
+          children: a
         }
       )
     }
   );
 }
 export {
-  d as D
+  c as D
 };

package/dist/shared/{DrawerFooter-B9-Vrgd3.js → DrawerFooter-Bb-X7keE.js}

@@ -1,9 +1,16 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsx as r, jsxs as c } 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-DwJ5RTfQ.js";
-import { I as y } from "./IconX-CpPADKjZ.js";
-const _ = (e) => {
+import { Portal as y } from "@ark-ui/react/portal";
+import { o as _ } from "./index-ByQ37VXf.js";
+import { B as u } from "./Button-C2ULmKj3.js";
+import { I as $ } from "./IconX-CpPADKjZ.js";
+const k = [
+  "left",
+  "right",
+  "top",
+  "bottom",
+  "full"
+], v = (e) => {
   switch (e) {
     case "left":
       return "translateX(-100%)";
@@ -15,93 +22,94 @@ const _ = (e) => {
     case "full":
       return "translateY(100%)";
   }
-}, k = (e) => `
+}, N = (e) => `
 	mare:fixed mare:inset-0 mare:z-40
 	${e ?? "mare:bg-overlay"}
 	mare:ark-open:[animation:mare-dialog-backdrop-enter_300ms_ease-out]
 	mare:ark-closed:[animation:mare-dialog-backdrop-exit_200ms_ease-in]
-`, v = {
+`, j = {
   left: "mare:justify-start",
   right: "mare:justify-end",
   top: "mare:flex-col mare:justify-start",
   bottom: "mare:flex-col mare:justify-end",
   full: ""
-}, N = (e) => `
+}, C = (e) => `
 	mare:fixed mare:inset-0 mare:z-50 mare:flex
-	${v[e]}
-`, $ = {
+	${j[e]}
+`, O = {
   left: "mare:w-screen mare:md:w-120",
   right: "mare:w-screen mare:md:w-120",
   top: "mare:border-b mare:border-default",
   bottom: "mare:border-t mare:border-default",
   full: "mare:w-screen mare:h-screen mare:max-h-full"
-}, j = (e) => `
+}, z = (e) => `
 	mare:group/drawer mare:flex mare:flex-col
 	mare:bg-default mare:text-default
 	mare:outline-none
 	${e.shadow ? "mare:shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.10),0px_4px_6px_-2px_rgba(0,0,0,0.05)]" : ""}
-	${$[e.position]}
+	${O[e.position]}
 	mare:ark-open:[animation:mare-drawer-enter_300ms_ease-out]
 	mare:ark-closed:[animation:mare-drawer-exit_200ms_ease-in]
-`, C = (e) => `
+`, D = (e) => `
 	mare:grow mare:overflow-y-auto mare:px-6 mare:pb-6
 	${e ? "mare:pt-6" : "mare:pt-0"}
-`, O = (e) => `
+`, R = (e) => `
 	mare:flex mare:w-full mare:items-center mare:justify-between mare:shrink-0
 	mare:px-6
 	${e.compact ? "mare:h-auto mare:py-4" : "mare:h-14 mare:md:h-16"}
 	${e.border ? "mare:border-b mare:border-default" : ""}
-`, z = "mare:-ml-1.5", D = "mare:-mr-1.5", u = (e) => `
+`, B = "mare:-ml-1.5", I = "mare:-mr-1.5", d = (e) => `
 	mare:grow mare:w-full mare:truncate mare:text-center
 	mare:tpc-typography-label-m mare:text-default
 	${e.hasRightIcon ? "" : "mare:mr-6.5"}
 	${e.hasLeftIcon ? "" : "mare:ml-6.5"}
-`, R = (e) => `
+`, L = (e) => `
 	mare:flex mare:flex-col-reverse mare:sm:flex-row mare:justify-end
 	mare:gap-3 mare:sm:gap-4 mare:w-full
 	mare:*:w-full mare:sm:*:flex-1
 	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 T({
+function H({
   open: e,
   onOpenChange: a,
   position: m = "left",
-  modal: l = !0,
+  modal: o = !0,
   closeOnEscape: s = !0,
-  dismissableMask: o = !0,
+  dismissableMask: l = !0,
   maskColor: n,
-  shadow: f = !0,
-  portalContainer: p,
-  header: c,
-  footer: x,
-  children: h,
-  "aria-label": b
+  shadow: p = !0,
+  portalContainer: x,
+  header: f,
+  footer: h,
+  children: b,
+  "aria-label": w
 }) {
+  const i = _(m, k, "left");
   return /* @__PURE__ */ r(
     t.Root,
     {
       open: e,
-      onOpenChange: (w) => a?.(w.open),
-      modal: l,
+      onOpenChange: (g) => a?.(g.open),
+      modal: o,
       closeOnEscape: s,
-      closeOnInteractOutside: o,
-      "aria-label": b,
+      closeOnInteractOutside: l,
+      "aria-label": w,
       lazyMount: !0,
       unmountOnExit: !0,
-      children: /* @__PURE__ */ i(g, { container: p, children: [
-        /* @__PURE__ */ r(t.Backdrop, { className: k(n) }),
-        /* @__PURE__ */ r(t.Positioner, { className: N(m), children: /* @__PURE__ */ i(
+      children: /* @__PURE__ */ c(y, { container: x, children: [
+        /* @__PURE__ */ r(t.Backdrop, { className: N(n) }),
+        /* @__PURE__ */ r(t.Positioner, { className: C(i), children: /* @__PURE__ */ c(
           t.Content,
           {
-            className: j({ position: m, shadow: f }),
+            className: z({ position: i, shadow: p }),
             style: {
-              "--mare-drawer-from": _(m)
+              "--mare-drawer-from": v(i)
             },
             children: [
-              c,
-              /* @__PURE__ */ r("div", { className: C(!!c), children: h }),
-              x
+              f,
+              /* @__PURE__ */ r("div", { className: D(!!f), children: b }),
+              h
             ]
           }
         ) })
@@ -109,30 +117,30 @@ function T({
     }
   );
 }
-function Y({
+function M({
   title: e,
-  leftIcon: a = /* @__PURE__ */ r(y, {}),
+  leftIcon: a = /* @__PURE__ */ r($, {}),
   rightIcon: m,
-  onLeftIconClick: l,
+  onLeftIconClick: o,
   onRightIconClick: s,
-  border: o = !1,
+  border: l = !1,
   compact: n = !1
 }) {
-  return /* @__PURE__ */ i("div", { className: O({ border: o, compact: n }), children: [
-    a ? /* @__PURE__ */ r("div", { className: z, children: /* @__PURE__ */ r(t.CloseTrigger, { asChild: !0, children: /* @__PURE__ */ r(
-      d,
+  return /* @__PURE__ */ c("div", { className: R({ border: l, compact: n }), children: [
+    a ? /* @__PURE__ */ r("div", { className: B, children: /* @__PURE__ */ r(t.CloseTrigger, { asChild: !0, children: /* @__PURE__ */ r(
+      u,
       {
         severity: "ghost",
         iconOnly: !0,
         size: "xsmall",
         icon: a,
-        onClick: l
+        onClick: o
       }
     ) }) }) : null,
     e ? /* @__PURE__ */ r(
       t.Title,
       {
-        className: u({
+        className: d({
           hasLeftIcon: !!a,
           hasRightIcon: !!m
         }),
@@ -141,14 +149,14 @@ function Y({
     ) : /* @__PURE__ */ r(
       "span",
       {
-        className: u({
+        className: d({
           hasLeftIcon: !!a,
           hasRightIcon: !!m
         })
       }
     ),
-    m ? /* @__PURE__ */ r("div", { className: D, children: /* @__PURE__ */ r(
-      d,
+    m ? /* @__PURE__ */ r("div", { className: I, children: /* @__PURE__ */ r(
+      u,
       {
         severity: "ghost",
         iconOnly: !0,
@@ -159,14 +167,14 @@ function Y({
     ) }) : null
   ] });
 }
-function E({
+function q({
   border: e = !1,
   children: a
 }) {
-  return /* @__PURE__ */ r("div", { className: R(e), children: a });
+  return /* @__PURE__ */ r("div", { className: L(e), children: a });
 }
 export {
-  T as D,
-  E as a,
-  Y as b
+  H as D,
+  q as a,
+  M as b
 };

package/dist/shared/{ExpandableCounter-DZxbdqRa.js → ExpandableCounter-pPJIrd6L.js}

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import { B as p } from "./Button-DwJ5RTfQ.js";
-import { C as x, I as d } from "./Counter-DjIoe4h3.js";
+import { B as p } from "./Button-C2ULmKj3.js";
+import { C as x, I as d } from "./Counter-0siKQRKc.js";
 const m = `
 	mare:inline-flex mare:origin-left mare:[animation:mare-expandable-counter-enter_100ms_ease-out]
 `, C = (e, a) => e > a;

package/dist/shared/{FilterChip-eECL3oO7.js → FilterChip-TpKF-4vP.js}

@@ -1,9 +1,10 @@
-import { jsxs as g, jsx as a } from "react/jsx-runtime";
-import { useContext as v } from "react";
-import { a as h } from "./FilterChipGroup-BzE-EQsA.js";
-import { c as x } from "./createReactComponent-Cb6Pzf10.js";
-import { I as C } from "./IconChevronDown-ev2ML7Ex.js";
-const z = [["path", { d: "M6 15l6 -6l6 6", key: "svg-0" }]], y = x("outline", "chevron-up", "ChevronUp", z), k = `
+import { jsxs as v, jsx as a } from "react/jsx-runtime";
+import { useContext as h } from "react";
+import { o as x } from "./index-ByQ37VXf.js";
+import { a as C } from "./FilterChipGroup-BzE-EQsA.js";
+import { c as z } from "./createReactComponent-Cb6Pzf10.js";
+import { I as y } from "./IconChevronDown-ev2ML7Ex.js";
+const k = [["path", { d: "M6 15l6 -6l6 6", key: "svg-0" }]], N = z("outline", "chevron-up", "ChevronUp", k), F = ["medium", "large"], I = `
 	mare:group mare:relative mare:inline-flex mare:items-center mare:gap-1.5
 	mare:rounded-full mare:border mare:cursor-pointer mare:select-none
 	mare:tpc-typography-body-s mare:transition-colors mare:duration-150
@@ -21,8 +22,8 @@ const z = [["path", { d: "M6 15l6 -6l6 6", key: "svg-0" }]], y = x("outline", "c
 
 	mare:p-disabled:cursor-not-allowed mare:p-disabled:text-disabled mare:p-disabled:border-disabled-default
 	mare:p-disabled:bg-transparent mare:p-disabled:hover:bg-transparent
-`, N = "mare:truncate mare:px-0.5", F = "mare:flex mare:items-center mare:shrink-0 mare:[&>svg]:size-4 mare:cursor-pointer";
-function M({
+`, j = "mare:truncate mare:px-0.5", G = "mare:flex mare:items-center mare:shrink-0 mare:[&>svg]:size-4 mare:cursor-pointer";
+function $({
   value: d,
   size: c = "medium",
   disabled: t = !1,
@@ -34,17 +35,17 @@ function M({
   onToggleDropdown: b,
   children: s
 }) {
-  const i = v(h), l = d ?? (typeof s == "string" ? s : ""), m = !!i && !e, o = e ? !1 : m ? i.isSelected(l) : u;
-  return /* @__PURE__ */ g(
+  const g = x(c, F, "medium"), o = h(C), m = d ?? (typeof s == "string" ? s : ""), l = !!o && !e, i = e ? !1 : l ? o.isSelected(m) : u;
+  return /* @__PURE__ */ v(
     "button",
     {
       type: "button",
-      className: k,
-      "data-size": c,
-      "data-selected": o ? "true" : void 0,
+      className: I,
+      "data-size": g,
+      "data-selected": i ? "true" : void 0,
       "data-disabled": t ? "true" : void 0,
       disabled: t,
-      "aria-pressed": e ? void 0 : o,
+      "aria-pressed": e ? void 0 : i,
       "aria-expanded": e ? r : void 0,
       onClick: (n) => {
         if (!t) {
@@ -52,20 +53,20 @@ function M({
             f?.(!r), b?.(n, n.currentTarget);
             return;
           }
-          if (m) {
-            i.toggle(l);
+          if (l) {
+            o.toggle(m);
             return;
           }
-          p?.(!o);
+          p?.(!i);
         }
       },
       children: [
-        /* @__PURE__ */ a("span", { className: N, children: s }),
-        e && /* @__PURE__ */ a("span", { className: F, children: r ? /* @__PURE__ */ a(y, { size: "1em" }) : /* @__PURE__ */ a(C, { size: "1em" }) })
+        /* @__PURE__ */ a("span", { className: j, children: s }),
+        e && /* @__PURE__ */ a("span", { className: G, children: r ? /* @__PURE__ */ a(N, { size: "1em" }) : /* @__PURE__ */ a(y, { size: "1em" }) })
       ]
     }
   );
 }
 export {
-  M as F
+  $ as F
 };