docs: add visually hidden, config providers

docs/.vitepress/config.ts

@@ -168,6 +168,8 @@ function sidebar() {
       text: 'Utilities',
       collapsed: false,
       items: [
+        { text: 'Config Provider', link: '/utilities/config-provider' },
+        { text: 'Visually Hidden', link: '/utilities/visually-hidden' },
         { text: 'Primitive', link: '/utilities/primitive' },
         { text: 'Slot', link: '/utilities/slot' },
         { text: 'useId', link: '/utilities/use-id' },

docs/content/utilities/config-provider.md

@@ -0,0 +1,83 @@
+---
+title: Config Provider
+description: Wraps your app to provide global configurations. 
+---
+
+# Config Provider
+
+<Description>
+Wraps your app to provide global configurations.
+</Description>
+
+<Highlights
+  :features="[
+    'Enables all primitives to inherit global reading direction.',
+    'Enables changing the behavior of scroll body when setting body lock.',
+    'Much more controls to prevent layout shifts.',
+  ]"
+/>
+
+
+## Anatomy
+
+Import the component. 
+
+```vue
+<script setup lang="ts">
+import { ConfigProvider } from 'radix-vue'
+</script>
+
+<template>
+  <ConfigProvider>
+    <slot />
+  </ConfigProvider>
+</template>
+```
+
+
+## API Reference
+
+### Config Provider
+
+When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the `ConfigProvider` component to ensure all of the primitives adjust their behavior based on the `dir` prop.
+
+You can also change the global behavior of `bodylock` for components such as `Alert`, `DropdownMenu` and etc to fit your layout to prevent any [content shifts](https://github.com/radix-vue/radix-vue/issues/385).
+
+
+<PropsTable
+  :data="[
+    {
+      name: 'dir',
+      required: false,
+      type: '&quot;ltr&quot; | &quot;rtl&quot;',
+      default: '&quot;ltr&quot;',
+      description:  `The global reading direction of your application. This will be inherited by all primitives.`
+    },
+    {
+      name: 'scrollBody',
+      required: false,
+      type: 'boolean | ScrollBodyOption',
+      default: true,
+      description:  `The global scroll body behavior of your application. This will be inherited by the related primitives.`
+    },
+  ]"
+/>
+
+## Example 
+
+Use the config provider.
+
+Set global direction to `rtl`, and scroll body behavior to `false` (will not set any padding/margin).
+
+```vue
+<script setup lang="ts">
+import { ConfigProvider } from 'radix-vue'
+</script>
+
+<template>
+  <ConfigProvider dir="rtl" :scroll-body="false">
+    <slot />
+  </ConfigProvider>
+</template>
+```
+

docs/content/utilities/use-id.md

@@ -3,8 +3,6 @@ title: useId
 description: Generate random id
 ---
 
-
-
 # useId
 
 <Description>

docs/content/utilities/visually-hidden.md

@@ -0,0 +1,81 @@
+---
+title: Visually Hidden
+description: Hides content from the screen in an accessible way. 
+---
+
+# Visually Hidden
+
+<Description>
+Hides content from the screen in an accessible way.
+</Description>
+
+<Highlights
+  :features="[
+    'Visually hides content while preserving it for assistive technology.',
+  ]"
+/>
+
+
+## Anatomy
+
+Import the component.
+
+```vue
+<script setup lang="ts">
+import { VisuallyHidden } from 'radix-vue'
+</script>
+
+<template>
+  <VisuallyHidden>
+    <slot />
+  </VisuallyHidden>
+</template>
+```
+
+## Basic example
+
+Use the visually hidden primitive.
+
+```vue
+<script setup lang="ts">
+import { VisuallyHidden } from 'radix-vue'
+import { GearIcon } from '@radix-icons/vue'
+</script>
+
+<template>
+  <button>
+    <GearIcon />
+    <VisuallyHidden>Settings</VisuallyHidden>
+  </button>
+</template>
+```
+
+
+
+## API Reference
+
+### Root
+
+Anything you put inside this component will be hidden from the screen but will be announced by screen readers.
+
+<PropsTable
+  :data="[
+    {
+      name: 'asChild',
+      required: false,
+      type: 'boolean',
+      default: 'false',
+      description:  `Change the default rendered element for the one passed as a child,
+          merging their props and behavior.
+          <br />
+          <br />
+          Read our <a href=&quot;../guides/composition&quot;>Composition</a> guide for more
+          details.
+       `
+    },
+  ]"
+/>
+
+## Accessibility
+
+This is useful in certain scenarios as an alternative to traditional labelling with `aria-label` or `aria-labelledby`.

packages/radix-vue/constant/components.ts

@@ -275,6 +275,10 @@ export const components = {
     'Primitive',
     'Slot',
   ],
+
+  VisuallyHidden: [
+    'VisuallyHidden',
+  ],
 }
 
 export const utilities = {

packages/radix-vue/src/ConfigProvider/ConfigProvider.vue

@@ -17,6 +17,10 @@ export interface ConfigProviderProps {
    * @defaultValue 'ltr'
    */
   dir?: Direction
+  /**
+   * The global scroll body behavior of your application. This will be inherited by the related primitives.
+   * @type boolean | ScrollBodyOption
+   */
   scrollBody?: boolean | ScrollBodyOption
 }
 </script>

packages/radix-vue/src/VisuallyHidden/index.ts

@@ -1,2 +1,2 @@
-export { default as VisuallyHidden } from './VisuallyHidden.vue'
+export { default as VisuallyHidden, type VisuallyHiddenProps } from './VisuallyHidden.vue'
 export { default as VisuallyHiddenInput } from './VisuallyHiddenInput.vue'

packages/radix-vue/src/index.ts

@@ -30,4 +30,5 @@ export * from './ScrollArea'
 
 // utilities
 export { Primitive, Slot } from './Primitive'
+export { VisuallyHidden } from './VisuallyHidden'
 export { useId, useEmitAsProps, useForwardProps, useForwardPropsEmits, useStateMachine } from './shared'