@skiddph/prui 0.7.0 → 0.9.0

package/dist/core/time-picker.d.ts

@@ -0,0 +1,68 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * TimePicker / TimeRangePicker: time selection without a date library.
+ * Values are plain "HH:mm" strings (or "HH:mm:ss" with seconds). The
+ * picker is a popover with column grids (hours / minutes / seconds) using
+ * listbox semantics; arrows move within a column, Enter/Space pick,
+ * Escape (topmost) closes, and outside clicks dismiss. TimePanel is the
+ * inline grid pair (no popover) that DatePicker composes when
+ * timepicker is on.
+ */
+export interface TimePickerProps {
+    /** "HH:mm" or "HH:mm:ss" when seconds is set. */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (time: string) => void;
+    /** Step between minute options, in minutes. Default 1. */
+    minuteStep?: number;
+    /** Include a seconds column ("HH:mm:ss" values). */
+    seconds?: boolean;
+    /** Earliest selectable time, inclusive. */
+    min?: string;
+    /** Latest selectable time, inclusive. */
+    max?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    ariaLabel?: string;
+    className?: string;
+}
+export type TimeRange = {
+    from?: string;
+    to?: string;
+};
+export interface TimeRangePickerProps {
+    value?: TimeRange;
+    defaultValue?: TimeRange;
+    onChange?: (range: TimeRange) => void;
+    minuteStep?: number;
+    seconds?: boolean;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    ariaLabel?: string;
+    className?: string;
+}
+interface TimePanelProps {
+    value?: string;
+    onSelect: (time: string) => void;
+    minuteStep?: number;
+    seconds?: boolean;
+    min?: string;
+    max?: string;
+    /** Hide the column headers (used by the range picker's side-by-side pair). */
+    compact?: boolean;
+    className?: string;
+}
+/**
+ * TimePanel: the inline hour/minute(/second) grids. TimePicker renders it
+ * in a popover; DatePicker composes it directly; it is exported for
+ * custom compositions.
+ */
+export declare function TimePanel({ value, onSelect, minuteStep, seconds, min, max, compact, className }: TimePanelProps): React.JSX.Element;
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;
+export declare const TimeRangePicker: React.ForwardRefExoticComponent<TimeRangePickerProps & React.RefAttributes<HTMLInputElement>>;
+export declare const timePickerPropsMeta: PropsMeta;
+export declare const timeRangePickerPropsMeta: PropsMeta;
+export {};

package/dist/core/time-picker.js

@@ -0,0 +1,305 @@
+import { jsxs as N, Fragment as U, jsx as u } from "react/jsx-runtime";
+import * as R from "react";
+import { Clock as G } from "lucide-react";
+import { cn as I } from "./cn.js";
+import { Portal as L, useOverlayStack as J, useEscapeKey as Q } from "./overlay.js";
+import { useAnchoredPosition as W } from "./anchor.js";
+import { moveIndex as F } from "./list-nav.js";
+import { usePruiI18n as V } from "../i18n.js";
+const P = (s) => String(s).padStart(2, "0");
+function _(s) {
+  if (!s || !/^\d{2}:\d{2}(:\d{2})?$/.test(s)) return null;
+  const [o, c, d] = s.split(":").map(Number);
+  return { h: o ?? 0, m: c ?? 0, s: d ?? 0 };
+}
+function X(s, o, c = 0, d) {
+  return d ? `${P(s)}:${P(o)}:${P(c)}` : `${P(s)}:${P(o)}`;
+}
+function z(s) {
+  const o = _(s);
+  return o ? o.h * 3600 + o.m * 60 + o.s : -1;
+}
+function Y(s) {
+  const o = [];
+  for (let c = 0; c < 60; c += Math.max(1, s)) o.push(c);
+  return o;
+}
+function C({ value: s, onSelect: o, minuteStep: c = 1, seconds: d = !1, min: h, max: y, compact: k, className: w }) {
+  const { t: b } = V(), t = _(s), x = h ? z(h) : -1 / 0, A = y ? z(y) : 1 / 0, p = [
+    { label: b.hours, items: Array.from({ length: 24 }, (e, a) => a), selected: (t == null ? void 0 : t.h) ?? null, unit: "h" },
+    { label: b.minutes, items: Y(c), selected: (t == null ? void 0 : t.m) ?? null, unit: "m" }
+  ];
+  d && p.push({ label: b.seconds, items: Array.from({ length: 60 }, (e, a) => a), selected: (t == null ? void 0 : t.s) ?? null, unit: "s" });
+  const H = (e, a) => {
+    const n = e === "h" ? a : (t == null ? void 0 : t.h) ?? 0, m = e === "m" ? a : (t == null ? void 0 : t.m) ?? 0, i = e === "s" ? a : (t == null ? void 0 : t.s) ?? 0, f = n * 3600 + m * 60 + i;
+    return f < x || f > A;
+  }, E = (e, a) => {
+    const n = e === "h" ? a : (t == null ? void 0 : t.h) ?? 0, m = e === "m" ? a : (t == null ? void 0 : t.m) ?? 0, i = e === "s" ? a : (t == null ? void 0 : t.s) ?? 0;
+    o(X(n, m, i, d));
+  }, S = (e, a) => {
+    var T, v, g, l, D, $, M, K;
+    const n = Array.from(
+      e.currentTarget.querySelectorAll("[role='option']:not([aria-disabled='true'])")
+    ), m = n.findIndex((r) => r.getAttribute("aria-selected") === "true"), i = n.indexOf(document.activeElement), f = i >= 0 ? i : m;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), (T = n[F(f, 1, n.length)]) == null || T.focus();
+        break;
+      case "ArrowUp":
+        e.preventDefault(), (v = n[F(f, -1, n.length)]) == null || v.focus();
+        break;
+      case "Home":
+        e.preventDefault(), (g = n[0]) == null || g.focus();
+        break;
+      case "End":
+        e.preventDefault(), (l = n[n.length - 1]) == null || l.focus();
+        break;
+      case "ArrowLeft":
+        if (a > 0) {
+          e.preventDefault();
+          const r = (D = e.currentTarget.previousElementSibling) == null ? void 0 : D.querySelectorAll("[role='option']:not([aria-disabled='true'])");
+          ($ = r == null ? void 0 : r[Math.min(f < 0 ? 0 : f, r.length - 1)]) == null || $.focus();
+        }
+        break;
+      case "ArrowRight":
+        if (a < p.length - 1) {
+          e.preventDefault();
+          const r = (M = e.currentTarget.nextElementSibling) == null ? void 0 : M.querySelectorAll("[role='option']:not([aria-disabled='true'])");
+          (K = r == null ? void 0 : r[Math.min(f < 0 ? 0 : f, r.length - 1)]) == null || K.focus();
+        }
+        break;
+    }
+  };
+  return /* @__PURE__ */ u("div", { className: I("prui-time-panel flex gap-1", w), role: "group", "aria-label": b.time, children: p.map((e, a) => /* @__PURE__ */ N(
+    "div",
+    {
+      role: "listbox",
+      "aria-label": e.label,
+      tabIndex: -1,
+      onKeyDown: (n) => S(n, a),
+      className: I("flex w-16 flex-col rounded-[var(--prui-radius-1)] outline-none", !k && "bg-[var(--prui-raise)]/40"),
+      children: [
+        k ? null : /* @__PURE__ */ u("div", { className: "px-2 pb-1 pt-2 text-center text-[10px] font-semibold uppercase tracking-wide text-[var(--prui-dim)]", children: e.label }),
+        /* @__PURE__ */ u("div", { className: "flex max-h-56 flex-col overflow-y-auto p-1", children: e.items.map((n) => {
+          const m = e.selected === n, i = H(e.unit, n);
+          return /* @__PURE__ */ u(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": m,
+              "aria-disabled": i || void 0,
+              tabIndex: m ? 0 : -1,
+              "data-testid": `time-${e.unit}`,
+              onClick: () => !i && E(e.unit, n),
+              className: I(
+                "rounded-[calc(var(--prui-radius-1))] py-1 text-center text-sm tabular-nums cursor-pointer outline-none",
+                "focus-visible:bg-[var(--prui-raise)]",
+                m ? "bg-[var(--prui-brand)] text-[var(--prui-brand-fg,#fff)] font-medium" : "text-[var(--prui-fg)] hover:bg-[var(--prui-raise)]",
+                i && "opacity-40 pointer-events-none"
+              ),
+              children: P(n)
+            },
+            n
+          );
+        }) })
+      ]
+    },
+    e.unit
+  )) });
+}
+function B(s, o, c) {
+  const { setElement: d, isTop: h } = J(o);
+  Q(o, h, c);
+  const { ref: y, position: k } = W({ active: o, anchorRef: s, side: "bottom", align: "start", offsetHeight: 280 });
+  return R.useEffect(() => {
+    if (!o) return;
+    const w = (b) => {
+      var x;
+      const t = b.target;
+      (x = s.current) != null && x.contains(t) || (!(t instanceof Element) || !t.closest("[data-prui-time-panel-wrap]")) && c();
+    };
+    return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
+  }), { setElement: d, floatingRef: y, position: k };
+}
+const Z = R.forwardRef(function({ value: o, defaultValue: c, onChange: d, minuteStep: h, seconds: y, min: k, max: w, disabled: b, placeholder: t = "HH:mm", ariaLabel: x, className: A }, p) {
+  const [H, E] = R.useState(c ?? ""), [S, e] = R.useState(!1), a = R.useRef(null), n = o !== void 0, m = n ? o : H, i = a, { setElement: f, floatingRef: T, position: v } = B(i, S, () => {
+    var l;
+    e(!1), (l = a.current) == null || l.focus();
+  }), g = (l) => {
+    n || E(l), d == null || d(l);
+  };
+  return /* @__PURE__ */ N(U, { children: [
+    /* @__PURE__ */ u(
+      "input",
+      {
+        ref: (l) => {
+          a.current = l, typeof p == "function" ? p(l) : p && (p.current = l);
+        },
+        type: "text",
+        readOnly: !0,
+        role: "combobox",
+        "aria-expanded": S,
+        "aria-haspopup": "dialog",
+        "aria-label": x,
+        placeholder: t,
+        disabled: b,
+        value: m,
+        onClick: () => e(!0),
+        onFocus: () => {
+          !b && !S && e(!0);
+        },
+        className: I(
+          "prui-time-picker h-9 w-full cursor-pointer rounded-[var(--prui-radius)] border border-[var(--prui-line)]",
+          "bg-[var(--prui-background)] px-3 pr-8 text-sm tabular-nums text-[var(--prui-fg)] placeholder:text-[var(--prui-dim)]",
+          "outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          A
+        )
+      }
+    ),
+    S ? /* @__PURE__ */ u(L, { children: /* @__PURE__ */ u(
+      "div",
+      {
+        ref: (l) => {
+          T(l), f(l);
+        },
+        role: "dialog",
+        "aria-label": x ?? "Choose time",
+        "data-prui-time-panel-wrap": !0,
+        className: "fixed z-[var(--prui-z-overlay)] rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-2 shadow-[var(--prui-shadow-lg)]",
+        style: { top: (v == null ? void 0 : v.top) ?? -9999, left: (v == null ? void 0 : v.left) ?? -9999 },
+        children: /* @__PURE__ */ u(C, { value: m, onSelect: g, minuteStep: h, seconds: y, min: k, max: w })
+      }
+    ) }) : null
+  ] });
+});
+Z.displayName = "TimePicker";
+const ee = R.forwardRef(function({ value: o, defaultValue: c, onChange: d, minuteStep: h, seconds: y, min: k, max: w, disabled: b, placeholder: t = "HH:mm – HH:mm", ariaLabel: x, className: A }, p) {
+  const { t: H } = V(), [E, S] = R.useState(c ?? {}), [e, a] = R.useState(!1), n = R.useRef(null), m = o !== void 0, i = m ? o : E, f = n, { setElement: T, floatingRef: v, position: g } = B(f, e, () => {
+    var r;
+    a(!1), (r = n.current) == null || r.focus();
+  }), l = (r) => {
+    m || S(r), d == null || d(r);
+  }, D = (r, q) => {
+    const O = r === "from" ? q : i.from, j = r === "to" ? q : i.to;
+    if (O && j && z(j) < z(O)) {
+      l(r === "to" ? { from: q, to: void 0 } : { from: j, to: O });
+      return;
+    }
+    l({ from: O, to: j });
+  }, $ = i.from ? i.to ? `${i.from} – ${i.to}` : `${i.from} – …` : "", M = i.to ?? w, K = i.from ?? k;
+  return /* @__PURE__ */ N(U, { children: [
+    /* @__PURE__ */ u(
+      "input",
+      {
+        ref: (r) => {
+          n.current = r, typeof p == "function" ? p(r) : p && (p.current = r);
+        },
+        type: "text",
+        readOnly: !0,
+        role: "combobox",
+        "aria-expanded": e,
+        "aria-haspopup": "dialog",
+        "aria-label": x,
+        placeholder: t,
+        disabled: b,
+        value: $,
+        onClick: () => a(!0),
+        onFocus: () => {
+          !b && !e && a(!0);
+        },
+        className: I(
+          "prui-time-range-picker h-9 w-full cursor-pointer rounded-[var(--prui-radius)] border border-[var(--prui-line)]",
+          "bg-[var(--prui-background)] px-3 pr-8 text-sm tabular-nums text-[var(--prui-fg)] placeholder:text-[var(--prui-dim)]",
+          "outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          A
+        )
+      }
+    ),
+    /* @__PURE__ */ u(G, { className: "pointer-events-none -ml-7 h-4 w-4 text-[var(--prui-dim)]", "aria-hidden": !0 }),
+    e ? /* @__PURE__ */ u(L, { children: /* @__PURE__ */ u(
+      "div",
+      {
+        ref: (r) => {
+          v(r), T(r);
+        },
+        role: "dialog",
+        "aria-label": x ?? "Choose time range",
+        "data-prui-time-panel-wrap": !0,
+        className: "fixed z-[var(--prui-z-overlay)] rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-3 shadow-[var(--prui-shadow-lg)]",
+        style: { top: (g == null ? void 0 : g.top) ?? -9999, left: (g == null ? void 0 : g.left) ?? -9999 },
+        children: /* @__PURE__ */ N("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ N("div", { className: "flex gap-4", children: [
+            /* @__PURE__ */ N("div", { children: [
+              /* @__PURE__ */ u("div", { className: "mb-1 text-xs font-semibold text-[var(--prui-dim)]", children: H.from }),
+              /* @__PURE__ */ u(C, { compact: !0, value: i.from, onSelect: (r) => D("from", r), minuteStep: h, seconds: y, min: k, max: M })
+            ] }),
+            /* @__PURE__ */ N("div", { children: [
+              /* @__PURE__ */ u("div", { className: "mb-1 text-xs font-semibold text-[var(--prui-dim)]", children: H.to }),
+              /* @__PURE__ */ u(C, { compact: !0, value: i.to, onSelect: (r) => D("to", r), minuteStep: h, seconds: y, min: K, max: w })
+            ] })
+          ] }),
+          /* @__PURE__ */ N("div", { className: "flex items-center justify-between border-t border-[var(--prui-line)] pt-2 text-xs text-[var(--prui-dim)]", children: [
+            /* @__PURE__ */ u("span", { "data-testid": "timerange-label", children: $ || H.time }),
+            /* @__PURE__ */ N("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ u(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => l({}),
+                  className: "cursor-pointer rounded-[var(--prui-radius-1)] px-2 py-1 transition-colors hover:bg-[var(--prui-raise)]",
+                  children: H.clear
+                }
+              ),
+              /* @__PURE__ */ u(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    var r;
+                    a(!1), (r = n.current) == null || r.focus();
+                  },
+                  className: "cursor-pointer rounded-[var(--prui-radius-1)] bg-[var(--prui-brand)]/15 px-2 py-1 text-[var(--prui-brand)] transition-colors hover:bg-[var(--prui-brand)]/25",
+                  children: H.apply
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    ) }) : null
+  ] });
+});
+ee.displayName = "TimeRangePicker";
+const le = {
+  name: "TimePicker",
+  props: [
+    { name: "value", type: "string 'HH:mm' | 'HH:mm:ss'", default: "undefined", control: "text" },
+    { name: "defaultValue", type: "string", default: "undefined", control: "text" },
+    { name: "onChange", type: "(time: string) => void", default: null, control: "none" },
+    { name: "minuteStep", type: "number (minutes)", default: "1", control: "number" },
+    { name: "seconds", type: "boolean", default: "false", control: "boolean", description: "Adds a seconds column ('HH:mm:ss')." },
+    { name: "min", type: "string 'HH:mm'", default: "undefined", control: "text" },
+    { name: "max", type: "string 'HH:mm'", default: "undefined", control: "text" }
+  ]
+}, ue = {
+  name: "TimeRangePicker",
+  props: [
+    { name: "value", type: "{ from?: string, to?: string }", default: "{}", control: "object" },
+    { name: "defaultValue", type: "{ from?: string, to?: string }", default: "{}", control: "object" },
+    { name: "onChange", type: "(range: TimeRange) => void", default: null, control: "none" },
+    { name: "minuteStep", type: "number (minutes)", default: "1", control: "number" },
+    { name: "seconds", type: "boolean", default: "false", control: "boolean" },
+    { name: "min", type: "string 'HH:mm'", default: "undefined", control: "text" },
+    { name: "max", type: "string 'HH:mm'", default: "undefined", control: "text" }
+  ]
+};
+export {
+  C as TimePanel,
+  Z as TimePicker,
+  ee as TimeRangePicker,
+  le as timePickerPropsMeta,
+  ue as timeRangePickerPropsMeta
+};

package/dist/core/timeline.d.ts

@@ -0,0 +1,22 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * Timeline: a vertical chronological list with markers, timestamps, and
+ * optional icons/colors per item. Presentational (role="list" semantics);
+ * content is fully caller-owned.
+ */
+export type TimelineVariant = "brand" | "success" | "warning" | "danger" | "neutral";
+export interface TimelineItemData {
+    title: React.ReactNode;
+    time?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    variant?: TimelineVariant;
+}
+export interface TimelineProps extends React.HTMLAttributes<HTMLOListElement> {
+    items: TimelineItemData[];
+    /** Marker alignment relative to the content column. Default left. */
+    align?: "left" | "alternate" | "right";
+}
+export declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLOListElement>>;
+export declare const timelinePropsMeta: PropsMeta;

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;