From 5dabfa8b9fb04e5781fa62079f5788c012762e4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Thu, 28 Nov 2024 02:11:38 +0800
Subject: [PATCH] refactor(docs): date input dx (#4100)

---
 .../components/date-input/controlled.raw.jsx  | 20 +++++++
 .../components/date-input/controlled.raw.tsx  | 21 +++++++
 .../components/date-input/controlled.ts       | 47 ++-------------
 .../components/date-input/description.raw.jsx | 14 +++++
 .../components/date-input/description.ts      | 15 +----
 .../components/date-input/disabled.raw.jsx    | 15 +++++
 .../content/components/date-input/disabled.ts | 16 +-----
 .../date-input/error-message-function.raw.jsx | 22 +++++++
 .../date-input/error-message-function.ts      | 23 +-------
 .../date-input/error-message.raw.jsx          | 18 ++++++
 .../components/date-input/error-message.ts    | 19 +------
 .../components/date-input/granularity.raw.jsx | 19 +++++++
 .../components/date-input/granularity.raw.tsx | 20 +++++++
 .../components/date-input/granularity.ts      | 57 ++-----------------
 .../date-input/hide-timezone.raw.jsx          | 14 +++++
 .../components/date-input/hide-timezone.ts    | 15 +----
 .../date-input/hourly-cycle.raw.jsx           | 15 +++++
 .../components/date-input/hourly-cycle.ts     | 16 +-----
 .../date-input/international-calendar.raw.jsx | 15 +++++
 .../date-input/international-calendar.raw.tsx | 16 ++++++
 .../date-input/international-calendar.ts      | 37 ++----------
 .../date-input/label-placements.raw.jsx       | 20 +++++++
 .../components/date-input/label-placements.ts | 24 +-------
 .../date-input/min-and-max-date.raw.jsx       | 25 ++++++++
 .../components/date-input/min-and-max-date.ts | 26 +--------
 .../components/date-input/readonly.raw.jsx    | 15 +++++
 .../content/components/date-input/readonly.ts | 16 +-----
 .../components/date-input/required.raw.jsx    | 15 +++++
 .../content/components/date-input/required.ts | 16 +-----
 .../date-input/start-end-content.raw.jsx      | 53 +++++++++++++++++
 .../date-input/start-end-content.ts           | 56 +-----------------
 .../components/date-input/time-zones.raw.jsx  | 19 +++++++
 .../components/date-input/time-zones.ts       | 20 +------
 .../components/date-input/usage.raw.jsx       | 14 +++++
 .../content/components/date-input/usage.ts    | 11 +---
 .../components/date-input/variants.raw.jsx    | 20 +++++++
 .../content/components/date-input/variants.ts | 17 +-----
 37 files changed, 422 insertions(+), 399 deletions(-)
 create mode 100644 apps/docs/content/components/date-input/controlled.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/controlled.raw.tsx
 create mode 100644 apps/docs/content/components/date-input/description.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/disabled.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/error-message-function.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/error-message.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/granularity.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/granularity.raw.tsx
 create mode 100644 apps/docs/content/components/date-input/hide-timezone.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/hourly-cycle.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/international-calendar.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/international-calendar.raw.tsx
 create mode 100644 apps/docs/content/components/date-input/label-placements.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/min-and-max-date.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/readonly.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/required.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/start-end-content.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/time-zones.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/usage.raw.jsx
 create mode 100644 apps/docs/content/components/date-input/variants.raw.jsx

diff --git a/apps/docs/content/components/date-input/controlled.raw.jsx b/apps/docs/content/components/date-input/controlled.raw.jsx
new file mode 100644
index 0000000000..b56cc09e3a
--- /dev/null
+++ b/apps/docs/content/components/date-input/controlled.raw.jsx
@@ -0,0 +1,20 @@
+import {DateInput} from "@nextui-org/react";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState(parseDate("2024-04-04"));
+
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  return (
+    <div className="w-full flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DateInput label="Date (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/controlled.raw.tsx b/apps/docs/content/components/date-input/controlled.raw.tsx
new file mode 100644
index 0000000000..bb4fae7fab
--- /dev/null
+++ b/apps/docs/content/components/date-input/controlled.raw.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import {DateInput} from "@nextui-org/react";
+import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState<DateValue>(parseDate("2024-04-04"));
+
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  return (
+    <div className="w-full flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DateInput label="Date (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/controlled.ts b/apps/docs/content/components/date-input/controlled.ts
index cc8ce5a7b1..1f1a363363 100644
--- a/apps/docs/content/components/date-input/controlled.ts
+++ b/apps/docs/content/components/date-input/controlled.ts
@@ -1,50 +1,15 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  const [value, setValue] = React.useState(parseDate("2024-04-04"));
-
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  return (
-    <div className="w-full flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DateInput label="Date (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-        </p>
-      </div>
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateInput} from "@nextui-org/react";
-import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  const [value, setValue] = React.useState<DateValue>(parseDate("2024-04-04"));
-
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  return (
-    <div className="w-full flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DateInput label="Date (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-        </p>
-      </div>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-input/description.raw.jsx b/apps/docs/content/components/date-input/description.raw.jsx
new file mode 100644
index 0000000000..8a43b6fa59
--- /dev/null
+++ b/apps/docs/content/components/date-input/description.raw.jsx
@@ -0,0 +1,14 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        description={"This is my birth date."}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/description.ts b/apps/docs/content/components/date-input/description.ts
index 344087e325..aeb6340b6b 100644
--- a/apps/docs/content/components/date-input/description.ts
+++ b/apps/docs/content/components/date-input/description.ts
@@ -1,17 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateInput 
-        label={"Birth date"} 
-        placeholderValue={new CalendarDate(1995, 11, 6)} 
-        description={"This is my birth date."}
-      />
-    </div>
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/disabled.raw.jsx b/apps/docs/content/components/date-input/disabled.raw.jsx
new file mode 100644
index 0000000000..e674aeb93e
--- /dev/null
+++ b/apps/docs/content/components/date-input/disabled.raw.jsx
@@ -0,0 +1,15 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isDisabled
+        defaultValue={parseDate("2024-04-04")}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/disabled.ts b/apps/docs/content/components/date-input/disabled.ts
index b61e928461..1a215cc91f 100644
--- a/apps/docs/content/components/date-input/disabled.ts
+++ b/apps/docs/content/components/date-input/disabled.ts
@@ -1,18 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DateInput 
-          label={"Birth date"} 
-          isDisabled
-          defaultValue={parseDate("2024-04-04")} 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-        />
-    </div>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/error-message-function.raw.jsx b/apps/docs/content/components/date-input/error-message-function.raw.jsx
new file mode 100644
index 0000000000..085aaa3254
--- /dev/null
+++ b/apps/docs/content/components/date-input/error-message-function.raw.jsx
@@ -0,0 +1,22 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isInvalid
+        className="max-w-xs"
+        defaultValue={parseDate("2024-04-04")}
+        description={"This is my birth date."}
+        errorMessage={(value) => {
+          if (value.isInvalid) {
+            return "Please enter a valid date.";
+          }
+        }}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/error-message-function.ts b/apps/docs/content/components/date-input/error-message-function.ts
index 35371af420..1af0006141 100644
--- a/apps/docs/content/components/date-input/error-message-function.ts
+++ b/apps/docs/content/components/date-input/error-message-function.ts
@@ -1,25 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateInput 
-        label={"Birth date"} 
-        defaultValue={parseDate("2024-04-04")} 
-        placeholderValue={new CalendarDate(1995, 11, 6)} 
-        description={"This is my birth date."}
-        isInvalid
-        errorMessage={(value) => {
-          if (value.isInvalid) {
-            return "Please enter a valid date.";
-          }
-        }}
-        className="max-w-xs"
-      />
-    </div>
-  );
-}`;
+import App from "./error-message-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/error-message.raw.jsx b/apps/docs/content/components/date-input/error-message.raw.jsx
new file mode 100644
index 0000000000..2f73e9d0d1
--- /dev/null
+++ b/apps/docs/content/components/date-input/error-message.raw.jsx
@@ -0,0 +1,18 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isInvalid
+        className="max-w-xs"
+        defaultValue={parseDate("2024-04-04")}
+        description={"This is my birth date."}
+        errorMessage="Please enter a valid date."
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/error-message.ts b/apps/docs/content/components/date-input/error-message.ts
index d9e58d6950..fb8101b132 100644
--- a/apps/docs/content/components/date-input/error-message.ts
+++ b/apps/docs/content/components/date-input/error-message.ts
@@ -1,21 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateInput 
-        label={"Birth date"} 
-        defaultValue={parseDate("2024-04-04")} 
-        placeholderValue={new CalendarDate(1995, 11, 6)} 
-        description={"This is my birth date."}
-        isInvalid
-        errorMessage="Please enter a valid date."
-        className="max-w-xs"
-      />
-    </div>
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/granularity.raw.jsx b/apps/docs/content/components/date-input/granularity.raw.jsx
new file mode 100644
index 0000000000..712b58eebe
--- /dev/null
+++ b/apps/docs/content/components/date-input/granularity.raw.jsx
@@ -0,0 +1,19 @@
+import {DateInput} from "@nextui-org/react";
+import {now, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DateInput granularity="second" label="Date and time" value={date} onChange={setDate} />
+      <DateInput granularity="day" label="Date" value={date} onChange={setDate} />
+      <DateInput granularity="second" label="Event date" />
+      <DateInput
+        granularity="second"
+        label="Event date"
+        placeholderValue={now("America/New_York")}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/granularity.raw.tsx b/apps/docs/content/components/date-input/granularity.raw.tsx
new file mode 100644
index 0000000000..d186cfdb91
--- /dev/null
+++ b/apps/docs/content/components/date-input/granularity.raw.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import {DateInput} from "@nextui-org/react";
+import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DateInput granularity="second" label="Date and time" value={date} onChange={setDate} />
+      <DateInput granularity="day" label="Date" value={date} onChange={setDate} />
+      <DateInput granularity="second" label="Event date" />
+      <DateInput
+        granularity="second"
+        label="Event date"
+        placeholderValue={now("America/New_York")}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/granularity.ts b/apps/docs/content/components/date-input/granularity.ts
index 936bcddffa..6196832da6 100644
--- a/apps/docs/content/components/date-input/granularity.ts
+++ b/apps/docs/content/components/date-input/granularity.ts
@@ -1,60 +1,15 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {now, parseAbsoluteToLocal} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <DateInput
-        granularity="second"
-        label="Date and time"
-        value={date}
-        onChange={setDate}
-      />
-      <DateInput granularity="day" label="Date" value={date} onChange={setDate} />
-      <DateInput granularity="second" label="Event date" />
-      <DateInput
-        granularity="second"
-        label="Event date"
-        placeholderValue={now("America/New_York")}
-      />
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateInput} from "@nextui-org/react";
-import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <DateInput
-        granularity="second"
-        label="Date and time"
-        value={date}
-        onChange={setDate}
-      />
-      <DateInput granularity="day" label="Date" value={date} onChange={setDate} />
-      <DateInput granularity="second" label="Event date" />
-      <DateInput
-        granularity="second"
-        label="Event date"
-        placeholderValue={now("America/New_York")}
-      />
-    </div>
-  );
-}`;
+import App from "./granularity.raw.jsx?raw";
+import AppTs from "./granularity.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-input/hide-timezone.raw.jsx b/apps/docs/content/components/date-input/hide-timezone.raw.jsx
new file mode 100644
index 0000000000..0629cf8eb7
--- /dev/null
+++ b/apps/docs/content/components/date-input/hide-timezone.raw.jsx
@@ -0,0 +1,14 @@
+import {DateInput} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DateInput
+        hideTimeZone
+        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+        label="Appointment time"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/hide-timezone.ts b/apps/docs/content/components/date-input/hide-timezone.ts
index cde093363e..225f731355 100644
--- a/apps/docs/content/components/date-input/hide-timezone.ts
+++ b/apps/docs/content/components/date-input/hide-timezone.ts
@@ -1,17 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <DateInput
-        label="Appointment time"
-        hideTimeZone
-        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
-      />
-    </div>
-  );
-}`;
+import App from "./hide-timezone.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/hourly-cycle.raw.jsx b/apps/docs/content/components/date-input/hourly-cycle.raw.jsx
new file mode 100644
index 0000000000..cd1be2e6a8
--- /dev/null
+++ b/apps/docs/content/components/date-input/hourly-cycle.raw.jsx
@@ -0,0 +1,15 @@
+import {DateInput} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DateInput
+        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+        granularity={"minute"}
+        hourCycle={24}
+        label="Appointment time"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/hourly-cycle.ts b/apps/docs/content/components/date-input/hourly-cycle.ts
index 0336f7ea19..21381611a1 100644
--- a/apps/docs/content/components/date-input/hourly-cycle.ts
+++ b/apps/docs/content/components/date-input/hourly-cycle.ts
@@ -1,18 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <DateInput
-        label="Appointment time"
-        hourCycle={24}
-        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
-        granularity={"minute"}
-      />
-    </div>
-  );
-}`;
+import App from "./hourly-cycle.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/international-calendar.raw.jsx b/apps/docs/content/components/date-input/international-calendar.raw.jsx
new file mode 100644
index 0000000000..cc0ee60556
--- /dev/null
+++ b/apps/docs/content/components/date-input/international-calendar.raw.jsx
@@ -0,0 +1,15 @@
+import {DateInput} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DateInput label="Appointment date" value={date} onChange={setDate} />
+      </I18nProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/international-calendar.raw.tsx b/apps/docs/content/components/date-input/international-calendar.raw.tsx
new file mode 100644
index 0000000000..5f088ad832
--- /dev/null
+++ b/apps/docs/content/components/date-input/international-calendar.raw.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import {DateInput} from "@nextui-org/react";
+import {DateValue, parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  const [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DateInput label="Appointment date" value={date} onChange={setDate} />
+      </I18nProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/international-calendar.ts b/apps/docs/content/components/date-input/international-calendar.ts
index 20f9064feb..a8707fd093 100644
--- a/apps/docs/content/components/date-input/international-calendar.ts
+++ b/apps/docs/content/components/date-input/international-calendar.ts
@@ -1,40 +1,15 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {now, parseAbsoluteToLocal} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="flex flex-col gap-4">
-      <I18nProvider locale="hi-IN-u-ca-indian">
-        <DateInput label="Appointment date" value={date} onChange={setDate} />
-      </I18nProvider>
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateInput} from "@nextui-org/react";
-import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  const [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="flex flex-col gap-4">
-      <I18nProvider locale="hi-IN-u-ca-indian">
-        <DateInput label="Appointment date" value={date} onChange={setDate} />
-      </I18nProvider>
-    </div>
-  );
-}`;
+import App from "./international-calendar.raw.jsx?raw";
+import AppTs from "./international-calendar.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-input/label-placements.raw.jsx b/apps/docs/content/components/date-input/label-placements.raw.jsx
new file mode 100644
index 0000000000..112edbdeb6
--- /dev/null
+++ b/apps/docs/content/components/date-input/label-placements.raw.jsx
@@ -0,0 +1,20 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate} from "@internationalized/date";
+
+export default function App() {
+  const placements = ["inside", "outside", "outside-left"];
+
+  return (
+    <div className="w-full flex flex-col max-w-sm gap-4">
+      {placements.map((placement) => (
+        <DateInput
+          key={placement}
+          description={placement}
+          label="Birth date"
+          labelPlacement={placement}
+          placeholderValue={new CalendarDate(1995, 11, 6)}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/label-placements.ts b/apps/docs/content/components/date-input/label-placements.ts
index df3d59c5ff..cd2a65d352 100644
--- a/apps/docs/content/components/date-input/label-placements.ts
+++ b/apps/docs/content/components/date-input/label-placements.ts
@@ -1,26 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
-
-export default function App() {
-  const placements = [
-    "inside",
-    "outside",
-    "outside-left",
-  ];
-
-  return (
-    <div className="w-full flex flex-col max-w-sm gap-4">
-      {placements.map((placement) => (
-        <DateInput 
-          label="Birth date" 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-          description={placement}
-          labelPlacement={placement}
-        />
-      ))}
-    </div>  
-  );
-}`;
+import App from "./label-placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/min-and-max-date.raw.jsx b/apps/docs/content/components/date-input/min-and-max-date.raw.jsx
new file mode 100644
index 0000000000..ba54d4dc99
--- /dev/null
+++ b/apps/docs/content/components/date-input/min-and-max-date.raw.jsx
@@ -0,0 +1,25 @@
+import {DateInput} from "@nextui-org/react";
+import {getLocalTimeZone, today} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <div className="w-full flex flex-col gap-1">
+        <h3>Min date</h3>
+        <DateInput
+          defaultValue={today(getLocalTimeZone()).subtract({days: 1})}
+          label="Date and time"
+          minValue={today(getLocalTimeZone())}
+        />
+      </div>
+      <div className="w-full flex flex-col gap-2">
+        <h3>Max date</h3>
+        <DateInput
+          defaultValue={today(getLocalTimeZone()).add({days: 1})}
+          label="Date and time"
+          maxValue={today(getLocalTimeZone())}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/min-and-max-date.ts b/apps/docs/content/components/date-input/min-and-max-date.ts
index 5d59cb9f4a..be9af0fc43 100644
--- a/apps/docs/content/components/date-input/min-and-max-date.ts
+++ b/apps/docs/content/components/date-input/min-and-max-date.ts
@@ -1,28 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {getLocalTimeZone, parseDate, today} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <div className="w-full flex flex-col gap-1">
-        <h3>Min date</h3>
-        <DateInput
-          label="Date and time"
-          minValue={today(getLocalTimeZone())}
-          defaultValue={today(getLocalTimeZone()).subtract({ days: 1 })}
-        />
-      </div>
-      <div className="w-full flex flex-col gap-2">
-        <h3>Max date</h3>
-        <DateInput
-          label="Date and time"
-          maxValue={today(getLocalTimeZone())}
-          defaultValue={today(getLocalTimeZone()).add({ days: 1 })}
-        />
-      </div>
-    </div>
-  );
-}`;
+import App from "./min-and-max-date.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/readonly.raw.jsx b/apps/docs/content/components/date-input/readonly.raw.jsx
new file mode 100644
index 0000000000..46aedeed30
--- /dev/null
+++ b/apps/docs/content/components/date-input/readonly.raw.jsx
@@ -0,0 +1,15 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isReadOnly
+        defaultValue={parseDate("2024-04-04")}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/readonly.ts b/apps/docs/content/components/date-input/readonly.ts
index ddd06f00bb..fabd05ba36 100644
--- a/apps/docs/content/components/date-input/readonly.ts
+++ b/apps/docs/content/components/date-input/readonly.ts
@@ -1,18 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DateInput 
-          label={"Birth date"} 
-          isReadOnly
-          defaultValue={parseDate("2024-04-04")} 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-        />
-    </div>
-  );
-}`;
+import App from "./readonly.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/required.raw.jsx b/apps/docs/content/components/date-input/required.raw.jsx
new file mode 100644
index 0000000000..909e91a0fe
--- /dev/null
+++ b/apps/docs/content/components/date-input/required.raw.jsx
@@ -0,0 +1,15 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isRequired
+        defaultValue={parseDate("2024-04-04")}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/required.ts b/apps/docs/content/components/date-input/required.ts
index 7e064fec4b..b50b781e6f 100644
--- a/apps/docs/content/components/date-input/required.ts
+++ b/apps/docs/content/components/date-input/required.ts
@@ -1,18 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DateInput 
-          label={"Birth date"} 
-          isRequired
-          defaultValue={parseDate("2024-04-04")} 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-        />
-    </div>
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/start-end-content.raw.jsx b/apps/docs/content/components/date-input/start-end-content.raw.jsx
new file mode 100644
index 0000000000..dc1bddcd0d
--- /dev/null
+++ b/apps/docs/content/components/date-input/start-end-content.raw.jsx
@@ -0,0 +1,53 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export const CalendarIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M7.75 2.5a.75.75 0 0 0-1.5 0v1.58c-1.44.115-2.384.397-3.078 1.092c-.695.694-.977 1.639-1.093 3.078h19.842c-.116-1.44-.398-2.384-1.093-3.078c-.694-.695-1.639-.977-3.078-1.093V2.5a.75.75 0 0 0-1.5 0v1.513C15.585 4 14.839 4 14 4h-4c-.839 0-1.585 0-2.25.013z"
+      fill="currentColor"
+    />
+    <path
+      clipRule="evenodd"
+      d="M2 12c0-.839 0-1.585.013-2.25h19.974C22 10.415 22 11.161 22 12v2c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14zm15 2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-4-5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-6-3a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2a1 1 0 0 0 0 2"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+        <DateInput
+          defaultValue={parseDate("2024-04-04")}
+          label="Date Input"
+          labelPlacement="outside"
+          placeholderValue={new CalendarDate(1995, 11, 6)}
+          startContent={
+            <CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+          }
+        />
+        <DateInput
+          defaultValue={parseDate("2024-04-04")}
+          endContent={
+            <CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+          }
+          label="Date Input"
+          labelPlacement="outside"
+          placeholderValue={new CalendarDate(1995, 11, 6)}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/start-end-content.ts b/apps/docs/content/components/date-input/start-end-content.ts
index 182305c868..e99c7e5997 100644
--- a/apps/docs/content/components/date-input/start-end-content.ts
+++ b/apps/docs/content/components/date-input/start-end-content.ts
@@ -1,61 +1,7 @@
-const CalendarIcon = `export const CalendarIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M7.75 2.5a.75.75 0 0 0-1.5 0v1.58c-1.44.115-2.384.397-3.078 1.092c-.695.694-.977 1.639-1.093 3.078h19.842c-.116-1.44-.398-2.384-1.093-3.078c-.694-.695-1.639-.977-3.078-1.093V2.5a.75.75 0 0 0-1.5 0v1.513C15.585 4 14.839 4 14 4h-4c-.839 0-1.585 0-2.25.013z"
-      fill="currentColor"
-    />
-    <path
-      clipRule="evenodd"
-      d="M2 12c0-.839 0-1.585.013-2.25h19.974C22 10.415 22 11.161 22 12v2c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14zm15 2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-4-5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-6-3a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2a1 1 0 0 0 0 2"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-import {CalendarIcon} from './CalendarIcon';
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-col gap-4">
-      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-        <DateInput
-          label="Date Input"
-          defaultValue={parseDate("2024-04-04")} 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-          labelPlacement="outside"
-          startContent={
-           <CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
-          }
-        />
-        <DateInput
-          label="Date Input"
-          defaultValue={parseDate("2024-04-04")} 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-          labelPlacement="outside"
-          endContent={
-           <CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
-          }
-        />
-      </div>
-    </div>  
-  );
-}`;
+import App from "./start-end-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/CalendarIcon.jsx": CalendarIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/date-input/time-zones.raw.jsx b/apps/docs/content/components/date-input/time-zones.raw.jsx
new file mode 100644
index 0000000000..cd28b8ef1c
--- /dev/null
+++ b/apps/docs/content/components/date-input/time-zones.raw.jsx
@@ -0,0 +1,19 @@
+import {DateInput} from "@nextui-org/react";
+import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-col items-end gap-4">
+      <DateInput
+        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+        label={"Event date"}
+        labelPlacement="outside"
+      />
+      <DateInput
+        defaultValue={parseAbsoluteToLocal("2021-11-07T07:45:00Z")}
+        label={"Event date"}
+        labelPlacement="outside"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/time-zones.ts b/apps/docs/content/components/date-input/time-zones.ts
index 65b11c09c1..803b4ec768 100644
--- a/apps/docs/content/components/date-input/time-zones.ts
+++ b/apps/docs/content/components/date-input/time-zones.ts
@@ -1,22 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  return (
-     <div className="w-full max-w-xl flex flex-col items-end gap-4">
-      <DateInput
-        label={"Event date"}
-        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
-        labelPlacement="outside"
-      />
-      <DateInput
-        label={"Event date"}
-        defaultValue={parseAbsoluteToLocal("2021-11-07T07:45:00Z")}
-        labelPlacement="outside"
-      />
-    </div>
-  );
-}`;
+import App from "./time-zones.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/usage.raw.jsx b/apps/docs/content/components/date-input/usage.raw.jsx
new file mode 100644
index 0000000000..bbc6bdd82d
--- /dev/null
+++ b/apps/docs/content/components/date-input/usage.raw.jsx
@@ -0,0 +1,14 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        className="max-w-sm"
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/usage.ts b/apps/docs/content/components/date-input/usage.ts
index eed0992112..1118304c37 100644
--- a/apps/docs/content/components/date-input/usage.ts
+++ b/apps/docs/content/components/date-input/usage.ts
@@ -1,13 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateInput label={"Birth date"} placeholderValue={new CalendarDate(1995, 11, 6)} className="max-w-sm" />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/variants.raw.jsx b/apps/docs/content/components/date-input/variants.raw.jsx
new file mode 100644
index 0000000000..9549261715
--- /dev/null
+++ b/apps/docs/content/components/date-input/variants.raw.jsx
@@ -0,0 +1,20 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate} from "@internationalized/date";
+
+export default function App() {
+  const variants = ["flat", "bordered", "underlined", "faded"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {variants.map((variant) => (
+        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <DateInput
+            label={"Birth date"}
+            placeholderValue={new CalendarDate(1995, 11, 6)}
+            variant={variant}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/variants.ts b/apps/docs/content/components/date-input/variants.ts
index 5d37e4d194..ddea95fb2e 100644
--- a/apps/docs/content/components/date-input/variants.ts
+++ b/apps/docs/content/components/date-input/variants.ts
@@ -1,19 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
-
-export default function App() {
-  const variants = ["flat", "bordered", "underlined", "faded"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {variants.map((variant) => (
-        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <DateInput variant={variant} label={"Birth date"} placeholderValue={new CalendarDate(1995, 11, 6)}  />
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,