@agentero/design-system 0.12.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.12.0",
+	"version": "0.14.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -57,6 +57,10 @@
 			"types": "./src/pagination/index.d.ts",
 			"import": "./src/pagination/index.js"
 		},
+		"./skeleton": {
+			"types": "./src/skeleton/index.d.ts",
+			"import": "./src/skeleton/index.js"
+		},
 		"./switch": {
 			"types": "./src/switch/index.d.ts",
 			"import": "./src/switch/index.js"
@@ -69,6 +73,10 @@
 			"types": "./src/toast/index.d.ts",
 			"import": "./src/toast/index.js"
 		},
+		"./tooltip": {
+			"types": "./src/tooltip/index.d.ts",
+			"import": "./src/tooltip/index.js"
+		},
 		"./lib": {
 			"types": "./lib/index.d.ts",
 			"import": "./lib/index.js"
@@ -93,6 +101,7 @@
 		"@radix-ui/react-separator": "^1.1.8",
 		"@radix-ui/react-slot": "^1.2.4",
 		"@radix-ui/react-switch": "^1.3.2",
+		"@radix-ui/react-tooltip": "^1.2.11",
 		"clsx": "^2.1.1",
 		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.5.0",

package/src/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { Skeleton, skeletonRecipe } from './skeleton';
+export type { SkeletonProps } from './skeleton';

package/src/skeleton/index.js

@@ -0,0 +1,2 @@
+import { Skeleton as e, skeletonRecipe as t } from "./skeleton.js";
+export { e as Skeleton, t as skeletonRecipe };

package/src/skeleton/skeleton.d.ts

@@ -0,0 +1,19 @@
+import { ComponentPropsWithRef } from 'react';
+export declare const skeletonRecipe: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "animate-pulse rounded-sm bg-bg-default-base-tertiary motion-reduce:animate-none", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "animate-pulse rounded-sm bg-bg-default-base-tertiary motion-reduce:animate-none", unknown, unknown, undefined>>;
+export type SkeletonProps = ComponentPropsWithRef<'div'>;
+/**
+ * Skeleton renders a pulsing placeholder box while content loads. Size and
+ * shape it with Tailwind classes (`h-4 w-30`, `size-10 rounded-full`) to
+ * mirror the content it stands in for. Hidden from assistive technologies.
+ *
+ * @summary Pulsing placeholder box for loading content
+ *
+ * @example
+ * ```tsx
+ * <Skeleton className="h-4 w-30" />
+ * ```
+ */
+export declare const Skeleton: {
+    ({ className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/skeleton/skeleton.js

@@ -0,0 +1,13 @@
+"use client";
+import { tv as e } from "tailwind-variants";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/skeleton/skeleton.tsx
+var n = e({ base: "animate-pulse rounded-sm bg-bg-default-base-tertiary motion-reduce:animate-none" }), r = ({ className: e, ...r }) => /* @__PURE__ */ t("div", {
+	"data-slot": "skeleton",
+	"aria-hidden": "true",
+	...r,
+	className: n({ className: e })
+});
+r.displayName = "Skeleton";
+//#endregion
+export { r as Skeleton, n as skeletonRecipe };

package/src/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip, tooltipRecipe } from './tooltip';
+export type { TooltipProps } from './tooltip';

package/src/tooltip/index.js

@@ -0,0 +1,2 @@
+import { Tooltip as e, tooltipRecipe as t } from "./tooltip.js";
+export { e as Tooltip, t as tooltipRecipe };

package/src/tooltip/tooltip.d.ts

@@ -0,0 +1,45 @@
+import { ComponentProps, ReactNode } from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+export declare const tooltipRecipe: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+type RootProps = ComponentProps<typeof TooltipPrimitive.Root>;
+export type TooltipProps = {
+    /** The trigger element. Hovering or focusing it reveals the tooltip. */
+    children: ReactNode;
+    /** The floating hint. Keep it short — labels or hints, not paragraphs. */
+    content: ReactNode;
+    /** Preferred side of the trigger; flips on collision. Defaults to `'top'`. */
+    side?: TooltipPrimitive.TooltipContentProps['side'];
+    /** Preferred alignment against the trigger. Defaults to `'center'`. */
+    align?: TooltipPrimitive.TooltipContentProps['align'];
+    /** Distance in pixels between the tooltip and its trigger. Defaults to `4`. */
+    sideOffset?: number;
+    /** Merge Radix's behavior onto an already-interactive child instead of wrapping it in a `<button>`. Defaults to `false`. */
+    asChild?: boolean;
+    /** Hide the tooltip when the trigger is clipped away (e.g. scrolled out of an `overflow` container). */
+    hideWhenDetached?: boolean;
+    /** Delay in ms before opening on hover. Defaults to `0`; focus always opens instantly. */
+    delayDuration?: number;
+    /** Extra classes for the content surface, merged last. */
+    className?: string;
+} & Pick<RootProps, 'open' | 'defaultOpen' | 'onOpenChange'>;
+/**
+ * Tooltip reveals a short, non-essential hint anchored to a trigger element on
+ * hover or focus. Pass the trigger as `children` and the hint as `content`; use
+ * `asChild` when the trigger is already interactive (a button or link) to avoid
+ * nesting interactive elements. Don't put essential or interactive content
+ * inside it — hover-only content is inaccessible to touch and keyboard users.
+ *
+ * @summary Hover/focus hint anchored to a trigger element
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Archive this carrier" asChild>
+ *   <IconButton aria-label="Archive"><IconArchive /></IconButton>
+ * </Tooltip>
+ * ```
+ */
+export declare const Tooltip: {
+    ({ children, content, side, align, sideOffset, asChild, hideWhenDetached, delayDuration, open, defaultOpen, onOpenChange, className }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/src/tooltip/tooltip.js

@@ -0,0 +1,43 @@
+"use client";
+import { tv as e } from "tailwind-variants";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-tooltip";
+//#region src/tooltip/tooltip.tsx
+var i = e({ base: [
+	"z-(--z-index-tooltip) max-w-[32ch] px-3 py-2",
+	"rounded-sm border border-border-default-base-primary bg-bg-default-base-primary shadow-sm",
+	"text-xs text-pretty text-text-default-base-secondary select-none",
+	"will-change-[transform,opacity]",
+	"data-[side=bottom]:animate-tooltip-slide-in-from-top",
+	"data-[side=top]:animate-tooltip-slide-in-from-bottom",
+	"data-[side=left]:animate-tooltip-slide-in-from-right",
+	"data-[side=right]:animate-tooltip-slide-in-from-left",
+	"motion-reduce:animate-none!"
+] }), a = ({ children: e, content: a, side: o = "top", align: s, sideOffset: c = 4, asChild: l = !1, hideWhenDetached: u, delayDuration: d = 0, open: f, defaultOpen: p, onOpenChange: m, className: h }) => /* @__PURE__ */ t(r.Provider, {
+	delayDuration: d,
+	skipDelayDuration: 0,
+	children: /* @__PURE__ */ n(r.Root, {
+		open: f,
+		defaultOpen: p,
+		onOpenChange: m,
+		children: [/* @__PURE__ */ t(r.Trigger, {
+			asChild: l,
+			"data-slot": "tooltip-trigger",
+			"data-testid": "tooltip-trigger",
+			className: "align-middle",
+			children: e
+		}), /* @__PURE__ */ t(r.Portal, { children: /* @__PURE__ */ t(r.Content, {
+			"data-slot": "tooltip-content",
+			side: o,
+			align: s,
+			sideOffset: c,
+			collisionPadding: 8,
+			hideWhenDetached: u,
+			className: i({ className: h }),
+			children: a
+		}) })]
+	})
+});
+a.displayName = "Tooltip";
+//#endregion
+export { a as Tooltip, i as tooltipRecipe };

package/theme/base.css

@@ -804,6 +804,10 @@
 	--animate-dropdown-slide-in-from-bottom: dropdownSlideInFromBottom 200ms ease-out;
 	--animate-dropdown-slide-in-from-left: dropdownSlideInFromLeft 200ms ease-out;
 	--animate-dropdown-slide-in-from-right: dropdownSlideInFromRight 200ms ease-out;
+	--animate-tooltip-slide-in-from-top: tooltipSlideInFromTop 200ms ease-out;
+	--animate-tooltip-slide-in-from-bottom: tooltipSlideInFromBottom 200ms ease-out;
+	--animate-tooltip-slide-in-from-left: tooltipSlideInFromLeft 200ms ease-out;
+	--animate-tooltip-slide-in-from-right: tooltipSlideInFromRight 200ms ease-out;
 
 	/* ========================================
     * Z-INDEX
@@ -996,6 +1000,50 @@
 		}
 	}
 
+	@keyframes tooltipSlideInFromTop {
+		0% {
+			opacity: 0;
+			transform: translateY(-0.25rem);
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes tooltipSlideInFromBottom {
+		0% {
+			opacity: 0;
+			transform: translateY(0.25rem);
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes tooltipSlideInFromLeft {
+		0% {
+			opacity: 0;
+			transform: translateX(-0.25rem);
+		}
+		100% {
+			opacity: 1;
+			transform: translateX(0);
+		}
+	}
+
+	@keyframes tooltipSlideInFromRight {
+		0% {
+			opacity: 0;
+			transform: translateX(0.25rem);
+		}
+		100% {
+			opacity: 1;
+			transform: translateX(0);
+		}
+	}
+
 	@keyframes accordionDown {
 		from {
 			height: 0;