@agentero/design-system 0.22.0 → 0.22.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.22.0",
+	"version": "0.22.2",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",

package/src/hover-card/hover-card.d.ts

@@ -32,7 +32,7 @@ export declare const HoverCard: {
         displayName: string;
     };
     Arrow: {
-        ({ className, ...props }: ArrowProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, width, height, ...props }: ArrowProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/src/hover-card/hover-card.js

@@ -1,52 +1,67 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { tv as t } from "tailwind-variants";
-import { jsx as n } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-hover-card";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-hover-card";
 //#region src/hover-card/hover-card.tsx
-var i = (e) => /* @__PURE__ */ n(r.Root, {
+var a = (e) => /* @__PURE__ */ n(i.Root, {
 	"data-slot": "hover-card-root",
 	...e
 });
-i.displayName = "HoverCard.Root";
-var a = (e) => /* @__PURE__ */ n(r.Trigger, {
+a.displayName = "HoverCard.Root";
+var o = (e) => /* @__PURE__ */ n(i.Trigger, {
 	"data-slot": "hover-card-trigger",
 	...e
 });
-a.displayName = "HoverCard.Trigger";
-var o = r.Portal, s = t({ base: [
-	"z-(--z-index-flyover) rounded-lg bg-bg-default-base-primary p-4 shadow-xl",
+o.displayName = "HoverCard.Trigger";
+var s = i.Portal, c = t({ base: [
+	"z-(--z-index-flyover) max-w-80 rounded-lg bg-bg-default-base-primary p-4 shadow-xl",
 	"border border-border-default-base-primary",
 	"text-sm text-text-default-base-primary",
 	"will-change-[transform,opacity]",
 	"data-[side=bottom]:origin-top data-[side=left]:origin-right",
 	"data-[side=right]:origin-left data-[side=top]:origin-bottom",
-	"data-[state=open]:data-[side=bottom]:animate-dropdown-slide-in-from-top",
-	"data-[state=open]:data-[side=left]:animate-dropdown-slide-in-from-right",
-	"data-[state=open]:data-[side=right]:animate-dropdown-slide-in-from-left",
-	"data-[state=open]:data-[side=top]:animate-dropdown-slide-in-from-bottom",
-	"data-[state=closed]:animate-dropdown-slide-out",
-	"motion-reduce:animate-none!"
-] }), c = ({ className: e, sideOffset: t = 8, collisionPadding: i = 8, ...a }) => /* @__PURE__ */ n(r.Content, {
+	"transition-[opacity,transform] duration-200 ease-out",
+	"starting:opacity-0 starting:[transform:scale(0.9)]",
+	"data-[state=closed]:opacity-0 data-[state=closed]:[transform:scale(0.9)]",
+	"data-[state=closed]:duration-150 data-[state=closed]:ease-in",
+	"data-[state=closed]:animate-presence-hold",
+	"motion-reduce:transition-none motion-reduce:animate-none!"
+] }), l = ({ className: e, sideOffset: t = 8, collisionPadding: r = 8, ...a }) => /* @__PURE__ */ n(i.Content, {
 	"data-slot": "hover-card-content",
 	sideOffset: t,
-	collisionPadding: i,
-	className: s({ className: e }),
+	collisionPadding: r,
+	className: c({ className: e }),
 	...a
 });
-c.displayName = "HoverCard.Content";
-var l = ({ className: t, ...i }) => /* @__PURE__ */ n(r.Arrow, {
+l.displayName = "HoverCard.Content";
+var u = ({ className: t, width: a = 12, height: o = 6, ...s }) => /* @__PURE__ */ n(i.Arrow, {
 	"data-slot": "hover-card-arrow",
-	className: e("fill-bg-default-base-primary", t),
-	...i
+	width: a,
+	height: o,
+	asChild: !0,
+	...s,
+	children: /* @__PURE__ */ r("svg", {
+		viewBox: "0 0 12 6",
+		className: e("fill-bg-default-base-primary stroke-border-default-base-primary", t),
+		children: [/* @__PURE__ */ n("polygon", {
+			points: "0,0 6,6 12,0",
+			stroke: "none"
+		}), /* @__PURE__ */ n("path", {
+			d: "M0 0 L6 6 L12 0",
+			fill: "none",
+			strokeLinejoin: "round",
+			vectorEffect: "non-scaling-stroke"
+		})]
+	})
 });
-l.displayName = "HoverCard.Arrow";
-var u = {
-	Root: i,
-	Trigger: a,
-	Portal: o,
-	Content: c,
-	Arrow: l
+u.displayName = "HoverCard.Arrow";
+var d = {
+	Root: a,
+	Trigger: o,
+	Portal: s,
+	Content: l,
+	Arrow: u
 };
 //#endregion
-export { u as HoverCard, s as hoverCardRecipe };
+export { d as HoverCard, c as hoverCardRecipe };

package/theme/base.css

@@ -800,6 +800,10 @@
 	--animate-fade-in: fadeIn 0.3s forwards;
 	--animate-dropdown-slide-in: dropdownSlideIn 200ms ease-out;
 	--animate-dropdown-slide-out: dropdownSlideOut 150ms ease-in;
+	/* Radix Presence unmounts as soon as a node's CSS animation ends, so a node
+    * whose exit is driven by a transition needs a placeholder animation to hold
+    * it mounted. Keep the duration in sync with any exit transition using it. */
+	--animate-presence-hold: presenceHold 150ms linear;
 	--animate-dropdown-slide-in-from-top: dropdownSlideInFromTop 200ms ease-out;
 	--animate-dropdown-slide-in-from-bottom: dropdownSlideInFromBottom 200ms ease-out;
 	--animate-dropdown-slide-in-from-left: dropdownSlideInFromLeft 200ms ease-out;
@@ -960,6 +964,17 @@
 		}
 	}
 
+	/* Animates nothing on purpose — it exists only so Radix Presence has an
+	 * animation to wait on. The custom property is inert and never read. */
+	@keyframes presenceHold {
+		0% {
+			--presence-hold: 0;
+		}
+		100% {
+			--presence-hold: 1;
+		}
+	}
+
 	@keyframes dropdownSlideInFromTop {
 		0% {
 			opacity: 0;