diff --git a/packages/frappe-ui-react/src/components/alert/alert.stories.tsx b/packages/frappe-ui-react/src/components/alert/alert.stories.tsx
new file mode 100644
index 00000000..18f6d506
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/alert/alert.stories.tsx
@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import Alert from "./alert";
+import { Button } from "../button";
+import { BadgeInfo } from "lucide-react";
+
+export default {
+  title: "Components/Alert",
+  component: Alert,
+  argTypes: {
+    title: {
+      control: "text",
+      description: "The title text of the alert",
+    },
+    theme: {
+      control: {
+        type: "select",
+        options: ["yellow", "blue", "red", "green"],
+      },
+      description: "Color theme of the alert",
+    },
+    variant: {
+      control: {
+        type: "select",
+        options: ["subtle", "outline"],
+      },
+      description: "Visual variant of the alert",
+    },
+    description: {
+      control: "text",
+      description: "Description text displayed below the title",
+    },
+    dismissable: {
+      control: "boolean",
+      description: "Whether the alert can be dismissed",
+    },
+    visible: {
+      control: "boolean",
+      description: "Controls the visibility of the alert (controlled mode)",
+    },
+    icon: {
+      control: false,
+      description: "Custom icon to display in the alert",
+    },
+    footer: {
+      control: false,
+      description: "Custom footer content for the alert",
+    },
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: "dynamic",
+      },
+    },
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} as Meta<typeof Alert>;
+
+type Story = StoryObj<typeof Alert>;
+
+const AlertTemplate: Story = {
+  render: (args) => (
+    <div className="w-[500px]">
+      <Alert {...args} />
+    </div>
+  ),
+};
+
+export const Success: Story = {
+  ...AlertTemplate,
+  args: {
+    title: "Source successfully added",
+    description:
+      "Discover the new feature to enhance your experience. See how it can help you.",
+    theme: "green",
+  },
+};
+
+export const Warning: Story = {
+  ...AlertTemplate,
+  args: {
+    title: "Source successfully added",
+    description:
+      "Discover the new feature to enhance your experience. See how it can help you.",
+    theme: "yellow",
+  },
+};
+
+export const Error: Story = {
+  ...AlertTemplate,
+  args: {
+    title: "Source successfully added",
+    description:
+      "Discover the new feature to enhance your experience. See how it can help you.",
+    theme: "red",
+  },
+};
+
+export const Info: Story = {
+  ...AlertTemplate,
+  args: {
+    title: "Source successfully added",
+    description:
+      "Discover the new feature to enhance your experience. See how it can help you.",
+    theme: "blue",
+  },
+};
+
+export const ControlledState: Story = {
+  render: (args) => {
+    const [visible, setVisible] = useState(true);
+
+    return (
+      <div className="min-w-[500px] min-h-34 w-[500px]">
+        <Button
+          variant="solid"
+          label="Toggle Alert"
+          onClick={() => setVisible(!visible)}
+          className="mb-3"
+        />
+
+        <Alert
+          {...args}
+          visible={visible}
+          onVisibleChange={setVisible}
+          title="Source successfully added"
+          description="Discover the new feature to enhance your experience. See how it can help you."
+        />
+      </div>
+    );
+  },
+  args: {},
+};
+
+export const CustomSlots: Story = {
+  render: (args) => (
+    <div className="w-[500px]">
+      <Alert
+        {...args}
+        title="Your trial ends soon!"
+        variant="outline"
+        description="Upgrade to keep enjoying features and future technical support."
+        icon={() => <BadgeInfo className="w-4 h-4" />}
+        footer={() => (
+          <Button className="w-full" variant="solid" label="Update now" />
+        )}
+      />
+    </div>
+  ),
+  args: {},
+};
diff --git a/packages/frappe-ui-react/src/components/alert/alert.tsx b/packages/frappe-ui-react/src/components/alert/alert.tsx
index 3cbd98ac..a7ba369c 100644
--- a/packages/frappe-ui-react/src/components/alert/alert.tsx
+++ b/packages/frappe-ui-react/src/components/alert/alert.tsx
@@ -1,53 +1,96 @@
-import React, { useMemo } from "react";
+/**
+ * External dependencies.
+ */
+import React, { useCallback, useMemo, useState } from "react";
+import { CircleCheck, CircleX, Info, TriangleAlert, X } from "lucide-react";
+import clsx from "clsx";
 
+/**
+ * Internal dependencies.
+ */
 import type { AlertProps } from "./types";
 
 const Alert: React.FC<AlertProps> = ({
   title,
-  type = "warning",
-  actions,
-  children,
-  ...rest
+  theme,
+  variant = "subtle",
+  description,
+  dismissable = true,
+  visible: controlledVisible,
+  onVisibleChange,
+  icon,
+  footer,
 }) => {
+  const [internalVisible, setInternalVisible] = useState(true);
+
+  const isControlled = controlledVisible !== undefined;
+  const visible = isControlled ? controlledVisible : internalVisible;
+
+  const handleDismiss = useCallback(() => {
+    if (isControlled) {
+      onVisibleChange?.(false);
+    } else {
+      setInternalVisible(false);
+    }
+  }, [isControlled, onVisibleChange]);
+
   const classes = useMemo(() => {
-    const typeClasses: { [type: string]: string } = {
-      warning: "text-ink-gray-7 bg-surface-blue-1",
+    const subtleBgs = {
+      yellow: "bg-surface-amber-2",
+      blue: "bg-surface-blue-2",
+      red: "bg-surface-red-2",
+      green: "bg-surface-green-2",
+    };
+
+    if (variant === "outline") return "border border-outline-gray-3";
+
+    return theme ? subtleBgs[theme] : "bg-surface-gray-2";
+  }, [theme, variant]);
+
+  const iconConfig = useMemo(() => {
+    const data = {
+      yellow: { component: TriangleAlert, css: "text-ink-amber-3" },
+      blue: { component: Info, css: "text-ink-blue-3" },
+      red: { component: CircleX, css: "text-ink-red-3" },
+      green: { component: CircleCheck, css: "text-ink-green-3" },
     };
-    return typeClasses[type] || typeClasses["warning"];
-  }, [type]);
+    return theme ? data[theme] : null;
+  }, [theme]);
+
+  if (!visible) return null;
 
   return (
-    <div className="block w-full" {...rest}>
-      <div
-        className={`flex items-start rounded-md px-4 py-3.5 text-base md:px-5 ${classes}`}
-      >
-        <svg
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            opacity="0.8"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 10.5C12.5523 10.5 13 10.9477 13 11.5V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11.5C11 10.9477 11.4477 10.5 12 10.5ZM13 7.99976C13 7.44747 12.5523 6.99976 12 6.99976C11.4477 6.99976 11 7.44747 11 7.99976V8.1C11 8.65228 11.4477 9.1 12 9.1C12.5523 9.1 13 8.65228 13 8.1V7.99976Z"
-            fill="#318AD8"
-          />
-        </svg>
-        <div className="ml-2 w-full">
-          <div className="flex flex-col md:flex-row md:items-baseline">
-            {title && (
-              <h3 className="text-lg font-medium text-ink-gray-9">{title}</h3>
-            )}
-            <div className="mt-1 md:ml-2 md:mt-0">{children}</div>
-            {actions && (
-              <div className="mt-3 md:ml-auto md:mt-0">{actions}</div>
-            )}
-          </div>
-        </div>
+    <div
+      role="alert"
+      className={clsx("grid grid-cols-[auto_1fr_auto] gap-3 rounded-md px-4 py-3.5 text-base items-start", classes)}
+    >
+      {icon ? (
+        icon()
+      ) : iconConfig ? (
+        <iconConfig.component className={clsx("h-4 w-4", iconConfig.css)} />
+      ) : null}
+
+      <div className={clsx("grid gap-2", !icon && !iconConfig && "col-span-2")}>
+        <span className="text-ink-gray-9">{title}</span>
+
+        {description ? (
+          typeof description === "string" ? (
+            <p className="text-ink-gray-6 text-base/normal font-[420]">
+              {description}
+            </p>
+          ) : (
+            description()
+          )
+        ) : null}
       </div>
+
+      {dismissable && (
+        <button onClick={handleDismiss} aria-label="Dismiss alert">
+          <X className="h-4 w-4" />
+        </button>
+      )}
+
+      {footer ? <div className="col-span-full">{footer()}</div> : null}
     </div>
   );
 };
diff --git a/packages/frappe-ui-react/src/components/alert/tests/alert.tsx b/packages/frappe-ui-react/src/components/alert/tests/alert.tsx
index dc47a75a..bac97d52 100644
--- a/packages/frappe-ui-react/src/components/alert/tests/alert.tsx
+++ b/packages/frappe-ui-react/src/components/alert/tests/alert.tsx
@@ -1,29 +1,102 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import Alert from "../alert";
 
 describe("Alert Component", () => {
   it("should render with title", () => {
-    render(<Alert title="Test Title">Test content</Alert>);
+    render(<Alert title="Test Title" />);
     expect(screen.getByText("Test Title")).toBeInTheDocument();
   });
 
-  it("should render with children content", () => {
-    render(<Alert>Test content</Alert>);
-    expect(screen.getByText("Test content")).toBeInTheDocument();
+  it("should render with description", () => {
+    render(<Alert title="Test Title" description="Test description" />);
+    expect(screen.getByText("Test description")).toBeInTheDocument();
   });
 
-  it("should render with actions", () => {
-    render(<Alert actions={<button>Action</button>}>Test content</Alert>);
-    expect(screen.getByRole("button")).toBeInTheDocument();
+  it("should render with footer", () => {
+    render(
+      <Alert title="Test Title" footer={() => <button>Footer Action</button>} />
+    );
+    expect(screen.getByText("Footer Action")).toBeInTheDocument();
   });
 
-  it("should apply warning styles by default", () => {
-    render(<Alert>Test content</Alert>);
-    const container =
-      screen.getByText("Test content").parentElement?.parentElement
-        ?.parentElement;
-    expect(container).toHaveClass("text-ink-gray-7 bg-surface-blue-1");
+  it("should apply correct theme classes", () => {
+    const { container } = render(<Alert title="Test" theme="green" />);
+    const alertElement = container.querySelector('[role="alert"]');
+    expect(alertElement).toHaveClass("bg-surface-green-2");
+  });
+
+  it("should apply outline variant classes", () => {
+    const { container } = render(<Alert title="Test" variant="outline" />);
+    const alertElement = container.querySelector('[role="alert"]');
+    expect(alertElement).toHaveClass("border border-outline-gray-3");
+  });
+
+  it("should render dismiss button when dismissable is true", () => {
+    render(<Alert title="Test" dismissable={true} />);
+    const dismissButton = screen.getByLabelText("Dismiss alert");
+    expect(dismissButton).toBeInTheDocument();
+  });
+
+  it("should not render dismiss button when dismissable is false", () => {
+    render(<Alert title="Test" dismissable={false} />);
+    const dismissButton = screen.queryByLabelText("Dismiss alert");
+    expect(dismissButton).not.toBeInTheDocument();
+  });
+
+  it("should hide alert when dismiss button is clicked (uncontrolled)", () => {
+    const { container } = render(<Alert title="Test" dismissable={true} />);
+    const dismissButton = screen.getByLabelText("Dismiss alert");
+
+    fireEvent.click(dismissButton);
+
+    const alertElement = container.querySelector('[role="alert"]');
+    expect(alertElement).not.toBeInTheDocument();
+  });
+
+  it("should call onVisibleChange when dismiss button is clicked (controlled)", () => {
+    const onVisibleChange = jest.fn();
+    render(
+      <Alert
+        title="Test"
+        visible={true}
+        onVisibleChange={onVisibleChange}
+        dismissable={true}
+      />
+    );
+    const dismissButton = screen.getByLabelText("Dismiss alert");
+
+    fireEvent.click(dismissButton);
+
+    expect(onVisibleChange).toHaveBeenCalledWith(false);
+  });
+
+  it("should not render when visible is false", () => {
+    const { container } = render(<Alert title="Test" visible={false} />);
+    const alertElement = container.querySelector('[role="alert"]');
+    expect(alertElement).not.toBeInTheDocument();
+  });
+
+  it("should render custom icon", () => {
+    const CustomIcon = () => <div data-testid="custom-icon">Icon</div>;
+    render(<Alert title="Test" icon={() => <CustomIcon />} />);
+    expect(screen.getByTestId("custom-icon")).toBeInTheDocument();
+  });
+
+  it("should render theme-based icon for each theme", () => {
+    const themes = ["yellow", "blue", "red", "green"] as const;
+
+    themes.forEach((theme) => {
+      const { container } = render(<Alert title="Test" theme={theme} />);
+      const icon = container.querySelector("svg");
+      expect(icon).toBeInTheDocument();
+    });
+  });
+
+  it("should not render icon when no theme and no custom icon provided", () => {
+    const { container } = render(<Alert title="Test" />);
+    const svgs = container.querySelectorAll("svg");
+    expect(svgs.length).toBe(1); // Only dismiss button icon
   });
 });
diff --git a/packages/frappe-ui-react/src/components/alert/types.ts b/packages/frappe-ui-react/src/components/alert/types.ts
index 0c7f432e..5ec9085c 100644
--- a/packages/frappe-ui-react/src/components/alert/types.ts
+++ b/packages/frappe-ui-react/src/components/alert/types.ts
@@ -1,7 +1,16 @@
+import type { ReactNode } from "react";
+
 export interface AlertProps {
-  title?: string;
-  type?: "warning";
-  actions?: React.ReactNode;
-  children: React.ReactNode;
-  [key: string]: any;
+  title: string;
+  theme?: "yellow" | "blue" | "red" | "green";
+  variant?: "subtle" | "outline";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  description?: string | ((args?: any) => ReactNode);
+  dismissable?: boolean;
+  visible?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  icon?: (args?: any) => ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  footer?: (args?: any) => ReactNode;
 }
diff --git a/packages/frappe-ui-react/src/components/calendar/calendar.stories.tsx b/packages/frappe-ui-react/src/components/calendar/calendar.stories.tsx
index 8912aa46..c4a850bd 100644
--- a/packages/frappe-ui-react/src/components/calendar/calendar.stories.tsx
+++ b/packages/frappe-ui-react/src/components/calendar/calendar.stories.tsx
@@ -191,6 +191,7 @@ export const CustomHeader: Story = {
           />
         </div>
         <Select
+          defaultValue="Month"
           onChange={(e) => updateActiveView(e.target.value)}
           options={enabledModes.map((mode: { id: string; label: string }) => ({
             value: mode.id,
diff --git a/packages/frappe-ui-react/src/components/calendar/hooks/useCalendar.ts b/packages/frappe-ui-react/src/components/calendar/hooks/useCalendar.ts
index ce0e83a3..aa158d27 100644
--- a/packages/frappe-ui-react/src/components/calendar/hooks/useCalendar.ts
+++ b/packages/frappe-ui-react/src/components/calendar/hooks/useCalendar.ts
@@ -140,25 +140,28 @@ export const useCalendar = (
   const formatter = useCallback(
     (val: Date | string) => {
       const date = dayjs(val);
+
       if (activeView === "Month") {
         return date.format("MMMM YYYY");
-      } else if (activeView === "Week") {
-        const weekStart = datesInWeeks[weekIndex]?.[0];
-        const weekEnd = datesInWeeks[weekIndex]?.[6];
-        if (weekStart && weekEnd) {
-          const startMonth = dayjs(weekStart).month();
-          const endMonth = dayjs(weekEnd).month();
-          if (startMonth === endMonth) {
-            return dayjs(weekStart).format("MMMM YYYY");
-          }
-          return `${dayjs(weekStart).format("MMM")} - ${dayjs(weekEnd).format(
-            "MMM YYYY"
-          )}`;
-        }
-        return date.format("MMMM YYYY");
-      } else {
+      }
+      if (activeView === "Day") {
         return date.format("ddd, D MMM YYYY");
       }
+
+      // In week view, format as month if week is within same month, otherwise show month range
+      const weekStart = datesInWeeks[weekIndex]?.[0];
+      const weekEnd = datesInWeeks[weekIndex]?.[6];
+      if (!weekStart || !weekEnd) {
+        return date.format("MMMM YYYY");
+      }
+
+      const startMonth = dayjs(weekStart).month();
+      const endMonth = dayjs(weekEnd).month();
+      if (startMonth === endMonth) {
+        return dayjs(weekStart).format("MMMM YYYY");
+      }
+
+      return `${dayjs(weekStart).format("MMM")} - ${dayjs(weekEnd).format("MMM YYYY")}`;
     },
     [activeView, datesInWeeks, weekIndex]
   );
diff --git a/packages/frappe-ui-react/src/components/combobox/combobox.tsx b/packages/frappe-ui-react/src/components/combobox/combobox.tsx
index fbe039e3..5b371c26 100644
--- a/packages/frappe-ui-react/src/components/combobox/combobox.tsx
+++ b/packages/frappe-ui-react/src/components/combobox/combobox.tsx
@@ -1,3 +1,6 @@
+/**
+ * External dependencies.
+ */
 import { useCallback, useMemo, useState } from "react";
 import {
   Combobox as ComboboxRoot,
@@ -6,9 +9,13 @@ import {
   ComboboxOptions,
   ComboboxOption,
 } from "@headlessui/react";
-import type { ComboboxProps, SimpleOption } from "./types";
 import { Check } from "lucide-react";
 
+/**
+ * Internal dependencies.
+ */
+import type { ComboboxProps, SimpleOption } from "./types";
+
 // Utility for display
 const getLabel = (option: SimpleOption) =>
   typeof option === "string" ? option : option.label;
diff --git a/packages/frappe-ui-react/src/components/datePicker/dateRangePicker.tsx b/packages/frappe-ui-react/src/components/datePicker/dateRangePicker.tsx
index 57c9a31f..98dd166d 100644
--- a/packages/frappe-ui-react/src/components/datePicker/dateRangePicker.tsx
+++ b/packages/frappe-ui-react/src/components/datePicker/dateRangePicker.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import type { DateRangePickerProps } from "./types";
 import { useDatePicker } from "./useDatePicker";
@@ -49,26 +49,7 @@ function useDateRangePicker({
     onChange: () => {},
   });
 
-  function handleDateClick(date: Date): boolean {
-    // Zero out time for date
-    const d = new Date(date);
-    d.setHours(0, 0, 0, 0);
-    const v = getDateValue(d);
-    if (fromDate && toDate) {
-      setFromDate(v);
-      setToDate("");
-    } else if (fromDate && !toDate) {
-      setToDate(v);
-      swapDatesIfNecessary(fromDate, v);
-      onChange?.([fromDate, v]);
-      return true;
-    } else {
-      setFromDate(v);
-    }
-    return false;
-  }
-
-  function swapDatesIfNecessary(a: string, b: string) {
+  const swapDatesIfNecessary = useCallback((a: string, b: string) => {
     if (!a || !b) return;
     const from = getDate(a);
     from.setHours(0, 0, 0, 0);
@@ -79,31 +60,56 @@ function useDateRangePicker({
       setFromDate(getDateValue(to));
       setToDate(getDateValue(from));
     }
-  }
+  }, []);
 
-  function handleToday() {
+  const handleDateClick = useCallback(
+    (date: Date): boolean => {
+      // Zero out time for date
+      const d = new Date(date);
+      d.setHours(0, 0, 0, 0);
+      const v = getDateValue(d);
+      if (fromDate && toDate) {
+        setFromDate(v);
+        setToDate("");
+      } else if (fromDate && !toDate) {
+        setToDate(v);
+        swapDatesIfNecessary(fromDate, v);
+        onChange?.([fromDate, v]);
+        return true;
+      } else {
+        setFromDate(v);
+      }
+      return false;
+    },
+    [fromDate, toDate, onChange, swapDatesIfNecessary]
+  );
+
+  const handleToday = useCallback(() => {
     const d = new Date(today);
     d.setHours(0, 0, 0, 0);
     const todayStr = getDateValue(d);
     setFromDate(todayStr);
     setToDate(todayStr);
-  }
+  }, [today]);
 
-  function clearDates() {
+  const clearDates = useCallback(() => {
     setFromDate("");
     setToDate("");
     onChange?.(["", ""]);
-  }
+  }, [onChange]);
 
-  function selectDates() {
+  const selectDates = useCallback(() => {
     onChange?.([fromDate, toDate]);
     setOpen(false);
-  }
+  }, [fromDate, toDate, onChange, setOpen]);
 
-  function isInRange(date: Date) {
-    if (!fromDate || !toDate) return false;
-    return date >= getDate(fromDate) && date <= getDate(toDate);
-  }
+  const isInRange = useCallback(
+    (date: Date) => {
+      if (!fromDate || !toDate) return false;
+      return date >= getDate(fromDate) && date <= getDate(toDate);
+    },
+    [fromDate, toDate]
+  );
 
   return {
     open,
@@ -191,8 +197,8 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = ({
         const displayValue = formatter
           ? formatter(from, to)
           : from && to
-            ? `${from} to ${to}`
-            : from || "";
+          ? `${from} to ${to}`
+          : from || "";
 
         if (children) {
           return children({ togglePopover, isOpen: open, displayValue });
diff --git a/packages/frappe-ui-react/src/components/datePicker/useDatePicker.ts b/packages/frappe-ui-react/src/components/datePicker/useDatePicker.ts
index 139262cb..89f74817 100644
--- a/packages/frappe-ui-react/src/components/datePicker/useDatePicker.ts
+++ b/packages/frappe-ui-react/src/components/datePicker/useDatePicker.ts
@@ -24,12 +24,23 @@ const MONTHS = [
   "December",
 ];
 
+/**
+ * Formats time in 12-hour format with AM/PM
+ * @param hours - Hour value (0-23)
+ * @param minutes - Minute value (0-59)
+ * @returns Formatted time string
+ */
 function formatTime12h(hours: number, minutes: number): string {
   const period = hours >= 12 ? "pm" : "am";
   const h = hours % 12 || 12;
   return `${h}:${minutes.toString().padStart(2, "0")} ${period}`;
 }
 
+/**
+ * Parses a 12-hour format time string into hours and minutes
+ * @param timeStr - Time string in format "h:mm am/pm"
+ * @returns Object containing hours and minutes
+ */
 function parseTimeValue(timeStr: string): { hours: number; minutes: number } {
   if (!timeStr) return { hours: 0, minutes: 0 };
   const [time, period] = timeStr.split(" ");
@@ -41,6 +52,10 @@ function parseTimeValue(timeStr: string): { hours: number; minutes: number } {
   return { hours, minutes: m };
 }
 
+/**
+ * Generates an array of time options in 15-minute intervals for a full day
+ * @returns Array of time strings in 12-hour format (e.g., ["12:00 am", "12:15 am", ...])
+ */
 function generateTimeOptions(): string[] {
   const options: string[] = [];
   for (let h = 0; h < 24; h++) {
diff --git a/packages/frappe-ui-react/src/components/index.ts b/packages/frappe-ui-react/src/components/index.ts
index dc7053e8..f58b081e 100644
--- a/packages/frappe-ui-react/src/components/index.ts
+++ b/packages/frappe-ui-react/src/components/index.ts
@@ -20,6 +20,8 @@ export * from "./formControl";
 export * from "./gridLayout";
 export * from "./hooks";
 export * from "./listview";
+export * from "./multiSelect";
+export * from "./monthPicker";
 export * from "./password";
 export * from "./progress";
 export * from "./popover";
@@ -33,6 +35,7 @@ export * from "./tabs";
 export * from "./textInput";
 export * from "./textarea";
 export { default as TextEditor } from "./textEditor";
+export * from "./timePicker";
 export * from "./toast";
 export * from "./tooltip";
 export * from "./tree";
diff --git a/packages/frappe-ui-react/src/components/listview/listView.stories.tsx b/packages/frappe-ui-react/src/components/listview/listView.stories.tsx
index 8b9c0888..b6869d60 100644
--- a/packages/frappe-ui-react/src/components/listview/listView.stories.tsx
+++ b/packages/frappe-ui-react/src/components/listview/listView.stories.tsx
@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useEffect, useState } from "react";
 
 import ListView from "./listView";
 import { Avatar } from "../avatar";
@@ -292,18 +293,31 @@ export const SimpleList: Story = {
 
 export const CustomList: Story = {
   render: (args) => {
-    return (
+    const [columns, _setColumns] = useState<typeof custom_columns>([]);
+    useEffect(() => {
+      _setColumns(custom_columns);
+    }, []);
+
+    return columns.length > 0 ? (
       <div>
-        <ListView
-          {...args}
-          columns={custom_columns}
-          rows={custom_rows}
-          rowKey="id"
-        >
+        <ListView {...args} columns={columns} rows={custom_rows} rowKey="id">
           <>
             <ListHeader>
-              {custom_columns.map((column, index) => (
-                <ListHeaderItem key={column.key} item={column}>
+              {columns.map((column, index) => (
+                <ListHeaderItem
+                  key={column.key}
+                  item={column}
+                  onColumnWidthUpdated={(width) => {
+                    _setColumns((prevColumns) => {
+                      const newColumns = [...prevColumns];
+                      newColumns[index] = {
+                        ...newColumns[index],
+                        width: `${width}px`,
+                      };
+                      return newColumns;
+                    });
+                  }}
+                >
                   <div
                     className={`flex items-center gap-2 ${
                       index === 0 ? "ml-4" : ""
@@ -318,8 +332,8 @@ export const CustomList: Story = {
             <ListRows>
               {custom_rows.map((row) => (
                 <ListRow key={row.id} row={row}>
-                  {custom_columns.map((column, index) => {
-                    //@ts-expects-error
+                  {columns.map((column, index) => {
+                    //@ts-expect-error item type
                     const item = row[column.key];
                     return (
                       <div className={`${index === 0 ? "ml-4" : ""}`}>
@@ -383,6 +397,8 @@ export const CustomList: Story = {
           </>
         </ListView>
       </div>
+    ) : (
+      <></>
     );
   },
   args: {
@@ -423,7 +439,7 @@ export const GroupedRows: Story = {
 
 export const CellSlot: Story = {
   render: (args) => {
-    //@ts-expects-error
+    //@ts-expect-error
     const CustomCell = ({ item, column }) => {
       if (column.key === "status") {
         return <Badge>{item}</Badge>;
diff --git a/packages/frappe-ui-react/src/components/listview/listprovider.tsx b/packages/frappe-ui-react/src/components/listview/listprovider.tsx
index 5244b598..4b2ab143 100644
--- a/packages/frappe-ui-react/src/components/listview/listprovider.tsx
+++ b/packages/frappe-ui-react/src/components/listview/listprovider.tsx
@@ -1,4 +1,10 @@
-import React, { ReactNode, useCallback, useMemo, useState } from "react";
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { ListContext, ListOptionsProps } from "./listContext";
 
 interface ListProviderProps {
@@ -20,6 +26,10 @@ export const ListProvider: React.FC<ListProviderProps> = ({
   const [activeRow, setActiveRow] = useState<any>(null);
   const [_columns, setColumns] = useState<any[]>(columns);
 
+  useEffect(() => {
+    setColumns(columns);
+  }, [columns]);
+
   const updateColumnWidth = useCallback((index: number, width: number) => {
     setColumns((prevColumns) => {
       const newColumns = [...prevColumns];
diff --git a/packages/frappe-ui-react/src/components/monthPicker/index.ts b/packages/frappe-ui-react/src/components/monthPicker/index.ts
new file mode 100644
index 00000000..671d7dc3
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/monthPicker/index.ts
@@ -0,0 +1,3 @@
+export { default as MonthPicker } from "./monthPicker";
+export * from "./monthPicker";
+export * from "./types";
diff --git a/packages/frappe-ui-react/src/components/monthPicker/monthPicker.stories.tsx b/packages/frappe-ui-react/src/components/monthPicker/monthPicker.stories.tsx
new file mode 100644
index 00000000..86ff895c
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/monthPicker/monthPicker.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import MonthPicker from "./monthPicker";
+import type { MonthPickerProps } from "./types";
+
+export default {
+  title: "Components/MonthPicker",
+  component: MonthPicker,
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: "text",
+      description:
+        "Selected month value in 'Month Year' format (e.g., 'January 2026').",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text for the MonthPicker button.",
+    },
+    className: {
+      control: "text",
+      description: "CSS class names to apply to the button.",
+    },
+    placement: {
+      control: "select",
+      options: [
+        "top-start",
+        "top",
+        "top-end",
+        "bottom-start",
+        "bottom",
+        "bottom-end",
+        "left-start",
+        "left",
+        "left-end",
+        "right-start",
+        "right",
+        "right-end",
+      ],
+      description: "Popover placement relative to the target.",
+    },
+    onChange: {
+      action: "onChange",
+      description: "Callback fired when the month value changes.",
+    },
+  },
+  parameters: { docs: { source: { type: "dynamic" } }, layout: "centered" },
+} as Meta<typeof MonthPicker>;
+
+type Story = StoryObj<MonthPickerProps>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<string>("");
+    return (
+      <div className="w-80 p-2">
+        <MonthPicker {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    placeholder: "Select month",
+  },
+};
+
+export const FitWidth: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<string>("");
+    return (
+      <div className="p-2">
+        <MonthPicker {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    placeholder: "Select month",
+  },
+};
diff --git a/packages/frappe-ui-react/src/components/monthPicker/monthPicker.tsx b/packages/frappe-ui-react/src/components/monthPicker/monthPicker.tsx
new file mode 100644
index 00000000..f20bdd58
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/monthPicker/monthPicker.tsx
@@ -0,0 +1,156 @@
+/**
+ * External dependencies.
+ */
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ChevronLeft, ChevronRight, Calendar } from "lucide-react";
+import clsx from "clsx";
+
+/**
+ * Internal dependencies.
+ */
+import { dayjs } from "../../utils/dayjs";
+import { Popover } from "../popover";
+import { Button } from "../button";
+import { MonthPickerProps } from "./types";
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+const MonthPicker = ({
+  value,
+  placeholder = "Select month",
+  className,
+  placement,
+  onChange,
+}: MonthPickerProps) => {
+  const [open, setOpen] = useState(false);
+  const [viewMode, setViewMode] = useState<"month" | "year">("month");
+  const today = useMemo(() => new Date(), []);
+  const [currentYear, setCurrentYear] = useState<number>(today.getFullYear());
+
+  const parseValue = useCallback((val: string) => {
+    if (!val) return null;
+    const parsed = dayjs(val, "MMMM YYYY");
+    if (parsed.isValid()) {
+      return { month: parsed.format("MMMM"), year: parsed.year() };
+    }
+    return null;
+  }, []);
+
+  const yearRangeStart = useMemo(
+    () => currentYear - (currentYear % 12),
+    [currentYear]
+  );
+
+  const yearRange = useMemo(
+    () => Array.from({ length: 12 }, (_, i) => yearRangeStart + i),
+    [yearRangeStart]
+  );
+
+  const pickerList = useMemo(
+    () => (viewMode === "year" ? yearRange : MONTHS),
+    [viewMode, yearRange]
+  );
+
+  const toggleViewMode = useCallback(() => {
+    setViewMode((prevMode) => (prevMode === "month" ? "year" : "month"));
+  }, []);
+
+  const prev = useCallback(() => {
+    setCurrentYear((y) => (viewMode === "year" ? y - 12 : y - 1));
+  }, [viewMode]);
+
+  const next = useCallback(() => {
+    setCurrentYear((y) => (viewMode === "year" ? y + 12 : y + 1));
+  }, [viewMode]);
+
+  const handleOpenChange = useCallback((isOpen: boolean) => {
+    setOpen(isOpen);
+    if (!isOpen) setViewMode("month");
+  }, []);
+
+  const handleOnClick = useCallback(
+    (v: string | number) => {
+      const parts = (value || "").split(" ");
+      const indexToModify = viewMode === "year" ? 1 : 0;
+      parts[indexToModify] = String(v);
+      const newValue = parts.join(" ");
+      onChange?.(newValue);
+    },
+    [value, viewMode, onChange]
+  );
+
+  useEffect(() => {
+    const parsed = parseValue(value || "");
+    if (parsed) {
+      setCurrentYear(parsed.year);
+    }
+  }, [value, parseValue]);
+
+  return (
+    <Popover
+      trigger="click"
+      placement={placement || "bottom-start"}
+      show={open}
+      onUpdateShow={handleOpenChange}
+      target={({ togglePopover }) => (
+        <Button
+          onClick={togglePopover}
+          className={clsx("w-full justify-between!", className)}
+          iconRight={() => <Calendar className="w-4 h-4" />}
+        >
+          {value || placeholder}
+        </Button>
+      )}
+      popoverClass="w-min!"
+      body={() => (
+        <div className="mt-2 w-max content shadow-xl rounded-lg border border-outline-gray-1 bg-surface-modal p-2">
+          <div className="flex gap-2 justify-between">
+            <Button variant="ghost" onClick={prev}>
+              <ChevronLeft className="w-4 h-4 text-ink-gray-5" />
+            </Button>
+
+            <Button onClick={toggleViewMode}>
+              {viewMode === "month"
+                ? (value || "").split(" ")[1] || currentYear
+                : `${yearRangeStart} - ${yearRangeStart + 11}`}
+            </Button>
+
+            <Button variant="ghost" onClick={next}>
+              <ChevronRight className="w-4 h-4 text-ink-gray-5" />
+            </Button>
+          </div>
+
+          <hr className="my-2 border-outline-gray-1" />
+
+          <div className="grid grid-cols-3 gap-3">
+            {pickerList.map((month, index) => (
+              <Button
+                key={index}
+                onClick={() => handleOnClick(month)}
+                variant={(value || "").includes(String(month)) ? "solid" : "ghost"}
+                className="text-sm text-ink-gray-9"
+              >
+                {viewMode === "month" ? (month as string).slice(0, 3) : month}
+              </Button>
+            ))}
+          </div>
+        </div>
+      )}
+    />
+  );
+};
+
+export default MonthPicker;
diff --git a/packages/frappe-ui-react/src/components/monthPicker/types.ts b/packages/frappe-ui-react/src/components/monthPicker/types.ts
new file mode 100644
index 00000000..bee6d040
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/monthPicker/types.ts
@@ -0,0 +1,19 @@
+export interface MonthPickerProps {
+  value?: string;
+  placeholder?: string;
+  className?: string;
+  placement?:
+    | "top-start"
+    | "top"
+    | "top-end"
+    | "bottom-start"
+    | "bottom"
+    | "bottom-end"
+    | "left-start"
+    | "left"
+    | "left-end"
+    | "right-start"
+    | "right"
+    | "right-end";
+  onChange?: (value: string) => void;
+}
diff --git a/packages/frappe-ui-react/src/components/multiSelect/index.ts b/packages/frappe-ui-react/src/components/multiSelect/index.ts
new file mode 100644
index 00000000..4c938f42
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/multiSelect/index.ts
@@ -0,0 +1,2 @@
+export { MultiSelect } from "./multiSelect";
+export * from "./types";
diff --git a/packages/frappe-ui-react/src/components/multiSelect/multiSelect.stories.tsx b/packages/frappe-ui-react/src/components/multiSelect/multiSelect.stories.tsx
new file mode 100644
index 00000000..c12da41e
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/multiSelect/multiSelect.stories.tsx
@@ -0,0 +1,157 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CheckCheck, Trash2 } from "lucide-react";
+
+import { MultiSelect } from "./multiSelect";
+import Button from "../button/button";
+import Avatar from "../avatar/avatar";
+
+const meta: Meta<typeof MultiSelect> = {
+  title: "Components/MultiSelect",
+  component: MultiSelect,
+  parameters: {
+    docs: { source: { type: "dynamic" } },
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: "object",
+      description: "Array of selected values",
+    },
+    options: {
+      control: "object",
+      description: "Array of options to display in the dropdown",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text when no options are selected",
+    },
+    hideSearch: {
+      control: "boolean",
+      description: "Hide the search input in the dropdown",
+    },
+    loading: {
+      control: "boolean",
+      description: "Show loading indicator",
+    },
+    onChange: {
+      action: "changed",
+      description: "Callback when selection changes",
+    },
+    renderOption: {
+      control: false,
+      description: "Custom render function for each option",
+    },
+    renderFooter: {
+      control: false,
+      description: "Custom render function for the footer",
+    },
+  },
+  args: {
+    placeholder: "Select option",
+    hideSearch: false,
+    loading: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MultiSelect>;
+
+const img =
+  "https://images.unsplash.com/photo-1502741338009-cac2772e18bc?w=100&h=100&fit=crop";
+
+const options = [
+  { value: "red-apple", label: "Red Apple", img },
+  { value: "blueberry-burst", label: "Blueberry Burst", img },
+  { value: "orange-grove", label: "Orange Grove", img },
+  { value: "banana-split", label: "Banana Split", img },
+  { value: "grapes-cluster", label: "Grapes Cluster", img },
+  { value: "kiwi-slice", label: "Kiwi Slice", img },
+  { value: "mango-fusion", label: "Mango Fusion", img },
+];
+
+export const Default: Story = {
+  args: {
+    options: options,
+    value: [],
+    placeholder: "Select fruit",
+    onChange: () => {},
+  },
+  render: (args) => {
+    const [value, setValue] = useState<string[]>([]);
+    return (
+      <div className="w-[450px]">
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+};
+
+export const OptionSlot: Story = {
+  name: "Option slot",
+  args: {
+    options: options,
+    value: [],
+    placeholder: "Select fruit",
+    onChange: () => {},
+  },
+  render: (args) => {
+    const [value, setValue] = useState<string[]>([]);
+    return (
+      <div className="w-[450px]">
+        <MultiSelect
+          {...args}
+          value={value}
+          onChange={setValue}
+          renderOption={(item) => (
+            <div className="flex items-center">
+              <span className="mr-2">
+                <Avatar image={(item as (typeof options)[0]).img} size="sm" />
+              </span>
+              {item.label}
+            </div>
+          )}
+        />
+      </div>
+    );
+  },
+};
+
+export const FooterSlot: Story = {
+  name: "Footer slot",
+  args: {
+    options: options,
+    value: [],
+    onChange: () => {},
+  },
+  render: (args) => {
+    const [value, setValue] = useState<string[]>([]);
+    return (
+      <div className="w-[450px]">
+        <MultiSelect
+          {...args}
+          value={value}
+          onChange={setValue}
+          renderFooter={({ clearAll, selectAll }) => (
+            <div className="flex justify-between my-2">
+              <Button
+                theme="red"
+                onClick={clearAll}
+                iconLeft={() => <Trash2 className="w-4 h-4" />}
+              >
+                Clear All
+              </Button>
+              <Button
+                onClick={selectAll}
+                iconLeft={() => <CheckCheck className="w-4 h-4" />}
+              >
+                Select All
+              </Button>
+            </div>
+          )}
+        />
+      </div>
+    );
+  },
+};
diff --git a/packages/frappe-ui-react/src/components/multiSelect/multiSelect.tsx b/packages/frappe-ui-react/src/components/multiSelect/multiSelect.tsx
new file mode 100644
index 00000000..b069afee
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/multiSelect/multiSelect.tsx
@@ -0,0 +1,199 @@
+/**
+ * External dependencies
+ */
+import React, { useState, useMemo, useRef, useEffect } from "react";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/react";
+import { Check, ChevronDown, X } from "lucide-react";
+
+/**
+ * Internal dependencies.
+ */
+import Popover from "../popover/popover";
+import Button from "../button/button";
+import LoadingIndicator from "../loadingIndicator";
+import type { MultiSelectOption, MultiSelectProps } from "./types";
+import clsx from "clsx";
+
+export const MultiSelect: React.FC<MultiSelectProps> = ({
+  value = [],
+  options,
+  placeholder = "Select option",
+  hideSearch = false,
+  loading = false,
+  compareFn = (
+    a: NoInfer<MultiSelectOption | null> | object,
+    b: NoInfer<MultiSelectOption | null> | object
+    //@ts-expect-error -- this is fine since we have specified object type in documentation
+  ) => a?.value === b?.value,
+  onChange,
+  renderOption,
+  renderFooter,
+}) => {
+  const [query, setQuery] = useState("");
+  const [showOptions, setShowOptions] = useState(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const selectedOptionObjects = useMemo<MultiSelectOption[]>(() => {
+    return value
+      .map((val) => options.find((opt) => opt.value === val))
+      .filter((opt): opt is MultiSelectOption => opt !== undefined);
+  }, [value, options]);
+
+  const selectedOptions = useMemo(() => {
+    if (selectedOptionObjects.length === 0) return placeholder;
+    const labels = selectedOptionObjects.map((opt) => opt.label);
+    return labels.join(", ");
+  }, [selectedOptionObjects, placeholder]);
+
+  const filteredOptions = useMemo(() => {
+    if (!query) return options;
+    const lowerQuery = query.toLowerCase();
+    return options.filter((opt) =>
+      opt.label.toLowerCase().includes(lowerQuery)
+    );
+  }, [options, query]);
+
+  const clearAll = () => {
+    setQuery("");
+    onChange?.([]);
+  };
+
+  const selectAll = () => {
+    setQuery("");
+    const allValues = options.filter((opt) => !opt.disabled).map((opt) => opt.value);
+    onChange?.(allValues);
+  };
+
+  const clearSearch = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setQuery("");
+    searchInputRef.current?.focus();
+  };
+
+  const handleChange = (newValue: MultiSelectOption[]) => {
+    onChange?.(newValue.map((opt) => opt.value));
+  };
+
+  useEffect(() => {
+    if (showOptions && searchInputRef.current && !hideSearch) {
+      requestAnimationFrame(() => {
+        searchInputRef.current?.focus();
+      });
+    }
+  }, [showOptions, hideSearch]);
+
+  return (
+    <Popover
+      placement="bottom-start"
+      show={showOptions}
+      onUpdateShow={setShowOptions}
+      target={({ togglePopover }) => (
+        <Button
+          onClick={togglePopover}
+          className={clsx(
+            "w-full justify-between!",
+            value.length === 0 && "text-ink-gray-4!"
+          )}
+          iconRight={() => <ChevronDown className="w-4 h-4 shrink-0" />}
+        >
+          {selectedOptions}
+        </Button>
+      )}
+      body={() => (
+        <div className="mt-2 shadow-xl rounded-lg border border-outline-gray-1 bg-surface-modal">
+          <Combobox
+            value={selectedOptionObjects}
+            onChange={handleChange}
+            by={compareFn}
+            multiple
+          >
+            <div className="relative p-2 pb-0">
+              {!hideSearch && (
+                <div className="flex w-full items-center justify-between gap-2 rounded bg-surface-gray-2 px-2 py-1 ring-2 ring-outline-gray-2 transition-colors hover:bg-surface-gray-3 border border-transparent">
+                  <ComboboxInput
+                    ref={searchInputRef}
+                    displayValue={() => query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder="Search for..."
+                    className="bg-transparent p-0 focus:outline-0 border-0 focus:border-0 focus:ring-0 text-base text-ink-gray-8 h-full placeholder:text-ink-gray-4 w-full"
+                  />
+                  <div className="inline-flex gap-1">
+                    {loading && (
+                      <LoadingIndicator className="size-4 text-ink-gray-5" />
+                    )}
+                    {query && (
+                      <button
+                        type="button"
+                        aria-label="Clear search"
+                        className="p-0 m-0 bg-transparent border-0 cursor-pointer hover:opacity-70 transition-opacity"
+                        onClick={clearSearch}
+                      >
+                        <X className="size-4 text-ink-gray-9" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              <div className="z-10 overflow-hidden mt-2">
+                <ComboboxOptions
+                  static
+                  className="max-h-60 overflow-auto pb-1.5 focus:outline-none"
+                >
+                  {filteredOptions.length === 0 && (
+                    <div className="text-ink-gray-5 text-base text-center py-1.5 px-2.5">
+                      No results found
+                    </div>
+                  )}
+
+                  {filteredOptions.map((item) => (
+                    <ComboboxOption
+                      key={item.value}
+                      value={item}
+                      disabled={item.disabled}
+                      className="text-base leading-none text-ink-gray-7 rounded flex items-center h-7 p-1.5 pr-8 relative select-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[focus]:outline-none data-[focus]:bg-surface-gray-3 cursor-pointer"
+                    >
+                      {({ selected }) => (
+                        <>
+                          <span className="truncate">
+                            {renderOption ? renderOption(item) : item.label}
+                          </span>
+                          {selected && (
+                            <div className="absolute right-2 inline-flex items-center justify-center">
+                              <Check className="size-4" />
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </ComboboxOption>
+                  ))}
+                </ComboboxOptions>
+
+                <hr className="border-outline-gray-3" />
+
+                {renderFooter ? (
+                  renderFooter({ clearAll, selectAll })
+                ) : (
+                  <div className="flex justify-between my-2">
+                    <Button variant="ghost" onClick={clearAll}>
+                      Clear All
+                    </Button>
+                    <Button variant="ghost" onClick={selectAll}>
+                      Select All
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </Combobox>
+        </div>
+      )}
+    />
+  );
+};
diff --git a/packages/frappe-ui-react/src/components/multiSelect/types.ts b/packages/frappe-ui-react/src/components/multiSelect/types.ts
new file mode 100644
index 00000000..f4775278
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/multiSelect/types.ts
@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+export interface MultiSelectOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface MultiSelectProps {
+  value?: string[];
+  options: MultiSelectOption[];
+  placeholder?: string;
+  hideSearch?: boolean;
+  loading?: boolean;
+  compareFn?: (
+    a: NoInfer<MultiSelectOption | null> | object,
+    b: NoInfer<MultiSelectOption | null> | object
+  ) => boolean;
+  onChange?: (value: string[]) => void;
+  renderOption?: (option: MultiSelectOption) => ReactNode;
+  renderFooter?: (props: {
+    clearAll: () => void;
+    selectAll: () => void;
+  }) => ReactNode;
+}
diff --git a/packages/frappe-ui-react/src/components/select/select.tsx b/packages/frappe-ui-react/src/components/select/select.tsx
index bfee0605..531c7d10 100644
--- a/packages/frappe-ui-react/src/components/select/select.tsx
+++ b/packages/frappe-ui-react/src/components/select/select.tsx
@@ -7,6 +7,7 @@ const Select: React.FC<SelectProps> = ({
   variant = "subtle",
   disabled = false,
   value,
+  defaultValue,
   placeholder,
   options,
   onChange,
@@ -100,7 +101,7 @@ const Select: React.FC<SelectProps> = ({
       xl: "pl-3",
     }[size];
   }, [size]);
-  
+
   return (
     <div className="relative flex items-center">
       {prefix && (
@@ -121,14 +122,13 @@ const Select: React.FC<SelectProps> = ({
         className={selectClasses}
         disabled={disabled}
         id={htmlId}
-        value={value}
+        {...(value !== undefined ? { value } : { defaultValue })}
         onChange={handleChange}
         data-testid="select"
       >
         {placeholder && !value && <option />}
         {selectOptions.map((option) => (
           <option
-            selected={option.value === value}
             key={option.value}
             value={option.value}
             disabled={option.disabled}
diff --git a/packages/frappe-ui-react/src/components/select/types.ts b/packages/frappe-ui-react/src/components/select/types.ts
index 6c66f3a1..2c3f7251 100644
--- a/packages/frappe-ui-react/src/components/select/types.ts
+++ b/packages/frappe-ui-react/src/components/select/types.ts
@@ -14,6 +14,7 @@ export interface SelectProps {
   variant?: SelectVariant;
   disabled?: boolean;
   value?: string;
+  defaultValue?: string;
   placeholder?: string;
   options: (string | SelectOption)[];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/frappe-ui-react/src/components/textInput/types.ts b/packages/frappe-ui-react/src/components/textInput/types.ts
index 1072913a..f242f397 100644
--- a/packages/frappe-ui-react/src/components/textInput/types.ts
+++ b/packages/frappe-ui-react/src/components/textInput/types.ts
@@ -1,7 +1,7 @@
-import type { ReactNode } from "react";
+import type { ReactNode, InputHTMLAttributes } from "react";
 import { TextInputTypes } from "../../common/types";
 
-export interface TextInputProps {
+export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'onChange'> {
   type?: TextInputTypes;
   size?: "sm" | "md" | "lg" | "xl";
   variant?: "subtle" | "outline" | "ghost";
diff --git a/packages/frappe-ui-react/src/components/timePicker/index.ts b/packages/frappe-ui-react/src/components/timePicker/index.ts
new file mode 100644
index 00000000..812fe952
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/timePicker/index.ts
@@ -0,0 +1,2 @@
+export { default as TimePicker } from "./timePicker";
+export * from "./types";
diff --git a/packages/frappe-ui-react/src/components/timePicker/timePicker.stories.tsx b/packages/frappe-ui-react/src/components/timePicker/timePicker.stories.tsx
new file mode 100644
index 00000000..eac7ce78
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/timePicker/timePicker.stories.tsx
@@ -0,0 +1,198 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import TimePicker from "./timePicker";
+
+export default {
+  title: "Components/TimePicker",
+  component: TimePicker,
+  argTypes: {
+    value: {
+      control: "text",
+      description: "The time value (HH:MM format)",
+    },
+    interval: {
+      control: "number",
+      description: "Time interval in minutes for generated options",
+    },
+    variant: {
+      control: {
+        type: "select",
+        options: ["outline", "subtle"],
+      },
+      description: "Visual variant of the input",
+    },
+    allowCustom: {
+      control: "boolean",
+      description: "Allow custom time input",
+    },
+    autoClose: {
+      control: "boolean",
+      description: "Auto close on selection",
+    },
+    use12Hour: {
+      control: "boolean",
+      description: "Use 12-hour format",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disable the input",
+    },
+    placement: {
+      control: "select",
+      options: [
+        "bottom-start",
+        "bottom-end",
+        "top-start",
+        "top-end",
+        "right-start",
+        "right-end",
+        "left-start",
+        "left-end",
+      ],
+      description: "Popover placement",
+    },
+    scrollMode: {
+      control: {
+        type: "select",
+        options: ["center", "start", "nearest"],
+      },
+      description: "Scroll behavior when opening",
+    },
+    minTime: {
+      control: "text",
+      description: "Minimum time (HH:MM)",
+    },
+    maxTime: {
+      control: "text",
+      description: "Maximum time (HH:MM)",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text",
+    },
+    prefix: {
+      control: false,
+      description: "Prefix element",
+    },
+    suffix: {
+      control: false,
+      description: "Suffix element",
+    },
+    options: {
+      control: "object",
+      description: "Custom time options",
+    },
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: "dynamic",
+      },
+    },
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} as Meta<typeof TimePicker>;
+
+type Story = StoryObj<typeof TimePicker>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <div className="p-2 space-y-2">
+        <TimePicker {...args} value={value} onChange={setValue} />
+        <div className="text-xs text-ink-gray-6">Value: {value || "—"}</div>
+      </div>
+    );
+  },
+  args: {
+    placeholder: "Select time",
+    interval: 15,
+    allowCustom: true,
+    autoClose: true,
+    use12Hour: true,
+    variant: "subtle",
+    placement: "bottom-start",
+    scrollMode: "center",
+  },
+};
+
+export const TwentyFourHourFormat: Story = {
+  render: (args) => {
+    const [value, setValue] = useState("13:30");
+
+    return (
+      <div className="p-2 space-y-2">
+        <TimePicker {...args} value={value} onChange={setValue} />
+        <div className="text-xs text-ink-gray-6">Value: {value}</div>
+      </div>
+    );
+  },
+  name: "24 Hour Format",
+  args: {
+    use12Hour: false,
+    interval: 15,
+    allowCustom: true,
+    autoClose: true,
+    variant: "subtle",
+    placement: "bottom-start",
+    scrollMode: "center",
+  },
+};
+
+export const CustomOptions: Story = {
+  render: (args) => {
+    const [value, setValue] = useState("09:00");
+
+    return (
+      <div className="p-2 space-y-2">
+        <TimePicker {...args} value={value} onChange={setValue} />
+        <div className="text-xs text-ink-gray-6">Value: {value}</div>
+      </div>
+    );
+  },
+  name: "Custom Options (no interval generation)",
+  args: {
+    allowCustom: false,
+    autoClose: true,
+    use12Hour: true,
+    variant: "subtle",
+    placement: "bottom-start",
+    scrollMode: "center",
+    options: [
+      { value: "08:00" },
+      { value: "09:00" },
+      { value: "09:30" },
+      { value: "10:00" },
+      { value: "11:15" },
+      { value: "13:45" },
+    ],
+  },
+};
+
+export const MinMaxRange: Story = {
+  render: (args) => {
+    const [value, setValue] = useState("08:00");
+
+    return (
+      <div className="p-2 space-y-2">
+        <TimePicker {...args} value={value} onChange={setValue} />
+        <div className="text-xs text-ink-gray-6">Value: {value}</div>
+      </div>
+    );
+  },
+  args: {
+    minTime: "08:00",
+    maxTime: "12:00",
+    interval: 15,
+    allowCustom: true,
+    autoClose: true,
+    use12Hour: true,
+    variant: "subtle",
+    placement: "bottom-start",
+    scrollMode: "center",
+  },
+};
diff --git a/packages/frappe-ui-react/src/components/timePicker/timePicker.tsx b/packages/frappe-ui-react/src/components/timePicker/timePicker.tsx
new file mode 100644
index 00000000..c9a012e2
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/timePicker/timePicker.tsx
@@ -0,0 +1,175 @@
+/**
+ * External dependencies.
+ */
+import React from "react";
+import clsx from "clsx";
+
+/**
+ * Internal dependencies.
+ */
+import Popover from "../popover/popover";
+import TextInput from "../textInput/textInput";
+import FeatherIcon from "../featherIcon";
+import type { TimePickerProps, TimePickerOption } from "./types";
+import { useTimePicker } from "./useTimePicker";
+
+const TimePicker: React.FC<TimePickerProps> = ({
+  value = "",
+  onChange,
+  onInputInvalid,
+  onInvalidChange,
+  onOpen,
+  onClose,
+  interval = 15,
+  options = [],
+  placement = "bottom-start",
+  placeholder = "Select time",
+  variant = "subtle",
+  allowCustom = true,
+  autoClose = true,
+  use12Hour = true,
+  disabled = false,
+  scrollMode = "center",
+  minTime = "",
+  maxTime = "",
+  prefix,
+  suffix,
+}) => {
+  const {
+    showOptions,
+    setShowOptions,
+    displayValue,
+    displayedOptions,
+    isTyping,
+    selectedAndNearest,
+    highlightIndex,
+    panelRef,
+    inputRef,
+    handleArrowDown,
+    handleArrowUp,
+    handleEnter,
+    handleClickInput,
+    handleFocus,
+    handleBlur,
+    handleEscape,
+    handleDisplayValueChange,
+    handleMouseEnter,
+    select,
+    optionId,
+  } = useTimePicker({
+    value,
+    onChange,
+    onInputInvalid,
+    onInvalidChange,
+    onOpen,
+    onClose,
+    interval,
+    options,
+    allowCustom,
+    autoClose,
+    use12Hour,
+    scrollMode,
+    minTime,
+    maxTime,
+  });
+
+  const getButtonClasses = (opt: TimePickerOption, idx: number): string => {
+    if (idx === highlightIndex) return "bg-surface-gray-3 text-ink-gray-8";
+    const { selected, nearest } = selectedAndNearest;
+    if (isTyping && !selected) {
+      if (nearest && nearest.value === opt.value)
+        return "text-ink-gray-7 italic bg-surface-gray-2";
+      return "text-ink-gray-6 hover:bg-surface-gray-2 hover:text-ink-gray-8";
+    }
+    if (selected && selected.value === opt.value)
+      return "bg-surface-gray-3 text-ink-gray-8";
+    if (nearest && nearest.value === opt.value)
+      return "text-ink-gray-7 italic bg-surface-gray-2";
+    return "text-ink-gray-6 hover:bg-surface-gray-2 hover:text-ink-gray-8";
+  };
+
+  return (
+    <Popover
+      show={showOptions && !disabled}
+      onUpdateShow={(show) => !disabled && setShowOptions(show)}
+      placement={placement}
+      target={({ togglePopover, isOpen }) => (
+        <TextInput
+          ref={inputRef}
+          value={displayValue}
+          onChange={handleDisplayValueChange}
+          variant={variant}
+          type="text"
+          placeholder={placeholder}
+          disabled={disabled}
+          readOnly={!allowCustom}
+          onFocus={handleFocus}
+          onClick={() => !disabled && handleClickInput(isOpen, togglePopover)}
+          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Enter") handleEnter(e);
+            else if (e.key === "Escape") handleEscape(e);
+            else if (e.key === "ArrowDown")
+              handleArrowDown(e, togglePopover, isOpen);
+            else if (e.key === "ArrowUp")
+              handleArrowUp(e, togglePopover, isOpen);
+          }}
+          onBlur={handleBlur}
+          prefix={prefix}
+          suffix={
+            suffix
+              ? suffix
+              : () => (
+                  <div
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                  >
+                    <FeatherIcon
+                      name="chevron-down"
+                      className="h-4 w-4 cursor-pointer"
+                      onMouseDown={(e) => {
+                        e.preventDefault();
+                        togglePopover();
+                      }}
+                    />
+                  </div>
+                )
+          }
+        />
+      )}
+      body={({ isOpen }) => (
+        <div
+          ref={panelRef}
+          style={{ display: isOpen ? "block" : "none" }}
+          className="mt-2 max-h-48 w-44 overflow-y-auto rounded-lg bg-surface-modal p-1 text-base shadow-2xl ring-1 ring-black/5 focus:outline-none"
+          role="listbox"
+          aria-activedescendant={
+            highlightIndex >= 0 ? optionId(highlightIndex) : undefined
+          }
+        >
+          {displayedOptions.map((opt, idx) => (
+            <button
+              key={opt.value}
+              data-value={opt.value}
+              data-index={idx}
+              type="button"
+              className={clsx(
+                "group flex h-7 w-full items-center rounded px-2 text-left",
+                getButtonClasses(opt, idx)
+              )}
+              onClick={() => select(opt.value)}
+              onMouseEnter={() => handleMouseEnter(idx)}
+              role="option"
+              id={optionId(idx)}
+              aria-selected={opt.value === value}
+            >
+              <span className="truncate">{opt.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    />
+  );
+};
+
+export default TimePicker;
diff --git a/packages/frappe-ui-react/src/components/timePicker/types.ts b/packages/frappe-ui-react/src/components/timePicker/types.ts
new file mode 100644
index 00000000..10973e22
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/timePicker/types.ts
@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import type { Placement } from "@popperjs/core";
+
+export interface TimePickerOption {
+  value: string;
+  label: string;
+}
+
+export interface ParsedTimeValid {
+  valid: true;
+  hh24: string;
+  mm: string;
+  ss?: string;
+  total: number;
+}
+
+export interface ParsedTimeInvalid {
+  valid: false;
+}
+
+export type ParsedTime = ParsedTimeValid | ParsedTimeInvalid;
+
+export interface TimePickerProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  onInputInvalid?: (input: string) => void;
+  onInvalidChange?: (invalid: boolean) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  interval?: number;
+  options?: Array<{ value: string; label?: string }>;
+  placement?: Placement;
+  placeholder?: string;
+  variant?: "outline" | "subtle";
+  allowCustom?: boolean;
+  autoClose?: boolean;
+  use12Hour?: boolean;
+  disabled?: boolean;
+  scrollMode?: "center" | "start" | "nearest";
+  minTime?: string;
+  maxTime?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  prefix?: (args?: any) => ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  suffix?: (args?: any) => ReactNode;
+}
diff --git a/packages/frappe-ui-react/src/components/timePicker/useTimePicker.ts b/packages/frappe-ui-react/src/components/timePicker/useTimePicker.ts
new file mode 100644
index 00000000..8d45725e
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/timePicker/useTimePicker.ts
@@ -0,0 +1,458 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+  useCallback,
+  useId,
+} from "react";
+import type { TimePickerOption, TimePickerProps } from "./types";
+import {
+  findNearestIndex,
+  formatDisplay,
+  minutesFromHHMM,
+  normalize24,
+  parseFlexibleTimeHelper,
+} from "./utils";
+
+export function useTimePicker({
+  value = "",
+  onChange,
+  onInputInvalid,
+  onInvalidChange,
+  onOpen,
+  onClose,
+  interval = 15,
+  options = [],
+  allowCustom = true,
+  autoClose = true,
+  use12Hour = true,
+  scrollMode = "center",
+  minTime = "",
+  maxTime = "",
+}: Omit<TimePickerProps, "variant" | "placement" | "disabled" | "placeholder" | "suffix" | "prefix">) {
+  const [internalValue, setInternalValue] = useState(normalize24(value));
+  const [displayValue, setDisplayValue] = useState(
+    formatDisplay(normalize24(value), use12Hour)
+  );
+  const [showOptions, setShowOptions] = useState(false);
+  const [highlightIndex, setHighlightIndex] = useState(-1);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+  const [invalidState, setInvalidState] = useState(false);
+  const [hasSelectedOnFirstClick, setHasSelectedOnFirstClick] = useState(false);
+
+  const panelRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const navUpdatingRef = useRef(false);
+  const initHighlightRef = useRef<() => void>(() => {});
+  const scheduleScrollRef = useRef<(targetIndex?: number) => void>(() => {});
+  const uid = useId();
+
+  const minMinutes = useMemo(() => minutesFromHHMM(minTime), [minTime]);
+  const maxMinutes = useMemo(() => minutesFromHHMM(maxTime), [maxTime]);
+
+  /**
+   * Strips seconds from HH:MM:SS format
+   * @param time - Time string in HH:MM or HH:MM:SS format
+   * @returns Time string in HH:MM format
+   */
+  const getBaseTime = useCallback((time: string): string => {
+    return time.length === 8 ? time.slice(0, 5) : time;
+  }, []);
+
+  const preserveSeconds = useCallback((newVal: string, currentVal: string): string => {
+    return currentVal.length === 8 && newVal.length === 5
+      ? `${newVal}${currentVal.slice(5)}`
+      : newVal;
+  }, []);
+
+  const selectInputText = useCallback(() => {
+    queueMicrotask(() => {
+      inputRef.current?.select();
+      setHasSelectedOnFirstClick(true);
+    });
+  }, []);
+
+  const displayedOptions = useMemo<TimePickerOption[]>(() => {
+    if (options.length) {
+      return options.map((o) => {
+        const val = normalize24(o.value);
+        return {
+          value: val,
+          label: o.label || formatDisplay(val, use12Hour),
+        };
+      });
+    }
+
+    const out: TimePickerOption[] = [];
+    for (let m = 0; m < 1440; m += interval) {
+      if (minMinutes != null && m < minMinutes) continue;
+      if (maxMinutes != null && m > maxMinutes) continue;
+      const hh = Math.floor(m / 60)
+        .toString()
+        .padStart(2, "0");
+      const mm = (m % 60).toString().padStart(2, "0");
+      const val = `${hh}:${mm}`;
+      out.push({
+        value: val,
+        label: formatDisplay(val, use12Hour),
+      });
+    }
+    return out;
+  }, [options, interval, minMinutes, maxMinutes, use12Hour]);
+
+  /**
+   * Finds the option that matches or is nearest to the given value.
+   * Returns exact match if exists, otherwise returns nearest option by time.
+   * @param valueToMatch - Time value to match against options
+   * @returns Matching or nearest option, or null if not found
+   */
+  const getTargetOption = useCallback((valueToMatch: string): TimePickerOption | null => {
+    const list = displayedOptions;
+    if (!list.length || !valueToMatch) return null;
+
+    const candidate = normalize24(valueToMatch);
+    const candidateBase = getBaseTime(candidate);
+    const selected = list.find((o) => o.value === candidateBase);
+    if (selected) return selected;
+
+    const parsed = parseFlexibleTimeHelper(candidate);
+    if (!parsed.valid) return null;
+
+    const idx = findNearestIndex(parsed.total, list);
+    return idx > -1 ? list[idx] : null;
+  }, [displayedOptions, getBaseTime]);
+
+  /**
+   * Determines which option should be highlighted
+   */
+  const selectedAndNearest = useMemo((): { selected: TimePickerOption | null; nearest: TimePickerOption | null } => {
+    const candidate = isTyping ? displayValue : internalValue;
+    if (!candidate) return { selected: null, nearest: null };
+
+    const target = getTargetOption(candidate);
+    if (!target) return { selected: null, nearest: null };
+
+    const candidateBase = getBaseTime(normalize24(candidate));
+    const isExactMatch = target.value === candidateBase;
+    
+    return isExactMatch 
+      ? { selected: target, nearest: null }
+      : { selected: null, nearest: target };
+  }, [displayValue, isTyping, internalValue, getTargetOption, getBaseTime]);
+
+  const isOutOfRange = useCallback(
+    (totalMinutes: number): boolean => {
+      if (minMinutes != null && totalMinutes < minMinutes) return true;
+      if (maxMinutes != null && totalMinutes > maxMinutes) return true;
+      return false;
+    },
+    [minMinutes, maxMinutes]
+  );
+
+  const updateInvalidState = useCallback(
+    (val: boolean) => {
+      if (invalidState !== val) {
+        setInvalidState(val);
+        onInvalidChange?.(val);
+      }
+    },
+    [invalidState, onInvalidChange]
+  );
+
+  /**
+   * Updates internal state and optionally calls onChange.
+   * @param val24 - Time value in 24-hour format
+   * @param commit - If true, always calls onChange. If false, only calls when not focused.
+   */
+  const applyValue = useCallback(
+    (val24: string, commit = false) => {
+      setInternalValue(val24);
+      setDisplayValue(formatDisplay(val24, use12Hour));
+      if (commit || !isFocused) {
+        onChange?.(val24);
+      }
+      updateInvalidState(false);
+    },
+    [use12Hour, isFocused, onChange, updateInvalidState]
+  );
+
+  const commitInput = useCallback(() => {
+    const raw = displayValue;
+    
+    if (!raw) {
+      setInternalValue("");
+      if (!isFocused) onChange?.("");
+      updateInvalidState(false);
+      return;
+    }
+
+    const parsed = parseFlexibleTimeHelper(raw);
+    if (!parsed.valid || isOutOfRange(parsed.total)) {
+      onInputInvalid?.(raw);
+      updateInvalidState(true);
+      return;
+    }
+
+    const normalized = normalize24(raw);
+    const isInOptions = displayedOptions.some((o) => o.value === getBaseTime(normalized));
+
+    if (!allowCustom && !isInOptions) {
+      const nearestIdx = findNearestIndex(parsed.total, displayedOptions);
+      if (nearestIdx > -1) {
+        const nearestVal = displayedOptions[nearestIdx].value;
+        applyValue(preserveSeconds(nearestVal, normalized), true);
+        return;
+      }
+    }
+    
+    applyValue(normalized, true);
+  }, [
+    displayValue,
+    isFocused,
+    onChange,
+    updateInvalidState,
+    isOutOfRange,
+    onInputInvalid,
+    allowCustom,
+    displayedOptions,
+    applyValue,
+    getBaseTime,
+    preserveSeconds,
+  ]);
+
+  const select = useCallback(
+    (val: string) => {
+      applyValue(val, true);
+      if (autoClose) setShowOptions(false);
+    },
+    [applyValue, autoClose]
+  );
+
+  const initHighlight = useCallback(() => {
+    const { selected, nearest } = selectedAndNearest;
+    const target = selected || nearest;
+    if (!target) {
+      setHighlightIndex(-1);
+      return;
+    }
+    const idx = displayedOptions.findIndex((o) => o.value === target.value);
+    setHighlightIndex(idx);
+  }, [selectedAndNearest, displayedOptions]);
+
+  /**
+   * Scrolls the dropdown to show the target option.
+   * @param targetIndex - Optional index to scroll to directly
+   * @param explicitValue - When provided, uses this value instead of current state
+   */
+  const scheduleScroll = useCallback((targetIndex?: number, explicitValue?: string) => {
+    requestAnimationFrame(() => {
+      if (!panelRef.current || !showOptions) return;
+      
+      let targetEl: HTMLElement | null = null;
+      
+      if (targetIndex !== undefined && targetIndex > -1) {
+        targetEl = panelRef.current.querySelector(`[data-index="${targetIndex}"]`);
+      } else {
+        const valueToMatch = explicitValue ?? (isTyping ? displayValue : internalValue);
+        const target = getTargetOption(valueToMatch);
+        if (target) {
+          targetEl = panelRef.current.querySelector(`[data-value="${target.value}"]`);
+        }
+      }
+      
+      targetEl?.scrollIntoView({ block: scrollMode });
+    });
+  }, [showOptions, scrollMode, isTyping, displayValue, internalValue, getTargetOption]);
+
+  const moveHighlight = useCallback(
+    (delta: number) => {
+      if (!displayedOptions.length) return;
+      
+      if (highlightIndex === -1) {
+        initHighlight();
+        return;
+      }
+      
+      const newIndex = (highlightIndex + delta + displayedOptions.length) % displayedOptions.length;
+      setHighlightIndex(newIndex);
+      
+      const opt = displayedOptions[newIndex];
+      if (opt) {
+        navUpdatingRef.current = true;
+        const val = preserveSeconds(opt.value, internalValue);
+        applyValue(val, false);
+        onChange?.(val);
+        queueMicrotask(() => {
+          navUpdatingRef.current = false;
+        });
+      }
+      
+      setIsTyping(false);
+      scheduleScroll(newIndex);
+    },
+    [displayedOptions, highlightIndex, internalValue, applyValue, initHighlight, scheduleScroll, onChange, preserveSeconds]
+  );
+
+  const handleArrowDown = useCallback(
+    (e: React.KeyboardEvent, togglePopover: () => void, isOpen?: boolean) => {
+      e.preventDefault();
+      if (!isOpen) {
+        togglePopover();
+      } else {
+        moveHighlight(1);
+      }
+    },
+    [moveHighlight]
+  );
+
+  const handleArrowUp = useCallback(
+    (e: React.KeyboardEvent, togglePopover: () => void, isOpen?: boolean) => {
+      e.preventDefault();
+      if (!isOpen) {
+        togglePopover();
+      } else {
+        moveHighlight(-1);
+      }
+    },
+    [moveHighlight]
+  );
+
+  const handleEnter = useCallback(
+    (e: React.KeyboardEvent) => {
+      e.preventDefault();
+      
+      if (!showOptions) {
+        commitInput();
+        inputRef.current?.blur();
+        return;
+      }
+      
+      const normalized = normalize24(displayValue);
+      const isInOptions = normalized
+        ? displayedOptions.some((o) => o.value === getBaseTime(normalized))
+        : false;
+      
+      const shouldCommit = normalized && (!isInOptions || isTyping);
+      const hasHighlight = highlightIndex > -1 && displayedOptions[highlightIndex];
+      
+      if (shouldCommit) {
+        commitInput();
+        if (autoClose) setShowOptions(false);
+      } else if (hasHighlight) {
+        select(displayedOptions[highlightIndex].value);
+      } else {
+        commitInput();
+        if (autoClose) setShowOptions(false);
+      }
+      
+      inputRef.current?.blur();
+    },
+    [showOptions, commitInput, displayValue, displayedOptions, isTyping, autoClose, highlightIndex, select, getBaseTime]
+  );
+
+  const handleClickInput = useCallback(
+    (isOpen: boolean | undefined, togglePopover: () => void) => {
+      if (!isOpen) togglePopover();
+      if (allowCustom) selectInputText();
+    },
+    [allowCustom, selectInputText]
+  );
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    if (allowCustom && !hasSelectedOnFirstClick) selectInputText();
+  }, [allowCustom, hasSelectedOnFirstClick, selectInputText]);
+
+  const handleBlur = useCallback(() => {
+    if (showOptions) {
+      setIsFocused(false);
+      return;
+    }
+    commitInput();
+    setIsFocused(false);
+  }, [showOptions, commitInput]);
+
+  const handleEscape = useCallback((e: React.KeyboardEvent) => {
+    e.preventDefault();
+    setShowOptions(false);
+    inputRef.current?.blur();
+  }, []);
+
+  const handleDisplayValueChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setDisplayValue(newValue);
+      
+      if (navUpdatingRef.current) return;
+      
+      if (showOptions) {
+        scheduleScroll(undefined, newValue);
+      }
+      setIsTyping(true);
+      setHighlightIndex(-1);
+    },
+    [showOptions, scheduleScroll]
+  );
+
+  const handleMouseEnter = useCallback((idx: number) => {
+    setHighlightIndex(idx);
+  }, []);
+
+  useEffect(() => {
+    initHighlightRef.current = initHighlight;
+  }, [initHighlight]);
+
+  useEffect(() => {
+    scheduleScrollRef.current = scheduleScroll;
+  }, [scheduleScroll]);
+
+  useEffect(() => {
+    const normalized = normalize24(value);
+    if (navUpdatingRef.current) {
+      return;
+    }
+    if (normalized !== internalValue && !isTyping) {
+      setInternalValue(normalized);
+      setDisplayValue(formatDisplay(normalized, use12Hour));
+    }
+  }, [value, internalValue, use12Hour, isTyping]);
+
+  useEffect(() => {
+    if (showOptions) {
+      onOpen?.();
+      initHighlightRef.current();
+      scheduleScrollRef.current();
+    } else {
+      onClose?.();
+    }
+  }, [showOptions, onOpen, onClose]);
+
+  const optionId = (idx: number): string => `tp-${uid}-${idx}`;
+
+  return {
+    showOptions,
+    setShowOptions,
+    displayValue,
+    internalValue,
+    highlightIndex,
+    setHighlightIndex,
+    isTyping,
+    panelRef,
+    inputRef,
+    displayedOptions,
+    selectedAndNearest,
+    handleArrowDown,
+    handleArrowUp,
+    handleEnter,
+    handleClickInput,
+    handleFocus,
+    handleBlur,
+    handleEscape,
+    handleDisplayValueChange,
+    handleMouseEnter,
+    select,
+    optionId,
+  };
+}
diff --git a/packages/frappe-ui-react/src/components/timePicker/utils.ts b/packages/frappe-ui-react/src/components/timePicker/utils.ts
new file mode 100644
index 00000000..9389a811
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/timePicker/utils.ts
@@ -0,0 +1,242 @@
+import { dayjs } from "../../utils/dayjs";
+import { TimePickerOption } from "./types";
+import { ParsedTime } from "./types";
+
+const isValid24HourFormat = (timeString: string): boolean => {
+  return /^\d{2}:\d{2}(:\d{2})?$/.test(timeString);
+};
+
+/**
+ * Parses flexible time input strings (12-hour or 24-hour format) and converts them to a structured time object.
+ * Accepts formats like "14:30", "2pm", "2:30:45 pm", validates all components, and converts 12-hour times to 24-hour format.
+ *
+ * @param input - The time string to parse in various formats
+ * @returns ParsedTime object with valid flag, 24-hour components (hh24, mm, ss), and total minutes from midnight
+ */
+export const parseFlexibleTimeHelper = (input: string): ParsedTime => {
+  if (!input) {
+    return { valid: false };
+  }
+
+  // Normalize input: lowercase, remove dots, ensure space before am/pm
+  let sanitizedInput = input.trim().toLowerCase();
+  sanitizedInput = sanitizedInput.replace(/\./g, "");
+  sanitizedInput = sanitizedInput.replace(/(\d)(am|pm)$/, "$1 $2");
+
+  // Match pattern: HH[:MM][:SS] [am/pm]
+  const timePattern = /^(\d{1,2})(?::(\d{1,2}))?(?::(\d{1,2}))?\s*([ap]m)?$/;
+  const match = sanitizedInput.match(timePattern);
+
+  if (!match) {
+    return { valid: false };
+  }
+
+  const [, hourString, minuteString, secondString, amPmMarker] = match;
+  let hours = parseInt(hourString);
+
+  if (isNaN(hours)) {
+    return { valid: false };
+  }
+
+  // Validate hour range based on format (12h vs 24h)
+  if (amPmMarker) {
+    // 12-hour format with am/pm
+    if (hours < 1 || hours > 12) {
+      return { valid: false };
+    }
+  } else {
+    // 24-hour format
+    if (hours < 0 || hours > 23) {
+      return { valid: false };
+    }
+  }
+
+  // Cannot have seconds without minutes (e.g., "14::30" is invalid)
+  if (secondString && !minuteString) {
+    return { valid: false };
+  }
+
+  // Parse and validate minutes (default to 0 if not provided)
+  const minutes =
+    minuteString != null && minuteString !== "" ? parseInt(minuteString) : 0;
+
+  if (isNaN(minutes) || minutes < 0 || minutes > 59) {
+    return { valid: false };
+  }
+
+  // Parse and validate seconds
+  let seconds: number | undefined;
+  if (secondString) {
+    seconds = parseInt(secondString);
+    if (isNaN(seconds) || seconds < 0 || seconds > 59) {
+      return { valid: false };
+    }
+  }
+
+  // Convert 12-hour to 24-hour format
+  if (amPmMarker) {
+    if (hours === 12 && amPmMarker === "am") {
+      hours = 0; // 12am = 00:00
+    } else if (hours < 12 && amPmMarker === "pm") {
+      hours += 12; // 1pm-11pm = 13:00-23:00
+    }
+    // 12pm stays as 12
+  }
+
+  return {
+    valid: true,
+    hh24: hours.toString().padStart(2, "0"),
+    mm: minutes.toString().padStart(2, "0"),
+    ss: seconds != null ? seconds.toString().padStart(2, "0") : undefined,
+    total: hours * 60 + minutes,
+  };
+};
+
+/**
+ * Normalizes time strings to standard 24-hour format (HH:MM or HH:MM:SS).
+ * If already in correct format, returns as-is otherwise uses flexible parser.
+ *
+ * @param raw - Raw time string from external source
+ * @returns Normalized time string in HH:MM or HH:MM:SS format, or empty string if invalid
+ */
+export const normalize24 = (raw: string): string => {
+  if (!raw) {
+    return "";
+  }
+
+  if (isValid24HourFormat(raw)) {
+    return raw;
+  }
+
+  const parsedTime = parseFlexibleTimeHelper(raw);
+  if (!parsedTime.valid) {
+    return "";
+  }
+
+  const hasSeconds = parsedTime.ss !== undefined;
+  return hasSeconds
+    ? `${parsedTime.hh24}:${parsedTime.mm}:${parsedTime.ss}`
+    : `${parsedTime.hh24}:${parsedTime.mm}`;
+};
+
+/**
+ * Formats a 24-hour time string for display to the user based on their preference.
+ * Converts from internal 24-hour storage format to user-friendly display format (12-hour with am/pm or 24-hour).
+ *
+ * @param val24 - Time string in 24-hour format (HH:MM or HH:MM:SS)
+ * @param use12Hr - Whether to display in 12-hour format with am/pm
+ * @returns Formatted time string for display
+ */
+export const formatDisplay = (val24: string, use12Hr: boolean): string => {
+  if (!val24) {
+    return "";
+  }
+
+  // Parse the time string with dayjs
+  const timeDate = dayjs(`2000-01-01 ${val24}`);
+
+  if (!timeDate.isValid()) {
+    return "";
+  }
+
+  const hasSeconds = val24.split(":").length === 3;
+
+  // Format based on preference
+  if (use12Hr) {
+    const format = hasSeconds ? "h:mm:ss a" : "h:mm a";
+    return timeDate.format(format);
+  }
+
+  const format = hasSeconds ? "HH:mm:ss" : "HH:mm";
+  return timeDate.format(format);
+};
+
+/**
+ * Converts a time string in HH:MM format to total minutes elapsed since midnight.
+ * Used for numerical time comparisons when validating against minTime/maxTime constraints.
+ *
+ * @param str - Time string that must match HH:MM or HH:MM:SS format exactly
+ * @returns Total minutes from midnight (0-1439), or null if invalid format or out of range
+ */
+export const minutesFromHHMM = (str: string): number | null => {
+  if (!str) {
+    return null;
+  }
+
+  if (!isValid24HourFormat(str)) {
+    return null;
+  }
+
+  const timeDate = dayjs(`2000-01-01 ${str}`);
+
+  if (!timeDate.isValid()) {
+    return null;
+  }
+
+  return timeDate.hour() * 60 + timeDate.minute();
+};
+
+/**
+ * Finds the index of the time option closest to a target time value using binary search.
+ * Used for snapping user input to nearest valid option when allowCustom=false and highlighting nearest option while typing.
+ *
+ * @param targetMinutes - Target time in minutes from midnight (0-1439)
+ * @param list - Array of time options to search through
+ * @returns Index of nearest option, or -1 if list is empty
+ */
+export function findNearestIndex(
+  targetMinutes: number,
+  list: TimePickerOption[]
+): number {
+  if (!list.length) {
+    return -1;
+  }
+
+  // Convert all options to minutes for comparison using dayjs
+  const optionMinutes = list.map((option) => {
+    const timeDate = dayjs(`2000-01-01 ${option.value}`);
+    return timeDate.hour() * 60 + timeDate.minute();
+  });
+
+  // Binary search for exact match or insertion point
+  let leftIndex = 0;
+  let rightIndex = optionMinutes.length - 1;
+
+  while (leftIndex <= rightIndex) {
+    const midIndex = (leftIndex + rightIndex) >> 1;
+    const midValue = optionMinutes[midIndex];
+
+    if (midValue === targetMinutes) {
+      return midIndex; // Exact match found
+    }
+
+    if (midValue < targetMinutes) {
+      leftIndex = midIndex + 1;
+    } else {
+      rightIndex = midIndex - 1;
+    }
+  }
+
+  // No exact match - find nearest neighbor
+  const candidateIndices: number[] = [];
+
+  if (leftIndex < optionMinutes.length) {
+    candidateIndices.push(leftIndex);
+  }
+  if (leftIndex - 1 >= 0) {
+    candidateIndices.push(leftIndex - 1);
+  }
+
+  if (!candidateIndices.length) {
+    return -1;
+  }
+
+  // Return the index with minimum distance to target
+  const nearestIndex = candidateIndices.sort((indexA, indexB) => {
+    const distanceA = Math.abs(optionMinutes[indexA] - targetMinutes);
+    const distanceB = Math.abs(optionMinutes[indexB] - targetMinutes);
+    return distanceA - distanceB;
+  })[0];
+
+  return nearestIndex;
+}