@neynar/ui 0.3.1 → 0.5.0

package/dist/components/ui/aspect-ratio.d.ts

@@ -1,128 +1,11 @@
-import * as React from "react";
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+type AspectRatioProps = React.ComponentProps<"div"> & {
+    /** Aspect ratio as width/height (e.g., 16/9, 1, 4/3) */
+    ratio: number;
+};
 /**
- * AspectRatio - Maintains consistent width-to-height ratios for content
- *
- * A foundational layout component that preserves specific aspect ratios regardless
- * of container size. Essential for responsive images, videos, and media content that
- * needs consistent proportions across different screen sizes. Built on Radix UI
- * primitives with zero JavaScript runtime overhead.
- *
- * This component creates a CSS-based aspect ratio container using the modern
- * `aspect-ratio` property, ensuring content maintains its intended proportions
- * without layout shifts or JavaScript calculations. The component acts as a
- * constraint wrapper that forces its children to maintain the specified ratio.
- *
- * @example Basic image with 16:9 aspect ratio
- * ```tsx
- * <div className="w-[450px]">
- *   <AspectRatio ratio={16 / 9}>
- *     <img
- *       src="landscape.jpg"
- *       alt="Beautiful landscape"
- *       className="w-full h-full object-cover rounded-md"
- *     />
- *   </AspectRatio>
- * </div>
- * ```
- *
- * @example Square avatar container (1:1 ratio)
- * ```tsx
- * <AspectRatio ratio={1}>
- *   <img
- *     src="avatar.jpg"
- *     alt="User profile"
- *     className="w-full h-full object-cover rounded-full"
- *   />
- * </AspectRatio>
- * ```
- *
- * @example Video player with 16:9 widescreen ratio
- * ```tsx
- * <div className="w-full max-w-2xl">
- *   <AspectRatio ratio={16 / 9}>
- *     <video
- *       src="video.mp4"
- *       controls
- *       className="w-full h-full object-cover rounded-lg"
- *     />
- *   </AspectRatio>
- * </div>
- * ```
- *
- * @example Portrait orientation for image galleries
- * ```tsx
- * <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
- *   {images.map((image) => (
- *     <AspectRatio key={image.id} ratio={3 / 4}>
- *       <img
- *         src={image.src}
- *         alt={image.alt}
- *         className="w-full h-full object-cover rounded-md"
- *       />
- *     </AspectRatio>
- *   ))}
- * </div>
- * ```
- *
- * @example Placeholder content for loading states
- * ```tsx
- * <AspectRatio ratio={16 / 9}>
- *   <div className="flex items-center justify-center bg-muted border-2 border-dashed border-muted-foreground/25 rounded-md">
- *     <div className="text-center text-muted-foreground">
- *       <ImageIcon className="h-12 w-12 mx-auto mb-2" />
- *       <p className="text-sm">Loading image...</p>
- *     </div>
- *   </div>
- * </AspectRatio>
- * ```
- *
- * @example Using asChild for composition
- * ```tsx
- * <AspectRatio ratio={16 / 9} asChild>
- *   <div className="bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg p-6">
- *     <h3 className="text-white text-xl font-bold">Custom Content</h3>
- *   </div>
- * </AspectRatio>
- * ```
- *
- * @example Common aspect ratios for different use cases
- * ```tsx
- * // Square (social media posts, avatars)
- * <AspectRatio ratio={1}>Content</AspectRatio>
- *
- * // 16:9 (videos, hero images, banners)
- * <AspectRatio ratio={16 / 9}>Content</AspectRatio>
- *
- * // 4:3 (traditional photos, tablets)
- * <AspectRatio ratio={4 / 3}>Content</AspectRatio>
- *
- * // 3:2 (35mm photos, DSLR images)
- * <AspectRatio ratio={3 / 2}>Content</AspectRatio>
- *
- * // 9:16 (mobile stories, vertical videos)
- * <AspectRatio ratio={9 / 16}>Content</AspectRatio>
- * ```
- *
- * @param ratio - The desired aspect ratio as width/height (e.g., 16/9, 4/3, 1)
- * @param children - Content to be constrained within the aspect ratio
- * @param className - Additional CSS classes for styling
- * @param asChild - Merge props with child element instead of wrapping
- * @param ref - React ref forwarded to the container element
- *
- * @accessibility
- * - Inherits all accessibility features from Radix UI AspectRatio primitive
- * - Preserves semantic meaning and structure of child content
- * - Does not interfere with screen reader navigation or content reading
- * - Maintains proper keyboard navigation for interactive child elements
- * - Supports ARIA attributes passed through props
- * - Container is semantically neutral and doesn't affect focus management
- *
- * @see {@link https://ui.shadcn.com/docs/components/aspect-ratio} shadcn/ui AspectRatio
- * @see {@link https://www.radix-ui.com/primitives/docs/components/aspect-ratio} Radix UI AspectRatio
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio} CSS aspect-ratio property
- * @since 1.0.0
+ * Container that maintains a consistent aspect ratio.
+ * Automatically adjusts height based on width to preserve proportions.
  */
-declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { AspectRatio };
+declare function AspectRatio({ ratio, className, ...props }: AspectRatioProps): import("react/jsx-runtime").JSX.Element;
+export { AspectRatio, type AspectRatioProps };
 //# sourceMappingURL=aspect-ratio.d.ts.map

package/dist/components/ui/aspect-ratio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/ui/aspect-ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAkBrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0HG;AACH,QAAA,MAAM,WAAW,iKAOf,CAAC;AAIH,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/ui/aspect-ratio.tsx"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAapE;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC"}

package/dist/components/ui/aspect-ratio.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function AspectRatio({ ratio, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "aspect-ratio",
+      style: {
+        "--ratio": ratio
+      },
+      className: cn("relative aspect-(--ratio)", className),
+      ...props
+    }
+  );
+}
+export {
+  AspectRatio
+};
+//# sourceMappingURL=aspect-ratio.js.map

package/dist/components/ui/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.js","sources":["../../../src/components/ui/aspect-ratio.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\";\n\ntype AspectRatioProps = React.ComponentProps<\"div\"> & {\n  /** Aspect ratio as width/height (e.g., 16/9, 1, 4/3) */\n  ratio: number;\n};\n\n/**\n * Container that maintains a consistent aspect ratio.\n * Automatically adjusts height based on width to preserve proportions.\n */\nfunction AspectRatio({ ratio, className, ...props }: AspectRatioProps) {\n  return (\n    <div\n      data-slot=\"aspect-ratio\"\n      style={\n        {\n          \"--ratio\": ratio,\n        } as React.CSSProperties\n      }\n      className={cn(\"relative aspect-(--ratio)\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { AspectRatio, type AspectRatioProps };\n"],"names":[],"mappings":";;AAWA,SAAS,YAAY,EAAE,OAAO,WAAW,GAAG,SAA2B;AACrE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,OACE;AAAA,QACE,WAAW;AAAA,MAAA;AAAA,MAGf,WAAW,GAAG,6BAA6B,SAAS;AAAA,MACnD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/ui/avatar.d.ts

@@ -1,328 +1,42 @@
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
+type AvatarProps = AvatarPrimitive.Root.Props & {
+    /** Avatar size variant. @default "default" */
+    size?: "default" | "sm" | "lg";
+};
+type AvatarImageProps = AvatarPrimitive.Image.Props;
+type AvatarFallbackProps = AvatarPrimitive.Fallback.Props;
+type AvatarBadgeProps = React.ComponentProps<"span">;
+type AvatarGroupProps = React.ComponentProps<"div">;
+type AvatarGroupCountProps = React.ComponentProps<"div">;
 /**
- * Avatar - A flexible container for displaying user profile images with graceful fallback support
- *
- * The Avatar component is built on Radix UI's Avatar primitive and provides a robust solution
- * for displaying user profile pictures throughout your application. It automatically handles
- * image loading states and displays fallback content when images fail to load or are unavailable.
- *
- * This component follows the shadcn/ui design system principles and provides a consistent
- * approach to user representation across all applications.
- *
- * ## Features
- * - **Automatic loading states**: Seamlessly handles image loading and error states
- * - **Graceful fallbacks**: Shows fallback content when images are unavailable
- * - **Flexible sizing**: Easy customization through Tailwind CSS size utilities
- * - **Shape variants**: Circular by default with support for rounded corners
- * - **Accessibility first**: Built-in ARIA attributes and keyboard navigation
- * - **Composable design**: Works with AvatarImage and AvatarFallback sub-components
- * - **Polymorphic rendering**: Supports asChild prop for custom element rendering
- *
- * ## Common Use Cases
- * - User profile displays in headers and navigation
- * - Comment sections and author attribution
- * - Team member listings and directories
- * - Avatar groups with overlapping layouts
- * - Organization logos and brand representation
- * - Loading states and placeholder content
- *
- * ## Size Variants
- * - `size-6` (24px) - Small avatars for dense layouts
- * - `size-8` (32px) - Default size for most use cases
- * - `size-10` (40px) - Medium avatars for lists
- * - `size-12` (48px) - Large avatars for profiles
- * - `size-16` (64px) - Extra large for main profile displays
- *
- * @example Basic avatar with image and fallback
- * ```tsx
- * <Avatar>
- *   <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
- *   <AvatarFallback>CN</AvatarFallback>
- * </Avatar>
- * ```
- *
- * @example Custom sizing
- * ```tsx
- * <Avatar className="size-12">
- *   <AvatarImage src="/profile.jpg" alt="John Doe" />
- *   <AvatarFallback>JD</AvatarFallback>
- * </Avatar>
- * ```
- *
- * @example Avatar group with borders
- * ```tsx
- * <div className="flex -space-x-2">
- *   <Avatar className="border-2 border-background">
- *     <AvatarImage src="/user1.jpg" alt="User 1" />
- *     <AvatarFallback>U1</AvatarFallback>
- *   </Avatar>
- *   <Avatar className="border-2 border-background">
- *     <AvatarImage src="/user2.jpg" alt="User 2" />
- *     <AvatarFallback>U2</AvatarFallback>
- *   </Avatar>
- *   <Avatar className="border-2 border-background">
- *     <AvatarFallback>+3</AvatarFallback>
- *   </Avatar>
- * </div>
- * ```
- *
- * @example Square avatar for logos
- * ```tsx
- * <Avatar className="rounded-lg">
- *   <AvatarImage src="/company-logo.png" alt="Company" />
- *   <AvatarFallback>CO</AvatarFallback>
- * </Avatar>
- * ```
- *
- * @example With status indicator
- * ```tsx
- * <div className="relative">
- *   <Avatar>
- *     <AvatarImage src="/user.jpg" alt="Online user" />
- *     <AvatarFallback>OU</AvatarFallback>
- *   </Avatar>
- *   <div className="absolute bottom-0 right-0 size-3 bg-green-500 border-2 border-background rounded-full" />
- * </div>
- * ```
- *
- * @example Using asChild for custom elements
- * ```tsx
- * <Avatar asChild>
- *   <button onClick={handleClick}>
- *     <AvatarImage src="/user.jpg" alt="User Profile" />
- *     <AvatarFallback>UP</AvatarFallback>
- *   </button>
- * </Avatar>
- * ```
- *
- * @param className Additional CSS classes for styling. Common patterns include size utilities (size-6, size-8, size-10, size-12, size-16) and border radius overrides (rounded-lg, rounded-md, rounded-none)
- * @param children Should contain AvatarImage and AvatarFallback components for proper functionality
- * @param asChild Change the default rendered element for the one passed as a child, merging their props and behavior
- *   @default false
- *
- * @accessibility
- * - Automatically manages focus and ARIA attributes through Radix UI
- * - Always provide descriptive alt text for AvatarImage components
- * - Fallback content should be meaningful (user initials, not generic placeholders)
- * - Ensure sufficient color contrast for fallback text (minimum 4.5:1 ratio)
- * - Component supports keyboard navigation and screen reader announcements
- * - Status indicators should include appropriate ARIA labels
- * - When using asChild with interactive elements, ensure proper focus management
- *
- * @see {@link AvatarImage} The image component for displaying avatar pictures
- * @see {@link AvatarFallback} The fallback component for displaying initials or icons when images fail
- * @see {@link https://ui.shadcn.com/docs/components/avatar} shadcn/ui Avatar Documentation
- * @see {@link https://www.radix-ui.com/docs/primitives/components/avatar} Radix UI Avatar Primitive
- * @since 1.0.0
+ * Avatar root component with size variants.
+ * Displays user profile images with automatic fallback support.
  */
-declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function Avatar({ className, size, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
 /**
- * AvatarImage - The image element component for displaying avatar pictures
- *
- * This component renders the actual avatar image and automatically handles loading states.
- * It's built on Radix UI's Avatar.Image primitive which provides robust image loading
- * behavior - when the image fails to load or is still loading, it remains hidden
- * and the AvatarFallback will be displayed instead.
- *
- * ## Key Features
- * - **Automatic loading state management**: Handles "idle", "loading", "loaded", and "error" states
- * - **Graceful error handling**: Automatically falls back when images fail to load
- * - **Proper aspect ratio maintenance**: Square aspect ratio maintained by default
- * - **Flexible rendering**: Supports asChild for custom element composition
- * - **Loading status callbacks**: Provides onLoadingStatusChange for custom loading logic
- * - **Accessible implementation**: Proper alt text handling and ARIA support
- *
- * ## Loading States
- * The component automatically manages these states:
- * - **idle**: Initial state before loading begins
- * - **loading**: Image is currently being loaded
- * - **loaded**: Image has loaded successfully and is displayed
- * - **error**: Image failed to load, fallback will be shown
- *
- * @component
- * @example Basic usage with remote image
- * ```tsx
- * <Avatar>
- *   <AvatarImage
- *     src="https://github.com/username.png"
- *     alt="GitHub Profile Picture"
- *   />
- *   <AvatarFallback>GH</AvatarFallback>
- * </Avatar>
- * ```
- *
- * @example Local image with descriptive alt text
- * ```tsx
- * <Avatar>
- *   <AvatarImage
- *     src="/uploads/user-avatar.jpg"
- *     alt="John Doe's profile picture"
- *   />
- *   <AvatarFallback>JD</AvatarFallback>
- * </Avatar>
- * ```
- *
- * @example With loading status callback
- * ```tsx
- * <Avatar>
- *   <AvatarImage
- *     src="/large-image.jpg"
- *     alt="High resolution avatar"
- *     onLoadingStatusChange={(status) => {
- *       if (status === 'loading') {
- *         console.log('Image is loading...');
- *       } else if (status === 'error') {
- *         console.log('Failed to load image');
- *       }
- *     }}
- *   />
- *   <AvatarFallback>HR</AvatarFallback>
- * </Avatar>
- * ```
- *
- * @example Using asChild for custom image elements
- * ```tsx
- * <Avatar>
- *   <AvatarImage src="/user.jpg" alt="User" asChild>
- *     <img loading="lazy" decoding="async" />
- *   </AvatarImage>
- *   <AvatarFallback>U</AvatarFallback>
- * </Avatar>
- * ```
- *
- * @param src The URL of the image to display. Can be relative or absolute URL. When src changes, loading will restart
- * @param alt Descriptive alternative text for the image. Should describe the person or entity, not just "avatar" or "profile picture"
- * @param className Additional CSS classes to apply to the image element. Applied to the img element or asChild component
- * @param onLoadingStatusChange Optional callback fired when the loading status changes. Receives status: "idle" | "loading" | "loaded" | "error"
- * @param asChild Change the default rendered element for the one passed as a child, merging their props and behavior
- *   @default false
- *
- * @accessibility
- * - Always provide descriptive alt text that identifies the person or entity
- * - The image is automatically hidden from assistive technologies when loading or failed
- * - Use meaningful descriptions like "John Doe's profile picture" rather than generic terms
- * - The component handles ARIA attributes automatically via Radix UI
- * - Loading and error states are communicated to screen readers appropriately
- *
- * @see {@link Avatar} The parent container component
- * @see {@link AvatarFallback} The fallback component shown when image is unavailable
- * @see {@link https://www.radix-ui.com/docs/primitives/components/avatar#image} Radix UI Avatar.Image API
- * @since 1.0.0
+ * Avatar image element. Automatically shows fallback if image fails to load.
  */
-declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: AvatarImageProps): import("react/jsx-runtime").JSX.Element;
 /**
- * AvatarFallback - Fallback content displayed when the avatar image is unavailable
- *
- * This component renders alternative content when the AvatarImage is loading, fails to load,
- * or is not provided. It's built on Radix UI's Avatar.Fallback primitive and provides a
- * visually appealing placeholder that maintains the avatar's design consistency.
- *
- * ## When AvatarFallback is Shown
- * The fallback is automatically displayed in these scenarios:
- * - **Image loading**: While the AvatarImage is being loaded
- * - **Image error**: When the AvatarImage fails to load (broken URL, network error)
- * - **No image**: When no AvatarImage component is provided
- * - **Empty src**: When AvatarImage has no src prop or empty src
- *
- * ## Common Use Cases
- * - **User initials**: Most common pattern (2-3 characters)
- * - **Generic icons**: User, person, or company icons
- * - **Brand initials**: For organization avatars
- * - **Loading states**: With animations or loading indicators
- * - **Placeholder content**: For new or anonymous users
- * - **Custom graphics**: SVG icons or other visual elements
- *
- * ## Design Considerations
- * - Uses muted background color for subtle appearance
- * - Automatically centers content both horizontally and vertically
- * - Inherits size and border radius from parent Avatar
- * - Should complement the overall design system
- * - Supports delay to prevent flash during fast image loads
- *
- * @component
- * @example User initials (recommended pattern)
- * ```tsx
- * <Avatar>
- *   <AvatarImage src="/avatar.jpg" alt="John Doe" />
- *   <AvatarFallback>JD</AvatarFallback>
- * </Avatar>
- * ```
- *
- * @example Icon fallback for unknown users
- * ```tsx
- * import { User } from "lucide-react";
- *
- * <Avatar>
- *   <AvatarImage src="/unknown-user.jpg" alt="Anonymous User" />
- *   <AvatarFallback>
- *     <User className="size-4 text-muted-foreground" />
- *   </AvatarFallback>
- * </Avatar>
- * ```
- *
- * @example Custom colored fallback
- * ```tsx
- * <Avatar>
- *   <AvatarImage src="/user.jpg" alt="Jane Smith" />
- *   <AvatarFallback className="bg-blue-500 text-white">
- *     JS
- *   </AvatarFallback>
- * </Avatar>
- * ```
- *
- * @example Loading state with animation
- * ```tsx
- * <Avatar>
- *   <AvatarImage src="/loading-image.jpg" alt="Loading" />
- *   <AvatarFallback className="animate-pulse">
- *     <User className="size-4 text-muted-foreground" />
- *   </AvatarFallback>
- * </Avatar>
- * ```
- *
- * @example With delay to prevent flash
- * ```tsx
- * <Avatar>
- *   <AvatarImage src="/slow-loading-image.jpg" alt="User" />
- *   <AvatarFallback delayMs={600}>
- *     UN
- *   </AvatarFallback>
- * </Avatar>
- * ```
- *
- * @example Using asChild for custom elements
- * ```tsx
- * <Avatar>
- *   <AvatarImage src="/user.jpg" alt="User" />
- *   <AvatarFallback asChild>
- *     <div className="bg-gradient-to-br from-blue-400 to-purple-600">
- *       <span className="text-white font-semibold">UN</span>
- *     </div>
- *   </AvatarFallback>
- * </Avatar>
- * ```
- *
- * @param children The fallback content to display. Common patterns include user initials (2-3 characters), icons, or loading indicators
- * @param className Additional CSS classes. Use for custom background colors, text styling, or animations
- * @param delayMs Optional delay in milliseconds before showing the fallback. Useful for delaying rendering so it only appears for those with slower connections
- *   @default undefined
- * @param asChild Change the default rendered element for the one passed as a child, merging their props and behavior
- *   @default false
- *
- * @accessibility
- * - Content should be meaningful and descriptive
- * - Ensure sufficient color contrast between text and background (minimum 4.5:1 ratio)
- * - Keep text concise - typically 1-3 characters for initials
- * - Icons should have appropriate sizing relative to the avatar
- * - The component is automatically accessible via Radix UI implementation
- * - Consider adding aria-label for complex fallback content
- *
- * @see {@link Avatar} The parent container component
- * @see {@link AvatarImage} The image component that this component provides fallback for
- * @see {@link https://www.radix-ui.com/docs/primitives/components/avatar#fallback} Radix UI Avatar.Fallback API
- * @since 1.0.0
+ * Fallback content shown when image is unavailable.
+ * Typically displays user initials or an icon.
  */
-declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
-export { Avatar, AvatarImage, AvatarFallback };
+declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Badge positioned at bottom-right of avatar.
+ * Use for status indicators, verification badges, or notification dots.
+ */
+declare function AvatarBadge({ className, ...props }: AvatarBadgeProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Container for stacked avatars with ring borders.
+ * Used to show team members or collaborators.
+ */
+declare function AvatarGroup({ className, ...props }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Counter badge showing additional hidden avatars in a group.
+ * Typically displays "+N" to indicate overflow count.
+ */
+declare function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps, type AvatarBadgeProps, type AvatarGroupProps, type AvatarGroupCountProps, };
 //# sourceMappingURL=avatar.d.ts.map

package/dist/components/ui/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAkE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmHG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAWnD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4FG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+GG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,2CAWvD;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlE,KAAK,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC9C,8CAA8C;IAC9C,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,KAAK,gBAAgB,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC;AAEpD,KAAK,mBAAmB,GAAG,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;AAE1D,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAErD,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEzD;;;GAGG;AACH,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAYrE;AAED;;GAEG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAW7D;AAED;;;GAGG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAWnE;AAED;;;GAGG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAc7D;AAED;;;GAGG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAW7D;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAWvE;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,GAC3B,CAAC"}

package/dist/components/ui/avatar.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../lib/utils.js";
+import { AvatarRoot } from "../../node_modules/@base-ui/react/esm/avatar/root/AvatarRoot.js";
+import { AvatarImage as AvatarImage$1 } from "../../node_modules/@base-ui/react/esm/avatar/image/AvatarImage.js";
+import { AvatarFallback as AvatarFallback$1 } from "../../node_modules/@base-ui/react/esm/avatar/fallback/AvatarFallback.js";
+function Avatar({ className, size = "default", ...props }) {
+  return /* @__PURE__ */ jsx(
+    AvatarRoot,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      className: cn(
+        "size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AvatarImage$1,
+    {
+      "data-slot": "avatar-image",
+      className: cn(
+        "rounded-full aspect-square size-full object-cover",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarFallback({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AvatarFallback$1,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "avatar-badge",
+      className: cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "avatar-group",
+      className: cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarGroupCount({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "avatar-group-count",
+      className: cn(
+        "bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage
+};
+//# sourceMappingURL=avatar.js.map

package/dist/components/ui/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../src/components/ui/avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype AvatarProps = AvatarPrimitive.Root.Props & {\n  /** Avatar size variant. @default \"default\" */\n  size?: \"default\" | \"sm\" | \"lg\";\n};\n\ntype AvatarImageProps = AvatarPrimitive.Image.Props;\n\ntype AvatarFallbackProps = AvatarPrimitive.Fallback.Props;\n\ntype AvatarBadgeProps = React.ComponentProps<\"span\">;\n\ntype AvatarGroupProps = React.ComponentProps<\"div\">;\n\ntype AvatarGroupCountProps = React.ComponentProps<\"div\">;\n\n/**\n * Avatar root component with size variants.\n * Displays user profile images with automatic fallback support.\n */\nfunction Avatar({ className, size = \"default\", ...props }: AvatarProps) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Avatar image element. Automatically shows fallback if image fails to load.\n */\nfunction AvatarImage({ className, ...props }: AvatarImageProps) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"rounded-full aspect-square size-full object-cover\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Fallback content shown when image is unavailable.\n * Typically displays user initials or an icon.\n */\nfunction AvatarFallback({ className, ...props }: AvatarFallbackProps) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Badge positioned at bottom-right of avatar.\n * Use for status indicators, verification badges, or notification dots.\n */\nfunction AvatarBadge({ className, ...props }: AvatarBadgeProps) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Container for stacked avatars with ring borders.\n * Used to show team members or collaborators.\n */\nfunction AvatarGroup({ className, ...props }: AvatarGroupProps) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Counter badge showing additional hidden avatars in a group.\n * Typically displays \"+N\" to indicate overflow count.\n */\nfunction AvatarGroupCount({ className, ...props }: AvatarGroupCountProps) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n  type AvatarProps,\n  type AvatarImageProps,\n  type AvatarFallbackProps,\n  type AvatarBadgeProps,\n  type AvatarGroupProps,\n  type AvatarGroupCountProps,\n};\n"],"names":["AvatarPrimitive.Root","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"mappings":";;;;;;;AA0BA;AACE;AACE;AAACA;AAAA;AACW;AACC;AACA;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAKA;AACE;AACE;AAACC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAMA;AACE;AACE;AAACC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAMA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AACA;AACA;AACA;AAAA;AAEE;AAAA;AAGV;AAMA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAMA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;;;;;;;;;"}