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

package/dist/Spinner-Da7h4BDn.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as n, jsxs as a } from "react/jsx-runtime";
+function u() {
+  return /* @__PURE__ */ a(
+    "svg",
+    {
+      className: "prava-spinner__indicator",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ n("circle", { className: "prava-spinner__track", cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ n("circle", { cx: "12", cy: "12", r: "9" })
+      ]
+    }
+  );
+}
+function l() {
+  return /* @__PURE__ */ a("span", { className: "prava-spinner__dots", "aria-hidden": "true", children: [
+    /* @__PURE__ */ n("span", {}),
+    /* @__PURE__ */ n("span", {}),
+    /* @__PURE__ */ n("span", {})
+  ] });
+}
+function _() {
+  return /* @__PURE__ */ a("span", { className: "prava-spinner__bars", "aria-hidden": "true", children: [
+    /* @__PURE__ */ n("span", {}),
+    /* @__PURE__ */ n("span", {}),
+    /* @__PURE__ */ n("span", {})
+  ] });
+}
+function h() {
+  return /* @__PURE__ */ n("span", { className: "prava-spinner__pulse", "aria-hidden": "true" });
+}
+function m() {
+  return /* @__PURE__ */ a("span", { className: "prava-spinner__bounce", "aria-hidden": "true", children: [
+    /* @__PURE__ */ n("span", {}),
+    /* @__PURE__ */ n("span", {}),
+    /* @__PURE__ */ n("span", {})
+  ] });
+}
+const v = {
+  spinner: u,
+  dots: l,
+  bars: _,
+  pulse: h,
+  bounce: m
+};
+function N({
+  label: r,
+  size: i = "md",
+  variant: e = "spinner",
+  tone: p = "primary",
+  color: s,
+  className: t,
+  style: c,
+  ...d
+}) {
+  const o = v[e];
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      ...d,
+      style: { ...c, ...s ? { color: s } : {} },
+      className: ["prava-spinner", t].filter(Boolean).join(" "),
+      "data-size": i,
+      "data-variant": e,
+      "data-tone": p,
+      role: r ? "status" : void 0,
+      "aria-label": r,
+      "aria-hidden": r ? void 0 : !0,
+      children: /* @__PURE__ */ n(o, {})
+    }
+  );
+}
+export {
+  N as S
+};

package/dist/Stack-DNtmh6BN.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+const v = f(function({
+  orientation: a = "vertical",
+  gap: t = 4,
+  align: o,
+  justify: r,
+  wrap: i,
+  as: n = "div",
+  className: d,
+  ...e
+}, s) {
+  return /* @__PURE__ */ c(
+    n,
+    {
+      ...e,
+      ref: s,
+      className: ["prava-stack", d].filter(Boolean).join(" "),
+      "data-orientation": a,
+      "data-gap": t,
+      "data-align": o,
+      "data-justify": r,
+      "data-wrap": i || void 0
+    }
+  );
+});
+export {
+  v as S
+};

package/dist/Switch-Cp-wriw6.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsxs as h, jsx as m } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { b as u, u as v, C as w } from "./field-U1YinldE.js";
+const j = b(
+  function(a, e) {
+    const {
+      label: s,
+      description: o,
+      error: d,
+      invalid: n,
+      id: c,
+      onBlur: t,
+      onChange: l,
+      onInvalid: p,
+      ref: f,
+      ...i
+    } = u(
+      a,
+      e,
+      "checked"
+    ), r = v({
+      id: c,
+      description: o,
+      error: d,
+      invalid: n,
+      onBlur: t,
+      onChange: l,
+      onInvalid: p,
+      "aria-describedby": i["aria-describedby"],
+      "aria-invalid": i["aria-invalid"]
+    });
+    return /* @__PURE__ */ h("span", { className: "prava-field", "data-choice": "switch", children: [
+      /* @__PURE__ */ m(
+        w,
+        {
+          ...i,
+          ...r.controlProps,
+          ref: f,
+          kind: "switch",
+          label: s
+        }
+      ),
+      r.messages
+    ] });
+  }
+);
+export {
+  j as S
+};

package/dist/Tabs-C0SRJSv1.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsxs as R, jsx as y } from "react/jsx-runtime";
+import { useRef as x, useEffect as I, useId as j, useContext as k, createContext as B } from "react";
+import { u as N } from "./useControllable-C2Te1pSd.js";
+const C = B(null), g = () => {
+  const e = k(C);
+  if (!e) throw new Error("Tab parts must be inside <Tabs>.");
+  return e;
+}, _ = (e, r) => `${e}-tab-${encodeURIComponent(r)}`, A = (e, r) => `${e}-panel-${encodeURIComponent(r)}`;
+function D({
+  value: e,
+  defaultValue: r,
+  onValueChange: c,
+  activation: o = "automatic",
+  orientation: f = "horizontal",
+  className: b,
+  ...i
+}) {
+  const [s, d] = N(
+    e,
+    r ?? "",
+    c
+  ), v = j();
+  return /* @__PURE__ */ y(
+    C.Provider,
+    {
+      value: { value: s, setValue: d, activation: o, orientation: f, id: v },
+      children: /* @__PURE__ */ y(
+        "div",
+        {
+          ...i,
+          className: ["prava-tabs", b].filter(Boolean).join(" "),
+          "data-orientation": f
+        }
+      )
+    }
+  );
+}
+function P({
+  className: e,
+  children: r,
+  onKeyDown: c,
+  ...o
+}) {
+  const { value: f, setValue: b, activation: i, orientation: s } = g(), d = x(null), v = x(null), T = x(!1);
+  I(() => {
+    const t = d.current, a = v.current;
+    if (!t || !a) return;
+    const p = () => {
+      const u = t.querySelector('[aria-selected="true"]');
+      if (a.hidden = !u, !u) return;
+      const m = t.getBoundingClientRect(), n = u.getBoundingClientRect(), l = t.offsetWidth / m.width || 1;
+      if (s === "horizontal") {
+        const w = (n.left - m.left) * l + t.scrollLeft;
+        a.style.translate = `${w}px 0`, a.style.scale = `${n.width * l} 1`;
+      } else {
+        const w = (n.top - m.top) * l + t.scrollTop;
+        a.style.translate = `0 ${w}px`, a.style.scale = `1 ${n.height * l}`;
+      }
+    };
+    T.current && (a.dataset.ready = ""), T.current = !0, p();
+    const h = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(p);
+    return h?.observe(t), t.querySelectorAll('[role="tab"]').forEach((u) => h?.observe(u)), () => {
+      h?.disconnect();
+    };
+  }, [f, s]);
+  const $ = (t) => {
+    if (c?.(t), t.defaultPrevented) return;
+    const a = Array.from(
+      t.currentTarget.querySelectorAll(
+        '[role="tab"]:not(:disabled)'
+      )
+    ), p = a.indexOf(document.activeElement), h = getComputedStyle(t.currentTarget).direction === "rtl", [u, m] = s === "vertical" ? ["ArrowUp", "ArrowDown"] : h ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
+    let n;
+    if (t.key === m) n = p + 1;
+    else if (t.key === u) n = p - 1;
+    else if (t.key === "Home") n = 0;
+    else if (t.key === "End") n = a.length - 1;
+    else return;
+    t.preventDefault();
+    const l = a[(n + a.length) % a.length];
+    l?.focus(), l && i === "automatic" && l.dataset.value !== void 0 && b(l.dataset.value);
+  };
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      ...o,
+      ref: d,
+      role: "tablist",
+      "aria-orientation": s,
+      className: ["prava-tabs__list", e].filter(Boolean).join(" "),
+      onKeyDown: $,
+      children: [
+        r,
+        /* @__PURE__ */ y(
+          "span",
+          {
+            ref: v,
+            className: "prava-tabs__indicator",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function S({
+  value: e,
+  icon: r,
+  className: c,
+  children: o,
+  onClick: f,
+  ...b
+}) {
+  const i = g(), s = i.value === e;
+  return /* @__PURE__ */ R(
+    "button",
+    {
+      ...b,
+      type: "button",
+      role: "tab",
+      id: _(i.id, e),
+      "aria-selected": s,
+      "aria-controls": A(i.id, e),
+      tabIndex: s ? 0 : -1,
+      "data-value": e,
+      className: ["prava-tabs__tab", c].filter(Boolean).join(" "),
+      onClick: (d) => {
+        f?.(d), d.defaultPrevented || i.setValue(e);
+      },
+      children: [
+        r != null && /* @__PURE__ */ y("span", { className: "prava-tabs__icon", "aria-hidden": "true", children: r }),
+        o
+      ]
+    }
+  );
+}
+function q({ value: e, className: r, ...c }) {
+  const o = g();
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      tabIndex: 0,
+      ...c,
+      role: "tabpanel",
+      id: A(o.id, e),
+      "aria-labelledby": _(o.id, e),
+      hidden: o.value !== e,
+      className: ["prava-tabs__panel", r].filter(Boolean).join(" ")
+    }
+  );
+}
+export {
+  S as T,
+  P as a,
+  q as b,
+  D as c
+};

package/dist/Textarea-D0fNA7sQ.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs as S, jsx as T } from "react/jsx-runtime";
+import { forwardRef as j, useRef as k, useCallback as f, useEffect as w } from "react";
+import { b as H, u as N, o as P, s as F } from "./field-U1YinldE.js";
+const d = (t) => `calc(${t} * 1lh + 1rem + 2px)`, M = j(
+  function(m, p) {
+    const {
+      invalid: u,
+      description: h,
+      error: g,
+      rows: r = 3,
+      maxRows: i = 12,
+      resize: x = "none",
+      id: v,
+      className: b,
+      style: y,
+      value: n,
+      onBlur: z,
+      onChange: C,
+      onInvalid: R,
+      ref: l,
+      ...s
+    } = H(m, p), o = N({
+      id: v,
+      description: h,
+      error: g,
+      invalid: u,
+      onBlur: z,
+      onChange: C,
+      onInvalid: R,
+      "aria-describedby": s["aria-describedby"],
+      "aria-invalid": s["aria-invalid"]
+    }), c = k(null), a = f(() => {
+      const e = c.current;
+      !e || globalThis.CSS?.supports?.("field-sizing", "content") || (e.style.height = "auto", e.style.height = `${e.scrollHeight + e.offsetHeight - e.clientHeight}px`);
+    }, []), B = f(
+      (e) => {
+        e && (c.current = e, P(e, "value", a)), F(l, e);
+      },
+      [l, a]
+    );
+    return w(a, [a, n, r, i]), /* @__PURE__ */ S("span", { className: "prava-field", children: [
+      /* @__PURE__ */ T(
+        "textarea",
+        {
+          ...s,
+          ...o.controlProps,
+          ref: B,
+          rows: r,
+          value: n,
+          onChange: (e) => {
+            o.controlProps.onChange(e), a();
+          },
+          className: ["prava-control prava-textarea", b].filter(Boolean).join(" "),
+          "data-resize": x,
+          style: {
+            minBlockSize: d(r),
+            maxBlockSize: d(Math.max(r, i)),
+            ...y
+          }
+        }
+      ),
+      o.messages
+    ] });
+  }
+);
+export {
+  M as T
+};

package/dist/Toast-7qJXHzEb.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsxs as _, Fragment as w, jsx as a } from "react/jsx-runtime";
+import { useSyncExternalStore as x, useRef as v, useState as f, useEffect as u } from "react";
+import { u as S } from "./overlay-9zlvgpUZ.js";
+import { u as I } from "./PravaProvider-0znpKV4G.js";
+import { A as j } from "./Alert-Bxv6CGPj.js";
+let i = [], D = 0;
+const m = /* @__PURE__ */ new Set(), h = (e) => {
+  i = e, m.forEach((n) => n());
+}, F = (e) => (m.add(e), () => m.delete(e)), L = () => i, A = [], B = () => A;
+function q(e) {
+  const n = e.id ?? `prava-toast-${++D}`, s = { ...e, id: n, open: !0 };
+  return h(
+    i.some((o) => o.id === n) ? i.map((o) => o.id === n ? s : o) : [...i, s]
+  ), n;
+}
+function y(e) {
+  h(
+    i.map(
+      (n) => e === void 0 || n.id === e ? { ...n, open: !1 } : n
+    )
+  );
+}
+const H = ({ duration: e, tone: n, action: s }) => e ?? (n === "danger" ? 1 / 0 : s != null ? 1e4 : 5e3);
+function C({ item: e, paused: n }) {
+  const s = v(null), o = H(e), r = v(o), d = S(e.open, s);
+  return u(() => {
+    r.current = o;
+  }, [e, o]), u(() => {
+    if (n || !e.open || r.current === 1 / 0) return;
+    const l = Date.now(), p = setTimeout(() => y(e.id), r.current);
+    return () => {
+      clearTimeout(p), r.current -= Date.now() - l;
+    };
+  }, [n, e]), u(() => {
+    d || h(i.filter((l) => l.id !== e.id));
+  }, [d, e.id]), /* @__PURE__ */ a(
+    "li",
+    {
+      ref: s,
+      className: "prava-toast",
+      "data-open": e.open ? "" : void 0,
+      children: /* @__PURE__ */ a("div", { className: "prava-toast__clip", children: /* @__PURE__ */ a(
+        j,
+        {
+          role: "group",
+          tone: e.tone,
+          title: e.title,
+          action: e.action,
+          onDismiss: () => y(e.id),
+          children: e.description
+        }
+      ) })
+    }
+  );
+}
+function z({
+  placement: e = "bottom-end",
+  className: n,
+  ...s
+}) {
+  const { messages: o } = I(), r = x(F, L, B), d = v(null), [l, p] = f(!1), [E, g] = f(!1), [N, P] = f(!1);
+  u(() => {
+    const t = () => P(document.hidden);
+    return document.addEventListener("visibilitychange", t), () => document.removeEventListener("visibilitychange", t);
+  }, []);
+  const b = r.length;
+  u(() => {
+    const t = d.current;
+    t && (t.matches?.(":popover-open") && t.hidePopover(), b > 0 && t.showPopover?.());
+  }, [b]);
+  const T = (t) => r.filter((c) => c.open && c.tone === "danger" === t).map((c) => /* @__PURE__ */ _("div", { children: [
+    c.title,
+    " ",
+    c.description
+  ] }, c.id));
+  return /* @__PURE__ */ _(w, { children: [
+    /* @__PURE__ */ a("div", { role: "status", className: "prava-toaster__announce", children: T(!1) }),
+    /* @__PURE__ */ a("div", { role: "alert", className: "prava-toaster__announce", children: T(!0) }),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        role: "region",
+        "aria-label": o.notifications,
+        ...s,
+        ref: d,
+        popover: "manual",
+        className: ["prava-toaster", n].filter(Boolean).join(" "),
+        "data-placement": e,
+        onPointerEnter: () => p(!0),
+        onPointerLeave: () => p(!1),
+        onFocus: () => g(!0),
+        onBlur: () => g(!1),
+        children: /* @__PURE__ */ a("ol", { className: "prava-toaster__list", children: r.map((t) => /* @__PURE__ */ a(
+          C,
+          {
+            item: t,
+            paused: l || E || N
+          },
+          t.id
+        )) })
+      }
+    )
+  ] });
+}
+export {
+  z as T,
+  y as d,
+  q as t
+};

package/dist/Tooltip-CyW8YfU9.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsxs as b, jsx as E } from "react/jsx-runtime";
+import { useState as P, useRef as a, useId as D, useCallback as l, useEffect as j } from "react";
+import { a as x, b as I, c as k } from "./overlay-9zlvgpUZ.js";
+const B = 100;
+function w({
+  content: p,
+  children: f,
+  delay: m = 400,
+  placement: d = "top",
+  className: T,
+  id: g,
+  ...v
+}) {
+  const [t, r] = P(!1), n = a(null), i = a(null), o = a(void 0), h = D(), u = g ?? h, c = l((e, y) => {
+    clearTimeout(o.current), o.current = setTimeout(() => r(e), y);
+  }, []), s = l(() => {
+    clearTimeout(o.current), r(!1);
+  }, []);
+  return j(() => () => clearTimeout(o.current), []), x(t, n, i, d, "center"), I(t, n, s), /* @__PURE__ */ b("span", { ref: n, className: "prava-floating-root", ...{
+    onPointerEnter: (e) => {
+      e.pointerType === "mouse" && c(!0, t ? 0 : m);
+    },
+    onPointerLeave: (e) => {
+      e.pointerType === "mouse" && c(!1, B);
+    },
+    // Touch has no hover: a tap shows it, and a press elsewhere hides it.
+    onPointerUp: (e) => {
+      e.pointerType !== "mouse" && (clearTimeout(o.current), r(!0));
+    },
+    onFocus: (e) => {
+      e.target.matches?.(":focus-visible") && (clearTimeout(o.current), r(!0));
+    },
+    onBlur: s,
+    onKeyDown: (e) => {
+      e.key !== "Escape" || !t || (e.preventDefault(), e.stopPropagation(), s());
+    }
+  }, children: [
+    k(f, { "aria-describedby": u }),
+    /* @__PURE__ */ E(
+      "div",
+      {
+        ...v,
+        ref: i,
+        id: u,
+        role: "tooltip",
+        popover: "manual",
+        className: ["prava-floating prava-tooltip", T].filter(Boolean).join(" "),
+        "data-open": t ? "" : void 0,
+        children: p
+      }
+    )
+  ] });
+}
+export {
+  w as T
+};

package/dist/accordion.js

@@ -0,0 +1,8 @@
+"use client";
+import './tokens.css';
+import './styles/components/accordion.css';
+import { A as r, a } from "./Accordion-CVRdRha1.js";
+export {
+  r as Accordion,
+  a as AccordionItem
+};

package/dist/alert.js

@@ -0,0 +1,7 @@
+"use client";
+import './tokens.css';
+import './styles/components/alert.css';
+import { A as o } from "./Alert-Bxv6CGPj.js";
+export {
+  o as Alert
+};

package/dist/avatar.js

@@ -0,0 +1,7 @@
+"use client";
+import './tokens.css';
+import './styles/components/avatar.css';
+import { A as o } from "./Avatar-DUw9xBQ-.js";
+export {
+  o as Avatar
+};

package/dist/badge.js

@@ -0,0 +1,7 @@
+"use client";
+import './tokens.css';
+import './styles/components/badge.css';
+import { B as o } from "./Badge-cupXlWce.js";
+export {
+  o as Badge
+};

package/dist/button.js

@@ -0,0 +1,7 @@
+"use client";
+import './tokens.css';
+import './styles/components/button.css';
+import { B as r } from "./Button-vjrnnaM_.js";
+export {
+  r as Button
+};

package/dist/card.js

@@ -0,0 +1,10 @@
+"use client";
+import './tokens.css';
+import './styles/components/card.css';
+import { C, a as d, b as e, c as o } from "./Card-BJNdpGjM.js";
+export {
+  C as Card,
+  d as CardContent,
+  e as CardFooter,
+  o as CardHeader
+};

package/dist/checkbox.js

@@ -0,0 +1,8 @@
+"use client";
+import './tokens.css';
+import './styles/components/field.css';
+import './styles/components/checkbox.css';
+import { C as r } from "./Checkbox-BQtcnwwC.js";
+export {
+  r as Checkbox
+};

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,42 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type AccordionProps = Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> & {
+    /** Lets several items stay open. By default, opening one closes the others. */
+    multiple?: boolean;
+    /** Open item values when controlled. */
+    value?: readonly string[];
+    /** Initially open item values when uncontrolled. */
+    defaultValue?: readonly string[];
+    /** Called with every open value after a change. */
+    onValueChange?: (value: string[]) => void;
+    /** Heading level of each item, to fit the page's outline. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+};
+/**
+ * Discloses related content. Up and Down, Home and End move between headers.
+ * @example
+ * ```tsx
+ * import { Accordion, AccordionItem } from '@pravalabs/ui/accordion';
+ *
+ * <Accordion defaultValue={['billing']}>
+ *   <AccordionItem value="billing" title="Billing">Invoices are sent monthly.</AccordionItem>
+ *   <AccordionItem value="security" title="Security">Data is encrypted at rest.</AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export declare function Accordion({ multiple, value, defaultValue, onValueChange, headingLevel, className, onKeyDown, ...props }: AccordionProps): import("react").JSX.Element;
+export type AccordionItemProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** Identifies the item in `value`. Keep it stable across languages. */
+    value: string;
+    /** Text of the header button. */
+    title: ReactNode;
+    /** Stops the header from toggling; the panel keeps its current state. */
+    disabled?: boolean;
+};
+/**
+ * One header and its panel. A closed panel is hidden from keyboard and screen readers.
+ * @example
+ * ```tsx
+ * <AccordionItem value="billing" title="Billing">Invoices are sent monthly.</AccordionItem>
+ * ```
+ */
+export declare function AccordionItem({ value, title, disabled, className, children, ...props }: AccordionItemProps): import("react").JSX.Element;

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion, AccordionItem } from './Accordion';
+export type { AccordionItemProps, AccordionProps } from './Accordion';