@actioneer/ads 0.6.0 → 0.7.0

package/components/chip.d.ts

@@ -1,13 +1,25 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const chipVariants: (props?: ({
-    variant?: "soft" | "outline" | "solid" | "dot" | null | undefined;
+    variant?: "outline" | "solid" | 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";
 export interface ChipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof chipVariants> {
+    /**
+     * Chips have two interaction types. Actionable chips render as native
+     * buttons for an independent action or setting; non-actionable chips remain
+     * descriptive inline labels. Use `aria-pressed` for a toggle such as
+     * "Alerts on/off". Use tabs or segmented controls for mutually exclusive
+     * selection.
+     */
+    interaction?: ChipInteraction;
+    /** @deprecated Use `interaction="actionable"`. */
+    isPressable?: boolean;
     onClose?: () => void;
     startContent?: React.ReactNode;
     avatar?: React.ReactNode;
+    showDot?: boolean;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement>>;
 export {};

package/components/chip.js

@@ -1,18 +1,16 @@
 "use client";
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import * as f from "react";
-import { cva as u } from "class-variance-authority";
-import { Close as m } from "../lib/icons.js";
-import { cn as o } from "../lib/cn.js";
-const b = u(
-  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-normal whitespace-nowrap",
+import { jsxs as x, Fragment as h, jsx as e } from "react/jsx-runtime";
+import * as N from "react";
+import { cva as y } from "class-variance-authority";
+import { Close as w } from "../lib/icons.js";
+import { cn as i } from "../lib/cn.js";
+const k = y(
+  "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: "",
-        soft: "",
-        outline: "bg-transparent border",
-        dot: "bg-transparent border border-border text-foreground"
+        outline: ""
       },
       color: {
         default: "",
@@ -24,89 +22,104 @@ const b = u(
       }
     },
     compoundVariants: [
-      // solid
-      { variant: "solid", color: "default", className: "bg-fill text-fill-foreground" },
-      { variant: "solid", color: "primary", className: "bg-foreground text-background" },
-      { variant: "solid", color: "success", className: "bg-success text-success-foreground" },
-      { variant: "solid", color: "warning", className: "bg-warning text-warning-foreground" },
-      { variant: "solid", color: "danger", className: "bg-danger text-danger-foreground" },
-      { variant: "solid", color: "info", className: "bg-info text-info-foreground" },
-      // soft
-      { variant: "soft", color: "default", className: "bg-muted text-muted-foreground" },
-      { variant: "soft", color: "primary", className: "bg-fill text-fill-foreground" },
-      { variant: "soft", color: "success", className: "bg-success-50 text-success-700" },
-      { variant: "soft", color: "warning", className: "bg-warning-50 text-warning-700" },
-      { variant: "soft", color: "danger", className: "bg-danger-50 text-danger-700" },
-      { variant: "soft", color: "info", className: "bg-info-50 text-info-700" },
+      // solid — the default tinted surface
+      { variant: "solid", color: "default", className: "border-ng6 bg-ng2 text-muted-foreground" },
+      { variant: "solid", color: "primary", className: "border-ng5 bg-fill text-fill-foreground" },
+      { variant: "solid", color: "success", className: "border-success-400 bg-success-50 text-success-700" },
+      { variant: "solid", color: "warning", className: "border-warning-300 bg-warning-50 text-warning-700" },
+      { variant: "solid", color: "danger", className: "border-danger-300 bg-danger-50 text-danger-700" },
+      { variant: "solid", color: "info", className: "border-info-300 bg-info-50 text-info-700" },
       // outline
-      { variant: "outline", color: "default", className: "border-border-strong text-foreground" },
-      { variant: "outline", color: "primary", className: "border-border-strong text-foreground" },
-      { variant: "outline", color: "success", className: "border-success-100 text-success-700" },
-      { variant: "outline", color: "warning", className: "border-warning-100 text-warning-700" },
-      { variant: "outline", color: "danger", className: "border-danger-100 text-danger-700" },
-      { variant: "outline", color: "info", className: "border-info-100 text-info-700" }
+      { variant: "outline", color: "default", className: "border-border-strong bg-card text-foreground" },
+      { variant: "outline", color: "primary", className: "border-border-strong bg-card text-foreground" },
+      { variant: "outline", color: "success", className: "border-success-400 bg-success-50 text-success-700" },
+      { variant: "outline", color: "warning", className: "border-warning-400 bg-warning-50 text-warning-700" },
+      { variant: "outline", color: "danger", className: "border-danger-400 bg-danger-50 text-danger-700" },
+      { variant: "outline", color: "info", className: "border-info-400 bg-info-50 text-info-700" }
     ],
-    defaultVariants: { variant: "soft", color: "default" }
+    defaultVariants: { variant: "solid", color: "default" }
   }
-), p = {
+), z = {
   default: "bg-muted-foreground",
   primary: "bg-foreground",
   success: "bg-success",
   warning: "bg-warning",
   danger: "bg-danger",
   info: "bg-info"
-}, x = f.forwardRef(
+}, j = N.forwardRef(
   ({
-    className: i,
-    variant: n = "soft",
-    color: s = "default",
-    onClose: e,
+    className: u,
+    variant: b = "solid",
+    color: o = "default",
+    interaction: f,
+    isPressable: m = !1,
+    onClose: r,
     startContent: t,
     avatar: a,
-    children: l,
-    ...c
-  }, d) => /* @__PURE__ */ g(
-    "span",
-    {
-      ref: d,
-      className: o(
-        b({ variant: n, color: s }),
-        a && "pl-1",
-        e && "pr-1.5",
-        i
+    showDot: p = !1,
+    children: v,
+    ...s
+  }, c) => {
+    const n = r ? "actionable" : f ?? (m ? "actionable" : "non-actionable"), l = n === "actionable" && !r, d = i(
+      k({ variant: b, color: o }),
+      a && "pl-1",
+      r && "pr-1.5",
+      l && "cursor-pointer select-none shadow-100 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 hover:shadow-200 active:translate-y-0 active:scale-[0.97] active:bg-action-primary-soft aria-pressed:border-success-400! aria-pressed:bg-success-50! aria-pressed:text-success-700! 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
+    ), g = /* @__PURE__ */ x(h, { children: [
+      a && /* @__PURE__ */ e("span", { className: "-ml-0.5 inline-flex shrink-0", children: a }),
+      p && /* @__PURE__ */ e(
+        "span",
+        {
+          "aria-hidden": !0,
+          className: i(
+            "size-1.5",
+            "rounded-dot",
+            z[o ?? "default"]
+          )
+        }
       ),
-      ...c,
-      children: [
-        a && /* @__PURE__ */ r("span", { className: "-ml-0.5 inline-flex shrink-0", children: a }),
-        n === "dot" && /* @__PURE__ */ r(
-          "span",
-          {
-            "aria-hidden": !0,
-            className: o("size-2 rounded-dot", p[s ?? "default"])
-          }
-        ),
-        t && /* @__PURE__ */ r("span", { className: "inline-flex shrink-0 [&_svg]:size-4", children: t }),
-        l,
-        e && /* @__PURE__ */ r(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Remove",
-            onClick: e,
-            className: o(
-              "inline-flex size-4 shrink-0 items-center justify-center rounded-full",
-              "opacity-60 transition-opacity hover:opacity-100",
-              "outline-none focus-visible:ring-3 focus-visible:ring-ring",
-              "[&_svg]:size-3"
-            ),
-            children: /* @__PURE__ */ r(m, { "aria-hidden": !0 })
-          }
-        )
-      ]
-    }
-  )
+      t && /* @__PURE__ */ e("span", { className: "inline-flex shrink-0 [&_svg]:size-3.5", children: t }),
+      v,
+      r && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Remove",
+          onClick: r,
+          className: i(
+            "inline-flex size-4 shrink-0 items-center justify-center rounded-full",
+            "opacity-60 transition-opacity hover:opacity-100",
+            "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+            "[&_svg]:size-3"
+          ),
+          children: /* @__PURE__ */ e(w, { "aria-hidden": !0 })
+        }
+      )
+    ] });
+    return l ? /* @__PURE__ */ e(
+      "button",
+      {
+        ref: c,
+        type: "button",
+        "data-interaction": n,
+        className: d,
+        ...s,
+        children: g
+      }
+    ) : /* @__PURE__ */ e(
+      "span",
+      {
+        ref: c,
+        "data-interaction": n,
+        className: d,
+        ...s,
+        children: g
+      }
+    );
+  }
 );
-x.displayName = "Chip";
+j.displayName = "Chip";
 export {
-  x as Chip
+  j as Chip
 };

package/components/collection-header.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface CollectionHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /** Product or destination icon rendered before the title. */
+    icon: React.ReactNode;
+    /** Collection or top-level destination title. */
+    title: React.ReactNode;
+    /** Optional compact metadata rendered beside the title. */
+    meta?: React.ReactNode;
+    /** Search and page-level actions rendered at the trailing edge. */
+    actions?: React.ReactNode;
+}
+/**
+ * Canonical header for top-level collections and sidebar destinations.
+ * It aligns with the sidebar brand row, carries the destination icon, and
+ * owns the subtle bottom separator used by ADS product shells.
+ */
+export declare const CollectionHeader: React.ForwardRefExoticComponent<CollectionHeaderProps & React.RefAttributes<HTMLElement>>;

package/components/collection-header.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import * as c from "react";
+import { cn as d } from "../lib/cn.js";
+const f = c.forwardRef(
+  ({ className: n, icon: s, title: i, meta: r, actions: t, ...l }, o) => /* @__PURE__ */ a(
+    "header",
+    {
+      ref: o,
+      className: d(
+        "relative flex h-(--sidebar-header) shrink-0 items-center justify-between gap-4 px-6",
+        "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px",
+        "after:bg-[linear-gradient(to_right,var(--color-border)_0%,transparent_100%)] after:content-['']",
+        n
+      ),
+      ...l,
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+          /* @__PURE__ */ e("span", { className: "shrink-0 text-foreground [&_svg]:size-4", "aria-hidden": "true", children: s }),
+          /* @__PURE__ */ e("h1", { className: "truncate text-base font-semibold text-foreground", children: i }),
+          r ? /* @__PURE__ */ e("span", { className: "shrink-0 text-xs tabular-nums text-secondary", children: r }) : null
+        ] }),
+        t ? /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-2", children: t }) : null
+      ]
+    }
+  )
+);
+f.displayName = "CollectionHeader";
+export {
+  f as CollectionHeader
+};

package/components/connector-card.d.ts

@@ -4,9 +4,9 @@ import * as React from "react";
  * screen. Structure: identity row (logo + name + schema + connection status),
  * a tinted health strip, and a recessed footer with a usage metric + action.
  *
- * On-principle: elevation marks actionability — the card carries
- * `shadow-elevation` only when clickable (`onOpen`); otherwise it sits flat,
- * delineated by fill. The health strip uses a soft status tint and the footer
+ * The clickable state retains the flat `shadow-elevation` compatibility hook;
+ * add a numbered elevation utility only after an explicit user request. The
+ * health strip uses a soft status tint and the footer
  * steps down to `bg-muted`.
  */
 /**
@@ -54,9 +54,9 @@ export interface ConnectionStatusProps {
     label?: string;
 }
 /**
- * Square status dot + muted sync label — the connection-state language of
- * the connector cards. Exported so detail screens render the same status
- * the same way.
+ * Muted sync label for healthy connections; exceptional disconnected states
+ * retain the stronger status-chip treatment. Exported so detail screens render
+ * the same status the same way.
  */
 export declare function ConnectionStatus({ connected, lastSync, label: labelOverride, }: ConnectionStatusProps): React.JSX.Element;
 export declare const ConnectorCard: React.ForwardRefExoticComponent<ConnectorCardProps & React.RefAttributes<HTMLDivElement>>;

package/components/connector-card.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsxs as r, Fragment as f, jsx as t } from "react/jsx-runtime";
-import * as h from "react";
-import { Database as x, ChevronRight as b } from "../lib/icons.js";
+import * as g from "react";
+import { Chip as x } from "./chip.js";
+import { Database as b, ChevronRight as p } from "../lib/icons.js";
 import { cn as o } from "../lib/cn.js";
 const u = {
   issue: { band: "bg-linear-to-r from-danger-50 to-danger-50/0" },
   healthy: { band: "bg-linear-to-r from-success-50 to-success-50/0" }
 };
-function p(s) {
+function y(s) {
   const e = /* @__PURE__ */ new Date();
   if (s.toDateString() === e.toDateString())
     return `Last sync at ${s.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}`;
@@ -24,27 +25,27 @@ function p(s) {
   }
   return `Last sync from ${a}`;
 }
-function y({
+function N({
   connected: s,
   lastSync: e,
   label: n
 }) {
-  const a = n ?? (s ? e ? p(e) : "Connected" : "Disconnected");
-  return /* @__PURE__ */ r("span", { className: "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-xs text-tertiary", children: [
-    /* @__PURE__ */ t(
-      "span",
-      {
-        "aria-hidden": !0,
-        className: o(
-          "size-2 rounded-dot",
-          s ? "bg-success" : "bg-danger"
-        )
-      }
-    ),
+  const a = n ?? (s ? e ? y(e) : "Connected" : "Disconnected");
+  return s ? /* @__PURE__ */ r("span", { className: "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-xs text-tertiary", children: [
+    /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "size-2 rounded-dot bg-success" }),
     a
-  ] });
+  ] }) : /* @__PURE__ */ t(
+    x,
+    {
+      variant: "solid",
+      color: "danger",
+      showDot: !0,
+      className: "shrink-0",
+      children: a
+    }
+  );
 }
-function N({ strip: s }) {
+function v({ strip: s }) {
   const e = u[s.tint] ?? u.issue;
   return /* @__PURE__ */ t(
     "div",
@@ -65,10 +66,10 @@ function N({ strip: s }) {
     }
   );
 }
-const v = h.forwardRef(
+const w = g.forwardRef(
   ({ className: s, card: e, onOpen: n, ...a }, i) => {
     var m;
-    const c = !!n, g = ((m = e.action) == null ? void 0 : m.tone) === "reconnect", l = /* @__PURE__ */ r(f, { children: [
+    const c = !!n, h = ((m = e.action) == null ? void 0 : m.tone) === "reconnect", l = /* @__PURE__ */ r(f, { children: [
       /* @__PURE__ */ r("div", { className: "rounded-t-xl p-[var(--card-padding)]", children: [
         /* @__PURE__ */ r("div", { className: "mb-5 flex items-center gap-3.5", children: [
           e.logo ? /* @__PURE__ */ t(
@@ -78,12 +79,12 @@ const v = h.forwardRef(
               alt: "",
               className: "size-10 shrink-0 rounded-md object-contain"
             }
-          ) : /* @__PURE__ */ t("span", { className: "grid size-10 shrink-0 place-items-center rounded-md bg-muted text-secondary", children: /* @__PURE__ */ t(x, { className: "size-5", "aria-hidden": !0 }) }),
+          ) : /* @__PURE__ */ t("span", { className: "grid size-10 shrink-0 place-items-center rounded-md bg-muted text-secondary", children: /* @__PURE__ */ t(b, { className: "size-5", "aria-hidden": !0 }) }),
           /* @__PURE__ */ r("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ r("div", { className: "flex items-baseline justify-between gap-3", children: [
               /* @__PURE__ */ t("div", { className: "min-w-0 truncate text-base font-medium leading-tight text-foreground", children: e.name }),
               /* @__PURE__ */ t(
-                y,
+                N,
                 {
                   connected: e.connected,
                   lastSync: e.lastSync
@@ -93,16 +94,14 @@ const v = h.forwardRef(
             e.schema && /* @__PURE__ */ t("div", { className: "mt-0.5 truncate text-xs tabular-nums text-tertiary", children: e.schema })
           ] })
         ] }),
-        /* @__PURE__ */ t(N, { strip: e.strip })
+        /* @__PURE__ */ t(v, { strip: e.strip })
       ] }),
       /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-3 rounded-b-xl bg-ink-100 px-[var(--card-padding)] py-3", children: [
         /* @__PURE__ */ t(
           "span",
           {
-            className: o(
-              "min-w-0 truncate text-xs",
-              "text-secondary"
-            ),
+            className: "min-w-0 truncate text-xs",
+            style: { color: "var(--text-secondary)" },
             children: e.footer.text
           }
         ),
@@ -111,11 +110,11 @@ const v = h.forwardRef(
           {
             className: o(
               "inline-flex shrink-0 items-center gap-0.5 text-xs font-normal",
-              g ? "text-danger" : "text-foreground"
+              h ? "text-danger" : "text-foreground"
             ),
             children: [
               e.action.label,
-              /* @__PURE__ */ t(b, { strokeWidth: 2, className: "size-3.5" })
+              /* @__PURE__ */ t(p, { strokeWidth: 2, className: "size-3.5" })
             ]
           }
         )
@@ -147,8 +146,8 @@ const v = h.forwardRef(
     ) : /* @__PURE__ */ t("div", { ref: i, className: d, ...a, children: l });
   }
 );
-v.displayName = "ConnectorCard";
+w.displayName = "ConnectorCard";
 export {
-  y as ConnectionStatus,
-  v as ConnectorCard
+  N as ConnectionStatus,
+  w as ConnectorCard
 };

package/components/date-range-picker.d.ts

@@ -10,6 +10,7 @@ export interface DateRangePickerProps {
     label?: React.ReactNode;
     description?: React.ReactNode;
     errorMessage?: React.ReactNode;
+    /** @deprecated Date range fields use a single 32px control height. */
     size?: "sm" | "md";
     disabled?: boolean;
     minValue?: string;
@@ -22,4 +23,4 @@ export interface DateRangePickerProps {
  * React Aria owns keyboard, focus, locale, and range-selection behavior while
  * ADS owns every visual token, state, radius, and elevation.
  */
-export declare function DateRangePicker({ value, defaultValue, onChange, label, description, errorMessage, size, disabled, minValue, maxValue, className, "aria-label": ariaLabel, }: DateRangePickerProps): React.JSX.Element;
+export declare function DateRangePicker({ value, defaultValue, onChange, label, description, errorMessage, disabled, minValue, maxValue, className, "aria-label": ariaLabel, }: DateRangePickerProps): React.JSX.Element;