@zentauri-ui/zentauri-components 1.2.1 → 1.3.1

package/README.md

@@ -4,19 +4,33 @@ A React UI kit for building product interfaces with Tailwind CSS. Components are
 
 ## Overview
 
-The library targets **React 18+** apps that use **Tailwind CSS v4** (or an equivalent setup where Tailwind can scan this package via `@source`). Styling uses utility classes; **class-variance-authority** powers variant APIs (size, appearance, and similar props), with **clsx** and **tailwind-merge** for predictable `className` composition. **Framer Motion** backs motion where components animate, and **react-icons** is used for iconography where applicable.
+The library targets **React 18+** apps that use **Tailwind CSS v4** (or an equivalent setup where Tailwind can scan this package via `@source`). Styling uses utility classes; **class-variance-authority** powers variant APIs (size, appearance, and similar props), with **clsx** and **tailwind-merge** for predictable `className` composition. **Framer Motion** backs motion where a feature ships animated variants, and **react-icons** is used for iconography where applicable.
 
-Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@zentauri-ui/zentauri-components/ui/<area>` for components and `@zentauri-ui/zentauri-components/hooks/<entry>` for React hooks (and shared helpers under `hooks/utils`). Each entry resolves to its own ESM (`.mjs`), CJS (`.js`), and types (`.d.ts`) so bundlers pull only what you import. Most apps rely on Tailwind scanning the package sources (see installation); a separate CSS import is not required for that setup.
+Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@zentauri-ui/zentauri-components/ui/<area>` for static UI, `@zentauri-ui/zentauri-components/ui/<area>/animated` where a motion bundle exists, and `@zentauri-ui/zentauri-components/hooks/<entry>` for React hooks (and shared helpers under `hooks/utils`). Base UI entries do **not** re-export animated components; motion lives on its own entry so optional `framer-motion` usage stays tree-shakeable and chunk-friendly. Each entry resolves to its own ESM (`.mjs`), CJS (`.js`), and types (`.d.ts`) so bundlers pull only what you import. Most apps rely on Tailwind scanning the package sources (see installation); a separate CSS import is not required for that setup.
 
 ## Package exports
 
 | Subpath                                         | Description                                                                                                                                 |
 | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@zentauri-ui/zentauri-components/ui/<name>`   | Single UI area: components (and any re-exports from that area’s `index`, e.g. `usePagination` from `ui/pagination`).                         |
+| `@zentauri-ui/zentauri-components/ui/<name>`   | Single UI area: static primitives, compound parts, variants, and types. Does **not** include Framer Motion–based animated exports.           |
+| `@zentauri-ui/zentauri-components/ui/<name>/animated` | Motion entry for that area when published: animated components, motion presets, and related types (depends on **framer-motion**).     |
 | `@zentauri-ui/zentauri-components/hooks/<entry>` | One hook module or `utils` (`cn`, `clampPage`, `range` from `src/lib/utils.ts`). Entries match files under `src/hooks/` (see **React hooks**). |
 
 The UI `<name>` segment matches the folder under `src/ui/` (for example `accordion`, `select`, `empty-state`, `buttons` for `Button`, `inputs` for `Input`). The hooks `<entry>` is the file stem (for example `useMediaQuery`, `usePagination`) or `utils`.
 
+Only a subset of UI areas publish a `/animated` entry (see **Components**). Some motion entries also re-export non-motion pieces from the same feature so you can import one motion subpath for a whole flow; others pair a base `ui/<name>` import with a small set of `*Animated` exports from `ui/<name>/animated`—use the `animated/index.ts` for that area as the source of truth.
+
+## Animated components (`ui/<name>/animated`)
+
+- **Why a separate subpath:** animated modules import **framer-motion**. Keeping them on `…/ui/<name>/animated` avoids pulling motion into pages that only use the static `…/ui/<name>` entry and keeps server/client boundaries predictable in app routers.
+- **When to install `framer-motion`:** add it when your app imports any `@zentauri-ui/zentauri-components/ui/*/animated` path (see **Optional: animations and icons** under installation).
+
+Published motion entries (same `<name>` as the base UI folder):
+
+`accordion`, `alert`, `avatar`, `badge`, `buttons`, `card`, `divider`, `drawer`, `empty-state`, `inputs`, `modal`, `progress`, `skeleton`, `spinner`, `table`, `tabs`, `toast`, `toggle`, `tooltip`
+
+**Spinner:** only the motion entry is built—import from `@zentauri-ui/zentauri-components/ui/spinner/animated` (there is no separate `ui/spinner` static bundle).
+
 ## Requirements
 
 - **React** and **React DOM** `>= 18` (peer dependencies)
@@ -24,36 +38,36 @@ The UI `<name>` segment matches the folder under `src/ui/` (for example `accordi
 
 ## Components
 
-Each area is available from its own subpath (`…/ui/<subpath>`):
-
-| Area           | Subpath `…/ui/…` |
-| -------------- | ---------------- |
-| Accordion      | `accordion`      |
-| Alert          | `alert`          |
-| Avatar         | `avatar`         |
-| Badge          | `badge`          |
-| Breadcrumb     | `breadcrumb`     |
-| Button         | `buttons`        |
-| Card           | `card`           |
-| Divider        | `divider`        |
-| Drawer         | `drawer`         |
-| Dropdown       | `dropdown`       |
-| Empty state    | `empty-state`    |
-| File upload    | `file-upload`    |
-| Input          | `inputs`         |
-| Modal          | `modal`          |
-| Pagination     | `pagination`     |
-| Progress       | `progress`       |
-| Select         | `select`         |
-| Skeleton       | `skeleton`       |
-| Slider         | `slider`         |
-| Spinner        | `spinner`        |
-| Stepper        | `stepper`        |
-| Table          | `table`          |
-| Tabs           | `tabs`           |
-| Toast          | `toast`          |
-| Toggle         | `toggle`         |
-| Tooltip        | `tooltip`        |
+Import static primitives from `@zentauri-ui/zentauri-components/ui/<subpath>` when the **Base** column lists a path. When the **Animated** column lists a path, motion components and preset helpers come from `@zentauri-ui/zentauri-components/ui/<subpath>/animated` (they are not exported from the base entry). **Spinner** has no static bundle—use only the animated subpath.
+
+| Area           | Base subpath `…/ui/…` | Animated subpath `…/ui/…/animated` |
+| -------------- | --------------------- | ------------------------------------ |
+| Accordion      | `accordion`           | `accordion/animated`                 |
+| Alert          | `alert`               | `alert/animated`                     |
+| Avatar         | `avatar`              | `avatar/animated`                    |
+| Badge          | `badge`               | `badge/animated`                     |
+| Breadcrumb     | `breadcrumb`          | —                                    |
+| Button         | `buttons`             | `buttons/animated`                   |
+| Card           | `card`                | `card/animated`                      |
+| Divider        | `divider`             | `divider/animated`                   |
+| Drawer         | `drawer`              | `drawer/animated`                    |
+| Dropdown       | `dropdown`            | —                                    |
+| Empty state    | `empty-state`         | `empty-state/animated`               |
+| File upload    | `file-upload`         | —                                    |
+| Input          | `inputs`              | `inputs/animated`                    |
+| Modal          | `modal`               | `modal/animated`                     |
+| Pagination     | `pagination`          | —                                    |
+| Progress       | `progress`            | `progress/animated`                  |
+| Select         | `select`              | —                                    |
+| Skeleton       | `skeleton`            | `skeleton/animated`                  |
+| Slider         | `slider`              | —                                    |
+| Spinner        | —                     | `spinner/animated`                   |
+| Stepper        | `stepper`             | —                                    |
+| Table          | `table`               | `table/animated`                     |
+| Tabs           | `tabs`                | `tabs/animated`                      |
+| Toast          | `toast`               | `toast/animated`                     |
+| Toggle         | `toggle`              | `toggle/animated`                    |
+| Tooltip        | `tooltip`             | `tooltip/animated`                   |
 
 ## React hooks
 
@@ -104,7 +118,7 @@ Some UI packages re-export the hook that belongs to that component (for example
 
 ## Installation
 
-**Getting started** — Add the package, install peer dependencies so primitives resolve correctly, point Tailwind at the library sources, then import from `ui/<name>` and/or `hooks/<entry>` subpaths.
+**Getting started** — Add the package, install peer dependencies so primitives resolve correctly, point Tailwind at the library sources, then import from `ui/<name>` (static), `ui/<name>/animated` (motion, when published), and/or `hooks/<entry>` subpaths.
 
 ### Step 1 — Install the package
 
@@ -140,7 +154,7 @@ yarn add react react-dom class-variance-authority clsx tailwind-merge
 
 #### Optional: animations and icons
 
-Add `framer-motion` when using motion-based UI, and `react-icons` when using icon sets from that package.
+Add **`framer-motion`** when you import any `@zentauri-ui/zentauri-components/ui/<name>/animated` entry (including **Spinner**, which is only published under `ui/spinner/animated`). Add **`react-icons`** when using icon sets from that package.
 
 ```bash
 npm install framer-motion react-icons
@@ -154,7 +168,7 @@ pnpm add framer-motion react-icons
 yarn add framer-motion react-icons
 ```
 
-Published `dist/` files **import** these packages; they are **not** vendored inside `@zentauri-ui/zentauri-components`. Your app installs them via `dependencies` (or optional peers above), and your bundler resolves them from `node_modules`.
+Published `dist/` files **import** these packages; they are **not** vendored inside `@zentauri-ui/zentauri-components`. Static `ui/<name>` bundles do not depend on `framer-motion`; only `ui/<name>/animated` entries do. Your app installs peers via `dependencies` where needed, and your bundler resolves them from `node_modules`.
 
 ### Next.js: smaller route chunks
 
@@ -184,7 +198,7 @@ Add an `@source` entry so Tailwind scans class names inside `@zentauri-ui/zentau
 
 ### Step 4 — Import and use components and hooks
 
-Use **one subpath per UI area** and **one subpath per hook module** so the bundler resolves only the entries you use.
+Use **one subpath per UI area** (static and animated are separate entries: `ui/<name>` vs `ui/<name>/animated`) and **one subpath per hook module** so the bundler resolves only the entries you use.
 
 #### Imports (single UI area)
 
@@ -217,6 +231,17 @@ import { useDisclosure } from "@zentauri-ui/zentauri-components/hooks/useDisclos
 import { Button } from "@zentauri-ui/zentauri-components/ui/buttons";
 ```
 
+#### Imports (animated / Framer Motion)
+
+Use the `/animated` subpath for motion components and preset helpers. You can import static and motion entries from the same feature in one file when you compose them (names and re-exports differ per area).
+
+```tsx
+import { Button } from "@zentauri-ui/zentauri-components/ui/buttons";
+import { ButtonAnimated } from "@zentauri-ui/zentauri-components/ui/buttons/animated";
+
+import { Spinner } from "@zentauri-ui/zentauri-components/ui/spinner/animated";
+```
+
 #### Usage
 
 ```tsx
@@ -255,10 +280,13 @@ https://zentauri-ui.vercel.app/
 
 From this package directory in the monorepo:
 
-- `pnpm build` (or `npm run build`) — production bundle via `tsup` (Rollup treeshake + `scripts/prepend-use-client.mjs` via `onSuccess` so each `dist/ui/*.mjs` / `*.js` entry starts with `"use client"`)
+- `pnpm build` (or `npm run build`) — production bundle via `tsup` (Rollup treeshake + `scripts/prepend-use-client.mjs` via `onSuccess` so each UI entry under `dist/ui/`, including `dist/ui/<name>/animated.*`, starts with `"use client"` where needed)
 - `pnpm dev` — `tsup` watch mode (same `onSuccess` hook after each rebuild)
 - `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests
 
+## Github Release log
+https://github.com/ShubhamTiwari909/zentauri-ui/releases
+
 ## NOTE:
 
 This package is in initial phase of development and you might see some minor or major breaking changes in the future. If you want to contribute to this project, email me at @shubhmtiwri00@gmail.com or ping me on linkeded https://www.linkedin.com/in/shubham-tiwari-b7544b193/

package/dist/chunk-2P3UU2J3.mjs

@@ -0,0 +1,510 @@
+import { cn } from './chunk-DFEZH7TC.mjs';
+import { cva } from 'class-variance-authority';
+import { createContext, useContext, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var shimmerLayer = "[background-size:220%_100%] [background-repeat:no-repeat] [background-position:100%_0%]";
+var skeletonShimmerGradientClasses = {
+  default: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.22),rgba(255,255,255,0.04))]`,
+  subtle: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0.14),rgba(255,255,255,0.03))]`,
+  muted: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.1),rgba(255,255,255,0.02))]`,
+  sky: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(56,189,248,0.1),rgba(56,189,248,0.42),rgba(56,189,248,0.1))]`,
+  rose: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,113,133,0.1),rgba(251,113,133,0.42),rgba(251,113,133,0.1))]`,
+  purple: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(192,132,252,0.1),rgba(192,132,252,0.42),rgba(192,132,252,0.1))]`,
+  pink: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(244,114,182,0.1),rgba(244,114,182,0.42),rgba(244,114,182,0.1))]`,
+  orange: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,146,60,0.1),rgba(251,146,60,0.42),rgba(251,146,60,0.1))]`,
+  yellow: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(250,204,21,0.12),rgba(250,204,21,0.4),rgba(250,204,21,0.12))]`,
+  teal: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(45,212,191,0.1),rgba(45,212,191,0.42),rgba(45,212,191,0.1))]`,
+  indigo: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(129,140,248,0.1),rgba(129,140,248,0.42),rgba(129,140,248,0.1))]`,
+  emerald: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(52,211,153,0.1),rgba(52,211,153,0.42),rgba(52,211,153,0.1))]`,
+  gray: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(161,161,170,0.1),rgba(161,161,170,0.38),rgba(161,161,170,0.1))]`,
+  amber: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,191,36,0.12),rgba(251,191,36,0.42),rgba(251,191,36,0.12))]`,
+  violet: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(167,139,250,0.1),rgba(167,139,250,0.42),rgba(167,139,250,0.1))]`,
+  "gradient-blue": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(100,149,237,0.1),rgba(100,149,237,0.42),rgba(100,149,237,0.1))]`,
+  "gradient-green": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(52,211,153,0.1),rgba(52,211,153,0.42),rgba(52,211,153,0.1))]`,
+  "gradient-red": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(239,68,68,0.1),rgba(239,68,68,0.42),rgba(239,68,68,0.1))]`,
+  "gradient-yellow": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(250,204,21,0.12),rgba(250,204,21,0.42),rgba(250,204,21,0.12))]`,
+  "gradient-purple": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(167,139,250,0.1),rgba(167,139,250,0.42),rgba(167,139,250,0.1))]`,
+  "gradient-teal": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(45,212,191,0.1),rgba(45,212,191,0.42),rgba(45,212,191,0.1))]`,
+  "gradient-indigo": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(129,140,248,0.1),rgba(129,140,248,0.42),rgba(129,140,248,0.1))]`,
+  "gradient-pink": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(244,114,182,0.1),rgba(244,114,182,0.42),rgba(244,114,182,0.1))]`,
+  "gradient-orange": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,146,60,0.1),rgba(251,146,60,0.42),rgba(251,146,60,0.1))]`
+};
+var skeletonVariants = cva(
+  "relative overflow-hidden bg-white/10 text-transparent",
+  {
+    variants: {
+      appearance: {
+        default: "bg-white/10",
+        subtle: "bg-white/[0.07]",
+        muted: "bg-slate-800/80",
+        sky: "bg-sky-500/10",
+        rose: "bg-rose-500/10",
+        purple: "bg-purple-500/10",
+        pink: "bg-pink-500/10",
+        orange: "bg-orange-500/10",
+        yellow: "bg-yellow-500/10",
+        teal: "bg-teal-500/10",
+        indigo: "bg-indigo-500/10",
+        emerald: "bg-emerald-500/10",
+        gray: "bg-gray-500/10",
+        amber: "bg-amber-500/10",
+        violet: "bg-violet-500/10",
+        "gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600",
+        "gradient-green": "bg-gradient-to-r from-green-600 to-lime-600",
+        "gradient-red": "bg-gradient-to-r from-red-600 to-pink-600",
+        "gradient-yellow": "bg-gradient-to-r from-yellow-600 to-orange-600",
+        "gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600",
+        "gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600",
+        "gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600",
+        "gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600",
+        "gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600"
+      },
+      size: {
+        sm: "min-h-3",
+        md: "min-h-4",
+        lg: "min-h-6"
+      },
+      rounded: {
+        none: "rounded-none",
+        sm: "rounded-md",
+        md: "rounded-lg",
+        lg: "rounded-xl",
+        full: "rounded-full"
+      },
+      animation: {
+        none: "",
+        shimmer: "",
+        pulse: ""
+      },
+      shimmerTone: {
+        default: "",
+        subtle: "",
+        muted: "",
+        sky: "",
+        rose: "",
+        purple: "",
+        pink: "",
+        orange: "",
+        yellow: "",
+        teal: "",
+        indigo: "",
+        emerald: "",
+        gray: "",
+        amber: "",
+        violet: "",
+        "gradient-blue": "",
+        "gradient-green": "",
+        "gradient-red": "",
+        "gradient-yellow": "",
+        "gradient-purple": "",
+        "gradient-teal": "",
+        "gradient-indigo": "",
+        "gradient-pink": "",
+        "gradient-orange": ""
+      }
+    },
+    compoundVariants: [
+      {
+        animation: "shimmer",
+        shimmerTone: "default",
+        class: skeletonShimmerGradientClasses.default
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "muted",
+        class: skeletonShimmerGradientClasses.subtle
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "subtle",
+        class: skeletonShimmerGradientClasses.subtle
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "sky",
+        class: skeletonShimmerGradientClasses.sky
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "rose",
+        class: skeletonShimmerGradientClasses.rose
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "purple",
+        class: skeletonShimmerGradientClasses.purple
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "pink",
+        class: skeletonShimmerGradientClasses.pink
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "orange",
+        class: skeletonShimmerGradientClasses.orange
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "yellow",
+        class: skeletonShimmerGradientClasses.yellow
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "teal",
+        class: skeletonShimmerGradientClasses.teal
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "indigo",
+        class: skeletonShimmerGradientClasses.indigo
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "emerald",
+        class: skeletonShimmerGradientClasses.emerald
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gray",
+        class: skeletonShimmerGradientClasses.gray
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "amber",
+        class: skeletonShimmerGradientClasses.amber
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "violet",
+        class: skeletonShimmerGradientClasses.violet
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-blue",
+        class: skeletonShimmerGradientClasses["gradient-blue"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-green",
+        class: skeletonShimmerGradientClasses["gradient-green"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-red",
+        class: skeletonShimmerGradientClasses["gradient-red"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-yellow",
+        class: skeletonShimmerGradientClasses["gradient-yellow"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-purple",
+        class: skeletonShimmerGradientClasses["gradient-purple"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-teal",
+        class: skeletonShimmerGradientClasses["gradient-teal"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-indigo",
+        class: skeletonShimmerGradientClasses["gradient-indigo"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-pink",
+        class: skeletonShimmerGradientClasses["gradient-pink"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-orange",
+        class: skeletonShimmerGradientClasses["gradient-orange"]
+      },
+      {
+        animation: "pulse",
+        class: ""
+      }
+    ],
+    defaultVariants: {
+      appearance: "default",
+      size: "md",
+      rounded: "md",
+      animation: "shimmer",
+      shimmerTone: "default"
+    }
+  }
+);
+var skeletonTextLineVariants = cva("block w-full", {
+  variants: {
+    size: {
+      sm: "h-2.5",
+      md: "h-3",
+      lg: "h-4"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var SkeletonAnimationContext = createContext(void 0);
+function useSkeletonAnimation(fallback) {
+  const value = useContext(SkeletonAnimationContext);
+  return value ?? fallback;
+}
+function skeletonMotionClass(animation) {
+  if (animation === "none") {
+    return "";
+  }
+  return "animate-pulse";
+}
+function SkeletonBase(props) {
+  const {
+    className,
+    appearance,
+    size,
+    rounded,
+    animation = "shimmer",
+    shimmerTone,
+    busy,
+    children,
+    ref,
+    as: Wrapper = "div",
+    ...rest
+  } = props;
+  const ctx = useMemo(() => animation, [animation]);
+  return /* @__PURE__ */ jsx(SkeletonAnimationContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    Wrapper,
+    {
+      ref,
+      "data-slot": "skeleton",
+      "aria-hidden": true,
+      "aria-busy": busy ? true : void 0,
+      className: cn(
+        skeletonVariants({
+          appearance,
+          size,
+          rounded,
+          animation,
+          shimmerTone
+        }),
+        skeletonMotionClass(animation),
+        className
+      ),
+      ...rest,
+      children
+    }
+  ) });
+}
+SkeletonBase.displayName = "Skeleton";
+function SkeletonTextBase(props) {
+  const {
+    lines = 3,
+    className,
+    appearance,
+    size,
+    rounded,
+    animation = "shimmer",
+    shimmerTone,
+    busy,
+    ref,
+    as: Wrapper = "div"
+  } = props;
+  const effectiveAnimation = useSkeletonAnimation(animation);
+  const motionClass = skeletonMotionClass(effectiveAnimation);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "skeleton-text",
+      className: cn("flex w-full flex-col gap-2", className),
+      "aria-hidden": true,
+      "aria-busy": busy ? true : void 0,
+      children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx(
+        Wrapper,
+        {
+          ref: index === 0 ? ref : void 0,
+          className: cn(
+            skeletonVariants({
+              appearance,
+              size,
+              rounded,
+              animation: effectiveAnimation,
+              shimmerTone
+            }),
+            skeletonTextLineVariants({ size }),
+            index === lines - 1 ? "w-3/5" : "w-full",
+            motionClass
+          )
+        },
+        index
+      ))
+    }
+  );
+}
+SkeletonTextBase.displayName = "SkeletonText";
+var avatarSizeClass = {
+  xs: "size-6",
+  sm: "size-8",
+  md: "size-10",
+  lg: "size-12",
+  xl: "size-14",
+  "2xl": "size-16"
+};
+function SkeletonAvatarBase(props) {
+  const {
+    avatarSize = "md",
+    className,
+    appearance,
+    size,
+    rounded = "full",
+    animation,
+    shimmerTone,
+    busy,
+    ref,
+    as: Wrapper = "div",
+    ...rest
+  } = props;
+  const effectiveAnimation = useSkeletonAnimation(animation ?? "shimmer");
+  const motionClass = skeletonMotionClass(effectiveAnimation);
+  return /* @__PURE__ */ jsx(
+    Wrapper,
+    {
+      ref,
+      "data-slot": "skeleton-avatar",
+      "aria-hidden": true,
+      "aria-busy": busy ? true : void 0,
+      className: cn(
+        skeletonVariants({
+          appearance,
+          size,
+          rounded,
+          animation: effectiveAnimation,
+          shimmerTone
+        }),
+        avatarSizeClass[avatarSize],
+        motionClass,
+        className
+      ),
+      ...rest
+    }
+  );
+}
+SkeletonAvatarBase.displayName = "SkeletonAvatar";
+function SkeletonCardBase(props) {
+  const {
+    className,
+    busy,
+    animation = "shimmer",
+    shimmerTone,
+    appearance,
+    size,
+    rounded,
+    ref
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "skeleton-card",
+      className: cn("w-full max-w-sm", className),
+      "aria-busy": busy ? true : void 0,
+      children: /* @__PURE__ */ jsxs(
+        SkeletonBase,
+        {
+          rounded: "lg",
+          animation,
+          shimmerTone,
+          appearance,
+          size,
+          busy,
+          className: "flex flex-col gap-4 p-4",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx(
+                SkeletonAvatarBase,
+                {
+                  appearance,
+                  size,
+                  animation,
+                  shimmerTone,
+                  rounded
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2", children: /* @__PURE__ */ jsx(
+                SkeletonTextBase,
+                {
+                  lines: 2,
+                  appearance,
+                  size,
+                  animation,
+                  shimmerTone
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              SkeletonTextBase,
+              {
+                lines: 4,
+                appearance,
+                size,
+                animation,
+                shimmerTone
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+SkeletonCardBase.displayName = "SkeletonCard";
+var buttonHeight = {
+  sm: "h-8 w-24",
+  md: "h-10 w-32",
+  lg: "h-12 w-40"
+};
+function SkeletonButtonBase(props) {
+  const {
+    buttonSize = "md",
+    className,
+    appearance,
+    size,
+    rounded = "md",
+    animation,
+    shimmerTone,
+    busy,
+    ref,
+    ...rest
+  } = props;
+  const effectiveAnimation = useSkeletonAnimation(animation ?? "shimmer");
+  const motionClass = skeletonMotionClass(effectiveAnimation);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "skeleton-button",
+      "aria-hidden": true,
+      "aria-busy": busy ? true : void 0,
+      className: cn(
+        skeletonVariants({
+          appearance,
+          size,
+          rounded,
+          animation: effectiveAnimation,
+          shimmerTone
+        }),
+        buttonHeight[buttonSize],
+        motionClass,
+        className
+      ),
+      ...rest
+    }
+  );
+}
+SkeletonButtonBase.displayName = "SkeletonButton";
+
+export { SkeletonAvatarBase, SkeletonBase, SkeletonButtonBase, SkeletonCardBase, SkeletonTextBase, skeletonShimmerGradientClasses, skeletonTextLineVariants, skeletonVariants, useSkeletonAnimation };
+//# sourceMappingURL=chunk-2P3UU2J3.mjs.map
+//# sourceMappingURL=chunk-2P3UU2J3.mjs.map