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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tpc-mare/mare-ui-components-react",
   "description": "Mare components for React (headless base, MIT). Framework-agnostic design system, React adapter.",
-  "version": "0.1.26",
+  "version": "0.1.29",
   "type": "module",
   "license": "MIT",
   "author": "The Palace Company",

package/dist/shared/Banner-C4wLe6N0.js

@@ -1,52 +0,0 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { B as d } from "./Button-DwJ5RTfQ.js";
-import { I as o } from "./IconX-CpPADKjZ.js";
-const c = `
-	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
-`, p = "mare:flex mare:grow mare:items-start mare:gap-4", g = "mare:flex mare:shrink-0 mare:items-center mare:justify-center mare:text-default mare:[&>svg]:size-6", f = "mare:flex mare:grow mare:flex-col mare:gap-2", v = "mare:tpc-typography-label-m mare:text-default", y = (e) => `mare:tpc-typography-body-s ${e ? "mare:text-disabled" : "mare:text-default"}`, x = (e, r) => r ? "disabled" : e;
-function h({
-  severity: e = "neutral",
-  title: r,
-  icon: m,
-  disabled: s = !1,
-  closable: l = !1,
-  onClose: n,
-  children: i
-}) {
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      className: c,
-      "data-severity": x(e, s),
-      children: [
-        /* @__PURE__ */ t("div", { className: p, children: [
-          m && /* @__PURE__ */ a("span", { className: g, children: m }),
-          /* @__PURE__ */ t("div", { className: f, children: [
-            r && /* @__PURE__ */ a("p", { className: v, children: r }),
-            i && /* @__PURE__ */ a("div", { className: y(s), children: i })
-          ] })
-        ] }),
-        l && /* @__PURE__ */ a(
-          d,
-          {
-            severity: "ghost",
-            iconOnly: !0,
-            size: "xsmall",
-            icon: /* @__PURE__ */ a(o, {}),
-            onClick: n,
-            "aria-label": "Close"
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  h as B
-};

package/dist/shared/FloatingActionButton-D4FK6uSs.js

@@ -1,19 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { B as n } from "./Button-DwJ5RTfQ.js";
-function e({
-  severity: r = "primary",
-  ...t
-}) {
-  return /* @__PURE__ */ o(
-    n,
-    {
-      ...t,
-      severity: r,
-      raised: !0,
-      rounded: !0
-    }
-  );
-}
-export {
-  e as F
-};

package/dist/shared/IconField-Dh6j6SL1.js

@@ -1,78 +0,0 @@
-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/ImageItem-BBy5fOl3.js

@@ -1,17 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-const r = {
-  "4:3": "mare:aspect-[4/3]",
-  "1:1": "mare:aspect-square",
-  "5:4": "mare:aspect-[5/4]",
-  "3:2": "mare:aspect-[3/2]",
-  free: "mare:aspect-auto"
-}, t = (e) => `
-	mare:w-full mare:[&_img]:h-full mare:[&_img]:w-full mare:[&_img]:object-cover
-	${r[e]}
-`;
-function c({ ratio: e = "4:3", children: a }) {
-  return /* @__PURE__ */ m("div", { className: t(e), children: a });
-}
-export {
-  c as I
-};

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

@@ -1,62 +0,0 @@
-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/Message-BNsFuQU1.js

@@ -1,70 +0,0 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { B as o } from "./Button-DwJ5RTfQ.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/Password-BMKy8dAy.js

@@ -1,95 +0,0 @@
-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/Skeleton-CAjoF-T2.js

@@ -1,29 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-const i = (e) => `
-	mare:overflow-hidden mare:animate-pulse mare:bg-neutral-weak
-	${e === "circle" ? "mare:rounded-full" : "mare:rounded-tpc-container-s"}
-`, t = (e) => e === void 0 ? void 0 : typeof e == "number" ? `${e}px` : e;
-function c({
-  shape: e = "rectangle",
-  width: a = "100%",
-  height: o = "1rem",
-  size: r,
-  ...n
-}) {
-  const d = {
-    width: t(r ?? a),
-    height: t(r ?? o)
-  };
-  return /* @__PURE__ */ m(
-    "div",
-    {
-      className: i(e),
-      "data-shape": e,
-      style: d,
-      ...n
-    }
-  );
-}
-export {
-  c as S
-};

package/dist/shared/Snackbar-CjTqCOaV.js

@@ -1,100 +0,0 @@
-import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import { Portal as g } from "@ark-ui/react/portal";
-import { Toaster as y, Toast as m, createToaster as u } from "@ark-ui/react/toast";
-import { B as b } from "./Button-DwJ5RTfQ.js";
-const h = `
-	mare:group mare:w-full mare:min-w-[20rem] mare:max-w-[429px]
-	mare:relative mare:overflow-hidden mare:rounded-tpc-snackbar
-	mare:flex mare:items-center mare:gap-3 mare:p-3 mare:pr-4 mare:min-h-13
-	mare:shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.10),0px_4px_6px_-2px_rgba(0,0,0,0.05)]
-	mare:outline-none
-	mare:[translate:var(--x)_var(--y)] mare:[scale:var(--scale)]
-	mare:[z-index:var(--z-index)] mare:[height:var(--height)]
-	mare:[opacity:var(--opacity)] mare:[will-change:translate,opacity,scale]
-	mare:[transition:translate_400ms,scale_400ms,opacity_400ms,height_400ms]
-	mare:ark-closed:[transition:translate_400ms,scale_400ms,opacity_200ms]
-	mare:ark-type-contrast:bg-inverse mare:ark-type-contrast:text-on-inverse
-	mare:ark-type-secondary:bg-raised mare:ark-type-secondary:text-default mare:ark-type-secondary:border mare:ark-type-secondary:border-default
-	mare:ark-type-error:bg-danger mare:ark-type-error:text-on-danger
-`, k = `
-	mare:flex mare:max-w-13 mare:min-w-6 mare:aspect-square mare:shrink-0
-	mare:items-center mare:justify-center mare:rounded-tpc-container-s
-`, x = (a) => `
-	mare:tpc-typography-body-s ${a ? "" : "mare:ps-1"}
-`, f = "mare:ml-auto mare:shrink-0", _ = `
-	mare:absolute mare:bottom-0 mare:left-0 mare:h-1 mare:w-0
-	mare:[background-color:currentColor]
-	mare:[animation:mare-snackbar-progress_var(--mare-snackbar-life)_linear_forwards]
-`, v = {
-  "top-left": "top-start",
-  "top-center": "top",
-  "top-right": "top-end",
-  "bottom-left": "bottom-start",
-  "bottom-center": "bottom",
-  "bottom-right": "bottom-end"
-}, w = (a) => v[a], i = 3e3, c = (a) => Math.max(a ?? i, i), l = /* @__PURE__ */ new WeakMap(), B = {
-  error: [1, 2],
-  secondary: [3, 6],
-  contrast: [6, 8]
-}, T = (a, t) => {
-  const [s, e] = B[a];
-  return t ? s : e;
-};
-function I(a = {}) {
-  const t = u({
-    placement: w(a.placement ?? "bottom-center")
-  }), s = {
-    show(e) {
-      const r = e.severity ?? "contrast";
-      return t.create({
-        description: e.detail,
-        type: r,
-        priority: T(r, !!e.action),
-        duration: c(e.life),
-        action: e.action,
-        meta: { leading: e.leading, progressBar: e.progressBar }
-      });
-    },
-    dismiss(e) {
-      t.dismiss(e);
-    },
-    update(e, r) {
-      const n = t.getVisibleToasts().find((d) => d.id === e);
-      t.update(e, {
-        description: r.detail ?? n?.description,
-        type: r.severity ?? n?.type,
-        duration: r.life != null ? c(r.life) : n?.duration,
-        action: r.action ?? n?.action,
-        meta: {
-          leading: r.leading ?? n?.meta?.leading,
-          progressBar: r.progressBar ?? n?.meta?.progressBar
-        }
-      });
-    }
-  };
-  return l.set(s, t), s;
-}
-function j({ controller: a, portalContainer: t }) {
-  const s = l.get(a);
-  if (!s)
-    throw new Error("Snackbar: controller was not created by createSnackbar().");
-  return /* @__PURE__ */ o(g, { container: t, children: /* @__PURE__ */ o(y, { toaster: s, children: (e) => {
-    const r = e.meta?.leading, n = !!e.meta?.progressBar;
-    return /* @__PURE__ */ p(m.Root, { className: h, children: [
-      r ? /* @__PURE__ */ o("div", { className: k, children: r }) : null,
-      /* @__PURE__ */ o(m.Description, { className: x(!!r), children: e.description }),
-      e.action ? /* @__PURE__ */ o("div", { className: f, children: /* @__PURE__ */ o(m.ActionTrigger, { asChild: !0, children: /* @__PURE__ */ o(b, { severity: "ghost", link: !0, size: "xsmall", children: e.action.label }) }) }) : null,
-      n ? /* @__PURE__ */ o(
-        "div",
-        {
-          className: _,
-          style: { "--mare-snackbar-life": `${e.duration}ms` }
-        }
-      ) : null
-    ] }, e.id);
-  } }) });
-}
-export {
-  j as S,
-  I as c
-};

package/dist/shared/Textarea-iJhYTZos.js

@@ -1,40 +0,0 @@
-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-D34MpDMB.js";
-function v({
-  value: l = "",
-  onValueChange: o,
-  size: s = "medium",
-  invalid: r = !1,
-  disabled: n = !1,
-  autoresize: i = !1,
-  placeholder: c,
-  ...f
-}) {
-  const e = L(), u = !x(), m = b({
-    size: s,
-    hasFloatLabel: e?.hasFloatLabel ?? !1
-  }), d = e?.hasFloatLabel ? " " : c, a = /* @__PURE__ */ t(
-    F,
-    {
-      ...f,
-      autoresize: i,
-      className: m,
-      placeholder: d,
-      value: l,
-      onChange: (h) => o?.(h.target.value)
-    }
-  );
-  return u ? /* @__PURE__ */ t(
-    p,
-    {
-      invalid: r,
-      disabled: n,
-      className: "mare:w-full",
-      children: a
-    }
-  ) : a;
-}
-export {
-  v as T
-};