refactor(svelte): merge props

Author: segunadebayo

packages/svelte/src/lib/components/avatar/avatar-fallback.svelte

@@ -7,12 +7,14 @@
 
 <script lang="ts">
   import { useAvatarContext } from './use-avatar-context'
+  import { mergeProps } from '@zag-js/svelte'
 
   const props: AvatarFallbackProps = $props()
+
   const avatar = useAvatarContext()
-  // const mergedProps = mergeProps(() => avatar().getFallbackProps(), props)
+  const mergedProps = $derived(mergeProps(avatar().getFallbackProps(), props))
 </script>
 
-<div {...avatar().getFallbackProps()} {...props}>
+<div {...mergedProps}>
   {@render props.children?.()}
 </div>

packages/svelte/src/lib/components/avatar/avatar-image.svelte

@@ -7,10 +7,11 @@
 
 <script lang="ts">
   import { useAvatarContext } from './use-avatar-context'
+  import { mergeProps } from '@zag-js/svelte'
 
   const props: AvatarImageProps = $props()
   const avatar = useAvatarContext()
-  // const mergedProps = mergeProps(() => avatar().getImageProps(), props)
+  const mergedProps = $derived(mergeProps(avatar().getImageProps(), props))
 </script>
 
-<img {...avatar().getImageProps()} {...props} />
+<img {...mergedProps} />

packages/svelte/src/lib/components/avatar/avatar-root-provider.svelte

@@ -13,14 +13,17 @@
 
 <script lang="ts">
   import { createSplitProps } from '$lib/utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
   import { AvatarProvider } from './use-avatar-context'
 
   const props: AvatarRootProviderProps = $props()
   const [{ value: avatar }, localProps] = createSplitProps<RootProviderProps>()(props, ['value'])
 
   AvatarProvider(avatar)
+
+  const mergedProps = $derived(mergeProps(avatar().getRootProps(), localProps))
 </script>
 
-<div {...avatar().getRootProps()} {...localProps}>
+<div {...mergedProps}>
   {@render props.children?.()}
 </div>

packages/svelte/src/lib/components/avatar/avatar-root.svelte

@@ -7,6 +7,7 @@
 </script>
 
 <script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
   import { createSplitProps } from '../../utils/create-split-props'
   import { AvatarProvider } from './use-avatar-context'
   import { useAvatar } from './use-avatar.svelte'
@@ -17,12 +18,13 @@
     'ids',
     'onStatusChange',
   ])
+
   const avatar = useAvatar(useAvatarProps)
-  // const mergedProps = mergeProps(() => avatar().getRootProps(), localProps)
+  const mergedProps = $derived(mergeProps(avatar().getRootProps(), localProps))
 
   AvatarProvider(avatar)
 </script>
 
-<div {...avatar().getRootProps()} {...localProps}>
+<div {...mergedProps}>
   {@render props.children?.()}
 </div>

packages/svelte/src/lib/components/avatar/examples/basic.svelte

@@ -4,5 +4,5 @@
 
 <Avatar.Root>
   <Avatar.Fallback>PA</Avatar.Fallback>
-  <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
+  <Avatar.Image src="https://i.pravatar.cc/3000?u=a" alt="avatar" />
 </Avatar.Root>

packages/svelte/src/lib/components/avatar/examples/context.svelte

@@ -14,5 +14,5 @@
       </Avatar.Fallback>
     {/snippet}
   </Avatar.Context>
-  <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
+  <Avatar.Image src="https://i.pravatar.cc/3000?u=b" alt="avatar" />
 </Avatar.Root>

packages/svelte/src/lib/components/avatar/examples/root-provider.svelte

@@ -6,13 +6,15 @@
       console.log('status', status)
     },
   })
+
+  // biome-ignore lint/style/useConst: <explanation>
+  let counter = $state(0)
+  const src = $derived(`https://i.pravatar.cc/300?u=${counter}`)
 </script>
 
-<button onclick={() => avatar().setSrc('https://avatars.githubusercontent.com/u/6916170?v=4')}>
-  Change Avatar
-</button>
+<button onclick={() => counter++}>Change Avatar</button>
 
 <Avatar.RootProvider value={avatar}>
   <Avatar.Fallback>PA</Avatar.Fallback>
-  <Avatar.Image src="https://avatars.githubusercontent.com/u/1846056?v=4" alt="avatar" />
+  <Avatar.Image {src} alt="avatar" />
 </Avatar.RootProvider>