@actioneer/ads 0.1.0

package/components/segmented.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as n, jsxs as b } from "react/jsx-runtime";
+import * as d from "react";
+import { MotionConfig as v, motion as h } from "motion/react";
+import { cva as l } from "class-variance-authority";
+import { cn as c } from "../lib/cn.js";
+import { EASE_OUT as w } from "../lib/motion.js";
+const y = l(
+  // Borderless muted track — matches the demo's tab switcher (the pill
+  // provides the definition; a stroke around the track read as a second,
+  // heavier control).
+  "inline-flex items-center gap-1 rounded-lg bg-muted p-1",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-xs",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), k = l(
+  c(
+    // The active pill is a shared motion thumb that SLIDES between options
+    // (layoutId), so the option itself only carries text color.
+    "relative inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium select-none",
+    "transition-colors duration-(--duration-fast) cursor-pointer",
+    "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ),
+  {
+    variants: {
+      size: {
+        sm: "h-6 px-2.5",
+        md: "h-8 px-3",
+        lg: "h-9 px-4"
+      },
+      selected: {
+        true: "text-foreground",
+        false: "text-muted-foreground hover:text-foreground"
+      }
+    },
+    defaultVariants: { size: "md", selected: !1 }
+  }
+), A = d.forwardRef(({ options: r, value: a, onChange: s, size: o, className: u, ...m }, f) => {
+  const g = d.useId(), i = (e) => {
+    const t = r.findIndex((x) => x.value === a), p = ((t < 0 ? 0 : t) + e + r.length) % r.length;
+    s(r[p].value);
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: f,
+      role: "radiogroup",
+      onKeyDown: (e) => {
+        switch (e.key) {
+          case "ArrowRight":
+          case "ArrowDown":
+            e.preventDefault(), i(1);
+            break;
+          case "ArrowLeft":
+          case "ArrowUp":
+            e.preventDefault(), i(-1);
+            break;
+        }
+      },
+      className: c(y({ size: o }), u),
+      ...m,
+      children: /* @__PURE__ */ n(v, { reducedMotion: "user", children: r.map((e) => {
+        const t = e.value === a;
+        return /* @__PURE__ */ b(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": t,
+            tabIndex: t ? 0 : -1,
+            onClick: () => s(e.value),
+            className: k({ size: o, selected: t }),
+            children: [
+              t && /* @__PURE__ */ n(
+                h.span,
+                {
+                  layoutId: g,
+                  "aria-hidden": !0,
+                  transition: { duration: 0.2, ease: w },
+                  className: "absolute inset-0 rounded-md bg-elevated shadow-elevation"
+                }
+              ),
+              /* @__PURE__ */ n("span", { className: "relative", children: e.label })
+            ]
+          },
+          e.value
+        );
+      }) })
+    }
+  );
+});
+A.displayName = "SegmentedControl";
+export {
+  A as SegmentedControl
+};

package/components/select.d.ts

@@ -0,0 +1,28 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const selectTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SelectItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends VariantProps<typeof selectTriggerVariants> {
+    items: SelectItem[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    className?: string;
+    id?: string;
+    /**
+     * Which side the listbox opens toward. Use `"top"` when the trigger sits
+     * at the bottom of a clipped container (e.g. a table footer inside an
+     * `overflow-clip` shell) so the menu isn't cut off. Defaults to `"bottom"`.
+     */
+    placement?: "top" | "bottom";
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/components/select.js

@@ -0,0 +1,180 @@
+"use client";
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import * as s from "react";
+import { cva as j } from "class-variance-authority";
+import { MotionConfig as M, AnimatePresence as V, motion as $ } from "motion/react";
+import { ChevronDown as C, Check as K } from "../lib/icons.js";
+import { cn as d } from "../lib/cn.js";
+import { inputBaseClass as L } from "./field.js";
+import { floatVariants as O } from "../lib/motion.js";
+const P = j(
+  d(
+    L,
+    "items-center justify-between gap-2 text-left cursor-pointer",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ),
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs",
+        md: "h-10 text-xs",
+        lg: "h-11 text-base"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), T = s.forwardRef(
+  ({
+    items: o,
+    value: c,
+    onChange: m,
+    placeholder: I = "Select…",
+    size: N,
+    disabled: h,
+    isInvalid: E,
+    className: A,
+    id: R,
+    placement: w = "bottom"
+  }, S) => {
+    const [r, l] = s.useState(!1), [a, b] = s.useState(-1), g = s.useRef(null), k = s.useRef(null), u = s.useId(), v = o.find((e) => e.value === c), z = s.useCallback(() => {
+      const e = o.findIndex((t) => t.value === c);
+      return e >= 0 && !o[e].disabled ? e : o.findIndex((t) => !t.disabled);
+    }, [o, c]);
+    s.useEffect(() => {
+      if (!r) return;
+      const e = (t) => {
+        var n;
+        (n = g.current) != null && n.contains(t.target) || l(!1);
+      };
+      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    }, [r]), s.useEffect(() => {
+      var t;
+      if (!r || a < 0) return;
+      const e = (t = k.current) == null ? void 0 : t.children[a];
+      e == null || e.scrollIntoView({ block: "nearest" });
+    }, [r, a]);
+    const f = () => {
+      h || (b(z()), l(!0));
+    }, y = (e) => {
+      b((t) => {
+        let n = t;
+        for (let p = 0; p < o.length; p++)
+          if (n = (n + e + o.length) % o.length, !o[n].disabled) return n;
+        return t;
+      });
+    }, D = (e) => {
+      const t = o[e];
+      !t || t.disabled || (m == null || m(t.value), l(!1));
+    };
+    return /* @__PURE__ */ x("div", { ref: g, className: "relative", children: [
+      /* @__PURE__ */ x(
+        "button",
+        {
+          ref: S,
+          id: R,
+          type: "button",
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-expanded": r,
+          "aria-controls": u,
+          "aria-invalid": E || void 0,
+          disabled: h,
+          onClick: () => r ? l(!1) : f(),
+          onKeyDown: (e) => {
+            switch (e.key) {
+              case "ArrowDown":
+                e.preventDefault(), r ? y(1) : f();
+                break;
+              case "ArrowUp":
+                e.preventDefault(), r ? y(-1) : f();
+                break;
+              case "Enter":
+              case " ":
+                e.preventDefault(), r ? D(a) : f();
+                break;
+              case "Escape":
+                r && (e.preventDefault(), l(!1));
+                break;
+              case "Tab":
+                l(!1);
+                break;
+            }
+          },
+          className: d(P({ size: N }), A),
+          children: [
+            /* @__PURE__ */ i(
+              "span",
+              {
+                className: d(
+                  "truncate",
+                  !v && "text-muted-foreground"
+                ),
+                children: v ? v.label : I
+              }
+            ),
+            /* @__PURE__ */ i(
+              C,
+              {
+                className: d(
+                  "size-4 text-muted-foreground transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                  r && "rotate-180"
+                ),
+                "aria-hidden": !0
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ i(M, { reducedMotion: "user", children: /* @__PURE__ */ i(V, { children: r && /* @__PURE__ */ i(
+        $.ul,
+        {
+          ref: k,
+          id: u,
+          role: "listbox",
+          "aria-activedescendant": a >= 0 ? `${u}-opt-${a}` : void 0,
+          variants: O,
+          initial: "hidden",
+          animate: "visible",
+          exit: "hidden",
+          style: {
+            transformOrigin: w === "top" ? "bottom" : "top"
+          },
+          className: d(
+            "absolute z-50 max-h-60 w-full overflow-auto p-1",
+            "rounded-md border border-border bg-elevated shadow-elevation",
+            w === "top" ? "bottom-full mb-1.5" : "top-full mt-1.5"
+          ),
+          children: o.map((e, t) => {
+            const n = e.value === c, p = t === a;
+            return /* @__PURE__ */ x(
+              "li",
+              {
+                id: `${u}-opt-${t}`,
+                role: "option",
+                "aria-selected": n,
+                "aria-disabled": e.disabled || void 0,
+                onMouseEnter: () => !e.disabled && b(t),
+                onClick: () => D(t),
+                className: d(
+                  "flex cursor-pointer items-center justify-between gap-2",
+                  "rounded-sm px-2 py-1.5 text-xs text-foreground select-none",
+                  p && !e.disabled && "bg-muted",
+                  e.disabled && "pointer-events-none opacity-50"
+                ),
+                children: [
+                  /* @__PURE__ */ i("span", { className: "truncate", children: e.label }),
+                  n && /* @__PURE__ */ i(K, { className: "size-4 shrink-0", "aria-hidden": !0 })
+                ]
+              },
+              e.value
+            );
+          })
+        }
+      ) }) })
+    ] });
+  }
+);
+T.displayName = "Select";
+export {
+  T as Select
+};

package/components/selection-action-bar.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps } from './button';
+import * as React from "react";
+export interface SelectionActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    selectedCount: number;
+    selectedLabel?: React.ReactNode;
+    actions?: React.ReactNode;
+    onClear?: () => void;
+    clearLabel?: string;
+}
+export declare const SelectionActionBar: React.ForwardRefExoticComponent<SelectionActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectionActionBarAction: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/components/selection-action-bar.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import * as c from "react";
+import { cn as d } from "../lib/cn.js";
+import { Button as u } from "./button.js";
+const g = c.forwardRef(
+  ({
+    className: r,
+    selectedCount: o,
+    selectedLabel: t,
+    actions: n,
+    onClear: e,
+    clearLabel: l = "Clear",
+    ...m
+  }, f) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: f,
+      className: d(
+        "flex items-center gap-3 rounded-lg bg-brand px-3 py-2 text-xs text-brand-foreground",
+        r
+      ),
+      ...m,
+      children: [
+        /* @__PURE__ */ a("span", { className: "font-medium tabular-nums", children: t ?? `${o} selected` }),
+        /* @__PURE__ */ i("div", { className: "ml-auto flex items-center gap-1", children: [
+          n,
+          e && /* @__PURE__ */ a(
+            s,
+            {
+              onClick: e,
+              className: "text-brand-foreground/70 hover:text-brand-foreground",
+              children: l
+            }
+          )
+        ] })
+      ]
+    }
+  )
+);
+g.displayName = "SelectionActionBar";
+const s = c.forwardRef(({ className: r, variant: o = "ghost", size: t = "xs", ...n }, e) => /* @__PURE__ */ a(
+  u,
+  {
+    ref: e,
+    variant: o,
+    size: t,
+    className: d(
+      "text-brand-foreground hover:bg-brand-foreground/10 hover:text-brand-foreground focus-visible:ring-brand-foreground",
+      r
+    ),
+    ...n
+  }
+));
+s.displayName = "SelectionActionBarAction";
+export {
+  g as SelectionActionBar,
+  s as SelectionActionBarAction
+};

package/components/sidebar.d.ts

@@ -0,0 +1,118 @@
+import * as React from "react";
+/**
+ * Sidebar — a vertical navigation rail (the left region of an app frame).
+ *
+ * Supports a **collapsed** icon-rail mode: the rail animates between the
+ * `--sidebar-width` (expanded) and `--sidebar-width-sm` (56px icon rail) tokens.
+ * Collapse is opt-in and works controlled (`collapsed` + `onCollapsedChange`) or
+ * uncontrolled (`defaultCollapsed`). Press ⌘B / Ctrl-B to toggle.
+ *
+ * Sub-parts read the collapsed state through a `group/sidebar` data attribute, so
+ * labels hide and icons center automatically — no prop threading. Consumers that
+ * render richer collapse-sensitive content (a "Recents" list, an account block)
+ * can read `useSidebar()`.
+ *
+ * Compose: Sidebar > SidebarHeader (+ SidebarTrigger) + SidebarNav
+ * (SidebarSection > SidebarItem…) + SidebarFooter.
+ */
+interface SidebarContextValue {
+    collapsed: boolean;
+    toggle: () => void;
+    setCollapsed: (collapsed: boolean) => void;
+}
+/** Read the sidebar's collapsed state (and toggle) from any descendant. */
+export declare function useSidebar(): SidebarContextValue;
+export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
+    /** Controlled collapsed state. */
+    collapsed?: boolean;
+    /** Uncontrolled initial collapsed state. */
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Bind ⌘B / Ctrl-B to toggle collapse. Default true. */
+    keyboardToggle?: boolean;
+}
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Collapse toggle. Place inside SidebarHeader. Shows a tooltip with the ⌘B
+ * shortcut, and lifts to a white chip on hover.
+ */
+export declare function SidebarTrigger({ className, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+export interface SidebarBrandProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The brand mark (img/svg) — `--sidebar-logo` (20px) centered in a `--sidebar-item` (32px) square, same box as every other rail icon. */
+    logo: React.ReactNode;
+    /** Wrap the logo in a link. */
+    href?: string;
+    /** Accessible label for the logo link. */
+    label?: string;
+    /** Reveal the collapse trigger in place of the logo on hover. Default true. */
+    showTrigger?: boolean;
+}
+/**
+ * Brand header — the logo sits in the top slot and, when `showTrigger`, swaps to
+ * the collapse toggle while the rail is hovered (the trigger takes the logo's
+ * place). Self-contained: use it as the first child of `Sidebar` instead of a
+ * `SidebarHeader`.
+ */
+export declare function SidebarBrand({ logo, href, label, showTrigger, className, ...props }: SidebarBrandProps): React.JSX.Element;
+export declare const SidebarHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const SidebarNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export interface SidebarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: React.ReactNode;
+}
+export declare const SidebarSection: React.ForwardRefExoticComponent<SidebarSectionProps & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    icon?: React.ReactNode;
+    isActive?: boolean;
+    /** Trailing content (e.g. a badge). Hidden when collapsed. */
+    endContent?: React.ReactNode;
+}
+export declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const SidebarFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+}
+/**
+ * Primary action for the rail (e.g. "Ask …"). An elevated, subtly-stroked pill
+ * that collapses to a centered square icon button.
+ */
+export declare const SidebarAction: React.ForwardRefExoticComponent<SidebarActionProps & React.RefAttributes<HTMLButtonElement>>;
+export interface SidebarHistoryProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: React.ReactNode;
+}
+/** A labelled list (e.g. "Recents"). Hidden entirely in the collapsed rail. */
+export declare const SidebarHistory: React.ForwardRefExoticComponent<SidebarHistoryProps & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarHistoryItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Hover-revealed trailing action (e.g. a kebab menu). Sits over the right
+     * edge with a gradient backdrop, so the scrolling title disappears cleanly
+     * behind it.
+     */
+    action?: React.ReactNode;
+    /** Persistent active/selected state (e.g. the open conversation). */
+    isActive?: boolean;
+    /**
+     * Optional leading icon (e.g. a spinner while the conversation is
+     * generating). Sits in the text indent, so the title doesn't shift.
+     */
+    icon?: React.ReactNode;
+}
+/**
+ * A recents/history row. Instead of a hard `…` truncation, a long title fades
+ * out at the right edge (mask). On hover the title strip scrolls left at a
+ * constant speed to reveal the full name (measured in JS, animated in CSS), and
+ * the `action` slot fades in. Respects reduced-motion (no scroll, fade only).
+ */
+export declare const SidebarHistoryItem: React.ForwardRefExoticComponent<SidebarHistoryItemProps & React.RefAttributes<HTMLAnchorElement>>;
+export interface SidebarAccountProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "role"> {
+    name: string;
+    /** Secondary line (role, org…). */
+    role?: React.ReactNode;
+    /** Avatar image; falls back to initials from `name`. */
+    src?: string;
+}
+/**
+ * Account block for the rail footer — avatar + name/role. Collapses to just the
+ * avatar, centered. Wrap in a `SidebarFooter`.
+ */
+export declare const SidebarAccount: React.ForwardRefExoticComponent<SidebarAccountProps & React.RefAttributes<HTMLAnchorElement>>;
+export {};