@agentero/design-system 0.13.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.13.0",
+	"version": "0.15.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -57,6 +57,14 @@
 			"types": "./src/pagination/index.d.ts",
 			"import": "./src/pagination/index.js"
 		},
+		"./progress": {
+			"types": "./src/progress/index.d.ts",
+			"import": "./src/progress/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"
@@ -94,6 +102,7 @@
 		"@radix-ui/react-accordion": "^1.2.14",
 		"@radix-ui/react-avatar": "^1.1.11",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
+		"@radix-ui/react-progress": "^1.1.12",
 		"@radix-ui/react-separator": "^1.1.8",
 		"@radix-ui/react-slot": "^1.2.4",
 		"@radix-ui/react-switch": "^1.3.2",

package/src/progress/index.d.ts

@@ -0,0 +1,2 @@
+export { Progress, progressRecipe } from './progress';
+export type { ProgressProps } from './progress';

package/src/progress/index.js

@@ -0,0 +1,2 @@
+import { Progress as e, progressRecipe as t } from "./progress.js";
+export { e as Progress, t as progressRecipe };

package/src/progress/progress.d.ts

@@ -0,0 +1,89 @@
+export declare const progressRecipe: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            label?: import('tailwind-merge').ClassNameValue;
+            track?: import('tailwind-merge').ClassNameValue;
+            value?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+            labelRow?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            label?: import('tailwind-merge').ClassNameValue;
+            track?: import('tailwind-merge').ClassNameValue;
+            value?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+            labelRow?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    track: string;
+    indicator: string;
+    labelRow: string;
+    label: string;
+    value: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            label?: import('tailwind-merge').ClassNameValue;
+            track?: import('tailwind-merge').ClassNameValue;
+            value?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+            labelRow?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    track: string;
+    indicator: string;
+    labelRow: string;
+    label: string;
+    value: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string;
+    track: string;
+    indicator: string;
+    labelRow: string;
+    label: string;
+    value: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ProgressProps = {
+    /** Completion percentage, 0–100. Values outside the range are clamped. */
+    percentage: number;
+    /** Optional label rendered above the bar, with the percentage value on the right. */
+    label?: string;
+    /** Accessible name when no visible `label` is provided. Defaults to `'Progress'`. */
+    'aria-label'?: string;
+    /**
+     * Extra classes for the bar, merged last. The fill paints with `currentColor`,
+     * so a text color recolors it (e.g. `text-brand-400`); sizing classes resize
+     * the track (e.g. `h-3`).
+     */
+    className?: string;
+};
+/**
+ * Progress shows how far a bounded task has advanced — wizard steps, upload
+ * status, or a split of a total. Pass `percentage` (0–100) and optionally a
+ * `label`, which renders above the bar with the percentage value. Built on
+ * Radix UI Progress, so `role="progressbar"` and `aria-value*` come wired.
+ *
+ * The fill is near-black by default and paints with `currentColor` — recolor
+ * it from the consumer with a plain text color class.
+ *
+ * @summary Horizontal progress bar with optional label
+ *
+ * @example
+ * ```tsx
+ * <Progress percentage={62} label="Profile completion" className="text-brand-400" />
+ * ```
+ */
+export declare const Progress: {
+    ({ percentage, label, "aria-label": ariaLabel, className }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/progress/progress.js

@@ -0,0 +1,46 @@
+"use client";
+import { tv as e } from "tailwind-variants";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useId as r } from "react";
+import * as i from "@radix-ui/react-progress";
+//#region src/progress/progress.tsx
+var a = e({ slots: {
+	root: "flex flex-col gap-2",
+	track: "relative h-2 w-full overflow-hidden rounded-sm bg-neutrals-200 text-neutrals-900",
+	indicator: "size-full bg-current transition-transform duration-600 ease-in-out motion-reduce:transition-none",
+	labelRow: "flex items-center justify-between gap-2",
+	label: "text-sm text-text-default-base-primary",
+	value: "text-base text-text-default-base-primary"
+} }), o = ({ percentage: e, label: o, "aria-label": s, className: c }) => {
+	let l = r(), u = a(), d = Math.min(100, Math.max(0, e));
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "progress",
+		className: u.root(),
+		children: [o && /* @__PURE__ */ n("div", {
+			"data-slot": "progress-label",
+			className: u.labelRow(),
+			children: [/* @__PURE__ */ t("span", {
+				id: l,
+				className: u.label(),
+				children: o
+			}), /* @__PURE__ */ n("span", {
+				className: u.value(),
+				children: [d, "%"]
+			})]
+		}), /* @__PURE__ */ t(i.Root, {
+			"data-slot": "progress-track",
+			value: d,
+			"aria-labelledby": o ? l : void 0,
+			"aria-label": o ? void 0 : s ?? "Progress",
+			className: u.track({ className: c }),
+			children: /* @__PURE__ */ t(i.Indicator, {
+				"data-slot": "progress-indicator",
+				className: u.indicator(),
+				style: { transform: `translateX(-${100 - d}%)` }
+			})
+		})]
+	});
+};
+o.displayName = "Progress";
+//#endregion
+export { o as Progress, a as progressRecipe };

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 };