@tpc-mare/mare-ui-components-react 0.1.2 → 0.1.4

package/dist/shared/DrawerFooter-DvUgumx0.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 { c as y } from "./icons-DeVfnVLm.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-D1KL6s55.js → InputNumber-D48wsE-o.js}

@@ -1,7 +1,7 @@
 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-BXKpp5E_.js";
+import { u as g, d as y } from "./field-layout-D34MpDMB.js";
 function R({
   value: l = null,
   onValueChange: n,

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
+};

package/dist/shared/SearchField-CgDz_s1O.js

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

package/dist/shared/Tag-BtbmgIwL.js

@@ -0,0 +1,36 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+const i = `
+	mare:inline-flex mare:items-center mare:justify-center mare:gap-0.5
+	mare:py-1 mare:px-1.5 mare:rounded-tag
+	mare:data-size-small:tpc-typography-label-xs mare:data-size-small:h-5.5
+	mare:data-size-medium:tpc-typography-label-xs mare:data-size-medium:h-6
+	mare:data-size-large:tpc-typography-label-s mare:data-size-large:h-8 mare:data-size-large:px-2.5
+	mare:data-severity-accent:bg-accent mare:data-severity-accent:text-on-accent
+	mare:data-severity-accent-weak:bg-accent-weak mare:data-severity-accent-weak:text-accent
+	mare:data-severity-neutral:bg-neutral-weak mare:data-severity-neutral:text-default
+	mare:data-severity-positive:bg-positive-weak mare:data-severity-positive:text-positive
+	mare:data-severity-warning:bg-warning-weak mare:data-severity-warning:text-warning
+	mare:data-severity-danger:bg-danger-weak mare:data-severity-danger:text-danger
+`, n = "mare:flex mare:items-center mare:shrink-0 mare:[&>svg]:size-3.5", d = "mare:px-0.5";
+function l({
+  severity: r = "accent",
+  size: s = "small",
+  icon: a,
+  children: e
+}) {
+  return /* @__PURE__ */ m(
+    "span",
+    {
+      className: i,
+      "data-severity": r,
+      "data-size": s,
+      children: [
+        a && /* @__PURE__ */ t("span", { className: n, children: a }),
+        e && /* @__PURE__ */ t("span", { className: d, children: e })
+      ]
+    }
+  );
+}
+export {
+  l as T
+};

package/dist/shared/{Textarea-0XAczkH1.js → Textarea-iJhYTZos.js}

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { useFieldContext as x, FieldTextarea as F, FieldRoot as p } from "@ark-ui/react/field";
-import { u as L, a as b } from "./field-layout-BXKpp5E_.js";
+import { u as L, a as b } from "./field-layout-D34MpDMB.js";
 function v({
   value: l = "",
   onValueChange: o,

package/dist/shared/{field-layout-BXKpp5E_.js → field-layout-D34MpDMB.js}

@@ -18,8 +18,9 @@ const r = `
   small: "mare:h-12 mare:pt-4 mare:pb-0"
 }, n = {
   left: "mare:pl-10",
-  right: "mare:pr-10"
-}, c = (e) => {
+  right: "mare:pr-10",
+  both: "mare:pl-10 mare:pr-10"
+}, b = (e) => {
   const a = e.hasFloatLabel ? s[e.size] : i[e.size], t = e.rounded ? "mare:rounded-full" : "", m = e.iconSide ? n[e.iconSide] : "";
   return `${r} ${a} ${t} ${m}`;
 }, d = {
@@ -28,22 +29,25 @@ const r = `
 }, u = {
   medium: "mare:pt-6 mare:pb-3",
   small: "mare:pt-5 mare:pb-2.5"
-}, b = (e) => {
+}, f = (e) => {
   const a = e.hasFloatLabel ? u[e.size] : d[e.size];
   return `${r} mare:resize-y ${a}`;
-}, g = "mare:relative mare:w-full mare:group", x = (e) => `
+}, g = "mare:relative mare:w-full mare:group", h = (e, a = {}) => `
 	mare:absolute mare:top-1/2 mare:-translate-y-1/2 mare:flex mare:items-center
-	mare:justify-center mare:text-weak mare:[&>svg]:size-5 mare:pointer-events-none
+	mare:justify-center mare:[&>svg]:size-5
+	${a.interactive ? "mare:bg-transparent mare:border-0 mare:p-0 mare:cursor-pointer mare:disabled:cursor-default" : "mare:pointer-events-none"}
+	${a.disabled ? "mare:text-disabled" : "mare:text-weak"}
 	${e === "left" ? "mare:left-3" : "mare:right-3"}
-`, h = "mare:flex mare:flex-col mare:gap-2 mare:w-full", y = (e) => `mare:tpc-typography-label-s ${e ? "mare:text-danger" : "mare:text-default"}`, v = (e) => `mare:tpc-typography-body-xs mare:ml-auto mare:shrink-0 ${e ? "mare:text-disabled" : "mare:text-weak"}`, p = l(null), $ = () => o(p);
+`, x = "mare:flex mare:flex-col mare:gap-2 mare:w-full", y = (e) => `mare:tpc-typography-label-s ${e ? "mare:text-danger" : "mare:text-default"}`, $ = (e) => `mare:tpc-typography-body-xs mare:ml-auto mare:shrink-0 ${e ? "mare:text-disabled" : "mare:text-weak"}`, p = l(null), v = () => o(p), z = (e, a) => !e || e === a ? a : "both";
 export {
   p as F,
-  b as a,
-  c as d,
-  x as f,
-  h as g,
+  f as a,
+  b as d,
+  h as f,
+  x as g,
   y as h,
+  z as m,
   g as p,
-  $ as u,
-  v as x
+  v as u,
+  $ as x
 };