@skiddph/prui 0.8.0 → 0.9.0

package/dist/core/combobox.js

@@ -1,158 +1,168 @@
-import { jsxs as G, Fragment as J, jsx as i } from "react/jsx-runtime";
-import * as o from "react";
-import { ChevronDown as X } from "lucide-react";
-import { cn as N } from "./cn.js";
-import { useOverlayStack as Y, useEscapeKey as Z, Portal as _ } from "./overlay.js";
-import { useAnchoredPosition as K } from "./anchor.js";
-import { endIndex as ee, homeIndex as te, moveIndex as q } from "./list-nav.js";
-const re = o.forwardRef(function({
-  options: u,
-  value: x,
-  defaultValue: C,
-  onChange: h,
+import { jsxs as $, Fragment as Z, jsx as c } from "react/jsx-runtime";
+import * as a from "react";
+import { ChevronDown as _ } from "lucide-react";
+import { cn as x } from "./cn.js";
+import { useOverlayStack as K, useEscapeKey as ee, Portal as te } from "./overlay.js";
+import { useAnchoredPosition as re } from "./anchor.js";
+import { endIndex as ae, homeIndex as ne, moveIndex as j } from "./list-nav.js";
+const oe = a.forwardRef(function({
+  options: d,
+  value: h,
+  defaultValue: P,
+  onChange: g,
   onOpenChange: y,
-  placeholder: T = "Type to search...",
-  emptyText: R,
-  noMatchText: $ = "No matches.",
-  defaultOpen: L = !1,
-  filter: g,
-  disabled: I,
-  id: U,
-  className: z,
-  onKeyDown: w,
-  ...D
-}, b) {
-  var M, j;
-  const [F, P] = o.useState(C ?? ""), [a, W] = o.useState(L), [p, k] = o.useState(null), [n, s] = o.useState(0), c = o.useRef(null), E = o.useRef(null), v = o.useId(), A = x !== void 0 ? x : F, H = (M = u.find((e) => e.value === A)) == null ? void 0 : M.label, d = (e) => {
-    var t, l;
-    if (W(e), y == null || y(e), !e) {
-      k(null);
-      const m = document.activeElement;
-      m && ((t = E.current) != null && t.contains(m)) && ((l = c.current) == null || l.focus());
+  placeholder: U = "Type to search...",
+  emptyText: I,
+  noMatchText: z = "No matches.",
+  defaultOpen: F = !1,
+  filter: w,
+  disabled: D,
+  id: W,
+  className: A,
+  onKeyDown: k,
+  ...S
+}, v) {
+  var q, C;
+  const [H, O] = a.useState(P ?? ""), [n, Q] = a.useState(F), [m, R] = a.useState(null), [l, s] = a.useState(0), p = a.useRef(null), E = a.useRef(null), N = a.useRef(null), b = a.useId(), L = h !== void 0 ? h : H, V = (q = d.find((e) => e.value === L)) == null ? void 0 : q.label, u = (e) => {
+    var t, o;
+    if (Q(e), y == null || y(e), !e) {
+      R(null);
+      const i = document.activeElement;
+      i && ((t = E.current) != null && t.contains(i)) && ((o = p.current) == null || o.focus());
     }
-  }, { setElement: O, isTop: Q } = Y(a);
-  Z(a, Q, () => {
+  }, { setElement: B, isTop: G } = K(n);
+  ee(n, G, () => {
     var e;
-    d(!1), (e = c.current) == null || e.focus();
+    u(!1), (e = p.current) == null || e.focus();
+  }), a.useEffect(() => {
+    if (!n) return;
+    const e = (t) => {
+      var i, T;
+      const o = t.target;
+      (i = N.current) != null && i.contains(o) || (T = E.current) != null && T.contains(o) || u(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   });
-  const r = o.useMemo(() => {
-    if (p === null) return u;
-    const e = p.toLowerCase();
-    return e ? u.filter((t) => g ? g(t, e) : t.label.toLowerCase().includes(e)) : u;
-  }, [u, p, g]);
-  o.useEffect(() => {
+  const r = a.useMemo(() => {
+    if (m === null) return d;
+    const e = m.toLowerCase();
+    return e ? d.filter((t) => w ? w(t, e) : t.label.toLowerCase().includes(e)) : d;
+  }, [d, m, w]);
+  a.useEffect(() => {
     s((e) => e < r.length ? e : Math.max(0, r.length - 1));
   }, [r.length]);
-  const S = (e) => {
+  const M = (e) => {
     var t;
-    e.disabled || (x === void 0 && P(e.value), h == null || h(e.value), k(null), d(!1), (t = c.current) == null || t.focus());
-  }, { ref: V, position: f } = K({ active: a, anchorRef: c, side: "bottom", align: "start" }), B = (e) => {
-    if (w == null || w(e), e.defaultPrevented) return;
-    if (!a && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-      e.preventDefault(), d(!0);
+    e.disabled || (h === void 0 && O(e.value), g == null || g(e.value), R(null), u(!1), (t = p.current) == null || t.focus());
+  }, J = N, { ref: X, position: f } = re({ active: n, anchorRef: J, side: "bottom", align: "start" }), Y = (e) => {
+    if (k == null || k(e), e.defaultPrevented) return;
+    if (!n && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      e.preventDefault(), u(!0);
       return;
     }
-    if (!a) return;
-    const t = (l) => {
-      var m;
-      return !((m = r[l]) != null && m.disabled);
+    if (!n) return;
+    const t = (o) => {
+      var i;
+      return !((i = r[o]) != null && i.disabled);
     };
     switch (e.key) {
       case "ArrowDown":
-        e.preventDefault(), s(q(n, 1, r.length, { enabled: t }));
+        e.preventDefault(), s(j(l, 1, r.length, { enabled: t }));
         break;
       case "ArrowUp":
-        e.preventDefault(), s(q(n, -1, r.length, { enabled: t }));
+        e.preventDefault(), s(j(l, -1, r.length, { enabled: t }));
         break;
       case "Home":
-        r.length && (e.preventDefault(), s(te(r.length, t)));
+        r.length && (e.preventDefault(), s(ne(r.length, t)));
         break;
       case "End":
-        r.length && (e.preventDefault(), s(ee(r.length, t)));
+        r.length && (e.preventDefault(), s(ae(r.length, t)));
         break;
       case "Enter":
-        e.preventDefault(), r[n] && S(r[n]);
+        e.preventDefault(), r[l] && M(r[l]);
         break;
       case "Tab":
-        d(!1);
+        u(!1);
         break;
     }
   };
-  return /* @__PURE__ */ G(J, { children: [
-    /* @__PURE__ */ i(
-      "input",
-      {
-        ref: (e) => {
-          c.current = e, typeof b == "function" ? b(e) : b && (b.current = e);
-        },
-        id: U,
-        type: "text",
-        role: "combobox",
-        "aria-expanded": a,
-        "aria-haspopup": "listbox",
-        "aria-controls": a ? v : void 0,
-        "aria-activedescendant": a && r[n] ? `${v}-option-${n}` : void 0,
-        "aria-autocomplete": "list",
-        autoComplete: "off",
-        disabled: I,
-        placeholder: T,
-        className: N(
-          "prui-combobox-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)] 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 cursor-text",
-          z
-        ),
-        value: p !== null ? p : H ?? "",
-        onChange: (e) => {
-          k(e.target.value), d(!0), s(0);
-        },
-        onFocus: () => {
-          !a && !I && d(!0);
-        },
-        onKeyDown: B,
-        ...D
-      }
-    ),
-    /* @__PURE__ */ i("span", { className: "pointer-events-none relative", children: /* @__PURE__ */ i(X, { className: "pointer-events-none absolute -left-7 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--prui-dim)]", "aria-hidden": !0 }) }),
-    a ? /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ $(Z, { children: [
+    /* @__PURE__ */ $("div", { ref: N, className: x("prui-combobox relative inline-flex w-full items-center", A), children: [
+      /* @__PURE__ */ c(
+        "input",
+        {
+          ref: (e) => {
+            p.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
+          },
+          id: W,
+          type: "text",
+          role: "combobox",
+          "aria-expanded": n,
+          "aria-haspopup": "listbox",
+          "aria-controls": n ? b : void 0,
+          "aria-activedescendant": n && r[l] ? `${b}-option-${l}` : void 0,
+          "aria-autocomplete": "list",
+          autoComplete: "off",
+          disabled: D,
+          placeholder: U,
+          className: x(
+            "prui-combobox-trigger h-9 w-full pr-8",
+            "bg-[var(--prui-background)] rounded-[var(--prui-radius)] px-3 text-sm 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 cursor-text",
+            A
+          ),
+          value: m !== null ? m : V ?? "",
+          onChange: (e) => {
+            R(e.target.value), u(!0), s(0);
+          },
+          onFocus: () => {
+            !n && !D && u(!0);
+          },
+          onKeyDown: Y,
+          ...S
+        }
+      ),
+      /* @__PURE__ */ c(_, { className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--prui-dim)]", "aria-hidden": !0 })
+    ] }),
+    n ? /* @__PURE__ */ c(te, { children: /* @__PURE__ */ c(
       "div",
       {
         ref: (e) => {
-          E.current = e, V(e), O(e);
+          E.current = e, X(e), B(e);
         },
-        id: v,
+        id: b,
         role: "listbox",
-        "aria-label": D["aria-label"] ?? "Options",
+        "aria-label": S["aria-label"] ?? "Options",
         tabIndex: -1,
         "data-state": "open",
-        className: N(
+        className: x(
           "prui-combobox-content fixed z-[var(--prui-z-overlay)] min-w-40 max-h-60 overflow-auto p-1",
           "border border-[var(--prui-line)] rounded-[var(--prui-radius)] bg-[var(--prui-surface)] shadow-[var(--prui-shadow-md)]"
         ),
         style: {
           top: (f == null ? void 0 : f.top) ?? -9999,
           left: (f == null ? void 0 : f.left) ?? -9999,
-          minWidth: ((j = c.current) == null ? void 0 : j.offsetWidth) ?? 200
+          minWidth: ((C = p.current) == null ? void 0 : C.offsetWidth) ?? 200
         },
-        children: u.length === 0 && R ? /* @__PURE__ */ i("div", { className: "px-3 py-2 text-sm text-[var(--prui-dim)]", children: R }) : r.length === 0 ? /* @__PURE__ */ i("div", { className: "px-3 py-2 text-sm text-[var(--prui-dim)]", role: "option", "aria-selected": "false", "aria-disabled": "true", children: $ }) : r.map((e, t) => {
-          const l = A === e.value;
-          return /* @__PURE__ */ i(
+        children: d.length === 0 && I ? /* @__PURE__ */ c("div", { className: "px-3 py-2 text-sm text-[var(--prui-dim)]", children: I }) : r.length === 0 ? /* @__PURE__ */ c("div", { className: "px-3 py-2 text-sm text-[var(--prui-dim)]", role: "option", "aria-selected": "false", "aria-disabled": "true", children: z }) : r.map((e, t) => {
+          const o = L === e.value;
+          return /* @__PURE__ */ c(
             "div",
             {
-              id: `${v}-option-${t}`,
+              id: `${b}-option-${t}`,
               role: "option",
-              "aria-selected": l,
+              "aria-selected": o,
               "aria-disabled": e.disabled,
-              "data-active": t === n || void 0,
-              "data-selected": l || void 0,
+              "data-active": t === l || void 0,
+              "data-selected": o || void 0,
               tabIndex: -1,
               onMouseEnter: () => s(t),
-              onClick: () => S(e),
-              className: N(
+              onClick: () => M(e),
+              className: x(
                 "flex cursor-pointer items-center rounded-[calc(var(--prui-radius)-1px)] px-3 py-1.5 text-sm text-[var(--prui-fg)]",
-                t === n && "bg-[var(--prui-raise)]",
-                l && "font-medium",
+                t === l && "bg-[var(--prui-raise)]",
+                o && "font-medium",
                 e.disabled && "opacity-50 pointer-events-none"
               ),
               children: e.label
@@ -164,8 +174,8 @@ const re = o.forwardRef(function({
     ) }) : null
   ] });
 });
-re.displayName = "Combobox";
-const ce = {
+oe.displayName = "Combobox";
+const me = {
   name: "Combobox",
   props: [
     { name: "options", type: "ComboboxOption[]", default: null, control: "object" },
@@ -178,6 +188,6 @@ const ce = {
   ]
 };
 export {
-  re as Combobox,
-  ce as comboboxPropsMeta
+  oe as Combobox,
+  me as comboboxPropsMeta
 };

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

@@ -2,11 +2,14 @@ import { PropsMeta } from './props-meta';
 import * as React from "react";
 /**
  * DatePicker / DateRangePicker: a text trigger opening a Calendar popover.
- * Values stay plain "YYYY-MM-DD" strings (native input-compatible, no date
- * library). The trigger is keyboard-operable (Enter/Space/ArrowDown opens,
- * Escape topmost closes and refocuses); typing a date in the input is also
- * accepted. The range picker anchors on the start date and shows a
- * start–end chip row.
+ * Values stay plain strings — "YYYY-MM-DD" by default, or
+ * "YYYY-MM-DD HH:mm(:ss)" with timepicker on — so they remain
+ * native-input compatible with no date library. The trigger is
+ * keyboard-operable (Enter/ArrowDown opens, Escape topmost closes and
+ * refocuses, typing a full value commits); clicking outside dismisses.
+ * The range picker anchors on the start date, supports a maxRange cap
+ * ("90d", "12w", "3m", "1y", or a plain number of days), and restarts
+ * when the picked end precedes the start.
  */
 export interface DatePickerProps {
     value?: string;
@@ -19,22 +22,40 @@ export interface DatePickerProps {
     className?: string;
     /** Accessible label for the trigger input. */
     ariaLabel?: string;
+    /** Include a time panel; values become "YYYY-MM-DD HH:mm(:ss)". Default false. */
+    timepicker?: boolean;
+    /** Seconds column for the time panel (requires timepicker). */
+    seconds?: boolean;
+    /** Minute step for the time panel (requires timepicker). */
+    minuteStep?: number;
 }
 export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
 export interface DateRange {
     from?: string;
     to?: string;
 }
+/**
+ * maxRange caps the span between from and to. Accept a plain number of
+ * days, or a string with a unit: "90d" days, "12w" weeks, "3m" months
+ * (calendar-aware), "1y" years.
+ */
+export type MaxRange = number | `${number}d` | `${number}w` | `${number}m` | `${number}y` | (string & {});
 export interface DateRangePickerProps {
     value?: DateRange;
     defaultValue?: DateRange;
     onChange?: (range: DateRange) => void;
     min?: string;
     max?: string;
+    /** Cap the selectable span, e.g. 90, "90d", "12w", "3m", "1y". */
+    maxRange?: MaxRange;
     placeholder?: string;
     disabled?: boolean;
     className?: string;
     ariaLabel?: string;
+    /** Include time panels; values become "YYYY-MM-DD HH:mm(:ss)". Default false. */
+    timepicker?: boolean;
+    seconds?: boolean;
+    minuteStep?: number;
 }
 export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLInputElement>>;
 export declare const datePickerPropsMeta: PropsMeta;