@agentero/design-system 0.18.2 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.18.2",
+	"version": "0.20.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"
@@ -65,6 +69,10 @@
 			"types": "./src/pagination/index.d.ts",
 			"import": "./src/pagination/index.js"
 		},
+		"./popover": {
+			"types": "./src/popover/index.d.ts",
+			"import": "./src/popover/index.js"
+		},
 		"./progress": {
 			"types": "./src/progress/index.d.ts",
 			"import": "./src/progress/index.js"
@@ -115,6 +123,8 @@
 		"@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-popover": "^1.1.15",
 		"@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/popover/index.d.ts

@@ -0,0 +1 @@
+export { Popover, popoverRecipe } from './popover';

package/src/popover/index.js

@@ -0,0 +1,2 @@
+import { Popover as e, popoverRecipe as t } from "./popover.js";
+export { e as Popover, t as popoverRecipe };

package/src/popover/popover.d.ts

@@ -0,0 +1,53 @@
+import { ComponentProps } from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+type RootProps = ComponentProps<typeof PopoverPrimitive.Root>;
+type TriggerProps = ComponentProps<typeof PopoverPrimitive.Trigger>;
+type AnchorProps = ComponentProps<typeof PopoverPrimitive.Anchor>;
+type CloseProps = ComponentProps<typeof PopoverPrimitive.Close>;
+export declare const popoverRecipe: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+type ContentProps = ComponentProps<typeof PopoverPrimitive.Content>;
+/**
+ * Non-modal floating surface anchored to a trigger, built on Radix Popover.
+ * Compose from `Root` / `Trigger` / `Content`, plus optional `Anchor`,
+ * `Close`, and `Portal`. Use for rich interactive overlays (forms, filters,
+ * pickers); prefer `Tooltip` for text hints and `DropdownMenu` for menus.
+ *
+ * @summary Compound floating surface for interactive overlays
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/popover|Radix UI Popover}
+ *
+ * @example
+ * ```tsx
+ * <Popover.Root>
+ *   <Popover.Trigger asChild>
+ *     <Button>Filters</Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content align="start">
+ *     <FiltersForm />
+ *   </Popover.Content>
+ * </Popover.Root>
+ * ```
+ */
+export declare const Popover: {
+    Root: {
+        (props: RootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: TriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Anchor: {
+        (props: AnchorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Close: {
+        (props: CloseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Portal: import('react').FC<PopoverPrimitive.PopoverPortalProps>;
+    Content: {
+        ({ className, sideOffset, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/src/popover/popover.js

@@ -0,0 +1,53 @@
+"use client";
+import { tv as e } from "tailwind-variants";
+import { jsx as t } from "react/jsx-runtime";
+import * as n from "@radix-ui/react-popover";
+//#region src/popover/popover.tsx
+var r = (e) => /* @__PURE__ */ t(n.Root, {
+	"data-slot": "popover-root",
+	...e
+});
+r.displayName = "Popover.Root";
+var i = (e) => /* @__PURE__ */ t(n.Trigger, {
+	"data-slot": "popover-trigger",
+	...e
+});
+i.displayName = "Popover.Trigger";
+var a = (e) => /* @__PURE__ */ t(n.Anchor, {
+	"data-slot": "popover-anchor",
+	...e
+});
+a.displayName = "Popover.Anchor";
+var o = (e) => /* @__PURE__ */ t(n.Close, {
+	"data-slot": "popover-close",
+	...e
+});
+o.displayName = "Popover.Close";
+var s = n.Portal, c = e({ base: [
+	"z-(--z-index-flyover) rounded-md bg-bg-default-base-primary px-2 py-3 shadow-md",
+	"border border-border-default-base-primary",
+	"will-change-[transform,opacity]",
+	"origin-(--radix-popover-content-transform-origin)",
+	"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!"
+] }), l = ({ className: e, sideOffset: r = 1, ...i }) => /* @__PURE__ */ t(n.Portal, { children: /* @__PURE__ */ t(n.Content, {
+	"data-slot": "popover-content",
+	sideOffset: r,
+	className: c({ className: e }),
+	...i
+}) });
+l.displayName = "Popover.Content";
+var u = {
+	Root: r,
+	Trigger: i,
+	Anchor: a,
+	Close: o,
+	Portal: s,
+	Content: l
+};
+//#endregion
+export { u as Popover, c as popoverRecipe };