@pravalabs/ui 0.0.0-stage → 1.0.0-rc.1

package/dist/Progress-_Hz8dxM4.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { u as v } from "./PravaProvider-0znpKV4G.js";
+function h({
+  value: a,
+  min: r = 0,
+  max: e = 100,
+  label: n,
+  showValue: d = !1,
+  className: p,
+  style: l,
+  ...c
+}) {
+  if (!Number.isFinite(r) || !Number.isFinite(e) || e <= r)
+    throw new RangeError(
+      "Progress max must be a finite number greater than min."
+    );
+  if (a !== void 0 && !Number.isFinite(a))
+    throw new RangeError("Progress value must be a finite number.");
+  const o = a === void 0 ? void 0 : Math.min(e, Math.max(r, a)), s = o === void 0 ? void 0 : (o - r) / (e - r) * 100, { locale: m } = v();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ...c,
+      className: ["prava-progress", p].filter(Boolean).join(" "),
+      role: "progressbar",
+      "aria-label": n,
+      "aria-valuemin": r,
+      "aria-valuemax": e,
+      "aria-valuenow": o,
+      style: {
+        ...l,
+        ...s === void 0 ? {} : { "--prava-progress-value": `${s}%` }
+      },
+      "data-indeterminate": a === void 0 ? "" : void 0,
+      children: [
+        d && /* @__PURE__ */ t("span", { className: "prava-progress__header", "aria-hidden": "true", children: [
+          /* @__PURE__ */ i("span", { children: n }),
+          s !== void 0 && /* @__PURE__ */ i("span", { className: "prava-progress__value", children: new Intl.NumberFormat(m, {
+            style: "percent",
+            maximumFractionDigits: 0
+          }).format(s / 100) })
+        ] }),
+        /* @__PURE__ */ i("span", { className: "prava-progress__track", "aria-hidden": "true", children: /* @__PURE__ */ i("span", { className: "prava-progress__indicator" }) })
+      ]
+    }
+  );
+}
+export {
+  h as P
+};

package/dist/RadioGroup-CvdV80Pg.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import { forwardRef as V, useId as E, createElement as T } from "react";
+import { u as z } from "./PravaProvider-0znpKV4G.js";
+import { b as A, u as D, C as H } from "./field-U1YinldE.js";
+const P = V(
+  function(a, n) {
+    const {
+      label: c,
+      options: u,
+      name: t,
+      value: r,
+      defaultValue: d,
+      onChange: v,
+      onBlur: f,
+      onValueChange: m,
+      required: i = !1,
+      disabled: p,
+      orientation: b = "vertical",
+      description: g,
+      error: h,
+      invalid: C,
+      id: N,
+      className: _,
+      style: y,
+      ref: k
+    } = A(a, n), q = a.field && "value" in a.field, { messages: R } = z(), j = E(), l = D({
+      id: N,
+      description: g,
+      error: h,
+      invalid: C,
+      onBlur: f,
+      onChange: (e) => {
+        v?.(e), m?.(e.currentTarget.value);
+      }
+    }), {
+      id: x,
+      "aria-invalid": B,
+      "aria-describedby": I,
+      ...F
+    } = l.controlProps;
+    return /* @__PURE__ */ o(
+      "fieldset",
+      {
+        id: x,
+        role: "radiogroup",
+        className: ["prava-field prava-radio-group", _].filter(Boolean).join(" "),
+        style: y,
+        disabled: p,
+        "aria-invalid": B,
+        "aria-required": i || void 0,
+        "aria-describedby": I,
+        "data-choice": "",
+        children: [
+          /* @__PURE__ */ o("legend", { className: "prava-field__legend", children: [
+            c,
+            i && /* @__PURE__ */ s("span", { className: "prava-label__required", children: R.required })
+          ] }),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: "prava-radio-group__options",
+              "data-orientation": b,
+              children: u.map((e, G) => /* @__PURE__ */ T(
+                H,
+                {
+                  ...F,
+                  key: e.value,
+                  ref: q && G > 0 ? void 0 : k,
+                  kind: "radio",
+                  name: t ?? j,
+                  value: e.value,
+                  label: e.label,
+                  disabled: e.disabled,
+                  required: i,
+                  checked: r === void 0 ? void 0 : r === e.value,
+                  defaultChecked: d === void 0 ? void 0 : d === e.value
+                }
+              ))
+            }
+          ),
+          l.messages
+        ]
+      }
+    );
+  }
+);
+export {
+  P as R
+};

package/dist/Select-_urp2aA_.js

@@ -0,0 +1,451 @@
+"use client";
+import { jsxs as c, jsx as r, Fragment as ge } from "react/jsx-runtime";
+import { forwardRef as Ue, useMemo as be, useState as B, useRef as v, useCallback as S, useEffect as D } from "react";
+import { b as We, u as Ge, o as _e, s as Qe, f as ye } from "./field-U1YinldE.js";
+import { p as Je } from "./overlay-9zlvgpUZ.js";
+import { u as Xe } from "./PravaProvider-0znpKV4G.js";
+const Ye = 144, we = (l) => l == null || l === "" ? [] : Array.isArray(l) ? l.map(String) : [String(l)], te = (l) => Array.from(l.options).filter((d) => d.selected && d.value).map((d) => d.value), Ne = (l, d) => l.length === d.length && l.every((w, h) => w === d[h]), K = (l) => !("value" in l), re = (l) => l.searchText ?? (typeof l.label == "string" || typeof l.label == "number" ? String(l.label) : l.value), T = (l, d) => l.normalize("NFD").replace(new RegExp("\\p{M}", "gu"), "").toLocaleLowerCase(d), Ze = () => /* @__PURE__ */ r("svg", { className: "prava-select__check", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "M3.5 8.5l3 3 6-7" }) });
+function ea(l, d) {
+  const w = l.field, {
+    options: h,
+    label: le,
+    placeholder: xe,
+    size: ke = "md",
+    placement: L = "auto",
+    multiple: o = !1,
+    searchable: N = !1,
+    renderOption: ne,
+    name: Me,
+    form: Ee,
+    required: j,
+    disabled: C,
+    value: se,
+    defaultValue: Se,
+    onValueChange: ie,
+    onChange: Ce,
+    onBlur: Ie,
+    onInvalid: Re,
+    description: Be,
+    error: De,
+    invalid: Le,
+    id: ze,
+    className: Ae,
+    style: Oe,
+    ref: ce,
+    ...z
+  } = We(
+    // Controller reads event.target.value, which holds only the first choice of a multiple select.
+    l.multiple && w && "value" in w ? {
+      ...l,
+      field: {
+        ...w,
+        onChange: (e) => w.onChange?.(te(e.target))
+      }
+    } : l,
+    d
+  ), { messages: x, locale: m } = Xe(), oe = Ge({
+    id: ze,
+    description: Be,
+    error: De,
+    invalid: Le,
+    onBlur: Ie,
+    onChange: Ce,
+    onInvalid: Re,
+    "aria-describedby": z["aria-describedby"],
+    "aria-invalid": z["aria-invalid"]
+  }), {
+    id: I,
+    "aria-invalid": de,
+    "aria-describedby": Fe,
+    ...$e
+  } = oe.controlProps, A = be(
+    () => h.flatMap((e) => K(e) ? [...e.options] : [e]),
+    [h]
+  ), [qe, U] = B(() => we(Se)), s = se !== void 0 ? we(se) : qe, [i, ue] = B(!1), [W, Pe] = B(!1), [O, pe] = B(""), [u, k] = B(), G = v(null), Q = v(null), g = v(null), F = v(null), J = v(null), b = v(null), Ve = v({ text: "", at: 0 }), He = v(s), X = v(!1), $ = S(() => {
+    const e = b.current;
+    if (!e || X.current) return;
+    const a = te(e);
+    U((t) => Ne(t, a) ? t : a);
+  }, []);
+  D(() => {
+    const e = b.current;
+    if (!e) return;
+    const a = te(e);
+    if (!Ne(a, s)) {
+      if (X.current = !0, o)
+        for (const t of Array.from(e.options))
+          t.selected = s.includes(t.value);
+      else e.value = s[0] ?? "";
+      X.current = !1;
+    }
+  });
+  const Ke = S(
+    (e) => {
+      e && (b.current = e, _e(e, "value", $), Object.defineProperty(e, "focus", {
+        configurable: !0,
+        value: (a) => g.current?.focus(a)
+      })), Qe(ce, e);
+    },
+    [ce, $]
+  ), fe = S(
+    (e) => {
+      e && _e(e, "selected", $);
+    },
+    [$]
+  ), Y = be(() => {
+    if (!N || !O) return h;
+    const e = T(O, m), a = (t) => T(re(t), m).includes(e);
+    return h.flatMap((t) => {
+      if (!K(t)) return a(t) ? [t] : [];
+      const n = t.options.filter(a);
+      return n.length ? [{ ...t, options: n }] : [];
+    });
+  }, [h, O, N, m]), p = Y.flatMap((e) => K(e) ? [...e.options] : [e]).filter((e) => !e.disabled), q = (e) => `${I}-option-${A.findIndex((a) => a.value === e)}`, Z = S(() => {
+    const e = F.current, a = Q.current;
+    !e || !a || (e.style.minInlineSize = `${a.getBoundingClientRect().width}px`, e.style.minInlineSize = getComputedStyle(e).inlineSize);
+  }, []), M = S(() => {
+    const e = F.current, a = Q.current, t = e?.querySelector(".prava-select__list");
+    if (!e || !a || !t) return;
+    const n = parseFloat(getComputedStyle(t).maxBlockSize) || 1 / 0;
+    Je(
+      a,
+      e,
+      L === "auto" ? "bottom" : L,
+      "start",
+      {
+        gap: 4,
+        contentHeight: e.offsetHeight - t.offsetHeight + Math.min(t.scrollHeight, n),
+        minBlockRoom: Ye,
+        strict: L !== "auto"
+      }
+    );
+  }, [L]), _ = S((e = !1) => {
+    ue(!1), pe(""), e && g.current?.focus();
+  }, []), ee = () => {
+    C || (g.current?.focus(), Pe(!0), ue(!0), k(
+      p.find((e) => s.includes(e.value))?.value ?? p[0]?.value
+    ));
+  };
+  D(() => {
+    const e = F.current;
+    if (!e) return;
+    if (!i) {
+      e.matches?.(":popover-open") && e.hidePopover();
+      return;
+    }
+    e.showPopover?.(), Z(), M(), N && J.current?.focus();
+    const a = (f) => {
+      G.current?.contains(f.target) || _();
+    }, t = () => {
+      Z(), M();
+    }, n = (f) => {
+      e.contains(f.target) || M();
+    };
+    return window.addEventListener("resize", t), window.addEventListener("scroll", n, !0), document.addEventListener("pointerdown", a), () => {
+      window.removeEventListener("resize", t), window.removeEventListener("scroll", n, !0), document.removeEventListener("pointerdown", a);
+    };
+  }, [i, N, Z, M, _]), D(() => {
+    i && M();
+  }, [i, Y, s.length, M]), D(() => {
+    !i || u === void 0 || document.getElementById(q(u))?.scrollIntoView?.({ block: "nearest" });
+  }, [i, u]), D(() => {
+    const e = b.current?.form;
+    if (!e) return;
+    const a = () => U(He.current);
+    return e.addEventListener("reset", a), () => e.removeEventListener("reset", a);
+  }, []);
+  const P = (e) => {
+    const a = b.current;
+    if (!a) return;
+    if (o)
+      for (const n of Array.from(a.options))
+        n.selected = e.includes(n.value);
+    else a.value = e[0] ?? "";
+    U(e), a.dispatchEvent(new Event("change", { bubbles: !0 }));
+    const t = e.flatMap((n) => A.filter((f) => f.value === n));
+    o ? ie?.(
+      e,
+      t
+    ) : t[0] && ie?.(
+      e[0],
+      t[0]
+    );
+  }, ae = (e) => {
+    if (!e.disabled) {
+      if (!o) {
+        P([e.value]), _(!0);
+        return;
+      }
+      P(
+        s.includes(e.value) ? s.filter((a) => a !== e.value) : [...s, e.value]
+      ), k(e.value);
+    }
+  }, E = (e) => {
+    const a = p[Math.max(0, Math.min(e, p.length - 1))];
+    a && k(a.value);
+  }, ve = (e) => {
+    const a = Date.now(), t = Ve.current;
+    t.text = a - t.at > 500 ? e : t.text + e, t.at = a;
+    const n = T(t.text, m), f = p.find(
+      (H) => T(re(H), m).startsWith(n)
+    );
+    f && k(f.value);
+  }, Te = (e) => {
+    const a = e.target === J.current, t = e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey;
+    if (!i) {
+      ["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key) ? (e.preventDefault(), ee()) : t ? (ee(), ve(e.key)) : e.key === "Backspace" && o && s.length && P(s.slice(0, -1));
+      return;
+    }
+    const n = p.findIndex((y) => y.value === u), H = {
+      ArrowDown: () => E(n + 1),
+      ArrowUp: () => E(n - 1),
+      PageDown: () => E(n + 10),
+      PageUp: () => E(n - 10),
+      Enter: () => {
+        const y = p[n];
+        y && ae(y);
+      },
+      Escape: () => _(!0),
+      ...!a && {
+        Home: () => E(0),
+        End: () => E(p.length - 1),
+        " ": () => {
+          const y = p[n];
+          y && ae(y);
+        }
+      }
+    }[e.key];
+    H ? (e.preventDefault(), e.stopPropagation(), H()) : e.key === "Tab" ? _() : t && !a && ve(e.key);
+  }, je = (e) => {
+    e.target !== b.current && (G.current?.contains(e.relatedTarget) || (_(), b.current?.dispatchEvent(
+      new FocusEvent("focusout", { bubbles: !0 })
+    )));
+  }, he = s.flatMap(
+    (e) => A.filter((a) => a.value === e)
+  ), V = o ? void 0 : he[0], R = `${I}-list`, me = (e) => {
+    const a = s.includes(e.value);
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        id: q(e.value),
+        role: "option",
+        className: "prava-select__option",
+        "aria-selected": a,
+        "aria-disabled": e.disabled || void 0,
+        "data-active": u === e.value || void 0,
+        onMouseDown: (t) => t.preventDefault(),
+        onMouseMove: () => {
+          !e.disabled && u !== e.value && k(e.value);
+        },
+        onClick: () => ae(e),
+        children: [
+          e.icon != null && /* @__PURE__ */ r("span", { className: "prava-select__icon", "aria-hidden": "true", children: e.icon }),
+          /* @__PURE__ */ r("span", { className: "prava-select__text", children: ne ? ne(e, { selected: a }) : /* @__PURE__ */ c(ge, { children: [
+            /* @__PURE__ */ r("span", { children: e.label }),
+            e.description != null && /* @__PURE__ */ r("span", { className: "prava-select__description", children: e.description })
+          ] }) }),
+          /* @__PURE__ */ r(Ze, {})
+        ]
+      },
+      e.value
+    );
+  };
+  return /* @__PURE__ */ c("span", { className: "prava-field", children: [
+    le != null && /* @__PURE__ */ c("label", { className: "prava-field__legend", htmlFor: I, children: [
+      le,
+      j && /* @__PURE__ */ r("span", { className: "prava-label__required", children: x.required })
+    ] }),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        ref: G,
+        className: "prava-select__root",
+        onBlur: je,
+        onKeyDown: Te,
+        onKeyUp: (e) => {
+          e.key === " " && e.target === g.current && e.preventDefault();
+        },
+        children: [
+          /* @__PURE__ */ c(
+            "div",
+            {
+              ref: Q,
+              className: ["prava-control prava-select", Ae].filter(Boolean).join(" "),
+              style: Oe,
+              "data-size": ke,
+              "data-open": i || void 0,
+              "data-invalid": de,
+              "data-disabled": C || void 0,
+              onClick: (e) => {
+                e.target === e.currentTarget && g.current?.click();
+              },
+              children: [
+                o && he.map((e) => /* @__PURE__ */ c("span", { className: "prava-select__chip", children: [
+                  e.icon != null && /* @__PURE__ */ r("span", { className: "prava-select__icon", "aria-hidden": "true", children: e.icon }),
+                  /* @__PURE__ */ r("span", { className: "prava-select__chip-label", children: e.label }),
+                  /* @__PURE__ */ r(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: -1,
+                      disabled: C,
+                      className: "prava-select__chip-remove",
+                      "aria-label": ye(
+                        x.removeOption,
+                        { label: re(e) },
+                        m
+                      ),
+                      onMouseDown: (a) => a.preventDefault(),
+                      onClick: () => P(s.filter((a) => a !== e.value)),
+                      children: /* @__PURE__ */ r("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "M4.5 4.5l7 7m0-7l-7 7" }) })
+                    }
+                  )
+                ] }, e.value)),
+                /* @__PURE__ */ r(
+                  "button",
+                  {
+                    ...z,
+                    ref: g,
+                    id: I,
+                    type: "button",
+                    role: "combobox",
+                    disabled: C,
+                    className: "prava-select__trigger",
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": i,
+                    "aria-controls": R,
+                    "aria-invalid": de,
+                    "aria-describedby": Fe,
+                    "aria-required": j || z["aria-required"],
+                    "aria-activedescendant": i && !N && u !== void 0 ? q(u) : void 0,
+                    onClick: () => i ? _() : ee(),
+                    children: V ? /* @__PURE__ */ c(ge, { children: [
+                      V.icon != null && /* @__PURE__ */ r("span", { className: "prava-select__icon", "aria-hidden": "true", children: V.icon }),
+                      /* @__PURE__ */ r("span", { className: "prava-select__value", children: V.label })
+                    ] }) : o && s.length ? /* @__PURE__ */ r("span", { className: "prava-select__sr-only", children: ye(
+                      x.selectedCount,
+                      { count: s.length },
+                      m
+                    ) }) : /* @__PURE__ */ r("span", { className: "prava-select__placeholder", children: xe })
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  "svg",
+                  {
+                    className: "prava-select__chevron",
+                    viewBox: "0 0 16 16",
+                    "aria-hidden": "true",
+                    onClick: () => g.current?.click(),
+                    children: /* @__PURE__ */ r("path", { d: "M4.5 6.25 8 9.75l3.5-3.5" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ c(
+            "select",
+            {
+              ...$e,
+              ref: Ke,
+              hidden: !0,
+              tabIndex: -1,
+              multiple: o,
+              name: Me,
+              form: Ee,
+              required: j,
+              disabled: C,
+              defaultValue: o ? s : s[0] ?? "",
+              children: [
+                !o && /* @__PURE__ */ r("option", { value: "", ref: fe }),
+                A.map((e) => /* @__PURE__ */ r(
+                  "option",
+                  {
+                    ref: fe,
+                    value: e.value,
+                    disabled: e.disabled
+                  },
+                  e.value
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ c(
+            "div",
+            {
+              ref: F,
+              popover: "manual",
+              className: "prava-select__popup",
+              "data-open": i || void 0,
+              children: [
+                W && N && /* @__PURE__ */ c("div", { className: "prava-select__search", children: [
+                  /* @__PURE__ */ c("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ r("circle", { cx: "7", cy: "7", r: "4.5" }),
+                    /* @__PURE__ */ r("path", { d: "M10.5 10.5 13.5 13.5" })
+                  ] }),
+                  /* @__PURE__ */ r(
+                    "input",
+                    {
+                      ref: J,
+                      type: "text",
+                      role: "combobox",
+                      className: "prava-select__search-input",
+                      value: O,
+                      placeholder: x.search,
+                      "aria-label": x.search,
+                      "aria-autocomplete": "list",
+                      "aria-expanded": i,
+                      "aria-controls": R,
+                      "aria-activedescendant": i && u !== void 0 ? q(u) : void 0,
+                      onChange: (e) => {
+                        pe(e.target.value), k(void 0);
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ c(
+                  "div",
+                  {
+                    id: R,
+                    role: "listbox",
+                    className: "prava-select__list",
+                    "aria-labelledby": I,
+                    "aria-multiselectable": o || void 0,
+                    children: [
+                      W && Y.map(
+                        (e, a) => K(e) ? /* @__PURE__ */ c(
+                          "div",
+                          {
+                            role: "group",
+                            "aria-labelledby": `${R}-group-${a}`,
+                            children: [
+                              /* @__PURE__ */ r(
+                                "div",
+                                {
+                                  id: `${R}-group-${a}`,
+                                  className: "prava-select__group-label",
+                                  children: e.label
+                                }
+                              ),
+                              e.options.map(me)
+                            ]
+                          },
+                          a
+                        ) : me(e)
+                      ),
+                      W && p.length === 0 && /* @__PURE__ */ r("div", { className: "prava-select__empty", role: "status", children: x.noResults })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    oe.messages
+  ] });
+}
+const sa = Ue(ea);
+export {
+  sa as S
+};

package/dist/Separator-MnFbL0eH.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+function n({
+  orientation: r = "horizontal",
+  decorative: a = !0,
+  className: o,
+  ...i
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ...i,
+      className: ["prava-separator", o].filter(Boolean).join(" "),
+      "data-orientation": r,
+      role: a ? void 0 : "separator",
+      "aria-hidden": a ? !0 : void 0,
+      "aria-orientation": a ? void 0 : r
+    }
+  );
+}
+export {
+  n as S
+};

package/dist/Skeleton-CyjiU8o1.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+function i({
+  shape: e = "rect",
+  className: a,
+  style: t,
+  ...r
+}) {
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      ...r,
+      className: ["prava-skeleton", a].filter(Boolean).join(" "),
+      "data-shape": e,
+      "aria-hidden": "true",
+      style: {
+        ...t,
+        ...e === "circle" ? { aspectRatio: "1 / 1" } : {}
+      }
+    }
+  );
+}
+export {
+  i as S
+};