@agentero/design-system 0.18.1 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.18.1",
+	"version": "0.19.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -53,6 +53,10 @@
 			"types": "./src/dropdown-menu/index.d.ts",
 			"import": "./src/dropdown-menu/index.js"
 		},
+		"./hover-card": {
+			"types": "./src/hover-card/index.d.ts",
+			"import": "./src/hover-card/index.js"
+		},
 		"./loading": {
 			"types": "./src/loading/index.d.ts",
 			"import": "./src/loading/index.js"
@@ -115,6 +119,7 @@
 		"@radix-ui/react-avatar": "^1.1.11",
 		"@radix-ui/react-dialog": "^1.1.19",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
+		"@radix-ui/react-hover-card": "^1.1.19",
 		"@radix-ui/react-progress": "^1.1.12",
 		"@radix-ui/react-separator": "^1.1.8",
 		"@radix-ui/react-slot": "^1.2.4",

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

@@ -0,0 +1,39 @@
+import { ComponentProps } from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+type RootProps = ComponentProps<typeof HoverCardPrimitive.Root>;
+type TriggerProps = ComponentProps<typeof HoverCardPrimitive.Trigger>;
+export declare const hoverCardRecipe: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+type ContentProps = ComponentProps<typeof HoverCardPrimitive.Content>;
+type ArrowProps = ComponentProps<typeof HoverCardPrimitive.Arrow>;
+/**
+ * Rich, sighted-user hover preview anchored to a trigger (profile cards, entity
+ * previews) shown on hover/focus, built on Radix HoverCard. Compose from
+ * `Root` / `Trigger` / `Portal` / `Content`, plus an optional `Arrow`.
+ *
+ * Pointer-first and NOT keyboard-accessible: focus opens it but focus never
+ * enters the card — never put essential info or the only path to an action
+ * inside. Use `Popover`/`DropdownMenu` for that, or `Tooltip` for text hints.
+ *
+ * @summary Compound overlay card for rich hover previews of an entity
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/hover-card|Radix UI HoverCard}
+ */
+export declare const HoverCard: {
+    Root: {
+        (props: RootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: TriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Portal: import('react').FC<HoverCardPrimitive.HoverCardPortalProps>;
+    Content: {
+        ({ className, sideOffset, collisionPadding, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Arrow: {
+        ({ className, ...props }: ArrowProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export {};

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

@@ -0,0 +1,52 @@
+"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";
+//#region src/hover-card/hover-card.tsx
+var i = (e) => /* @__PURE__ */ n(r.Root, {
+	"data-slot": "hover-card-root",
+	...e
+});
+i.displayName = "HoverCard.Root";
+var a = (e) => /* @__PURE__ */ n(r.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",
+	"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, {
+	"data-slot": "hover-card-content",
+	sideOffset: t,
+	collisionPadding: i,
+	className: s({ className: e }),
+	...a
+});
+c.displayName = "HoverCard.Content";
+var l = ({ className: t, ...i }) => /* @__PURE__ */ n(r.Arrow, {
+	"data-slot": "hover-card-arrow",
+	className: e("fill-bg-default-base-primary", t),
+	...i
+});
+l.displayName = "HoverCard.Arrow";
+var u = {
+	Root: i,
+	Trigger: a,
+	Portal: o,
+	Content: c,
+	Arrow: l
+};
+//#endregion
+export { u as HoverCard, s as hoverCardRecipe };

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

@@ -0,0 +1 @@
+export { HoverCard, hoverCardRecipe } from './hover-card';

package/src/hover-card/index.js

@@ -0,0 +1,2 @@
+import { HoverCard as e, hoverCardRecipe as t } from "./hover-card.js";
+export { e as HoverCard, t as hoverCardRecipe };

package/src/tabs/tabs.js

@@ -23,7 +23,7 @@ var o = t({
 			line: {
 				list: "w-full gap-6 border-b border-border-default-base-primary bg-bg-default-base-primary px-4",
 				trigger: [
-					"grid h-10 content-center",
+					"grid h-10 content-center text-text-default-base-tertiary",
 					"before:absolute before:inset-x-0 before:bottom-0 before:h-0.5 before:origin-bottom before:scale-y-0 before:bg-text-button-secondary-enable before:transition-transform before:duration-200 before:will-change-transform before:content-['']",
 					"data-[state=active]:before:scale-y-100"
 				]