@actioneer/ads 1.0.3 → 1.0.5

package/components/autocomplete.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsxs as x, jsx as c } from "react/jsx-runtime";
-import * as o from "react";
+import * as i from "react";
 import { MotionConfig as z, AnimatePresence as q, motion as O } from "motion/react";
 import { Search as P, Check as B } from "../lib/icons.js";
 import { cn as y } from "../lib/cn.js";
 import { inputBaseClass as F } from "./field.js";
 import { floatVariants as K } from "../lib/motion.js";
 import { Ripple as Q } from "./ripple.js";
-const T = o.forwardRef(
+const T = i.forwardRef(
   ({
     items: u,
     value: f,
@@ -20,36 +20,36 @@ const T = o.forwardRef(
     id: I,
     "aria-describedby": M
   }, L) => {
-    const d = u.find((e) => e.value === f), [m, h] = o.useState((d == null ? void 0 : d.label) ?? ""), [r, a] = o.useState(!1), [l, w] = o.useState(-1), N = o.useRef(null), k = o.useRef(null), b = o.useId();
-    o.useEffect(() => {
+    const d = u.find((e) => e.value === f), [m, h] = i.useState((d == null ? void 0 : d.label) ?? ""), [r, a] = i.useState(!1), [n, w] = i.useState(-1), N = i.useRef(null), k = i.useRef(null), b = i.useId();
+    i.useEffect(() => {
       h((d == null ? void 0 : d.label) ?? (p ? f ?? "" : ""));
     }, [d, f, p]);
-    const n = o.useMemo(() => {
+    const l = i.useMemo(() => {
       const e = m.trim().toLowerCase();
       return e ? u.filter((t) => t.label.toLowerCase().includes(e)) : u;
     }, [u, m]);
-    o.useEffect(() => {
+    i.useEffect(() => {
       if (!r) return;
       const e = (t) => {
-        var i;
-        (i = N.current) != null && i.contains(t.target) || a(!1);
+        var o;
+        (o = N.current) != null && o.contains(t.target) || a(!1);
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-    }, [r]), o.useEffect(() => {
+    }, [r]), i.useEffect(() => {
       var t;
-      if (!r || l < 0) return;
-      const e = (t = k.current) == null ? void 0 : t.children[l];
+      if (!r || n < 0) return;
+      const e = (t = k.current) == null ? void 0 : t.children[n];
       e == null || e.scrollIntoView({ block: "nearest" });
-    }, [r, l]);
+    }, [r, n]);
     const g = (e) => {
-      n.length !== 0 && w((t) => {
-        let i = t;
-        for (let v = 0; v < n.length; v++)
-          if (i = (i + e + n.length) % n.length, !n[i].disabled) return i;
+      l.length !== 0 && w((t) => {
+        let o = t;
+        for (let v = 0; v < l.length; v++)
+          if (o = (o + e + l.length) % l.length, !l[o].disabled) return o;
         return t;
       });
     }, D = (e) => {
-      const t = n[e];
+      const t = l[e];
       !t || t.disabled || (s == null || s(t.value), h(t.label), a(!1));
     }, $ = (e) => {
       switch (e.key) {
@@ -60,7 +60,7 @@ const T = o.forwardRef(
           e.preventDefault(), r ? g(-1) : a(!0);
           break;
         case "Enter":
-          r && l >= 0 ? (e.preventDefault(), D(l)) : p && (s == null || s(m), a(!1));
+          r && n >= 0 ? (e.preventDefault(), D(n)) : p && (s == null || s(m), a(!1));
           break;
         case "Escape":
           r && (e.preventDefault(), a(!1));
@@ -91,7 +91,7 @@ const T = o.forwardRef(
             "aria-haspopup": "listbox",
             "aria-expanded": r,
             "aria-controls": b,
-            "aria-activedescendant": r && l >= 0 ? `${b}-opt-${l}` : void 0,
+            "aria-activedescendant": r && n >= 0 ? `${b}-opt-${n}` : void 0,
             "aria-invalid": R || void 0,
             "aria-describedby": M,
             disabled: E,
@@ -123,34 +123,35 @@ const T = o.forwardRef(
           ),
           children: [
             /* @__PURE__ */ c(Q, { origin: "top" }),
-            n.length === 0 ? /* @__PURE__ */ c(
+            l.length === 0 ? /* @__PURE__ */ c(
               "li",
               {
                 role: "presentation",
-                className: "px-2 py-6 text-center text-xs text-muted-foreground",
+                className: "px-2 py-6 text-center text-s text-muted-foreground",
                 children: "No results"
               }
-            ) : n.map((e, t) => {
-              const i = e.value === f, v = t === l;
+            ) : l.map((e, t) => {
+              const o = e.value === f, v = t === n;
               return /* @__PURE__ */ x(
                 "li",
                 {
                   id: `${b}-opt-${t}`,
                   role: "option",
-                  "aria-selected": i,
+                  "aria-selected": o,
                   "aria-disabled": e.disabled || void 0,
                   onMouseEnter: () => !e.disabled && w(t),
                   onMouseDown: (j) => j.preventDefault(),
                   onClick: () => D(t),
                   className: y(
                     "flex cursor-pointer items-center justify-between gap-2",
-                    "rounded-sm px-2 py-1.5 text-xs text-foreground select-none",
-                    v && !e.disabled && "bg-muted",
+                    "rounded-sm px-2 py-1.5 text-m text-foreground select-none",
+                    v && !e.disabled && "bg-action-primary-soft text-brand-text",
+                    o && "text-brand-text",
                     e.disabled && "pointer-events-none opacity-50"
                   ),
                   children: [
                     /* @__PURE__ */ c("span", { className: "truncate", children: e.label }),
-                    i && /* @__PURE__ */ c(B, { className: "size-4 shrink-0", "aria-hidden": !0 })
+                    o && /* @__PURE__ */ c(B, { className: "size-4 shrink-0", "aria-hidden": !0 })
                   ]
                 },
                 e.value

package/components/avatar.js

@@ -2,7 +2,7 @@
 import { jsx as n, jsxs as b } from "react/jsx-runtime";
 import * as f from "react";
 import { cn as s } from "../lib/cn.js";
-const m = {
+const g = {
   xs: "size-5 text-xs",
   sm: "size-8 text-xs",
   md: "size-10 text-xs",
@@ -12,46 +12,46 @@ const m = {
   full: "rounded-full",
   lg: "rounded-lg"
 };
-function v(t) {
-  const e = t.trim().split(/\s+/).filter(Boolean);
+function v(r) {
+  const e = r.trim().split(/\s+/).filter(Boolean);
   return e.length === 0 ? "" : e.length === 1 ? e[0].slice(0, 2).toUpperCase() : (e[0][0] + e[e.length - 1][0]).toUpperCase();
 }
-const g = [
-  "bg-g9 text-action-primary-foreground",
-  "bg-g10 text-action-primary-foreground",
-  "bg-g11 text-action-primary-foreground",
-  "bg-g4 text-g12"
+const m = [
+  "bg-t9 text-action-primary-foreground",
+  "bg-t10 text-action-primary-foreground",
+  "bg-t11 text-action-primary-foreground",
+  "bg-t4 text-t12"
 ];
-function y(t) {
-  const e = Array.from(t).reduce(
-    (r, i) => r + i.charCodeAt(0),
+function y(r) {
+  const e = Array.from(r).reduce(
+    (t, i) => t + i.charCodeAt(0),
     0
   );
-  return g[e % g.length];
+  return m[e % m.length];
 }
 const N = f.forwardRef(
-  ({ className: t, src: e, name: r, size: i = "md", radius: o = "full", ...a }, d) => {
-    const l = r ? v(r) : "";
+  ({ className: r, src: e, name: t, size: i = "md", radius: o = "full", ...a }, d) => {
+    const l = t ? v(t) : "";
     return /* @__PURE__ */ n(
       "span",
       {
         ref: d,
         role: "img",
-        "aria-label": r,
+        "aria-label": t,
         className: s(
           "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-normal",
-          // Images sit on the neutral fill; initials use the ADS green ramp.
-          e || !r ? "bg-fill text-fill-foreground" : y(r),
-          m[i],
+          // Images sit on the neutral fill; initials use the ADS teal ramp.
+          e || !t ? "bg-fill text-fill-foreground" : y(t),
+          g[i],
           p[o],
-          t
+          r
         ),
         ...a,
         children: e ? /* @__PURE__ */ n(
           "img",
           {
             src: e,
-            alt: r ?? "",
+            alt: t ?? "",
             className: "size-full object-cover"
           }
         ) : /* @__PURE__ */ n("span", { "aria-hidden": !0, children: l })
@@ -61,13 +61,13 @@ const N = f.forwardRef(
 );
 N.displayName = "Avatar";
 const A = f.forwardRef(
-  ({ className: t, max: e, size: r = "md", radius: i = "full", children: o, ...a }, d) => {
+  ({ className: r, max: e, size: t = "md", radius: i = "full", children: o, ...a }, d) => {
     const l = f.Children.toArray(o), c = typeof e == "number" ? l.length - e : 0, h = typeof e == "number" ? l.slice(0, e) : l;
     return /* @__PURE__ */ b(
       "div",
       {
         ref: d,
-        className: s("flex items-center", t),
+        className: s("flex items-center", r),
         ...a,
         children: [
           h.map((x, u) => /* @__PURE__ */ n(
@@ -89,7 +89,7 @@ const A = f.forwardRef(
               className: s(
                 "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-normal",
                 "bg-muted text-muted-foreground",
-                m[r],
+                g[t],
                 p[i]
               ),
               children: /* @__PURE__ */ n("span", { "aria-hidden": !0, children: `+${c}` })

package/components/brand-loader.d.ts

@@ -7,7 +7,7 @@ export interface BrandMarkProps extends React.SVGProps<SVGSVGElement> {
  * BrandMark — the growth mark as a static logo that comes alive on hover:
  * while the wrapping `group/brand` link is hovered, the nine cells dim and
  * shrink in the brand film's staggered blip loop (rest state is the solid
- * mark). Inherits `currentColor`; size with a `size-*` class. Keyframes +
+ * mark). Defaults to brand teal; size with a `size-*` class. Keyframes +
  * reduced-motion handling live in `src/styles/index.css` (`.ads-mark-cell`).
  */
 export declare function BrandMark({ className, hoverAnimate, ...props }: BrandMarkProps): React.JSX.Element;

package/components/brand-loader.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { cn as r } from "../lib/cn.js";
-const s = [
+import { cn as H } from "../lib/cn.js";
+const t = [
   { d: "M31.1845 32.5508C31.1845 33.1031 30.7368 33.5508 30.1845 33.5508H1.00104C0.287428 33.5508 -0.196523 32.8248 0.0779916 32.1661L13.2269 0.615317C13.3822 0.242707 13.7463 0 14.15 0H30.1845C30.7368 0 31.1845 0.447715 31.1845 1V32.5508Z", delay: 0.55 },
   { d: "M68.4648 32.5508C68.4648 33.1031 68.0171 33.5508 67.4648 33.5508H38.3042C37.5846 33.5508 37.1006 32.8136 37.3866 32.1533L51.0553 0.602474C51.2138 0.236721 51.5743 0 51.9729 0H67.4648C68.0171 0 68.4648 0.447715 68.4648 1V32.5508Z", delay: 0.1 },
   { d: "M103.87 32.5508C103.87 33.1031 103.422 33.5508 102.87 33.5508H73.7702C73.0352 33.5508 72.5514 32.7845 72.8673 32.1209L87.8906 0.570086C88.0564 0.221833 88.4078 0 88.7935 0H102.87C103.422 0 103.87 0.447715 103.87 1V32.5508Z", delay: 0.8 },
@@ -11,8 +11,8 @@ const s = [
   { d: "M30.6757 104.001C30.6757 104.553 30.228 105.001 29.6757 105.001H1.70344C0.797433 105.001 0.358418 103.893 1.01872 103.272L24.0355 81.6472C24.2209 81.473 24.4658 81.376 24.7202 81.376H29.6757C30.228 81.376 30.6757 81.8237 30.6757 82.376V104.001Z", delay: 0.2 },
   { d: "M67.4287 104.001C67.4287 104.553 66.9809 105.001 66.4287 105.001H38.2664C37.387 105.001 36.9358 103.948 37.5426 103.311L58.1566 81.686C58.3453 81.488 58.6069 81.376 58.8804 81.376H66.4287C66.9809 81.376 67.4287 81.8237 67.4287 82.376V104.001Z", delay: 0.9 },
   { d: "M104.182 104.001C104.182 104.553 103.734 105.001 103.182 105.001H74.834C73.9838 105.001 73.5214 104.007 74.0691 103.357L92.2803 81.7318C92.4704 81.5062 92.7503 81.376 93.0452 81.376H103.182C103.734 81.376 104.182 81.8237 104.182 82.376V104.001Z", delay: 0.45 }
-], L = [0.26, 0.13, 0, 0.39, 0.26, 0.13, 0.52, 0.39, 0.26];
-function i({
+], s = [0.26, 0.13, 0, 0.39, 0.26, 0.13, 0.52, 0.39, 0.26];
+function o({
   className: a,
   hoverAnimate: C = !0,
   ...l
@@ -22,15 +22,15 @@ function i({
     {
       viewBox: "0 0 105 105",
       "aria-hidden": !0,
-      className: r("shrink-0", a),
+      className: H("shrink-0 text-brand", a),
       ...l,
-      children: s.map(({ d: H }, d) => /* @__PURE__ */ e(
+      children: t.map(({ d: r }, d) => /* @__PURE__ */ e(
         "path",
         {
-          d: H,
+          d: r,
           fill: "currentColor",
           className: C ? "ads-mark-cell" : void 0,
-          style: C ? { "--blip-delay": `${L[d]}s` } : void 0
+          style: C ? { "--blip-delay": `${s[d]}s` } : void 0
         },
         d
       ))
@@ -38,5 +38,5 @@ function i({
   );
 }
 export {
-  i as BrandMark
+  o as BrandMark
 };

package/components/chart.js

@@ -6,7 +6,7 @@ import { MotionConfig as We, AnimatePresence as ze, motion as _e } from "motion/
 import { cn as $ } from "../lib/cn.js";
 import { floatVariants as je } from "../lib/motion.js";
 const U = (t) => `var(--color-chart-${t % 6 + 1})`, ee = (t) => U(t), ne = "var(--chart-context)", me = { fillOpacity: "var(--chart-active-bar-opacity)" }, Y = 2.5, He = 2.5, W = {
-  primary: { ref: "var(--brand)", pill: "bg-fill text-fill-foreground" },
+  primary: { ref: "var(--brand)", pill: "bg-action-primary-soft text-brand-text" },
   success: { ref: "var(--color-success-600)", pill: "bg-success-50 text-success-700" },
   warning: { ref: "var(--color-warning-500)", pill: "bg-warning-50 text-warning-700" },
   danger: { ref: "var(--color-danger-500)", pill: "bg-danger-50 text-danger-700" },
@@ -190,7 +190,7 @@ function Ue({
             y: n,
             dy: "0.35em",
             textAnchor: "middle",
-            className: "pointer-events-none fill-brand-foreground text-xs font-medium select-none",
+            className: "pointer-events-none fill-brand-foreground text-s font-medium select-none",
             children: a
           }
         )
@@ -221,7 +221,7 @@ function Ye({ hovered: t, frameWidth: n, format: a }) {
                 "span",
                 {
                   "aria-hidden": !0,
-                  className: "flex size-4.5 shrink-0 items-center justify-center rounded-full text-xs font-medium text-brand-foreground",
+                  className: "flex size-4.5 shrink-0 items-center justify-center rounded-full text-s font-medium text-brand-foreground",
                   style: { background: W[t.ann.color ?? "primary"].ref },
                   children: t.n
                 }
@@ -326,7 +326,7 @@ function X({
         "aria-label": `Toggle ${r.label} series`,
         onClick: () => i(r.key),
         className: $(
-          "inline-flex cursor-pointer items-center gap-1.5 rounded-sm text-xs outline-none",
+          "inline-flex cursor-pointer items-center gap-1.5 rounded-sm text-s outline-none",
           "transition-colors duration-150 ease-out motion-reduce:transition-none",
           "focus-visible:ring-2 focus-visible:ring-ring",
           r.hidden ? "text-tertiary" : "text-secondary hover:text-foreground"
@@ -347,7 +347,7 @@ function X({
         ]
       },
       r.label
-    ) : /* @__PURE__ */ A("span", { className: "inline-flex items-center gap-1.5 text-xs text-secondary", children: [
+    ) : /* @__PURE__ */ A("span", { className: "inline-flex items-center gap-1.5 text-s text-secondary", children: [
       /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-2 rounded-dot", style: { background: r.color } }),
       r.label
     ] }, r.label)

package/components/checkbox.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsxs as v, jsx as e } from "react/jsx-runtime";
 import * as t from "react";
-import { motion as x, MotionConfig as w, AnimatePresence as C } from "motion/react";
+import { motion as h, MotionConfig as w, AnimatePresence as C } from "motion/react";
 import { Check as M, Minus as N } from "../lib/icons.js";
 import { cn as p } from "../lib/cn.js";
 import { Field as z } from "./field.js";
 import { checkDrawTransition as b } from "../lib/motion.js";
-const R = x.create(M), j = x.create(N), G = {
+const R = h.create(M), j = h.create(N), G = {
   sm: "size-4 [&_svg]:size-3",
   md: "size-4.5 [&_svg]:size-3.5"
 }, I = t.forwardRef(
   ({
-    className: a,
+    className: s,
     children: o,
     indeterminate: r = !1,
     size: l = "md",
@@ -19,32 +19,32 @@ const R = x.create(M), j = x.create(N), G = {
     checked: n,
     defaultChecked: d = !1,
     onChange: i,
-    ...h
+    ...x
   }, k) => {
-    const s = t.useRef(null), f = n !== void 0, [g, y] = t.useState(d), m = f ? n : g;
-    return t.useImperativeHandle(k, () => s.current), t.useEffect(() => {
-      s.current && (s.current.indeterminate = r);
+    const a = t.useRef(null), m = n !== void 0, [g, y] = t.useState(d), f = m ? n : g;
+    return t.useImperativeHandle(k, () => a.current), t.useEffect(() => {
+      a.current && (a.current.indeterminate = r);
     }, [r]), /* @__PURE__ */ v(
       "label",
       {
         className: p(
-          "group inline-flex items-center gap-2 text-xs text-foreground select-none",
+          "group inline-flex items-center gap-2 text-m text-foreground select-none",
           c ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-          a
+          s
         ),
         children: [
           /* @__PURE__ */ e(
             "input",
             {
-              ref: s,
+              ref: a,
               type: "checkbox",
               disabled: c,
-              checked: m,
+              checked: f,
               onChange: (u) => {
-                f || y(u.target.checked), i == null || i(u);
+                m || y(u.target.checked), i == null || i(u);
               },
               className: "peer sr-only",
-              ...h
+              ...x
             }
           ),
           /* @__PURE__ */ e(
@@ -59,7 +59,7 @@ const R = x.create(M), j = x.create(N), G = {
                 "peer-focus-visible:ring-3 peer-focus-visible:ring-ring",
                 G[l]
               ),
-              children: /* @__PURE__ */ e(w, { reducedMotion: "user", children: /* @__PURE__ */ e(C, { initial: !1, mode: "wait", children: (m || r) && (r ? /* @__PURE__ */ e(
+              children: /* @__PURE__ */ e(w, { reducedMotion: "user", children: /* @__PURE__ */ e(C, { initial: !1, mode: "wait", children: (f || r) && (r ? /* @__PURE__ */ e(
                 j,
                 {
                   initial: { opacity: 0, scale: 0.9 },
@@ -90,7 +90,7 @@ const R = x.create(M), j = x.create(N), G = {
 );
 I.displayName = "Checkbox";
 const S = t.forwardRef(
-  ({ className: a, label: o, description: r, error: l, orientation: c = "vertical", children: n, ...d }, i) => /* @__PURE__ */ e(
+  ({ className: s, label: o, description: r, error: l, orientation: c = "vertical", children: n, ...d }, i) => /* @__PURE__ */ e(
     z,
     {
       ref: i,
@@ -98,7 +98,7 @@ const S = t.forwardRef(
       description: r,
       error: l,
       role: "group",
-      className: a,
+      className: s,
       ...d,
       children: /* @__PURE__ */ e(
         "div",

package/components/chip.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsxs as x, Fragment as h, jsx as e } from "react/jsx-runtime";
-import * as w from "react";
+import { jsxs as x, Fragment as h, jsx as a } from "react/jsx-runtime";
+import * as y from "react";
 import { cva as N } from "class-variance-authority";
-import { Close as y } from "../lib/icons.js";
+import { Close as w } from "../lib/icons.js";
 import { cn as i } from "../lib/cn.js";
 const k = N(
   "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)]",
@@ -24,14 +24,14 @@ const k = N(
     compoundVariants: [
       // solid — the default tinted surface
       { variant: "solid", color: "default", className: "border-wg6 bg-wg2 text-muted-foreground" },
-      { variant: "solid", color: "primary", className: "border-wg5 bg-fill text-fill-foreground" },
+      { variant: "solid", color: "primary", className: "border-brand bg-action-primary-soft text-brand-text" },
       { 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 bg-card text-foreground" },
-      { variant: "outline", color: "primary", className: "border-border-strong bg-card text-foreground" },
+      { variant: "outline", color: "primary", className: "border-brand bg-card text-brand-text" },
       { 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" },
@@ -41,63 +41,63 @@ const k = N(
   }
 ), z = {
   default: "bg-muted-foreground",
-  primary: "bg-foreground",
+  primary: "bg-brand",
   success: "bg-success",
   warning: "bg-warning",
   danger: "bg-danger",
   info: "bg-info"
-}, j = w.forwardRef(
+}, j = y.forwardRef(
   ({
-    className: u,
-    variant: b = "solid",
-    color: o = "default",
-    interaction: f,
-    isPressable: m = !1,
-    onClose: r,
-    startContent: t,
-    avatar: a,
+    className: g,
+    variant: u = "solid",
+    color: t = "default",
+    interaction: m,
+    isPressable: f = !1,
+    onClose: e,
+    startContent: o,
+    avatar: r,
     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(
+    const n = e ? "actionable" : m ?? (f ? "actionable" : "non-actionable"), l = n === "actionable" && !e, d = i(
+      k({ variant: u, color: t }),
+      r && "pl-1",
+      e && "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-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: [
+      r && /* @__PURE__ */ a("span", { className: "-ml-0.5 inline-flex shrink-0", children: r }),
+      p && /* @__PURE__ */ a(
         "span",
         {
           "aria-hidden": !0,
           className: i(
             "size-1.5",
             "rounded-dot",
-            z[o ?? "default"]
+            z[t ?? "default"]
           )
         }
       ),
-      t && /* @__PURE__ */ e("span", { className: "inline-flex shrink-0 [&_svg]:size-3.5", children: t }),
+      o && /* @__PURE__ */ a("span", { className: "inline-flex shrink-0 [&_svg]:size-3.5", children: o }),
       v,
-      r && /* @__PURE__ */ e(
+      e && /* @__PURE__ */ a(
         "button",
         {
           type: "button",
           "aria-label": "Remove",
-          onClick: r,
+          onClick: e,
           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(y, { "aria-hidden": !0 })
+          children: /* @__PURE__ */ a(w, { "aria-hidden": !0 })
         }
       )
     ] });
-    return l ? /* @__PURE__ */ e(
+    return l ? /* @__PURE__ */ a(
       "button",
       {
         ref: c,
@@ -105,16 +105,16 @@ const k = N(
         "data-interaction": n,
         className: d,
         ...s,
-        children: g
+        children: b
       }
-    ) : /* @__PURE__ */ e(
+    ) : /* @__PURE__ */ a(
       "span",
       {
         ref: c,
         "data-interaction": n,
         className: d,
         ...s,
-        children: g
+        children: b
       }
     );
   }

package/components/collapsible.js

@@ -4,38 +4,40 @@ import * as t from "react";
 import { Collapsible as r } from "radix-ui";
 import { MotionConfig as u, AnimatePresence as g, motion as h } from "motion/react";
 import { springDisclosure as y } from "../lib/motion.js";
-const C = t.createContext(!1), v = t.forwardRef(({ children: o, open: i, defaultOpen: a = !1, onOpenChange: e, ...s }, n) => {
-  const c = i !== void 0, [f, b] = t.useState(a), p = c ? i : f, m = t.useCallback(
+import { cn as x } from "../lib/cn.js";
+const m = t.createContext(!1), v = t.forwardRef(({ children: o, open: i, defaultOpen: a = !1, onOpenChange: e, ...s }, n) => {
+  const c = i !== void 0, [f, C] = t.useState(a), p = c ? i : f, b = t.useCallback(
     (d) => {
-      c || b(d), e == null || e(d);
+      c || C(d), e == null || e(d);
     },
     [c, e]
   );
-  return /* @__PURE__ */ l(C.Provider, { value: p, children: /* @__PURE__ */ l(
+  return /* @__PURE__ */ l(m.Provider, { value: p, children: /* @__PURE__ */ l(
     r.Root,
     {
       ref: n,
       "data-slot": "collapsible",
       open: p,
-      onOpenChange: m,
+      onOpenChange: b,
       ...s,
       children: o
     }
   ) });
 });
 v.displayName = "Collapsible";
-const x = t.forwardRef(({ children: o, ...i }, a) => /* @__PURE__ */ l(
+const N = t.forwardRef(({ className: o, children: i, ...a }, e) => /* @__PURE__ */ l(
   r.CollapsibleTrigger,
   {
-    ref: a,
+    ref: e,
     "data-slot": "collapsible-trigger",
-    ...i,
-    children: o
+    className: x("text-m", o),
+    ...a,
+    children: i
   }
 ));
-x.displayName = "CollapsibleTrigger";
+N.displayName = "CollapsibleTrigger";
 const R = t.forwardRef(({ children: o, asChild: i, forceMount: a, ...e }, s) => {
-  const n = t.useContext(C);
+  const n = t.useContext(m);
   return i ? /* @__PURE__ */ l(
     r.CollapsibleContent,
     {
@@ -71,5 +73,5 @@ R.displayName = "CollapsibleContent";
 export {
   v as Collapsible,
   R as CollapsibleContent,
-  x as CollapsibleTrigger
+  N as CollapsibleTrigger
 };