@page "/components/date-picker"

<PageTitle>Date Picker — Lumeo</PageTitle>

<PageHeader Title="Date Picker" Description="A popover-based date picker built on top of Calendar." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Select a single date, such as a birthday or appointment date.</li>
        <li>Pick a date range for filtering reports, booking periods, or scheduling.</li>
        <li>Provide month or year pickers for credit card expiry, fiscal year, or archive navigation.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Container MaxWidth="xs" Center="false" Padding="">
            <DatePicker @bind-Value="_selectedDate" />
            @if (_selectedDate.HasValue)
            {
                <Lumeo.Text Size="sm" Color="muted" Class="mt-2">Selected: @_selectedDate.Value.ToString("MMMM d, yyyy")</Lumeo.Text>
            }
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Label" Code="@_labelCode">
        <Stack Gap="2" Class="w-full max-w-xs">
            <Label>Date of birth</Label>
            <DatePicker @bind-Value="_birthDate" Placeholder="Pick your date of birth" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Custom Format" Code="@_formatCode">
        <Stack Gap="2" Class="w-full max-w-xs">
            <Label>Event date</Label>
            <DatePicker @bind-Value="_eventDate" Format="yyyy-MM-dd" Placeholder="YYYY-MM-DD" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Min & Max Date" Code="@_minMaxCode">
        <Stack Gap="2" Class="w-full max-w-xs">
            <Label>Appointment date</Label>
            <DatePicker @bind-Value="_constrainedDate" MinDate="@_minDate" MaxDate="@_maxDate" Placeholder="Select within range" />
            <Lumeo.Text Size="sm" Color="muted">Available: @_minDate.ToString("MMM d") — @_maxDate.ToString("MMM d, yyyy")</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="With Presets" Code="@_presetsCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <DatePicker @bind-Value="_presetDate" Presets="@_presets" Placeholder="Pick a date" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Date Range Picker" Code="@_rangeCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <DateRangePicker @bind-StartDate="_rangeStart" @bind-EndDate="_rangeEnd" />
            @if (_rangeStart.HasValue && _rangeEnd.HasValue)
            {
                <Lumeo.Text Size="sm" Color="muted" Class="mt-2">@_rangeStart.Value.ToString("MMM d, yyyy") — @_rangeEnd.Value.ToString("MMM d, yyyy")</Lumeo.Text>
            }
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Month Picker" Code="@_monthCode">
        <Container MaxWidth="xs" Center="false" Padding="">
            <DatePicker @bind-Value="_monthDate" Mode="DatePicker.DatePickerMode.Month" Placeholder="Select a month" />
            @if (_monthDate.HasValue)
            {
                <Lumeo.Text Size="sm" Color="muted" Class="mt-2">Selected: @_monthDate.Value.ToString("MMMM yyyy")</Lumeo.Text>
            }
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Year Picker" Code="@_yearCode">
        <Container MaxWidth="xs" Center="false" Padding="">
            <DatePicker @bind-Value="_yearDate" Mode="DatePicker.DatePickerMode.Year" Placeholder="Select a year" />
            @if (_yearDate.HasValue)
            {
                <Lumeo.Text Size="sm" Color="muted" Class="mt-2">Selected: @_yearDate.Value.Year</Lumeo.Text>
            }
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Date Time Picker" Code="@_dateTimeCode">
        <Container MaxWidth="xs" Center="false" Padding="">
            <DatePicker @bind-Value="_dateTimeDate" @bind-Time="_dateTimeTime" ShowTimePicker="true" Placeholder="Pick date and time" />
            @if (_dateTimeDate.HasValue)
            {
                <Lumeo.Text Size="sm" Color="muted" Class="mt-2">@_dateTimeDate.Value.ToString("MMM d, yyyy") @(_dateTimeTime?.ToString(@"hh\:mm") ?? "")</Lumeo.Text>
            }
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Clearable" Code="@_clearableCode">
        <Container MaxWidth="xs" Center="false" Padding="">
            <DatePicker @bind-Value="_clearableDate" Clearable="true" Placeholder="Pick a date (clearable)" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledDateCode">
        <Container MaxWidth="xs" Center="false" Padding="">
            <DatePicker Value="@(DateOnly.FromDateTime(DateTime.Today))" Disabled="true" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Inline Calendar" Code="@_inlineCode">
        <Container MaxWidth="xs" Center="false" Padding="">
            <DatePicker @bind-Value="_inlineDate" Inline="true" />
            @if (_inlineDate.HasValue)
            {
                <Lumeo.Text Size="sm" Color="muted" Class="mt-2">Selected: @_inlineDate.Value.ToString("MMMM d, yyyy")</Lumeo.Text>
            }
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Week Numbers" Code="@_weekNumbersCode">
        <Container MaxWidth="xs" Center="false" Padding="">
            <DatePicker @bind-Value="_weekDate" ShowWeekNumbers="true" Placeholder="Pick a date (with week numbers)" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Mode — interactive preview" Code="@_modeInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch Mode to see how the picker surface changes between Single, Range, Month, and Year.</Lumeo.Text>
            <Segmented @bind-Value="_previewMode">
                <SegmentedItem Value="Single">Single</SegmentedItem>
                <SegmentedItem Value="Range">Range</SegmentedItem>
                <SegmentedItem Value="Month">Month</SegmentedItem>
                <SegmentedItem Value="Year">Year</SegmentedItem>
            </Segmented>
            <Container MaxWidth="sm" Center="false" Padding="">
                <DatePicker @bind-Value="_modePreviewDate"
                            @bind-RangeStart="_modePreviewStart"
                            @bind-RangeEnd="_modePreviewEnd"
                            Mode="_datePickerModeEnum"
                            Placeholder="@($"Mode = {_previewMode}")" />
                @if (_previewMode == "Range" && _modePreviewStart.HasValue)
                {
                    <Lumeo.Text Size="sm" Color="muted" Class="mt-2">
                        @_modePreviewStart.Value.ToString("MMM d") — @(_modePreviewEnd?.ToString("MMM d, yyyy") ?? "...")
                    </Lumeo.Text>
                }
                else if (_modePreviewDate.HasValue)
                {
                    <Lumeo.Text Size="sm" Color="muted" Class="mt-2">Selected: @_modePreviewDate.Value.ToString("MMMM d, yyyy")</Lumeo.Text>
                }
            </Container>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Wheel Variant (Mobile)" Code="@_wheelCode">
        <Container MaxWidth="xs" Center="false" Padding="">
            <DatePicker @bind-Value="_wheelDate" Variant="DatePicker.DatePickerVariant.Wheel" />
            @if (_wheelDate.HasValue)
            {
                <Lumeo.Text Size="sm" Color="muted" Class="mt-2">Selected: @_wheelDate.Value.ToString("MMMM d, yyyy")</Lumeo.Text>
            }
        </Container>
    </ComponentDemo>
</Stack>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>Enter</Kbd></TableCell><TableCell>Opens the calendar popover or selects the focused date.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowUp</Kbd></TableCell><TableCell>Moves focus to the same day in the previous week.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowDown</Kbd></TableCell><TableCell>Moves focus to the same day in the next week.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowLeft</Kbd></TableCell><TableCell>Moves focus to the previous day.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowRight</Kbd></TableCell><TableCell>Moves focus to the next day.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Escape</Kbd></TableCell><TableCell>Closes the calendar popover without selecting a date.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="datepicker" Level="3" Class="mt-8 scroll-mt-20">DatePicker</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Value</TableCell><TableCell Class="font-mono text-xs">DateOnly?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The currently selected date. Use with @@bind-Value.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ValueChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;DateOnly?&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when the selected date changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Placeholder</TableCell><TableCell Class="font-mono text-xs">string</TableCell><TableCell Class="font-mono text-xs">"Pick a date"</TableCell><TableCell>Text shown when no date is selected.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Format</TableCell><TableCell Class="font-mono text-xs">string</TableCell><TableCell Class="font-mono text-xs">"dd.MM.yyyy"</TableCell><TableCell>Date format string for displaying the selected date.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">MinDate</TableCell><TableCell Class="font-mono text-xs">DateOnly?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Earliest selectable date.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">MaxDate</TableCell><TableCell Class="font-mono text-xs">DateOnly?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Latest selectable date.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Presets</TableCell><TableCell Class="font-mono text-xs">List&lt;DatePickerPreset&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Quick-select preset dates shown beside the calendar.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Mode</TableCell><TableCell Class="font-mono text-xs">DatePicker.DatePickerMode</TableCell><TableCell Class="font-mono text-xs">Single</TableCell><TableCell>Picker mode. Values: <code>DatePicker.DatePickerMode.Single</code>, <code>Range</code>, <code>Month</code>, <code>Year</code>.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">RangeStart</TableCell><TableCell Class="font-mono text-xs">DateOnly?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Start date for range mode. Use with @@bind-RangeStart.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">RangeStartChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;DateOnly?&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when range start changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">RangeEnd</TableCell><TableCell Class="font-mono text-xs">DateOnly?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>End date for range mode. Use with @@bind-RangeEnd.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">RangeEndChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;DateOnly?&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when range end changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ShowTimePicker</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Shows a time picker below the calendar.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Time</TableCell><TableCell Class="font-mono text-xs">TimeSpan?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Selected time value. Use with @@bind-Time.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">TimeChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;TimeSpan?&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when the time changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">DateTimeValue</TableCell><TableCell Class="font-mono text-xs">DateTime?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Combined date+time value when ShowTimePicker is true. Use with @@bind-DateTimeValue.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">DateTimeValueChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;DateTime?&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when the combined date+time value changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Culture</TableCell><TableCell Class="font-mono text-xs">CultureInfo?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Culture used for labels and parsing. Defaults to the current culture.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Disabled</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Disables the date picker trigger button.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Clearable</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Shows a clear button to reset the selected date.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">TriggerContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Custom content for the trigger button.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">NumberOfMonths</TableCell><TableCell Class="font-mono text-xs">int</TableCell><TableCell Class="font-mono text-xs">1</TableCell><TableCell>Number of months to display. Defaults to 2 in Range mode.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Inline</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Renders the calendar directly in the page without a popover trigger button.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ShowWeekNumbers</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Shows ISO week numbers alongside the calendar rows.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">FirstDayOfWeek</TableCell><TableCell Class="font-mono text-xs">DayOfWeek?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Override the first day of the week. When null, falls back to the current culture's setting.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">IsDateDisabled</TableCell><TableCell Class="font-mono text-xs">Func&lt;DateOnly, bool&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Predicate called for each calendar day; return true to disable that date.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">DateClass</TableCell><TableCell Class="font-mono text-xs">Func&lt;DateOnly, string?&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Function that returns extra CSS classes for a given day cell.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">DateTooltip</TableCell><TableCell Class="font-mono text-xs">Func&lt;DateOnly, string?&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Function that returns a tooltip string for a given day cell.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">DateBadge</TableCell><TableCell Class="font-mono text-xs">Func&lt;DateOnly, string?&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Function that returns a badge label (1–2 chars) to overlay on a given day cell.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Open</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Programmatically controls whether the calendar popover is open. Use with @@bind-Open.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">OpenChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;bool&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Fires when the popover open state changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Required</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Marks the field as required for form validation.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Invalid</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Applies a destructive ring to indicate a validation error.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ErrorText</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Error message shown below the field when Invalid is true (standalone).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">HelperText</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Help text shown below the field when there is no error (standalone).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Label</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Inline label rendered above the picker (standalone).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Name</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>HTML name attribute for form identification.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Variant</TableCell><TableCell Class="font-mono text-xs">DatePickerVariant</TableCell><TableCell Class="font-mono text-xs">Calendar</TableCell><TableCell>Calendar (default) or Wheel for iOS-style drum scrolling.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="daterangepicker" Level="3" Class="mt-8 scroll-mt-20">DateRangePicker</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">StartDate</TableCell><TableCell Class="font-mono text-xs">DateOnly?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Start date of the range. Use with @@bind-StartDate.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">StartDateChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;DateOnly?&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when the start date changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">EndDate</TableCell><TableCell Class="font-mono text-xs">DateOnly?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>End date of the range. Use with @@bind-EndDate.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">EndDateChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;DateOnly?&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when the end date changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">MinDate</TableCell><TableCell Class="font-mono text-xs">DateOnly?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Earliest selectable date.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">MaxDate</TableCell><TableCell Class="font-mono text-xs">DateOnly?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Latest selectable date.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Placeholder</TableCell><TableCell Class="font-mono text-xs">string</TableCell><TableCell Class="font-mono text-xs">"Select date range"</TableCell><TableCell>Text shown when no range is selected.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Format</TableCell><TableCell Class="font-mono text-xs">string</TableCell><TableCell Class="font-mono text-xs">"MMM dd, yyyy"</TableCell><TableCell>Date format string for displaying selected dates.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Presets</TableCell><TableCell Class="font-mono text-xs">List&lt;DateRangePreset&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Quick-select preset date ranges.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Disabled</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Disables the date range picker.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Clearable</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">true</TableCell><TableCell>Shows a clear button to reset the date range.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/calendar" class="text-primary hover:underline">Calendar</a> — The inline calendar used by DatePicker, available as a standalone component.</li>
        <li><a href="/components/input" class="text-primary hover:underline">Input</a> — Use a plain text input when users need to type dates in a known format.</li>
        <li><a href="/components/popover" class="text-primary hover:underline">Popover</a> — The underlying overlay mechanism used by DatePicker.</li>
    </ul>
</div>

@code {
    private DateOnly? _selectedDate;
    private DateOnly? _birthDate;
    private DateOnly? _eventDate;
    private DateOnly? _constrainedDate;
    private DateOnly _minDate = DateOnly.FromDateTime(DateTime.Today);
    private DateOnly _maxDate = DateOnly.FromDateTime(DateTime.Today.AddDays(30));
    private DateOnly? _presetDate;
    private DateOnly? _rangeStart;
    private DateOnly? _rangeEnd;
    private DateOnly? _monthDate;
    private DateOnly? _yearDate;
    private DateOnly? _dateTimeDate;
    private TimeSpan? _dateTimeTime;
    private DateOnly? _clearableDate;
    private List<DatePicker.DatePickerPreset> _presets =
    [
        new("Today", DateOnly.FromDateTime(DateTime.Today)),
        new("Tomorrow", DateOnly.FromDateTime(DateTime.Today.AddDays(1))),
        new("Next Week", DateOnly.FromDateTime(DateTime.Today.AddDays(7))),
        new("Next Month", DateOnly.FromDateTime(DateTime.Today.AddMonths(1))),
    ];

    private string _defaultCode = @"<DatePicker @bind-Value=""_selectedDate"" />";

    private string _labelCode = @"<Label>Date of birth</Label>
<DatePicker @bind-Value=""_date"" Placeholder=""Pick your date of birth"" />";

    private string _formatCode = @"<DatePicker @bind-Value=""_date"" Format=""yyyy-MM-dd"" Placeholder=""YYYY-MM-DD"" />";

    private string _minMaxCode = @"<DatePicker @bind-Value=""_date"" MinDate=""@_minDate"" MaxDate=""@_maxDate"" Placeholder=""Select within range"" />

@code {
    private DateOnly? _date;
    private DateOnly _minDate = DateOnly.FromDateTime(DateTime.Today);
    private DateOnly _maxDate = DateOnly.FromDateTime(DateTime.Today.AddDays(30));
}";

    private string _presetsCode = @"<DatePicker @bind-Value=""_date"" Presets=""@_presets"" Placeholder=""Pick a date"" />

@code {
    private DateOnly? _date;
    private List<DatePicker.DatePickerPreset> _presets =
    [
        new(""Today"", DateOnly.FromDateTime(DateTime.Today)),
        new(""Tomorrow"", DateOnly.FromDateTime(DateTime.Today.AddDays(1))),
        new(""Next Week"", DateOnly.FromDateTime(DateTime.Today.AddDays(7))),
        new(""Next Month"", DateOnly.FromDateTime(DateTime.Today.AddMonths(1))),
    ];
}";

    private string _rangeCode = @"<DateRangePicker @bind-StartDate=""_rangeStart"" @bind-EndDate=""_rangeEnd"" />

@code {
    private DateOnly? _rangeStart;
    private DateOnly? _rangeEnd;
}";

    private string _monthCode = @"<DatePicker @bind-Value=""_monthDate"" Mode=""DatePicker.DatePickerMode.Month"" Placeholder=""Select a month"" />";

    private string _yearCode = @"<DatePicker @bind-Value=""_yearDate"" Mode=""DatePicker.DatePickerMode.Year"" Placeholder=""Select a year"" />";

    private string _dateTimeCode = @"<DatePicker @bind-Value=""_date"" @bind-Time=""_time"" ShowTimePicker=""true"" Placeholder=""Pick date and time"" />

@code {
    private DateOnly? _date;
    private TimeSpan? _time;
}";

    private string _clearableCode = @"<DatePicker @bind-Value=""_date"" Clearable=""true"" Placeholder=""Pick a date (clearable)"" />";

    private string _disabledDateCode = @"<DatePicker Value=""@(DateOnly.FromDateTime(DateTime.Today))"" Disabled=""true"" />";

    private DateOnly? _inlineDate;
    private DateOnly? _weekDate;

    private string _inlineCode = @"<DatePicker @bind-Value=""_date"" Inline=""true"" />";

    private string _weekNumbersCode = @"<DatePicker @bind-Value=""_date"" ShowWeekNumbers=""true"" Placeholder=""Pick a date (with week numbers)"" />";

    private string _previewMode = "Single";
    private DateOnly? _modePreviewDate;
    private DateOnly? _modePreviewStart;
    private DateOnly? _modePreviewEnd;
    private DatePicker.DatePickerMode _datePickerModeEnum =>
        Enum.TryParse<DatePicker.DatePickerMode>(_previewMode, out var m) ? m : DatePicker.DatePickerMode.Single;

    private DateOnly? _wheelDate;
    private string _wheelCode = @"<DatePicker @bind-Value=""_date"" Variant=""DatePicker.DatePickerVariant.Wheel"" />";

    private string _modeInteractiveCode = @"<Segmented @bind-Value=""_mode"">
    <SegmentedItem Value=""Single"">Single</SegmentedItem>
    <SegmentedItem Value=""Range"">Range</SegmentedItem>
    <SegmentedItem Value=""Month"">Month</SegmentedItem>
    <SegmentedItem Value=""Year"">Year</SegmentedItem>
</Segmented>
<DatePicker @bind-Value=""_date""
            @bind-RangeStart=""_rangeStart""
            @bind-RangeEnd=""_rangeEnd""
            Mode=""@Enum.Parse<DatePicker.DatePickerMode>(_mode)""
            Placeholder=""@($""Mode = {_mode}"")"" />

@code {
    private string _mode = ""Single"";
    private DateOnly? _date;
    private DateOnly? _rangeStart;
    private DateOnly? _rangeEnd;
}";
}
