feat(component): added date input component

docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs

@@ -31,6 +31,7 @@ public class NavigationStore
 			.Add( new( nameof( LumexChip ), ComponentStatus.New ) )
 			.Add( new( nameof( LumexCollapse ) ) )
 			.Add( new( nameof( LumexDataGrid<T> ) ) )
+			.Add( new( nameof( LumexDatePicker ) ) )
 			.Add( new( nameof( LumexDivider ) ) )
 			.Add( new( nameof( LumexDropdown ) ) )
 			.Add( new( nameof( LumexIcon ) ) )
@@ -66,6 +67,7 @@ public class NavigationStore
 			.Add( new( nameof( LumexComponent ) ) )
 			//.Add( nameof( LumexComponentBase ) )
 			//.Add( nameof( LumexDebouncedInputBase<T> ) )
+			.Add( new( nameof( LumexDatePicker ) ) )
 			.Add( new( nameof( LumexDivider ) ) )
 			.Add( new( nameof( LumexDropdown ) ) )
 			.Add( new( nameof( LumexDropdownItem ) ) )

docs/LumexUI.Docs.Client/Pages/Components/DatePicker/DatePicker.razor

@@ -0,0 +1,216 @@
+@page "/docs/components/date-picker"
+@layout DocsContentLayout
+
+@using LumexUI.Docs.Client.Pages.Components.DatePicker.PreviewCodes
+
+<DocsSection Title="Usage">
+    <p>The datepicker component provides a simple way to input and edit dates.</p>
+
+    <Usage />
+
+    <DocsSection Title="Disabled">
+        <p>
+            You can disable a datepicker to prevent user interaction.
+            A disabled datepicker is faded and does not respond to user clicks.
+        </p>
+
+        <Disabled />
+    </DocsSection>
+
+    <DocsSection Title="Read-Only">
+        <p>
+            Set the datepicker component to read-only to display the
+            current state without allowing changes.
+        </p>
+
+        <ReadOnly />
+    </DocsSection>
+
+    <DocsSection Title="Required">
+        <p>
+            Mark the datepicker as required to indicate that it
+            must be filled out before form submission.
+            An asterisk will appear at the end of the label.
+        </p>
+
+        <Required />
+    </DocsSection>
+
+    <DocsSection Title="Sizes">
+        <p>
+            The datepicker component supports multiple sizes to
+            fit different layouts and design needs.
+        </p>
+
+        <Sizes />
+    </DocsSection>
+
+    <DocsSection Title="Radius">
+        <p>Adjust the border radius of the datepicker for rounded or squared corners.</p>
+
+        <Radius />
+    </DocsSection>
+
+    <DocsSection Title="Colors">
+        <p>Customize the datepicker color to match your theme or emphasize certain fields.</p>
+
+        <Colors />
+    </DocsSection>
+
+    <DocsSection Title="Variants">
+        <p>
+            Choose from different datepicker variants,
+            such as <Code>Flat</Code>, <Code>Underlined</Code>,
+            or <Code>Outlined</Code>, for various visual styles.
+        </p>
+
+        <Variants />
+    </DocsSection>
+
+    <DocsSection Title="Label Placements">
+        <p>
+            Position the label either inside or outside the datepicker
+            for flexibility in layout and design.
+        </p>
+
+        <LabelPlacements />
+    </DocsSection>
+
+    <Callout Variant="@CalloutVariant.Info">
+        If the <Code>Label</Code> parameter is not set, the <Code>LabelPlacement</Code>
+        parameter will default to <Code>Outside</Code>.
+    </Callout>
+
+    <DocsSection Title="Clear Button">
+        <p>Enable the button to clear the input with a single click.</p>
+
+        <ClearButton />
+    </DocsSection>
+
+    <DocsSection Title="Start & End Content">
+        <p>
+            Add custom content, such as icons or labels, to the
+            start or end of the datepicker for added functionality.
+        </p>
+
+        <StartEndContent />
+    </DocsSection>
+
+    <DocsSection Title="Description">
+        <p>
+            Provide a brief description below the datepicker to
+            offer guidance or additional context.
+        </p>
+
+        <Description />
+    </DocsSection>
+
+    <DocsSection Title="Error Message">
+        <p>
+            Display an error message below the datepicker to indicate validation issues.
+            You can combine the <Code>Invalid</Code> and <Code>ErrorMessage</Code> parameters to show an invalid input.
+            An error message is shown only when the <Code>Invalid</Code> parameter is set to <Code>true</Code>.
+        </p>
+
+        <ErrorMessage />
+    </DocsSection>
+
+    <DocsSection Title="Debounce Delay">
+        <p>
+            Enable debounced input to delay updates to the datepicker value,
+            reducing the frequency of changes and improving performance.
+            You can achieve this by setting the <Code>DebounceDelay</Code> value and
+            <Code>Behavior</Code> to <Code>OnInput</Code>.
+        </p>
+
+        <DebounceDelay />
+    </DocsSection>
+
+    <DocsSection Title="Two-way Data Binding">
+        <p>
+            The datepicker component supports two-way data binding,
+            allowing you to programmatically control the value.
+            You can achieve this using the <Code>@@bind-Value</Code> directive,
+            or the <Code>Value</Code> and <Code>ValueChanged</Code> parameters.
+        </p>
+
+        <TwoWayDataBinding />
+    </DocsSection>
+</DocsSection>
+
+<DocsSlotsSection Slots="@_slots">
+    <div>
+        <h4 class="font-semibold">Textbox</h4>
+
+        <ul>
+            <li>
+                <Code>Class</Code>: The CSS class name that styles the wrapper of the textbox.
+            </li>
+
+            <li>
+                <Code>Classes</Code>: The CSS class names for the textbox slots that style entire textbox.
+            </li>
+        </ul>
+    </div>
+    <CustomStyles />
+</DocsSlotsSection>
+
+<DocsApiSection Components="@_apiComponents" />
+
+@code {
+    [CascadingParameter]
+    private DocsContentLayout Layout { get; set; } = default!;
+
+    private readonly Heading[] _headings = new Heading[]
+    {
+        new("Usage", [
+            new("Disabled"),
+            new("Read-Only"),
+            new("Required"),
+            new("Sizes"),
+            new("Radius"),
+            new("Colors"),
+            new("Variants"),
+            new("Label Placements"),
+            new("Clear Button"),
+            new("Start & End Content"),
+            new("Description"),
+            new("Error message"),
+            new("Debounce Delay"),
+            new("Two-way Data Binding"),
+        ]),
+        new("Custom Styles"),
+        new("API")
+    };
+
+    private readonly Slot[] _slots = new Slot[]
+    {
+        new(nameof(InputFieldSlots.Root), "The overall wrapper."),
+        new(nameof(InputFieldSlots.Label), "The label element."),
+        new(nameof(InputFieldSlots.MainWrapper), "The wrapper of the input wrapper (when the label is outside)."),
+        new(nameof(InputFieldSlots.InputWrapper), "The wrapper of the label and the inner wrapper (when the label is inside)."),
+        new(nameof(InputFieldSlots.InnerWrapper), "The wrapper of the input, start/end content."),
+        new(nameof(InputFieldSlots.Input), "The input element."),
+        new(nameof(InputFieldSlots.ClearButton), "The clear button element."),
+        new(nameof(InputFieldSlots.HelperWrapper), "The wrapper of a description and an error message."),
+        new(nameof(InputFieldSlots.Description), "The description of the input field."),
+        new(nameof(InputFieldSlots.ErrorMessage), "The error message of the input field.")
+    };
+
+    private readonly string[] _apiComponents = new string[]
+    {
+        nameof(LumexDatePicker),
+        nameof(LumexIcon)
+    };
+
+    protected override void OnInitialized()
+    {
+        Layout.Initialize(
+            title: "DatePicker",
+            category: "Components",
+            description: "DatePicker allows users to input a specific date.",
+            headings: _headings,
+            linksProps: new ComponentLinksProps("DatePicker", isServer: false)
+        );
+    }
+}

docs/LumexUI.Docs.Client/Pages/Components/DatePicker/Examples/ClearButton.razor

@@ -0,0 +1,32 @@
+<div class="w-full">
+    <LumexDatePicker Clearable="@true"
+                     Label="Date"
+                     Placeholder="dd/MM/yyyy"
+                     Value="@_value"
+                     Variant="@InputVariant.Outlined"
+                     OnCleared="@Notify"
+                     Class="max-w-xs" />
+</div>
+
+<p class="text-sm text-default-500">
+    @_text
+</p>
+
+@code {
+    private string? _text;
+    private DateTime? _value;
+
+    private void Notify()
+    {
+        _value = null;
+
+        if (_value is null)
+        {
+            _text = "Input is cleared!";
+        }
+        else
+        {
+            _text += " ..and again..";
+        }
+    }
+}

docs/LumexUI.Docs.Client/Pages/Components/DatePicker/Examples/Colors.razor

@@ -0,0 +1,27 @@
+<div class="w-full grid grid-cols-1 gap-4 md:grid-cols-2">
+    @foreach (ThemeColor color in _colors)
+    {
+        <div>
+            <LumexDatePicker Color="@color"
+                             Label="Date"
+                             Placeholder="dd/MM/yyyy"
+                             Value="DateTime.UtcNow" />
+
+            <small class="text-default-400 mt-1">
+                @color
+            </small>
+        </div>
+    }
+</div>
+
+@code {
+    private ThemeColor[] _colors = [
+        ThemeColor.Default,
+        ThemeColor.Primary,
+        ThemeColor.Secondary,
+        ThemeColor.Success,
+        ThemeColor.Warning,
+        ThemeColor.Danger,
+        ThemeColor.Info
+    ];
+}

docs/LumexUI.Docs.Client/Pages/Components/DatePicker/Examples/CustomStyles.razor

@@ -0,0 +1,33 @@
+<LumexDatePicker Label="Search"
+                 Placeholder="Type to search..."
+                 Radius="@Radius.Large"
+                 Clearable="@true"
+                 StartContent="@_searchIcon"
+                 Classes="@_classes" />
+
+@code {
+    private RenderFragment _searchIcon =
+    @<LumexIcon Icon="@Icons.Rounded.Search"
+                        Size="@new("20")"
+                        Class="text-secondary-400 shrink-0">
+    </LumexIcon>;
+
+    private InputFieldSlots _classes = new()
+        {
+            Label = "text-default-700",
+            InnerWrapper = "bg-transparent",
+            InputWrapper = ElementClass.Empty()
+                .Add("shadow-xl")
+                .Add("bg-default-200/50")
+                .Add("backdrop-blur-xl")
+                .Add("backdrop-saturate-200")
+                .Add("hover:bg-default-200/70")
+                .Add("group-data-[focus=true]:bg-default-200/85")
+                .ToString(),
+            Input = ElementClass.Empty()
+                .Add("bg-transparent")
+                .Add("text-default-900")
+                .Add("placeholder:text-default-500")
+                .ToString()
+        };
+}

docs/LumexUI.Docs.Client/Pages/Components/DatePicker/Examples/DebounceDelay.razor

@@ -0,0 +1,17 @@
+<div class="w-full flex flex-col gap-2">
+    <LumexDatePicker DebounceDelay="250"
+                     Behavior="@InputBehavior.OnInput"
+                     Label="Search"
+                     Placeholder="Type to search..."
+                     Clearable="@true"
+                     Class="max-w-xs"
+                     @bind-Value="@_value" />
+
+    <p class="text-sm text-default-500">
+        Value: @_value
+    </p>
+</div>
+
+@code {
+    private DateTime? _value;
+}

docs/LumexUI.Docs.Client/Pages/Components/DatePicker/Examples/Description.razor

@@ -0,0 +1,4 @@
+<LumexDatePicker Label="Date"
+                 Placeholder="dd/MM.yyyy"
+                 Description="We'll never share your birthday with anyone else."
+                 Class="max-w-xs" />

docs/LumexUI.Docs.Client/Pages/Components/DatePicker/Examples/Disabled.razor

@@ -0,0 +1,4 @@
+<LumexDatePicker Disabled="true"
+                 Label="Date"
+                 Placeholder="dd/MM/yyyy"
+                 Class="max-w-xs" />