diff --git a/.github/workflows/prerelease.nuget.org.yml b/.github/workflows/prerelease.nuget.org.yml
index b43cdb011b..0ff6b7f93a 100644
--- a/.github/workflows/prerelease.nuget.org.yml
+++ b/.github/workflows/prerelease.nuget.org.yml
@@ -3,6 +3,8 @@ name: Prerelease nuget packages
 on:
   workflow_dispatch:
   push:
+    branches:
+      - 'develop'
     tags:
       - 'v-*'
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor
index 621280feb9..97fbde24c9 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor
@@ -20,44 +20,59 @@
         </label>
     }
 
-    <div style="@Styles?.InputWrapper" class="bit-tpc-wrp @Classes?.InputWrapper" id="@_timePickerId" aria-owns="@(IsOpen ? _calloutId : null)" @onclick="HandleOnClick">
-        <div style="@Styles?.InputContainer" class="bit-tpc-icn @Classes?.InputContainer">
-            <input @ref="InputElement" @attributes="InputHtmlAttributes"
-                   @onfocus="@HandleOnFocus"
-                   @oninput="@HandleOnChange"
-                   @onfocusin="@HandleOnFocusIn"
-                   @onfocusout="@HandleOnFocusOut"
-                   type="text"
-                   name="@Name"
-                   role="combobox"
-                   id="@_inputId"
-                   tabindex="@TabIndex"
-                   aria-haspopup="dialog"
-                   aria-label="@AriaLabel"
-                   placeholder="@Placeholder"
-                   value="@CurrentValueAsString"
-                   disabled=@(IsEnabled is false)
-                   readonly=@(AllowTextInput is false)
-                   aria-expanded="@(IsOpen ? "true" : "false")"
-                   aria-controls="@(IsOpen ? _calloutId : null)"
-                   aria-labelledby="@(Label.HasValue() ? _labelId : null)"
-                   style="@Styles?.Input"
-                   class="bit-tpc-inp@(AllowTextInput ? " bit-tpc-ein" : null) @Classes?.Input" />
+    @if (Standalone is false)
+    {
+        <div style="@Styles?.InputWrapper" class="bit-tpc-wrp @Classes?.InputWrapper" id="@_timePickerId" aria-owns="@(IsOpen ? _calloutId : null)" @onclick="HandleOnClick">
+            <div style="@Styles?.InputContainer" class="bit-tpc-icn @Classes?.InputContainer">
+                <input @ref="InputElement" @attributes="InputHtmlAttributes"
+                       @onfocus="@HandleOnFocus"
+                       @oninput="@HandleOnChange"
+                       @onfocusin="@HandleOnFocusIn"
+                       @onfocusout="@HandleOnFocusOut"
+                       type="text"
+                       name="@Name"
+                       role="combobox"
+                       id="@_inputId"
+                       tabindex="@TabIndex"
+                       aria-haspopup="dialog"
+                       aria-label="@AriaLabel"
+                       placeholder="@Placeholder"
+                       value="@CurrentValueAsString"
+                       disabled="@(IsEnabled is false)"
+                       readonly="@(AllowTextInput is false)"
+                       aria-expanded="@(IsOpen ? "true" : "false")"
+                       aria-controls="@(IsOpen ? _calloutId : null)"
+                       aria-labelledby="@(Label.HasValue() ? _labelId : null)"
+                       style="@Styles?.Input"
+                       class="bit-tpc-inp@(AllowTextInput ? " bit-tpc-ein" : null) @Classes?.Input" />
 
-            @if (IconTemplate is not null)
-            {
-                @IconTemplate
-            }
-            else
-            {
-                <i style="@Styles?.Icon" class="bit-tpc-ico bit-icon bit-icon--@IconName @Classes?.Icon" aria-hidden="true" />
-            }
+                @if (IconTemplate is not null)
+                {
+                    @IconTemplate
+                }
+                else
+                {
+                    <i style="@Styles?.Icon" class="bit-tpc-ico bit-icon bit-icon--@IconName @Classes?.Icon" aria-hidden="true" />
+                }
+            </div>
         </div>
-    </div>
 
-    <div @onclick="CloseCallout"
-         style="display:@(IsOpen ? "block" : "none"); @Styles?.Overlay"
-         class="bit-tpc-ovl @Classes?.Overlay"></div>
+        <div @onclick="CloseCallout"
+             style="display:@(IsOpen ? "block" : "none"); @Styles?.Overlay"
+             class="bit-tpc-ovl @Classes?.Overlay"></div>
+    }
+    else
+    {
+        <input @ref="InputElement" @attributes="InputHtmlAttributes"
+               type="text"
+               name="@Name"
+               id="@_inputId"
+               aria-label="@AriaLabel"
+               class="bit-input-hidden"
+               value="@CurrentValueAsString"
+               disabled="@(IsEnabled is false)"
+               readonly="@(AllowTextInput is false)" />
+    }
 
     <div style="@Styles?.Callout" class="bit-tpc-cal @Classes?.Callout" id="@_calloutId">
         <div style="@Styles?.CalloutContainer" class="bit-tpc-cac @Classes?.CalloutContainer" role="dialog" @attributes=@CalloutHtmlAttributes aria-label="@CalloutAriaLabel">
@@ -68,7 +83,8 @@
                             @onpointerdown="() => HandleOnPointerDown(true, true)"
                             type="button"
                             style="@Styles?.IncreaseHourButton"
-                            class="bit-tpc-tbt @Classes?.IncreaseHourButton">
+                            class="bit-tpc-tbt @Classes?.IncreaseHourButton"
+                            disabled="@(IsEnabled is false)">
                         <i style="@Styles?.IncreaseHourIcon" class="bit-icon bit-icon--ChevronUpSmall @Classes?.IncreaseHourIcon" aria-hidden="true" />
                     </button>
                     <input @ref="_inputHourRef"
@@ -81,13 +97,15 @@
                            inputmode="numeric"
                            style="@Styles?.HourInput"
                            class="bit-tpc-tin @Classes?.HourInput"
-                           autocomplete="@BitAutoCompleteValue.NewPassword" />
+                           autocomplete="@BitAutoCompleteValue.NewPassword"
+                           disabled="@(IsEnabled is false)" />
                     <button @onpointerup="HandleOnPointerUpOrOut"
                             @onpointerout="HandleOnPointerUpOrOut"
                             @onpointerdown="() => HandleOnPointerDown(false, true)"
                             type="button"
                             style="@Styles?.DecreaseHourButton"
-                            class="bit-tpc-tbt @Classes?.DecreaseHourButton">
+                            class="bit-tpc-tbt @Classes?.DecreaseHourButton"
+                            disabled="@(IsEnabled is false)">
                         <i style="@Styles?.DecreaseHourIcon" class="bit-icon bit-icon--ChevronDownSmall @Classes?.DecreaseHourIcon" aria-hidden="true" />
                     </button>
                 </div>
@@ -98,7 +116,8 @@
                             @onpointerdown="() => HandleOnPointerDown(true, false)"
                             type="button"
                             style="@Styles?.IncreaseMinuteButton"
-                            class="bit-tpc-tbt @Classes?.IncreaseMinuteButton">
+                            class="bit-tpc-tbt @Classes?.IncreaseMinuteButton"
+                            disabled="@(IsEnabled is false)">
                         <i style="@Styles?.IncreaseMinuteIcon" class="bit-icon bit-icon--ChevronUpSmall @Classes?.IncreaseMinuteIcon" aria-hidden="true" />
                     </button>
                     <input @ref="_inputMinuteRef"
@@ -111,13 +130,15 @@
                            inputmode="numeric"
                            style="@Styles?.MinuteInput"
                            class="bit-tpc-tin @Classes?.MinuteInput"
-                           autocomplete="@BitAutoCompleteValue.NewPassword" />
+                           autocomplete="@BitAutoCompleteValue.NewPassword"
+                           disabled="@(IsEnabled is false)" />
                     <button @onpointerup="HandleOnPointerUpOrOut"
                             @onpointerout="HandleOnPointerUpOrOut"
                             @onpointerdown="() => HandleOnPointerDown(false, false)"
                             type="button"
                             style="@Styles?.DecreaseMinuteButton"
-                            class="bit-tpc-tbt @Classes?.DecreaseMinuteButton">
+                            class="bit-tpc-tbt @Classes?.DecreaseMinuteButton"
+                            disabled="@(IsEnabled is false)">
                         <i style="@Styles?.DecreaseMinuteIcon" class="bit-icon bit-icon--ChevronDownSmall @Classes?.DecreaseMinuteIcon" aria-hidden="true" />
                     </button>
                 </div>
@@ -129,20 +150,22 @@
                     <button @onclick="HandleOnAmClick"
                             type="button"
                             style="@Styles?.AmButton"
-                            class="bit-tpc-tbt bit-tpc-bam @(IsAm() is true ? "bit-tpc-bns" : string.Empty) @Classes?.AmButton">
+                            class="bit-tpc-tbt bit-tpc-bam @(IsAm() is true ? "bit-tpc-bns" : string.Empty) @Classes?.AmButton"
+                            disabled="@(IsEnabled is false)">
                         @_culture.DateTimeFormat.AMDesignator
                     </button>
 
                     <button @onclick="HandleOnPmClick"
                             type="button"
                             style="@Styles?.PmButton"
-                            class="bit-tpc-tbt bit-tpc-bpm @(IsAm() is false ? "bit-tpc-bns" : string.Empty) @Classes?.PmButton">
+                            class="bit-tpc-tbt bit-tpc-bpm @(IsAm() is false ? "bit-tpc-bns" : string.Empty) @Classes?.PmButton"
+                            disabled="@(IsEnabled is false)">
                         @_culture.DateTimeFormat.PMDesignator
                     </button>
                 </div>
             }
 
-            @if (ShowCloseButton)
+            @if (ShowCloseButton && Standalone is false)
             {
                 <button @onclick="CloseCallout"
                         type="button"
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs
index 9eee3941e5..dd86e8b7dd 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs
@@ -40,6 +40,7 @@ private string? _hourView
         }
         set
         {
+            if (IsEnabled is false) return;
             if (int.TryParse(value, out int val) is false) return;
 
             if (val > 23)
@@ -65,6 +66,7 @@ private string? _minuteView
         get => _minute?.ToString("D2");
         set
         {
+            if (IsEnabled is false) return;
             if (int.TryParse(value, out int val) is false) return;
 
             if (val > 59)
@@ -228,6 +230,12 @@ private string? _minuteView
     /// </summary>
     [Parameter] public BitTimePickerClassStyles? Styles { get; set; }
 
+    /// <summary>
+    /// Whether the BitTimePicker is rendered standalone or with the input component and callout.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool Standalone { get; set; }
+
     /// <summary>
     /// The tabIndex of the TextField.
     /// </summary>
@@ -244,10 +252,10 @@ private string? _minuteView
     [Parameter] public string? ValueFormat { get; set; }
 
 
-
     [JSInvokable("CloseCallout")]
     public async Task CloseCalloutBeforeAnotherCalloutIsOpened()
     {
+        if (Standalone) return;
         if (IsEnabled is false) return;
 
         if (await AssignIsOpen(false) is false) return;
@@ -271,6 +279,8 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => HasBorder is false ? "bit-tpc-nbd" : string.Empty);
 
+        ClassBuilder.Register(() => Standalone ? "bit-tpc-sta" : string.Empty);
+
         ClassBuilder.Register(() => _focusClass);
     }
 
@@ -386,6 +396,7 @@ private async Task CloseCallout()
 
     private async Task ToggleCallout()
     {
+        if (Standalone) return;
         if (IsEnabled is false) return;
 
         await _js.ToggleCallout(_dotnetObj,
@@ -415,6 +426,7 @@ private async Task HandleOnChange(ChangeEventArgs e)
 
     private async Task HandleOnClick()
     {
+        if (Standalone) return;
         if (IsEnabled is false) return;
 
         if (await AssignIsOpen(true) is false) return;
@@ -433,12 +445,16 @@ private async Task UpdateCurrentValue()
 
     private async Task HandleOnAmClick()
     {
+        if (IsEnabled is false) return;
+
         _hour %= 12;  // "12:-- am" is "00:--" in 24h
         await UpdateCurrentValue();
     }
 
     private async Task HandleOnPmClick()
     {
+        if (IsEnabled is false) return;
+
         if (_hour <= 12) // "12:-- pm" is "12:--" in 24h
         {
             _hour += 12;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.scss
index 5304349ca4..007562905a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.scss
@@ -252,6 +252,11 @@
     overflow: hidden;
     aspect-ratio: 1;
 
+    &:disabled {
+        cursor: default;
+        color: $clr-fg-dis;
+    }
+
     &::-webkit-inner-spin-button, // Chrome, Safari, Edge, Opera
     &::-webkit-outer-spin-button {
         -webkit-appearance: none;
@@ -301,6 +306,7 @@
     }
 
     &:disabled {
+        color: $clr-fg-dis;
         pointer-events: none;
         background-color: transparent;
 
@@ -320,6 +326,10 @@
     color: $clr-pri-text;
     background-color: $clr-pri;
 
+    &:disabled {
+        background-color: $clr-pri;
+    }
+
     @media (hover: hover) {
         &:hover {
             background-color: $clr-pri-hover;
@@ -340,6 +350,16 @@
     aspect-ratio: 1;
 }
 
+.bit-tpc-sta {
+    width: fit-content;
+
+    .bit-tpc-cal {
+        display: block;
+        z-index: unset;
+        position: relative;
+    }
+}
+
 .bit-tpc-rsp {
     @media only screen and (max-width: 600px) {
         .bit-tpc-tdv {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor
index b433fdcc5e..e9fff3cf4a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor
@@ -231,4 +231,25 @@
                            Placeholder="Select a time..." />
         </ExamplePreview>
     </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Standalone" RazorCode="@example16RazorCode" Id="example16">
+        <ExamplePreview>
+            <div class="example-box">
+                <BitTimePicker Standalone
+                               Label="Standalone picker" />
+
+                <br />
+                <BitTimePicker Standalone
+                               TimeFormat="BitTimeFormat.TwelveHours"
+                               Label="Picker (AM/PM)" />
+
+                <br />
+                <BitTimePicker Standalone
+                               IsEnabled="false"
+                               Value="new(10, 24, 0)"
+                               TimeFormat="BitTimeFormat.TwelveHours"
+                               Label="Disabled" />
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
 </ComponentDemo>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs
index 482a5a1a07..582c87ec15 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs
@@ -4,20 +4,6 @@ public partial class BitTimePickerDemo
 {
     private readonly List<ComponentParameter> componentParameters =
     [
-        new()
-        {
-            Name = "Label",
-            Type = "string?",
-            DefaultValue = "null",
-            Description = "Label for the TimePicker.",
-        },
-        new()
-        {
-            Name = "LabelTemplate",
-            Type = "RenderFragment?",
-            DefaultValue = "null",
-            Description = "Used to customize the label for the TimePicker."
-        },
         new()
         {
             Name = "AllowTextInput",
@@ -27,92 +13,100 @@ public partial class BitTimePickerDemo
         },
         new()
         {
-            Name = "TabIndex",
-            Type = "int",
-            DefaultValue = "0",
-            Description = "The tabIndex of the TextField.",
+            Name = "CalloutAriaLabel",
+            Type = "string",
+            DefaultValue = "Clock",
+            Description = "Aria label for time picker popup for screen reader users."
         },
         new()
         {
-            Name = "Placeholder",
-            Type = "string?",
-            DefaultValue = "null",
-            Description = "Placeholder text for the DatePicker.",
+            Name = "CalloutHtmlAttributes",
+            Type = "Dictionary<string, object>",
+            DefaultValue = "new Dictionary<String, Object>()",
+            Description = "Capture and render additional attributes in addition to the main callout's parameters."
         },
         new()
         {
-            Name = "IconTemplate",
-            Type = "RenderFragment?",
+            Name = "Classes",
+            Type = "BitTimePickerClassStyles",
             DefaultValue = "null",
-            Description = "Custom TimePicker icon template."
+            Description = "Custom CSS classes for different parts of the TimePicker.",
+            Href = "#timepicker-class-styles",
+            LinkType = LinkType.Link
         },
         new()
         {
-            Name = "IconLocation",
-            Type = "BitIconLocation",
-            LinkType = LinkType.Link,
-            Href = "#icon-location-enum",
-            DefaultValue = "BitIconLocation.Right",
-            Description = "TimePicker icon location."
+            Name = "CloseButtonTitle",
+            Type = "string",
+            DefaultValue = "Close time picker",
+            Description = "The title of the close button (tooltip).",
         },
         new()
         {
-            Name = "IconName",
-            Type = "string",
-            DefaultValue = "Clock",
-            Description = "Optional TimePicker icon."
+            Name = "Culture",
+            Type = "CultureInfo",
+            DefaultValue = "CultureInfo.CurrentUICulture",
+            Description = "CultureInfo for the TimePicker."
         },
         new()
         {
-            Name = "IsOpen",
-            Type = "bool",
-            DefaultValue = "false",
-            Description = "Whether or not this TimePicker is open.",
+            Name = "DropDirection",
+            Type = "BitDropDirection",
+            DefaultValue = "BitDropDirection.TopAndBottom",
+            Description = "Determines the allowed drop directions of the callout.",
+            Href = "#drop-direction-enum",
+            LinkType = LinkType.Link
         },
         new()
         {
-            Name = "CalloutHtmlAttributes",
-            Type = "Dictionary<string, object>",
-            DefaultValue = "new Dictionary<String, Object>()",
-            Description = "Capture and render additional attributes in addition to the main callout's parameters."
+            Name = "HasBorder",
+            Type = "bool",
+            DefaultValue = "true",
+            Description = "Determines if the TimePicker has a border.",
         },
         new()
         {
-            Name = "CalloutAriaLabel",
-            Type = "string",
-            DefaultValue = "Clock",
-            Description = "Aria label for time picker popup for screen reader users."
+            Name = "HourStep",
+            Type = "int",
+            DefaultValue = "1",
+            Description = "Determines increment/decrement steps for time-picker's hour.",
         },
         new()
         {
-            Name = "IsResponsive",
-            Type = "bool",
-            DefaultValue = "false",
-            Description = "Enables the responsive mode in small screens.",
+            Name = "IconName",
+            Type = "string",
+            DefaultValue = "Clock",
+            Description = "Optional TimePicker icon."
         },
         new()
         {
-            Name = "OnClick",
-            Type = "EventCallback",
-            Description = "Callback for when clicking on TimePicker input.",
+            Name = "IconLocation",
+            Type = "BitIconLocation",
+            LinkType = LinkType.Link,
+            Href = "#icon-location-enum",
+            DefaultValue = "BitIconLocation.Right",
+            Description = "TimePicker icon location."
         },
         new()
         {
-            Name = "OnFocus",
-            Type = "EventCallback",
-            Description = "Callback for when focus moves into the TimePicker input.",
+            Name = "IconTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "Custom TimePicker icon template."
         },
         new()
         {
-            Name = "OnFocusIn",
-            Type = "EventCallback",
-            Description = "Callback for when focus moves into the TimePicker input.",
+            Name = "IsOpen",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether or not this TimePicker is open.",
         },
         new()
         {
-            Name = "OnFocusOut",
-            Type = "EventCallback",
-            Description = "Callback for when clicking on TimePicker input.",
+            Name = "IsResponsive",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Enables the responsive mode in small screens.",
         },
         new()
         {
@@ -123,73 +117,68 @@ public partial class BitTimePickerDemo
         },
         new()
         {
-            Name = "HasBorder",
-            Type = "bool",
-            DefaultValue = "true",
-            Description = "Determines if the TimePicker has a border.",
+            Name = "Label",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "Label for the TimePicker.",
         },
         new()
         {
-            Name = "Culture",
-            Type = "CultureInfo",
-            DefaultValue = "CultureInfo.CurrentUICulture",
-            Description = "CultureInfo for the TimePicker."
+            Name = "LabelTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "Used to customize the label for the TimePicker."
         },
         new()
         {
-            Name = "TimeFormat",
-            Type = "BitTimeFormat",
-            DefaultValue = "BitTimeFormat.TwentyFourHours",
-            Description = "The time format of the time-picker, 24H or 12H.",
-            LinkType = LinkType.Link,
-            Href = "#time-format-enum",
+            Name = "MinuteStep",
+            Type = "int",
+            DefaultValue = "1",
+            Description = "Determines increment/decrement steps for time-picker's minute.",
         },
         new()
         {
-            Name = "ValueFormat",
-            Type = "string?",
-            DefaultValue = "null",
-            Description = @"The format of the time in the TimePicker like ""HH:mm"".",
+            Name = "OnClick",
+            Type = "EventCallback",
+            Description = "Callback for when clicking on TimePicker input.",
         },
         new()
         {
-            Name = "InvalidErrorMessage",
-            Type = "string?",
-            DefaultValue = "null",
-            Description = "The custom validation error message for the invalid value."
+            Name = "OnFocus",
+            Type = "EventCallback",
+            Description = "Callback for when focus moves into the TimePicker input.",
         },
         new()
         {
-            Name = "OnSelectTime",
-            Type = "EventCallback<TimeSpan?>",
-            Description = "Callback for when the on selected time changed.",
+            Name = "OnFocusIn",
+            Type = "EventCallback",
+            Description = "Callback for when focus moves into the TimePicker input.",
         },
         new()
         {
-            Name = "Value",
-            Type = "TimeSpan?",
-            DefaultValue = "null",
-            Description = "The value of TimePicker.",
+            Name = "OnFocusOut",
+            Type = "EventCallback",
+            Description = "Callback for when clicking on TimePicker input.",
         },
         new()
         {
-            Name = "ValueChanged",
+            Name = "OnSelectTime",
             Type = "EventCallback<TimeSpan?>",
-            Description = "Callback for when the on time value changed.",
+            Description = "Callback for when the on selected time changed.",
         },
         new()
         {
-            Name = "HourStep",
-            Type = "int",
-            DefaultValue = "1",
-            Description = "Determines increment/decrement steps for time-picker's hour.",
+            Name = "Placeholder",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "Placeholder text for the DatePicker.",
         },
         new()
         {
-            Name = "MinuteStep",
-            Type = "int",
-            DefaultValue = "1",
-            Description = "Determines increment/decrement steps for time-picker's minute.",
+            Name = "ShowCloseButton",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the BitTimePicker's close button should be shown or not."
         },
         new()
         {
@@ -202,20 +191,34 @@ public partial class BitTimePickerDemo
         },
         new()
         {
-            Name = "Classes",
-            Type = "BitTimePickerClassStyles",
-            DefaultValue = "null",
-            Description = "Custom CSS classes for different parts of the TimePicker.",
-            Href = "#timepicker-class-styles",
-            LinkType = LinkType.Link
+            Name = "Standalone",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the BitTimePicker is rendered standalone or with the input component and callout.",
         },
         new()
         {
-            Name = "CloseButtonTitle",
-            Type = "string",
-            DefaultValue = "Close time picker",
-            Description = "The title of the close button (tooltip).",
+            Name = "TabIndex",
+            Type = "int",
+            DefaultValue = "0",
+            Description = "The tabIndex of the TextField.",
+        },
+        new()
+        {
+            Name = "TimeFormat",
+            Type = "BitTimeFormat",
+            DefaultValue = "BitTimeFormat.TwentyFourHours",
+            Description = "The time format of the time-picker, 24H or 12H.",
+            LinkType = LinkType.Link,
+            Href = "#time-format-enum",
         },
+        new()
+        {
+            Name = "ValueFormat",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = @"The format of the time in the TimePicker like ""HH:mm"".",
+        }
     ];
 
     private readonly List<ComponentSubEnum> componentSubEnums =
@@ -315,6 +318,27 @@ public partial class BitTimePickerDemo
                     Value="1",
                 }
             ]
+        },
+        new()
+        {
+            Id = "drop-direction-enum",
+            Name = "BitDropDirection",
+            Description = "",
+            Items =
+            [
+                new()
+                {
+                    Name = "Auto",
+                    Description = "Show the callout at the top, bottom, left and right sides according to the space.",
+                    Value = "0",
+                },
+                new()
+                {
+                    Name = "TopAndBottom",
+                    Description = "Show the callout at the top or bottom side.",
+                    Value = "1",
+                }
+            ]
         }
     ];
 
@@ -521,13 +545,6 @@ public partial class BitTimePickerDemo
                     Type = "string?",
                     DefaultValue = "null",
                     Description = "Custom CSS classes/styles for the close button icon of the BitTimePicker."
-                },
-                new()
-                {
-                    Name = "ShowCloseButton",
-                    Type = "bool",
-                    DefaultValue = "false",
-                    Description = "Whether the BitTimePicker's close button should be shown or not."
                 }
             ]
         }
@@ -761,4 +778,18 @@ public class FormValidationTimePickerModel
                MinuteStep=""15""
                AriaLabel=""Select a time""
                Placeholder=""Select a time..."" />";
+
+    private readonly string example16RazorCode = @"
+<BitTimePicker Standalone
+               Label=""Standalone picker"" />
+
+<BitTimePicker Standalone
+               TimeFormat=""BitTimeFormat.TwelveHours""
+               Label=""Picker (AM/PM)"" />
+
+<BitTimePicker Standalone
+               IsEnabled=""false""
+               Value=""new(10, 24, 0)""
+               TimeFormat=""BitTimeFormat.TwelveHours""
+               Label=""Disabled"" />";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.scss
index e8a94323e6..4cb6751eeb 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.scss
@@ -48,8 +48,5 @@
 }
 
 .example-box {
-    display: flex;
-    gap: rem2(15px);
-    flex-flow: column nowrap;
-    width: fit-content;
+    padding: 0 0.5rem;
 }