@jmruthers/pace-core 0.5.188 → 0.5.189

package/docs/api/modules.md

@@ -1,6 +1,6 @@
-[@jmruthers/pace-core - v0.5.188](README.md) / Exports
+[@jmruthers/pace-core - v0.5.189](README.md) / Exports
 
-# @jmruthers/pace-core - v0.5.188
+# @jmruthers/pace-core - v0.5.189
 
 **`File`**
 
@@ -57,6 +57,7 @@ import { Dialog, NavigationMenu } from '@jmruthers/pace-core/components';
 
 - [AddressFieldProps](interfaces/AddressFieldProps.md)
 - [AddressFieldRef](interfaces/AddressFieldRef.md)
+- [AvatarProps](interfaces/AvatarProps.md)
 - [BadgeProps](interfaces/BadgeProps.md)
 - [ButtonProps](interfaces/ButtonProps.md)
 - [CalendarProps](interfaces/CalendarProps.md)
@@ -247,8 +248,6 @@ import { Dialog, NavigationMenu } from '@jmruthers/pace-core/components';
 - [AlertTitle](modules.md#alerttitle)
 - [AlertDescription](modules.md#alertdescription)
 - [Avatar](modules.md#avatar)
-- [AvatarImage](modules.md#avatarimage)
-- [AvatarFallback](modules.md#avatarfallback)
 - [Badge](modules.md#badge)
 - [Button](modules.md#button)
 - [Calendar](modules.md#calendar)
@@ -1343,51 +1342,13 @@ ___
 
 ▸ **Avatar**(`props`): `ReactNode`
 
-#### Parameters
-
-| Name | Type |
-| :------ | :------ |
-| `props` | `Omit`\<`AvatarProps` & `RefAttributes`\<`HTMLSpanElement`\>, ``"ref"``\> & `RefAttributes`\<`HTMLSpanElement`\> |
-
-#### Returns
-
-`ReactNode`
-
-#### Defined in
-
-[packages/core/src/components/Avatar/Avatar.tsx:42](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/Avatar/Avatar.tsx#L42)
-
-___
-
-### AvatarImage
-
-▸ **AvatarImage**(`props`): `ReactNode`
-
-#### Parameters
-
-| Name | Type |
-| :------ | :------ |
-| `props` | `Omit`\<`AvatarImageProps` & `RefAttributes`\<`HTMLImageElement`\>, ``"ref"``\> & `RefAttributes`\<`HTMLImageElement`\> |
-
-#### Returns
-
-`ReactNode`
-
-#### Defined in
-
-[packages/core/src/components/Avatar/Avatar.tsx:57](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/Avatar/Avatar.tsx#L57)
-
-___
-
-### AvatarFallback
-
-▸ **AvatarFallback**(`props`): `ReactNode`
+Avatar component for displaying user profile images or initials
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
-| `props` | `Omit`\<`AvatarFallbackProps` & `RefAttributes`\<`HTMLSpanElement`\>, ``"ref"``\> & `RefAttributes`\<`HTMLSpanElement`\> |
+| `props` | [`AvatarProps`](interfaces/AvatarProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
 
 #### Returns
 
@@ -1395,7 +1356,7 @@ ___
 
 #### Defined in
 
-[packages/core/src/components/Avatar/Avatar.tsx:69](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/Avatar/Avatar.tsx#L69)
+[packages/core/src/components/Avatar/Avatar.tsx:99](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/Avatar/Avatar.tsx#L99)
 
 ___
 

package/docs/api-reference/components.md

@@ -1997,49 +1997,84 @@ For more information about testing components, see the [Testing Guide](../testin
 
 ## Avatar
 
-Display user profile pictures with fallback initials or icons.
+Display user profile pictures with fallback initials or icons. Supports three approaches for image display: direct URLs, file reference props, or file ID.
 
 ### Props
 
 ```typescript
 interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string;
-}
-
-interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  // File reference approach (uses FileDisplay for Supabase storage)
+  table_name?: string;
+  record_id?: string;
+  organisation_id?: string;
+  category?: FileCategory;
+  
+  // OR file ID approach (uses file reference lookup)
+  fileId?: string;
+  
+  // OR direct URL approach (simple <img> tag for public images)
   src?: string;
   alt?: string;
+  
+  // Fallback (always required)
+  fallback: string;
+  
+  // Styling
   className?: string;
-}
-
-interface AvatarFallbackProps extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 ```
 
 ### Usage
 
 ```tsx
-import { Avatar, AvatarImage, AvatarFallback } from '@jmruthers/pace-core';
+import { Avatar } from '@jmruthers/pace-core';
+import { FileCategory } from '@jmruthers/pace-core/types';
+
+// Avatar with direct URL
+<Avatar 
+  src="/user.jpg" 
+  alt="User" 
+  fallback="JD"
+/>
+
+// Avatar with file reference props (Supabase storage)
+<Avatar
+  table_name="user_profiles"
+  record_id={userId}
+  organisation_id={orgId}
+  category={FileCategory.PROFILE_PHOTOS}
+  fallback="JD"
+/>
+
+// Avatar with file ID
+<Avatar
+  fileId={fileReferenceId}
+  organisation_id={orgId}
+  fallback="JD"
+/>
 
-// User avatar
-<Avatar>
-  <AvatarImage src="/user.jpg" alt="User" />
-  <AvatarFallback>JD</AvatarFallback>
-</Avatar>
+// Avatar with fallback only
+<Avatar fallback="AB" />
 
-// Avatar without image
-<Avatar>
-  <AvatarFallback>AB</AvatarFallback>
-</Avatar>
+// Avatar with custom size
+<Avatar 
+  src="/user.jpg" 
+  alt="User" 
+  fallback="JD"
+  size="lg"
+  className="custom-class"
+/>
 ```
 
 ### Features
 
-- Automatic fallback to initials or icon
-- Responsive sizing
+- Three image source approaches: direct URL, file reference props, or file ID
+- Automatic fallback to initials when image fails or not provided
+- Responsive sizing with size prop or custom className
 - Accessible ARIA attributes
-- Integration with user profiles
+- Integration with Supabase storage via FileDisplay
+- Circular avatar display with customizable styling
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.188",
+  "version": "0.5.189",
   "description": "Clean, modern React component library with Tailwind v4 styling and native utilities",
   "private": false,
   "publishConfig": {
@@ -197,7 +197,6 @@
   "author": "PACE Team",
   "license": "MIT",
   "peerDependencies": {
-    "@radix-ui/react-avatar": "^1.0.0",
     "@radix-ui/react-checkbox": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-label": "^2.0.0",