wip

packages/svelte/CHANGELOG.md

@@ -0,0 +1,11 @@
+---
+id: changelog
+title: Changelog
+description: All notable changes will be documented in this file.
+---
+
+## [Unreleased]
+
+### Added
+
+- Added `Avatar` component.

packages/svelte/package.json

@@ -1,45 +1,73 @@
 {
   "name": "@ark-ui/svelte",
   "version": "0.0.1",
-  "scripts": {
-    "dev": "vite dev",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "npm run package",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test": "vitest"
+  "description": "A collection of unstyled, accessible UI components for Svelte",
+  "keywords": ["avatar", "svelte"],
+  "license": "MIT",
+  "homepage": "https://ark-ui.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/ark.git",
+    "directory": "packages/svelte"
   },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/ark/issues"
+  },
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": ["dist", "!dist/**/*.test.*", "!dist/**/*.spec.*"],
   "exports": {
     ".": {
+      "source": "./src/lib/index.ts",
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
+    },
+    "./*": {
+      "source": "./src/lib/components/*/index.ts",
+      "types": "./dist/components/*/index.d.ts",
+      "svelte": "./dist/components/*/index.js"
     }
   },
-  "files": ["dist", "!dist/**/*.test.*", "!dist/**/*.spec.*"],
-  "peerDependencies": {
-    "svelte": "5.1.3"
+  "scripts": {
+    "build": "svelte-kit sync && svelte-package",
+    "dev": "vite dev",
+    "test": "vitest",
+    "test:ci": "vitest --run",
+    "typecheck": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "release-it": "release-it --config ../../release-it.json",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "clean-package": {
+    "remove": ["exports.\\..source", "exports.\\./*.source"]
+  },
+  "publishConfig": {
+    "access": "public"
   },
+  "sideEffects": false,
   "dependencies": {
     "@zag-js/avatar": "0.77.1",
     "@zag-js/core": "0.77.1",
     "@zag-js/svelte": "0.77.1",
     "nanoid": "5.0.9"
   },
   "devDependencies": {
+    "@release-it/keep-a-changelog": "5.0.0",
     "@sveltejs/adapter-auto": "3.3.1",
     "@sveltejs/kit": "2.8.4",
     "@sveltejs/package": "2.3.7",
     "@sveltejs/vite-plugin-svelte": "4.0.2",
-    "publint": "0.2.12",
+    "clean-package": "2.2.0",
+    "release-it": "17.10.0",
     "svelte": "5.2.8",
     "svelte-check": "4.1.0",
     "tslib": "2.8.1",
     "typescript": "5.6.3",
     "vite": "5.4.11",
     "vitest": "2.1.5"
   },
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module"
+  "peerDependencies": {
+    "svelte": ">=5.0.0"
+  }
 }

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

@@ -1,8 +1,8 @@
 <script module lang="ts">
-import type { HTMLProps } from '$lib/types'
+  import type { HTMLProps } from '$lib/types'
 
-export type AvatarFallbackBaseProps = {}
-export interface AvatarFallbackProps extends AvatarFallbackBaseProps, HTMLProps<'div'> {}
+  export type AvatarFallbackBaseProps = {}
+  export interface AvatarFallbackProps extends AvatarFallbackBaseProps, HTMLProps<'div'> {}
 </script>
 
 <script lang="ts">
@@ -13,7 +13,6 @@ export interface AvatarFallbackProps extends AvatarFallbackBaseProps, HTMLProps<
   // const mergedProps = mergeProps(() => avatar().getFallbackProps(), props)
 </script>
 
-
 <div {...avatar().getFallbackProps()} {...props}>
   {@render props.children?.()}
 </div>

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

@@ -1,7 +1,8 @@
 <script module lang="ts">
-import type { HTMLProps } from '$lib/types'
-export type AvatarImageBaseProps = {}
-export interface AvatarImageProps extends AvatarImageBaseProps, HTMLProps<'img'> {}
+  import type { HTMLProps } from '$lib/types'
+
+  export type AvatarImageBaseProps = {}
+  export interface AvatarImageProps extends AvatarImageBaseProps, HTMLProps<'img'> {}
 </script>
 
 <script lang="ts">
@@ -12,4 +13,4 @@ export interface AvatarImageProps extends AvatarImageBaseProps, HTMLProps<'img'>
   // const mergedProps = mergeProps(() => avatar().getImageProps(), props)
 </script>
 
-<img {...avatar().getImageProps()} {...props}/>
+<img {...avatar().getImageProps()} {...props} />

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

@@ -1,9 +1,9 @@
 <script module lang="ts">
-import type { Assign, HTMLProps } from '$lib/types'
-import type { UseAvatarProps } from './use-avatar.svelte'
+  import type { Assign, HTMLProps } from '$lib/types'
+  import type { UseAvatarProps } from './use-avatar.svelte'
 
-export interface AvatarRootBaseProps extends UseAvatarProps {}
-export interface AvatarRootProps extends Assign<HTMLProps<'div'>, UseAvatarProps> {}
+  export interface AvatarRootBaseProps extends UseAvatarProps {}
+  export interface AvatarRootProps extends Assign<HTMLProps<'div'>, UseAvatarProps> {}
 </script>
 
 <script lang="ts">

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Avatar } from '@ark-ui/svelte/avatar'
+</script>
+
+<Avatar.Root>
+  <Avatar.Fallback>PA</Avatar.Fallback>
+  <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
+</Avatar.Root>

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 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 { 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'

packages/svelte/tsconfig.json

@@ -8,6 +8,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "strict": true
+    "strict": true,
+    "customConditions": ["source"]
   }
 }