tera-system-ui 0.1.64 → 0.1.67

package/dist/components/date-range-picker/DateRangePicker.svelte

@@ -0,0 +1,490 @@
+<script lang="ts">import { DateRangeField, Popover as PopoverPrimitive, RangeCalendar as CalendarPrimitive } from 'bits-ui';
+import { CalendarDate } from '@internationalized/date';
+import IconCalendar from "@tabler/icons-svelte/icons/calendar";
+import IconChevronLeft from "@tabler/icons-svelte/icons/chevron-left";
+import IconChevronRight from "@tabler/icons-svelte/icons/chevron-right";
+import { IconX } from '../icons/index.js';
+import { cn } from '../../utils/utils.js';
+import { untrack } from 'svelte';
+import { innerWidth } from 'svelte/reactivity/window';
+import { Dialog } from '../dialog/index.js';
+let { dateRange = $bindable([]), onchange, enableTime = false, placeholder = 'Select date range', disabled = false, class: className, minValue, maxValue, isDateDisabled, numberOfMonths: numberOfMonthsProp, weekStartsOn, } = $props();
+const isDesktop = $derived((innerWidth.current ?? 768) >= 768);
+let open = $state(false);
+// ── Date-field value: drives DateRangeField segments ──────────────────
+function toCalendarDate(date) {
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+}
+function fromCalendarDate(date, timeStr) {
+    const [h, m] = timeStr.split(':').map(Number);
+    return new Date(date.year, date.month - 1, date.day, h, m);
+}
+const [initD0, initD1] = dateRange;
+let fieldValue = $state({
+    start: initD0 ? toCalendarDate(initD0) : undefined,
+    end: initD1 ? toCalendarDate(initD1) : undefined,
+});
+// ── Pending: temporary calendar state while picker is open ────────────
+let pendingRange = $state({ start: undefined, end: undefined });
+let startTime = $state('00:00');
+let endTime = $state('23:59');
+// Derived: highlight whichever quick-select preset matches the current
+// pendingRange (works for manual picks, quick-select clicks, and pre-set values).
+const activeQuickSelect = $derived.by(() => {
+    if (!pendingRange.start || !pendingRange.end)
+        return null;
+    const ps = pendingRange.start;
+    const pe = pendingRange.end;
+    for (const { key } of quickRanges) {
+        const { start, end } = getQuickRange(key);
+        if (ps.compare(toCalendarDate(start)) === 0 &&
+            pe.compare(toCalendarDate(end)) === 0) {
+            return key;
+        }
+    }
+    return null;
+});
+const hasRange = $derived(dateRange.length >= 2);
+const canApply = $derived(!!pendingRange.start && !!pendingRange.end);
+// ── Field direct-edit handler ─────────────────────────────────────────
+function handleFieldChange(range) {
+    if (!range)
+        return;
+    fieldValue = range;
+    if (range.start && range.end) {
+        const result = [
+            fromCalendarDate(range.start, enableTime ? startTime : '00:00'),
+            fromCalendarDate(range.end, enableTime ? endTime : '23:59'),
+        ];
+        dateRange = result;
+        onchange?.(result);
+    }
+    else if (!range.start && !range.end && dateRange.length > 0) {
+        dateRange = [];
+        onchange?.([]);
+    }
+}
+// ── Picker open: copy fieldValue → pendingRange ───────────────────────
+function initPendingState() {
+    pendingRange = { start: fieldValue.start, end: fieldValue.end };
+    const [d0, d1] = dateRange;
+    if (enableTime && d0 && d1) {
+        const sh = d0.getHours(), sm = d0.getMinutes();
+        const eh = d1.getHours(), em = d1.getMinutes();
+        startTime = `${String(sh).padStart(2, '0')}:${String(sm).padStart(2, '0')}`;
+        endTime = `${String(eh).padStart(2, '0')}:${String(em).padStart(2, '0')}`;
+    }
+    else {
+        startTime = '00:00';
+        endTime = '23:59';
+    }
+}
+$effect(() => {
+    if (open)
+        untrack(initPendingState);
+});
+// ── Apply / Reset ─────────────────────────────────────────────────────
+function applyRange() {
+    if (!pendingRange.start || !pendingRange.end)
+        return;
+    const start = pendingRange.start;
+    const end = pendingRange.end;
+    fieldValue = { start, end };
+    const result = [
+        fromCalendarDate(start, enableTime ? startTime : '00:00'),
+        fromCalendarDate(end, enableTime ? endTime : '23:59'),
+    ];
+    dateRange = result;
+    onchange?.(result);
+    open = false;
+}
+function resetRange() {
+    fieldValue = { start: undefined, end: undefined };
+    dateRange = [];
+    onchange?.([]);
+    open = false;
+}
+// ── Quick select ──────────────────────────────────────────────────────
+function applyQuickSelect(key) {
+    const { start, end } = getQuickRange(key);
+    pendingRange = { start: toCalendarDate(start), end: toCalendarDate(end) };
+}
+function getQuickRange(key) {
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    switch (key) {
+        case 'today':
+            return { start: new Date(today), end: new Date(today) };
+        case 'yesterday': {
+            const y = new Date(today);
+            y.setDate(today.getDate() - 1);
+            return { start: y, end: new Date(y) };
+        }
+        case 'thisWeek': {
+            const dow = today.getDay();
+            const mon = new Date(today);
+            mon.setDate(today.getDate() - (dow === 0 ? 6 : dow - 1));
+            return { start: mon, end: new Date(today) };
+        }
+        case 'last7': {
+            const s = new Date(today);
+            s.setDate(today.getDate() - 6);
+            return { start: s, end: new Date(today) };
+        }
+        case 'last30': {
+            const s = new Date(today);
+            s.setDate(today.getDate() - 29);
+            return { start: s, end: new Date(today) };
+        }
+        case 'thisMonth':
+            return {
+                start: new Date(today.getFullYear(), today.getMonth(), 1),
+                end: new Date(today.getFullYear(), today.getMonth() + 1, 0)
+            };
+        case 'lastMonth':
+            return {
+                start: new Date(today.getFullYear(), today.getMonth() - 1, 1),
+                end: new Date(today.getFullYear(), today.getMonth(), 0)
+            };
+        case 'thisQuarter': {
+            const q = Math.floor(today.getMonth() / 3);
+            return {
+                start: new Date(today.getFullYear(), q * 3, 1),
+                end: new Date(today.getFullYear(), q * 3 + 3, 0)
+            };
+        }
+        case 'last3Months':
+            return {
+                start: new Date(today.getFullYear(), today.getMonth() - 3, today.getDate()),
+                end: new Date(today)
+            };
+        default:
+            return { start: new Date(today), end: new Date(today) };
+    }
+}
+const quickRanges = [
+    { key: 'today', label: 'Today' },
+    { key: 'yesterday', label: 'Yesterday' },
+    { key: 'thisWeek', label: 'This week' },
+    { key: 'last7', label: 'Last 7 days' },
+    { key: 'last30', label: 'Last 30 days' },
+    { key: 'thisMonth', label: 'This month' },
+    { key: 'lastMonth', label: 'Last month' },
+    { key: 'thisQuarter', label: 'This quarter' },
+    { key: 'last3Months', label: 'Last 3 months' },
+];
+// ── Styles ────────────────────────────────────────────────────────────
+const triggerStyles = $derived(cn('inline-flex items-center gap-2 h-9 px-3 rounded-md text-sm w-full', 'border border-border-default bg-surface-control', 'focus-within:border-interactive-hover focus-within:shadow-focus', 'data-[state=open]:border-interactive-hover data-[state=open]:shadow-focus', 'transition-[border-color,box-shadow] ease-ui duration-150', 'cursor-text', disabled && 'opacity-50 pointer-events-none'));
+const iconBtnStyles = cn('inline-flex items-center justify-center size-6 rounded shrink-0 cursor-pointer', 'text-text-tertiary hover:bg-surface-hover hover:text-text-primary', 'transition-colors ease-ui duration-100');
+const segmentStyles = cn('inline-block rounded-sm px-0.5 text-sm tabular-nums caret-transparent select-none outline-none', 'text-text-primary', 'data-[placeholder]:text-text-tertiary', 'focus:bg-primary-100 focus:text-primary-700 dark:focus:bg-primary-950 dark:focus:text-primary-300');
+const dayStyles = cn('inline-flex items-center justify-center size-full rounded-md text-sm cursor-pointer select-none', 'transition-colors ease-ui duration-100', 'hover:bg-surface-hover text-text-primary', 'data-[outside-month]:opacity-0 data-[outside-month]:pointer-events-none', 'data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-border-default', 'data-[selected]:bg-primary-600 data-[selected]:text-white data-[selected]:hover:bg-primary-500 data-[selected]:ring-0', 'data-[range-middle]:bg-primary-100 data-[range-middle]:text-primary-700 data-[range-middle]:rounded-none data-[range-middle]:hover:bg-primary-200', 'dark:data-[range-middle]:bg-primary-950 dark:data-[range-middle]:text-primary-300 dark:data-[range-middle]:hover:bg-primary-900', 'data-[range-start]:rounded-r-none', 'data-[range-end]:rounded-l-none', 'data-[disabled]:opacity-30 data-[disabled]:pointer-events-none', 'data-[unavailable]:opacity-30 data-[unavailable]:pointer-events-none');
+const popoverContentStyles = cn('z-50 overflow-hidden bg-surface rounded-container border border-border-default shadow-lg', 'animate-in fade-in zoom-in-95 duration-150', 'data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95');
+</script>
+
+<!-- ─── Shared snippets ──────────────────────────────────────────────────── -->
+
+{#snippet dateField()}
+    <DateRangeField.Root
+            bind:value={fieldValue}
+            onValueChange={handleFieldChange}
+            {disabled}
+            class="drp-field flex items-center gap-0.5 min-w-0 flex-1"
+    >
+        <DateRangeField.Input type="start" class="flex items-center gap-0">
+            {#snippet children({segments})}
+                {#each segments as {part, value}, si (si)}
+                    {#if part === 'literal'}
+                        <span class="text-text-tertiary text-sm select-none">{value}</span>
+                    {:else}
+                        <DateRangeField.Segment {part} class={segmentStyles}>{value}</DateRangeField.Segment>
+                    {/if}
+                {/each}
+            {/snippet}
+        </DateRangeField.Input>
+
+        <span class="text-text-tertiary text-sm mx-1.5 select-none shrink-0">–</span>
+
+        <DateRangeField.Input type="end" class="flex items-center gap-0">
+            {#snippet children({segments})}
+                {#each segments as {part, value}, si (si)}
+                    {#if part === 'literal'}
+                        <span class="text-text-tertiary text-sm select-none">{value}</span>
+                    {:else}
+                        <DateRangeField.Segment {part} class={segmentStyles}>{value}</DateRangeField.Segment>
+                    {/if}
+                {/each}
+            {/snippet}
+        </DateRangeField.Input>
+    </DateRangeField.Root>
+{/snippet}
+
+{#snippet calendarGrid(numberOfMonths: number)}
+    <CalendarPrimitive.Root
+            bind:value={pendingRange}
+            {numberOfMonths}
+            weekdayFormat="short"
+            fixedWeeks
+            {minValue}
+            {maxValue}
+            isDateDisabled={isDateDisabled ? (d) => isDateDisabled(d as CalendarDate) : undefined}
+            weekStartsOn={weekStartsOn}
+    >
+        {#snippet children({months, weekdays})}
+            <div class={cn('flex justify-center', numberOfMonths > 1 && 'gap-6')}>
+                {#each months as month, i (month.value.toString())}
+                    <div class="flex flex-col gap-2">
+                        <!-- Month heading -->
+                        <div class="flex items-center justify-between gap-2">
+                            {#if i === 0}
+                                <CalendarPrimitive.PrevButton
+                                        class="inline-flex items-center justify-center size-7 rounded-md text-text-tertiary
+                                        hover:bg-surface-hover hover:text-text-primary
+                                        transition-colors ease-ui duration-100
+                                        disabled:opacity-30 disabled:pointer-events-none"
+                                >
+                                    <IconChevronLeft class="size-4"/>
+                                </CalendarPrimitive.PrevButton>
+                            {:else}
+                                <div class="size-7 shrink-0"></div>
+                            {/if}
+
+                            <span class="text-sm font-medium text-text-primary whitespace-nowrap">
+                                {new Date(month.value.year, month.value.month - 1)
+                                    .toLocaleDateString('en-US', {month: 'long', year: 'numeric'})}
+                            </span>
+
+                            {#if i === months.length - 1}
+                                <CalendarPrimitive.NextButton
+                                        class="inline-flex items-center justify-center size-7 rounded-md text-text-tertiary
+                                        hover:bg-surface-hover hover:text-text-primary
+                                        transition-colors ease-ui duration-100
+                                        disabled:opacity-30 disabled:pointer-events-none"
+                                >
+                                    <IconChevronRight class="size-4"/>
+                                </CalendarPrimitive.NextButton>
+                            {:else}
+                                <div class="size-7 shrink-0"></div>
+                            {/if}
+                        </div>
+
+                        <!-- Grid -->
+                        <CalendarPrimitive.Grid class="w-full border-collapse">
+                            <CalendarPrimitive.GridHead>
+                                <CalendarPrimitive.GridRow class="flex">
+                                    {#each weekdays as day (day)}
+                                        <CalendarPrimitive.HeadCell
+                                                class="w-9 h-8 text-xs font-medium text-text-tertiary flex items-center justify-center"
+                                        >
+                                            {day}
+                                        </CalendarPrimitive.HeadCell>
+                                    {/each}
+                                </CalendarPrimitive.GridRow>
+                            </CalendarPrimitive.GridHead>
+                            <CalendarPrimitive.GridBody>
+                                {#each month.weeks as weekDates, wi (wi)}
+                                    <CalendarPrimitive.GridRow class="flex mt-0.5">
+                                        {#each weekDates as date (date.toString())}
+                                            <CalendarPrimitive.Cell
+                                                    {date}
+                                                    month={month.value}
+                                                    class="relative size-9 p-0 text-center"
+                                            >
+                                                <CalendarPrimitive.Day class={dayStyles}/>
+                                            </CalendarPrimitive.Cell>
+                                        {/each}
+                                    </CalendarPrimitive.GridRow>
+                                {/each}
+                            </CalendarPrimitive.GridBody>
+                        </CalendarPrimitive.Grid>
+                    </div>
+                {/each}
+            </div>
+        {/snippet}
+    </CalendarPrimitive.Root>
+{/snippet}
+
+{#snippet timePickers()}
+    <div class="border-t border-border-default px-4 py-3 flex items-center gap-2">
+        <span class="text-xs font-medium text-text-tertiary w-9 shrink-0">Start</span>
+        <input
+                type="time"
+                bind:value={startTime}
+                class="h-7 px-2 text-sm text-text-primary border border-border-default rounded-md bg-surface-control
+                focus:border-interactive-hover focus:shadow-focus outline-none
+                transition-[border-color,box-shadow] ease-ui duration-150"
+        />
+        <span class="text-text-tertiary mx-1 shrink-0">→</span>
+        <span class="text-xs font-medium text-text-tertiary w-6 shrink-0">End</span>
+        <input
+                type="time"
+                bind:value={endTime}
+                class="h-7 px-2 text-sm text-text-primary border border-border-default rounded-md bg-surface-control
+                focus:border-interactive-hover focus:shadow-focus outline-none
+                transition-[border-color,box-shadow] ease-ui duration-150"
+        />
+    </div>
+{/snippet}
+
+{#snippet pickerFooter()}
+    <div class="border-t border-border-default px-4 py-3 flex items-center justify-between gap-3">
+        <button
+                class="inline-flex items-center h-8 px-3 text-sm rounded-md cursor-pointer
+                border border-border-default bg-surface-control text-text-primary
+                hover:text-interactive-hover hover:border-interactive-hover
+                transition-[border-color,color] ease-ui duration-150"
+                onclick={resetRange}
+        >
+            Reset
+        </button>
+        <button
+                disabled={!canApply}
+                class="inline-flex items-center h-8 px-4 text-sm rounded-md cursor-pointer
+                bg-primary-600 text-white border border-primary-600
+                hover:bg-primary-500 hover:border-primary-500
+                disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none
+                transition-[background-color,border-color,opacity] ease-ui duration-150"
+                onclick={applyRange}
+        >
+            Apply
+        </button>
+    </div>
+{/snippet}
+
+<!-- ─── Root ─────────────────────────────────────────────────────────────── -->
+
+<div class={cn('inline-flex w-full', className)}>
+    {#if isDesktop}
+        <!-- ── DESKTOP: Popover anchored to the whole trigger container ── -->
+        <PopoverPrimitive.Root bind:open>
+            <PopoverPrimitive.Trigger class={triggerStyles}>
+                {#snippet child({props: triggerProps})}
+                    <!--
+                        Intercept clicks: only toggle the popover when clicking
+                        outside the date-field area (calendar icon, empty space).
+                    -->
+                    <div
+                            {...triggerProps}
+                            onclick={(e) => {
+                            if (!(e.target as HTMLElement).closest('.drp-field')) {
+                                (triggerProps.onclick as EventListener | undefined)?.(e);
+                            }
+                        }}
+                            class={triggerStyles}
+                    >
+                        {@render dateField()}
+
+                        <div class="flex items-center gap-1 shrink-0 ml-1">
+                            <IconCalendar class="size-4 text-text-tertiary pointer-events-none"/>
+                            {#if hasRange}
+                                <button
+                                        type="button"
+                                        class={iconBtnStyles}
+                                        aria-label="Clear date range"
+                                        onclick={(e) => { e.stopPropagation(); resetRange(); }}
+                                >
+                                    <IconX class="size-3"/>
+                                </button>
+                            {/if}
+                        </div>
+                    </div>
+                {/snippet}
+            </PopoverPrimitive.Trigger>
+
+            <PopoverPrimitive.Portal>
+                <PopoverPrimitive.Content sideOffset={4} align="start" class={popoverContentStyles}>
+                    <div class="flex">
+                        <!-- Quick-select sidebar -->
+                        <div class="border-r border-border-default p-2 flex flex-col gap-0.5 w-36 shrink-0">
+                            <p class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-text-tertiary">
+                                Quick Select
+                            </p>
+                            {#each quickRanges as range (range.key)}
+                                <button
+                                        class={cn(
+                                        'w-full text-left px-2 py-1.5 rounded text-sm cursor-pointer',
+                                        'transition-colors ease-ui duration-100',
+                                        activeQuickSelect === range.key
+                                            ? 'bg-interactive/10 text-interactive font-medium'
+                                            : 'text-text-primary hover:bg-surface-hover',
+                                    )}
+                                        onclick={() => applyQuickSelect(range.key)}
+                                >
+                                    {range.label}
+                                </button>
+                            {/each}
+                        </div>
+
+                        <!-- Calendar + time + footer -->
+                        <div class="flex flex-col min-w-0">
+                            <div class="p-4">
+                                {@render calendarGrid(numberOfMonthsProp ?? 2)}
+                            </div>
+                            {#if enableTime}{@render timePickers()}{/if}
+                            {@render pickerFooter()}
+                        </div>
+                    </div>
+                </PopoverPrimitive.Content>
+            </PopoverPrimitive.Portal>
+        </PopoverPrimitive.Root>
+
+    {:else}
+        <!-- ── MOBILE: plain trigger → Dialog (bottom-sheet style) ─────── -->
+        <div class={triggerStyles}>
+            {@render dateField()}
+
+            <div class="flex items-center gap-1 shrink-0 ml-1">
+                <button
+                        class={iconBtnStyles}
+                        aria-label="Open date picker"
+                        onclick={() => (open = true)}
+                >
+                    <IconCalendar class="size-4"/>
+                </button>
+                {#if hasRange}
+                    <button class={iconBtnStyles} aria-label="Clear date range" onclick={resetRange}>
+                        <IconX class="size-3"/>
+                    </button>
+                {/if}
+            </div>
+        </div>
+
+        <Dialog bind:open size="sm" closeButton={false} padding="none">
+            <div class="flex flex-col">
+                <!-- Dialog header -->
+                <div class="flex items-center justify-between px-4 py-3 border-b border-border-default shrink-0">
+                    <span class="text-sm font-semibold text-text-primary">Select Date Range</span>
+                    <button class={iconBtnStyles} aria-label="Close" onclick={() => (open = false)}>
+                        <IconX class="size-4"/>
+                    </button>
+                </div>
+
+                <!-- Horizontal quick-select pills -->
+                <div class="flex gap-1.5 px-3 py-2.5 overflow-x-auto border-b border-border-default shrink-0"
+                     style="scrollbar-width:none;-ms-overflow-style:none;">
+                    {#each quickRanges as range (range.key)}
+                        <button
+                                class={cn(
+                                'shrink-0 px-2.5 py-1 rounded-full text-xs border cursor-pointer whitespace-nowrap',
+                                'transition-colors ease-ui duration-100',
+                                activeQuickSelect === range.key
+                                    ? 'bg-interactive/10 text-interactive border-interactive font-medium'
+                                    : 'border-border-default text-text-secondary hover:border-interactive hover:text-interactive',
+                            )}
+                                onclick={() => applyQuickSelect(range.key)}
+                        >
+                            {range.label}
+                        </button>
+                    {/each}
+                </div>
+
+                <!-- Single-month calendar -->
+                <div class="p-4 overflow-auto">
+                    {@render calendarGrid(1)}
+                </div>
+
+                {#if enableTime}{@render timePickers()}{/if}
+                {@render pickerFooter()}
+            </div>
+        </Dialog>
+    {/if}
+</div>

package/dist/components/date-range-picker/DateRangePicker.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DateRangePickerProps } from './DateRangePicker.types.js';
+declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {}, "dateRange">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
+export default DateRangePicker;

package/dist/components/date-range-picker/DateRangePicker.types.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @component DateRangePicker - Date range picker with quick-select presets, optional time support, and popover/drawer UI.
+ * Built on BitsUI RangeCalendar and Popover primitives.
+ */
+import type { CalendarDate } from "@internationalized/date";
+export interface DateRangePickerProps {
+    /** The currently selected date range as a two-element array [start, end]. Bindable. */
+    dateRange?: Date[];
+    /** Called when the user applies a new date range. */
+    onchange?: (date: Date[]) => void;
+    /** When true, shows hour and minute pickers alongside the calendar. */
+    enableTime?: boolean;
+    /** Placeholder text shown in the trigger when no range is selected. */
+    placeholder?: string;
+    /** Prevents all interaction. */
+    disabled?: boolean;
+    /** Additional CSS classes for the trigger button. */
+    class?: string;
+    /**
+     * Earliest selectable date.
+     * Use `import { CalendarDate } from '@internationalized/date'` to construct values.
+     */
+    minValue?: CalendarDate;
+    /**
+     * Latest selectable date.
+     * Use `import { CalendarDate } from '@internationalized/date'` to construct values.
+     */
+    maxValue?: CalendarDate;
+    /** Returns true for dates that should be shown as disabled and unselectable. */
+    isDateDisabled?: (date: CalendarDate) => boolean;
+    /** Number of calendar months shown side-by-side (desktop only). Defaults to 2. */
+    numberOfMonths?: 1 | 2;
+    /**
+     * Day of the week the calendar grid starts on.
+     * 0 = Sunday, 1 = Monday, … 6 = Saturday.
+     */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}

package/dist/components/date-range-picker/DateRangePicker.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/date-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateRangePicker } from './DateRangePicker.svelte';
+export type { DateRangePickerProps } from './DateRangePicker.types.js';

package/dist/components/date-range-picker/index.js

@@ -0,0 +1 @@
+export { default as DateRangePicker } from './DateRangePicker.svelte';