wip

packages/svelte/package.json

@@ -22,6 +22,10 @@
       "types": "./src/lib/index.ts",
       "svelte": "./src/lib/index.ts"
     },
+    "./locale": {
+      "types": "./src/lib/providers/locale/index.ts",
+      "svelte": "./src/lib/providers/locale/index.ts"
+    },
     "./*": {
       "types": "./src/lib/components/*/index.ts",
       "svelte": "./src/lib/components/*/index.ts"
@@ -42,6 +46,8 @@
     "replace": {
       "exports.\\..svelte": "./dist/index.js",
       "exports.\\..types": "./dist/index.d.ts",
+      "exports.\\./locale.svelte": "./dist/providers/locale/index.js",
+      "exports.\\./locale.types": "./dist/providers/locale/index.d.ts",
       "exports.\\./*.svelte": "./dist/components/*/index.js",
       "exports.\\./*.types": "./dist/components/*/index.d.ts"
     }
@@ -53,6 +59,7 @@
   "dependencies": {
     "@zag-js/avatar": "0.77.1",
     "@zag-js/core": "0.77.1",
+    "@zag-js/i18n-utils": "0.77.1",
     "@zag-js/svelte": "0.77.1",
     "nanoid": "5.0.9"
   },

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

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

packages/svelte/src/lib/components/avatar/use-avatar-context.ts

@@ -2,4 +2,6 @@ import { createContext } from '$lib/utils/create-context'
 import type { UseAvatarReturn } from './use-avatar.svelte'
 
 export interface UseAvatarContext extends UseAvatarReturn {}
-export const [AvatarProvider, useAvatarContext] = createContext<UseAvatarContext>('AvatarContext')
+export const [AvatarProvider, useAvatarContext] = createContext<UseAvatarContext>({
+  key: 'AvatarContext',
+})

packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_LOCALE, useLocaleContext } from '$lib/providers/locale'
 import type { Accessor, Optional } from '$lib/types'
 import { createId } from '$lib/utils/create-id'
 import * as avatar from '@zag-js/avatar'
@@ -8,8 +9,10 @@ export interface UseAvatarProps
 export interface UseAvatarReturn extends Accessor<avatar.Api<PropTypes>> {}
 
 export const useAvatar = (props: UseAvatarProps = {}) => {
+  const { dir } = useLocaleContext(DEFAULT_LOCALE)
   const context = $derived({
     id: createId(),
+    dir,
     ...props,
   })
 

packages/svelte/src/lib/index.ts

@@ -1 +1,3 @@
 export * from './components'
+export * from './providers'
+export type { Assign, Optional } from './types'

packages/svelte/src/lib/providers/index.ts

@@ -0,0 +1 @@
+export * from './locale'

packages/svelte/src/lib/providers/locale/examples/basic.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { LocaleProvider } from '@ark-ui/svelte/locale'
+import Usage from './usage.svelte'
+</script>
+
+<LocaleProvider locale="ar-BH">
+  <Usage />
+</LocaleProvider>

packages/svelte/src/lib/providers/locale/examples/setup.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+import { LocaleProvider } from '@ark-ui/svelte/locale'
+</script>
+
+<LocaleProvider locale="de-DE"> <!-- Your App --></LocaleProvider>

packages/svelte/src/lib/providers/locale/examples/usage.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { useLocaleContext } from '@ark-ui/svelte/locale'
+
+const locale = useLocaleContext()
+</script>
+
+<pre>{JSON.stringify(locale, null, 2)}</pre>

packages/svelte/src/lib/providers/locale/index.ts

@@ -0,0 +1,2 @@
+export { default as LocaleProvider, type LocaleProviderProps } from './locale-provider.svelte'
+export { DEFAULT_LOCALE, useLocaleContext, type UseLocaleContext } from './use-locale-context'

packages/svelte/src/lib/providers/locale/locale-provider.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+import type { Locale } from '@zag-js/i18n-utils'
+import type { Snippet } from 'svelte'
+
+export interface LocaleProviderProps {
+  /**
+   * The locale to use for the application.
+   * @default 'en-US'
+   */
+  locale: string
+  /**
+   * The children to render.
+   */
+  children: Snippet
+}
+</script>
+
+<script lang="ts">
+import { isRTL } from '@zag-js/i18n-utils'
+import { LocaleContextProvider } from './use-locale-context'
+
+let {locale, children}:  LocaleProviderProps = $props()
+
+const context = $state<Locale>({
+  locale,
+  dir: isRTL(locale) ? 'rtl' : 'ltr',
+})
+
+LocaleContextProvider(context)
+</script>
+
+{@render children()}

packages/svelte/src/lib/providers/locale/locale.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta } from '@storybook/svelte'
+import BasicExample from './examples/basic.svelte'
+import SetupExample from './examples/setup.svelte'
+
+const meta = {
+  title: 'Providers / Locale',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    Component: BasicExample,
+  }),
+}
+
+export const Setup = {
+  render: () => ({
+    Component: SetupExample,
+  }),
+}

packages/svelte/src/lib/providers/locale/use-locale-context.ts

@@ -0,0 +1,13 @@
+import { createContext } from '$lib/utils/create-context'
+import type { Locale } from '@zag-js/i18n-utils'
+
+export const DEFAULT_LOCALE: Locale = {
+  dir: 'ltr',
+  locale: 'en-US',
+}
+
+export interface UseLocaleContext extends Locale {}
+
+export const [LocaleContextProvider, useLocaleContext] = createContext<UseLocaleContext>({
+  key: 'LocaleContext',
+})

packages/svelte/src/lib/utils/create-context.ts

@@ -1,11 +1,16 @@
 import { getContext, setContext } from 'svelte'
 
+interface CreateContextOptions<T> {
+  key?: string
+}
+
 type CreateContextReturn<T> = [(opts: T) => void, (fallback?: T) => T, symbol]
 
-export const createContext = <T>(id: string) => {
-  const contextId = Symbol(id)
+export const createContext = <T>(options: CreateContextOptions<T>) => {
+  const { key } = options
+  const contextId = Symbol(key)
   const provider = (value: T) => setContext(contextId, value)
-  const consumer = () => getContext(contextId)
+  const consumer = () => getContext<T>(contextId)
 
   return [provider, consumer, contextId] as CreateContextReturn<T>
 }

templates/svelte/svelte-kit/src/lib/avatar.svelte

@@ -9,7 +9,7 @@ export interface AvatarProps extends AvatarRootProps {
 </script>
 
 <script lang="ts">
-  let { src, name }: AvatarProps = $props()
+  let { src, name, ...rootProps }: AvatarProps = $props()
 
   const getInitials = $derived(() =>
     name
@@ -21,7 +21,7 @@ export interface AvatarProps extends AvatarRootProps {
   )
 </script>
 
-<Avatar.Root>
+<Avatar.Root {...rootProps}>
   <Avatar.Fallback>{getInitials()}</Avatar.Fallback>
   <Avatar.Image {src} alt={name} />
 </Avatar.Root>