@skiddph/prui 0.8.0 → 0.9.1

package/dist/core/select.js

@@ -1,152 +1,155 @@
-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 { 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 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;
+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 Y = ({
-  options: n,
-  value: s,
-  defaultValue: p,
-  placeholder: i = "Select...",
-  disabled: u,
+const _ = ({
+  options: i,
+  value: u,
+  defaultValue: b,
+  placeholder: d = "Select...",
+  disabled: f,
   name: l,
   id: v,
-  onChange: c,
-  onOpenChange: d,
-  children: S,
+  onChange: n,
+  onOpenChange: p,
+  children: w,
   ...g
 }) => {
-  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;
+  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 R[a] === O ? R : { ...R, [a]: O };
+      return s[r] === c ? s : { ...s, [r]: c };
     });
-  }, []), 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,
+  }, []), 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: e, displayValue: T, open: x, triggerId: (t == null ? void 0 : t.id) || void 0, setValue: I, setOpen: m, registerTrigger: N, returnFocusToTrigger: f, registerLabel: o },
+      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: [
-        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)) })
+        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)) })
         ] })
       ]
     }
   );
 };
-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(
+_.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: (t) => {
-          b.current = t, typeof c == "function" ? c(t) : c && (c.current = t);
+        ref: (e) => {
+          m.current = e, typeof n == "function" ? n(e) : n && (n.current = e);
         },
         id: x,
         type: "button",
         role: "combobox",
-        "aria-expanded": d,
+        "aria-expanded": p,
         "aria-haspopup": "listbox",
-        "aria-controls": d ? w : void 0,
-        disabled: u,
-        "data-state": d ? "open" : "closed",
+        "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",
-          n
+          i
         ),
-        onClick: (t) => {
-          p == null || p(t), t.defaultPrevented || S(!d);
+        onClick: (e) => {
+          b == null || b(e), e.defaultPrevented || w(!p);
         },
-        onKeyDown: (t) => {
-          i == null || i(t), !t.defaultPrevented && !d && (t.key === "ArrowDown" || t.key === "ArrowUp" || t.key === "Enter" || t.key === " ") && (t.preventDefault(), S(!0));
+        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: [
-          s,
-          /* @__PURE__ */ h(M, { className: A("h-4 w-4 shrink-0 text-[var(--prui-dim)] transition-transform", d && "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 })
         ]
       }
     );
   }
 );
 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 })) });
+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 })) });
   }
 );
 $.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 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 N = r.useCallback(() => {
-      const e = g.current;
-      return e ? Array.from(e.querySelectorAll("[role='option']")) : [];
-    }, []), k = (e) => {
+    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;
-      y(e), (o = N()[e]) == null || o.focus();
+      h(t), (o = N()[t]) == 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";
+    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 (e.key) {
+      switch (t.key) {
         case "ArrowDown":
-          e.preventDefault(), k(L(b, 1, o.length, { enabled: I }));
+          t.preventDefault(), k(F(m, 1, o.length, { enabled: r }));
           break;
         case "ArrowUp":
-          e.preventDefault(), k(L(b, -1, o.length, { enabled: I }));
+          t.preventDefault(), k(F(m, -1, o.length, { enabled: r }));
           break;
         case "Home":
-          e.preventDefault(), k(X(o.length, I));
+          t.preventDefault(), k(Z(o.length, r));
           break;
         case "End":
-          e.preventDefault(), k(W(o.length, I));
+          t.preventDefault(), k(Y(o.length, r));
           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();
+          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;
         }
@@ -154,72 +157,77 @@ const z = r.forwardRef(
           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));
+          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__ */ h(
+    return /* @__PURE__ */ y(J, { children: /* @__PURE__ */ y(
       "div",
       {
-        ref: (e) => {
-          g.current = e, w((e == null ? void 0 : e.parentElement) ?? null), typeof u == "function" ? u(e) : u && (u.current = e);
+        ref: (t) => {
+          g.current = t, V(t), T(t), O(t), typeof f == "function" ? f(t) : f && (f.current = t);
         },
-        id: p ?? (c ? `${c}-listbox` : void 0),
+        id: b ?? (n != null && n.id ? `${n.id}-listbox` : void 0),
         role: "listbox",
-        "aria-labelledby": c,
+        "aria-labelledby": (n == null ? void 0 : n.id) || void 0,
         tabIndex: -1,
         "data-state": l ? "open" : "closed",
-        onKeyDown: V,
+        onKeyDown: j,
         className: A(
-          "prui-select-content absolute z-[var(--prui-z-overlay)] mt-1 min-w-40 max-h-60 overflow-auto p-1",
+          "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",
-          n
+          i
         ),
-        ...i,
-        children: s
+        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
       }
-    );
+    ) });
   }
 );
 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(
+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: c,
+        ref: n,
         role: "option",
         "aria-selected": x,
-        "aria-disabled": p,
+        "aria-disabled": b,
         "data-selected": x || void 0,
-        "data-value": s,
+        "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)] focus-visible:bg-[var(--prui-raise)] outline-none",
           x && "font-medium",
-          p && "opacity-50 pointer-events-none",
-          n
+          b && "opacity-50 pointer-events-none",
+          i
         ),
-        onClick: (t) => {
-          u == null || u(t), !(t.defaultPrevented || p) && (S(s), g(!1), b());
+        onClick: (e) => {
+          f == null || f(e), !(e.defaultPrevented || b) && (w(u), g(!1), m());
         },
         ...v,
         children: [
-          i,
-          x ? /* @__PURE__ */ h(B, { 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
         ]
       }
     );
   }
 );
-q.displayName = "SelectItem";
-const te = {
+M.displayName = "SelectItem";
+const ne = {
   name: "Select",
   props: [
     { name: "options", type: "SelectOption[]", default: "[]", control: "object" },
@@ -231,10 +239,10 @@ const te = {
   ]
 };
 export {
-  Y as Select,
+  _ as Select,
   z as SelectContent,
-  q as SelectItem,
+  M as SelectItem,
   U as SelectTrigger,
   $ as SelectValue,
-  te as selectPropsMeta
+  ne as selectPropsMeta
 };

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 {};