feat(svelte): add locale provider (#3086)

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,5 +1,5 @@
 <script lang="ts">
-  import { Avatar } from '@ark-ui/svelte/avatar'
+import { Avatar } from '@ark-ui/svelte/avatar'
 </script>
 
 <Avatar.Root>

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 { 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()
   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 { 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,9 @@
+import { createContext } from '$lib/utils/create-context'
+import type { Locale } from '@zag-js/i18n-utils'
+
+export interface UseLocaleContext extends Locale {}
+
+export const [LocaleContextProvider, useLocaleContext] = createContext<UseLocaleContext>({
+  key: 'LocaleContext',
+  defaultValue: { dir: 'ltr', locale: 'en-US' },
+})

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

@@ -1,11 +1,17 @@
-import { getContext, setContext } from 'svelte'
+import { getContext, hasContext, setContext } from 'svelte'
+
+interface CreateContextOptions<T> {
+  key?: string
+  defaultValue?: T
+}
 
 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 = () => (hasContext(contextId) ? getContext(contextId) : options.defaultValue)
 
   return [provider, consumer, contextId] as CreateContextReturn<T>
 }

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

@@ -1,15 +1,15 @@
 <script module lang="ts">
-import { Avatar, type AvatarRootProps } from '@ark-ui/svelte/avatar'
-import './avatar.css'
+  import { Avatar, type AvatarRootProps } from '@ark-ui/svelte/avatar'
+  import './avatar.css'
 
-export interface AvatarProps extends AvatarRootProps {
-  name: string
-  src?: string
-}
+  export interface AvatarProps extends AvatarRootProps {
+    name: string
+    src?: string
+  }
 </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>

templates/svelte/svelte-kit/src/routes/+page.svelte

@@ -1,12 +1,11 @@
 <script>
-import Avatar from '$lib/avatar.svelte'
+  import Avatar from '$lib/avatar.svelte'
 </script>
 
 <main>
   <h1>Welcome to Ark UI</h1>
   <Avatar
-      name="Christian Schröter"
-      src="https://avatars.githubusercontent.com/u/1846056?s=400&u=bc2821d6154517e6f62795b11ffe0e8e001764a5&v=4"
-    />
-
+    name="Christian Schröter"
+    src="https://avatars.githubusercontent.com/u/1846056?s=400&u=bc2821d6154517e6f62795b11ffe0e8e001764a5&v=4"
+  />
 </main>