@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/components/forms/DateRangePicker/DateRangePicker.types.d.ts

@@ -0,0 +1,177 @@
+import React from "react";
+import type { DateRange } from "../../core/Calendar/Calendar.types";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
+export type { DateRange };
+/**
+ * Size variants for DateRangePicker
+ */
+export type DateRangePickerSize = "sm" | "md" | "lg";
+/**
+ * State variants for DateRangePicker
+ */
+export type DateRangePickerState = "default" | "disabled" | "invalid";
+/**
+ * Placement options for DateRangePicker popover
+ */
+export type DateRangePickerPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+/**
+ * Preset for quick date range selection
+ */
+export interface DateRangePreset {
+    label: string;
+    getValue: () => DateRange;
+}
+/**
+ * Main DateRangePicker component props
+ * Always operates on DateRange — no single date mode
+ */
+export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "onFocus" | "onBlur"> {
+    /** Unique identifier */
+    id?: string;
+    /** Form field name */
+    name?: string;
+    /** Size variant */
+    size?: DateRangePickerSize;
+    /** State variant */
+    state?: DateRangePickerState;
+    /** The selected date range (controlled mode) */
+    value?: DateRange;
+    /** Default selected date range (uncontrolled mode) */
+    defaultValue?: DateRange;
+    /** Placeholder text when no range selected */
+    placeholder?: string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Label for the field */
+    label?: React.ReactNode;
+    /** Helper text below the field */
+    helperText?: React.ReactNode;
+    /**
+     * Error message shown instead of `helperText` when `state="invalid"`.
+     * Takes precedence over `helperText` while invalid; `helperText` is
+     * unaffected/still shown as normal otherwise.
+     */
+    errorMessage?: React.ReactNode;
+    /** Callback fired when a range is applied */
+    onChange?: (range: DateRange | null) => void;
+    /** Array of preset date ranges */
+    presets?: DateRangePreset[];
+    /** Whether to show presets sidebar (default: true) */
+    showPresets?: boolean;
+    /** Focus event handler */
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Blur event handler */
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Function to determine if a specific date should be disabled */
+    isDateDisabled?: (date: Date) => boolean;
+    /** Whether to highlight today's date (default: true) */
+    showToday?: boolean;
+    /** Custom weekday labels */
+    weekdays?: string[];
+    /** Custom month names */
+    months?: string[];
+    /** Format for displaying selected date (Intl API) */
+    dateFormat?: Intl.DateTimeFormatOptions;
+    /** Custom format string (e.g., 'DD MMM YYYY') - takes precedence over dateFormat */
+    formatString?: string;
+    /** Year range for the year dropdown */
+    yearRange?: {
+        start: number;
+        end: number;
+    };
+    /** Additional class name for trigger button */
+    className?: string;
+    /** Additional class name for wrapper */
+    wrapperClassName?: string;
+    /** Whether to use portal rendering (default: true) */
+    portal?: boolean;
+    /** Popover placement */
+    placement?: DateRangePickerPlacement;
+    /** Offset from trigger element */
+    offset?: number;
+    /**
+     * Pin the popover surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the popover's base rung. */
+    lift?: boolean;
+}
+/**
+ * DateRangePicker trigger button props
+ */
+export interface DateRangePickerTriggerProps {
+    id?: string;
+    disabled?: boolean;
+    isOpen?: boolean;
+    state?: DateRangePickerState;
+    size?: DateRangePickerSize;
+    className?: string;
+    onClick?: () => void;
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+    "aria-invalid"?: boolean;
+    "aria-describedby"?: string;
+}
+/**
+ * DateRangePicker body props
+ */
+export interface DateRangePickerBodyProps {
+    isOpen?: boolean;
+    className?: string;
+    onClose?: () => void;
+    portal?: boolean;
+    placement?: DateRangePickerPlacement;
+    offset?: number;
+    presets?: DateRangePreset[];
+    showPresets?: boolean;
+    /**
+     * Pin the popover surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the popover's base rung. */
+    lift?: boolean;
+}
+/**
+ * DateRangePicker presets props
+ */
+export interface DateRangePickerPresetsProps {
+    presets: DateRangePreset[];
+    className?: string;
+    tempRange?: DateRange;
+    setTempRange?: React.Dispatch<React.SetStateAction<DateRange | undefined>>;
+    onPresetSelect?: (range: DateRange) => void;
+}
+/**
+ * Theme interface for DateRangePicker (flat structure following library pattern)
+ */
+export interface DateRangePickerTheme {
+    containerStyle: string;
+    baseStyle: string;
+    triggerButtonStyle: string;
+    placeholderTextStyle: string;
+    valueTextStyle: string;
+    triggerSizes: Record<DateRangePickerSize, string>;
+    triggerStates: Record<DateRangePickerState, string>;
+    triggerHoverStates: Record<DateRangePickerState, string>;
+    triggerFocusStates: Record<DateRangePickerState, string>;
+    iconEndStyle: string;
+    iconEndPadding: string;
+    bodyStyle: string;
+    presetsContainerStyle: string;
+    presetButtonStyle: string;
+    presetCheckmarkStyle: string;
+    mobilePresetsContainerStyle: string;
+    mobilePresetButtonStyle: string;
+    mobileRangeDisplayStyle: string;
+    helperTextStyle: string;
+    helperTextStates: Record<DateRangePickerState, string>;
+}

package/dist/components/forms/DateRangePicker/DateRangePickerBody.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { DateRangePickerBodyProps } from "./DateRangePicker.types";
+/**
+ * DateRangePicker Body Component — dual calendars + presets sidebar + footer
+ */
+export declare const DateRangePickerBody: React.FC<DateRangePickerBodyProps>;

package/dist/components/forms/DateRangePicker/DateRangePickerBody.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useContext, useState, useEffect, useCallback, useMemo } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
+import { Calendar } from '../../core/Calendar/Calendar.js';
+import '../../core/Calendar/CalendarMini/CalendarMini.js';
+import { Button } from '../../core/Button/Button.js';
+import { cn } from '../../../utils/cn.js';
+import { DateRangePickerContext } from './DateRangePickerContext.js';
+import { DateRangePickerPresets } from './DateRangePickerPresets.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { formatDateCustom } from '../../../utils/dateUtils.js';
+import { createDropdownAnimations } from '../DatePicker/DatePicker.animations.js';
+import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useMediaQuery } from '../../../hooks/useMediaQuery.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
+
+/**
+ * DateRangePicker Body Component — dual calendars + presets sidebar + footer
+ */
+const DateRangePickerBody = ({ isOpen, className, onClose, portal = true, placement = "bottom-start", offset = 4, presets, showPresets = true, elevation, lift, }) => {
+    // Relative elevation: the popover lifts above its host surface (overlay base = 5)
+    // so a DateRangePicker inside a Popover/Modal still reads as a higher plane.
+    const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
+    const context = useContext(DateRangePickerContext);
+    if (!context) {
+        throw new Error("DateRangePickerBody must be used within a DateRangePicker");
+    }
+    const { theme, triggerRef, contentRef, selectedRange, minDate, maxDate, isDateDisabled, showToday, weekdays, months, handleRangeSelect, yearRange, } = context;
+    const hasPresets = showPresets && presets && presets.length > 0;
+    const isDarkMode = useDarkMode();
+    const isClient = useIsClient();
+    const isMobile = useMediaQuery("(max-width: 639px)");
+    // Temp range state — not committed until Apply is clicked
+    const [tempRange, setTempRange] = useState(selectedRange);
+    // Sync temp range when panel opens
+    useEffect(() => {
+        if (isOpen) {
+            setTempRange(selectedRange);
+        }
+    }, [isOpen, selectedRange]);
+    // Handle preset selection — update calendar view to show the range
+    const handlePresetSelect = useCallback((range) => {
+        if (range.start) {
+            setLeftCalendarDate(new Date(range.start.getFullYear(), range.start.getMonth(), 1));
+        }
+    }, []);
+    // Dual calendar state
+    const getInitialLeftDate = () => {
+        if (tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) {
+            return new Date(tempRange.start.getFullYear(), tempRange.start.getMonth(), 1);
+        }
+        if (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.start) {
+            return new Date(selectedRange.start.getFullYear(), selectedRange.start.getMonth(), 1);
+        }
+        return new Date();
+    };
+    const [leftCalendarDate, setLeftCalendarDate] = useState(getInitialLeftDate);
+    const rightCalendarDate = useMemo(() => {
+        const nextMonth = new Date(leftCalendarDate);
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+        return nextMonth;
+    }, [leftCalendarDate]);
+    const handleNavigatePrev = useCallback(() => {
+        setLeftCalendarDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() - 1);
+            return newDate;
+        });
+    }, []);
+    const handleNavigateNext = useCallback(() => {
+        setLeftCalendarDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() + 1);
+            return newDate;
+        });
+    }, []);
+    // Footer handlers
+    const handleApply = useCallback(() => {
+        if (tempRange) {
+            handleRangeSelect(tempRange);
+        }
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [tempRange, handleRangeSelect, onClose]);
+    const handleCancel = useCallback(() => {
+        setTempRange(selectedRange);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [selectedRange, onClose]);
+    // Format range for footer display
+    const formatRangeDisplay = (range) => {
+        if (!(range === null || range === void 0 ? void 0 : range.start) && !(range === null || range === void 0 ? void 0 : range.end))
+            return "Select start and end dates";
+        if (!range.end)
+            return `${formatDateCustom(range.start, "DD/MM/YYYY")} - ...`;
+        return `${formatDateCustom(range.start, "DD/MM/YYYY")} - ${formatDateCustom(range.end, "DD/MM/YYYY")}`;
+    };
+    // Portal positioning
+    const { position, cssVariables, contentRef: portalContentRef, isFlipped, isReady, } = useSelectPortal({
+        triggerRef,
+        isOpen: isOpen || false,
+        placement,
+        offset,
+        autoWidth: true,
+    });
+    const animations = createDropdownAnimations(isFlipped);
+    // Combine refs
+    const combinedRef = React__default.useCallback((el) => {
+        if (contentRef &&
+            typeof contentRef === "object" &&
+            "current" in contentRef) {
+            contentRef.current =
+                el;
+        }
+        if (portalContentRef &&
+            typeof portalContentRef === "object" &&
+            "current" in portalContentRef) {
+            portalContentRef.current = el;
+        }
+    }, [contentRef, portalContentRef]);
+    // Click outside to close
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            var _a;
+            const target = event.target;
+            if ((_a = target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '[role="listbox"]')) {
+                return;
+            }
+            const currentContentRef = portal
+                ? portalContentRef.current
+                : contentRef.current;
+            if (currentContentRef &&
+                !currentContentRef.contains(target) &&
+                triggerRef.current &&
+                !triggerRef.current.contains(target)) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen, onClose, triggerRef, contentRef, portalContentRef, portal]);
+    // Escape key
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [isOpen, onClose]);
+    const contentElement = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsx(motion.div, { ref: combinedRef, className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.bodyStyle, className), style: {
+                ...cssVariables,
+                ...(portal
+                    ? {
+                        top: `${position.top}px`,
+                        left: `${position.left}px`,
+                        minWidth: `${position.width}px`,
+                    }
+                    : {}),
+            }, variants: animations, initial: "initial", animate: isReady ? "visible" : "initial", exit: "exit", children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [hasPresets && presets && (jsx(DateRangePickerPresets, { presets: presets, tempRange: tempRange, setTempRange: setTempRange, onPresetSelect: handlePresetSelect })), jsxs("div", { className: "flex flex-col flex-1", children: [jsxs("div", { className: "flex flex-col sm:flex-row justify-between items-center sm:items-start gap-2 sm:gap-6 p-3 sm:p-4", children: [jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                                                setTempRange(value);
+                                            }, viewDate: leftCalendarDate, onViewDateChange: setLeftCalendarDate, onNavigatePrev: handleNavigatePrev, onNavigateNext: isMobile ? handleNavigateNext : null, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, showOtherMonthDays: false, headerMode: "static", size: "md" }) }), jsx("div", { className: "hidden sm:block flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                                                setTempRange(value);
+                                            }, viewDate: rightCalendarDate, onViewDateChange: (newDate) => {
+                                                const adjustedLeft = new Date(newDate);
+                                                adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+                                                setLeftCalendarDate(adjustedLeft);
+                                            }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, showOtherMonthDays: false, headerMode: "static", size: "md" }) })] }), jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-3 sm:px-4 py-3 border-t border-[var(--color-border)]", children: [jsx("div", { className: "text-sm text-center sm:text-left text-[var(--color-text-muted)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex w-full sm:w-auto items-center gap-2", children: [jsx(Button, { variant: "outline", color: "mono", size: "sm", className: "flex-1 sm:flex-initial", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", className: "flex-1 sm:flex-initial", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })] }) })) }));
+    if (portal && isClient) {
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body);
+    }
+    return contentElement;
+};
+DateRangePickerBody.displayName = "DateRangePicker.Body";
+
+export { DateRangePickerBody };

package/dist/components/forms/DateRangePicker/DateRangePickerContext.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { DateRangePickerState, DateRangePickerSize, DateRangePickerTheme, DateRange } from "./DateRangePicker.types";
+export interface DateRangePickerContextType {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedRange: DateRange | undefined;
+    handleRangeSelect: (range: DateRange) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    isDateDisabled?: (date: Date) => boolean;
+    showToday?: boolean;
+    weekdays?: string[];
+    months?: string[];
+    yearRange?: {
+        start: number;
+        end: number;
+    };
+    size: DateRangePickerSize;
+    state: DateRangePickerState;
+    theme: DateRangePickerTheme;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const DateRangePickerContext: React.Context<DateRangePickerContextType | undefined>;

package/dist/components/forms/DateRangePicker/DateRangePickerContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const DateRangePickerContext = createContext(undefined);
+
+export { DateRangePickerContext };

package/dist/components/forms/DateRangePicker/DateRangePickerPresets.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { DateRangePickerPresetsProps } from "./DateRangePicker.types";
+/**
+ * DateRangePicker Presets Component — shows preset buttons with checkmarks
+ */
+export declare const DateRangePickerPresets: React.FC<DateRangePickerPresetsProps>;

package/dist/components/forms/DateRangePicker/DateRangePickerPresets.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { Check } from '@phosphor-icons/react';
+import { DateRangePickerContext } from './DateRangePickerContext.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * DateRangePicker Presets Component — shows preset buttons with checkmarks
+ */
+const DateRangePickerPresets = ({ presets, className, tempRange, setTempRange, onPresetSelect, }) => {
+    const context = useContext(DateRangePickerContext);
+    if (!context) {
+        throw new Error("DateRangePickerPresets must be used within a DateRangePicker");
+    }
+    const { theme } = context;
+    const isSameDate = (d1, d2) => {
+        if (!d1 || !d2)
+            return d1 === d2;
+        return (d1.getFullYear() === d2.getFullYear() &&
+            d1.getMonth() === d2.getMonth() &&
+            d1.getDate() === d2.getDate());
+    };
+    const isPresetActive = (preset) => {
+        if (!tempRange)
+            return false;
+        const presetRange = preset.getValue();
+        return (isSameDate(tempRange.start, presetRange.start) &&
+            isSameDate(tempRange.end, presetRange.end));
+    };
+    const handlePresetClick = (preset) => {
+        const range = preset.getValue();
+        setTempRange === null || setTempRange === void 0 ? void 0 : setTempRange(range);
+        onPresetSelect === null || onPresetSelect === void 0 ? void 0 : onPresetSelect(range);
+    };
+    return (jsx("div", { className: cn(theme.presetsContainerStyle, className), children: presets.map((preset, index) => {
+            const active = isPresetActive(preset);
+            return (jsxs("button", { type: "button", onClick: () => handlePresetClick(preset), className: theme.presetButtonStyle, "data-active": active, children: [jsx("span", { children: preset.label }), active && jsx(Check, { className: theme.presetCheckmarkStyle })] }, index));
+        }) }));
+};
+
+export { DateRangePickerPresets };

package/dist/components/forms/DateRangePicker/DateRangePickerTrigger.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { DateRangePickerTriggerProps } from "./DateRangePicker.types";
+/**
+ * DateRangePicker Trigger Component — styled like form input
+ */
+export declare const DateRangePickerTrigger: React.FC<DateRangePickerTriggerProps>;

package/dist/components/forms/DateRangePicker/DateRangePickerTrigger.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { Calendar } from '@phosphor-icons/react';
+import { cn } from '../../../utils/cn.js';
+import { DateRangePickerContext } from './DateRangePickerContext.js';
+
+/**
+ * DateRangePicker Trigger Component — styled like form input
+ */
+const DateRangePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
+    var _a, _b, _c, _d;
+    const context = useContext(DateRangePickerContext);
+    if (!context) {
+        throw new Error("DateRangePickerTrigger must be used within a DateRangePicker");
+    }
+    const { theme, triggerRef } = context;
+    const baseStyle = theme.baseStyle || "";
+    const sizeStyle = ((_a = theme.triggerSizes) === null || _a === void 0 ? void 0 : _a[size]) || "";
+    const stateStyle = ((_b = theme.triggerStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
+    const hoverStateStyle = ((_c = theme.triggerHoverStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
+    const focusStateStyle = ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
+    const iconEndStyle = theme.iconEndStyle || "";
+    const iconEndPadding = theme.iconEndPadding || "";
+    const triggerButtonStyle = theme.triggerButtonStyle || "";
+    const activeFocusState = isOpen
+        ? focusStateStyle ||
+            "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
+        : "";
+    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open date range picker", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(Calendar, { className: "h-4 w-4" }) })] }) }));
+};
+
+export { DateRangePickerTrigger };

package/dist/components/forms/DateRangePicker/dateRangePresets.d.ts

@@ -0,0 +1,5 @@
+import type { DateRangePreset } from "./DateRangePicker.types";
+/**
+ * Default date range presets matching the reference design
+ */
+export declare const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[];

package/dist/components/forms/DateRangePicker/dateRangePresets.js

@@ -0,0 +1,59 @@
+import { toDate, addDays, getThisWeek, getLastWeek, getThisMonth, getLastMonth } from '../../../utils/dateUtils.js';
+
+/**
+ * Default date range presets matching the reference design
+ */
+const DEFAULT_DATE_RANGE_PRESETS = [
+    {
+        label: "Today",
+        getValue: () => {
+            const today = toDate(new Date());
+            return { start: today, end: today };
+        },
+    },
+    {
+        label: "Yesterday",
+        getValue: () => {
+            const yesterday = addDays(new Date(), -1);
+            return { start: yesterday, end: yesterday };
+        },
+    },
+    {
+        label: "This week",
+        getValue: () => getThisWeek(),
+    },
+    {
+        label: "Last week",
+        getValue: () => getLastWeek(),
+    },
+    {
+        label: "This month",
+        getValue: () => getThisMonth(),
+    },
+    {
+        label: "Last month",
+        getValue: () => getLastMonth(),
+    },
+    {
+        label: "Last 3 months",
+        getValue: () => {
+            const today = new Date();
+            today.setHours(23, 59, 59, 999);
+            const start = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());
+            start.setHours(0, 0, 0, 0);
+            return { start, end: today };
+        },
+    },
+    {
+        label: "Year to date",
+        getValue: () => {
+            const today = new Date();
+            today.setHours(23, 59, 59, 999);
+            const start = new Date(today.getFullYear(), 0, 1);
+            start.setHours(0, 0, 0, 0);
+            return { start, end: today };
+        },
+    },
+];
+
+export { DEFAULT_DATE_RANGE_PRESETS };

package/dist/components/forms/DateRangePicker/index.d.ts

@@ -0,0 +1,4 @@
+export { DateRangePicker, DateRangePickerTrigger, DateRangePickerBody, DateRangePickerPresets, } from "./DateRangePicker";
+export type { DateRangePickerProps, DateRangePickerTriggerProps, DateRangePickerBodyProps, DateRangePickerPresetsProps, DateRangePickerSize, DateRangePickerState, DateRangePickerPlacement, DateRangePickerTheme, DateRangePreset, } from "./DateRangePicker.types";
+export { dateRangePickerTheme } from "./DateRangePicker.theme";
+export { DEFAULT_DATE_RANGE_PRESETS } from "./dateRangePresets";

package/dist/components/forms/FileUpload/FileUpload.animations.d.ts

@@ -0,0 +1,29 @@
+/** Spring used for thumbnail enter and for the layout reflow when items are removed. */
+export declare const PREVIEW_LAYOUT_SPRING: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+/**
+ * Enter / exit variants for a preview thumbnail.
+ * Exit shrinks + fades so the surrounding items can flow into the gap (driven
+ * by `layout` on each item). Pair with `AnimatePresence`.
+ */
+export declare const PREVIEW_ITEM: {
+    initial: {
+        opacity: number;
+        scale: number;
+    };
+    animate: {
+        opacity: number;
+        scale: number;
+    };
+    exit: {
+        opacity: number;
+        scale: number;
+        transition: {
+            duration: number;
+        };
+    };
+};

package/dist/components/forms/FileUpload/FileUpload.animations.js

@@ -0,0 +1,19 @@
+/** Spring used for thumbnail enter and for the layout reflow when items are removed. */
+const PREVIEW_LAYOUT_SPRING = {
+    type: "spring",
+    stiffness: 500,
+    damping: 38,
+    mass: 0.8,
+};
+/**
+ * Enter / exit variants for a preview thumbnail.
+ * Exit shrinks + fades so the surrounding items can flow into the gap (driven
+ * by `layout` on each item). Pair with `AnimatePresence`.
+ */
+const PREVIEW_ITEM = {
+    initial: { opacity: 0, scale: 0.8 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.8, transition: { duration: 0.15 } },
+};
+
+export { PREVIEW_ITEM, PREVIEW_LAYOUT_SPRING };