chore(docs): Updated UI Reference (#6221)

Automated changes by [create-pull-request](https://github.com/peter-evans/create-pull-request) GitHub action

Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>
Co-authored-by: Shahed Nasser <27354907+shahednasser@users.noreply.github.com>

www/apps/ui/src/examples/calendar-locale.tsx

@@ -0,0 +1,9 @@
+import { Calendar } from "@medusajs/ui"
+import * as React from "react"
+import { es } from "date-fns/locale"
+
+export default function CalendarDemo() {
+  const [date, setDate] = React.useState<Date | undefined>()
+
+  return <Calendar selected={date} onSelect={setDate} locale={es} />
+}

www/apps/ui/src/examples/date-picker-demo.tsx

@@ -3,7 +3,7 @@ import { DatePicker } from "@medusajs/ui"
 export default function DatePickerDemo() {
   return (
     <div className="w-[250px]">
-      <DatePicker />
+      <DatePicker placeholder="Pick a date" />
     </div>
   )
 }

www/apps/ui/src/examples/date-picker-locale.tsx

@@ -0,0 +1,10 @@
+import { DatePicker } from "@medusajs/ui"
+import { es } from "date-fns/locale"
+
+export default function DatePickerDemo() {
+  return (
+    <div className="w-[250px]">
+      <DatePicker locale={es} placeholder="Elija una fecha" />
+    </div>
+  )
+}

www/apps/ui/src/examples/date-picker-range-presets-time.tsx

@@ -4,6 +4,7 @@ export default function DatePickerRangePresetsTime() {
   return (
     <div className="w-[250px]">
       <DatePicker
+        placeholder="Pick a date"
         showTimePicker
         mode="range"
         presets={[

www/apps/ui/src/examples/date-picker-range-presets.tsx

@@ -4,6 +4,7 @@ export default function DatePickerRangePresets() {
   return (
     <div className="w-[250px]">
       <DatePicker
+        placeholder="Pick a date"
         mode="range"
         presets={[
           {

www/apps/ui/src/examples/date-picker-range-time.tsx

@@ -3,7 +3,7 @@ import { DatePicker } from "@medusajs/ui"
 export default function DatePickerRangeTime() {
   return (
     <div className="w-[250px]">
-      <DatePicker showTimePicker mode="range" />
+      <DatePicker showTimePicker mode="range" placeholder="Pick a date" />
     </div>
   )
 }

www/apps/ui/src/examples/date-picker-range.tsx

@@ -3,7 +3,7 @@ import { DatePicker } from "@medusajs/ui"
 export default function DatePickerRange() {
   return (
     <div className="w-[250px]">
-      <DatePicker mode="range" />
+      <DatePicker mode="range" placeholder="Pick a date" />
     </div>
   )
 }

www/apps/ui/src/examples/date-picker-single-presets-time.tsx

@@ -4,6 +4,7 @@ export default function DatePickerSinglePresetsTime() {
   return (
     <div className="w-[250px]">
       <DatePicker
+        placeholder="Pick a date"
         showTimePicker
         presets={[
           {

www/apps/ui/src/examples/date-picker-single-presets.tsx

@@ -4,6 +4,7 @@ export default function DatePickerSinglePresets() {
   return (
     <div className="w-[250px]">
       <DatePicker
+        placeholder="Pick a date"
         presets={[
           {
             date: new Date(),

www/apps/ui/src/examples/date-picker-single-time.tsx

@@ -3,7 +3,7 @@ import { DatePicker } from "@medusajs/ui"
 export default function DatePickerSingleTime() {
   return (
     <div className="w-[250px]">
-      <DatePicker showTimePicker />
+      <DatePicker showTimePicker placeholder="Pick a date" />
     </div>
   )
 }

www/apps/ui/src/examples/date-picker-single.tsx

@@ -3,7 +3,7 @@ import { DatePicker } from "@medusajs/ui"
 export default function DatePickerSingle() {
   return (
     <div className="w-[250px]">
-      <DatePicker />
+      <DatePicker placeholder="Pick a date" />
     </div>
   )
 }