docs: add missing controlled datepicker example (#1640)

* docs: add missing controlled datepicker example  Fixes #1588 by adding the missing datepicker.value.tsx example file that demonstrates controlled datepicker usage with value prop and ability to clear by passing  null

* chore: add export for value example

* fix: add controlled datepicker example

---------

Co-authored-by: Sarthak Pandey <[email protected]>

Author: SarthakPandey2002

apps/web/examples/datepicker/datepicker.value.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { Button, Datepicker } from "flowbite-react";
+import { useState } from "react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { Button, Datepicker } from "flowbite-react";
+import { useState } from "react";
+
+export function Component() {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Datepicker value={selectedDate} onChange={setSelectedDate} />
+      <div className="flex gap-2">
+        <Button size="xs" onClick={() => setSelectedDate(new Date())}>
+          Set to Today
+        </Button>
+        <Button size="xs" onClick={() => setSelectedDate(null)}>
+          Clear
+        </Button>
+      </div>
+      {selectedDate && (
+        <p className="text-sm text-gray-500">
+          Selected: {selectedDate.toLocaleDateString()}
+        </p>
+      )}
+    </div>
+  );
+}
+`;
+
+export function Component() {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Datepicker value={selectedDate} onChange={setSelectedDate} />
+      <div className="flex gap-2">
+        <Button size="xs" onClick={() => setSelectedDate(new Date())}>
+          Set to Today
+        </Button>
+        <Button size="xs" onClick={() => setSelectedDate(null)}>
+          Clear
+        </Button>
+      </div>
+      {selectedDate && <p className="text-sm text-gray-500">Selected: {selectedDate.toLocaleDateString()}</p>}
+    </div>
+  );
+}
+
+export const value: CodeData = {
+  type: "single",
+  code: {
+    fileName: "index",
+    language: "tsx",
+    code,
+  },
+  githubSlug: "datepicker/datepicker.value.tsx",
+  component: <Component />,
+};

apps/web/examples/datepicker/index.ts

@@ -5,4 +5,5 @@ export { filter } from "./datepicker.filter";
 export { range } from "./datepicker.range";
 export { root } from "./datepicker.root";
 export { title } from "./datepicker.title";
+export { value } from "./datepicker.value";
 export { weekStart } from "./datepicker.weekStart";