docs: datepicker

Author: segunadebayo

packages/react/src/components/date-picker/examples/inline.tsx

@@ -2,7 +2,7 @@ import { DatePicker } from '@ark-ui/react/date-picker'
 
 export const Inline = () => {
   return (
-    <DatePicker.Root open>
+    <DatePicker.Root inline>
       <DatePicker.Input />
       <DatePicker.View view="day">
         <DatePicker.Context>

packages/solid/src/components/date-picker/examples/inline.tsx

@@ -3,7 +3,7 @@ import { Index } from 'solid-js'
 
 export const Inline = () => {
   return (
-    <DatePicker.Root open>
+    <DatePicker.Root inline>
       <DatePicker.Context>
         {(context) => (
           <>

packages/svelte/src/lib/components/date-picker/examples/inline.svelte

@@ -2,7 +2,7 @@
   import { DatePicker } from '@ark-ui/svelte/date-picker'
 </script>
 
-<DatePicker.Root open>
+<DatePicker.Root inline>
   <DatePicker.Input />
   <DatePicker.View view="day">
     <DatePicker.Context>

packages/vue/src/components/date-picker/examples/inline.vue

@@ -3,7 +3,7 @@ import { DatePicker } from '@ark-ui/vue/date-picker'
 </script>
 
 <template>
-  <DatePicker.Root open>
+  <DatePicker.Root inline>
     <DatePicker.View view="day">
       <DatePicker.Context v-slot="api">
         <DatePicker.ViewControl>

website/src/content/pages/components/date-picker.mdx

@@ -47,10 +47,10 @@ To create a date picker that allows multiple months, you need to:
 
 ### Inline
 
-In some cases, you might want to display an inline date picker without a popup. This can be achieved by passing the
-`inline` prop and avoiding the use of `Portal`, `Positioner` and `Content` components.
+Use the `inline` prop to display the date picker directly on the page, without a popup.
 
-> Important to note that inline date picker doesn't use the `Portal` and `Positioner` components.
+> When using the `inline` prop, omit the `Portal`, `Positioner`, and `Content` components to render the calendar inline
+> within your layout.
 
 <Example id="inline" />
 
@@ -71,7 +71,8 @@ This allows you to have maximum control over the date picker programmatically.
 
 ### Context
 
-These are the properties available when using `UdateUpicker.Context`, `useUdateUpickerContext` hook or `useUdateUpicker` hook.
+These are the properties available when using `UdateUpicker.Context`, `useUdateUpickerContext` hook or `useUdateUpicker`
+hook.
 
 <ContextType id="date-picker" />