avatar placeholder component removal (#1203)

package.json

@@ -150,10 +150,6 @@
       "types": "./dist/avatar/Avatar.svelte.d.ts",
       "svelte": "./dist/avatar/Avatar.svelte"
     },
-    "./Placeholder.svelte": {
-      "types": "./dist/avatar/Placeholder.svelte.d.ts",
-      "svelte": "./dist/avatar/Placeholder.svelte"
-    },
     "./Badge.svelte": {
       "types": "./dist/badge/Badge.svelte.d.ts",
       "svelte": "./dist/badge/Badge.svelte"

src/lib/avatar/Avatar.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import AvatarPlaceholder from './Placeholder.svelte';
   import Indicator from '$lib/indicators/Indicator.svelte';
+  import { twMerge } from 'tailwind-merge';
 
   export let src: string = '';
   export let href: string | undefined = undefined;
@@ -10,7 +9,7 @@
   export let stacked: boolean = false;
   export let dot: object | undefined = undefined;
   export let alt: string = '';
-  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' = 'md';
 
   $: dot = dot && { placement: 'top-right', color: 'gray', size: 'lg', ...dot };
 
@@ -19,7 +18,8 @@
     sm: 'w-8 h-8',
     md: 'w-10 h-10',
     lg: 'w-20 h-20',
-    xl: 'w-36 h-36'
+    xl: 'w-36 h-36',
+    none: ''
   };
 
   let avatarClass: string;
@@ -31,7 +31,12 @@
     {#if src}
       <img {alt} {src} class={rounded ? 'rounded' : 'rounded-full'} />
     {:else}
-      <slot><AvatarPlaceholder {rounded} {size} {border} class={twMerge($$props.classPlaceholder)} /></slot>
+      <slot>
+        <!-- default avatar placeholder -->
+        <svg class="w-full h-full {rounded ? 'rounded' : 'rounded-full'}" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+        </svg>
+      </slot>
     {/if}
     {#if dot}
       <Indicator border offset={rounded} {...dot} />

src/routes/docs/components/avatar.md

@@ -182,7 +182,17 @@ Use this example if you want to show a dropdown menu when clicking on the avatar
 
 ## Sizes
 
-Select size from xs | sm | md | lg | xl.
+You can set `size` property to preset values of `xs | sm | md | lg | xl`. Custom size can be achieved by setting size to `none` and adding any of the Tailwind Css size classes like `w-[x] h-[x]`.
+
+Preset values are equivalents of:
+
+| Size |     |   Classes   |
+| :--: | --- | :---------: |
+|  xs  |     |  `w-6 h-6`  |
+|  sm  |     |  `w-8 h-8`  |
+|  md  |     | `w-10 h-10` |
+|  lg  |     | `w-20 h-20` |
+|  xl  |     | `w-36 h-36` |
 
 ```svelte example class="flex flex-col gap-4" hideScript hideResponsiveButtons
 <script>
@@ -195,6 +205,7 @@ Select size from xs | sm | md | lg | xl.
   <Avatar src="/images/profile-picture-3.webp" rounded size="md" />
   <Avatar src="/images/profile-picture-3.webp" rounded size="lg" />
   <Avatar src="/images/profile-picture-3.webp" rounded size="xl" />
+  <Avatar src="/images/profile-picture-3.webp" rounded size="none" class="w-28 h-28" />
 </div>
 ```
 
@@ -205,7 +216,6 @@ The component has the following props, type, and default values. See [types page
 ### Avatar styling
 
 - Use the `class` prop to overwrite the default class.
-- Use the `classPlaceholder` prop to overwrite the placeholder class.
 
 <CompoAttributesViewer {dirName}/>