@actioneer/ads 1.0.8 → 1.0.10

package/components/field.js

@@ -1,9 +1,11 @@
 "use client";
-import { jsxs as v, jsx as l } from "react/jsx-runtime";
-import * as a from "react";
-import { cn as i } from "../lib/cn.js";
-import { interactive as R } from "../lib/interactive.js";
-const L = i(
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as l } from "../lib/cn.js";
+import { interactive as D } from "../lib/interactive.js";
+import { Info as I } from "../lib/icons.js";
+import { Tooltip as B } from "./tooltip.js";
+const P = l(
   // Border WIDTH only — no border-color utility. ads-interactive owns the
   // color (rest = --glow-border-rest below); a `border-input` utility here
   // would out-cascade the shared hover/focus rules.
@@ -19,71 +21,90 @@ const L = i(
   // hover stays neutral while focus uses the subtle teal edge. The inner
   // glow is a whisper of inset depth so the writing surface reads recessed —
   // carried through every interactive state by the --glow-inset hook.
-  R({ on: "all", color: "brand", intensity: "medium", animate: !0 }),
+  D({ on: "all", color: "brand", intensity: "medium", animate: !0 }),
   "[--glow-border-rest:var(--input)]",
   "[--glow-border-hover:var(--input)]",
   "[--glow-border-active:var(--field-focus)]"
-), w = a.forwardRef(({ className: r, children: e, required: o, ...t }, n) => /* @__PURE__ */ v(
+), u = n.forwardRef(({ className: o, children: e, required: r, ...i }, a) => /* @__PURE__ */ d(
   "label",
   {
-    ref: n,
-    className: i(
+    ref: a,
+    className: l(
       "flex items-center gap-1 text-m font-medium text-secondary select-none",
       "peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
-      r
+      o
     ),
-    ...t,
+    ...i,
     children: [
       e,
-      o && /* @__PURE__ */ l("span", { className: "text-danger", children: "*" })
+      r && /* @__PURE__ */ t("span", { className: "text-danger", children: "*" })
     ]
   }
 ));
-w.displayName = "Label";
-const y = a.forwardRef(({ className: r, ...e }, o) => /* @__PURE__ */ l(
+u.displayName = "Label";
+const N = n.forwardRef(({ className: o, ...e }, r) => /* @__PURE__ */ t(
   "p",
   {
-    ref: o,
-    className: i("text-m font-normal text-muted-foreground", r),
+    ref: r,
+    className: l("text-m font-normal text-muted-foreground", o),
     ...e
   }
 ));
-y.displayName = "FieldDescription";
-const h = a.forwardRef(
-  ({ className: r, children: e, ...o }, t) => e ? /* @__PURE__ */ l(
+N.displayName = "FieldDescription";
+const F = n.forwardRef(
+  ({ className: o, children: e, ...r }, i) => e ? /* @__PURE__ */ t(
     "p",
     {
-      ref: t,
-      className: i("text-m font-normal text-danger", r),
-      ...o,
+      ref: i,
+      className: l("text-m font-normal text-danger", o),
+      ...r,
       children: e
     }
   ) : null
 );
-h.displayName = "FieldError";
-const D = a.forwardRef(
-  ({ className: r, label: e, description: o, error: t, required: n, htmlFor: g, errorId: s, descriptionId: c, children: d, ...N }, F) => {
-    const m = a.useId(), p = s ?? `${m}-error`, f = c ?? `${m}-description`, u = t ? p : o ? f : void 0, E = s == null && c == null;
-    let x = d;
-    if (E && u && a.isValidElement(d)) {
-      const b = d.props;
-      x = a.cloneElement(d, {
-        "aria-describedby": [b["aria-describedby"], u].filter(Boolean).join(" ") || void 0,
-        "aria-invalid": b["aria-invalid"] ?? (t ? !0 : void 0)
+F.displayName = "FieldError";
+function $({ children: o, label: e = "More information" }) {
+  return /* @__PURE__ */ t(B, { content: o, children: /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      "aria-label": e,
+      "data-slot": "field-info",
+      className: "inline-flex size-5 shrink-0 cursor-help items-center justify-center rounded-xs text-on-white-tertiary outline-none transition-colors duration-150 ease-out hover:text-action-primary focus-visible:text-action-primary focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none [&_svg]:size-4",
+      children: /* @__PURE__ */ t(I, { "aria-hidden": !0 })
+    }
+  ) });
+}
+const k = n.forwardRef(
+  ({ className: o, label: e, description: r, error: i, required: a, htmlFor: f, errorId: p, descriptionId: x, info: c, actions: m, children: s, ...j }, E) => {
+    const h = n.useId(), b = p ?? `${h}-error`, v = x ?? `${h}-description`, y = i ? b : r ? v : void 0, R = p == null && x == null;
+    let w = s;
+    if (R && y && n.isValidElement(s)) {
+      const g = s.props;
+      w = n.cloneElement(s, {
+        "aria-describedby": [g["aria-describedby"], y].filter(Boolean).join(" ") || void 0,
+        "aria-invalid": g["aria-invalid"] ?? (i ? !0 : void 0)
       });
     }
-    return /* @__PURE__ */ v("div", { ref: F, className: i("flex flex-col gap-1.5", r), ...N, children: [
-      e && /* @__PURE__ */ l(w, { htmlFor: g, required: n, children: e }),
-      x,
-      t ? /* @__PURE__ */ l(h, { id: p, children: t }) : o ? /* @__PURE__ */ l(y, { id: f, children: o }) : null
+    return /* @__PURE__ */ d("div", { ref: E, className: l("flex flex-col gap-1.5", o), ...j, children: [
+      e && (c || m) ? /* @__PURE__ */ d("div", { "data-slot": "field-label-row", className: "flex min-h-5 items-center justify-between gap-3", children: [
+        /* @__PURE__ */ d("span", { className: "flex min-w-0 items-center gap-1", children: [
+          /* @__PURE__ */ t(u, { htmlFor: f, required: a, children: e }),
+          c ? /* @__PURE__ */ t($, { label: typeof e == "string" ? `About ${e}` : void 0, children: c }) : null
+        ] }),
+        m ? /* @__PURE__ */ t("span", { className: "flex shrink-0 items-center gap-2", children: m }) : null
+      ] }) : e ? /* @__PURE__ */ t(u, { htmlFor: f, required: a, children: e }) : null,
+      w,
+      i ? /* @__PURE__ */ t(F, { id: b, children: i }) : r ? /* @__PURE__ */ t(N, { id: v, children: r }) : null
     ] });
   }
 );
-D.displayName = "Field";
+k.displayName = "Field";
 export {
-  D as Field,
-  y as FieldDescription,
-  h as FieldError,
-  w as Label,
-  L as inputBaseClass
+  k as Field,
+  N as FieldDescription,
+  F as FieldError,
+  $ as FieldInfo,
+  u as Label,
+  P as inputBaseClass
 };

package/components/file-dropzone.d.ts

@@ -6,13 +6,20 @@ import * as React from "react";
  *
  * A dashed edge is the one sanctioned stroke here: it is the affordance
  * ("something goes in this hole"), not decoration. The empty zone is a White
- * surface with a dashed WG5 edge and an outlined icon tile; hover warms it to
- * WG1, and a drag-over turns it pale teal with a teal edge, so nothing jumps.
- * Once files are chosen it becomes a solid-edged row: file tile, name and
- * size, with Replace and Clear on the right.
+ * surface with a dashed WG5 edge and a bare icon (icons never sit on a tile or
+ * fill — principle `create-modals`); hover warms it to WG1, and a drag-over
+ * turns it pale teal with a teal edge, so nothing jumps. Once files are chosen
+ * it becomes a solid-edged row: file icon, name and size, with Replace and
+ * Clear on the right.
+ *
+ * `layout="stacked"` (default) is the tall centred target for a page that is
+ * about the upload. `layout="inline"` is the 64px strip used inside forms and
+ * modals: icon · label + hint · Browse button, so the upload does not push the
+ * rest of a fixed-height form out of view.
  */
 declare const fileDropzoneVariants: (props?: ({
     hasFiles?: boolean | null | undefined;
+    layout?: "inline" | "stacked" | null | undefined;
     isDragging?: boolean | null | undefined;
     isDisabled?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -30,6 +37,10 @@ export interface FileDropzoneProps extends Omit<React.HTMLAttributes<HTMLDivElem
     label?: React.ReactNode;
     /** Sub-line, e.g. "CSV up to 10 MB". */
     hint?: React.ReactNode;
+    /** `stacked` tall centred target (default) · `inline` 64px strip for forms and modals. */
+    layout?: "stacked" | "inline";
+    /** Label of the inline layout's Browse button. */
+    browseLabel?: string;
 }
 export declare const FileDropzone: React.ForwardRefExoticComponent<FileDropzoneProps & React.RefAttributes<HTMLDivElement>>;
 export { fileDropzoneVariants };

package/components/file-dropzone.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsxs as t, jsx as r, Fragment as m } from "react/jsx-runtime";
-import * as s from "react";
-import { cva as R } from "class-variance-authority";
-import { cn as p } from "../lib/cn.js";
-import { Button as v } from "./button.js";
-import { FileText as j, Upload as B } from "../lib/icons.js";
-const C = R(
-  p(
+import { jsxs as a, jsx as r, Fragment as m } from "react/jsx-runtime";
+import * as p from "react";
+import { cva as j } from "class-variance-authority";
+import { cn as g } from "../lib/cn.js";
+import { Button as D } from "./button.js";
+import { FileText as T, Upload as z } from "../lib/icons.js";
+const U = j(
+  g(
     "flex w-full cursor-pointer rounded-lg border bg-card outline-none",
     "transition-[background-color,border-color,transform] duration-150 ease-out",
     "focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none"
@@ -15,7 +15,11 @@ const C = R(
     variants: {
       hasFiles: {
         true: "flex-row items-center justify-between gap-4 border-solid border-border p-3 text-left",
-        false: "flex-col items-center justify-center gap-3 border-dashed border-border-strong px-6 py-7 text-center hover:bg-wg1 active:scale-[0.99] motion-reduce:active:scale-100"
+        false: "border-dashed border-border-strong hover:bg-wg1 active:scale-[0.99] motion-reduce:active:scale-100"
+      },
+      layout: {
+        stacked: "",
+        inline: ""
       },
       isDragging: {
         true: "border-dashed border-field-focus bg-t1 hover:bg-t1",
@@ -26,112 +30,144 @@ const C = R(
         false: ""
       }
     },
-    defaultVariants: { hasFiles: !1, isDragging: !1, isDisabled: !1 }
+    compoundVariants: [
+      { hasFiles: !1, layout: "stacked", className: "flex-col items-center justify-center gap-3 px-6 py-7 text-center" },
+      { hasFiles: !1, layout: "inline", className: "min-h-16 flex-row items-center gap-3 p-3 text-left" }
+    ],
+    defaultVariants: { hasFiles: !1, isDragging: !1, isDisabled: !1, layout: "stacked" }
   }
-), N = "inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-card text-muted-foreground [&>svg]:size-4.5", F = (a) => a < 1024 ? `${a} B` : a < 1024 * 1024 ? `${Math.round(a / 1024)} KB` : `${(a / (1024 * 1024)).toFixed(1)} MB`, T = s.forwardRef(
+), N = "inline-flex shrink-0 items-center justify-center text-muted-foreground transition-colors duration-150 ease-out motion-reduce:transition-none [&>svg]:size-5", P = (t) => t < 1024 ? `${t} B` : t < 1024 * 1024 ? `${Math.round(t / 1024)} KB` : `${(t / (1024 * 1024)).toFixed(1)} MB`, V = p.forwardRef(
   ({
-    className: a,
-    accept: y,
-    multiple: c = !1,
+    className: t,
+    accept: B,
+    multiple: s = !1,
     disabled: n = !1,
-    onFiles: l,
-    files: i,
-    onClear: g,
-    label: w,
-    hint: h,
-    ...z
-  }, k) => {
-    const x = s.useRef(null), [d, f] = s.useState(!1), o = s.useRef(0), b = (e) => {
-      e != null && e.length && (l == null || l(c ? Array.from(e) : [e[0]]));
-    }, u = () => {
+    onFiles: h,
+    files: o,
+    onClear: y,
+    label: l,
+    hint: c,
+    layout: x = "stacked",
+    browseLabel: C = "Browse",
+    ...F
+  }, R) => {
+    const b = p.useRef(null), [d, v] = p.useState(!1), i = p.useRef(0), k = (e) => {
+      e != null && e.length && (h == null || h(s ? Array.from(e) : [e[0]]));
+    }, f = () => {
       var e;
-      return (e = x.current) == null ? void 0 : e.click();
-    }, D = !!(i != null && i.length);
-    return /* @__PURE__ */ t(
+      return (e = b.current) == null ? void 0 : e.click();
+    }, w = !!(o != null && o.length), u = x !== "inline";
+    return /* @__PURE__ */ a(
       "div",
       {
-        ref: k,
+        ref: R,
         "data-slot": "file-dropzone",
         "data-dragging": d || void 0,
-        role: "button",
-        tabIndex: n ? -1 : 0,
+        role: u ? "button" : "group",
+        "aria-label": u ? void 0 : typeof l == "string" ? l : "Upload",
+        tabIndex: u ? n ? -1 : 0 : void 0,
         "aria-disabled": n || void 0,
-        onClick: u,
+        onClick: f,
         onKeyDown: (e) => {
-          (e.key === "Enter" || e.key === " ") && (e.preventDefault(), u());
+          u && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), f());
         },
         onDragEnter: (e) => {
-          e.preventDefault(), o.current += 1, f(!0);
+          e.preventDefault(), i.current += 1, v(!0);
         },
         onDragOver: (e) => e.preventDefault(),
         onDragLeave: () => {
-          o.current -= 1, o.current <= 0 && (o.current = 0, f(!1));
+          i.current -= 1, i.current <= 0 && (i.current = 0, v(!1));
         },
         onDrop: (e) => {
-          e.preventDefault(), o.current = 0, f(!1), n || b(e.dataTransfer.files);
+          e.preventDefault(), i.current = 0, v(!1), n || k(e.dataTransfer.files);
         },
-        className: p(
-          C({ hasFiles: D, isDragging: d, isDisabled: n }),
-          a
+        className: g(
+          U({ hasFiles: w, isDragging: d, isDisabled: n, layout: x }),
+          t
         ),
-        ...z,
+        ...F,
         children: [
           /* @__PURE__ */ r(
             "input",
             {
-              ref: x,
+              ref: b,
               hidden: !0,
               type: "file",
-              accept: y,
-              multiple: c,
+              accept: B,
+              multiple: s,
               disabled: n,
               onChange: (e) => {
-                b(e.currentTarget.files), e.currentTarget.value = "";
+                k(e.currentTarget.files), e.currentTarget.value = "";
               }
             }
           ),
-          D ? /* @__PURE__ */ t(m, { children: [
-            /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 flex-col gap-2.5", children: i.map((e) => /* @__PURE__ */ t("span", { className: "flex min-w-0 items-center gap-3", children: [
-              /* @__PURE__ */ r("span", { "aria-hidden": !0, className: N, children: /* @__PURE__ */ r(j, {}) }),
-              /* @__PURE__ */ t("span", { className: "flex min-w-0 flex-col", children: [
+          w ? /* @__PURE__ */ a(m, { children: [
+            /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 flex-col gap-2.5", children: o.map((e) => /* @__PURE__ */ a("span", { className: "flex min-w-0 items-center gap-3", children: [
+              /* @__PURE__ */ r("span", { "aria-hidden": !0, className: N, children: /* @__PURE__ */ r(T, {}) }),
+              /* @__PURE__ */ a("span", { className: "flex min-w-0 flex-col", children: [
                 /* @__PURE__ */ r("span", { className: "truncate text-m font-medium text-foreground", children: e.name }),
-                /* @__PURE__ */ r("span", { className: "text-s text-tertiary tabular-nums", children: F(e.size) })
+                /* @__PURE__ */ r("span", { className: "text-s text-tertiary tabular-nums", children: P(e.size) })
               ] })
             ] }, e.name)) }),
-            /* @__PURE__ */ t("div", { className: "flex shrink-0 items-center gap-1", children: [
-              /* @__PURE__ */ r(v, { size: "sm", variant: "outline", onClick: (e) => {
-                e.stopPropagation(), u();
+            /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center gap-1", children: [
+              /* @__PURE__ */ r(D, { size: "sm", variant: "outline", onClick: (e) => {
+                e.stopPropagation(), f();
               }, children: "Replace" }),
-              g && /* @__PURE__ */ r(
-                v,
+              y && /* @__PURE__ */ r(
+                D,
                 {
                   size: "sm",
                   variant: "ghost",
                   onClick: (e) => {
-                    e.stopPropagation(), g();
+                    e.stopPropagation(), y();
                   },
                   children: "Clear"
                 }
               )
             ] })
-          ] }) : /* @__PURE__ */ t(m, { children: [
+          ] }) : x === "inline" ? /* @__PURE__ */ a(m, { children: [
+            /* @__PURE__ */ r(
+              "span",
+              {
+                "aria-hidden": !0,
+                className: g(N, d && "text-action-primary"),
+                children: /* @__PURE__ */ r(z, {})
+              }
+            ),
+            /* @__PURE__ */ a("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+              /* @__PURE__ */ r("span", { className: "truncate text-m font-medium text-foreground", children: l ?? (s ? "Upload files" : "Upload a file") }),
+              c && /* @__PURE__ */ r("span", { className: "truncate text-s text-secondary", children: c })
+            ] }),
+            /* @__PURE__ */ r(
+              D,
+              {
+                variant: "outline",
+                className: "shrink-0",
+                disabled: n,
+                onClick: (e) => {
+                  e.stopPropagation(), f();
+                },
+                children: C
+              }
+            )
+          ] }) : /* @__PURE__ */ a(m, { children: [
             /* @__PURE__ */ r(
               "span",
               {
                 "aria-hidden": !0,
-                className: p(N, d && "text-action-primary"),
-                children: /* @__PURE__ */ r(B, {})
+                className: g(N, d && "text-action-primary"),
+                children: /* @__PURE__ */ r(z, {})
               }
             ),
-            /* @__PURE__ */ t("span", { className: "flex flex-col items-center gap-0.5", children: [
-              /* @__PURE__ */ r("span", { className: "text-m font-medium text-foreground", children: w ?? /* @__PURE__ */ t(m, { children: [
+            /* @__PURE__ */ a("span", { className: "flex flex-col items-center gap-0.5", children: [
+              /* @__PURE__ */ r("span", { className: "text-m font-medium text-foreground", children: l ?? /* @__PURE__ */ a(m, { children: [
                 "Drop ",
-                c ? "files" : "a file",
+                s ? "files" : "a file",
                 " here, or",
                 " ",
                 /* @__PURE__ */ r("span", { className: "text-action-primary-text", children: "browse" })
               ] }) }),
-              h && /* @__PURE__ */ r("span", { className: "text-s text-tertiary", children: h })
+              c && /* @__PURE__ */ r("span", { className: "text-s text-tertiary", children: c })
             ] })
           ] })
         ]
@@ -139,8 +175,8 @@ const C = R(
     );
   }
 );
-T.displayName = "FileDropzone";
+V.displayName = "FileDropzone";
 export {
-  T as FileDropzone,
-  C as fileDropzoneVariants
+  V as FileDropzone,
+  U as fileDropzoneVariants
 };

package/components/filter-bar.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+/**
+ * FilterBar — the scope a page is showing, spelled out as joined segments
+ * (user-mandated 2026-11-14, the Span filter look).
+ *
+ * One 32px control with a WG4 `border-input` edge and 6px corners; its
+ * segments sit side by side, split by hairlines. Each segment shows its
+ * CURRENT value, so the reader sees what the numbers below cover without
+ * opening anything:
+ *
+ *   [ This campaign ▾ | 🗓 Oct 19 – Oct 23 ]        [ All cohorts ▾ ]
+ *
+ * - `FilterBarSelect` — a value with a caret that opens a menu of options.
+ * - `FilterBarValue` — a read-only value (an optional bare icon + text),
+ *   such as the dates a preset resolves to; pass `onClick` to make it open
+ *   something.
+ *
+ * Use it for the scope row of an analytics/record page. It is not a form
+ * field (no label) and not a toggle group (use `SegmentedControl` to switch
+ * views).
+ */
+export interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Names the group for assistive tech, e.g. "Report scope". */
+    "aria-label": string;
+}
+export declare const FilterBar: React.ForwardRefExoticComponent<FilterBarProps & React.RefAttributes<HTMLDivElement>>;
+export interface FilterBarOption {
+    value: string;
+    label: string;
+}
+export interface FilterBarSelectProps {
+    /** What the segment filters, for assistive tech ("Campaign scope"). */
+    label: string;
+    value: string;
+    options: FilterBarOption[];
+    onValueChange: (value: string) => void;
+    className?: string;
+}
+export declare function FilterBarSelect({ label, value, options, onValueChange, className }: FilterBarSelectProps): React.JSX.Element;
+export interface FilterBarValueProps extends React.HTMLAttributes<HTMLElement> {
+    /** A bare leading glyph, e.g. a calendar for a date range. */
+    icon?: React.ReactNode;
+}
+export declare const FilterBarValue: React.ForwardRefExoticComponent<FilterBarValueProps & React.RefAttributes<HTMLElement>>;

package/components/filter-bar.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as e, jsxs as c, Fragment as m } from "react/jsx-runtime";
+import * as u from "react";
+import { cn as s } from "../lib/cn.js";
+import { ChevronDown as b, Check as f } from "../lib/icons.js";
+import { Dropdown as h, DropdownTrigger as p, DropdownContent as g, DropdownItem as v } from "./dropdown.js";
+const w = u.forwardRef(
+  ({ className: i, ...r }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      role: "group",
+      "data-slot": "filter-bar",
+      className: s(
+        "inline-flex h-8 max-w-full shrink-0 items-stretch overflow-hidden rounded-m border border-input bg-card",
+        // Hairline between segments; the group's own edge closes the ends.
+        "[&>*+*]:border-l [&>*+*]:border-input",
+        i
+      ),
+      ...r
+    }
+  )
+);
+w.displayName = "FilterBar";
+const d = "inline-flex min-w-0 items-center gap-2 px-3 text-m whitespace-nowrap text-on-white-primary [&_svg]:size-4 [&_svg]:shrink-0";
+function D({ label: i, value: r, options: a, onValueChange: o, className: l }) {
+  const n = a.find((t) => t.value === r);
+  return /* @__PURE__ */ c(h, { children: [
+    /* @__PURE__ */ e(p, { children: /* @__PURE__ */ c(
+      "button",
+      {
+        type: "button",
+        "data-slot": "filter-bar-select",
+        "aria-label": `${i}: ${(n == null ? void 0 : n.label) ?? r}`,
+        className: s(
+          d,
+          "cursor-pointer outline-none transition-colors duration-150 motion-reduce:transition-none",
+          "hover:bg-muted focus-visible:bg-muted focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring",
+          l
+        ),
+        children: [
+          /* @__PURE__ */ e("span", { className: "truncate", children: (n == null ? void 0 : n.label) ?? r }),
+          /* @__PURE__ */ e(b, { "aria-hidden": !0, className: "text-on-white-secondary" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(g, { "aria-label": i, children: a.map((t) => /* @__PURE__ */ e(
+      v,
+      {
+        "aria-current": t.value === r ? "true" : void 0,
+        onSelect: () => o(t.value),
+        startContent: /* @__PURE__ */ e(f, { "aria-hidden": !0, className: t.value === r ? "opacity-100" : "opacity-0" }),
+        children: t.label
+      },
+      t.value
+    )) })
+  ] });
+}
+const x = u.forwardRef(
+  ({ className: i, icon: r, children: a, onClick: o, ...l }, n) => {
+    const t = /* @__PURE__ */ c(m, { children: [
+      r ? /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "inline-flex text-on-white-secondary", children: r }) : null,
+      /* @__PURE__ */ e("span", { className: "truncate tabular-nums", children: a })
+    ] });
+    return o ? /* @__PURE__ */ e(
+      "button",
+      {
+        ref: n,
+        type: "button",
+        "data-slot": "filter-bar-value",
+        onClick: o,
+        className: s(
+          d,
+          "cursor-pointer outline-none transition-colors duration-150 motion-reduce:transition-none",
+          "hover:bg-muted focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring",
+          i
+        ),
+        ...l,
+        children: t
+      }
+    ) : /* @__PURE__ */ e("span", { ref: n, "data-slot": "filter-bar-value", className: s(d, i), ...l, children: t });
+  }
+);
+x.displayName = "FilterBarValue";
+export {
+  w as FilterBar,
+  D as FilterBarSelect,
+  x as FilterBarValue
+};

package/components/filters.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export interface FilterOption {
+    value: string;
+    label: string;
+}
+export interface FilterGroup {
+    /** Stable key passed back through `onChange`. */
+    id: string;
+    /** Accessible name for the group's Select (e.g. "Status"). */
+    label: string;
+    /** The first option is the group's "All …" default. */
+    options: FilterOption[];
+    /** The selected option value. */
+    value: string;
+}
+export interface FiltersProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "title"> {
+    groups: FilterGroup[];
+    /** Called with the group id and its newly selected option value. */
+    onChange: (id: string, value: string) => void;
+    /**
+     * Called by "Clear all". When omitted, Clear all resets every applied group
+     * to its first option through `onChange`.
+     */
+    onClearAll?: () => void;
+    /** Panel title. Defaults to "Filters". */
+    title?: string;
+    /** Accessible label for the icon-only trigger. Defaults to `title`. */
+    triggerLabel?: string;
+    /** Which trigger edge the panel aligns to. Defaults to `"end"`. */
+    align?: "start" | "end";
+    /** Controlled open state — pair with `onOpenChange`. */
+    open?: boolean;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare const Filters: React.ForwardRefExoticComponent<FiltersProps & React.RefAttributes<HTMLDivElement>>;