@skiddph/prui 0.7.0 → 0.8.0

package/dist/core/calendar.js

@@ -0,0 +1,180 @@
+import { jsxs as F, jsx as s } from "react/jsx-runtime";
+import * as f from "react";
+import { ChevronLeft as Z, ChevronRight as k } from "lucide-react";
+import { cn as W } from "./cn.js";
+import { usePruiI18n as ee } from "../i18n.js";
+const K = 864e5, te = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], re = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+function j(a) {
+  const o = a.getFullYear(), i = String(a.getMonth() + 1).padStart(2, "0"), n = String(a.getDate()).padStart(2, "0");
+  return `${o}-${i}-${n}`;
+}
+function u(a) {
+  const [o, i, n] = a.split("-").map(Number);
+  return new Date(o, (i ?? 1) - 1, n ?? 1);
+}
+function ne(a, o) {
+  const [i, n] = a.split("-").map(Number), g = new Date(i, (n ?? 1) - 1, 1), h = (g.getDay() - o + 7) % 7;
+  return new Date(g.getTime() - h * K);
+}
+function v(a) {
+  return `${a.getFullYear()}-${String(a.getMonth() + 1).padStart(2, "0")}`;
+}
+function ae(a, o, i) {
+  let n = a;
+  return o && n < u(o) && (n = u(o)), i && n > u(i) && (n = u(i)), n;
+}
+const oe = f.forwardRef(function({ value: o, defaultValue: i, onSelect: n, month: g, onMonthChange: h, min: x, max: Y, disabled: N, showToday: _ = !0, weekStartsOn: b = 0, className: L, onKeyDown: M, ...q }, G) {
+  const { t: H } = ee(), [V, z] = f.useState(i ?? ""), [w, R] = f.useState(null), $ = o !== void 0, D = $ ? o : V, S = j(/* @__PURE__ */ new Date()), T = f.useRef(null);
+  T.current === null && (T.current = g ?? v(D ? u(D) : /* @__PURE__ */ new Date()));
+  const [B, J] = f.useState(T.current), l = g ?? B, C = (e) => {
+    J(e), h == null || h(e);
+  }, A = (e) => {
+    $ || z(e), n == null || n(e);
+  }, O = f.useMemo(() => ne(l, b), [l, b]), Q = b === 1 ? re : te, P = new Intl.DateTimeFormat(void 0, { month: "long", year: "numeric" }).format(
+    new Date(Number(l.slice(0, 4)), Number(l.slice(5, 7)) - 1, 1)
+  ), y = (e) => {
+    const t = new Date(Number(l.slice(0, 4)), Number(l.slice(5, 7)) - 1 + e, 1);
+    C(v(t));
+  }, I = (e) => x && e < x || Y && e > Y ? !0 : (N == null ? void 0 : N(e)) ?? !1, p = (e, t) => {
+    const r = ae(new Date(u(e).getTime() + t * K), x, Y), c = j(r);
+    C(v(r)), R(c);
+  };
+  f.useEffect(() => {
+    if (!w) return;
+    const e = document.querySelector(`[data-prui-calendar-day="${w}"]`);
+    e && (e.focus(), R(null));
+  }, [w, l]);
+  const X = (e) => {
+    var c, d;
+    if (M == null || M(e), e.defaultPrevented) return;
+    const t = (d = (c = document.activeElement) == null ? void 0 : c.dataset) == null ? void 0 : d.pruiCalendarDay;
+    if (!t) return;
+    const r = u(t);
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault(), p(t, -1);
+        break;
+      case "ArrowRight":
+        e.preventDefault(), p(t, 1);
+        break;
+      case "ArrowUp":
+        e.preventDefault(), p(t, -7);
+        break;
+      case "ArrowDown":
+        e.preventDefault(), p(t, 7);
+        break;
+      case "Home": {
+        e.preventDefault();
+        const m = (r.getDay() - b + 7) % 7;
+        p(t, -m);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        const m = (b + 6 - r.getDay() + 7) % 7;
+        p(t, m);
+        break;
+      }
+      case "PageUp":
+        e.preventDefault(), y(-1);
+        break;
+      case "PageDown":
+        e.preventDefault(), y(1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault(), I(t) || A(t);
+        break;
+    }
+  }, E = [];
+  for (let e = 0; e < 42; e++) {
+    const t = j(new Date(O.getTime() + e * K));
+    E.push(v(u(t)) === l ? t : null);
+  }
+  return /* @__PURE__ */ F("div", { ref: G, className: W("prui-calendar inline-flex flex-col gap-2 rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-3", L), onKeyDown: X, ...q, children: [
+    /* @__PURE__ */ F("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Previous month",
+          onClick: () => y(-1),
+          className: "inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-[var(--prui-radius-1)] text-[var(--prui-dim)] transition-colors hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)]",
+          children: /* @__PURE__ */ s(Z, { className: "h-4 w-4", "aria-hidden": !0 })
+        }
+      ),
+      /* @__PURE__ */ s("span", { "aria-live": "polite", className: "text-sm font-medium text-[var(--prui-fg)]", children: P }),
+      /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Next month",
+          onClick: () => y(1),
+          className: "inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-[var(--prui-radius-1)] text-[var(--prui-dim)] transition-colors hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)]",
+          children: /* @__PURE__ */ s(k, { className: "h-4 w-4", "aria-hidden": !0 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ F("div", { role: "grid", "aria-label": P, className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ s("div", { role: "row", className: "grid grid-cols-7 text-center text-xs font-medium text-[var(--prui-dim)]", children: Q.map((e) => /* @__PURE__ */ s("span", { role: "columnheader", className: "px-1 py-0.5", children: e }, e)) }),
+      Array.from({ length: 6 }).map((e, t) => /* @__PURE__ */ s("div", { role: "row", className: "grid grid-cols-7 gap-0.5", children: E.slice(t * 7, t * 7 + 7).map((r, c) => {
+        if (r === null) return /* @__PURE__ */ s("span", { role: "gridcell" }, c);
+        const d = r === D, m = r === S, U = I(r);
+        return /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            role: "gridcell",
+            "aria-selected": d,
+            "aria-disabled": U || void 0,
+            "aria-current": m ? "date" : void 0,
+            "data-prui-calendar-day": r,
+            tabIndex: d || !D && r === S || !D && t === 0 && c === 0 && E[0] === r ? 0 : -1,
+            onClick: () => A(r),
+            className: W(
+              "flex h-8 w-8 cursor-pointer items-center justify-center rounded-[var(--prui-radius-1)] text-sm outline-none",
+              "focus-visible:ring-2 focus-visible:ring-[var(--prui-brand)]",
+              d ? "bg-[var(--prui-brand)] text-[var(--prui-brand-fg,#fff)] font-medium" : "text-[var(--prui-fg)] hover:bg-[var(--prui-raise)]",
+              m && !d && "border border-[var(--prui-brand)]/50",
+              U && "opacity-40 pointer-events-none"
+            ),
+            children: Number(r.slice(8, 10))
+          },
+          r
+        );
+      }) }, t))
+    ] }),
+    _ ? /* @__PURE__ */ s(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          C(v(/* @__PURE__ */ new Date())), A(S);
+        },
+        className: "cursor-pointer self-center rounded-[var(--prui-radius-1)] px-2 py-1 text-xs text-[var(--prui-brand)] transition-colors hover:bg-[var(--prui-brand)]/10",
+        children: H.today
+      }
+    ) : null
+  ] });
+});
+oe.displayName = "Calendar";
+const ce = {
+  name: "Calendar",
+  props: [
+    { name: "value", type: "string 'YYYY-MM-DD'", default: "undefined", control: "date" },
+    { name: "defaultValue", type: "string 'YYYY-MM-DD'", default: "undefined", control: "date" },
+    { name: "onSelect", type: "(date: string) => void", default: null, control: "none" },
+    { name: "month", type: "string 'YYYY-MM'", default: "selection or today", control: "text" },
+    { name: "onMonthChange", type: "(month: string) => void", default: null, control: "none" },
+    { name: "min", type: "string 'YYYY-MM-DD'", default: "undefined", control: "date" },
+    { name: "max", type: "string 'YYYY-MM-DD'", default: "undefined", control: "date" },
+    { name: "weekStartsOn", type: "0 | 1", default: "0", control: "select", options: ["0", "1"] },
+    { name: "showToday", type: "boolean", default: "true", control: "boolean" }
+  ]
+};
+export {
+  oe as Calendar,
+  ce as calendarPropsMeta,
+  u as fromDateKey,
+  j as toDateKey
+};

package/dist/core/card.d.ts

@@ -1,7 +1,11 @@
 import { SurfaceProps } from './surface';
 import { PropsMeta } from './props-meta';
 import * as React from "react";
-export type BadgeVariant = "default" | "brand" | "ok" | "warn" | "danger" | "outline";
+/**
+ * Badge variants. Standard vocabulary: neutral / brand / success / warning /
+ * danger / outline; the original ok/warn/default names are aliases.
+ */
+export type BadgeVariant = "default" | "neutral" | "brand" | "info" | "ok" | "success" | "warn" | "warning" | "danger" | "outline";
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, SurfaceProps {
     variant?: BadgeVariant;
 }

package/dist/core/card.js

@@ -1,18 +1,22 @@
 import { jsx as t } from "react/jsx-runtime";
 import * as n from "react";
 import { resolveSurface as g, withSurface as x } from "./surface.js";
-import { cn as d } from "./cn.js";
+import { cn as s } from "./cn.js";
 const w = {
   default: "bg-[var(--prui-raise)] text-[var(--prui-fg)] border-transparent",
+  neutral: "bg-[var(--prui-raise)] text-[var(--prui-fg)] border-transparent",
   brand: "bg-[var(--prui-brand)]/15 text-[var(--prui-brand)] border-transparent",
+  info: "bg-[var(--prui-brand)]/15 text-[var(--prui-brand)] border-transparent",
   ok: "bg-[var(--prui-ok)]/15 text-[var(--prui-ok)] border-transparent",
+  success: "bg-[var(--prui-ok)]/15 text-[var(--prui-ok)] border-transparent",
   warn: "bg-[var(--prui-warn)]/15 text-[var(--prui-warn)] border-transparent",
+  warning: "bg-[var(--prui-warn)]/15 text-[var(--prui-warn)] border-transparent",
   danger: "bg-[var(--prui-danger)]/15 text-[var(--prui-danger)] border-transparent",
   outline: "bg-transparent text-[var(--prui-fg)] border-[var(--prui-line)]"
 }, y = n.forwardRef(
-  ({ className: a, style: e, variant: r = "default", bg: o, fg: i, radius: l, texture: p, textureColor: u, elevation: c, ...m }, f) => {
-    const v = g({ bg: o, fg: i, radius: l, texture: p, textureColor: u, elevation: c }), s = x(
-      d(
+  ({ className: a, style: e, variant: r = "default", bg: i, fg: o, radius: p, texture: l, textureColor: u, elevation: c, ...f }, m) => {
+    const v = g({ bg: i, fg: o, radius: p, texture: l, textureColor: u, elevation: c }), d = x(
+      s(
         "prui-badge inline-flex items-center gap-1 rounded-[var(--prui-s-radius,var(--prui-radius-full))] border px-2 py-0.5",
         "text-xs font-medium whitespace-nowrap",
         w[r],
@@ -24,11 +28,11 @@ const w = {
     return /* @__PURE__ */ t(
       "span",
       {
-        ref: f,
+        ref: m,
         "data-variant": r,
-        style: s.style,
-        className: s.className,
-        ...m
+        style: d.style,
+        className: d.className,
+        ...f
       }
     );
   }
@@ -37,7 +41,7 @@ y.displayName = "Badge";
 const z = {
   name: "Badge",
   props: [
-    { name: "variant", type: "'default' | 'brand' | 'ok' | 'warn' | 'danger' | 'outline'", default: "'default'", control: "select", options: ["default", "brand", "ok", "warn", "danger", "outline"] },
+    { name: "variant", type: "'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'outline' | 'info' | 'ok' | 'warn' | 'default'", default: "'default' (neutral)", control: "select", options: ["neutral", "brand", "success", "warning", "danger", "outline", "info", "ok", "warn", "default"] },
     { name: "children", type: "ReactNode", default: null, control: "text" }
   ]
 }, N = {
@@ -46,38 +50,38 @@ const z = {
   ghost: "border border-transparent bg-transparent",
   elevated: "border border-[var(--prui-line)] prui-elev-md"
 }, C = n.forwardRef(
-  ({ className: a, style: e, variant: r = "default", unstyled: o, bg: i, fg: l, radius: p, texture: u, textureColor: c, elevation: m, ...f }, v) => {
-    const s = g({ bg: i, fg: l, radius: p, texture: u, textureColor: c, elevation: m }), b = x(
-      d(
+  ({ className: a, style: e, variant: r = "default", unstyled: i, bg: o, fg: p, radius: l, texture: u, textureColor: c, elevation: f, ...m }, v) => {
+    const d = g({ bg: o, fg: p, radius: l, texture: u, textureColor: c, elevation: f }), b = x(
+      s(
         "prui-card rounded-[var(--prui-s-radius,var(--prui-radius))]",
-        o ? [] : [N[r]],
+        i ? [] : [N[r]],
         a
       ),
       e,
-      s
+      d
     );
-    return /* @__PURE__ */ t("div", { ref: v, className: b.className, style: b.style, ...f });
+    return /* @__PURE__ */ t("div", { ref: v, className: b.className, style: b.style, ...m });
   }
 );
 C.displayName = "Card";
 const h = n.forwardRef(
-  ({ className: a, ...e }, r) => /* @__PURE__ */ t("div", { ref: r, className: d("prui-card-header flex flex-col gap-1 p-4", a), ...e })
+  ({ className: a, ...e }, r) => /* @__PURE__ */ t("div", { ref: r, className: s("prui-card-header flex flex-col gap-1 p-4", a), ...e })
 );
 h.displayName = "CardHeader";
 const R = n.forwardRef(
-  ({ className: a, ...e }, r) => /* @__PURE__ */ t("h3", { ref: r, className: d("prui-card-title text-base font-semibold text-[var(--prui-fg)]", a), ...e })
+  ({ className: a, ...e }, r) => /* @__PURE__ */ t("h3", { ref: r, className: s("prui-card-title text-base font-semibold text-[var(--prui-fg)]", a), ...e })
 );
 R.displayName = "CardTitle";
 const k = n.forwardRef(
-  ({ className: a, ...e }, r) => /* @__PURE__ */ t("p", { ref: r, className: d("prui-card-description text-sm text-[var(--prui-dim)]", a), ...e })
+  ({ className: a, ...e }, r) => /* @__PURE__ */ t("p", { ref: r, className: s("prui-card-description text-sm text-[var(--prui-dim)]", a), ...e })
 );
 k.displayName = "CardDescription";
 const j = n.forwardRef(
-  ({ className: a, ...e }, r) => /* @__PURE__ */ t("div", { ref: r, className: d("prui-card-content p-4 pt-0", a), ...e })
+  ({ className: a, ...e }, r) => /* @__PURE__ */ t("div", { ref: r, className: s("prui-card-content p-4 pt-0", a), ...e })
 );
 j.displayName = "CardContent";
 const S = n.forwardRef(
-  ({ className: a, ...e }, r) => /* @__PURE__ */ t("div", { ref: r, className: d("prui-card-footer flex items-center p-4 pt-0", a), ...e })
+  ({ className: a, ...e }, r) => /* @__PURE__ */ t("div", { ref: r, className: s("prui-card-footer flex items-center p-4 pt-0", a), ...e })
 );
 S.displayName = "CardFooter";
 const D = {
@@ -91,23 +95,23 @@ const D = {
   md: "h-8 w-8 text-xs",
   lg: "h-12 w-12 text-base"
 }, B = n.forwardRef(
-  ({ className: a, src: e, alt: r, fallback: o, size: i = "md", ...l }, p) => {
-    const [u, c] = n.useState(!1), m = e && !u, f = o ?? (r ? r.split(/\s+/).slice(0, 2).map((v) => {
-      var s;
-      return ((s = v[0]) == null ? void 0 : s.toUpperCase()) ?? "";
+  ({ className: a, src: e, alt: r, fallback: i, size: o = "md", ...p }, l) => {
+    const [u, c] = n.useState(!1), f = e && !u, m = i ?? (r ? r.split(/\s+/).slice(0, 2).map((v) => {
+      var d;
+      return ((d = v[0]) == null ? void 0 : d.toUpperCase()) ?? "";
     }).join("") : "");
     return /* @__PURE__ */ t(
       "span",
       {
-        ref: p,
-        className: d(
+        ref: l,
+        className: s(
           "prui-avatar relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden",
           "rounded-[var(--prui-radius-full)] bg-[var(--prui-raise)] text-[var(--prui-dim)] font-medium",
-          A[i],
+          A[o],
           a
         ),
-        ...l,
-        children: m ? /* @__PURE__ */ t("img", { src: e, alt: r ?? "", className: "h-full w-full object-cover", onError: () => c(!0) }) : f
+        ...p,
+        children: f ? /* @__PURE__ */ t("img", { src: e, alt: r ?? "", className: "h-full w-full object-cover", onError: () => c(!0) }) : m
       }
     );
   }

package/dist/core/checkbox.d.ts

@@ -0,0 +1,19 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * Checkbox: a button-based checkbox with an accessible checked state,
+ * native Space/Enter toggling, an indeterminate visual state, and an
+ * optional label rendered as a real <label> pair.
+ */
+export interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    /** Neither checked nor unchecked (e.g. "some rows selected"). */
+    indeterminate?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Label rendered beside the box; click toggles. */
+    label?: React.ReactNode;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const checkboxPropsMeta: PropsMeta;

package/dist/core/checkbox.js

@@ -0,0 +1,55 @@
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
+import * as f from "react";
+import { Minus as g, Check as N } from "lucide-react";
+import { cn as p } from "./cn.js";
+const C = f.forwardRef(function({ className: b, checked: c, defaultChecked: m = !1, indeterminate: r = !1, disabled: o, onChange: a, label: l, ...h }, x) {
+  const [k, v] = f.useState(m), i = c !== void 0, e = i ? c : k, s = (t) => {
+    if (o) return;
+    const d = r ? !0 : !e;
+    i || v(d), a == null || a(d, t);
+  }, u = /* @__PURE__ */ n(
+    "button",
+    {
+      ref: x,
+      type: "button",
+      role: "checkbox",
+      "aria-checked": r ? "mixed" : e,
+      "aria-disabled": o,
+      "data-state": e ? "checked" : "unchecked",
+      disabled: o,
+      onClick: s,
+      className: p(
+        "prui-checkbox inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[var(--prui-radius-1)] border",
+        "transition-colors duration-[var(--prui-duration-fast)] cursor-pointer outline-none",
+        "focus-visible:ring-2 focus-visible:ring-[var(--prui-brand)] focus-visible:ring-offset-1",
+        e || r ? "border-transparent bg-[var(--prui-brand)] text-[var(--prui-brand-fg,#fff)]" : "border-[var(--prui-line)] bg-[var(--prui-background)]",
+        o && "opacity-50 cursor-not-allowed",
+        b
+      ),
+      ...h,
+      children: r && !e ? /* @__PURE__ */ n(g, { className: "h-3 w-3", "aria-hidden": !0 }) : e ? /* @__PURE__ */ n(N, { className: "h-3 w-3", "aria-hidden": !0 }) : null
+    }
+  );
+  return l === void 0 ? u : /* @__PURE__ */ y("span", { className: "inline-flex items-center gap-2", children: [
+    u,
+    /* @__PURE__ */ n("span", { className: p("text-sm select-none", o ? "text-[var(--prui-dim)]" : "text-[var(--prui-fg)]", "cursor-pointer"), onClick: (t) => {
+      t.preventDefault(), s(t);
+    }, children: l })
+  ] });
+});
+C.displayName = "Checkbox";
+const D = {
+  name: "Checkbox",
+  props: [
+    { name: "checked", type: "boolean", default: "undefined", control: "boolean" },
+    { name: "defaultChecked", type: "boolean", default: "false", control: "boolean" },
+    { name: "indeterminate", type: "boolean", default: "false", control: "boolean" },
+    { name: "disabled", type: "boolean", default: "false", control: "boolean" },
+    { name: "onChange", type: "(checked, event) => void", default: null, control: "none" },
+    { name: "label", type: "ReactNode", default: null, control: "text" }
+  ]
+};
+export {
+  C as Checkbox,
+  D as checkboxPropsMeta
+};

package/dist/core/combobox.d.ts

@@ -0,0 +1,32 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * Combobox: a text input with a filtered listbox (the editable Select).
+ * Full ARIA 1.2 combobox pattern: aria-expanded/controls/activedescendant,
+ * ArrowDown/Up move, Home/End jump, Enter picks, Escape (topmost only)
+ * closes and refocuses, typing filters. Controlled and uncontrolled value.
+ */
+export interface ComboboxOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue"> {
+    options: ComboboxOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: string;
+    /** Input placeholder when no value is set. */
+    emptyText?: React.ReactNode;
+    /** Message when no option matches the query. */
+    noMatchText?: React.ReactNode;
+    /** Start with the listbox open. */
+    defaultOpen?: boolean;
+    /** Match function; default is label contains query (case-insensitive). */
+    filter?: (option: ComboboxOption, query: string) => boolean;
+    disabled?: boolean;
+}
+export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const comboboxPropsMeta: PropsMeta;

package/dist/core/combobox.js

@@ -0,0 +1,183 @@
+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,
+  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());
+    }
+  }, { setElement: O, isTop: Q } = Y(a);
+  Z(a, Q, () => {
+    var e;
+    d(!1), (e = c.current) == null || e.focus();
+  });
+  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(() => {
+    s((e) => e < r.length ? e : Math.max(0, r.length - 1));
+  }, [r.length]);
+  const S = (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);
+      return;
+    }
+    if (!a) return;
+    const t = (l) => {
+      var m;
+      return !((m = r[l]) != null && m.disabled);
+    };
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), s(q(n, 1, r.length, { enabled: t }));
+        break;
+      case "ArrowUp":
+        e.preventDefault(), s(q(n, -1, r.length, { enabled: t }));
+        break;
+      case "Home":
+        r.length && (e.preventDefault(), s(te(r.length, t)));
+        break;
+      case "End":
+        r.length && (e.preventDefault(), s(ee(r.length, t)));
+        break;
+      case "Enter":
+        e.preventDefault(), r[n] && S(r[n]);
+        break;
+      case "Tab":
+        d(!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(
+      "div",
+      {
+        ref: (e) => {
+          E.current = e, V(e), O(e);
+        },
+        id: v,
+        role: "listbox",
+        "aria-label": D["aria-label"] ?? "Options",
+        tabIndex: -1,
+        "data-state": "open",
+        className: N(
+          "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
+        },
+        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(
+            "div",
+            {
+              id: `${v}-option-${t}`,
+              role: "option",
+              "aria-selected": l,
+              "aria-disabled": e.disabled,
+              "data-active": t === n || void 0,
+              "data-selected": l || void 0,
+              tabIndex: -1,
+              onMouseEnter: () => s(t),
+              onClick: () => S(e),
+              className: N(
+                "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",
+                e.disabled && "opacity-50 pointer-events-none"
+              ),
+              children: e.label
+            },
+            e.value
+          );
+        })
+      }
+    ) }) : null
+  ] });
+});
+re.displayName = "Combobox";
+const ce = {
+  name: "Combobox",
+  props: [
+    { name: "options", type: "ComboboxOption[]", default: null, control: "object" },
+    { name: "value", type: "string", default: "undefined", control: "text" },
+    { name: "defaultValue", type: "string", default: "undefined", control: "text" },
+    { name: "onChange", type: "(value: string) => void", default: null, control: "none" },
+    { name: "placeholder", type: "string", default: "'Type to search...'", control: "text" },
+    { name: "noMatchText", type: "ReactNode", default: "'No matches.'", control: "text" },
+    { name: "filter", type: "(option, query) => boolean", default: "label contains query", control: "none" }
+  ]
+};
+export {
+  re as Combobox,
+  ce as comboboxPropsMeta
+};

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

@@ -0,0 +1,41 @@
+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.
+ */
+export interface DatePickerProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (date: string) => void;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    /** Accessible label for the trigger input. */
+    ariaLabel?: string;
+}
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+export interface DateRange {
+    from?: string;
+    to?: string;
+}
+export interface DateRangePickerProps {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    ariaLabel?: string;
+}
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLInputElement>>;
+export declare const datePickerPropsMeta: PropsMeta;
+export declare const dateRangePickerPropsMeta: PropsMeta;