feat(components): add Datebox component

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

@@ -32,6 +32,7 @@ public class NavigationStore
 			.Add( new( nameof( LumexChip ), PageStatus.New ) )
 			.Add( new( nameof( LumexCollapse ) ) )
 			.Add( new( nameof( LumexDataGrid<T> ) ) )
+			.Add( new( nameof( LumexDateInput ), PageStatus.New ) )
 			.Add( new( nameof( LumexDivider ) ) )
 			.Add( new( nameof( LumexDropdown ) ) )
 			.Add( new( nameof( LumexLink ) ) )
@@ -67,6 +68,7 @@ public class NavigationStore
 			.Add( new( nameof( LumexComponent ) ) )
 			//.Add( nameof( LumexComponentBase ) )
 			//.Add( nameof( LumexDebouncedInputBase<T> ) )
+			.Add( new( nameof( LumexDateInput ) ) )
 			.Add( new( nameof( LumexDivider ) ) )
 			.Add( new( nameof( LumexDropdown ) ) )
 			.Add( new( nameof( LumexDropdownItem ) ) )

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

@@ -0,0 +1,215 @@
+@page "/docs/components/date-input"
+@layout DocsContentLayout
+
+@using LumexUI.Docs.Client.Pages.Components.DateInput.PreviewCodes
+
+<DocsSection Title="Usage">
+    <p>The date input component provides a simple way to input and edit dates.</p>
+
+    <Usage />
+
+    <DocsSection Title="Disabled">
+        <p>
+            You can disable a date input to prevent user interaction.
+            A disabled date input is faded and does not respond to user clicks.
+        </p>
+
+        <Disabled />
+    </DocsSection>
+
+    <DocsSection Title="Read-Only">
+        <p>
+            Set the date input component to read-only to display the
+            current state without allowing changes.
+        </p>
+
+        <ReadOnly />
+    </DocsSection>
+
+    <DocsSection Title="Required">
+        <p>
+            Mark the date input 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 date input component supports multiple sizes to
+            fit different layouts and design needs.
+        </p>
+
+        <Sizes />
+    </DocsSection>
+
+    <DocsSection Title="Radius">
+        <p>Adjust the border radius of the date input for rounded or squared corners.</p>
+
+        <Radius />
+    </DocsSection>
+
+    <DocsSection Title="Colors">
+        <p>Customize the date input color to match your theme or emphasize certain fields.</p>
+
+        <Colors />
+    </DocsSection>
+
+    <DocsSection Title="Variants">
+        <p>
+            Choose from different date input 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 date input
+            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 date input for added functionality.
+        </p>
+
+        <StartEndContent />
+    </DocsSection>
+
+    <DocsSection Title="Description">
+        <p>
+            Provide a brief description below the date input to
+            offer guidance or additional context.
+        </p>
+
+        <Description />
+    </DocsSection>
+
+    <DocsSection Title="Error Message">
+        <p>
+            Display an error message below the date input 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 date input 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 date input 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.Base), "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(LumexDateInput)
+    };
+
+    protected override void OnInitialized()
+    {
+        Layout.Initialize(
+            title: "Date Input",
+            category: "Components",
+            description: "Date input allows users to input a specific date.",
+            headings: _headings,
+            linksProps: new ComponentLinksProps("DateInput", isServer: false)
+        );
+    }
+}

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

@@ -0,0 +1,28 @@
+<div class="w-full">
+    <LumexDateInput 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!";
+        }
+    }
+}

docs/LumexUI.Docs.Client/Pages/Components/DateInput/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>
+            <LumexDateInput 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/DateInput/Examples/CustomStyles.razor

@@ -0,0 +1,30 @@
+<LumexDateInput Label="Search"
+                 Placeholder="Type to search..."
+                 Radius="@Radius.Large"
+                 Clearable="@true"
+                 Classes="@_classes">
+    <StartContent>
+        <SearchIcon Size="18" class="text-secondary-400 shrink-0" />
+    </StartContent>
+</LumexDateInput>
+
+@code {
+    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/DateInput/Examples/DebounceDelay.razor

@@ -0,0 +1,17 @@
+<div class="w-full flex flex-col gap-2">
+    <LumexDateInput 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/DateInput/Examples/Description.razor

@@ -0,0 +1,4 @@
+<LumexDateInput 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/DateInput/Examples/Disabled.razor

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