@skiddph/prui 0.7.0 → 0.8.0

package/dist/core/timeline.js

@@ -0,0 +1,57 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import * as u from "react";
+import { cn as a } from "./cn.js";
+const c = {
+  brand: "border-[var(--prui-brand)] bg-[var(--prui-brand)]/20 text-[var(--prui-brand)]",
+  success: "border-[var(--prui-ok)] bg-[var(--prui-ok)]/20 text-[var(--prui-ok)]",
+  warning: "border-[var(--prui-warn)] bg-[var(--prui-warn)]/20 text-[var(--prui-warn)]",
+  danger: "border-[var(--prui-danger)] bg-[var(--prui-danger)]/20 text-[var(--prui-danger)]",
+  neutral: "border-[var(--prui-line)] bg-[var(--prui-raise)] text-[var(--prui-dim)]"
+}, m = u.forwardRef(function({ items: n, align: t = "left", className: p, ...d }, o) {
+  return /* @__PURE__ */ e("ol", { ref: o, role: "list", className: a("prui-timeline relative flex flex-col", p), ...d, children: n.map((r, l) => {
+    const s = r.variant ?? "neutral";
+    return /* @__PURE__ */ i("li", { className: "relative flex gap-3 pb-6 last:pb-0", "data-variant": s, children: [
+      /* @__PURE__ */ e(
+        "span",
+        {
+          "aria-hidden": !0,
+          className: a(
+            "absolute top-5 bottom-0 w-px bg-[var(--prui-line)]",
+            t === "right" ? "right-[11px]" : "left-[11px]",
+            l === n.length - 1 && "hidden"
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        "span",
+        {
+          "aria-hidden": !0,
+          className: a(
+            "relative z-[var(--prui-z-content)] flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--prui-radius-full)] border",
+            c[s]
+          ),
+          children: r.icon ?? /* @__PURE__ */ e("span", { className: "h-1.5 w-1.5 rounded-[var(--prui-radius-full)] bg-current" })
+        }
+      ),
+      /* @__PURE__ */ i("div", { className: a("min-w-0 flex-1", t === "right" && "text-right"), children: [
+        /* @__PURE__ */ i("div", { className: a("flex flex-wrap items-baseline gap-x-2", t === "right" && "flex-row-reverse"), children: [
+          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--prui-fg)]", children: r.title }),
+          r.time ? /* @__PURE__ */ e("span", { className: "text-xs text-[var(--prui-dim)]", children: r.time }) : null
+        ] }),
+        r.description ? /* @__PURE__ */ e("div", { className: "mt-0.5 text-sm text-[var(--prui-dim)]", children: r.description }) : null
+      ] })
+    ] }, l);
+  }) });
+});
+m.displayName = "Timeline";
+const b = {
+  name: "Timeline",
+  props: [
+    { name: "items", type: "TimelineItemData[]", default: null, control: "object" },
+    { name: "align", type: "'left' | 'alternate' | 'right'", default: "'left'", control: "select", options: ["left", "alternate", "right"] }
+  ]
+};
+export {
+  m as Timeline,
+  b as timelinePropsMeta
+};

package/dist/core/toast.d.ts

@@ -0,0 +1,36 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * Toast: transient notifications.
+ *
+ * - <Toaster /> renders the portaled stack (mount once near the app root).
+ * - toast() queues imperatively from anywhere and returns a dismiss handle:
+ *   const t = toast({ title: "Saved", variant: "success" }); t.dismiss().
+ *
+ * Announcements go through an aria-live region; the stack never steals
+ * focus. prefers-reduced-motion disables the slide/fade.
+ */
+export type ToastVariant = "neutral" | "info" | "success" | "warning" | "danger";
+export interface ToastOptions {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: ToastVariant;
+    /** Auto-dismiss delay in ms; 0 disables. Default 5000. */
+    duration?: number;
+    onDismiss?: () => void;
+}
+export interface ToastHandle {
+    dismiss: () => void;
+}
+/** Queue a toast; returns a handle to dismiss it early. */
+export declare function toast(options: ToastOptions): ToastHandle;
+/** Dismiss every toast. */
+export declare function dismissAllToasts(): void;
+export interface ToasterProps {
+    /** Stack corner. Default bottom-right (bottom-start in RTL). */
+    position?: "top-right" | "top-center" | "bottom-right" | "bottom-center" | "bottom-left";
+    className?: string;
+}
+export declare function Toaster({ position, className }?: ToasterProps): React.ReactPortal | null;
+export declare const toasterPropsMeta: PropsMeta;
+export declare const toastPropsMeta: PropsMeta;

package/dist/core/toast.js

@@ -0,0 +1,123 @@
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import * as m from "react";
+import { createPortal as x } from "react-dom";
+import { XCircle as w, AlertTriangle as N, CheckCircle2 as T, Info as p, X as C } from "lucide-react";
+import { cn as s } from "./cn.js";
+import { usePruiI18n as k } from "../i18n.js";
+import { useReducedMotion as I } from "./overlay.js";
+const f = {
+  neutral: { icon: p, accent: "text-[var(--prui-brand)]" },
+  info: { icon: p, accent: "text-[var(--prui-brand)]" },
+  success: { icon: T, accent: "text-[var(--prui-ok)]" },
+  warning: { icon: N, accent: "text-[var(--prui-warn)]" },
+  danger: { icon: w, accent: "text-[var(--prui-danger)]" }
+};
+let P = 1, r = [];
+const c = /* @__PURE__ */ new Set();
+function u() {
+  for (const o of c) o(r);
+}
+function l(o) {
+  var e;
+  const t = r.find((i) => i.id === o);
+  r = r.filter((i) => i.id !== o), t && ((e = t.onDismiss) == null || e.call(t)), u();
+}
+function D(o) {
+  const t = P++;
+  r = [...r, { ...o, id: t }], u();
+  const e = o.duration ?? 5e3;
+  return e > 0 && typeof setTimeout == "function" && setTimeout(() => l(t), e), { dismiss: () => l(t) };
+}
+function X() {
+  var t;
+  const o = r;
+  r = [];
+  for (const e of o) (t = e.onDismiss) == null || t.call(e);
+  u();
+}
+function R() {
+  const [o, t] = m.useState(r);
+  return m.useEffect(() => {
+    const e = (i) => t([...i]);
+    return c.add(e), e(r), () => {
+      c.delete(e);
+    };
+  }, []), o;
+}
+function E({ position: o = "bottom-right", className: t } = {}) {
+  const e = R(), { t: i } = k(), b = I();
+  if (typeof document > "u") return null;
+  const v = {
+    "top-right": "top-4 right-4",
+    "top-center": "top-4 left-1/2 -translate-x-1/2",
+    "bottom-right": "bottom-4 right-4",
+    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+    "bottom-left": "bottom-4 left-4"
+  }[o];
+  return x(
+    /* @__PURE__ */ a(
+      "ol",
+      {
+        "aria-live": "polite",
+        "aria-label": i.notifications,
+        className: s("fixed z-[var(--prui-z-toast)] flex w-80 flex-col gap-2", v, t),
+        children: e.map((n) => {
+          const h = f[n.variant ?? "neutral"].icon, g = f[n.variant ?? "neutral"].accent;
+          return /* @__PURE__ */ d(
+            "li",
+            {
+              "data-testid": "toast",
+              "data-variant": n.variant ?? "neutral",
+              className: s(
+                "prui-toast flex items-start gap-3 rounded-[var(--prui-radius)] border border-[var(--prui-line)]",
+                "bg-[var(--prui-surface)] p-4 text-sm shadow-[var(--prui-shadow-md)]",
+                !b && "prui-anim-slide"
+              ),
+              children: [
+                /* @__PURE__ */ a(h, { className: s("mt-0.5 h-4 w-4 shrink-0", g), "aria-hidden": !0 }),
+                /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ a("div", { className: "font-medium text-[var(--prui-fg)]", children: n.title }),
+                  n.description ? /* @__PURE__ */ a("div", { className: "mt-0.5 text-[var(--prui-dim)]", children: n.description }) : null
+                ] }),
+                /* @__PURE__ */ a(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": i.dismiss,
+                    onClick: () => l(n.id),
+                    className: "-m-1 rounded-[var(--prui-radius-1)] p-1 cursor-pointer text-[var(--prui-dim)] transition-colors hover:text-[var(--prui-fg)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--prui-brand)]",
+                    children: /* @__PURE__ */ a(C, { className: "h-4 w-4", "aria-hidden": !0 })
+                  }
+                )
+              ]
+            },
+            n.id
+          );
+        })
+      }
+    ),
+    document.body
+  );
+}
+const L = {
+  name: "Toaster",
+  props: [
+    { name: "position", type: "'top-right' | 'top-center' | 'bottom-right' | 'bottom-center' | 'bottom-left'", default: "'bottom-right'", control: "select", options: ["top-right", "top-center", "bottom-right", "bottom-center", "bottom-left"] },
+    { name: "className", type: "string", default: "undefined", control: "text" }
+  ]
+}, q = {
+  name: "toast()",
+  props: [
+    { name: "title", type: "ReactNode", default: null, control: "text" },
+    { name: "description", type: "ReactNode", default: null, control: "text" },
+    { name: "variant", type: "'neutral' | 'info' | 'success' | 'warning' | 'danger'", default: "'neutral'", control: "select", options: ["neutral", "info", "success", "warning", "danger"] },
+    { name: "duration", type: "number (ms)", default: "5000", control: "number" }
+  ]
+};
+export {
+  E as Toaster,
+  X as dismissAllToasts,
+  D as toast,
+  q as toastPropsMeta,
+  L as toasterPropsMeta
+};

package/dist/core/tooltip.d.ts

@@ -0,0 +1,23 @@
+import { AnchorSide, AnchorAlign } from './anchor';
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * Tooltip: a hover/focus-triggered label for controls. Non-modal (no trap,
+ * no scroll lock): Escape (topmost overlay only) hides it, focus stays on
+ * the trigger, and it repositions/flips against the viewport. Shows after
+ * a short delay, hides immediately; reduced motion skips the fade.
+ */
+export interface TooltipProps {
+    /** Tooltip content (plain text recommended). */
+    content: React.ReactNode;
+    children?: React.ReactNode;
+    /** Preferred side of the trigger. Default top. */
+    side?: AnchorSide;
+    align?: AnchorAlign;
+    /** Show delay in ms. Default 300. */
+    delay?: number;
+    /** Accessible label for the trigger wrapper when the child is not labeled. */
+    className?: string;
+}
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const tooltipPropsMeta: PropsMeta;

package/dist/core/tooltip.js

@@ -0,0 +1,96 @@
+import { jsx as d, jsxs as R, Fragment as N } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as w } from "./cn.js";
+import { useReducedMotion as F, useOverlayStack as j, useEscapeKey as B, Portal as L } from "./overlay.js";
+import { useAnchoredPosition as P } from "./anchor.js";
+const z = s.forwardRef(function({ content: x, children: p, side: v = "top", align: y = "center", delay: g = 300, className: h }, S) {
+  const [i, c] = s.useState(!1), f = s.useRef(null), n = s.useRef(null), b = F(), { setElement: E, isTop: T } = j(i);
+  B(i, T, () => c(!1));
+  const { ref: M, position: l } = P({ active: i, anchorRef: f, side: v, align: y, offsetHeight: 32 }), a = () => {
+    n.current != null && window.clearTimeout(n.current), n.current = window.setTimeout(() => c(!0), g);
+  }, u = () => {
+    n.current != null && window.clearTimeout(n.current), c(!1);
+  };
+  s.useEffect(
+    () => () => {
+      n.current != null && window.clearTimeout(n.current);
+    },
+    []
+  );
+  let m;
+  if (s.isValidElement(p)) {
+    const t = p;
+    m = s.cloneElement(t, {
+      ref: (o) => {
+        f.current = o;
+        const e = t.props.ref;
+        typeof e == "function" ? e(o) : e && typeof e == "object" && (e.current = o);
+      },
+      onFocus: (o) => {
+        var e, r;
+        (r = (e = t.props).onFocus) == null || r.call(e, o), a();
+      },
+      onBlur: (o) => {
+        var e, r;
+        (r = (e = t.props).onBlur) == null || r.call(e, o), u();
+      },
+      onMouseEnter: (o) => {
+        var e, r;
+        (r = (e = t.props).onMouseEnter) == null || r.call(e, o), a();
+      },
+      onMouseLeave: (o) => {
+        var e, r;
+        (r = (e = t.props).onMouseLeave) == null || r.call(e, o), u();
+      }
+    });
+  } else
+    m = /* @__PURE__ */ d(
+      "span",
+      {
+        ref: f,
+        tabIndex: 0,
+        className: w("inline-flex", h),
+        onMouseEnter: a,
+        onMouseLeave: u,
+        onFocus: a,
+        onBlur: u,
+        children: p
+      }
+    );
+  return /* @__PURE__ */ R(N, { children: [
+    m,
+    i ? /* @__PURE__ */ d(L, { children: /* @__PURE__ */ d(
+      "div",
+      {
+        ref: (t) => {
+          M(t), E((t == null ? void 0 : t.parentElement) ?? null);
+        },
+        role: "tooltip",
+        "data-state": "open",
+        "data-side": (l == null ? void 0 : l.side) ?? v,
+        className: w(
+          "prui-tooltip fixed z-[var(--prui-z-tooltip)] max-w-60 rounded-[var(--prui-radius-1)]",
+          "border border-[var(--prui-line)] bg-[var(--prui-surface)] px-2 py-1 text-xs text-[var(--prui-fg)]",
+          "shadow-[var(--prui-shadow-md)] pointer-events-none",
+          !b && "prui-anim-fade"
+        ),
+        style: l ? { top: l.top, left: l.left } : { top: -9999, left: -9999 },
+        children: x
+      }
+    ) }) : null
+  ] });
+});
+z.displayName = "Tooltip";
+const K = {
+  name: "Tooltip",
+  props: [
+    { name: "content", type: "ReactNode", default: null, control: "text" },
+    { name: "side", type: "'top' | 'bottom' | 'left' | 'right'", default: "'top'", control: "select", options: ["top", "bottom", "left", "right"] },
+    { name: "align", type: "'start' | 'center' | 'end'", default: "'center'", control: "select", options: ["start", "center", "end"] },
+    { name: "delay", type: "number (ms)", default: "300", control: "number" }
+  ]
+};
+export {
+  z as Tooltip,
+  K as tooltipPropsMeta
+};

package/dist/core/tree-view.d.ts

@@ -0,0 +1,34 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * TreeView: nested expandable nodes (files/folders, categories). Full tree
+ * keyboard pattern: ArrowUp/Down move between visible nodes, ArrowRight
+ * expands (or moves into), ArrowLeft collapses (or moves to parent),
+ * Home/End jump. aria-level/aria-expanded/role=tree/treeitem carry the
+ * structure to assistive tech.
+ */
+export interface TreeViewItem {
+    id: string;
+    label: React.ReactNode;
+    children?: TreeViewItem[];
+    /** Render as a leaf action (no expander). Default: has children. */
+    disabled?: boolean;
+    /** Extra data passed back on events. */
+    meta?: unknown;
+}
+export interface TreeViewProps {
+    items: TreeViewItem[];
+    /** Expanded node ids (controlled). */
+    expanded?: string[];
+    defaultExpanded?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    /** Selected node id (controlled). */
+    selected?: string;
+    defaultSelected?: string;
+    onSelect?: (id: string, item: TreeViewItem) => void;
+    /** Accessible label for the tree landmark. */
+    ariaLabel?: string;
+    className?: string;
+}
+export declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLUListElement>>;
+export declare const treeViewPropsMeta: PropsMeta;

package/dist/core/tree-view.js

@@ -0,0 +1,133 @@
+import { jsx as p, jsxs as M } from "react/jsx-runtime";
+import * as c from "react";
+import { ChevronRight as H } from "lucide-react";
+import { cn as h } from "./cn.js";
+const O = c.forwardRef(function({ items: D, expanded: b, defaultExpanded: C = [], onExpandedChange: o, selected: v, defaultSelected: I, onSelect: u, ariaLabel: N, className: R }, V) {
+  const [j, T] = c.useState(C), [A, E] = c.useState(I), x = b !== void 0, l = x ? b : j, g = v !== void 0, S = g ? v : A, f = c.useRef(/* @__PURE__ */ new Map()), U = (e) => {
+    x || T(e), o == null || o(e);
+  }, m = (e) => {
+    U(l.includes(e) ? l.filter((t) => t !== e) : [...l, e]);
+  }, w = (e) => {
+    e.item.disabled || (g || E(e.item.id), u == null || u(e.item.id, e.item));
+  }, r = [], y = (e, t, a, i) => {
+    var d;
+    for (const s of e) {
+      if (!i) continue;
+      const k = !!((d = s.children) != null && d.length), L = { item: s, level: t, hasChildren: k, parentIds: a };
+      r.push(L), k && l.includes(s.id) && y(s.children, t + 1, [...a, s.id], i && l.includes(s.id));
+    }
+  };
+  y(D, 1, [], !0);
+  const n = (e) => {
+    var t;
+    (t = f.current.get(e)) == null || t.focus();
+  }, K = (e, t) => {
+    const a = r.findIndex((i) => i.item.id === t.item.id);
+    switch (e.key) {
+      case "ArrowDown":
+        a < r.length - 1 && (e.preventDefault(), n(r[a + 1].item.id));
+        break;
+      case "ArrowUp":
+        a > 0 && (e.preventDefault(), n(r[a - 1].item.id));
+        break;
+      case "ArrowRight":
+        if (e.preventDefault(), t.hasChildren && !l.includes(t.item.id)) m(t.item.id);
+        else if (t.hasChildren) {
+          const i = r.find((d) => d.parentIds[d.parentIds.length - 1] === t.item.id);
+          i && n(i.item.id);
+        }
+        break;
+      case "ArrowLeft":
+        if (e.preventDefault(), t.hasChildren && l.includes(t.item.id)) m(t.item.id);
+        else {
+          const i = t.parentIds[t.parentIds.length - 1];
+          i && n(i);
+        }
+        break;
+      case "Home":
+        r.length && (e.preventDefault(), n(r[0].item.id));
+        break;
+      case "End":
+        r.length && (e.preventDefault(), n(r[r.length - 1].item.id));
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault(), w(t);
+        break;
+    }
+  };
+  return /* @__PURE__ */ p(
+    "ul",
+    {
+      ref: V,
+      role: "tree",
+      "aria-label": N,
+      className: h("prui-tree-view flex flex-col gap-0.5 text-sm", R),
+      children: r.map((e) => {
+        const t = l.includes(e.item.id), a = S === e.item.id;
+        return /* @__PURE__ */ p(
+          "li",
+          {
+            role: "treeitem",
+            "aria-level": e.level,
+            "aria-expanded": e.hasChildren ? t : void 0,
+            "aria-selected": a,
+            "aria-disabled": e.item.disabled || void 0,
+            className: "rounded-[var(--prui-radius-1)]",
+            style: { paddingInlineStart: `${(e.level - 1) * 16}px` },
+            children: /* @__PURE__ */ M(
+              "button",
+              {
+                type: "button",
+                ref: (i) => {
+                  i ? f.current.set(e.item.id, i) : f.current.delete(e.item.id);
+                },
+                tabIndex: a ? 0 : -1,
+                disabled: e.item.disabled,
+                "data-selected": a || void 0,
+                onClick: () => {
+                  e.hasChildren && m(e.item.id), w(e);
+                },
+                onKeyDown: (i) => K(i, e),
+                className: h(
+                  "flex w-full cursor-pointer items-center gap-1.5 rounded-[var(--prui-radius-1)] px-2 py-1 text-left outline-none",
+                  "focus-visible:ring-2 focus-visible:ring-[var(--prui-brand)]",
+                  a ? "bg-[var(--prui-brand)]/15 text-[var(--prui-brand)]" : "text-[var(--prui-fg)] hover:bg-[var(--prui-raise)]",
+                  e.item.disabled && "opacity-50 cursor-not-allowed"
+                ),
+                children: [
+                  /* @__PURE__ */ p(
+                    H,
+                    {
+                      className: h("h-3.5 w-3.5 shrink-0 text-[var(--prui-dim)] transition-transform", t && "rotate-90", !e.hasChildren && "invisible"),
+                      "aria-hidden": !0
+                    }
+                  ),
+                  e.item.label
+                ]
+              }
+            )
+          },
+          e.item.id
+        );
+      })
+    }
+  );
+});
+O.displayName = "TreeView";
+const F = {
+  name: "TreeView",
+  props: [
+    { name: "items", type: "TreeViewItem[]", default: null, control: "object" },
+    { name: "expanded", type: "string[]", default: "undefined", control: "object" },
+    { name: "defaultExpanded", type: "string[]", default: "[]", control: "object" },
+    { name: "onExpandedChange", type: "(ids: string[]) => void", default: null, control: "none" },
+    { name: "selected", type: "string", default: "undefined", control: "text" },
+    { name: "onSelect", type: "(id, item) => void", default: null, control: "none" },
+    { name: "ariaLabel", type: "string", default: null, control: "text" }
+  ]
+};
+export {
+  O as TreeView,
+  F as treeViewPropsMeta
+};