fix(app): complete shared RTL primitives (#40388)

Co-authored-by: Luke Parker <10430890+Hona@users.noreply.github.com>

packages/ui/src/components/icon.css

@@ -32,3 +32,8 @@
     height: auto;
   }
 }
+
+:dir(rtl) [data-component="icon"][data-directional] [data-slot="icon-svg"],
+:dir(rtl) [data-slot="menu-v2-item-chevron"] {
+  transform: scaleX(-1);
+}

packages/ui/src/components/icon.tsx

@@ -151,7 +151,11 @@ export function Icon(props: IconProps) {
   onMount(ensureSprite)
 
   return (
-    <div data-component="icon" data-size={local.size || "normal"}>
+    <div
+      data-component="icon"
+      data-size={local.size || "normal"}
+      data-directional={local.name === "chevron-left" || local.name === "chevron-right" ? true : undefined}
+    >
       <svg
         data-slot="icon-svg"
         classList={{

packages/ui/src/components/toast.css

@@ -1,7 +1,7 @@
 [data-component="toast-region"] {
   position: fixed;
   bottom: 48px;
-  right: 32px;
+  inset-inline-end: 32px;
   z-index: 1000;
   display: flex;
   flex-direction: column;

packages/ui/src/context/i18n.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, type Accessor, type ParentProps } from "solid-js"
+import { I18nProvider } from "@kobalte/core/i18n"
 import { dict as en } from "../i18n/en"
 
 export type UiI18nKey = keyof typeof en
@@ -57,10 +58,16 @@ const fallback: UiI18n = {
 
 const Context = createContext<UiI18n>(fallback)
 
-export function I18nProvider(props: ParentProps<{ value: UiI18n }>) {
-  return <Context.Provider value={props.value}>{props.children}</Context.Provider>
+function UiI18nProvider(props: ParentProps<{ value: UiI18n }>) {
+  return (
+    <I18nProvider locale={props.value.locale()}>
+      <Context.Provider value={props.value}>{props.children}</Context.Provider>
+    </I18nProvider>
+  )
 }
 
+export { UiI18nProvider as I18nProvider }
+
 export function useI18n() {
   return useContext(Context)
 }

packages/ui/src/v2/components/toast-v2.tsx

@@ -1,4 +1,5 @@
 import { Toaster, toast, type ToasterProps } from "solid-sonner"
+import { isRTL } from "@kobalte/core/i18n"
 import type { ComponentProps, JSX } from "solid-js"
 import { createContext, onCleanup, onMount, splitProps, useContext } from "solid-js"
 import { Portal } from "solid-js/web"
@@ -46,8 +47,8 @@ function ToastV2Region(props: ToastV2RegionProps) {
   return (
     <Portal>
       <Toaster
-        position="bottom-right"
-        offset={{ right: 32, bottom: 48 }}
+        position={isRTL(i18n.locale()) ? "bottom-left" : "bottom-right"}
+        offset={isRTL(i18n.locale()) ? { left: 32, bottom: 48 } : { right: 32, bottom: 48 }}
         mobileOffset={16}
         gap={12}
         duration={5000}