+ {@render props.children?.()}
-
-
\ No newline at end of file
diff --git a/packages/svelte/src/lib/components/avatar/avatar-image.svelte b/packages/svelte/src/lib/components/avatar/avatar-image.svelte
index 76cba371ac..d588f29b7c 100644
--- a/packages/svelte/src/lib/components/avatar/avatar-image.svelte
+++ b/packages/svelte/src/lib/components/avatar/avatar-image.svelte
@@ -1,18 +1,16 @@
-
-
+
-
-
+ {@render props.children?.()}
+
diff --git a/packages/svelte/src/lib/components/avatar/avatar-root.svelte b/packages/svelte/src/lib/components/avatar/avatar-root.svelte
index b279ce328d..6971cfda60 100644
--- a/packages/svelte/src/lib/components/avatar/avatar-root.svelte
+++ b/packages/svelte/src/lib/components/avatar/avatar-root.svelte
@@ -1,21 +1,28 @@
-
-
-
- {@render children()}
+
+
+ PA
+
diff --git a/packages/svelte/src/lib/components/avatar/examples/context.svelte b/packages/svelte/src/lib/components/avatar/examples/context.svelte
new file mode 100644
index 0000000000..2c00d54bf1
--- /dev/null
+++ b/packages/svelte/src/lib/components/avatar/examples/context.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+ {#snippet api(avatar)}
+
+ {#if avatar().loaded}
+
+ {/snippet}
+
+
diff --git a/packages/svelte/src/lib/components/avatar/examples/root-provider.svelte b/packages/svelte/src/lib/components/avatar/examples/root-provider.svelte
new file mode 100644
index 0000000000..ee8899ff27
--- /dev/null
+++ b/packages/svelte/src/lib/components/avatar/examples/root-provider.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+
+ PA
+
diff --git a/packages/svelte/src/lib/components/avatar/index.ts b/packages/svelte/src/lib/components/avatar/index.ts
index 8360879d4f..018bba0cf3 100644
--- a/packages/svelte/src/lib/components/avatar/index.ts
+++ b/packages/svelte/src/lib/components/avatar/index.ts
@@ -1,11 +1,27 @@
export type { StatusChangeDetails as AvatarStatusChangeDetails } from '@zag-js/avatar'
-// export { default as AvatarContext, type AvatarContextProps } from './avatar-context.svelte'
-export { default as AvatarFallback, type AvatarFallbackProps } from './avatar-fallback.svelte'
-export { default as AvatarImage, type AvatarImageProps } from './avatar-image.svelte'
+export { default as AvatarContext } from './avatar-context.svelte'
+export {
+ default as AvatarFallback,
+ type AvatarFallbackProps,
+ type AvatarFallbackBaseProps,
+} from './avatar-fallback.svelte'
+export {
+ default as AvatarImage,
+ type AvatarImageProps,
+ type AvatarImageBaseProps,
+} from './avatar-image.svelte'
export {
default as AvatarRoot,
+ type AvatarRootBaseProps,
type AvatarRootProps,
} from './avatar-root.svelte'
export { useAvatarContext, type UseAvatarContext } from './use-avatar-context'
+export { useAvatar, type UseAvatarProps, type UseAvatarReturn } from './use-avatar.svelte'
+export {
+ default as AvatarRootProvider,
+ type AvatarRootProviderProps,
+ type AvatarRootProviderBaseProps,
+} from './avatar-root-provider.svelte'
+export { avatarAnatomy } from './avatar.anatomy'
-// export * as Avatar from './avatar'
+export * as Avatar from './avatar'
diff --git a/packages/svelte/src/lib/components/avatar/use-avatar-context.ts b/packages/svelte/src/lib/components/avatar/use-avatar-context.ts
index a2dc8cf55c..aebd6fd0e1 100644
--- a/packages/svelte/src/lib/components/avatar/use-avatar-context.ts
+++ b/packages/svelte/src/lib/components/avatar/use-avatar-context.ts
@@ -1,4 +1,4 @@
-import { createContext } from '../../utils'
+import { createContext } from '$lib/utils/create-context'
import type { UseAvatarReturn } from './use-avatar.svelte'
export interface UseAvatarContext extends UseAvatarReturn {}
diff --git a/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts b/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts
index 7907ffb732..45fa66f7ca 100644
--- a/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts
+++ b/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts
@@ -1,19 +1,19 @@
+import type { Accessor, Optional } from '$lib/types'
+import { createId } from '$lib/utils/create-id'
import * as avatar from '@zag-js/avatar'
import { type PropTypes, normalizeProps, useMachine } from '@zag-js/svelte'
-import type { Optional } from '../../../typts'
export interface UseAvatarProps
extends Optional, 'id'> {}
-export interface UseAvatarReturn extends avatar.Api {}
+export interface UseAvatarReturn extends Accessor> {}
-export const useAvatar = (props: UseAvatarProps) => {
- const [snapshot, send] = useMachine(avatar.machine({ id: '1' }))
- const _api = avatar.connect(snapshot, send, normalizeProps)
- const api = $derived(_api)
-
- return new Proxy(api, {
- get(_, key: keyof typeof api) {
- return api[key]
- },
+export const useAvatar = (props: UseAvatarProps = {}) => {
+ const context = $derived({
+ id: createId(),
+ ...props,
})
+
+ const [state, send] = useMachine(avatar.machine(context), { context })
+ const api = $derived(() => avatar.connect(state, send, normalizeProps))
+ return api
}
diff --git a/packages/svelte/src/lib/types.ts b/packages/svelte/src/lib/types.ts
new file mode 100644
index 0000000000..bf034f9fe9
--- /dev/null
+++ b/packages/svelte/src/lib/types.ts
@@ -0,0 +1,9 @@
+import type { SvelteHTMLElements } from 'svelte/elements'
+
+export type Assign = Omit & U
+export type Optional = Pick, K> & Omit
+
+export type CollectionItem = string | object
+
+export type HTMLProps = SvelteHTMLElements[T]
+export type Accessor = () => T
diff --git a/packages/svelte/src/lib/utils/create-id.ts b/packages/svelte/src/lib/utils/create-id.ts
new file mode 100644
index 0000000000..e7c2bbb68a
--- /dev/null
+++ b/packages/svelte/src/lib/utils/create-id.ts
@@ -0,0 +1,4 @@
+import { nanoid } from 'nanoid/non-secure'
+
+// TODO https://github.com/sveltejs/svelte/issues/7517
+export const createId = () => nanoid(10)
diff --git a/packages/svelte/src/lib/utils/create-split-props.ts b/packages/svelte/src/lib/utils/create-split-props.ts
new file mode 100644
index 0000000000..d5b6d221ea
--- /dev/null
+++ b/packages/svelte/src/lib/utils/create-split-props.ts
@@ -0,0 +1,25 @@
+type EnsureKeys<
+ ExpectedKeys extends (keyof Target)[],
+ Target,
+> = keyof Target extends ExpectedKeys[number]
+ ? unknown
+ : `Missing required keys: ${Exclude & string}`
+
+export const createSplitProps =
+ () =>
+ (
+ props: Props,
+ keys: Keys & EnsureKeys,
+ ) =>
+ (keys as string[]).reduce<[Target, Omit>]>(
+ (previousValue, currentValue) => {
+ const [target, source] = previousValue
+ const key = currentValue as keyof Target & keyof typeof source
+ if (source[key] !== undefined) {
+ target[key] = source[key]
+ }
+ delete source[key]
+ return [target, source]
+ },
+ [{} as Target, { ...props }],
+ )
diff --git a/packages/svelte/src/lib/utils/index.ts b/packages/svelte/src/lib/utils/index.ts
deleted file mode 100644
index 365408a04a..0000000000
--- a/packages/svelte/src/lib/utils/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { createContext } from './create-context'
diff --git a/packages/svelte/src/routes/+page.svelte b/packages/svelte/src/routes/+page.svelte
index a660466dac..fb3ee53272 100644
--- a/packages/svelte/src/routes/+page.svelte
+++ b/packages/svelte/src/routes/+page.svelte
@@ -1,10 +1,8 @@
-
-
- CS
-
-
\ No newline at end of file
+
+
+ CS
+
diff --git a/packages/svelte/src/test-setup.ts b/packages/svelte/src/test-setup.ts
new file mode 100644
index 0000000000..a9d0dd31aa
--- /dev/null
+++ b/packages/svelte/src/test-setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'
diff --git a/packages/svelte/src/typts.d.ts b/packages/svelte/src/typts.d.ts
deleted file mode 100644
index dd849ceb51..0000000000
--- a/packages/svelte/src/typts.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type Assign = Omit & U
-export type Optional = Pick, K> & Omit
-export type CollectionItem = string | object
diff --git a/packages/svelte/src/typts.ts b/packages/svelte/src/typts.ts
deleted file mode 100644
index 182c69dd66..0000000000
--- a/packages/svelte/src/typts.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type Assign = Omit & U
-export type Optional = Pick, K> & Omit
-
-export type CollectionItem = string | object
diff --git a/packages/svelte/static/favicon.png b/packages/svelte/static/favicon.png
deleted file mode 100644
index 825b9e65af..0000000000
Binary files a/packages/svelte/static/favicon.png and /dev/null differ
diff --git a/packages/svelte/vite.config.ts b/packages/svelte/vite.config.ts
index 7808fb1b8d..bd8e4ac09a 100644
--- a/packages/svelte/vite.config.ts
+++ b/packages/svelte/vite.config.ts
@@ -1,9 +1,12 @@
import { sveltekit } from '@sveltejs/kit/vite'
+import { svelteTesting } from '@testing-library/svelte/vite'
import { defineConfig } from 'vitest/config'
export default defineConfig({
- plugins: [sveltekit()],
+ plugins: [sveltekit(), svelteTesting()],
test: {
+ environment: 'jsdom',
+ setupFiles: ['./src/test-setup.ts'],
include: ['src/**/*.{test,spec}.{js,ts}'],
},
})
diff --git a/scripts/package.json b/scripts/package.json
index 1b722a07a6..128f34ed49 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -15,6 +15,7 @@
"postvue:props": "bun biome format --write ../packages/vue/src/",
"play": "bun run src/play.ts",
"format:vue": "prettier --write '../**/*.vue'",
+ "format:svelte": "prettier --write '../**/*.svelte'",
"format:mdx": "prettier --write '../**/CHANGELOG.md'",
"local:sync": "bun run src/symlink.ts"
},
@@ -29,6 +30,7 @@
"pkg-dir": "8.0.0",
"prettier": "3.4.0",
"prettier-plugin-organize-imports": "4.1.0",
+ "prettier-plugin-svelte": "3.3.2",
"ts-morph": "24.0.0",
"ts-pattern": "5.5.0",
"typescript": "5.6.3",
+ {@render props.children?.()}
diff --git a/packages/svelte/src/lib/components/avatar/avatar.anatomy.ts b/packages/svelte/src/lib/components/avatar/avatar.anatomy.ts
new file mode 100644
index 0000000000..c738affd3f
--- /dev/null
+++ b/packages/svelte/src/lib/components/avatar/avatar.anatomy.ts
@@ -0,0 +1 @@
+export { anatomy as avatarAnatomy } from '@zag-js/avatar'
diff --git a/packages/svelte/src/lib/components/avatar/avatar.stories.ts b/packages/svelte/src/lib/components/avatar/avatar.stories.ts
new file mode 100644
index 0000000000..198153c88e
--- /dev/null
+++ b/packages/svelte/src/lib/components/avatar/avatar.stories.ts
@@ -0,0 +1,28 @@
+import type { Meta } from '@storybook/svelte'
+import BasicExample from './examples/basic.svelte'
+import ContextExample from './examples/context.svelte'
+import RootProviderExample from './examples/root-provider.svelte'
+
+const meta = {
+ title: 'Components / Avatar',
+} as Meta
+
+export default meta
+
+export const Basic = {
+ render: () => ({
+ Component: BasicExample,
+ }),
+}
+
+export const RootProvider = {
+ render: () => ({
+ Component: RootProviderExample,
+ }),
+}
+
+export const Context = {
+ render: () => ({
+ Component: ContextExample,
+ }),
+}
diff --git a/packages/svelte/src/lib/components/avatar/avatar.test.ts b/packages/svelte/src/lib/components/avatar/avatar.test.ts
new file mode 100644
index 0000000000..af64016475
--- /dev/null
+++ b/packages/svelte/src/lib/components/avatar/avatar.test.ts
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+import ComponentUnderTest from './examples/basic.svelte'
+
+describe('Avatar', async () => {
+ it("should render the user's initials", async () => {
+ render(ComponentUnderTest)
+ expect(screen.getByText('PA')).toBeInTheDocument()
+ })
+})
diff --git a/packages/svelte/src/lib/components/avatar/avatar.ts b/packages/svelte/src/lib/components/avatar/avatar.ts
new file mode 100644
index 0000000000..61b5ca7714
--- /dev/null
+++ b/packages/svelte/src/lib/components/avatar/avatar.ts
@@ -0,0 +1,25 @@
+export type { StatusChangeDetails } from '@zag-js/avatar'
+export {
+ default as Context,
+ type AvatarContextProps as ContextProps,
+} from './avatar-context.svelte'
+export {
+ default as Fallback,
+ type AvatarFallbackProps as FallbackProps,
+ type AvatarFallbackBaseProps as FallbackBaseProps,
+} from './avatar-fallback.svelte'
+export {
+ default as Image,
+ type AvatarImageProps as ImageProps,
+ type AvatarImageBaseProps as ImageBaseProps,
+} from './avatar-image.svelte'
+export {
+ default as RootProvider,
+ type AvatarRootProviderProps as RootProviderProps,
+ type AvatarRootProviderBaseProps as RootProviderBaseProps,
+} from './avatar-root-provider.svelte'
+export {
+ default as Root,
+ type AvatarRootBaseProps as RootBaseProps,
+ type AvatarRootProps as RootProps,
+} from './avatar-root.svelte'
diff --git a/packages/svelte/src/lib/components/avatar/examples/basic.svelte b/packages/svelte/src/lib/components/avatar/examples/basic.svelte
new file mode 100644
index 0000000000..b4b5c32a6b
--- /dev/null
+++ b/packages/svelte/src/lib/components/avatar/examples/basic.svelte
@@ -0,0 +1,8 @@
+
+
+PA
+ {:else} +Loading
+ {/if} +