@skiddph/prui 0.7.0 → 0.9.0

package/dist/core/select.js

@@ -1,144 +1,233 @@
-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 D, jsx as y, Fragment as W } from "react/jsx-runtime";
+import * as a from "react";
+import { ChevronDown as q, Check as H } from "lucide-react";
+import { cn as A } from "./cn.js";
+import { useOverlayStack as B, useEscapeKey as G, Portal as J } from "./overlay.js";
+import { useAnchoredPosition as Q } from "./anchor.js";
+import { typeaheadIndex as X, endIndex as Y, homeIndex as Z, moveIndex as F } from "./list-nav.js";
+const L = a.createContext(null);
+function E() {
+  const i = a.useContext(L);
+  if (!i) throw new Error("Select parts must be used inside <Select>");
+  return i;
 }
-const F = ({
-  options: r,
-  value: a,
-  defaultValue: t,
-  placeholder: i = "Select...",
-  disabled: e,
-  name: d,
-  id: u,
-  onChange: l,
+const _ = ({
+  options: i,
+  value: u,
+  defaultValue: b,
+  placeholder: d = "Select...",
+  disabled: f,
+  name: l,
+  id: v,
+  onChange: n,
   onOpenChange: p,
-  children: f,
-  ...c
+  children: w,
+  ...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 o;
+  const [m, h] = a.useState(b ?? ""), [x, S] = a.useState(!1), [e, V] = a.useState(null), [O, P] = a.useState({}), T = u !== void 0 ? u : m, I = a.useCallback((r, c) => {
+    P((s) => {
+      if (c === null) {
+        if (!(r in s)) return s;
+        const R = { ...s };
+        return delete R[r], R;
+      }
+      return s[r] === c ? s : { ...s, [r]: c };
+    });
+  }, []), N = (r) => {
+    u === void 0 && h(r), n == null || n(r);
+  }, k = (r) => {
+    S(r), p == null || p(r);
+  }, j = () => e == null ? void 0 : e.focus(), t = O[T] ?? ((o = i == null ? void 0 : i.find((r) => r.value === T)) == null ? void 0 : o.label);
+  return /* @__PURE__ */ D(
+    L.Provider,
     {
-      value: { value: x, open: R, triggerId: V, setValue: O, setOpen: E, registerTrigger: j },
+      value: { value: T, displayValue: t, open: x, triggerEl: e, triggerId: (e == null ? void 0 : e.id) || void 0, setValue: N, setOpen: k, registerTrigger: V, returnFocusToTrigger: j, registerLabel: I },
       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__ */ y("input", { type: "hidden", name: l, value: T }) : null,
+        w ?? /* @__PURE__ */ D(W, { children: [
+          /* @__PURE__ */ y(U, { disabled: f, id: v, ...g, children: /* @__PURE__ */ y($, { placeholder: d }) }),
+          /* @__PURE__ */ y(z, { children: (i ?? []).map((r) => /* @__PURE__ */ y(M, { value: r.value, disabled: r.disabled, children: r.label }, r.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(
+_.displayName = "Select";
+const U = a.forwardRef(
+  ({ className: i, children: u, onClick: b, onKeyDown: d, disabled: f, id: l, ...v }, n) => {
+    const { open: p, setOpen: w, registerTrigger: g } = E(), m = a.useRef(null), h = a.useId(), x = l ?? `prui-select-${h}`;
+    a.useEffect(() => (g(m.current), () => g(null)), [g]);
+    const S = `${x}-listbox`;
+    return /* @__PURE__ */ D(
       "button",
       {
-        ref: u,
-        id: e,
+        ref: (e) => {
+          m.current = e, typeof n == "function" ? n(e) : n && (n.current = e);
+        },
+        id: x,
         type: "button",
         role: "combobox",
-        "aria-expanded": l,
+        "aria-expanded": p,
         "aria-haspopup": "listbox",
-        disabled: i,
-        "data-state": l ? "open" : "closed",
-        className: m(
+        "aria-controls": p ? S : void 0,
+        disabled: f,
+        "data-state": p ? "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
+          i
         ),
-        onClick: (c) => {
-          t == null || t(c), c.defaultPrevented || p(!l);
+        onClick: (e) => {
+          b == null || b(e), e.defaultPrevented || w(!p);
         },
-        ...d,
+        onKeyDown: (e) => {
+          d == null || d(e), !e.defaultPrevented && !p && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), w(!0));
+        },
+        ...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 })
+          u,
+          /* @__PURE__ */ y(q, { className: A("h-4 w-4 shrink-0 text-[var(--prui-dim)] transition-transform", p && "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 $ = a.forwardRef(
+  ({ className: i, placeholder: u, children: b, ...d }, f) => {
+    const { value: l, displayValue: v } = E();
+    return /* @__PURE__ */ y("span", { ref: f, className: A("truncate", i), ...d, children: b ?? v ?? (l || /* @__PURE__ */ y("span", { className: "text-[var(--prui-dim)]", children: u })) });
   }
 );
-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 = a.forwardRef(
+  ({ className: i, children: u, id: b, ...d }, f) => {
+    const { open: l, setOpen: v, triggerEl: n, setValue: p, returnFocusToTrigger: w } = E(), g = a.useRef(null), [m, h] = a.useState(-1), x = a.useRef({ buffer: "", at: 0 }), S = a.useRef(null);
+    S.current = n;
+    const [e, V] = a.useState(null), { setElement: O, isTop: P } = B(l);
+    G(l, P, () => {
+      v(!1), w();
+    });
+    const { ref: T, position: I } = Q({ active: l, anchorRef: S, side: "bottom", align: "start" }), N = a.useCallback(() => {
+      const t = g.current;
+      return t ? Array.from(t.querySelectorAll("[role='option']")) : [];
+    }, []), k = (t) => {
+      var o;
+      h(t), (o = N()[t]) == null || o.focus();
+    };
+    if (a.useEffect(() => {
+      var s;
+      if (!l || !e) return;
+      h(-1);
+      const t = N(), o = t.findIndex((R) => R.getAttribute("aria-selected") === "true"), r = t.findIndex((R) => R.getAttribute("aria-disabled") !== "true"), c = o >= 0 ? o : r;
+      c >= 0 && (h(c), (s = t[c]) == null || s.focus());
+    }, [l, e, N]), !l) return null;
+    const j = (t) => {
+      const o = N(), r = (c) => {
+        var s;
+        return ((s = o[c]) == null ? void 0 : s.getAttribute("aria-disabled")) !== "true";
+      };
+      switch (t.key) {
+        case "ArrowDown":
+          t.preventDefault(), k(F(m, 1, o.length, { enabled: r }));
+          break;
+        case "ArrowUp":
+          t.preventDefault(), k(F(m, -1, o.length, { enabled: r }));
+          break;
+        case "Home":
+          t.preventDefault(), k(Z(o.length, r));
+          break;
+        case "End":
+          t.preventDefault(), k(Y(o.length, r));
+          break;
+        case "Enter":
+        case " ": {
+          t.preventDefault();
+          const c = o[m];
+          if (c && r(m)) {
+            const s = c.dataset.value;
+            s !== void 0 ? (p(s), v(!1), w()) : c.click();
+          }
+          break;
+        }
+        case "Tab":
+          v(!1);
+          break;
+        default:
+          if (t.key.length === 1) {
+            const c = () => o.map((R) => R.textContent ?? ""), { index: s } = X(c, x.current, t.key, m);
+            s >= 0 && s !== m && (t.preventDefault(), k(s));
+          }
+      }
+    };
+    return /* @__PURE__ */ y(J, { children: /* @__PURE__ */ y(
       "div",
       {
-        ref: i,
+        ref: (t) => {
+          g.current = t, V(t), T(t), O(t), typeof f == "function" ? f(t) : f && (f.current = t);
+        },
+        id: b ?? (n != null && n.id ? `${n.id}-listbox` : void 0),
         role: "listbox",
-        "aria-labelledby": u,
+        "aria-labelledby": (n == null ? void 0 : n.id) || void 0,
         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: j,
+        className: A(
+          "prui-select-content fixed z-[var(--prui-z-overlay)] 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",
+          i
         ),
-        ...t,
-        children: a
+        style: {
+          top: (I == null ? void 0 : I.top) ?? -9999,
+          left: (I == null ? void 0 : I.left) ?? -9999,
+          minWidth: n ? Math.max(n.offsetWidth, 160) : 160
+        },
+        ...d,
+        children: u
       }
-    ) : 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 M = a.forwardRef(
+  ({ className: i, value: u, disabled: b, children: d, onClick: f, tabIndex: l = -1, ...v }, n) => {
+    const { value: p, setValue: w, setOpen: g, returnFocusToTrigger: m, registerLabel: h } = E(), x = p === u, S = typeof d == "string" || typeof d == "number" ? String(d) : void 0;
+    return a.useEffect(() => {
+      S !== void 0 && h(u, S);
+    }, [u, S, h]), /* @__PURE__ */ D(
       "div",
       {
-        ref: u,
+        ref: n,
         role: "option",
-        "aria-selected": c,
-        "aria-disabled": t,
-        "data-selected": c || void 0,
-        className: m(
+        "aria-selected": x,
+        "aria-disabled": b,
+        "data-selected": x || void 0,
+        "data-value": u,
+        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",
+          b && "opacity-50 pointer-events-none",
+          i
         ),
-        onClick: (v) => {
-          e == null || e(v), !(v.defaultPrevented || t) && (p(a), f(!1));
+        onClick: (e) => {
+          f == null || f(e), !(e.defaultPrevented || b) && (w(u), g(!1), m());
         },
-        ...d,
+        ...v,
         children: [
-          i,
-          c ? /* @__PURE__ */ s(D, { className: "absolute right-2 h-4 w-4 text-[var(--prui-brand)]", "aria-hidden": !0 }) : null
+          d,
+          x ? /* @__PURE__ */ y(H, { className: "absolute right-2 h-4 w-4 text-[var(--prui-brand)]", "aria-hidden": !0 }) : null
         ]
       }
     );
   }
 );
-N.displayName = "SelectItem";
-const A = {
+M.displayName = "SelectItem";
+const ne = {
   name: "Select",
   props: [
     { name: "options", type: "SelectOption[]", default: "[]", control: "object" },
@@ -150,10 +239,10 @@ const A = {
   ]
 };
 export {
-  F as Select,
-  w as SelectContent,
-  N as SelectItem,
-  h as SelectTrigger,
-  y as SelectValue,
-  A as selectPropsMeta
+  _ as Select,
+  z as SelectContent,
+  M as SelectItem,
+  U as SelectTrigger,
+  $ as SelectValue,
+  ne 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
 };