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

package/dist/shared/HelperText-D656H0Lf.js

@@ -0,0 +1,103 @@
+import { jsx as r, jsxs as c, Fragment as v } from "react/jsx-runtime";
+import { useFieldContext as s, FieldInput as L, FieldRoot as u, FieldLabel as N, FieldErrorText as w, FieldHelperText as C } from "@ark-ui/react/field";
+import { u as h, d as S, x as I, g as T, F as f, p, f as H, h as P } from "./field-layout-BXKpp5E_.js";
+function $({
+  value: e = "",
+  onValueChange: a,
+  size: t = "medium",
+  rounded: l = !1,
+  invalid: n = !1,
+  disabled: d = !1,
+  placeholder: o,
+  ...g
+}) {
+  const i = h(), F = !s(), y = S({
+    size: t,
+    rounded: l,
+    hasFloatLabel: i?.hasFloatLabel ?? !1,
+    iconSide: i?.iconSide ?? null
+  }), x = i?.hasFloatLabel ? " " : o, m = /* @__PURE__ */ r(
+    L,
+    {
+      ...g,
+      className: y,
+      placeholder: x,
+      value: e,
+      onChange: (b) => a?.(b.target.value)
+    }
+  );
+  return F ? /* @__PURE__ */ r(
+    u,
+    {
+      invalid: n,
+      disabled: d,
+      className: "mare:w-full",
+      children: m
+    }
+  ) : m;
+}
+function k({ value: e, max: a }) {
+  const l = s()?.disabled ?? !1;
+  return /* @__PURE__ */ c("span", { className: I(l), children: [
+    e.length,
+    "/",
+    a
+  ] });
+}
+function B({
+  invalid: e = !1,
+  disabled: a = !1,
+  required: t = !1,
+  children: l
+}) {
+  return /* @__PURE__ */ r(
+    u,
+    {
+      invalid: e,
+      disabled: a,
+      required: t,
+      className: T,
+      children: l
+    }
+  );
+}
+const j = "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 R({ label: e, children: a }) {
+  const t = { hasFloatLabel: !0, iconSide: null }, l = `${j} mare:group-has-[.mare-icon-left_svg]:left-10 mare:group-has-[textarea]:top-2 mare:group-has-[textarea]:translate-y-0`, n = /* @__PURE__ */ c(v, { children: [
+    a,
+    /* @__PURE__ */ r(N, { className: l, children: e })
+  ] }), o = !s() ? /* @__PURE__ */ r(u, { className: p, children: n }) : /* @__PURE__ */ r("div", { className: p, children: n });
+  return /* @__PURE__ */ r(f.Provider, { value: t, children: o });
+}
+function q({
+  icon: e,
+  position: a = "left",
+  children: t
+}) {
+  const n = {
+    hasFloatLabel: h()?.hasFloatLabel ?? !1,
+    iconSide: a
+  };
+  return /* @__PURE__ */ r(f.Provider, { value: n, children: /* @__PURE__ */ c(
+    "div",
+    {
+      className: `mare:relative mare:w-full mare:group ${a === "left" ? "mare-icon-left" : "mare-icon-right"}`,
+      children: [
+        t,
+        /* @__PURE__ */ r("span", { className: H(a), children: e })
+      ]
+    }
+  ) });
+}
+function z({ children: e }) {
+  const t = s()?.invalid ?? !1, l = P(t);
+  return t ? /* @__PURE__ */ r(w, { className: l, children: e }) : /* @__PURE__ */ r(C, { className: l, children: e });
+}
+export {
+  k as C,
+  R as F,
+  z as H,
+  q as I,
+  B as a,
+  $ as b
+};

package/dist/shared/InputNumber-D1KL6s55.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-BXKpp5E_.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/ProgressSpinner-B-lrS-tu.js

@@ -0,0 +1,35 @@
+import { jsx as e } from "react/jsx-runtime";
+function n({
+  circleClass: r,
+  className: i
+}) {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: `mare:inline-block mare:[animation:spin_2s_linear_infinite] ${i ?? ""}`,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ e(
+        "svg",
+        {
+          className: "mare:size-full",
+          viewBox: "0 0 50 50",
+          children: /* @__PURE__ */ e(
+            "circle",
+            {
+              className: `mare:fill-none mare:[stroke-dashoffset:0] mare:[animation:mare-spinner-dash_1.5s_ease-in-out_infinite] ${r ?? ""}`,
+              stroke: "var(--color-fg-default)",
+              cx: "25",
+              cy: "25",
+              r: "20",
+              strokeWidth: "4",
+              strokeLinecap: "round"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  n as P
+};

package/dist/shared/RadioGroup-lw27DCoV.js

@@ -0,0 +1,133 @@
+import { jsx as e, jsxs as k } from "react/jsx-runtime";
+import { RadioGroup as r } from "@ark-ui/react/radio-group";
+const g = `
+	mare:flex mare:gap-4
+	mare:ark-vertical:flex-col
+	mare:ark-horizontal:flex-row
+	mare:ark-disabled:cursor-default
+`, z = `
+	mare:relative mare:inline-flex mare:items-center mare:gap-2
+	mare:select-none mare:cursor-pointer
+	mare:ark-disabled:cursor-default
+	mare:data-size-small:gap-1.5
+	mare:data-size-medium:gap-2
+	mare:data-size-large:gap-2.5
+`, f = `
+	mare:relative mare:inline-flex mare:items-center mare:justify-center mare:shrink-0
+	mare:rounded-full mare:border mare:border-strong mare:bg-transparent
+	mare:shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+	mare:transition-[border-width,border-color] mare:duration-200
+	mare:overflow-hidden
+
+	mare:data-size-small:w-4.5 mare:data-size-small:h-4.5
+	mare:data-size-medium:w-6 mare:data-size-medium:h-6
+	mare:data-size-large:w-8 mare:data-size-large:h-8
+
+	mare:not-ark-disabled:hover:border-accent
+
+	mare:ark-checked:border-accent
+	mare:data-size-small:ark-checked:border-[6px]
+	mare:data-size-medium:ark-checked:border-[8px]
+	mare:data-size-large:ark-checked:border-[11px]
+	mare:not-ark-disabled:ark-checked:hover:border-accent-hover
+
+	mare:ark-disabled:border-disabled!
+
+	mare:ark-invalid:border-danger!
+`, v = `
+	mare:invisible mare:rounded-full mare:bg-[var(--color-fg-on-accent)]
+
+	mare:data-size-small:w-2 mare:data-size-small:h-2
+	mare:data-size-medium:w-2.5 mare:data-size-medium:h-2.5
+	mare:data-size-large:w-3 mare:data-size-large:h-3
+
+	mare:ark-checked:visible
+	mare:ark-disabled:ark-checked:bg-disabled!
+	mare:ark-invalid:ark-checked:bg-[var(--color-fg-on-danger)]!
+`, x = `
+	mare:text-default
+	mare:data-size-small:tpc-typography-body-s
+	mare:data-size-medium:tpc-typography-body-m
+	mare:data-size-large:tpc-typography-body-l
+	mare:ark-disabled:text-disabled
+`, y = `
+	mare:sr-only
+`;
+function I({
+  items: m,
+  value: l,
+  defaultValue: s,
+  onValueChange: i,
+  size: d = "small",
+  orientation: t = "vertical",
+  disabled: o = !1,
+  invalid: c = !1,
+  readOnly: n = !1,
+  required: b = !1,
+  name: u,
+  form: h,
+  id: p
+}) {
+  return /* @__PURE__ */ e(
+    r.Root,
+    {
+      value: l,
+      defaultValue: s,
+      onValueChange: (a) => {
+        a.value && i?.(a.value);
+      },
+      orientation: t,
+      disabled: o,
+      invalid: c,
+      readOnly: n,
+      required: b,
+      name: u,
+      form: h,
+      id: p,
+      className: g,
+      children: m.map((a) => /* @__PURE__ */ k(
+        r.Item,
+        {
+          value: a.value,
+          disabled: a.disabled,
+          className: z,
+          "data-size": d,
+          children: [
+            /* @__PURE__ */ e(
+              r.ItemControl,
+              {
+                className: f,
+                "data-size": d,
+                children: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: v,
+                    "data-size": d
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e(
+              r.ItemText,
+              {
+                className: x,
+                "data-size": d,
+                children: a.label
+              }
+            ),
+            /* @__PURE__ */ e(
+              r.ItemHiddenInput,
+              {
+                className: y
+              }
+            )
+          ]
+        },
+        a.value
+      ))
+    }
+  );
+}
+export {
+  I as R
+};

package/dist/shared/SelectField-BSTmWjYy.js

@@ -0,0 +1,118 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { useMemo as w } from "react";
+import { createListCollection as S, SelectRoot as y, SelectLabel as v, SelectControl as N, SelectTrigger as C, SelectContext as I, SelectValueText as T, SelectClearTrigger as j, SelectIndicator as _, SelectPositioner as z, SelectContent as D, SelectItem as L, SelectItemText as V, SelectItemIndicator as $ } from "@ark-ui/react/select";
+import { a as F, b as M, C as P } from "./icons-DeVfnVLm.js";
+const R = {
+  small: "mare:h-10",
+  medium: "mare:h-12"
+}, q = {
+  small: "mare:tpc-typography-body-s",
+  medium: "mare:tpc-typography-body-m"
+}, A = (r) => `
+	mare:group mare:w-full mare:flex mare:items-center mare:justify-between mare:gap-3
+	${R[r]}
+	mare:px-3 mare:cursor-pointer
+	mare:rounded-input mare:border mare:border-strong mare:bg-default
+	mare:text-default ${q[r]}
+	mare:ark-open:outline-solid mare:ark-open:outline-2 mare:ark-open:outline-accent mare:ark-open:-outline-offset-2
+	mare:ark-disabled:text-disabled mare:ark-disabled:border-disabled-default mare:ark-disabled:cursor-not-allowed
+	mare:data-[invalid]:outline-solid mare:data-[invalid]:outline-2 mare:data-[invalid]:outline-danger mare:data-[invalid]:-outline-offset-2
+`, l = "mare:flex-auto mare:text-left mare:truncate mare:data-[placeholder-shown]:text-weak", B = "mare:flex mare:items-center mare:shrink-0 mare:text-lg mare:transition-transform mare:ark-open:rotate-180 mare:text-default", E = "mare:flex mare:items-center mare:shrink-0 mare:text-base mare:cursor-pointer mare:text-default mare:hover:text-weak", G = "mare:flex mare:items-center mare:shrink-0 mare:text-weak mare:[&>svg]:size-5", H = `
+	mare:flex mare:flex-col mare:gap-0.5 mare:p-1
+	mare:rounded-input mare:border mare:border-default mare:bg-raised
+	mare:shadow-[0_2px_6px_0_rgba(0,0,0,0.16)]
+	mare:max-h-72 mare:overflow-y-auto
+	mare:min-w-[var(--reference-width)]
+	mare:z-50
+`, J = `
+	mare:group/option mare:flex mare:items-center mare:justify-between mare:gap-2
+	mare:w-full mare:min-h-8 mare:py-2 mare:px-3 mare:cursor-pointer mare:rounded-menu-item
+	mare:tpc-typography-body-s mare:text-default
+	mare:ark-highlighted:bg-hover
+	mare:ark-selected:bg-accent-weak mare:ark-selected:text-accent
+	mare:ark-disabled:text-disabled mare:ark-disabled:cursor-not-allowed
+`, K = "mare:flex mare:items-center mare:text-accent", Q = "mare:tpc-typography-label-s mare:text-default mare:mb-1.5 mare:block";
+function Z({
+  value: r = null,
+  onValueChange: d,
+  options: t,
+  placeholder: o = "Select…",
+  size: u = "small",
+  disabled: p = !1,
+  invalid: f = !1,
+  clearable: h = !1,
+  label: n,
+  leadingIcon: s,
+  indicator: x,
+  clearIcon: b,
+  checkIcon: g,
+  renderValue: c,
+  renderOption: i
+}) {
+  const k = w(
+    () => S({
+      items: t,
+      itemToValue: (a) => a.value,
+      itemToString: (a) => a.label,
+      isItemDisabled: (a) => !!a.disabled
+    }),
+    [t]
+  );
+  return /* @__PURE__ */ m(
+    y,
+    {
+      collection: k,
+      value: r == null ? [] : [r],
+      disabled: p,
+      invalid: f,
+      onValueChange: (a) => d?.(a.value[0] ?? null),
+      children: [
+        n && /* @__PURE__ */ e(v, { className: Q, children: n }),
+        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ m(C, { className: A(u), children: [
+          s && /* @__PURE__ */ e("span", { className: G, children: s }),
+          c ? /* @__PURE__ */ e(I, { children: (a) => a.selectedItems.length > 0 ? /* @__PURE__ */ e("span", { className: l, children: c(
+            a.selectedItems[0]
+          ) }) : /* @__PURE__ */ e(
+            "span",
+            {
+              className: l,
+              style: {
+                color: "var(--color-fg-weak)"
+              },
+              children: o
+            }
+          ) }) : /* @__PURE__ */ e(
+            T,
+            {
+              className: l,
+              placeholder: o
+            }
+          ),
+          h && /* @__PURE__ */ e(j, { className: E, children: b ?? /* @__PURE__ */ e(F, {}) }),
+          /* @__PURE__ */ e(_, { className: B, children: x ?? /* @__PURE__ */ e(M, {}) })
+        ] }) }),
+        /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(D, { className: H, children: t.map((a) => /* @__PURE__ */ m(
+          L,
+          {
+            item: a,
+            className: J,
+            children: [
+              /* @__PURE__ */ e(V, { children: i ? i(a) : a.label }),
+              /* @__PURE__ */ e(
+                $,
+                {
+                  className: K,
+                  children: g ?? /* @__PURE__ */ e(P, {})
+                }
+              )
+            ]
+          },
+          a.value
+        )) }) })
+      ]
+    }
+  );
+}
+export {
+  Z as S
+};

package/dist/shared/Switch-D6E2OmgE.js

@@ -0,0 +1,104 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { Switch as a } from "@ark-ui/react/switch";
+const z = `
+	mare:inline-flex mare:items-center mare:gap-2
+	mare:select-none mare:cursor-pointer
+	mare:ark-disabled:cursor-default
+`, g = `
+	mare:inline-flex mare:shrink-0 mare:items-center mare:px-0.5
+	mare:rounded-full mare:border mare:border-transparent
+	mare:bg-neutral
+	mare:shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+	mare:transition-colors mare:duration-200
+
+	mare:data-size-small:w-9 mare:data-size-small:h-5.5
+	mare:data-size-medium:w-13 mare:data-size-medium:h-8
+	mare:data-size-large:w-16 mare:data-size-large:h-9
+
+	mare:ark-checked:bg-accent
+	mare:not-ark-disabled:ark-checked:hover:bg-accent-hover
+
+	mare:ark-disabled:bg-disabled!
+
+	mare:ark-invalid:border-danger
+`, k = `
+	mare:rounded-full mare:bg-default
+	mare:transition-transform mare:duration-300
+
+	mare:data-size-small:w-4.5 mare:data-size-small:h-4.5
+	mare:data-size-medium:w-7 mare:data-size-medium:h-7
+	mare:data-size-large:w-8 mare:data-size-large:h-8
+
+	mare:data-size-small:ark-checked:translate-x-3.5
+	mare:data-size-medium:ark-checked:translate-x-5
+	mare:data-size-large:ark-checked:translate-x-7
+`, f = `
+	mare:text-default
+	mare:data-size-small:tpc-typography-body-s
+	mare:data-size-medium:tpc-typography-body-m
+	mare:data-size-large:tpc-typography-body-l
+	mare:ark-disabled:text-disabled
+`, x = `
+	mare:sr-only
+`;
+function N({
+  checked: t,
+  defaultChecked: s,
+  onCheckedChange: d,
+  children: m,
+  size: r = "small",
+  disabled: l = !1,
+  invalid: i = !1,
+  readOnly: n = !1,
+  required: o = !1,
+  name: c,
+  value: h = "on",
+  id: u
+}) {
+  return /* @__PURE__ */ p(
+    a.Root,
+    {
+      checked: t,
+      defaultChecked: s,
+      onCheckedChange: (b) => {
+        d?.(b.checked);
+      },
+      disabled: l,
+      invalid: i,
+      readOnly: n,
+      required: o,
+      name: c,
+      value: h,
+      id: u,
+      className: z,
+      children: [
+        /* @__PURE__ */ e(
+          a.Control,
+          {
+            className: g,
+            "data-size": r,
+            children: /* @__PURE__ */ e(
+              a.Thumb,
+              {
+                className: k,
+                "data-size": r
+              }
+            )
+          }
+        ),
+        m && /* @__PURE__ */ e(
+          a.Label,
+          {
+            className: f,
+            "data-size": r,
+            children: m
+          }
+        ),
+        /* @__PURE__ */ e(a.HiddenInput, { className: x })
+      ]
+    }
+  );
+}
+export {
+  N as S
+};

package/dist/shared/Tabs-BqIorZYD.js

@@ -0,0 +1,66 @@
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
+import { TabsRoot as c, TabList as u, TabTrigger as b, TabIndicator as p, TabContent as f } from "@ark-ui/react/tabs";
+const d = {
+  small: "mare:tpc-typography-label-s",
+  medium: "mare:tpc-typography-label-m"
+}, v = "mare:w-full", h = (a) => `
+	mare:relative mare:flex ${a ? "mare:w-full" : "mare:w-fit"}
+	mare:border-b mare:border-default
+`, x = (a, r) => `
+	mare:group/tab mare:relative mare:cursor-pointer mare:select-none mare:whitespace-nowrap
+	mare:h-12 mare:px-4 mare:flex mare:items-center mare:justify-center mare:gap-2
+	${r ? "mare:flex-1" : ""}
+	${d[a]}
+	mare:text-weak mare:hover:text-default
+	mare:ark-active:text-accent
+	mare:ark-disabled:opacity-60 mare:ark-disabled:pointer-events-none
+	mare:focus-visible:outline mare:focus-visible:outline-1 mare:focus-visible:outline-accent mare:focus-visible:-outline-offset-1
+`, g = `
+	mare:absolute mare:bottom-0 mare:h-0.5 mare:bg-accent
+	mare:transition-[left,width] mare:duration-200 mare:ease-[cubic-bezier(0.35,0,0.25,1)]
+`, w = "mare:pt-3.5 mare:pb-4.5 mare:px-4.5 mare:text-default mare:focus-visible:outline-none";
+function N({
+  value: a,
+  onValueChange: r,
+  items: m,
+  size: i = "small",
+  fluid: t = !1,
+  renderTab: s,
+  renderPanel: n
+}) {
+  return /* @__PURE__ */ o(
+    c,
+    {
+      value: a,
+      className: v,
+      onValueChange: (e) => r?.(e.value),
+      children: [
+        /* @__PURE__ */ o(u, { className: h(t), children: [
+          m.map((e) => /* @__PURE__ */ l(
+            b,
+            {
+              value: e.value,
+              disabled: e.disabled,
+              className: x(i, t),
+              children: s ? s(e) : e.label
+            },
+            e.value
+          )),
+          /* @__PURE__ */ l(p, { className: g })
+        ] }),
+        m.map((e) => /* @__PURE__ */ l(
+          f,
+          {
+            value: e.value,
+            className: w,
+            children: n?.(e)
+          },
+          e.value
+        ))
+      ]
+    }
+  );
+}
+export {
+  N as T
+};

package/dist/shared/Textarea-0XAczkH1.js

@@ -0,0 +1,40 @@
+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";
+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
+};