@zentauri-ui/zentauri-components 1.2.0 → 1.3.0

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/accordion-base-qVomr7f_.d.mts

@@ -0,0 +1,66 @@
+import { Transition } from 'framer-motion';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode, HTMLAttributes, Ref } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+/** Easing and duration presets for accordion panel open/close (opacity only). */
+type AccordionTransition = "none" | "default" | "smooth" | "slow";
+type AccordionTransitionPresets = Record<AccordionTransition, Transition>;
+declare const accordionContentTransitionPresets: AccordionTransitionPresets;
+
+declare const accordionVariants: (props?: ({
+    appearance?: "default" | "outline" | "ghost" | "card" | "separated" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionItemVariants: (props?: ({
+    appearance?: "default" | "outline" | "ghost" | "card" | "separated" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type AccordionVariantProps = VariantProps<typeof accordionVariants>;
+type AccordionType = "single" | "multiple";
+type AccordionBaseProps = AccordionVariantProps & {
+    type?: AccordionType;
+    /** Controlled value for `single` mode. */
+    value?: string;
+    /** Controlled values for `multiple` mode. */
+    values?: string[];
+    defaultValue?: string;
+    defaultValues?: string[];
+    onValueChange?: (value: string | undefined) => void;
+    onValuesChange?: (values: string[]) => void;
+    className?: string;
+    children?: ReactNode;
+};
+type AccordionProps = AccordionBaseProps;
+type AccordionItemProps = HTMLAttributes<HTMLDivElement> & {
+    value: string;
+    ref?: Ref<HTMLDivElement>;
+};
+type AccordionTriggerProps = HTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+};
+type AccordionContentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+};
+
+declare function AccordionItem({ className, value, children, ref, ...rest }: AccordionItemProps): react_jsx_runtime.JSX.Element;
+declare namespace AccordionItem {
+    var displayName: string;
+}
+declare function AccordionTrigger({ className, children, ref, ...rest }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
+declare namespace AccordionTrigger {
+    var displayName: string;
+}
+declare function AccordionContent({ className, children, ref, }: AccordionContentProps): react_jsx_runtime.JSX.Element | null;
+declare namespace AccordionContent {
+    var displayName: string;
+}
+
+export { type AccordionProps as A, type AccordionBaseProps as a, AccordionContent as b, type AccordionContentProps as c, AccordionItem as d, type AccordionItemProps as e, type AccordionTransition as f, AccordionTrigger as g, type AccordionTriggerProps as h, type AccordionType as i, accordionContentVariants as j, accordionItemVariants as k, accordionTriggerVariants as l, accordionVariants as m, accordionContentTransitionPresets as n };

package/dist/accordion-base-qVomr7f_.d.ts

@@ -0,0 +1,66 @@
+import { Transition } from 'framer-motion';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode, HTMLAttributes, Ref } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+/** Easing and duration presets for accordion panel open/close (opacity only). */
+type AccordionTransition = "none" | "default" | "smooth" | "slow";
+type AccordionTransitionPresets = Record<AccordionTransition, Transition>;
+declare const accordionContentTransitionPresets: AccordionTransitionPresets;
+
+declare const accordionVariants: (props?: ({
+    appearance?: "default" | "outline" | "ghost" | "card" | "separated" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionItemVariants: (props?: ({
+    appearance?: "default" | "outline" | "ghost" | "card" | "separated" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type AccordionVariantProps = VariantProps<typeof accordionVariants>;
+type AccordionType = "single" | "multiple";
+type AccordionBaseProps = AccordionVariantProps & {
+    type?: AccordionType;
+    /** Controlled value for `single` mode. */
+    value?: string;
+    /** Controlled values for `multiple` mode. */
+    values?: string[];
+    defaultValue?: string;
+    defaultValues?: string[];
+    onValueChange?: (value: string | undefined) => void;
+    onValuesChange?: (values: string[]) => void;
+    className?: string;
+    children?: ReactNode;
+};
+type AccordionProps = AccordionBaseProps;
+type AccordionItemProps = HTMLAttributes<HTMLDivElement> & {
+    value: string;
+    ref?: Ref<HTMLDivElement>;
+};
+type AccordionTriggerProps = HTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+};
+type AccordionContentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+};
+
+declare function AccordionItem({ className, value, children, ref, ...rest }: AccordionItemProps): react_jsx_runtime.JSX.Element;
+declare namespace AccordionItem {
+    var displayName: string;
+}
+declare function AccordionTrigger({ className, children, ref, ...rest }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
+declare namespace AccordionTrigger {
+    var displayName: string;
+}
+declare function AccordionContent({ className, children, ref, }: AccordionContentProps): react_jsx_runtime.JSX.Element | null;
+declare namespace AccordionContent {
+    var displayName: string;
+}
+
+export { type AccordionProps as A, type AccordionBaseProps as a, AccordionContent as b, type AccordionContentProps as c, AccordionItem as d, type AccordionItemProps as e, type AccordionTransition as f, AccordionTrigger as g, type AccordionTriggerProps as h, type AccordionType as i, accordionContentVariants as j, accordionItemVariants as k, accordionTriggerVariants as l, accordionVariants as m, accordionContentTransitionPresets as n };

package/dist/avatar-base-s4dYg-24.d.mts

@@ -0,0 +1,49 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithRef, ElementType, ComponentPropsWithoutRef, Ref } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const avatarVariants: (props?: ({
+    appearance?: "default" | "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" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const avatarImageVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const avatarFallbackVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const avatarGroupVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+type AvatarVariantProps = VariantProps<typeof avatarVariants>;
+interface AvatarBaseProps extends ComponentPropsWithRef<"span"> {
+    size?: AvatarVariantProps["size"];
+    appearance?: AvatarVariantProps["appearance"];
+    as?: ElementType;
+}
+type AvatarProps = Omit<AvatarBaseProps, "as">;
+type AvatarImageProps = ComponentPropsWithoutRef<"img">;
+type AvatarFallbackProps = ComponentPropsWithoutRef<"span"> & {
+    delayMs?: number;
+};
+type AvatarGroupProps = ComponentPropsWithoutRef<"div"> & {
+    /** Max avatars before +N overflow label */
+    max?: number;
+};
+
+declare function AvatarImage({ className, onLoad, onError, ref, ...rest }: AvatarImageProps & {
+    ref?: Ref<HTMLImageElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace AvatarImage {
+    var displayName: string;
+}
+declare function AvatarFallback({ className, delayMs, ref, ...rest }: AvatarFallbackProps & {
+    ref?: Ref<HTMLSpanElement>;
+}): react_jsx_runtime.JSX.Element | null;
+declare namespace AvatarFallback {
+    var displayName: string;
+}
+declare function AvatarGroup({ className, max, children, ref, ...rest }: AvatarGroupProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace AvatarGroup {
+    var displayName: string;
+}
+
+export { type AvatarProps as A, type AvatarBaseProps as a, AvatarFallback as b, type AvatarFallbackProps as c, AvatarGroup as d, type AvatarGroupProps as e, AvatarImage as f, type AvatarImageProps as g, avatarFallbackVariants as h, avatarGroupVariants as i, avatarImageVariants as j, avatarVariants as k };

package/dist/avatar-base-s4dYg-24.d.ts

@@ -0,0 +1,49 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithRef, ElementType, ComponentPropsWithoutRef, Ref } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const avatarVariants: (props?: ({
+    appearance?: "default" | "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" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const avatarImageVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const avatarFallbackVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const avatarGroupVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+type AvatarVariantProps = VariantProps<typeof avatarVariants>;
+interface AvatarBaseProps extends ComponentPropsWithRef<"span"> {
+    size?: AvatarVariantProps["size"];
+    appearance?: AvatarVariantProps["appearance"];
+    as?: ElementType;
+}
+type AvatarProps = Omit<AvatarBaseProps, "as">;
+type AvatarImageProps = ComponentPropsWithoutRef<"img">;
+type AvatarFallbackProps = ComponentPropsWithoutRef<"span"> & {
+    delayMs?: number;
+};
+type AvatarGroupProps = ComponentPropsWithoutRef<"div"> & {
+    /** Max avatars before +N overflow label */
+    max?: number;
+};
+
+declare function AvatarImage({ className, onLoad, onError, ref, ...rest }: AvatarImageProps & {
+    ref?: Ref<HTMLImageElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace AvatarImage {
+    var displayName: string;
+}
+declare function AvatarFallback({ className, delayMs, ref, ...rest }: AvatarFallbackProps & {
+    ref?: Ref<HTMLSpanElement>;
+}): react_jsx_runtime.JSX.Element | null;
+declare namespace AvatarFallback {
+    var displayName: string;
+}
+declare function AvatarGroup({ className, max, children, ref, ...rest }: AvatarGroupProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace AvatarGroup {
+    var displayName: string;
+}
+
+export { type AvatarProps as A, type AvatarBaseProps as a, AvatarFallback as b, type AvatarFallbackProps as c, AvatarGroup as d, type AvatarGroupProps as e, AvatarImage as f, type AvatarImageProps as g, avatarFallbackVariants as h, avatarGroupVariants as i, avatarImageVariants as j, avatarVariants as k };

package/dist/card-base-CIGac8D_.d.mts

@@ -0,0 +1,70 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithRef, ElementType, ReactNode, Ref, HTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const cardVariants: (props?: ({
+    appearance?: "default" | "glass" | "outline" | "ghost" | "elevated" | "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" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "sm" | "md" | "lg" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const cardHeaderVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const cardFooterVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const cardTitleVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const cardDescriptionVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type CardVariantProps = VariantProps<typeof cardVariants>;
+interface CardBaseProps extends ComponentPropsWithRef<"article"> {
+    appearance?: CardVariantProps["appearance"];
+    size?: CardVariantProps["size"];
+    rounded?: CardVariantProps["rounded"];
+    as?: ElementType;
+}
+type CardProps = Omit<CardBaseProps, "as">;
+type CardSectionProps = {
+    className?: string;
+    children?: ReactNode;
+};
+type CardTitleProps = {
+    as?: "h2" | "h3" | "h4" | "h5" | "h6";
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLHeadingElement>;
+} & Omit<HTMLAttributes<HTMLHeadingElement>, "className" | "children">;
+type CardDescriptionProps = {
+    as?: "p" | "span" | "div";
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLElement>;
+} & Omit<HTMLAttributes<HTMLElement>, "className" | "children">;
+
+declare function CardHeader({ className, children }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace CardHeader {
+    var displayName: string;
+}
+declare function CardBody({ className, children }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace CardBody {
+    var displayName: string;
+}
+declare function CardFooter({ className, children }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace CardFooter {
+    var displayName: string;
+}
+declare function CardTitle({ className, children, as, ref, ...rest }: CardTitleProps): react_jsx_runtime.JSX.Element;
+declare namespace CardTitle {
+    var displayName: string;
+}
+declare function CardDescription({ className, children, as, ref, ...rest }: CardDescriptionProps): react_jsx_runtime.JSX.Element;
+declare namespace CardDescription {
+    var displayName: string;
+}
+
+export { type CardProps as C, type CardBaseProps as a, CardBody as b, CardDescription as c, type CardDescriptionProps as d, CardFooter as e, CardHeader as f, type CardSectionProps as g, CardTitle as h, type CardTitleProps as i, type CardVariantProps as j, cardDescriptionVariants as k, cardFooterVariants as l, cardHeaderVariants as m, cardTitleVariants as n, cardVariants as o };

package/dist/card-base-CIGac8D_.d.ts

@@ -0,0 +1,70 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithRef, ElementType, ReactNode, Ref, HTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const cardVariants: (props?: ({
+    appearance?: "default" | "glass" | "outline" | "ghost" | "elevated" | "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" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "sm" | "md" | "lg" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const cardHeaderVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const cardFooterVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const cardTitleVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const cardDescriptionVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type CardVariantProps = VariantProps<typeof cardVariants>;
+interface CardBaseProps extends ComponentPropsWithRef<"article"> {
+    appearance?: CardVariantProps["appearance"];
+    size?: CardVariantProps["size"];
+    rounded?: CardVariantProps["rounded"];
+    as?: ElementType;
+}
+type CardProps = Omit<CardBaseProps, "as">;
+type CardSectionProps = {
+    className?: string;
+    children?: ReactNode;
+};
+type CardTitleProps = {
+    as?: "h2" | "h3" | "h4" | "h5" | "h6";
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLHeadingElement>;
+} & Omit<HTMLAttributes<HTMLHeadingElement>, "className" | "children">;
+type CardDescriptionProps = {
+    as?: "p" | "span" | "div";
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLElement>;
+} & Omit<HTMLAttributes<HTMLElement>, "className" | "children">;
+
+declare function CardHeader({ className, children }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace CardHeader {
+    var displayName: string;
+}
+declare function CardBody({ className, children }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace CardBody {
+    var displayName: string;
+}
+declare function CardFooter({ className, children }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace CardFooter {
+    var displayName: string;
+}
+declare function CardTitle({ className, children, as, ref, ...rest }: CardTitleProps): react_jsx_runtime.JSX.Element;
+declare namespace CardTitle {
+    var displayName: string;
+}
+declare function CardDescription({ className, children, as, ref, ...rest }: CardDescriptionProps): react_jsx_runtime.JSX.Element;
+declare namespace CardDescription {
+    var displayName: string;
+}
+
+export { type CardProps as C, type CardBaseProps as a, CardBody as b, CardDescription as c, type CardDescriptionProps as d, CardFooter as e, CardHeader as f, type CardSectionProps as g, CardTitle as h, type CardTitleProps as i, type CardVariantProps as j, cardDescriptionVariants as k, cardFooterVariants as l, cardHeaderVariants as m, cardTitleVariants as n, cardVariants as o };