@actioneer/ads 1.0.8 → 1.0.9

package/components/chip.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const chipVariants: (props?: ({
-    variant?: "outline" | "solid" | null | undefined;
+    variant?: "outline" | "solid" | "plain" | null | undefined;
     color?: "success" | "warning" | "danger" | "info" | "default" | "primary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ChipInteraction = "actionable" | "non-actionable";
@@ -19,6 +19,7 @@ export interface ChipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
     onClose?: () => void;
     startContent?: React.ReactNode;
     avatar?: React.ReactNode;
+    /** Leading square tone dot. Always on for `variant="plain"`. */
     showDot?: boolean;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement>>;

package/components/chip.js

@@ -1,16 +1,19 @@
 "use client";
-import { jsxs as x, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { jsxs as v, Fragment as h, jsx as e } from "react/jsx-runtime";
 import * as N from "react";
 import { cva as w } from "class-variance-authority";
 import { Close as y } from "../lib/icons.js";
-import { cn as t } from "../lib/cn.js";
+import { cn as i } from "../lib/cn.js";
 const k = w(
   "inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-[4px] border px-2 py-0 text-s font-medium leading-[var(--text-s--line-height)]",
   {
     variants: {
       variant: {
         solid: "",
-        outline: ""
+        outline: "",
+        // Status text for table cells and detail panels: no container, an 8px
+        // tone dot, and a 14px Regular primary label. The dot carries the tone.
+        plain: "h-auto gap-2 rounded-none border-0 bg-transparent px-0 text-m font-normal leading-[var(--text-m--line-height)] text-on-white-primary"
       },
       color: {
         default: "",
@@ -48,46 +51,46 @@ const k = w(
   info: "bg-info"
 }, j = N.forwardRef(
   ({
-    className: g,
-    variant: u = "solid",
-    color: i = "default",
+    className: u,
+    variant: a = "solid",
+    color: o = "default",
     interaction: m,
     isPressable: f = !1,
     onClose: r,
-    startContent: o,
-    avatar: a,
+    startContent: s,
+    avatar: n,
     showDot: p = !1,
-    children: v,
-    ...s
-  }, c) => {
-    const n = r ? "actionable" : m ?? (f ? "actionable" : "non-actionable"), l = n === "actionable" && !r, d = t(
-      k({ variant: u, color: i }),
-      a && "pl-1",
+    children: x,
+    ...c
+  }, l) => {
+    const t = r ? "actionable" : m ?? (f ? "actionable" : "non-actionable"), d = t === "actionable" && !r, g = i(
+      k({ variant: a, color: o }),
+      n && "pl-1",
       r && "pr-1",
-      l && "cursor-pointer select-none outline-none transition-[background,border,color,box-shadow,transform] duration-150 ease-out data-[interaction=actionable]:border-action-primary data-[interaction=actionable]:bg-card data-[interaction=actionable]:text-action-primary-text hover:-translate-y-px hover:bg-action-primary-soft active:translate-y-0 active:scale-[0.97] active:bg-action-primary-soft aria-pressed:border-brand! aria-pressed:bg-action-primary-soft! aria-pressed:text-brand-text! focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:active:scale-100",
-      g
-    ), b = /* @__PURE__ */ x(h, { children: [
-      a && /* @__PURE__ */ e("span", { className: "-ml-0.5 inline-flex shrink-0", children: a }),
-      p && /* @__PURE__ */ e(
+      d && "cursor-pointer select-none outline-none transition-[background,border,color,box-shadow,transform] duration-150 ease-out data-[interaction=actionable]:border-action-primary data-[interaction=actionable]:bg-card data-[interaction=actionable]:text-action-primary-text hover:-translate-y-px hover:bg-action-primary-soft active:translate-y-0 active:scale-[0.97] active:bg-action-primary-soft aria-pressed:border-brand! aria-pressed:bg-action-primary-soft! aria-pressed:text-brand-text! focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:active:scale-100",
+      u
+    ), b = /* @__PURE__ */ v(h, { children: [
+      n && /* @__PURE__ */ e("span", { className: "-ml-0.5 inline-flex shrink-0", children: n }),
+      (p || a === "plain") && /* @__PURE__ */ e(
         "span",
         {
           "aria-hidden": !0,
-          className: t(
-            "size-1.5",
+          className: i(
+            a === "plain" ? "size-2 shrink-0" : "size-1.5",
             "rounded-dot",
-            z[i ?? "default"]
+            z[o ?? "default"]
           )
         }
       ),
-      o && /* @__PURE__ */ e("span", { className: "inline-flex shrink-0 [&_svg]:size-3.5", children: o }),
-      v,
+      s && /* @__PURE__ */ e("span", { className: "inline-flex shrink-0 [&_svg]:size-3.5", children: s }),
+      x,
       r && /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           "aria-label": "Remove",
           onClick: r,
-          className: t(
+          className: i(
             // A 16px container tinted from the chip's own ink so the remove
             // control reads as a button: 10% at rest, 20% on hover/press.
             "inline-flex size-4 shrink-0 items-center justify-center rounded-xs",
@@ -99,23 +102,23 @@ const k = w(
         }
       )
     ] });
-    return l ? /* @__PURE__ */ e(
+    return d ? /* @__PURE__ */ e(
       "button",
       {
-        ref: c,
+        ref: l,
         type: "button",
-        "data-interaction": n,
-        className: d,
-        ...s,
+        "data-interaction": t,
+        className: g,
+        ...c,
         children: b
       }
     ) : /* @__PURE__ */ e(
       "span",
       {
-        ref: c,
-        "data-interaction": n,
-        className: d,
-        ...s,
+        ref: l,
+        "data-interaction": t,
+        className: g,
+        ...c,
         children: b
       }
     );

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