@actioneer/ads 0.6.0 → 0.8.0

package/components/date-range-picker.js

@@ -1,176 +1,212 @@
 "use client";
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import * as x from "react";
-import { parseDate as u } from "@internationalized/date";
-import { DateRangePicker as H, Label as I, Group as L, DateInput as b, DateSegment as p, Button as l, Text as h, Popover as O, Dialog as T, RangeCalendar as $, Heading as q, CalendarGrid as A, CalendarGridHeader as E, CalendarHeaderCell as F, CalendarGridBody as J, CalendarCell as K } from "react-aria-components";
-import { Calendar as M, ChevronLeft as Q, ChevronRight as U } from "../lib/icons.js";
-import { cn as n } from "../lib/cn.js";
-function N(r) {
-  if (!(r != null && r.start) || !r.end) return null;
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import * as c from "react";
+import { parseDate as p } from "@internationalized/date";
+import { I18nProvider as L, DateRangePicker as A, Label as I, Group as J, DateInput as g, DateSegment as v, Button as m, Text as N, Popover as O, Dialog as E, RangeCalendar as T, Heading as Y, CalendarGrid as F, CalendarGridHeader as _, CalendarHeaderCell as $, CalendarGridBody as q, CalendarCell as K } from "react-aria-components";
+import { Calendar as Q, ChevronLeft as U, ChevronRight as W } from "../lib/icons.js";
+import { cn as o } from "../lib/cn.js";
+import { interactive as X } from "../lib/interactive.js";
+function w(e) {
+  if (!(e != null && e.start) || !e.end) return null;
   try {
     return {
-      start: u(r.start),
-      end: u(r.end)
+      start: p(e.start),
+      end: p(e.end)
     };
   } catch {
     return null;
   }
 }
-function y(r) {
-  if (r)
+function D(e) {
+  if (e)
     try {
-      return u(r);
+      return p(e);
     } catch {
       return;
     }
 }
-function W(r) {
-  return r ? {
-    start: r.start.toString(),
-    end: r.end.toString()
+function Z(e) {
+  return e ? {
+    start: e.start.toString(),
+    end: e.end.toString()
   } : null;
 }
-const X = {
-  sm: {
-    group: "min-h-8 rounded-sm text-xs",
-    trigger: "size-7 rounded-sm"
-  },
-  md: {
-    group: "min-h-10 rounded-md text-sm",
-    trigger: "size-8 rounded-sm"
-  }
-};
-function te({
-  value: r,
-  defaultValue: m,
-  onChange: d,
-  label: c,
-  description: g,
-  errorMessage: s,
-  size: v = "md",
-  disabled: w,
-  minValue: z,
-  maxValue: k,
-  className: D,
-  "aria-label": C
+const ee = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function S(e) {
+  return e.type === "literal" ? " " : e.value == null ? e.type === "day" ? "DD" : e.type === "month" ? "MMM" : e.type === "year" ? "YY" : e.text : e.type === "day" ? String(e.value).padStart(2, "0") : e.type === "month" ? ee[e.value - 1] ?? e.text : e.type === "year" ? String(e.value).slice(-2) : e.text;
+}
+function se({
+  value: e,
+  defaultValue: f,
+  onChange: u,
+  label: x,
+  description: h,
+  errorMessage: n,
+  disabled: z,
+  minValue: k,
+  maxValue: B,
+  className: C,
+  "aria-label": R
 }) {
-  const f = X[v], R = x.useMemo(() => N(r), [r]), j = x.useMemo(
-    () => N(m),
-    [m]
+  const l = c.useMemo(() => w(e), [e]), b = c.useMemo(
+    () => w(f),
+    [f]
+  ), [j, y] = c.useState(
+    !!(l ?? b)
   );
-  return /* @__PURE__ */ a(
-    H,
+  c.useEffect(() => {
+    e !== void 0 && y(!!l);
+  }, [l, e]);
+  const V = (r) => {
+    const a = Z(r);
+    y(!!a), u == null || u(a);
+  };
+  return /* @__PURE__ */ t(L, { locale: "en-GB", children: /* @__PURE__ */ d(
+    A,
     {
-      "aria-label": C,
-      className: n("flex w-full flex-col gap-1.5", D),
-      value: r === void 0 ? void 0 : R,
-      defaultValue: j ?? void 0,
-      isDisabled: w,
-      minValue: y(z),
-      maxValue: y(k),
-      isInvalid: !!s,
-      onChange: (t) => d == null ? void 0 : d(W(t)),
+      "aria-label": R,
+      className: o("flex w-full flex-col gap-1.5", C),
+      value: e === void 0 ? void 0 : l,
+      defaultValue: b ?? void 0,
+      isDisabled: z,
+      minValue: D(k),
+      maxValue: D(B),
+      isInvalid: !!n,
+      onChange: V,
       children: [
-        c && /* @__PURE__ */ e(I, { className: "text-xs font-medium text-foreground", children: c }),
-        /* @__PURE__ */ a(
-          L,
+        x && /* @__PURE__ */ t(I, { className: "text-m font-medium text-foreground", children: x }),
+        /* @__PURE__ */ d(
+          J,
           {
-            className: n(
-              "flex w-full items-center gap-1 border border-input bg-background px-2 text-foreground shadow-xs outline-none transition-[border-color,box-shadow,background-color]",
-              "hover:bg-muted/40 focus-within:border-ring focus-within:ring-3 focus-within:ring-ring",
-              "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-              "data-[invalid]:border-danger data-[invalid]:ring-danger/20",
-              f.group
+            "aria-invalid": n ? !0 : void 0,
+            "data-value-set": j || void 0,
+            className: o(
+              "group/field flex h-8 w-full items-center rounded-md border bg-elevated px-3 text-m font-medium text-on-white-tertiary outline-none",
+              "hover:text-on-white-secondary focus-within:text-on-white-primary",
+              "transition-[border-color,box-shadow]",
+              X({
+                on: "within",
+                color: "brand",
+                intensity: "medium",
+                animate: !0
+              }),
+              "[--glow-border-rest:var(--input)]",
+              "[--glow-border-active:var(--field-focus)]",
+              "[--glow-inset:var(--inner-glow-field)]",
+              "data-[value-set]:text-on-white-primary!",
+              "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
             ),
             children: [
-              /* @__PURE__ */ e(b, { slot: "start", className: "flex min-w-0 flex-1 items-center", children: (t) => /* @__PURE__ */ e(
-                p,
+              /* @__PURE__ */ t(g, { slot: "start", className: "flex shrink-0 items-center", children: (r) => /* @__PURE__ */ t(
+                v,
                 {
-                  segment: t,
-                  className: ({ isFocused: i, isPlaceholder: o }) => n(
-                    "rounded-xs px-0.5 tabular-nums outline-none",
-                    o && "text-muted-foreground",
-                    i && "bg-primary text-primary-foreground"
-                  )
+                  segment: r,
+                  className: ({ isFocused: a, isPlaceholder: i, type: s }) => o(
+                    "tabular-nums outline-none",
+                    s !== "literal" && "-mx-0.5 cursor-text rounded-xs px-0.5 transition-colors duration-150 hover:bg-action-primary-soft hover:text-action-primary-text",
+                    i && "text-muted-foreground",
+                    a && "bg-action-primary-soft text-action-primary-text"
+                  ),
+                  children: S(r)
                 }
               ) }),
-              /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "shrink-0 text-muted-foreground", children: "–" }),
-              /* @__PURE__ */ e(b, { slot: "end", className: "flex min-w-0 flex-1 items-center", children: (t) => /* @__PURE__ */ e(
-                p,
+              /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "shrink-0", children: " - " }),
+              /* @__PURE__ */ t(g, { slot: "end", className: "flex shrink-0 items-center", children: (r) => /* @__PURE__ */ t(
+                v,
                 {
-                  segment: t,
-                  className: ({ isFocused: i, isPlaceholder: o }) => n(
-                    "rounded-xs px-0.5 tabular-nums outline-none",
-                    o && "text-muted-foreground",
-                    i && "bg-primary text-primary-foreground"
-                  )
+                  segment: r,
+                  className: ({ isFocused: a, isPlaceholder: i, type: s }) => o(
+                    "tabular-nums outline-none",
+                    s !== "literal" && "-mx-0.5 cursor-text rounded-xs px-0.5 transition-colors duration-150 hover:bg-action-primary-soft hover:text-action-primary-text",
+                    i && "text-muted-foreground",
+                    a && "bg-action-primary-soft text-action-primary-text"
+                  ),
+                  children: S(r)
                 }
               ) }),
-              /* @__PURE__ */ e(
-                l,
+              /* @__PURE__ */ t(
+                m,
                 {
                   "aria-label": "Open calendar",
-                  className: n(
-                    "ml-auto inline-flex shrink-0 items-center justify-center border border-transparent text-muted-foreground outline-none transition-colors",
-                    "hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring data-[pressed]:bg-muted",
-                    f.trigger
+                  className: o(
+                    "ml-auto inline-flex shrink-0 cursor-pointer items-center justify-center border border-transparent text-muted-foreground outline-none",
+                    "transition-[background,color,transform] duration-150 ease-out",
+                    "group-hover/field:text-foreground group-focus-within/field:text-g12!",
+                    "hover:bg-action-primary-soft hover:text-action-primary-text!",
+                    "data-[pressed]:scale-[0.97] data-[pressed]:bg-action-primary-soft data-[pressed]:text-action-primary-text!",
+                    "motion-reduce:data-[pressed]:scale-100",
+                    "size-7 rounded-sm"
                   ),
-                  children: /* @__PURE__ */ e(M, { className: "size-4" })
+                  children: /* @__PURE__ */ t(Q, { className: "size-4" })
                 }
               )
             ]
           }
         ),
-        g && !s && /* @__PURE__ */ e(h, { slot: "description", className: "text-xs text-muted-foreground", children: g }),
-        s && /* @__PURE__ */ e(h, { slot: "errorMessage", className: "text-xs text-danger", children: s }),
-        /* @__PURE__ */ e(
+        h && !n && /* @__PURE__ */ t(N, { slot: "description", className: "text-m font-normal text-muted-foreground", children: h }),
+        n && /* @__PURE__ */ t(N, { slot: "errorMessage", className: "text-m font-normal text-danger", children: n }),
+        /* @__PURE__ */ t(
           O,
           {
             placement: "bottom end",
             offset: 6,
-            className: "z-50 w-72 rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-elevation outline-none entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95",
-            children: /* @__PURE__ */ e(T, { className: "outline-none", children: /* @__PURE__ */ a($, { className: "w-full", visibleDuration: { months: 1 }, children: [
-              /* @__PURE__ */ a("header", { className: "mb-3 flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ e(
-                  l,
+            className: "z-50 w-72 rounded-md border border-input bg-popover p-3 text-popover-foreground shadow-elevation outline-none entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95",
+            children: /* @__PURE__ */ t(E, { className: "outline-none", children: /* @__PURE__ */ d(T, { className: "w-full", visibleDuration: { months: 1 }, children: [
+              /* @__PURE__ */ d("header", { className: "mb-3 flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ t(
+                  m,
                   {
                     slot: "previous",
-                    className: "inline-flex size-8 items-center justify-center rounded-sm border border-input bg-background text-foreground outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring disabled:opacity-40",
-                    children: /* @__PURE__ */ e(Q, { className: "size-4" })
+                    className: "inline-flex size-8 cursor-pointer items-center justify-center rounded-sm border border-input bg-elevated text-foreground outline-none transition-[background,border,color,transform] duration-150 ease-out hover:border-action-primary hover:bg-action-primary-soft hover:text-action-primary-text data-[pressed]:scale-[0.97] data-[pressed]:border-action-primary data-[pressed]:bg-action-primary-soft data-[pressed]:text-action-primary-text focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 motion-reduce:data-[pressed]:scale-100",
+                    children: /* @__PURE__ */ t(U, { className: "size-4" })
                   }
                 ),
-                /* @__PURE__ */ e(q, { className: "text-sm font-semibold" }),
-                /* @__PURE__ */ e(
-                  l,
+                /* @__PURE__ */ t(Y, { className: "text-sm font-semibold" }),
+                /* @__PURE__ */ t(
+                  m,
                   {
                     slot: "next",
-                    className: "inline-flex size-8 items-center justify-center rounded-sm border border-input bg-background text-foreground outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring disabled:opacity-40",
-                    children: /* @__PURE__ */ e(U, { className: "size-4" })
+                    className: "inline-flex size-8 cursor-pointer items-center justify-center rounded-sm border border-input bg-elevated text-foreground outline-none transition-[background,border,color,transform] duration-150 ease-out hover:border-action-primary hover:bg-action-primary-soft hover:text-action-primary-text data-[pressed]:scale-[0.97] data-[pressed]:border-action-primary data-[pressed]:bg-action-primary-soft data-[pressed]:text-action-primary-text focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 motion-reduce:data-[pressed]:scale-100",
+                    children: /* @__PURE__ */ t(W, { className: "size-4" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ a(A, { weekdayStyle: "short", className: "w-full border-separate border-spacing-0.5", children: [
-                /* @__PURE__ */ e(E, { children: (t) => /* @__PURE__ */ e(F, { className: "h-7 text-center text-xs font-medium text-muted-foreground", children: t }) }),
-                /* @__PURE__ */ e(J, { children: (t) => /* @__PURE__ */ e(
+              /* @__PURE__ */ d(F, { weekdayStyle: "short", className: "w-full border-separate border-spacing-0.5", children: [
+                /* @__PURE__ */ t(_, { children: (r) => /* @__PURE__ */ t($, { className: "h-7 text-center text-xs font-medium text-muted-foreground", children: r }) }),
+                /* @__PURE__ */ t(q, { children: (r) => /* @__PURE__ */ t(
                   K,
                   {
-                    date: t,
+                    date: r,
                     className: ({
-                      isDisabled: i,
-                      isFocusVisible: o,
-                      isOutsideMonth: B,
+                      isDisabled: a,
+                      isFocusVisible: i,
+                      isOutsideMonth: s,
                       isSelected: G,
-                      isSelectionEnd: P,
-                      isSelectionStart: S,
-                      isUnavailable: V
-                    }) => n(
-                      "relative flex size-8 items-center justify-center rounded-sm text-xs tabular-nums outline-none transition-colors",
-                      "hover:bg-muted",
-                      G && "bg-muted font-medium text-foreground",
-                      (S || P) && "bg-primary text-primary-foreground hover:bg-primary",
-                      B && "text-muted-foreground/45",
-                      (i || V) && "pointer-events-none text-muted-foreground/35 line-through",
-                      o && "ring-3 ring-ring"
+                      isSelectionEnd: H,
+                      isSelectionStart: M,
+                      isUnavailable: P
+                    }) => o(
+                      "relative flex size-8 cursor-pointer items-center justify-center rounded-sm text-xs tabular-nums outline-none transition-colors duration-150",
+                      "hover:bg-action-primary-soft hover:text-action-primary-text",
+                      "data-[pressed]:bg-action-primary-soft data-[pressed]:text-action-primary-text",
+                      G && "bg-action-primary-soft font-medium text-action-primary-text",
+                      (M || H) && "bg-action-primary text-action-primary-foreground hover:bg-action-primary-hover hover:text-action-primary-foreground",
+                      s && "text-muted-foreground/45",
+                      (a || P) && "pointer-events-none cursor-default text-muted-foreground/35 line-through",
+                      i && "ring-3 ring-ring"
                     )
                   }
                 ) })
@@ -180,8 +216,8 @@ function te({
         )
       ]
     }
-  );
+  ) });
 }
 export {
-  te as DateRangePicker
+  se as DateRangePicker
 };

package/components/divider.js

@@ -1,69 +1,69 @@
 "use client";
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import * as k from "react";
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import * as b from "react";
 import { cn as e } from "../lib/cn.js";
-const p = "linear-gradient(to right, black, transparent)", g = "linear-gradient(to bottom, black, transparent)", u = k.forwardRef(
+const p = "linear-gradient(to right, var(--color-wg12), transparent)", g = "linear-gradient(to bottom, var(--color-wg12), transparent)", v = b.forwardRef(
   ({
-    className: n,
+    className: o,
     orientation: m = "horizontal",
-    variant: b = "primary",
+    variant: x = "primary",
     fade: c = !1,
     label: d,
-    style: o,
+    style: n,
     ...i
   }, s) => {
-    const x = b === "secondary", a = m === "vertical", t = x ? a ? "w-px [background-image:linear-gradient(to_bottom,var(--color-border)_50%,transparent_50%)] [background-size:1px_12px] [background-repeat:repeat-y]" : "h-px [background-image:linear-gradient(to_right,var(--color-border)_50%,transparent_50%)] [background-size:12px_1px] [background-repeat:repeat-x]" : a ? "w-px bg-border" : "h-px bg-border", l = c ? {
-      WebkitMaskImage: a ? g : p,
-      maskImage: a ? g : p
+    const f = x === "secondary", r = m === "vertical", t = f ? r ? "w-px [background-image:linear-gradient(to_bottom,var(--color-border)_50%,transparent_50%)] [background-size:1px_12px] [background-repeat:repeat-y]" : "h-px [background-image:linear-gradient(to_right,var(--color-border)_50%,transparent_50%)] [background-size:12px_1px] [background-repeat:repeat-x]" : r ? "w-px bg-border" : "h-px bg-border", l = c ? {
+      WebkitMaskImage: r ? g : p,
+      maskImage: r ? g : p
     } : void 0;
-    return a ? /* @__PURE__ */ r(
+    return r ? /* @__PURE__ */ a(
       "div",
       {
         ref: s,
         role: "separator",
         "aria-orientation": "vertical",
-        className: e("h-full self-stretch", t, n),
-        style: { ...l, ...o },
+        className: e("h-full self-stretch", t, o),
+        style: { ...l, ...n },
         ...i
       }
-    ) : d != null ? /* @__PURE__ */ f(
+    ) : d != null ? /* @__PURE__ */ u(
       "div",
       {
         ref: s,
         role: "separator",
         "aria-orientation": "horizontal",
-        className: e("flex items-center gap-3 w-full", n),
-        style: o,
+        className: e("flex items-center gap-3 w-full", o),
+        style: n,
         ...i,
         children: [
-          /* @__PURE__ */ r("span", { className: e("flex-1", t), style: l }),
-          /* @__PURE__ */ r("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: d }),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ a("span", { className: e("flex-1", t), style: l }),
+          /* @__PURE__ */ a("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: d }),
+          /* @__PURE__ */ a(
             "span",
             {
               className: e("flex-1", t),
               style: c ? {
-                WebkitMaskImage: "linear-gradient(to left, black, transparent)",
-                maskImage: "linear-gradient(to left, black, transparent)"
+                WebkitMaskImage: "linear-gradient(to left, var(--color-wg12), transparent)",
+                maskImage: "linear-gradient(to left, var(--color-wg12), transparent)"
               } : void 0
             }
           )
         ]
       }
-    ) : /* @__PURE__ */ r(
+    ) : /* @__PURE__ */ a(
       "div",
       {
         ref: s,
         role: "separator",
         "aria-orientation": "horizontal",
-        className: e("w-full", t, n),
-        style: { ...l, ...o },
+        className: e("w-full", t, o),
+        style: { ...l, ...n },
         ...i
       }
     );
   }
 );
-u.displayName = "Divider";
+v.displayName = "Divider";
 export {
-  u as Divider
+  v as Divider
 };

package/components/drawer.d.ts

@@ -2,13 +2,17 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const panelVariants: (props?: ({
     side?: "bottom" | "left" | "right" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "xl" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface DrawerProps extends VariantProps<typeof panelVariants> {
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    /** Whether Escape and the built-in close button can dismiss the drawer. */
+    dismissible?: boolean;
     /** Accessible label for the drawer landmark. */
     "aria-label": string;
+    /** Optional classes for the inline animation slot around the panel. */
+    containerClassName?: string;
     className?: string;
     children: React.ReactNode;
 }
@@ -55,7 +59,7 @@ export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size,
  * If the panel doesn't read, fix the ground; never add a border or shadow to
  * force it (that fights principle 1).
  */
-export declare function Drawer({ open, onOpenChange, side: sideProp, size, className, children, "aria-label": ariaLabel, }: DrawerProps): React.JSX.Element;
+export declare function Drawer({ open, onOpenChange, dismissible, side: sideProp, size, containerClassName, className, children, "aria-label": ariaLabel, }: DrawerProps): React.JSX.Element;
 /** @deprecated Alias for `Drawer` — the canonical drawer is now the inline
  *  variant. Kept for any code still importing `InlineDrawer`. */
 export declare const InlineDrawer: typeof Drawer;