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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dinesh_DC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,143 @@
-# Temporary Holding Version
+# Prava UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Accessible, responsive React components that look finished the moment you install them. No Tailwind setup, no CSS-in-JS runtime, and no runtime dependencies.
+
+[![npm version](https://img.shields.io/npm/v/@pravalabs/ui/next?label=npm%40next)](https://www.npmjs.com/package/@pravalabs/ui?activeTab=versions)
+[![license: MIT](https://img.shields.io/npm/l/@pravalabs/ui)](./LICENSE)
+[![CI](https://github.com/dineshdcshinde/prava-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/dineshdcshinde/prava-ui/actions/workflows/ci.yml)
+
+> **Release candidate.** The API is close to final, but it can still change before `1.0.0`. Please try it and [report what you find](https://github.com/dineshdcshinde/prava-ui/issues).
+
+## Why Prava UI
+
+- **No design work.** Polished defaults for every state, in light and dark.
+- **No setup.** Styles are compiled and load automatically. You don't need Tailwind or a provider.
+- **Keyboard, screen reader, and RTL support built in.** They're part of each component, not an add-on.
+- **Fits any screen.** Components adapt to their container with no breakpoint props.
+- **Easy to theme.** One CSS file of tokens restyles everything, and your CSS always wins.
+- **Only what you import.** Each component brings its own JavaScript and CSS.
+
+## Getting started
+
+Prava UI needs React 18.2 or newer, including React 19.
+
+```sh
+npm install @pravalabs/ui@next
+```
+
+Import a component and use it. Its styles come with it:
+
+```tsx
+import { Button, Dialog, DialogClose, Input } from "@pravalabs/ui";
+
+export function InviteTeammate() {
+  return (
+    <Dialog
+      trigger={<Button>Invite</Button>}
+      title="Invite a teammate"
+      description="They get an email with a link to join."
+      footer={
+        <>
+          <DialogClose>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button>Send invite</Button>
+        </>
+      }
+    >
+      <Input label="Work email" type="email" />
+    </Dialog>
+  );
+}
+```
+
+You can also import one component at a time, such as `import { Button } from "@pravalabs/ui/button"`.
+
+Components inherit your app's font. Prava UI never loads a font or adds global styles to your page.
+
+### Next.js
+
+Works in the App Router: you can use components directly in Server Components, because the package marks its own client code. Functions such as `onClick` still have to be passed from a Client Component, as with any React component. Call `toast()` from client code too.
+
+## Components
+
+| Group      | Components                                                                              |
+| ---------- | --------------------------------------------------------------------------------------- |
+| Actions    | `Button`                                                                                |
+| Forms      | `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroup`, `Switch`, `Label`, `FormField` |
+| Display    | `Avatar`, `Badge`, `Card`, `Separator`, `Skeleton`, `Spinner`, `Progress`               |
+| Feedback   | `Alert`, `Toaster` with `toast()`                                                       |
+| Overlays   | `Dialog`, `Drawer`, `Popover`, `Tooltip`, `DropdownMenu`                                |
+| Navigation | `Tabs`, `Accordion`                                                                     |
+| Layout     | `Container`, `Stack`, `Grid`                                                            |
+| Setup      | `PravaProvider` (optional: direction, locale, messages, and theme for part of your app) |
+
+Form controls connect to [react-hook-form](https://react-hook-form.com/) through a `field` prop, with no extra dependency:
+
+```tsx
+<Input label="Email" field={register("email")} error={errors.email?.message} />
+```
+
+## Documentation
+
+Every component has live examples and an API reference in Storybook. A hosted version isn't available yet, so run it locally:
+
+```sh
+git clone https://github.com/dineshdcshinde/prava-ui.git
+cd prava-ui
+npm install
+npm run dev
+```
+
+Your editor also shows the docs: each prop and component has a description and an example inline.
+
+## Theming
+
+Light is the default. Choose a theme for the whole page or any part of it:
+
+```html
+<body data-prava-theme="dark">
+  ...
+</body>
+<section data-prava-theme="system">...</section>
+```
+
+To use your brand's colors, override the tokens in your own CSS. Prava UI's styles sit in a cascade layer, so yours win whatever the import order:
+
+```css
+:root {
+  --prava-color-primary: #7c3aed;
+  --prava-color-primary-hover: #6d28d9;
+  --prava-color-primary-active: #5b21b6;
+}
+```
+
+Every component also takes `className` and `style`, and compound ones take `classNames` for their inner parts. See [DESIGN.md](./DESIGN.md) for all the tokens.
+
+## Right-to-left and translations
+
+Prava UI has no translation dependency, so it works alongside whichever library you already use. `PravaProvider` sets direction, locale, and the library's own text for its subtree:
+
+```tsx
+import { PravaProvider } from "@pravalabs/ui";
+
+<PravaProvider direction="rtl" locale="ar" messages={{ close: "إغلاق" }}>
+  <App />
+</PravaProvider>;
+```
+
+It only affects what's inside it. To change the whole page, set `<html dir="rtl">` yourself as well.
+
+## Browser support
+
+Tests run on current Chromium, Firefox, and WebKit, plus emulated phones. Overlays use the native `<dialog>` element and Popover API, so they need Chrome or Edge 114, Firefox 125, or Safari 17 and newer. Browsers that don't support the newest animation features still work, and overlays just close without animating.
+
+## Contributing
+
+Bug reports, ideas, and pull requests are all welcome. Start with the [contributing guide](./CONTRIBUTING.md), and please follow the [code of conduct](./CODE_OF_CONDUCT.md). To report a security problem, see the [security policy](./SECURITY.md).
+
+Changes in each version are listed in the [changelog](./CHANGELOG.md).
+
+## License
+
+[MIT](./LICENSE)

package/dist/Accordion-CVRdRha1.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { createContext as A, useContext as N, useId as b } from "react";
+import { u as w } from "./useControllable-C2Te1pSd.js";
+const m = A(null);
+function B({
+  multiple: t,
+  value: l,
+  defaultValue: s = [],
+  onValueChange: p,
+  headingLevel: g = 3,
+  className: u,
+  onKeyDown: a,
+  ...c
+}) {
+  const [e, i] = w(
+    l,
+    s,
+    p
+  ), _ = (r) => {
+    const d = e.filter((n) => n !== r);
+    e.includes(r) ? i(d) : i(t ? [...e, r] : [r]);
+  };
+  return /* @__PURE__ */ o(m.Provider, { value: { open: e, toggle: _, headingLevel: g }, children: /* @__PURE__ */ o(
+    "div",
+    {
+      ...c,
+      className: ["prava-accordion", u].filter(Boolean).join(" "),
+      onKeyDown: (r) => {
+        if (a?.(r), r.defaultPrevented) return;
+        const d = r.currentTarget, n = Array.from(
+          d.querySelectorAll(
+            ".prava-accordion__trigger:not(:disabled)"
+          )
+        ).filter((x) => x.closest(".prava-accordion") === d), v = n.indexOf(r.target);
+        if (v < 0) return;
+        const f = {
+          ArrowDown: v + 1,
+          ArrowUp: v - 1,
+          Home: 0,
+          End: n.length - 1
+        }[r.key];
+        f !== void 0 && (r.preventDefault(), n[(f + n.length) % n.length]?.focus());
+      }
+    }
+  ) });
+}
+function D({
+  value: t,
+  title: l,
+  disabled: s,
+  className: p,
+  children: g,
+  ...u
+}) {
+  const a = N(m);
+  if (!a) throw new Error("AccordionItem must be inside <Accordion>.");
+  const c = b(), e = a.open.includes(t), i = `h${a.headingLevel}`;
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ...u,
+      className: ["prava-accordion__item", p].filter(Boolean).join(" "),
+      "data-open": e ? "" : void 0,
+      children: [
+        /* @__PURE__ */ o(i, { className: "prava-accordion__heading", children: /* @__PURE__ */ h(
+          "button",
+          {
+            type: "button",
+            id: `${c}-trigger`,
+            className: "prava-accordion__trigger",
+            "aria-expanded": e,
+            "aria-controls": `${c}-panel`,
+            disabled: s,
+            onClick: () => a.toggle(t),
+            children: [
+              /* @__PURE__ */ o("span", { className: "prava-accordion__title", children: l }),
+              /* @__PURE__ */ o(
+                "svg",
+                {
+                  className: "prava-accordion__chevron",
+                  viewBox: "0 0 16 16",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ o("path", { d: "M4 6l4 4 4-4" })
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            id: `${c}-panel`,
+            role: "region",
+            "aria-labelledby": `${c}-trigger`,
+            className: "prava-accordion__panel",
+            children: /* @__PURE__ */ o("div", { className: "prava-accordion__clip", children: /* @__PURE__ */ o("div", { className: "prava-accordion__content", children: g }) })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  B as A,
+  D as a
+};

package/dist/Alert-Bxv6CGPj.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { u as p } from "./PravaProvider-0znpKV4G.js";
+const u = {
+  neutral: "M8 7.25v3.5M8 5.25h.01M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0z",
+  info: "M8 7.25v3.5M8 5.25h.01M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0z",
+  success: "M5.25 8.25 7.25 10.25 10.75 6M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0z",
+  warning: "M8 6.25v3M8 11.25h.01M7.13 2.75 1.9 12a1 1 0 0 0 .87 1.5h10.46a1 1 0 0 0 .87-1.5L8.87 2.75a1 1 0 0 0-1.74 0z",
+  danger: "M8 5v3.75M8 11h.01M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0z"
+}, A = h(function({
+  tone: e = "neutral",
+  title: l,
+  icon: s,
+  action: t,
+  onDismiss: r,
+  className: d,
+  children: i,
+  ...o
+}, c) {
+  const { messages: v } = p();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      role: "status",
+      ...o,
+      ref: c,
+      className: ["prava-alert", d].filter(Boolean).join(" "),
+      "data-tone": e,
+      "data-dismissible": r ? "" : void 0,
+      children: [
+        s !== null && /* @__PURE__ */ a("span", { className: "prava-alert__icon", "aria-hidden": "true", children: s ?? /* @__PURE__ */ a("svg", { viewBox: "0 0 16 16", children: /* @__PURE__ */ a("path", { d: u[e] }) }) }),
+        /* @__PURE__ */ n("div", { className: "prava-alert__body", children: [
+          l != null && /* @__PURE__ */ a("div", { className: "prava-alert__title", children: l }),
+          i != null && /* @__PURE__ */ a("div", { className: "prava-alert__description", children: i })
+        ] }),
+        t != null && /* @__PURE__ */ a("div", { className: "prava-alert__action", children: t }),
+        r && /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            className: "prava-alert__dismiss",
+            "aria-label": v.dismiss,
+            onClick: r,
+            children: /* @__PURE__ */ a("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "M4 4l8 8M12 4l-8 8" }) })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  A
+};

package/dist/Avatar-DUw9xBQ-.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { useState as B } from "react";
+const s = [
+  "primary",
+  "success",
+  "warning",
+  "info",
+  "danger",
+  "neutral"
+];
+function x({
+  src: e,
+  firstName: i,
+  lastName: n,
+  alt: d,
+  fallback: c,
+  size: m = "md",
+  className: p,
+  onError: f,
+  ...u
+}) {
+  const [r, v] = B(!1), o = [i, n].filter(Boolean).join(" "), g = [i, n].filter(Boolean).map((a) => a.trim()[0]).filter(Boolean).join("").toLocaleUpperCase(), h = o ? s[[...o].reduce((a, j) => a + j.charCodeAt(0), 0) % s.length] : void 0, t = d ?? o;
+  return /* @__PURE__ */ l(
+    "span",
+    {
+      ...u,
+      className: ["prava-avatar", p].filter(Boolean).join(" "),
+      "data-size": m,
+      "data-tone": e && !r ? void 0 : h,
+      role: t ? "img" : void 0,
+      "aria-label": t || void 0,
+      "aria-hidden": t ? void 0 : !0,
+      children: e && !r ? /* @__PURE__ */ l(
+        "img",
+        {
+          src: e,
+          alt: "",
+          onError: (a) => {
+            v(!0), f?.(a);
+          }
+        }
+      ) : c ?? g
+    }
+  );
+}
+export {
+  x as A
+};

package/dist/Badge-cupXlWce.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+function c({
+  tone: t,
+  size: s = "sm",
+  placement: d = "top-end",
+  content: o,
+  className: r,
+  children: e,
+  ...l
+}) {
+  const a = e == null;
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      ...l,
+      className: ["prava-badge", r].filter(Boolean).join(" "),
+      "data-standalone": a || void 0,
+      children: [
+        !a && /* @__PURE__ */ n("span", { className: "prava-badge__target", children: e }),
+        /* @__PURE__ */ n(
+          "span",
+          {
+            className: "prava-badge__indicator",
+            "data-tone": t ?? (a ? "neutral" : "danger"),
+            "data-size": s,
+            "data-placement": a ? void 0 : d,
+            children: o
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  c as B
+};

package/dist/Button-vjrnnaM_.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as n, jsxs as f, Fragment as x } from "react/jsx-runtime";
+import { S as z } from "./Spinner-Da7h4BDn.js";
+function D(r) {
+  const {
+    variant: m,
+    size: s = "md",
+    type: d = "button",
+    loading: a = !1,
+    disableAnimation: v = !1,
+    disabled: o = !1,
+    fullWidth: _ = !1,
+    className: k,
+    startIcon: l,
+    endIcon: c,
+    children: y,
+    ...i
+  } = r, e = d === "icon", u = {
+    className: ["prava-button", k].filter(Boolean).join(" "),
+    "data-variant": m ?? (e ? "ghost" : "primary"),
+    "data-size": s,
+    "data-type": e ? "icon" : "button",
+    "data-motion": v ? "none" : "default",
+    "data-loading": a || void 0,
+    "data-full-width": _ || void 0,
+    "aria-busy": a || i["aria-busy"]
+  }, p = /* @__PURE__ */ f(x, { children: [
+    /* @__PURE__ */ f("span", { className: "prava-button__content", children: [
+      l && /* @__PURE__ */ n("span", { className: "prava-button__icon", "aria-hidden": "true", children: l }),
+      y,
+      c && /* @__PURE__ */ n("span", { className: "prava-button__icon", "aria-hidden": "true", children: c })
+    ] }),
+    a && /* @__PURE__ */ n("span", { className: "prava-button__loader", "aria-hidden": "true", children: /* @__PURE__ */ n(z, { size: s === "lg" ? "md" : "sm", color: "currentColor" }) })
+  ] });
+  if (r.href !== void 0) {
+    const { href: t, onClick: g, ...j } = i, h = o || a;
+    return /* @__PURE__ */ n(
+      "a",
+      {
+        ...j,
+        ...u,
+        href: o ? void 0 : t,
+        "aria-disabled": h || void 0,
+        onClick: (b) => h ? b.preventDefault() : g?.(b),
+        children: p
+      }
+    );
+  }
+  const { onClick: C, ...N } = i;
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      ...N,
+      ...u,
+      type: e ? "button" : d,
+      disabled: o,
+      "aria-disabled": a || void 0,
+      onClick: (t) => a ? t.preventDefault() : C?.(t),
+      children: p
+    }
+  );
+}
+export {
+  D as B
+};

package/dist/Card-BJNdpGjM.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+function n({ className: a, ...r }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ...r,
+      className: ["prava-card", a].filter(Boolean).join(" ")
+    }
+  );
+}
+function t({ className: a, ...r }) {
+  return /* @__PURE__ */ e(
+    "header",
+    {
+      ...r,
+      className: ["prava-card__header", a].filter(Boolean).join(" ")
+    }
+  );
+}
+function i({ className: a, ...r }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ...r,
+      className: ["prava-card__content", a].filter(Boolean).join(" ")
+    }
+  );
+}
+function c({ className: a, ...r }) {
+  return /* @__PURE__ */ e(
+    "footer",
+    {
+      ...r,
+      className: ["prava-card__footer", a].filter(Boolean).join(" ")
+    }
+  );
+}
+export {
+  n as C,
+  i as a,
+  c as b,
+  t as c
+};

package/dist/Checkbox-BQtcnwwC.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsxs as C, jsx as k } from "react/jsx-runtime";
+import { forwardRef as x, useRef as v, useEffect as R, useCallback as g } from "react";
+import { b as j, s as y, u as F, C as w } from "./field-U1YinldE.js";
+const P = x(
+  function(o, c) {
+    const {
+      label: t,
+      indeterminate: i = !1,
+      description: d,
+      error: l,
+      invalid: f,
+      id: u,
+      onBlur: b,
+      onChange: m,
+      onInvalid: p,
+      ref: a,
+      ...e
+    } = j(
+      o,
+      c,
+      "checked"
+    ), r = v(null);
+    R(() => {
+      r.current && (r.current.indeterminate = i);
+    }, [i]);
+    const h = g(
+      (s) => {
+        r.current = s, y(a, s);
+      },
+      [a]
+    ), n = F({
+      id: u,
+      description: d,
+      error: l,
+      invalid: f,
+      onBlur: b,
+      onChange: m,
+      onInvalid: p,
+      "aria-describedby": e["aria-describedby"],
+      "aria-invalid": e["aria-invalid"]
+    });
+    return /* @__PURE__ */ C("span", { className: "prava-field", "data-choice": "", children: [
+      /* @__PURE__ */ k(
+        w,
+        {
+          ...e,
+          ...n.controlProps,
+          ref: h,
+          kind: "checkbox",
+          label: t
+        }
+      ),
+      n.messages
+    ] });
+  }
+);
+export {
+  P as C
+};

package/dist/Container-DO8bd1tv.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+const c = i(
+  function({ size: o = "lg", as: r = "div", className: a, ...n }, t) {
+    return /* @__PURE__ */ e(
+      r,
+      {
+        ...n,
+        ref: t,
+        className: ["prava-container", a].filter(Boolean).join(" "),
+        "data-size": o
+      }
+    );
+  }
+);
+export {
+  c as C
+};