From 6d64dbc57430f97c0853777bf9cdaff2df693b9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20Schr=C3=B6ter?= <dev@grizzly.codes>
Date: Wed, 27 Nov 2024 21:07:54 +0100
Subject: [PATCH] wip

---
 bun.lockb                                     | Bin 908148 -> 908180 bytes
 packages/svelte/package.json                  |   7 ++++
 .../components/avatar/examples/basic.svelte   |   5 ++-
 .../components/avatar/use-avatar-context.ts   |   4 ++-
 .../components/avatar/use-avatar.svelte.ts    |   3 ++
 packages/svelte/src/lib/index.ts              |   2 ++
 packages/svelte/src/lib/providers/index.ts    |   1 +
 .../providers/locale/examples/basic.svelte    |   8 +++++
 .../providers/locale/examples/setup.svelte    |   5 +++
 .../providers/locale/examples/usage.svelte    |   7 ++++
 .../svelte/src/lib/providers/locale/index.ts  |   2 ++
 .../providers/locale/locale-provider.svelte   |  32 ++++++++++++++++++
 .../lib/providers/locale/locale.stories.ts    |  21 ++++++++++++
 .../providers/locale/use-locale-context.ts    |  13 +++++++
 .../svelte/src/lib/utils/create-context.ts    |  11 ++++--
 .../svelte/svelte-kit/src/lib/avatar.svelte   |   4 +--
 16 files changed, 118 insertions(+), 7 deletions(-)
 create mode 100644 packages/svelte/src/lib/providers/index.ts
 create mode 100644 packages/svelte/src/lib/providers/locale/examples/basic.svelte
 create mode 100644 packages/svelte/src/lib/providers/locale/examples/setup.svelte
 create mode 100644 packages/svelte/src/lib/providers/locale/examples/usage.svelte
 create mode 100644 packages/svelte/src/lib/providers/locale/index.ts
 create mode 100644 packages/svelte/src/lib/providers/locale/locale-provider.svelte
 create mode 100644 packages/svelte/src/lib/providers/locale/locale.stories.ts
 create mode 100644 packages/svelte/src/lib/providers/locale/use-locale-context.ts

diff --git a/bun.lockb b/bun.lockb
index 5ea8f7a74059c1d8af1f62ac5d26faf66d1be06b..6de47d2642f83db0f6af9f4e794eaf23d05fa196 100755
GIT binary patch
delta 5386
zcmeI0e{7Z28OQH!Z|S+c+|hFBz%CUKt7%ILgD|3|o74iUtx(W1r!q8iLnKmAoRq3}
z_^SwlMX`q#`B4UO4u>$Q@4zi63Uw973R}|K#$><LXw_J@xu1#qeA|bte-NU}{#tsH
z&;7pVd7g9L^PYRod(M0Q{NnV@!Su#CX_1~a)el#P+p5z}^d|E{q0s6aeoWKR`^d-9
zb!H!|VeIR%r=c6nKUn48Xm)8P`KK%|RlU1V#r+^Bl<dFQZH7H)1jn<eLl0QK4OPLT
zX74~%!5gTObQs!+s{C)vE>*eTTV6VXd>^U@_)|`j-~NmLsCwWND{wwl1%I;&Ge-_Q
z=@-!9*z?eAv<OuitZHD1*-MgK$S?)f6HPUTG>d#Gss>$&Dz4n}vr)x=9aWMluF~vP
z=q2RuG{02-yDfiKlV>l^rMkiQtYDoLlt!^XfXe@%*`>O{BbJw{ht^tNs{A@s<<<|_
zll>R^?>1SWRDn-g;AXR*PZi%}aZ=sDTVAS$wV;*g+o*c-y?#6Y{|8*Cz=x=kR8ROx
ze?Tbock}<l{8GjL6IDf@qG~`mF)#=-QKi8uf7I+!mCr&)Y5ZNtg#yM|fK&nFQMLSH
zvrA<!u)H*be39h`tLmGGeGFP|{&Q*n_&=9}a_24hKk^UEzt7VE^~h{{@+wqMItSIX
zyTS4|nSKjZlB(wxq3W?)QPs0J!TmM(?l8xls485EYWm%es$de;fBm54A2NN|^bzx~
zv;2BgH`s{kg|iJ+8mzj{4ppqQ!wT#|<=Aa@sVaKL@=`VEhnAPhzt{3o`JXfWvFSck
zPyPa`B-NX7;mhVYhN|Fk3y`WIubXz5{|(a<sM26n`8UljP4gShq>V0=`B!E>m+CgB
z@P~u^eQBST4lPOaht{Tk=~w;3=Ua*tDZhGhXh|Acl7^O~a(mzW7do^g>2>mdy(ATU
zrX{K2vgzp%feaW1nZae#U42=p)^(+3)>PG{{o;PxAGVlH`-cN&+loyu=NKFe`s!R|
zB=_u6n9T-6bzB9Ve%}2qQF_3tA8D?cxXx}J5@wr)?PiM`g-zAZhH~GkDn{T^3&!9Y
zjaEReg-^07uEzF7vrRUew#Z|ApQ_MCSPh<nOJ8HxK%YI(<rY2%+csONuE3^N%mwFX
zBwZrBF{nwp)2>j<dl}~Cd=BbakHSyw&MVCJDz-y@-dgUg-H@L7E^{5@dWnUvG~01(
zx0~&5Y+57RVX1GWibA~tmFg}07hG2oJ{!H)Y#m&W^KY$n_vDVU@CI{r;yM*9dDKmf
z=N`4Yl<_aC@%8*H^9P!EzAAsL$;~bNs+F!Lf=&pnA>wOhTVSOgz?K)3dN($n+fI$E
z$=CA_A)#WrZN6Wz+g*{X54Z1Q^X8g_tH!^wn_juqYHT*wmvJpITMIUAP^Vy9Zno_f
zHx*l%&)GwJi-LkZt|ud0=fitlBKJNbRZAv+v)ZwS>++y*uglE%riS?A&<LC033w8o
zf+p~=1)8A+o|aPIHrNTzz>na0(A3aWI0#+-(f#hyj8zPpx}a^pt4~jACM=-ev`O6$
z8vZ{4ZEl~1EM`v(hJ!Z1nhM+DeX8pPO@muN+x{$wK^(Fn2S!2yH2yW-$G`>fF=ZLh
z$<P@tbU4uj9=1R;Y=x&mBYZpTfL74wz60&Kbf)kJ_#?av@4@@f3m?FTa1x$_eV{{;
zM%c-BK`ZPU5tOvKj>ycDv`E|XgU|+=ABW&2_!;~hj)1oKw}B>vCV)nI5ju-MufUfc
zc4G_vg=rdSR8Qa>LVL--fX+S6fX+!y1#1qw_DF>`^xFKt0vhT1a)>|%=nFJPwR7nB
zxiB9pL8lTL^BUuM@Fln~*mT4#PWz5N81&UqL)-$Wf@b{Jz_oBa+yFPiLRbXf29569
zKqLBgSPHeE(Yyk50x|>2peR^))YXOyHgWv~JO&$}5p>X?!;F=n(~=V3_o_RRp>vE?
zzU?(vJHC_FX<slL^qSOru7w`aDbikeJeYaRy%f&ZOY5)9io>YhNQ+@9R6wQAZ+DBb
z^r>FX1CCAjk2>5%ah(aQr;5iQJ7{ZnCnM8-NsPXdE@pmaqWV^BfVFT3EQ93`hAOxS
zCip`q+=Os`@YV^}JM4mXO!vSlsDssTFU<G9JMG5i>zy$VYTzcg1(v~8FfqvgwM)+!
zuk#w6$>{v19yIlna2L#i$-#`2+Zv84t^%(1Z+E-iaCy+#<I-n^uM0ZIM{A?eRmHr{
zNbmTH;^?J%=Qh+9M}ykptkK7PcOsUP$#78$9_q`wvNSq*l2#C=nt!t-HY3QM6nlAC
zblg`4jB^`O(_%0@NKK1>cUM+pmp(}u`CYy{6~DyScEt;$q11r!W8c~pKkc(q@rizC
zDn2<nu6w{y?Nh1vH)2~X`+9fWpDc;x`I_$djj>SAKv1M7?sx2S1^&0)@y-7RPZ(*;

delta 5223
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
V@ddH>%sr3$^Z_@a`D}dKzW@r4YAXN$

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 2806e5180e..331b738059 100644
--- a/packages/svelte/package.json
+++ b/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"
   },
diff --git a/packages/svelte/src/lib/components/avatar/examples/basic.svelte b/packages/svelte/src/lib/components/avatar/examples/basic.svelte
index b4b5c32a6b..de0faba0e7 100644
--- a/packages/svelte/src/lib/components/avatar/examples/basic.svelte
+++ b/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>
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 aebd6fd0e1..6de9c72969 100644
--- a/packages/svelte/src/lib/components/avatar/use-avatar-context.ts
+++ b/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',
+})
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 45fa66f7ca..a717cf26b5 100644
--- a/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts
+++ b/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,
   })
 
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index cb64ac1b52..6d63b651ae 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -1 +1,3 @@
 export * from './components'
+export * from './providers'
+export type { Assign, Optional } from './types'
diff --git a/packages/svelte/src/lib/providers/index.ts b/packages/svelte/src/lib/providers/index.ts
new file mode 100644
index 0000000000..1e26053c0c
--- /dev/null
+++ b/packages/svelte/src/lib/providers/index.ts
@@ -0,0 +1 @@
+export * from './locale'
diff --git a/packages/svelte/src/lib/providers/locale/examples/basic.svelte b/packages/svelte/src/lib/providers/locale/examples/basic.svelte
new file mode 100644
index 0000000000..8f545feb39
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/svelte/src/lib/providers/locale/examples/setup.svelte b/packages/svelte/src/lib/providers/locale/examples/setup.svelte
new file mode 100644
index 0000000000..b6730b02b8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/svelte/src/lib/providers/locale/examples/usage.svelte b/packages/svelte/src/lib/providers/locale/examples/usage.svelte
new file mode 100644
index 0000000000..834289c050
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/svelte/src/lib/providers/locale/index.ts b/packages/svelte/src/lib/providers/locale/index.ts
new file mode 100644
index 0000000000..074a1a1c15
--- /dev/null
+++ b/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'
diff --git a/packages/svelte/src/lib/providers/locale/locale-provider.svelte b/packages/svelte/src/lib/providers/locale/locale-provider.svelte
new file mode 100644
index 0000000000..461a915a29
--- /dev/null
+++ b/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()}
\ No newline at end of file
diff --git a/packages/svelte/src/lib/providers/locale/locale.stories.ts b/packages/svelte/src/lib/providers/locale/locale.stories.ts
new file mode 100644
index 0000000000..d982e4472a
--- /dev/null
+++ b/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,
+  }),
+}
diff --git a/packages/svelte/src/lib/providers/locale/use-locale-context.ts b/packages/svelte/src/lib/providers/locale/use-locale-context.ts
new file mode 100644
index 0000000000..2adb69a7a5
--- /dev/null
+++ b/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',
+})
diff --git a/packages/svelte/src/lib/utils/create-context.ts b/packages/svelte/src/lib/utils/create-context.ts
index b22a8928bf..78f0ba0817 100644
--- a/packages/svelte/src/lib/utils/create-context.ts
+++ b/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>
 }
diff --git a/templates/svelte/svelte-kit/src/lib/avatar.svelte b/templates/svelte/svelte-kit/src/lib/avatar.svelte
index f51ddc91bc..088a9c3ec1 100644
--- a/templates/svelte/svelte-kit/src/lib/avatar.svelte
+++ b/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>