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

package/dist/shared/DialogFooter-Bg3hz6fh.js

@@ -0,0 +1,154 @@
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import { Dialog as o } from "@ark-ui/react/dialog";
+import { Portal as w } from "@ark-ui/react/portal";
+import { B as n } from "./Button-AfMqNCme.js";
+import { e as _ } from "./icons-_QeAcImG.js";
+const k = (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]
+`, y = `
+	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
+`, v = {
+  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]"
+}, N = (e) => `
+	mare:group/dialog mare:flex mare:flex-col
+	mare:w-full mare:max-w-full mare:max-w-screen ${v[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
+	mare:rounded-t-tpc-sheet mare:sm:rounded-tpc-dialog
+	mare:max-h-[calc(100%-32px)] mare:sm:max-h-[calc(100%-80px)]
+	mare:outline-none
+	mare:ark-open:[animation:mare-dialog-enter-mobile_300ms_ease-out]
+	mare:ark-closed:[animation:mare-dialog-exit-mobile_200ms_ease-in]
+	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)]" : ""}
+`, $ = (e) => `
+	mare:overflow-y-auto mare:px-6 mare:pb-6
+	${e ? "mare:grow" : ""}
+`, 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", D = "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"}
+`, O = (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 P({
+  open: e,
+  onOpenChange: r,
+  size: m = "medium",
+  fullScreen: t = !1,
+  modal: s = !0,
+  closeOnEscape: l = !0,
+  dismissableMask: c = !0,
+  maskColor: u,
+  portalContainer: p,
+  header: x,
+  footer: f,
+  children: g,
+  "aria-label": h
+}) {
+  return /* @__PURE__ */ a(
+    o.Root,
+    {
+      open: e,
+      onOpenChange: (b) => r?.(b.open),
+      modal: s,
+      closeOnEscape: l,
+      closeOnInteractOutside: c,
+      "aria-label": h,
+      lazyMount: !0,
+      unmountOnExit: !0,
+      children: /* @__PURE__ */ i(w, { container: p, children: [
+        /* @__PURE__ */ a(o.Backdrop, { className: k(u) }),
+        /* @__PURE__ */ a(o.Positioner, { className: y, children: /* @__PURE__ */ i(
+          o.Content,
+          {
+            className: N({ size: m, fullScreen: t }),
+            children: [
+              x,
+              /* @__PURE__ */ a("div", { className: $(t), children: g }),
+              f
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function T({
+  title: e,
+  leftIcon: r = /* @__PURE__ */ a(_, {}),
+  rightIcon: m,
+  onLeftIconClick: t,
+  onRightIconClick: s,
+  border: l = !1
+}) {
+  return /* @__PURE__ */ i("div", { className: C(l), children: [
+    r ? /* @__PURE__ */ a("div", { className: z, children: /* @__PURE__ */ a(o.CloseTrigger, { asChild: !0, children: /* @__PURE__ */ a(
+      n,
+      {
+        severity: "ghost",
+        iconOnly: !0,
+        size: "xsmall",
+        icon: r,
+        onClick: t
+      }
+    ) }) }) : null,
+    e ? /* @__PURE__ */ a(
+      o.Title,
+      {
+        className: d({
+          hasLeftIcon: !!r,
+          hasRightIcon: !!m
+        }),
+        children: e
+      }
+    ) : /* @__PURE__ */ a(
+      "span",
+      {
+        className: d({
+          hasLeftIcon: !!r,
+          hasRightIcon: !!m
+        })
+      }
+    ),
+    m ? /* @__PURE__ */ a("div", { className: D, children: /* @__PURE__ */ a(
+      n,
+      {
+        severity: "ghost",
+        iconOnly: !0,
+        size: "xsmall",
+        icon: m,
+        onClick: s
+      }
+    ) }) : null
+  ] });
+}
+function E({
+  layout: e = "row",
+  border: r = !1,
+  children: m
+}) {
+  return /* @__PURE__ */ a("div", { className: O({ layout: e, border: r }), children: m });
+}
+export {
+  P as D,
+  E as a,
+  T as b
+};

package/dist/shared/DrawerFooter-COA137vD.js

@@ -0,0 +1,172 @@
+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 { e as y } from "./icons-_QeAcImG.js";
+const _ = (e) => {
+  switch (e) {
+    case "left":
+      return "translateX(-100%)";
+    case "right":
+      return "translateX(100%)";
+    case "top":
+      return "translateY(-100%)";
+    case "bottom":
+    case "full":
+      return "translateY(100%)";
+  }
+}, k = (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 = {
+  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) => `
+	mare:fixed mare:inset-0 mare:z-50 mare:flex
+	${v[e]}
+`, $ = {
+  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) => `
+	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]}
+	mare:ark-open:[animation:mare-drawer-enter_300ms_ease-out]
+	mare:ark-closed:[animation:mare-drawer-exit_200ms_ease-in]
+`, C = (e) => `
+	mare:grow mare:overflow-y-auto mare:px-6 mare:pb-6
+	${e ? "mare:pt-6" : "mare:pt-0"}
+`, O = (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) => `
+	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) => `
+	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 X({
+  open: e,
+  onOpenChange: a,
+  position: m = "left",
+  modal: l = !0,
+  closeOnEscape: s = !0,
+  dismissableMask: o = !0,
+  maskColor: n,
+  shadow: f = !0,
+  portalContainer: p,
+  header: c,
+  footer: x,
+  children: h,
+  "aria-label": b
+}) {
+  return /* @__PURE__ */ r(
+    t.Root,
+    {
+      open: e,
+      onOpenChange: (w) => a?.(w.open),
+      modal: l,
+      closeOnEscape: s,
+      closeOnInteractOutside: o,
+      "aria-label": b,
+      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(
+          t.Content,
+          {
+            className: j({ position: m, shadow: f }),
+            style: {
+              "--mare-drawer-from": _(m)
+            },
+            children: [
+              c,
+              /* @__PURE__ */ r("div", { className: C(!!c), children: h }),
+              x
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function Y({
+  title: e,
+  leftIcon: a = /* @__PURE__ */ r(y, {}),
+  rightIcon: m,
+  onLeftIconClick: l,
+  onRightIconClick: s,
+  border: o = !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,
+      {
+        severity: "ghost",
+        iconOnly: !0,
+        size: "xsmall",
+        icon: a,
+        onClick: l
+      }
+    ) }) }) : null,
+    e ? /* @__PURE__ */ r(
+      t.Title,
+      {
+        className: u({
+          hasLeftIcon: !!a,
+          hasRightIcon: !!m
+        }),
+        children: e
+      }
+    ) : /* @__PURE__ */ r(
+      "span",
+      {
+        className: u({
+          hasLeftIcon: !!a,
+          hasRightIcon: !!m
+        })
+      }
+    ),
+    m ? /* @__PURE__ */ r("div", { className: D, children: /* @__PURE__ */ r(
+      d,
+      {
+        severity: "ghost",
+        iconOnly: !0,
+        size: "xsmall",
+        icon: m,
+        onClick: s
+      }
+    ) }) : null
+  ] });
+}
+function E({
+  border: e = !1,
+  children: a
+}) {
+  return /* @__PURE__ */ r("div", { className: R(e), children: a });
+}
+export {
+  X as D,
+  E as a,
+  Y as b
+};

package/dist/shared/HelperText-CVWWvLCI.js

@@ -0,0 +1,46 @@
+import { jsxs as i, jsx as r, Fragment as m } from "react/jsx-runtime";
+import { useFieldContext as s, FieldRoot as c, FieldLabel as d, FieldErrorText as u, FieldHelperText as h } from "@ark-ui/react/field";
+import { x as f, g, F as x, p as l, h as y } from "./field-layout-D34MpDMB.js";
+function L({ value: e, max: o }) {
+  const a = s()?.disabled ?? !1;
+  return /* @__PURE__ */ i("span", { className: f(a), children: [
+    e.length,
+    "/",
+    o
+  ] });
+}
+function N({
+  invalid: e = !1,
+  disabled: o = !1,
+  required: t = !1,
+  children: a
+}) {
+  return /* @__PURE__ */ r(
+    c,
+    {
+      invalid: e,
+      disabled: o,
+      required: t,
+      className: g,
+      children: a
+    }
+  );
+}
+const F = "mare:pointer-events-none mare:absolute mare:left-3 mare:origin-[0] mare:transition-all mare:duration-150 mare:tpc-typography-body-m mare:text-weak mare:top-1/2 mare:-translate-y-1/2 mare:group-focus-within:top-2 mare:group-focus-within:translate-y-0 mare:group-focus-within:tpc-typography-body-xs mare:group-has-[:is(input,textarea):not(:placeholder-shown)]:top-2 mare:group-has-[:is(input,textarea):not(:placeholder-shown)]:translate-y-0 mare:group-has-[:is(input,textarea):not(:placeholder-shown)]:tpc-typography-body-xs";
+function S({ label: e, children: o }) {
+  const t = { hasFloatLabel: !0, iconSide: null }, a = `${F} mare:group-has-[.mare-icon-left_svg]:left-10 mare:group-has-[textarea]:top-2 mare:group-has-[textarea]:translate-y-0`, n = /* @__PURE__ */ i(m, { children: [
+    o,
+    /* @__PURE__ */ r(d, { className: a, children: e })
+  ] }), p = !s() ? /* @__PURE__ */ r(c, { className: l, children: n }) : /* @__PURE__ */ r("div", { className: l, children: n });
+  return /* @__PURE__ */ r(x.Provider, { value: t, children: p });
+}
+function H({ children: e }) {
+  const t = s()?.invalid ?? !1, a = y(t);
+  return t ? /* @__PURE__ */ r(u, { className: a, children: e }) : /* @__PURE__ */ r(h, { className: a, children: e });
+}
+export {
+  L as C,
+  S as F,
+  H,
+  N as a
+};

package/dist/shared/IconField-Dh6j6SL1.js

@@ -0,0 +1,78 @@
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { useFieldContext as b, FieldInput as v, FieldRoot as L } from "@ark-ui/react/field";
+import { u as d, d as x, m as S, f as g, F as y } from "./field-layout-D34MpDMB.js";
+function j({
+  value: s = "",
+  onValueChange: a,
+  size: n = "medium",
+  rounded: l = !1,
+  invalid: r = !1,
+  disabled: i = !1,
+  placeholder: o,
+  ...c
+}) {
+  const e = d(), m = !b(), f = x({
+    size: n,
+    rounded: l,
+    hasFloatLabel: e?.hasFloatLabel ?? !1,
+    iconSide: e?.iconSide ?? null
+  }), h = e?.hasFloatLabel ? " " : o, u = /* @__PURE__ */ t(
+    v,
+    {
+      ...c,
+      className: f,
+      placeholder: h,
+      value: s,
+      onChange: (F) => a?.(F.target.value)
+    }
+  );
+  return m ? /* @__PURE__ */ t(
+    L,
+    {
+      invalid: r,
+      disabled: i,
+      className: "mare:w-full",
+      children: u
+    }
+  ) : u;
+}
+function w({
+  icon: s,
+  position: a = "left",
+  disabled: n = !1,
+  onIconClick: l,
+  iconLabel: r,
+  children: i
+}) {
+  const o = d(), c = {
+    hasFloatLabel: o?.hasFloatLabel ?? !1,
+    iconSide: S(o?.iconSide ?? null, a)
+  }, e = g(a, {
+    disabled: n,
+    interactive: !!l
+  });
+  return /* @__PURE__ */ t(y.Provider, { value: c, children: /* @__PURE__ */ p(
+    "div",
+    {
+      className: `mare:relative mare:w-full mare:group ${a === "left" ? "mare-icon-left" : "mare-icon-right"}`,
+      children: [
+        i,
+        l ? /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            disabled: n,
+            onClick: l,
+            "aria-label": r,
+            className: e,
+            children: s
+          }
+        ) : /* @__PURE__ */ t("span", { className: e, children: s })
+      ]
+    }
+  ) });
+}
+export {
+  w as I,
+  j as a
+};

package/dist/shared/InputNumber-D48wsE-o.js

@@ -0,0 +1,62 @@
+import { jsx as o } from "react/jsx-runtime";
+import { NumberInput as t } from "@ark-ui/react/number-input";
+import { useFieldContext as C } from "@ark-ui/react/field";
+import { u as g, d as y } from "./field-layout-D34MpDMB.js";
+function R({
+  value: l = null,
+  onValueChange: n,
+  size: u = "medium",
+  rounded: s = !1,
+  invalid: r,
+  disabled: i,
+  readOnly: m,
+  step: c = 1,
+  clampValueOnBlur: d = !0,
+  placeholder: f,
+  id: p,
+  name: h,
+  min: b,
+  max: v,
+  formatOptions: F,
+  locale: N,
+  allowMouseWheel: I
+}) {
+  const e = g(), L = !C(), S = y({
+    size: u,
+    rounded: s,
+    hasFloatLabel: e?.hasFloatLabel ?? !1,
+    iconSide: e?.iconSide ?? null
+  }), x = e?.hasFloatLabel ? " " : f;
+  return /* @__PURE__ */ o(
+    t.Root,
+    {
+      value: l == null ? "" : String(l),
+      min: b,
+      max: v,
+      step: c,
+      formatOptions: F,
+      locale: N,
+      allowMouseWheel: I,
+      clampValueOnBlur: d,
+      disabled: i,
+      readOnly: m,
+      name: h,
+      invalid: L ? r : void 0,
+      className: "mare:w-full",
+      onValueChange: (a) => n?.(
+        a.value === "" ? null : a.valueAsNumber
+      ),
+      children: /* @__PURE__ */ o(
+        t.Input,
+        {
+          id: p,
+          className: S,
+          placeholder: x
+        }
+      )
+    }
+  );
+}
+export {
+  R as I
+};

package/dist/shared/Menu-Cv9dU1iA.js

@@ -0,0 +1,104 @@
+import { jsxs as o, jsx as r, Fragment as u } from "react/jsx-runtime";
+import { Menu as m } from "@ark-ui/react/menu";
+import { Portal as p } from "@ark-ui/react/portal";
+const h = `
+	mare:min-w-52 mare:flex mare:flex-col mare:gap-1 mare:p-2
+	mare:bg-raised mare:border mare:border-default mare:rounded-tpc-overlay
+	mare:shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+	mare:mt-2 mare:z-50 mare:outline-none
+	mare:ark-open:[animation:mare-menu-enter_120ms_cubic-bezier(0,0,0.2,1)]
+	mare:ark-closed:[animation:mare-menu-exit_100ms_linear]
+`, b = (e) => `
+	mare:group mare:flex mare:items-center mare:gap-2 mare:h-10 mare:px-3
+	mare:rounded-menu-item mare:cursor-pointer mare:select-none mare:outline-none
+	mare:overflow-hidden mare:text-inherit mare:no-underline
+	mare:tpc-typography-body-s mare:text-default mare:transition-colors mare:duration-200
+	${e.active ? "mare:bg-accent-weak" : "mare:ark-highlighted:bg-hover"}
+	mare:ark-disabled:text-disabled mare:ark-disabled:cursor-not-allowed mare:ark-disabled:pointer-events-none
+`, f = "mare:flex mare:items-center mare:shrink-0 mare:[&>svg]:size-5", x = `
+	mare:flex mare:items-center mare:h-8 mare:px-3 mare:py-1.5
+	mare:text-weak mare:tpc-typography-label-s
+`, g = "mare:border-t mare:border-default mare:my-2";
+function i(e, a) {
+  if (a) return a(e);
+  const n = e.icon;
+  return /* @__PURE__ */ o(u, { children: [
+    n ? /* @__PURE__ */ r("span", { className: f, children: n }) : null,
+    /* @__PURE__ */ r("span", { children: e.label })
+  ] });
+}
+function s({
+  item: e,
+  renderItem: a
+}) {
+  const n = b({ active: e.active }), l = e.href;
+  return l ? /* @__PURE__ */ r(
+    m.Item,
+    {
+      value: e.value,
+      disabled: e.disabled,
+      className: n,
+      asChild: !0,
+      children: /* @__PURE__ */ r(
+        "a",
+        {
+          href: l,
+          target: e.target,
+          children: i(e, a)
+        }
+      )
+    }
+  ) : /* @__PURE__ */ r(
+    m.Item,
+    {
+      value: e.value,
+      disabled: e.disabled,
+      className: n,
+      children: i(e, a)
+    }
+  );
+}
+function v({
+  entry: e,
+  renderItem: a
+}) {
+  return e.type === "separator" ? /* @__PURE__ */ r(m.Separator, { className: g }) : e.type === "group" ? /* @__PURE__ */ o(m.ItemGroup, { children: [
+    e.label ? /* @__PURE__ */ r(m.ItemGroupLabel, { className: x, children: e.label }) : null,
+    e.items.map((n) => /* @__PURE__ */ r(
+      s,
+      {
+        item: n,
+        renderItem: a
+      },
+      n.value
+    ))
+  ] }) : /* @__PURE__ */ r(
+    s,
+    {
+      item: e,
+      renderItem: a
+    }
+  );
+}
+function M({
+  trigger: e,
+  items: a,
+  onSelect: n,
+  renderItem: l,
+  portalContainer: d
+}) {
+  return /* @__PURE__ */ o(m.Root, { onSelect: (t) => n?.(t.value), children: [
+    /* @__PURE__ */ r(m.Trigger, { asChild: !0, children: e }),
+    /* @__PURE__ */ r(p, { container: d, children: /* @__PURE__ */ r(m.Positioner, { children: /* @__PURE__ */ r(m.Content, { className: h, children: a.map((t, c) => /* @__PURE__ */ r(
+      v,
+      {
+        entry: t,
+        renderItem: l
+      },
+      t.type === "item" || !t.type ? t.value : c
+    )) }) }) })
+  ] });
+}
+export {
+  M
+};