cleanplate 0.3.4 → 0.3.5

package/dist/utils/common.d.ts

@@ -1,5 +1,4 @@
 export function getInitials(name?: string): string;
-export function getAvatarBgColor(name?: string): string;
 export function getSpacingClass(marginConfig: any, styleObject: any, prefix: any): any;
 export function getUniqueId(): string;
 export function getVariantIcon(variant: any): string;

package/dist/utils/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.js"],"names":[],"mappings":"AAEO,mDAIN;AAEM,wDASN;AAEM,uFAcN;AAEM,sCAON;AAEM,qDAgBN;AAEM,oDAEN;AAEM,mGAcN"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.js"],"names":[],"mappings":"AAEO,mDAIN;AAEM,uFAcN;AAEM,sCAON;AAEM,qDAgBN;AAEM,oDAEN;AAEM,mGAcN"}

package/docs/Avatar.md

@@ -6,14 +6,14 @@ Purpose: Displays user initials, an image, or a Material icon in a consistent ci
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| name | string | no | "" | Display name; used for initials and `title` when no image/icon. Also used for image `alt` and for generating background color when showing initials. |
+| name | string | no | "" | Display name; used for initials and `title` when no image/icon. Also used for image `alt`. |
 | image | string | no | "" | Image URL; when set, shows image instead of initials or icon. |
 | icon | MaterialIconName | no | — | Material icon name; when set (and no image), shows icon instead of initials. |
 | size | "small" \| "medium" | no | "medium" | Size of the avatar. |
 | margin | string \| string[] | no | "m-0" | Spacing **suffix** for outer margin. The component adds the `m-` prefix (e.g. `"0"` → m-0, `"b-2"` → m-b-2). Use a single string or array: `"0"`, `["2", "b-3"]`. |
 | onClick | function | no | — | Click handler for the root div. |
-| className | string | no | "" | Additional class names for the root element. |
-| ...rest | React.HTMLAttributes<HTMLDivElement> | no | — | Any other div attributes (e.g. `id`, `data-*`, `aria-*`, `style`) are forwarded. |
+| className | string | no | "" | Additional class names for the root element; use to override backgrounds or other visuals (no inline `style` on Avatar). |
+| ...rest | `Omit<HTMLAttributes<HTMLDivElement>, "style">` | no | — | Other div attributes (`id`, `data-*`, `aria-*`, `ref`, etc.). The **`style`** prop is not supported; use **`className`** and CSS instead. |
 
 ## Types
 
@@ -34,7 +34,7 @@ type AvatarMargin = string | SpacingOption[];
 
 ### AvatarProps
 ```typescript
-interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+interface AvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "style"> {
   name?: string;
   image?: string;
   icon?: MaterialIconName;  // from "../icon/material-icon-names"
@@ -87,6 +87,14 @@ export const Example = () => (
 );
 ```
 
+### Custom appearance (`className`)
+
+Backgrounds come from CSS modules (`--primary-brand` for initials/icon, `--white` behind images). Override with your own class:
+
+```jsx
+<Avatar name="VIP" className="my-avatar--gold" />
+```
+
 ### Clickable avatar
 
 ```jsx
@@ -119,9 +127,9 @@ export const Example = () => (
 
 - **Display priority:** If `image` is set, the image is shown. Else if `icon` is set, the Material icon is shown. Otherwise initials from `name` are shown.
 - **Initials:** Derived from the first letter of each word in `name` (up to 2 characters), e.g. "John Doe" → "JD".
-- **Background color:** When showing initials, background color is generated deterministically from `name` (hash-based).
+- **Backgrounds (CSS only):** **Initials** use `var(--primary-brand)` on the root. **Icon** mode uses `var(--primary-brand)` for the circle. **Image** mode uses `var(--white)` behind the photo so transparent PNGs do not show a hole. To change colors, add a **`className`** and target the root in your stylesheet.
 - **Spacing:** `margin` accepts the **spacing suffix**; the component adds the `m-` prefix via `getSpacingClass`. Use suffix form (e.g. `"0"`, `"2"`, `"b-3"`) when passing values explicitly.
-- **Root element:** A `div`; all standard HTML div attributes and ref are supported via `...rest`.
+- **Root element:** A `div`; supports `ref` and other attributes except **`style`** (omitted from the public type so layout stays class-based).
 
 ## Related Components / Links
 

package/docs/MediaObject.md

@@ -9,7 +9,7 @@ Purpose: Combines fixed media (`Avatar`: icon, image, or initials) with a dense
 | title | string | yes | — | Primary line (e.g. name, sender). Rendered emphasized. |
 | mediaIcon | `MaterialIconName` \| string | no | "" | Material Symbol name passed to `Avatar`. |
 | mediaImage | string | no | "" | Image URL for `Avatar`. |
-| mediaAvatar | string | no | "" | Display name used for initials and avatar color generation (when image/icon not shown). |
+| mediaAvatar | string | no | "" | Display name used for initials when image/icon are not shown. |
 | subtitle | `React.ReactNode` | no | — | Optional middle line (e.g. subject). Omit for two-line layouts. |
 | description | `React.ReactNode` | no | — | Optional preview/snippet line(s); muted, multi-line ellipsis via `--cp-media-object-desc-lines`. |
 | descriptionLineClamp | number | no | 2 | Max lines for `description` before truncation. |

package/llms.txt

@@ -74,7 +74,7 @@ All component documentation is located in the `docs/` folder. The following docu
 ### Avatar Component
 - File: `docs/Avatar.md`
 - Purpose: Displays user initials, an image, or a Material icon in a consistent circle. Use for user identity in headers, lists, MediaObject, or anywhere you need a compact avatar.
-- Key Features: Display modes (initials, image, icon), sizes (small, medium), margin spacing (suffix API: e.g. "0" → m-0), optional onClick
+- Key Features: Display modes (initials, image, icon), sizes (small, medium), margin spacing (suffix API: e.g. "0" → m-0), optional onClick; backgrounds from CSS (className overrides), no inline style prop
 - Types: AvatarProps, AvatarSize, AvatarMargin, SpacingOption; icon prop uses MaterialIconName from Icon
 - Related Components: Used by MediaObject; often used with Container, Icon
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cleanplate",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "CleanPlate - A Headless React UI Framework",
   "files": [
     "dist",