@skiddph/prui 0.7.0 → 0.8.0

package/dist/core/select.js

@@ -1,144 +1,225 @@
-import { jsxs as b, jsx as s, Fragment as P } from "react/jsx-runtime";
-import * as o from "react";
-import { ChevronDown as z, Check as D } from "lucide-react";
-import { cn as m } from "./cn.js";
-const S = o.createContext(null);
-function g() {
-  const r = o.useContext(S);
-  if (!r) throw new Error("Select parts must be used inside <Select>");
-  return r;
+import { jsxs as E, jsx as h, Fragment as H } from "react/jsx-runtime";
+import * as r from "react";
+import { ChevronDown as M, Check as B } from "lucide-react";
+import { cn as A } from "./cn.js";
+import { useOverlayStack as G, useEscapeKey as J } from "./overlay.js";
+import { typeaheadIndex as Q, endIndex as W, homeIndex as X, moveIndex as L } from "./list-nav.js";
+const P = r.createContext(null);
+function D() {
+  const n = r.useContext(P);
+  if (!n) throw new Error("Select parts must be used inside <Select>");
+  return n;
 }
-const F = ({
-  options: r,
-  value: a,
-  defaultValue: t,
+const Y = ({
+  options: n,
+  value: s,
+  defaultValue: p,
   placeholder: i = "Select...",
-  disabled: e,
-  name: d,
-  id: u,
-  onChange: l,
-  onOpenChange: p,
-  children: f,
-  ...c
+  disabled: u,
+  name: l,
+  id: v,
+  onChange: c,
+  onOpenChange: d,
+  children: S,
+  ...g
 }) => {
-  const [v, I] = o.useState(t ?? ""), [R, T] = o.useState(!1), [V, j] = o.useState(), x = a !== void 0 ? a : v, O = (n) => {
-    a === void 0 && I(n), l == null || l(n);
-  }, E = (n) => {
-    T(n), p == null || p(n);
-  };
-  return /* @__PURE__ */ b(
-    S.Provider,
+  var j;
+  const [b, y] = r.useState(p ?? ""), [x, w] = r.useState(!1), [t, N] = r.useState(null), [k, V] = r.useState({}), e = s !== void 0 ? s : b, o = r.useCallback((a, O) => {
+    V((R) => {
+      if (O === null) {
+        if (!(a in R)) return R;
+        const F = { ...R };
+        return delete F[a], F;
+      }
+      return R[a] === O ? R : { ...R, [a]: O };
+    });
+  }, []), I = (a) => {
+    s === void 0 && y(a), c == null || c(a);
+  }, m = (a) => {
+    w(a), d == null || d(a);
+  }, f = () => t == null ? void 0 : t.focus(), T = k[e] ?? ((j = n == null ? void 0 : n.find((a) => a.value === e)) == null ? void 0 : j.label);
+  return /* @__PURE__ */ E(
+    P.Provider,
     {
-      value: { value: x, open: R, triggerId: V, setValue: O, setOpen: E, registerTrigger: j },
+      value: { value: e, displayValue: T, open: x, triggerId: (t == null ? void 0 : t.id) || void 0, setValue: I, setOpen: m, registerTrigger: N, returnFocusToTrigger: f, registerLabel: o },
       children: [
-        d ? /* @__PURE__ */ s("input", { type: "hidden", name: d, value: x }) : null,
-        f ?? /* @__PURE__ */ b(P, { children: [
-          /* @__PURE__ */ s(h, { disabled: e, id: u, ...c, children: /* @__PURE__ */ s(y, { placeholder: i }) }),
-          /* @__PURE__ */ s(w, { children: (r ?? []).map((n) => /* @__PURE__ */ s(N, { value: n.value, disabled: n.disabled, children: n.label }, n.value)) })
+        l ? /* @__PURE__ */ h("input", { type: "hidden", name: l, value: e }) : null,
+        S ?? /* @__PURE__ */ E(H, { children: [
+          /* @__PURE__ */ h(U, { disabled: u, id: v, ...g, children: /* @__PURE__ */ h($, { placeholder: i }) }),
+          /* @__PURE__ */ h(z, { children: (n ?? []).map((a) => /* @__PURE__ */ h(q, { value: a.value, disabled: a.disabled, children: a.label }, a.value)) })
         ] })
       ]
     }
   );
 };
-F.displayName = "Select";
-const h = o.forwardRef(
-  ({ className: r, children: a, onClick: t, disabled: i, id: e, ...d }, u) => {
-    const { open: l, setOpen: p, registerTrigger: f } = g();
-    return o.useEffect(() => {
-      e && f(e);
-    }, [e, f]), /* @__PURE__ */ b(
+Y.displayName = "Select";
+const U = r.forwardRef(
+  ({ className: n, children: s, onClick: p, onKeyDown: i, disabled: u, id: l, ...v }, c) => {
+    const { open: d, setOpen: S, registerTrigger: g } = D(), b = r.useRef(null), y = r.useId(), x = l ?? `prui-select-${y}`;
+    r.useEffect(() => (g(b.current), () => g(null)), [g]);
+    const w = `${x}-listbox`;
+    return /* @__PURE__ */ E(
       "button",
       {
-        ref: u,
-        id: e,
+        ref: (t) => {
+          b.current = t, typeof c == "function" ? c(t) : c && (c.current = t);
+        },
+        id: x,
         type: "button",
         role: "combobox",
-        "aria-expanded": l,
+        "aria-expanded": d,
         "aria-haspopup": "listbox",
-        disabled: i,
-        "data-state": l ? "open" : "closed",
-        className: m(
+        "aria-controls": d ? w : void 0,
+        disabled: u,
+        "data-state": d ? "open" : "closed",
+        className: A(
           "prui-select-trigger flex h-9 w-full items-center justify-between gap-2 border border-[var(--prui-line)]",
           "bg-[var(--prui-background)] rounded-[var(--prui-radius)] px-3 text-sm text-[var(--prui-fg)]",
           "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 cursor-pointer",
-          r
+          n
         ),
-        onClick: (c) => {
-          t == null || t(c), c.defaultPrevented || p(!l);
+        onClick: (t) => {
+          p == null || p(t), t.defaultPrevented || S(!d);
+        },
+        onKeyDown: (t) => {
+          i == null || i(t), !t.defaultPrevented && !d && (t.key === "ArrowDown" || t.key === "ArrowUp" || t.key === "Enter" || t.key === " ") && (t.preventDefault(), S(!0));
         },
-        ...d,
+        ...v,
         children: [
-          a,
-          /* @__PURE__ */ s(z, { className: m("h-4 w-4 shrink-0 text-[var(--prui-dim)] transition-transform", l && "rotate-180"), "aria-hidden": !0 })
+          s,
+          /* @__PURE__ */ h(M, { className: A("h-4 w-4 shrink-0 text-[var(--prui-dim)] transition-transform", d && "rotate-180"), "aria-hidden": !0 })
         ]
       }
     );
   }
 );
-h.displayName = "SelectTrigger";
-const y = o.forwardRef(
-  ({ className: r, placeholder: a, children: t, ...i }, e) => {
-    const { value: d } = g();
-    return /* @__PURE__ */ s("span", { ref: e, className: m("truncate", r), ...i, children: t ?? (d || /* @__PURE__ */ s("span", { className: "text-[var(--prui-dim)]", children: a })) });
+U.displayName = "SelectTrigger";
+const $ = r.forwardRef(
+  ({ className: n, placeholder: s, children: p, ...i }, u) => {
+    const { value: l, displayValue: v } = D();
+    return /* @__PURE__ */ h("span", { ref: u, className: A("truncate", n), ...i, children: p ?? v ?? (l || /* @__PURE__ */ h("span", { className: "text-[var(--prui-dim)]", children: s })) });
   }
 );
-y.displayName = "SelectValue";
-const w = o.forwardRef(
-  ({ className: r, children: a, ...t }, i) => {
-    const { open: e, setOpen: d, triggerId: u } = g();
-    return e ? /* @__PURE__ */ s(
+$.displayName = "SelectValue";
+const z = r.forwardRef(
+  ({ className: n, children: s, id: p, ...i }, u) => {
+    const { open: l, setOpen: v, triggerId: c, setValue: d, returnFocusToTrigger: S } = D(), g = r.useRef(null), [b, y] = r.useState(-1), x = r.useRef({ buffer: "", at: 0 }), { setElement: w, isTop: t } = G(l);
+    J(l, t, () => {
+      v(!1), S();
+    });
+    const N = r.useCallback(() => {
+      const e = g.current;
+      return e ? Array.from(e.querySelectorAll("[role='option']")) : [];
+    }, []), k = (e) => {
+      var o;
+      y(e), (o = N()[e]) == null || o.focus();
+    };
+    if (r.useEffect(() => {
+      var f;
+      if (!l) return;
+      y(-1);
+      const e = N(), o = e.findIndex((T) => T.getAttribute("aria-selected") === "true"), I = e.findIndex((T) => T.getAttribute("aria-disabled") !== "true"), m = o >= 0 ? o : I;
+      m >= 0 && (y(m), (f = e[m]) == null || f.focus());
+    }, [l, N]), !l) return null;
+    const V = (e) => {
+      const o = N(), I = (m) => {
+        var f;
+        return ((f = o[m]) == null ? void 0 : f.getAttribute("aria-disabled")) !== "true";
+      };
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), k(L(b, 1, o.length, { enabled: I }));
+          break;
+        case "ArrowUp":
+          e.preventDefault(), k(L(b, -1, o.length, { enabled: I }));
+          break;
+        case "Home":
+          e.preventDefault(), k(X(o.length, I));
+          break;
+        case "End":
+          e.preventDefault(), k(W(o.length, I));
+          break;
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          const m = o[b];
+          if (m && I(b)) {
+            const f = m.dataset.value;
+            f !== void 0 ? (d(f), v(!1), S()) : m.click();
+          }
+          break;
+        }
+        case "Tab":
+          v(!1);
+          break;
+        default:
+          if (e.key.length === 1) {
+            const m = () => o.map((T) => T.textContent ?? ""), { index: f } = Q(m, x.current, e.key, b);
+            f >= 0 && f !== b && (e.preventDefault(), k(f));
+          }
+      }
+    };
+    return /* @__PURE__ */ h(
       "div",
       {
-        ref: i,
+        ref: (e) => {
+          g.current = e, w((e == null ? void 0 : e.parentElement) ?? null), typeof u == "function" ? u(e) : u && (u.current = e);
+        },
+        id: p ?? (c ? `${c}-listbox` : void 0),
         role: "listbox",
-        "aria-labelledby": u,
+        "aria-labelledby": c,
         tabIndex: -1,
-        "data-state": e ? "open" : "closed",
-        className: m(
-          "prui-select-content absolute z-50 mt-1 min-w-40 max-h-60 overflow-auto p-1",
-          "bg-[var(--prui-surface)] border border-[var(--prui-line)] rounded-[var(--prui-radius)] shadow-lg",
-          r
+        "data-state": l ? "open" : "closed",
+        onKeyDown: V,
+        className: A(
+          "prui-select-content absolute z-[var(--prui-z-overlay)] mt-1 min-w-40 max-h-60 overflow-auto p-1",
+          "bg-[var(--prui-surface)] border border-[var(--prui-line)] rounded-[var(--prui-radius)] shadow-[var(--prui-shadow-md)] outline-none",
+          n
         ),
-        ...t,
-        children: a
+        ...i,
+        children: s
       }
-    ) : null;
+    );
   }
 );
-w.displayName = "SelectContent";
-const N = o.forwardRef(
-  ({ className: r, value: a, disabled: t, children: i, onClick: e, ...d }, u) => {
-    const { value: l, setValue: p, setOpen: f } = g(), c = l === a;
-    return /* @__PURE__ */ b(
+z.displayName = "SelectContent";
+const q = r.forwardRef(
+  ({ className: n, value: s, disabled: p, children: i, onClick: u, tabIndex: l = -1, ...v }, c) => {
+    const { value: d, setValue: S, setOpen: g, returnFocusToTrigger: b, registerLabel: y } = D(), x = d === s, w = typeof i == "string" || typeof i == "number" ? String(i) : void 0;
+    return r.useEffect(() => {
+      w !== void 0 && y(s, w);
+    }, [s, w, y]), /* @__PURE__ */ E(
       "div",
       {
-        ref: u,
+        ref: c,
         role: "option",
-        "aria-selected": c,
-        "aria-disabled": t,
-        "data-selected": c || void 0,
-        className: m(
+        "aria-selected": x,
+        "aria-disabled": p,
+        "data-selected": x || void 0,
+        "data-value": s,
+        tabIndex: l,
+        className: A(
           "prui-select-item relative flex cursor-pointer items-center gap-2 rounded-[calc(var(--prui-radius)-1px)]",
-          "py-1.5 pl-3 pr-8 text-sm text-[var(--prui-fg)] hover:bg-[var(--prui-raise)]",
-          c && "font-medium",
-          t && "opacity-50 pointer-events-none",
-          r
+          "py-1.5 pl-3 pr-8 text-sm text-[var(--prui-fg)] hover:bg-[var(--prui-raise)] focus-visible:bg-[var(--prui-raise)] outline-none",
+          x && "font-medium",
+          p && "opacity-50 pointer-events-none",
+          n
         ),
-        onClick: (v) => {
-          e == null || e(v), !(v.defaultPrevented || t) && (p(a), f(!1));
+        onClick: (t) => {
+          u == null || u(t), !(t.defaultPrevented || p) && (S(s), g(!1), b());
         },
-        ...d,
+        ...v,
         children: [
           i,
-          c ? /* @__PURE__ */ s(D, { className: "absolute right-2 h-4 w-4 text-[var(--prui-brand)]", "aria-hidden": !0 }) : null
+          x ? /* @__PURE__ */ h(B, { className: "absolute right-2 h-4 w-4 text-[var(--prui-brand)]", "aria-hidden": !0 }) : null
         ]
       }
     );
   }
 );
-N.displayName = "SelectItem";
-const A = {
+q.displayName = "SelectItem";
+const te = {
   name: "Select",
   props: [
     { name: "options", type: "SelectOption[]", default: "[]", control: "object" },
@@ -150,10 +231,10 @@ const A = {
   ]
 };
 export {
-  F as Select,
-  w as SelectContent,
-  N as SelectItem,
-  h as SelectTrigger,
-  y as SelectValue,
-  A as selectPropsMeta
+  Y as Select,
+  z as SelectContent,
+  q as SelectItem,
+  U as SelectTrigger,
+  $ as SelectValue,
+  te as selectPropsMeta
 };

package/dist/core/skeleton.d.ts

@@ -0,0 +1,20 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * Skeleton: a placeholder shimmer for loading layouts. Purely decorative
+ * (aria-hidden); pair with a live region or <Spinner> for the accessible
+ * loading announcement.
+ */
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, SurfacePropsLike {
+    /** Shape preset. */
+    variant?: "text" | "rect" | "circle";
+    /** Text variant line height in rem units (e.g. 1 for a text line). */
+    lines?: number;
+}
+interface SurfacePropsLike {
+    /** Any CSS background value overriding the shimmer base. */
+    bg?: string;
+}
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+export declare const skeletonPropsMeta: PropsMeta;
+export {};

package/dist/core/skeleton.js

@@ -0,0 +1,41 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as c from "react";
+import { cn as o } from "./cn.js";
+const s = {
+  text: "rounded-[var(--prui-radius-1)] h-4",
+  rect: "rounded-[var(--prui-radius)]",
+  circle: "rounded-[var(--prui-radius-full)] aspect-square"
+}, p = c.forwardRef(
+  ({ className: a, variant: n = "text", lines: e = 1, bg: i, style: l, ...u }, d) => n === "text" && e > 1 ? /* @__PURE__ */ t("div", { className: o("prui-skeleton-group flex flex-col gap-2", a), role: "presentation", children: Array.from({ length: e }).map((m, r) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: r === 0 ? d : void 0,
+      "aria-hidden": !0,
+      className: o("prui-skeleton prui-anim-fade", s.text, r === e - 1 && "w-2/3"),
+      style: { backgroundColor: i ?? void 0, ...l }
+    },
+    r
+  )) }) : /* @__PURE__ */ t(
+    "div",
+    {
+      ref: d,
+      "aria-hidden": !0,
+      className: o("prui-skeleton prui-anim-fade", s[n], a),
+      style: { backgroundColor: i ?? void 0, ...l },
+      ...u
+    }
+  )
+);
+p.displayName = "Skeleton";
+const k = {
+  name: "Skeleton",
+  props: [
+    { name: "variant", type: "'text' | 'rect' | 'circle'", default: "'text'", control: "select", options: ["text", "rect", "circle"] },
+    { name: "lines", type: "number (text variant)", default: "1", control: "number" },
+    { name: "bg", type: "string (CSS background)", default: "shimmer token", control: "text" }
+  ]
+};
+export {
+  p as Skeleton,
+  k as skeletonPropsMeta
+};

package/dist/core/spinner.d.ts

@@ -0,0 +1,15 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * Spinner: an inline loading indicator with an accessible label. Announces
+ * through role="status" so screen readers hear loading state without
+ * stealing focus.
+ */
+export type SpinnerSize = "xs" | "sm" | "md" | "lg";
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Accessible label announced to screen readers. */
+    label?: string;
+    size?: SpinnerSize;
+}
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const spinnerPropsMeta: PropsMeta;

package/dist/core/spinner.js

@@ -0,0 +1,41 @@
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import * as p from "react";
+import { Loader2 as l } from "lucide-react";
+import { cn as n } from "./cn.js";
+import { usePruiI18n as c } from "../i18n.js";
+const d = {
+  xs: "h-3 w-3",
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-8 w-8"
+}, f = p.forwardRef(
+  ({ className: r, label: e, size: i = "md", ...t }, a) => {
+    const { t: o } = c();
+    return /* @__PURE__ */ m(
+      "span",
+      {
+        ref: a,
+        role: "status",
+        "aria-label": e ?? o.loading,
+        className: n("prui-spinner inline-flex items-center justify-center text-[var(--prui-dim)]", r),
+        ...t,
+        children: [
+          /* @__PURE__ */ s(l, { className: n("animate-spin", d[i]), "aria-hidden": !0 }),
+          e ? /* @__PURE__ */ s("span", { className: "sr-only", children: e }) : null
+        ]
+      }
+    );
+  }
+);
+f.displayName = "Spinner";
+const w = {
+  name: "Spinner",
+  props: [
+    { name: "label", type: "string", default: "'Loading...'", control: "text", description: "Accessible label." },
+    { name: "size", type: "'xs' | 'sm' | 'md' | 'lg'", default: "'md'", control: "select", options: ["xs", "sm", "md", "lg"] }
+  ]
+};
+export {
+  f as Spinner,
+  w as spinnerPropsMeta
+};

package/dist/core/tabs.js

@@ -1,82 +1,111 @@
-import { jsx as l } from "react/jsx-runtime";
-import * as r from "react";
-import { cn as c } from "./cn.js";
-const f = r.createContext(null);
-function m() {
-  const t = r.useContext(f);
-  if (!t) throw new Error("Tabs parts must be used inside <Tabs>");
-  return t;
+import { jsx as f } from "react/jsx-runtime";
+import * as l from "react";
+import { cn as m } from "./cn.js";
+const y = l.createContext(null);
+function g() {
+  const n = l.useContext(y);
+  if (!n) throw new Error("Tabs parts must be used inside <Tabs>");
+  return n;
 }
-const x = ({ value: t, defaultValue: e, onChange: a, className: i, children: o, ...s }) => {
-  const [b, u] = r.useState(e ?? ""), n = t !== void 0 ? t : b, d = r.useId(), v = (p) => {
-    t === void 0 && u(p), a == null || a(p);
+const x = ({ value: n, defaultValue: a, onChange: s, className: i, children: o, ...u }) => {
+  const [b, t] = l.useState(a ?? ""), e = n !== void 0 ? n : b, c = l.useId(), p = (d) => {
+    n === void 0 && t(d), s == null || s(d);
   };
-  return /* @__PURE__ */ l(f.Provider, { value: { value: n, setValue: v, baseId: d }, children: /* @__PURE__ */ l("div", { className: c("prui-tabs", i), ...s, children: o }) });
+  return /* @__PURE__ */ f(y.Provider, { value: { value: e, setValue: p, baseId: c }, children: /* @__PURE__ */ f("div", { className: m("prui-tabs", i), ...u, children: o }) });
 };
 x.displayName = "Tabs";
-const g = r.forwardRef(
-  ({ className: t, ...e }, a) => /* @__PURE__ */ l(
-    "div",
-    {
-      ref: a,
-      role: "tablist",
-      className: c(
-        "prui-tabs-list inline-flex h-9 items-center gap-1 rounded-[var(--prui-radius)] bg-[var(--prui-raise)] p-1",
-        t
-      ),
-      ...e
-    }
-  )
+const T = l.forwardRef(
+  ({ className: n, onKeyDown: a, ...s }, i) => {
+    const o = l.useRef(null), u = () => {
+      const t = o.current;
+      return t ? Array.from(t.querySelectorAll("[role='tab']")) : [];
+    };
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        ref: (t) => {
+          o.current = t, typeof i == "function" ? i(t) : i && (i.current = t);
+        },
+        role: "tablist",
+        "aria-orientation": "horizontal",
+        onKeyDown: (t) => {
+          var d, v;
+          if (a == null || a(t), t.defaultPrevented) return;
+          const e = u(), c = e.findIndex((r) => r.tabIndex === 0), p = t.key === "ArrowRight" || t.key === "ArrowDown" ? 1 : t.key === "ArrowLeft" || t.key === "ArrowUp" ? -1 : 0;
+          if (p !== 0) {
+            t.preventDefault();
+            const r = e[(c + p + e.length) % e.length];
+            r == null || r.focus(), r == null || r.click();
+            return;
+          }
+          if (t.key === "Home") {
+            t.preventDefault(), (d = e[0]) == null || d.focus(), (v = e[0]) == null || v.click();
+            return;
+          }
+          if (t.key === "End") {
+            t.preventDefault();
+            const r = e[e.length - 1];
+            r == null || r.focus(), r == null || r.click();
+          }
+        },
+        className: m(
+          "prui-tabs-list inline-flex h-9 items-center gap-1 rounded-[var(--prui-radius)] bg-[var(--prui-raise)] p-1",
+          n
+        ),
+        ...s
+      }
+    );
+  }
 );
-g.displayName = "TabsList";
-const T = r.forwardRef(
-  ({ className: t, value: e, onClick: a, ...i }, o) => {
-    const { value: s, setValue: b, baseId: u } = m(), n = s === e;
-    return /* @__PURE__ */ l(
+T.displayName = "TabsList";
+const w = l.forwardRef(
+  ({ className: n, value: a, onClick: s, ...i }, o) => {
+    const { value: u, setValue: b, baseId: t } = g(), e = u === a;
+    return /* @__PURE__ */ f(
       "button",
       {
         ref: o,
         type: "button",
         role: "tab",
-        id: `${u}-tab-${e}`,
-        "aria-selected": n,
-        "aria-controls": `${u}-panel-${e}`,
-        "data-state": n ? "active" : "inactive",
-        tabIndex: n ? 0 : -1,
-        className: c(
+        id: `${t}-tab-${a}`,
+        "aria-selected": e,
+        "aria-controls": e ? `${t}-panel-${a}` : void 0,
+        "data-state": e ? "active" : "inactive",
+        tabIndex: e ? 0 : -1,
+        className: m(
           "prui-tabs-trigger inline-flex items-center justify-center whitespace-nowrap rounded-[calc(var(--prui-radius)-1px)]",
           "px-3 py-1 text-sm font-medium transition-colors cursor-pointer outline-none",
           "focus-visible:ring-2 focus-visible:ring-[var(--prui-brand)]",
-          n ? "bg-[var(--prui-background)] text-[var(--prui-fg)] shadow" : "text-[var(--prui-dim)] hover:text-[var(--prui-fg)]",
-          t
+          e ? "bg-[var(--prui-background)] text-[var(--prui-fg)] shadow" : "text-[var(--prui-dim)] hover:text-[var(--prui-fg)]",
+          n
         ),
-        onClick: (d) => {
-          a == null || a(d), d.defaultPrevented || b(e);
+        onClick: (c) => {
+          s == null || s(c), c.defaultPrevented || b(a);
         },
         ...i
       }
     );
   }
 );
-T.displayName = "TabsTrigger";
-const y = r.forwardRef(
-  ({ className: t, value: e, ...a }, i) => {
-    const { value: o, baseId: s } = m();
-    return o !== e ? null : /* @__PURE__ */ l(
+w.displayName = "TabsTrigger";
+const h = l.forwardRef(
+  ({ className: n, value: a, ...s }, i) => {
+    const { value: o, baseId: u } = g();
+    return o !== a ? null : /* @__PURE__ */ f(
       "div",
       {
         ref: i,
         role: "tabpanel",
-        id: `${s}-panel-${e}`,
-        "aria-labelledby": `${s}-tab-${e}`,
+        id: `${u}-panel-${a}`,
+        "aria-labelledby": `${u}-tab-${a}`,
         tabIndex: 0,
-        className: c("prui-tabs-content mt-2 outline-none", t),
-        ...a
+        className: m("prui-tabs-content mt-2 outline-none", n),
+        ...s
       }
     );
   }
 );
-y.displayName = "TabsContent";
+h.displayName = "TabsContent";
 const $ = {
   name: "Tabs",
   props: [
@@ -87,8 +116,8 @@ const $ = {
 };
 export {
   x as Tabs,
-  y as TabsContent,
-  g as TabsList,
-  T as TabsTrigger,
+  h as TabsContent,
+  T as TabsList,
+  w as TabsTrigger,
   $ as tabsPropsMeta
 };

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;