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

package/dist/Dialog-D3-sT_1Z.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsxs as u, Fragment as E, jsx as a } from "react/jsx-runtime";
+import { forwardRef as H, useRef as _, useImperativeHandle as R, useId as S, useEffect as C, useContext as q, createContext as z } from "react";
+import { u as F, l as K, m as O, c as b } from "./overlay-9zlvgpUZ.js";
+import { u as A } from "./useControllable-C2Te1pSd.js";
+import { u as G } from "./PravaProvider-0znpKV4G.js";
+const y = z(() => {
+});
+function W({ children: p }) {
+  const c = q(y);
+  return b(p, { onClick: c });
+}
+const X = H(
+  function({
+    title: c,
+    description: d,
+    footer: g,
+    trigger: h,
+    open: j,
+    defaultOpen: B = !1,
+    onOpenChange: x,
+    modal: l = !0,
+    dismissible: f = !0,
+    hideClose: D,
+    size: k = "md",
+    classNames: n,
+    className: w,
+    children: v,
+    id: P,
+    ...i
+  }, T) {
+    const { messages: $ } = G(), [o, r] = A(
+      j,
+      B,
+      x
+    ), s = _(null);
+    R(T, () => s.current);
+    const I = S(), t = P ?? I, m = _(!1);
+    C(() => {
+      const e = s.current;
+      e && (o && !e.open ? (l ? e.showModal() : e.show(), e.querySelector("[data-autofocus]")?.focus()) : !o && e.open && e.close());
+    }, [o, l]);
+    const M = F(o, s);
+    C(() => o && l ? K() : void 0, [o, l]);
+    const N = O(i, {
+      // The browser's own Escape path, which also covers focus sitting outside the dialog.
+      onCancel: (e) => {
+        e.preventDefault(), f && r(!1);
+      },
+      // Keeps state in sync when something inside closes it, such as `<form method="dialog">`.
+      onClose: () => {
+        o && r(!1);
+      },
+      onKeyDown: (e) => {
+        e.key !== "Escape" || e.defaultPrevented || (e.preventDefault(), e.stopPropagation(), f && r(!1));
+      },
+      // ::backdrop presses target the dialog itself; the panel covers everything else.
+      onPointerDown: (e) => {
+        m.current = e.target === e.currentTarget;
+      },
+      onClick: (e) => {
+        l && f && m.current && e.target === e.currentTarget && r(!1);
+      }
+    });
+    return /* @__PURE__ */ u(E, { children: [
+      h && b(h, {
+        "aria-haspopup": "dialog",
+        "aria-expanded": o,
+        "aria-controls": t,
+        onClick: (e) => {
+          e.currentTarget.focus(), r(!0);
+        }
+      }),
+      /* @__PURE__ */ a(
+        "dialog",
+        {
+          ...i,
+          ...N,
+          ref: s,
+          id: t,
+          className: ["prava-dialog", w].filter(Boolean).join(" "),
+          "data-size": k,
+          "data-modal": l ? "" : void 0,
+          "aria-labelledby": i["aria-labelledby"] ?? `${t}-title`,
+          "aria-describedby": i["aria-describedby"] ?? (d != null ? `${t}-description` : void 0),
+          children: M && /* @__PURE__ */ a(y.Provider, { value: () => r(!1), children: /* @__PURE__ */ u("div", { className: "prava-dialog__panel", children: [
+            /* @__PURE__ */ u(
+              "header",
+              {
+                className: ["prava-dialog__header", n?.header].filter(Boolean).join(" "),
+                children: [
+                  /* @__PURE__ */ a(
+                    "h2",
+                    {
+                      id: `${t}-title`,
+                      className: ["prava-dialog__title", n?.title].filter(Boolean).join(" "),
+                      children: c
+                    }
+                  ),
+                  d != null && /* @__PURE__ */ a(
+                    "p",
+                    {
+                      id: `${t}-description`,
+                      className: [
+                        "prava-dialog__description",
+                        n?.description
+                      ].filter(Boolean).join(" "),
+                      children: d
+                    }
+                  )
+                ]
+              }
+            ),
+            v != null && /* @__PURE__ */ a(
+              "div",
+              {
+                className: ["prava-dialog__body", n?.body].filter(Boolean).join(" "),
+                children: v
+              }
+            ),
+            g != null && /* @__PURE__ */ a(
+              "footer",
+              {
+                className: ["prava-dialog__footer", n?.footer].filter(Boolean).join(" "),
+                children: g
+              }
+            ),
+            !D && /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                className: ["prava-dialog__close", n?.close].filter(Boolean).join(" "),
+                "aria-label": $.close,
+                onClick: () => r(!1),
+                children: /* @__PURE__ */ a("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "M4 4l8 8M12 4l-8 8" }) })
+              }
+            )
+          ] }) })
+        }
+      )
+    ] });
+  }
+);
+export {
+  X as D,
+  W as a
+};

package/dist/Drawer-BRzJmvQx.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { a as n, D as i } from "./Dialog-D3-sT_1Z.js";
+const p = n, c = t(
+  function({ placement: a = "end", className: r, ...o }, e) {
+    return /* @__PURE__ */ s(
+      i,
+      {
+        ...o,
+        ref: e,
+        className: ["prava-drawer", r].filter(Boolean).join(" "),
+        "data-placement": a
+      }
+    );
+  }
+);
+export {
+  c as D,
+  p as a
+};

package/dist/DropdownMenu-CFa2vgXi.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsxs as g, jsx as s, Fragment as S } from "react/jsx-runtime";
+import { useRef as y, useId as j, useCallback as L } from "react";
+import { a as M, b as q, c as B } from "./overlay-9zlvgpUZ.js";
+import { u as H } from "./useControllable-C2Te1pSd.js";
+const R = 500;
+function Q({
+  trigger: w,
+  items: x,
+  placement: A = "bottom",
+  align: _ = "start",
+  open: E,
+  defaultOpen: C = !1,
+  onOpenChange: N,
+  className: P,
+  id: T,
+  ...$
+}) {
+  const [l, a] = H(E, C, N), u = y(null), c = y(null), I = j(), i = T ?? I, b = w.props.id ?? `${i}-trigger`, K = y({ text: "", at: 0 });
+  M(l, u, c, A, _), q(
+    l,
+    u,
+    L(() => a(!1), [a])
+  );
+  const f = () => Array.from(
+    c.current?.querySelectorAll('[role="menuitem"]') ?? []
+  ), h = () => u.current?.firstElementChild, v = (e) => {
+    a(!0), requestAnimationFrame(() => {
+      const o = f();
+      (e === "menu" ? c.current : e === "first" ? o[0] : o[o.length - 1])?.focus();
+    });
+  }, D = () => {
+    a(!1), h()?.focus();
+  }, F = (e) => {
+    const o = Date.now(), r = K.current;
+    r.text = o - r.at > R ? e : r.text + e, r.at = o;
+    const n = f(), t = n.indexOf(document.activeElement), d = r.text.split("").every((m) => m === e) ? e : r.text, p = d.length > 1 ? 0 : 1;
+    [
+      ...n.slice(t + p),
+      ...n.slice(0, t + p)
+    ].find((m) => m.textContent?.trim().toLowerCase().startsWith(d))?.focus();
+  }, O = (e) => {
+    const o = f(), r = o.indexOf(document.activeElement), n = (p) => o[(p + o.length) % o.length]?.focus(), d = {
+      ArrowDown: () => n(r + 1),
+      ArrowUp: () => n(r < 0 ? -1 : r - 1),
+      Home: () => n(0),
+      End: () => n(-1),
+      Escape: D
+    }[e.key];
+    d ? (e.preventDefault(), e.stopPropagation(), d()) : e.key === "Tab" ? (a(!1), h()?.focus()) : e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey && F(e.key.toLowerCase());
+  }, k = (e, o) => {
+    const r = {
+      role: "menuitem",
+      tabIndex: -1,
+      className: "prava-dropdown-menu__item",
+      "data-tone": e.tone === "danger" ? "danger" : void 0,
+      "aria-disabled": e.disabled || void 0,
+      onClick: (t) => {
+        if (e.disabled) {
+          t.preventDefault();
+          return;
+        }
+        D(), e.onSelect?.();
+      },
+      // Hover and keyboard share one highlight, so only one row ever looks active.
+      onPointerMove: (t) => {
+        t.pointerType === "mouse" && t.currentTarget.focus();
+      }
+    }, n = /* @__PURE__ */ g(S, { children: [
+      e.icon != null && /* @__PURE__ */ s("span", { className: "prava-dropdown-menu__icon", "aria-hidden": "true", children: e.icon }),
+      /* @__PURE__ */ s("span", { className: "prava-dropdown-menu__label", children: e.label })
+    ] });
+    return e.href ? /* @__PURE__ */ s("a", { ...r, href: e.disabled ? void 0 : e.href, children: n }, o) : /* @__PURE__ */ s("button", { type: "button", ...r, children: n }, o);
+  };
+  return /* @__PURE__ */ g("span", { ref: u, className: "prava-floating-root", children: [
+    B(w, {
+      id: b,
+      "aria-haspopup": "menu",
+      "aria-expanded": l,
+      "aria-controls": i,
+      // detail is 0 for Enter and Space, which land on the first item; a pointer lands on the menu.
+      onClick: (e) => {
+        l ? a(!1) : v(e.detail === 0 ? "first" : "menu");
+      },
+      onKeyDown: (e) => {
+        e.key !== "ArrowDown" && e.key !== "ArrowUp" || (e.preventDefault(), v(e.key === "ArrowDown" ? "first" : "last"));
+      }
+    }),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        "aria-labelledby": b,
+        ...$,
+        ref: c,
+        id: i,
+        role: "menu",
+        tabIndex: -1,
+        popover: "manual",
+        className: ["prava-floating prava-dropdown-menu", P].filter(Boolean).join(" "),
+        "data-open": l ? "" : void 0,
+        onKeyDown: O,
+        onPointerLeave: () => c.current?.focus(),
+        children: x.map((e, o) => "separator" in e ? /* @__PURE__ */ s(
+          "div",
+          {
+            role: "separator",
+            className: "prava-dropdown-menu__separator"
+          },
+          o
+        ) : "items" in e ? /* @__PURE__ */ g(
+          "div",
+          {
+            role: "group",
+            "aria-labelledby": `${i}-group-${o}`,
+            children: [
+              /* @__PURE__ */ s(
+                "div",
+                {
+                  id: `${i}-group-${o}`,
+                  className: "prava-dropdown-menu__group-label",
+                  children: e.label
+                }
+              ),
+              e.items.map(
+                (r, n) => k(r, `${o}-${n}`)
+              )
+            ]
+          },
+          o
+        ) : k(e, String(o)))
+      }
+    )
+  ] });
+}
+export {
+  Q as D
+};

package/dist/FormField-CoC946w9.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { cloneElement as u } from "react";
+import { u as f, F as v } from "./field-U1YinldE.js";
+import { L as h } from "./Label-DYOFzyEM.js";
+const x = /* @__PURE__ */ new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "file",
+  "color",
+  "hidden",
+  "submit",
+  "reset",
+  "button",
+  "image"
+]);
+function j({
+  label: n,
+  control: a,
+  description: o,
+  error: s,
+  required: i = !1,
+  id: d,
+  className: l,
+  ...m
+}) {
+  const e = a.props, c = a.type === "textarea" || a.type === "select" || a.type === "input" && !x.has(e.type ?? "text"), r = f({
+    id: d ?? e.id,
+    description: o,
+    error: s,
+    onBlur: e.onBlur,
+    onChange: e.onChange,
+    onInvalid: e.onInvalid,
+    "aria-describedby": e["aria-describedby"],
+    "aria-invalid": e["aria-invalid"]
+  });
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      ...m,
+      className: ["prava-field prava-form-field", l].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ t(h, { htmlFor: r.id, required: i, children: n }),
+        /* @__PURE__ */ t(v.Provider, { value: !0, children: u(a, {
+          ...r.controlProps,
+          required: i || e.required,
+          "aria-required": i || e["aria-required"],
+          ...c && {
+            className: ["prava-control", e.className].filter(Boolean).join(" "),
+            "data-size": e["data-size"] ?? "md"
+          }
+        }) }),
+        r.messages
+      ]
+    }
+  );
+}
+export {
+  j as F
+};

package/dist/Grid-vTrChm2w.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+const c = m(function({
+  columns: r,
+  minColumnWidth: a,
+  gap: i = 4,
+  as: o = "div",
+  className: t,
+  style: d,
+  ...n
+}, s) {
+  return /* @__PURE__ */ e(
+    o,
+    {
+      ...n,
+      ref: s,
+      className: ["prava-grid", t].filter(Boolean).join(" "),
+      "data-gap": i,
+      "data-columns": r,
+      style: {
+        "--prava-grid-columns": r,
+        "--prava-grid-min": a,
+        ...d
+      }
+    }
+  );
+});
+export {
+  c as G
+};

package/dist/Input-B97l8Dj0.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { forwardRef as j } from "react";
+import { b as x, u as z } from "./field-U1YinldE.js";
+const w = j(
+  function(c, u) {
+    const {
+      size: a = "md",
+      invalid: m,
+      label: o,
+      startIcon: e,
+      endIcon: r,
+      disabledReason: d,
+      description: v,
+      error: b,
+      id: h,
+      placeholder: t,
+      className: f,
+      onBlur: _,
+      onChange: N,
+      onInvalid: I,
+      ref: y,
+      ...i
+    } = x(c, u), l = !!o, s = z({
+      id: h,
+      description: i.disabled && d ? d : v,
+      error: b,
+      invalid: m,
+      onBlur: _,
+      onChange: N,
+      onInvalid: I,
+      "aria-describedby": i["aria-describedby"],
+      "aria-invalid": i["aria-invalid"]
+    });
+    return /* @__PURE__ */ p("span", { className: "prava-field prava-input-field", children: [
+      /* @__PURE__ */ p(
+        "span",
+        {
+          className: "prava-input__control",
+          "data-has-start-icon": e != null || void 0,
+          "data-has-end-icon": r != null || void 0,
+          children: [
+            /* @__PURE__ */ n(
+              "input",
+              {
+                ...i,
+                ...s.controlProps,
+                ref: y,
+                placeholder: l ? t ?? " " : t,
+                size: typeof a == "number" ? a : void 0,
+                className: ["prava-control prava-input", f].filter(Boolean).join(" "),
+                "data-size": typeof a == "number" ? "md" : a,
+                "data-has-label": l || void 0
+              }
+            ),
+            e != null && /* @__PURE__ */ n(
+              "span",
+              {
+                className: "prava-input__icon prava-input__icon--start",
+                "aria-hidden": "true",
+                children: e
+              }
+            ),
+            r != null && /* @__PURE__ */ n(
+              "span",
+              {
+                className: "prava-input__icon prava-input__icon--end",
+                "aria-hidden": "true",
+                children: r
+              }
+            ),
+            l && /* @__PURE__ */ n("label", { className: "prava-input__label", htmlFor: s.id, children: o })
+          ]
+        }
+      ),
+      s.messages
+    ] });
+  }
+);
+export {
+  w as I
+};

package/dist/Label-DYOFzyEM.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { u as i } from "./PravaProvider-0znpKV4G.js";
+function t({
+  required: e = !1,
+  className: r,
+  children: s,
+  ...l
+}) {
+  const { messages: n } = i();
+  return /* @__PURE__ */ o(
+    "label",
+    {
+      ...l,
+      className: ["prava-label", r].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ a("span", { children: s }),
+        e && /* @__PURE__ */ a("span", { className: "prava-label__required", children: n.required })
+      ]
+    }
+  );
+}
+export {
+  t as L
+};

package/dist/Popover-C9Vgtm3q.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsxs as i, jsx as d, Fragment as C } from "react/jsx-runtime";
+import { useRef as c, useId as k, useCallback as D, useEffect as E } from "react";
+import { u as I, a as N, b as w, c as F } from "./overlay-9zlvgpUZ.js";
+import { u as K } from "./useControllable-C2Te1pSd.js";
+function S({
+  trigger: u,
+  title: s,
+  placement: p = "bottom",
+  align: f = "start",
+  open: m,
+  defaultOpen: b = !1,
+  onOpenChange: g,
+  classNames: v,
+  className: x,
+  children: h,
+  id: P,
+  ...y
+}) {
+  const [e, t] = K(m, b, g), a = c(null), n = c(null), j = k(), r = P ?? j, B = I(e, n);
+  return N(e, a, n, p, f), w(
+    e,
+    a,
+    D(() => t(!1), [t])
+  ), E(() => {
+    if (!e) return;
+    const o = n.current;
+    (o?.querySelector(
+      "a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex]:not([tabindex='-1'])"
+    ) ?? o)?.focus();
+  }, [e]), /* @__PURE__ */ i(
+    "span",
+    {
+      ref: a,
+      className: "prava-floating-root",
+      onKeyDown: (o) => {
+        o.key !== "Escape" || !e || o.defaultPrevented || (o.preventDefault(), o.stopPropagation(), t(!1), a.current?.firstElementChild?.focus());
+      },
+      onBlur: (o) => {
+        const l = o.relatedTarget;
+        e && l && !a.current?.contains(l) && t(!1);
+      },
+      children: [
+        F(u, {
+          "aria-haspopup": "dialog",
+          "aria-expanded": e,
+          "aria-controls": r,
+          onClick: () => t(!e)
+        }),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            role: "dialog",
+            tabIndex: -1,
+            "aria-labelledby": s != null ? `${r}-title` : void 0,
+            ...y,
+            ref: n,
+            id: r,
+            popover: "manual",
+            className: ["prava-floating prava-popover", x].filter(Boolean).join(" "),
+            "data-open": e ? "" : void 0,
+            children: B && /* @__PURE__ */ i(C, { children: [
+              s != null && /* @__PURE__ */ d(
+                "div",
+                {
+                  id: `${r}-title`,
+                  className: ["prava-popover__title", v?.title].filter(Boolean).join(" "),
+                  children: s
+                }
+              ),
+              h
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  S as P
+};

package/dist/PravaProvider-0znpKV4G.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { useContext as n, useMemo as m, createContext as d } from "react";
+const v = {
+  required: "Required",
+  loading: "Loading",
+  close: "Close",
+  dismiss: "Dismiss",
+  notifications: "Notifications",
+  search: "Search",
+  noResults: "No results",
+  removeOption: "Remove {label}",
+  selectedCount: "{count} selected",
+  valueMissing: "Fill in this field.",
+  valueMissingChoice: "Select an option.",
+  typeMismatchEmail: "Enter a valid email address.",
+  typeMismatchUrl: "Enter a valid URL.",
+  badInput: "Enter a valid value.",
+  patternMismatch: "Match the requested format.",
+  tooShort: "Use at least {minLength} characters.",
+  tooLong: "Use no more than {maxLength} characters.",
+  rangeUnderflow: "Enter {min} or more.",
+  rangeOverflow: "Enter {max} or less.",
+  stepMismatch: "Enter a valid value."
+}, s = d({
+  direction: "ltr",
+  locale: "en",
+  messages: v
+}), g = () => n(s);
+function p({
+  direction: e = "ltr",
+  locale: a,
+  messages: r,
+  theme: i,
+  children: l
+}) {
+  const t = n(s), c = m(
+    () => ({
+      direction: e,
+      locale: a ?? t.locale,
+      messages: { ...t.messages, ...r }
+    }),
+    [e, a, r, t]
+  );
+  return /* @__PURE__ */ o(s.Provider, { value: c, children: /* @__PURE__ */ o(
+    "div",
+    {
+      className: "prava-provider",
+      dir: e,
+      lang: a,
+      "data-prava-theme": i,
+      children: l
+    }
+  ) });
+}
+export {
+  p as P,
+  g as u
+};