@actioneer/ads 1.0.7 → 1.0.9

package/components/file-dropzone.js

@@ -1,22 +1,24 @@
 "use client";
-import { jsxs as a, jsx as r, Fragment as f } from "react/jsx-runtime";
-import * as i from "react";
-import { cva as C } from "class-variance-authority";
-import { cn as v } from "../lib/cn.js";
-import { Button as D } from "./button.js";
-import { FileText as R, Close as B, Upload as w } from "../lib/icons.js";
-const T = C(
-  v(
-    "flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-xl px-6 py-8 text-center",
-    "border border-dashed border-border-strong bg-surface outline-none",
+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(
+    "flex w-full cursor-pointer rounded-lg border bg-card outline-none",
     "transition-[background-color,border-color,transform] duration-150 ease-out",
-    "hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring",
-    "active:scale-[0.97] motion-reduce:transition-none"
+    "focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none"
   ),
   {
     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"
+      },
       isDragging: {
-        true: "border-ring bg-accent",
+        true: "border-dashed border-field-focus bg-t1 hover:bg-t1",
         false: ""
       },
       isDisabled: {
@@ -24,33 +26,33 @@ const T = C(
         false: ""
       }
     },
-    defaultVariants: { isDragging: !1, isDisabled: !1 }
+    defaultVariants: { hasFiles: !1, isDragging: !1, isDisabled: !1 }
   }
-), j = (t) => t < 1024 ? `${t} B` : t < 1024 * 1024 ? `${Math.round(t / 1024)} KB` : `${(t / (1024 * 1024)).toFixed(1)} MB`, $ = i.forwardRef(
+), 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(
   ({
-    className: t,
-    accept: b,
+    className: a,
+    accept: y,
     multiple: c = !1,
     disabled: n = !1,
     onFiles: l,
-    files: s,
+    files: i,
     onClear: g,
-    label: N,
-    hint: p,
-    ...y
-  }, z) => {
-    const m = i.useRef(null), [h, d] = i.useState(!1), o = i.useRef(0), x = (e) => {
+    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 = () => {
       var e;
-      return (e = m.current) == null ? void 0 : e.click();
-    }, k = !!(s != null && s.length);
-    return /* @__PURE__ */ a(
+      return (e = x.current) == null ? void 0 : e.click();
+    }, D = !!(i != null && i.length);
+    return /* @__PURE__ */ t(
       "div",
       {
-        ref: z,
+        ref: k,
         "data-slot": "file-dropzone",
-        "data-dragging": h || void 0,
+        "data-dragging": d || void 0,
         role: "button",
         tabIndex: n ? -1 : 0,
         "aria-disabled": n || void 0,
@@ -59,51 +61,52 @@ const T = C(
           (e.key === "Enter" || e.key === " ") && (e.preventDefault(), u());
         },
         onDragEnter: (e) => {
-          e.preventDefault(), o.current += 1, d(!0);
+          e.preventDefault(), o.current += 1, f(!0);
         },
         onDragOver: (e) => e.preventDefault(),
         onDragLeave: () => {
-          o.current -= 1, o.current <= 0 && (o.current = 0, d(!1));
+          o.current -= 1, o.current <= 0 && (o.current = 0, f(!1));
         },
         onDrop: (e) => {
-          e.preventDefault(), o.current = 0, d(!1), n || x(e.dataTransfer.files);
+          e.preventDefault(), o.current = 0, f(!1), n || b(e.dataTransfer.files);
         },
-        className: v(
-          T({ isDragging: h, isDisabled: n }),
-          t
+        className: p(
+          C({ hasFiles: D, isDragging: d, isDisabled: n }),
+          a
         ),
-        ...y,
+        ...z,
         children: [
           /* @__PURE__ */ r(
             "input",
             {
-              ref: m,
+              ref: x,
               hidden: !0,
               type: "file",
-              accept: b,
+              accept: y,
               multiple: c,
               disabled: n,
               onChange: (e) => {
-                x(e.currentTarget.files), e.currentTarget.value = "";
+                b(e.currentTarget.files), e.currentTarget.value = "";
               }
             }
           ),
-          k ? /* @__PURE__ */ a(f, { children: [
-            /* @__PURE__ */ r("span", { "aria-hidden": !0, className: "text-tertiary [&>svg]:size-6", children: /* @__PURE__ */ r(R, {}) }),
-            /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: s.map((e) => /* @__PURE__ */ a("span", { className: "text-base text-foreground", children: [
-              e.name,
-              /* @__PURE__ */ r("span", { className: "ml-2 text-s text-tertiary tabular-nums", children: j(e.size) })
+          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: [
+                /* @__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) })
+              ] })
             ] }, e.name)) }),
-            /* @__PURE__ */ a("div", { className: "mt-1 flex items-center gap-2", children: [
-              /* @__PURE__ */ r(D, { size: "sm", variant: "secondary", onClick: (e) => {
+            /* @__PURE__ */ t("div", { className: "flex shrink-0 items-center gap-1", children: [
+              /* @__PURE__ */ r(v, { size: "sm", variant: "outline", onClick: (e) => {
                 e.stopPropagation(), u();
               }, children: "Replace" }),
               g && /* @__PURE__ */ r(
-                D,
+                v,
                 {
                   size: "sm",
                   variant: "ghost",
-                  startContent: /* @__PURE__ */ r(B, {}),
                   onClick: (e) => {
                     e.stopPropagation(), g();
                   },
@@ -111,24 +114,33 @@ const T = C(
                 }
               )
             ] })
-          ] }) : /* @__PURE__ */ a(f, { children: [
-            /* @__PURE__ */ r("span", { "aria-hidden": !0, className: "text-tertiary [&>svg]:size-6", children: /* @__PURE__ */ r(w, {}) }),
-            /* @__PURE__ */ r("span", { className: "text-base text-foreground", children: N ?? /* @__PURE__ */ a(f, { children: [
-              "Drop ",
-              c ? "files" : "a file",
-              " here, or",
-              " ",
-              /* @__PURE__ */ r("span", { className: "underline underline-offset-4", children: "browse" })
-            ] }) }),
-            p && /* @__PURE__ */ r("span", { className: "text-s text-tertiary", children: p })
+          ] }) : /* @__PURE__ */ t(m, { children: [
+            /* @__PURE__ */ r(
+              "span",
+              {
+                "aria-hidden": !0,
+                className: p(N, d && "text-action-primary"),
+                children: /* @__PURE__ */ r(B, {})
+              }
+            ),
+            /* @__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: [
+                "Drop ",
+                c ? "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 })
+            ] })
           ] })
         ]
       }
     );
   }
 );
-$.displayName = "FileDropzone";
+T.displayName = "FileDropzone";
 export {
-  $ as FileDropzone,
-  T as fileDropzoneVariants
+  T as FileDropzone,
+  C as fileDropzoneVariants
 };

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

package/components/filters.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import * as o from "react";
+import { cn as u } from "../lib/cn.js";
+import { Filter as T } from "../lib/icons.js";
+import { Button as F } from "./button.js";
+import { Popover as z, PopoverTrigger as D, PopoverContent as K } from "./popover.js";
+import { Field as P } from "./field.js";
+import { Select as U } from "./select.js";
+const N = (i) => i.options.length > 0 && i.value !== i.options[0].value, C = o.forwardRef(
+  ({
+    groups: i,
+    onChange: p,
+    onClearAll: v,
+    title: d = "Filters",
+    triggerLabel: w,
+    align: $ = "end",
+    open: f,
+    defaultOpen: R = !1,
+    onOpenChange: s,
+    className: j,
+    ...k
+  }, c) => {
+    const [E, S] = o.useState(R), a = f ?? E, q = o.useCallback(
+      (e) => {
+        f === void 0 && S(e), s == null || s(e);
+      },
+      [f, s]
+    ), b = o.useRef(null), A = (e) => {
+      b.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
+    }, n = o.useId(), r = i.filter(N).length, h = a || r > 0, x = w ?? d;
+    o.useEffect(() => {
+      if (!a) return;
+      const e = requestAnimationFrame(() => {
+        var l, y;
+        (y = (l = document.getElementById(n)) == null ? void 0 : l.querySelector("[role=combobox]")) == null || y.focus();
+      });
+      return () => cancelAnimationFrame(e);
+    }, [a, n]);
+    const I = () => {
+      var e, l;
+      return (l = (e = b.current) == null ? void 0 : e.querySelector("button")) == null ? void 0 : l.focus();
+    }, B = () => {
+      v ? v() : i.forEach((e) => {
+        N(e) && p(e.id, e.options[0].value);
+      });
+    };
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: A,
+        "data-slot": "filters",
+        "data-state": a ? "open" : "closed",
+        className: u("relative inline-flex", j),
+        ...k,
+        children: /* @__PURE__ */ m(z, { open: a, onOpenChange: q, children: [
+          /* @__PURE__ */ t(D, { children: /* @__PURE__ */ m(
+            F,
+            {
+              type: "button",
+              variant: "outline",
+              size: "icon-sm",
+              "aria-label": r > 0 ? `${x}, ${r} applied` : x,
+              "aria-controls": a ? n : void 0,
+              "data-active": h || void 0,
+              className: u(h && "border-action-primary text-action-primary"),
+              children: [
+                /* @__PURE__ */ t(T, { "aria-hidden": !0 }),
+                r > 0 && /* @__PURE__ */ t(
+                  "span",
+                  {
+                    "aria-hidden": !0,
+                    "data-slot": "filters-count",
+                    className: u(
+                      "pointer-events-none absolute -top-1.5 -right-1.5 inline-flex h-4 min-w-4 items-center justify-center",
+                      "rounded-full bg-action-primary px-1 text-xs leading-none font-medium tabular-nums text-action-primary-foreground"
+                    ),
+                    children: r
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ m(
+            K,
+            {
+              id: n,
+              align: $,
+              "aria-label": d,
+              onKeyDown: (e) => {
+                e.key === "Escape" && I();
+              },
+              className: "flex w-76 min-w-0 flex-col gap-4 p-4 text-m",
+              children: [
+                /* @__PURE__ */ m("div", { className: "flex min-h-5 items-center justify-between gap-4", children: [
+                  /* @__PURE__ */ t("div", { className: "text-l font-medium text-on-white-primary", children: d }),
+                  r > 0 && /* @__PURE__ */ t(
+                    F,
+                    {
+                      type: "button",
+                      variant: "link",
+                      className: "h-auto px-0",
+                      onClick: B,
+                      children: "Clear all"
+                    }
+                  )
+                ] }),
+                i.map((e) => /* @__PURE__ */ t(P, { label: e.label, htmlFor: `${n}-${e.id}`, children: /* @__PURE__ */ t(
+                  U,
+                  {
+                    id: `${n}-${e.id}`,
+                    "aria-label": e.label,
+                    items: e.options,
+                    value: e.value,
+                    onChange: (l) => p(e.id, l)
+                  }
+                ) }, e.id))
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+C.displayName = "Filters";
+export {
+  C as Filters
+};

package/components/index.d.ts

@@ -32,6 +32,7 @@ export * from './date-range-picker';
 export * from './autocomplete';
 export * from './slider';
 export * from './segmented';
+export * from './filters';
 export * from './modal';
 export * from './command-palette';
 export * from './drawer';