diff --git a/apps/docs/content/components/time-input/controlled.raw.jsx b/apps/docs/content/components/time-input/controlled.raw.jsx
new file mode 100644
index 0000000000..a69bf472e2
--- /dev/null
+++ b/apps/docs/content/components/time-input/controlled.raw.jsx
@@ -0,0 +1,26 @@
+import {TimeInput} from "@nextui-org/react";
+import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  let [value, setValue] = React.useState(parseAbsoluteToLocal("2024-04-08T18:45:22Z"));
+
+  let formatter = useDateFormatter({dateStyle: "short", timeStyle: "long"});
+
+  return (
+    <div className="w-full flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <TimeInput label="Time (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          {value instanceof ZonedDateTime
+            ? (value.toDate && formatter.format(value.toDate())) ||
+              (value && value.toString()) ||
+              "--"
+            : ""}
+        </p>
+      </div>
+
+      <TimeInput defaultValue={new Time(11, 45)} label="Time (uncontrolled)" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/controlled.raw.tsx b/apps/docs/content/components/time-input/controlled.raw.tsx
new file mode 100644
index 0000000000..ebdaebaf7e
--- /dev/null
+++ b/apps/docs/content/components/time-input/controlled.raw.tsx
@@ -0,0 +1,31 @@
+import type {TimeInputValue} from "@nextui-org/react";
+
+import React from "react";
+import {TimeInput} from "@nextui-org/react";
+import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  let [value, setValue] = React.useState<TimeInputValue>(
+    parseAbsoluteToLocal("2024-04-08T18:45:22Z"),
+  );
+
+  let formatter = useDateFormatter({dateStyle: "short", timeStyle: "long"});
+
+  return (
+    <div className="w-full flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <TimeInput label="Time (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          {value instanceof ZonedDateTime
+            ? (value.toDate && formatter.format(value.toDate())) ||
+              (value && value.toString()) ||
+              "--"
+            : ""}
+        </p>
+      </div>
+
+      <TimeInput defaultValue={new Time(11, 45)} label="Time (uncontrolled)" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/controlled.ts b/apps/docs/content/components/time-input/controlled.ts
index edde086089..1f1a363363 100644
--- a/apps/docs/content/components/time-input/controlled.ts
+++ b/apps/docs/content/components/time-input/controlled.ts
@@ -1,63 +1,15 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let [value, setValue] = React.useState(parseAbsoluteToLocal("2024-04-08T18:45:22Z"));
-
-  let formatter = useDateFormatter({dateStyle: "short", timeStyle: "long"});
-
-  return (
-    <div className="w-full flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <TimeInput label="Time (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          {value instanceof ZonedDateTime
-            ? (value.toDate && formatter.format(value.toDate())) ||
-              (value && value.toString()) ||
-              "--"
-            : ""}
-        </p>
-      </div>
-
-      <TimeInput defaultValue={new Time(11, 45)} label="Time (uncontrolled)" />
-    </div>
-  );
-}`;
-
-const AppTs = `import {TimeInput} from "@nextui-org/react";
-import type {TimeValue} from "@react-types/datepicker";
-import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let [value, setValue] = React.useState<TimeInputValue>(parseAbsoluteToLocal("2024-04-08T18:45:22Z"));
-
-  let formatter = useDateFormatter({dateStyle: "short", timeStyle: "long"});
-
-  return (
-    <div className="w-full flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <TimeInput label="Time (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          {value instanceof ZonedDateTime
-            ? (value.toDate && formatter.format(value.toDate())) ||
-              (value && value.toString()) ||
-              "--"
-            : ""}
-        </p>
-      </div>
-
-      <TimeInput defaultValue={new Time(11, 45)} label="Time (uncontrolled)" />
-    </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/time-input/disabled.raw.jsx b/apps/docs/content/components/time-input/disabled.raw.jsx
new file mode 100644
index 0000000000..bc9f9a1af5
--- /dev/null
+++ b/apps/docs/content/components/time-input/disabled.raw.jsx
@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput isDisabled defaultValue={new Time(11, 45)} label="Event Time" />;
+}
diff --git a/apps/docs/content/components/time-input/disabled.ts b/apps/docs/content/components/time-input/disabled.ts
index c9b3cccae9..1a215cc91f 100644
--- a/apps/docs/content/components/time-input/disabled.ts
+++ b/apps/docs/content/components/time-input/disabled.ts
@@ -1,15 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      isDisabled 
-      label="Event Time" 
-      defaultValue={new Time(11, 45)} 
-    />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/end-content.raw.jsx b/apps/docs/content/components/time-input/end-content.raw.jsx
new file mode 100644
index 0000000000..fca3665b63
--- /dev/null
+++ b/apps/docs/content/components/time-input/end-content.raw.jsx
@@ -0,0 +1,35 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export const ClockCircleLinearIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 8v4l2.5 2.5" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <TimeInput
+      defaultValue={new Time(11, 45)}
+      endContent={
+        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+      }
+      label="Event Time"
+      labelPlacement="outside"
+    />
+  );
+}
diff --git a/apps/docs/content/components/time-input/end-content.ts b/apps/docs/content/components/time-input/end-content.ts
index a97f942a07..d9a1087e2b 100644
--- a/apps/docs/content/components/time-input/end-content.ts
+++ b/apps/docs/content/components/time-input/end-content.ts
@@ -1,41 +1,7 @@
-const ClockCircleLinearIcon = `export const ClockCircleLinearIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g fill="none" stroke="currentColor" strokeWidth="1.5">
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 8v4l2.5 2.5" strokeLinecap="round" strokeLinejoin="round" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {TimeInput} from "@nextui-org/react";
-import {ClockCircleLinearIcon} from './ClockCircleLinearIcon';
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time" 
-      labelPlacement="outside" 
-      defaultValue={new Time(11, 45)} 
-      endContent={(
-        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
-      )}
-    />
-  );
-}`;
+import App from "./end-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ClockCircleLinearIcon.jsx": ClockCircleLinearIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/time-input/error-message-function.raw.jsx b/apps/docs/content/components/time-input/error-message-function.raw.jsx
new file mode 100644
index 0000000000..4c707d11f9
--- /dev/null
+++ b/apps/docs/content/components/time-input/error-message-function.raw.jsx
@@ -0,0 +1,15 @@
+import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <TimeInput
+      isInvalid
+      errorMessage={(value) => {
+        if (value.isInvalid) {
+          return "Please enter a valid time";
+        }
+      }}
+      label="Event Time"
+    />
+  );
+}
diff --git a/apps/docs/content/components/time-input/error-message-function.ts b/apps/docs/content/components/time-input/error-message-function.ts
index b8111e5265..1af0006141 100644
--- a/apps/docs/content/components/time-input/error-message-function.ts
+++ b/apps/docs/content/components/time-input/error-message-function.ts
@@ -1,18 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time"
-      isInvalid
-      errorMessage={(value) => {
-        if (value.isInvalid) {
-          return "Please enter a valid time";
-        }
-      }}
-    />
-  );
-}`;
+import App from "./error-message-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/error-message.raw.jsx b/apps/docs/content/components/time-input/error-message.raw.jsx
new file mode 100644
index 0000000000..e9637a0a04
--- /dev/null
+++ b/apps/docs/content/components/time-input/error-message.raw.jsx
@@ -0,0 +1,5 @@
+import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return <TimeInput isInvalid errorMessage="Please enter a valid time" label="Event Time" />;
+}
diff --git a/apps/docs/content/components/time-input/error-message.ts b/apps/docs/content/components/time-input/error-message.ts
index 8d60a11647..fb8101b132 100644
--- a/apps/docs/content/components/time-input/error-message.ts
+++ b/apps/docs/content/components/time-input/error-message.ts
@@ -1,14 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time"
-      isInvalid
-      errorMessage="Please enter a valid time"
-    />
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/granularity.raw.jsx b/apps/docs/content/components/time-input/granularity.raw.jsx
new file mode 100644
index 0000000000..e1fa5ec73f
--- /dev/null
+++ b/apps/docs/content/components/time-input/granularity.raw.jsx
@@ -0,0 +1,14 @@
+import {TimeInput} from "@nextui-org/react";
+import {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">
+      <TimeInput granularity="hour" label="Hour" value={date} onChange={setDate} />
+      <TimeInput granularity="minute" label="Minute" value={date} onChange={setDate} />
+      <TimeInput granularity="second" label="Second" value={date} onChange={setDate} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/granularity.raw.tsx b/apps/docs/content/components/time-input/granularity.raw.tsx
new file mode 100644
index 0000000000..963745608a
--- /dev/null
+++ b/apps/docs/content/components/time-input/granularity.raw.tsx
@@ -0,0 +1,19 @@
+import type {TimeInputValue} from "@nextui-org/react";
+
+import React from "react";
+import {TimeInput} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState<TimeInputValue>(
+    parseAbsoluteToLocal("2021-04-07T18:45:22Z"),
+  );
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <TimeInput granularity="hour" label="Hour" value={date} onChange={setDate} />
+      <TimeInput granularity="minute" label="Minute" value={date} onChange={setDate} />
+      <TimeInput granularity="second" label="Second" value={date} onChange={setDate} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/granularity.ts b/apps/docs/content/components/time-input/granularity.ts
index e7d333d1bb..6196832da6 100644
--- a/apps/docs/content/components/time-input/granularity.ts
+++ b/apps/docs/content/components/time-input/granularity.ts
@@ -1,39 +1,15 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time, 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">
-      <TimeInput granularity="hour" label="Hour" value={date} onChange={setDate} />
-      <TimeInput granularity="minute" label="Minute" value={date} onChange={setDate} />
-      <TimeInput granularity="second" label="Second" value={date} onChange={setDate} />
-    </div>
-  );
-}`;
-
-const AppTs = `import {TimeInput} from "@nextui-org/react";
-import type {TimeValue} from "@react-types/datepicker";
-import {Time, parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  let [date, setDate] = React.useState<TimeInputValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <TimeInput granularity="hour" label="Hour" value={date} onChange={setDate} />
-      <TimeInput granularity="minute" label="Minute" value={date} onChange={setDate} />
-      <TimeInput granularity="second" label="Second" value={date} onChange={setDate} />
-    </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/time-input/hide-timezone.raw.jsx b/apps/docs/content/components/time-input/hide-timezone.raw.jsx
new file mode 100644
index 0000000000..3539b9d74e
--- /dev/null
+++ b/apps/docs/content/components/time-input/hide-timezone.raw.jsx
@@ -0,0 +1,12 @@
+import {TimeInput} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <TimeInput
+      hideTimeZone
+      defaultValue={parseZonedDateTime("2022-11-07T10:45[America/Los_Angeles]")}
+      label="Meeting time"
+    />
+  );
+}
diff --git a/apps/docs/content/components/time-input/hide-timezone.ts b/apps/docs/content/components/time-input/hide-timezone.ts
index 3f40c75747..225f731355 100644
--- a/apps/docs/content/components/time-input/hide-timezone.ts
+++ b/apps/docs/content/components/time-input/hide-timezone.ts
@@ -1,15 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Meeting time"
-      hideTimeZone 
-      defaultValue={parseZonedDateTime("2022-11-07T10:45[America/Los_Angeles]")} 
-    />
-  );
-}`;
+import App from "./hide-timezone.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/hour-cycle.raw.jsx b/apps/docs/content/components/time-input/hour-cycle.raw.jsx
new file mode 100644
index 0000000000..16d4bb4ca0
--- /dev/null
+++ b/apps/docs/content/components/time-input/hour-cycle.raw.jsx
@@ -0,0 +1,13 @@
+import {TimeInput} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <TimeInput
+      defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+      granularity="minute"
+      hourCycle={24}
+      label="Meeting time"
+    />
+  );
+}
diff --git a/apps/docs/content/components/time-input/hour-cycle.ts b/apps/docs/content/components/time-input/hour-cycle.ts
index 2eb449f7cc..67ba87ab26 100644
--- a/apps/docs/content/components/time-input/hour-cycle.ts
+++ b/apps/docs/content/components/time-input/hour-cycle.ts
@@ -1,16 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time, parseZonedDateTime} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Meeting time"
-      hourCycle={24}
-      defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
-      granularity="minute" 
-    />
-  );
-}`;
+import App from "./hour-cycle.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/label-placement.raw.jsx b/apps/docs/content/components/time-input/label-placement.raw.jsx
new file mode 100644
index 0000000000..3df0a5f3c7
--- /dev/null
+++ b/apps/docs/content/components/time-input/label-placement.raw.jsx
@@ -0,0 +1,27 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-col items-end gap-4">
+      <TimeInput
+        defaultValue={new Time(11, 45)}
+        description="inside"
+        label="Event Time"
+        labelPlacement="inside"
+      />
+      <TimeInput
+        defaultValue={new Time(11, 45)}
+        description="outside"
+        label="Event Time"
+        labelPlacement="outside"
+      />
+      <TimeInput
+        defaultValue={new Time(11, 45)}
+        description="outside-left"
+        label="Event Time"
+        labelPlacement="outside-left"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/label-placement.ts b/apps/docs/content/components/time-input/label-placement.ts
index d76a98f8e9..ef98ce0f52 100644
--- a/apps/docs/content/components/time-input/label-placement.ts
+++ b/apps/docs/content/components/time-input/label-placement.ts
@@ -1,30 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-col items-end gap-4">
-      <TimeInput 
-        label="Event Time" 
-        labelPlacement="inside" 
-        defaultValue={new Time(11, 45)} 
-        description="inside" 
-      />
-      <TimeInput 
-        label="Event Time" 
-        labelPlacement="outside" 
-        defaultValue={new Time(11, 45)} 
-        description="outside" 
-      />
-      <TimeInput 
-        label="Event Time" 
-        labelPlacement="outside-left" 
-        defaultValue={new Time(11, 45)} 
-        description="outside-left" 
-      />
-    </div>
-  );
-}`;
+import App from "./label-placement.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/max-time-value.raw.jsx b/apps/docs/content/components/time-input/max-time-value.raw.jsx
new file mode 100644
index 0000000000..044979b4a1
--- /dev/null
+++ b/apps/docs/content/components/time-input/max-time-value.raw.jsx
@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput defaultValue={new Time(18)} maxValue={new Time(17)} />;
+}
diff --git a/apps/docs/content/components/time-input/max-time-value.ts b/apps/docs/content/components/time-input/max-time-value.ts
index 711a1d7268..cdef4055ac 100644
--- a/apps/docs/content/components/time-input/max-time-value.ts
+++ b/apps/docs/content/components/time-input/max-time-value.ts
@@ -1,14 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      defaultValue={new Time(18)}
-      maxValue={new Time(17)}
-    />
-  );
-}`;
+import App from "./max-time-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/min-time-value.raw.jsx b/apps/docs/content/components/time-input/min-time-value.raw.jsx
new file mode 100644
index 0000000000..e60b5e8366
--- /dev/null
+++ b/apps/docs/content/components/time-input/min-time-value.raw.jsx
@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput defaultValue={new Time(8)} minValue={new Time(9)} />;
+}
diff --git a/apps/docs/content/components/time-input/min-time-value.ts b/apps/docs/content/components/time-input/min-time-value.ts
index be780a3fbf..1671f69992 100644
--- a/apps/docs/content/components/time-input/min-time-value.ts
+++ b/apps/docs/content/components/time-input/min-time-value.ts
@@ -1,14 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      defaultValue={new Time(8)}
-      minValue={new Time(9)}
-    />
-  );
-}`;
+import App from "./min-time-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/placeholder-value.raw.jsx b/apps/docs/content/components/time-input/placeholder-value.raw.jsx
new file mode 100644
index 0000000000..49f5a6e491
--- /dev/null
+++ b/apps/docs/content/components/time-input/placeholder-value.raw.jsx
@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput label="Meeting time" placeholderValue={new Time(9)} />;
+}
diff --git a/apps/docs/content/components/time-input/placeholder-value.ts b/apps/docs/content/components/time-input/placeholder-value.ts
index 7f329f9470..d9398c975b 100644
--- a/apps/docs/content/components/time-input/placeholder-value.ts
+++ b/apps/docs/content/components/time-input/placeholder-value.ts
@@ -1,14 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Meeting time"
-      placeholderValue={new Time(9)}
-    />
-  );
-}`;
+import App from "./placeholder-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/read-only.raw.jsx b/apps/docs/content/components/time-input/read-only.raw.jsx
new file mode 100644
index 0000000000..d07fef7d71
--- /dev/null
+++ b/apps/docs/content/components/time-input/read-only.raw.jsx
@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput isReadOnly defaultValue={new Time(11, 45)} label="Event Time" />;
+}
diff --git a/apps/docs/content/components/time-input/read-only.ts b/apps/docs/content/components/time-input/read-only.ts
index 15d54d38fb..caf4be10cf 100644
--- a/apps/docs/content/components/time-input/read-only.ts
+++ b/apps/docs/content/components/time-input/read-only.ts
@@ -1,15 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      isReadOnly 
-      label="Event Time" 
-      defaultValue={new Time(11, 45)} 
-    />
-  );
-}`;
+import App from "./read-only.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/required.raw.jsx b/apps/docs/content/components/time-input/required.raw.jsx
new file mode 100644
index 0000000000..b98dedca29
--- /dev/null
+++ b/apps/docs/content/components/time-input/required.raw.jsx
@@ -0,0 +1,5 @@
+import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return <TimeInput isRequired label="Event Time" />;
+}
diff --git a/apps/docs/content/components/time-input/required.ts b/apps/docs/content/components/time-input/required.ts
index 33a1e7e0ac..b50b781e6f 100644
--- a/apps/docs/content/components/time-input/required.ts
+++ b/apps/docs/content/components/time-input/required.ts
@@ -1,13 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <TimeInput 
-      isRequired 
-      label="Event Time" 
-    />
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/start-content.raw.jsx b/apps/docs/content/components/time-input/start-content.raw.jsx
new file mode 100644
index 0000000000..6f5dcd18cb
--- /dev/null
+++ b/apps/docs/content/components/time-input/start-content.raw.jsx
@@ -0,0 +1,35 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export const ClockCircleLinearIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 8v4l2.5 2.5" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <TimeInput
+      defaultValue={new Time(11, 45)}
+      label="Event Time"
+      labelPlacement="outside"
+      startContent={
+        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+      }
+    />
+  );
+}
diff --git a/apps/docs/content/components/time-input/start-content.ts b/apps/docs/content/components/time-input/start-content.ts
index bf5c488177..59191d72a7 100644
--- a/apps/docs/content/components/time-input/start-content.ts
+++ b/apps/docs/content/components/time-input/start-content.ts
@@ -1,41 +1,7 @@
-const ClockCircleLinearIcon = `export const ClockCircleLinearIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g fill="none" stroke="currentColor" strokeWidth="1.5">
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 8v4l2.5 2.5" strokeLinecap="round" strokeLinejoin="round" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {TimeInput} from "@nextui-org/react";
-import {ClockCircleLinearIcon} from './ClockCircleLinearIcon';
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time" 
-      labelPlacement="outside" 
-      defaultValue={new Time(11, 45)} 
-      startContent={(
-        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
-      )}
-    />
-  );
-}`;
+import App from "./start-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ClockCircleLinearIcon.jsx": ClockCircleLinearIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/time-input/timezones.raw.jsx b/apps/docs/content/components/time-input/timezones.raw.jsx
new file mode 100644
index 0000000000..17b22a81be
--- /dev/null
+++ b/apps/docs/content/components/time-input/timezones.raw.jsx
@@ -0,0 +1,17 @@
+import {TimeInput} 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">
+      <TimeInput
+        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+        labelPlacement="outside"
+      />
+      <TimeInput
+        defaultValue={parseAbsoluteToLocal("2021-11-07T07:45:00Z")}
+        labelPlacement="outside"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/timezones.ts b/apps/docs/content/components/time-input/timezones.ts
index 7faa8d00c7..d13be3f87a 100644
--- a/apps/docs/content/components/time-input/timezones.ts
+++ b/apps/docs/content/components/time-input/timezones.ts
@@ -1,20 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time, parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-col items-end gap-4">
-    <TimeInput
-      defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
-      labelPlacement="outside"
-    />
-    <TimeInput
-      defaultValue={parseAbsoluteToLocal("2021-11-07T07:45:00Z")}
-      labelPlacement="outside"
-    />
-  </div>
-  );
-}`;
+import App from "./timezones.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/usage.raw.jsx b/apps/docs/content/components/time-input/usage.raw.jsx
new file mode 100644
index 0000000000..62d5a1d9bc
--- /dev/null
+++ b/apps/docs/content/components/time-input/usage.raw.jsx
@@ -0,0 +1,11 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <TimeInput label="Event Time" />
+      <TimeInput defaultValue={new Time(11, 45)} label="Event Time" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/usage.ts b/apps/docs/content/components/time-input/usage.ts
index 4953e39fde..1118304c37 100644
--- a/apps/docs/content/components/time-input/usage.ts
+++ b/apps/docs/content/components/time-input/usage.ts
@@ -1,14 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4">
-      <TimeInput label="Event Time" />
-      <TimeInput label="Event Time" defaultValue={new Time(11, 45)} />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/with-description.raw.jsx b/apps/docs/content/components/time-input/with-description.raw.jsx
new file mode 100644
index 0000000000..7c086bdda5
--- /dev/null
+++ b/apps/docs/content/components/time-input/with-description.raw.jsx
@@ -0,0 +1,5 @@
+import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return <TimeInput description="Please enter your meeting time" label="Event Time" />;
+}
diff --git a/apps/docs/content/components/time-input/with-description.ts b/apps/docs/content/components/time-input/with-description.ts
index faf8b757aa..d42b2150ff 100644
--- a/apps/docs/content/components/time-input/with-description.ts
+++ b/apps/docs/content/components/time-input/with-description.ts
@@ -1,13 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time"
-      description="Please enter your meeting time" 
-    />
-  );
-}`;
+import App from "./with-description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/without-label.raw.jsx b/apps/docs/content/components/time-input/without-label.raw.jsx
new file mode 100644
index 0000000000..94f1a44d9e
--- /dev/null
+++ b/apps/docs/content/components/time-input/without-label.raw.jsx
@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput defaultValue={new Time(11, 45)} label={null} />;
+}
diff --git a/apps/docs/content/components/time-input/without-label.ts b/apps/docs/content/components/time-input/without-label.ts
index 88f073e25e..f6109b3984 100644
--- a/apps/docs/content/components/time-input/without-label.ts
+++ b/apps/docs/content/components/time-input/without-label.ts
@@ -1,11 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput label={null} defaultValue={new Time(11, 45)} />
-  );
-}`;
+import App from "./without-label.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,