@agentero/design-system 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.13.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"

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