@pagamio/frontend-commons-lib 0.8.264 → 0.8.266

package/lib/components/ui/Calendar.js

@@ -14,12 +14,12 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) =
                 nav_button_next: 'absolute right-1',
                 table: 'w-full border-collapse space-y-1',
                 head_row: 'flex',
-                head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+                head_cell: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
                 row: 'flex w-full mt-2',
-                cell: cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20', props.mode === 'range'
+                cell: cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&>button]:cursor-pointer', props.mode === 'range'
                     ? '[&:has([aria-selected].day-range-middle)]:bg-accent [&:has([aria-selected].day-range-start)]:bg-accent [&:has([aria-selected].day-range-end)]:bg-accent [&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
                     : '[&:has([aria-selected])]:rounded-md [&:has([aria-selected])]:bg-accent'),
-                day: cn(variantStyles.ghost, 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'),
+                day: cn(variantStyles.ghost, 'h-9 w-9 p-0 font-normal aria-selected:opacity-100 cursor-pointer'),
                 day_range_start: 'day-range-start',
                 day_range_end: 'day-range-end',
                 day_selected: 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',

package/lib/components/ui/DatePicker.js

@@ -2,20 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Datepicker } from 'flowbite-react';
 import { useEffect, useState } from 'react';
 function DatePicker({ value, disabled, name, onChange }) {
-    // Ensure initial value is a valid Date object
+    // Parse a date value into a valid Date or null
     const getValidDate = (date) => {
-        if (!date)
-            return new Date(); // Return current date if no date is provided
+        if (date === undefined || date === null)
+            return null;
         const parsedDate = new Date(date);
-        return Number.isNaN(parsedDate.getTime()) ? new Date() : parsedDate;
+        return Number.isNaN(parsedDate.getTime()) ? null : parsedDate;
     };
-    // Initialize selectedDate with defaultValue or current date
-    const initialDate = value === undefined ? new Date() : getValidDate(value);
-    const [selectedDate, setSelectedDate] = useState(initialDate);
+    const [selectedDate, setSelectedDate] = useState(() => getValidDate(value));
     // Update selectedDate when value prop changes
     useEffect(() => {
-        if (value === undefined)
-            return;
         setSelectedDate(getValidDate(value));
     }, [value]);
     // Initialize defaultValue for the Datepicker component
@@ -78,8 +74,7 @@ function DatePicker({ value, disabled, name, onChange }) {
             },
         },
     };
-    return (_jsx("div", { children: _jsx(Datepicker, { value: selectedDate, onChange: (date) => {
-                // Ensure we're working with a valid Date object
+    return (_jsx("div", { children: _jsx(Datepicker, { value: selectedDate ?? undefined, onChange: (date) => {
                 const validDate = date ? new Date(date) : new Date();
                 setSelectedDate(validDate);
                 if (onChange && !Number.isNaN(validDate.getTime())) {

package/lib/components/ui/DateRangePickerWithPresets.d.ts

@@ -1,11 +1,10 @@
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
 import type { DateRange } from 'react-day-picker';
 import * as React from 'react';
 export type DatePreset = {
-    /** Display label for the preset */
     label: string;
-    /** Unique identifier for the preset */
     value: string;
-    /** Function to compute the date range for this preset */
     getRange: () => DateRange;
 };
 export interface DateRangePickerWithPresetsProps {
@@ -13,8 +12,6 @@ export interface DateRangePickerWithPresetsProps {
     value?: DateRange;
     /** Callback when date range changes */
     onChange?: (range: DateRange | undefined, presetValue?: string) => void;
-    /** Custom preset options (defaults to standard presets) */
-    presets?: DatePreset[];
     /** Currently selected preset value */
     selectedPreset?: string;
     /** Placeholder text when no date is selected */
@@ -34,24 +31,7 @@ export interface DateRangePickerWithPresetsProps {
     /** Disable the picker */
     disabled?: boolean;
 }
+/** Kept for backward compatibility — consumers that imported this can still use it */
 export declare const defaultDatePresets: DatePreset[];
-/**
- * A date range picker with preset options and a dual-month calendar view.
- *
- * @example
- * ```tsx
- * const [dateRange, setDateRange] = useState<DateRange | undefined>();
- * const [preset, setPreset] = useState('last_7_days');
- *
- * <DateRangePickerWithPresets
- *   value={dateRange}
- *   selectedPreset={preset}
- *   onChange={(range, presetValue) => {
- *     setDateRange(range);
- *     if (presetValue) setPreset(presetValue);
- *   }}
- * />
- * ```
- */
 declare const DateRangePickerWithPresets: React.FC<DateRangePickerWithPresetsProps>;
 export default DateRangePickerWithPresets;

package/lib/components/ui/DateRangePickerWithPresets.js

@@ -1,174 +1,145 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { endOfDay, endOfMonth, format, startOfDay, startOfMonth, subDays, subMonths, } from 'date-fns';
+import { endOfDay, endOfMonth, endOfWeek, format, isSameDay, startOfDay, startOfMonth, startOfWeek, subDays, subMonths, } from 'date-fns';
 import { CalendarIcon, X } from 'lucide-react';
-import * as React from 'react';
-import { useMemo, useState } from 'react';
+import { DateRangePicker, createStaticRanges } from 'react-date-range';
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
+import { useEffect, useMemo, useState } from 'react';
 import { cn } from '../../helpers';
 import Button from './Button';
-import Calendar from './Calendar';
 import { Popover, PopoverContent, PopoverTrigger } from './Popover';
 // =============================================================================
-// DEFAULT PRESETS
+// PRESET DEFINITIONS (used for display text + preset detection)
 // =============================================================================
-export const defaultDatePresets = [
+const PRESET_RANGES = [
     {
         label: 'Today',
         value: 'today',
-        getRange: () => ({
-            from: startOfDay(new Date()),
-            to: endOfDay(new Date()),
-        }),
+        range: () => ({ startDate: startOfDay(new Date()), endDate: endOfDay(new Date()) }),
     },
     {
         label: 'Yesterday',
         value: 'yesterday',
-        getRange: () => ({
-            from: startOfDay(subDays(new Date(), 1)),
-            to: endOfDay(subDays(new Date(), 1)),
-        }),
+        range: () => ({ startDate: startOfDay(subDays(new Date(), 1)), endDate: endOfDay(subDays(new Date(), 1)) }),
+    },
+    {
+        label: 'This Week',
+        value: 'this_week',
+        range: () => ({ startDate: startOfWeek(new Date()), endDate: endOfWeek(new Date()) }),
     },
     {
         label: 'Last 7 Days',
         value: 'last_7_days',
-        getRange: () => ({
-            from: startOfDay(subDays(new Date(), 6)),
-            to: endOfDay(new Date()),
-        }),
+        range: () => ({ startDate: startOfDay(subDays(new Date(), 6)), endDate: endOfDay(new Date()) }),
     },
     {
         label: 'Last 30 Days',
         value: 'last_30_days',
-        getRange: () => ({
-            from: startOfDay(subDays(new Date(), 29)),
-            to: endOfDay(new Date()),
-        }),
+        range: () => ({ startDate: startOfDay(subDays(new Date(), 29)), endDate: endOfDay(new Date()) }),
     },
     {
         label: 'This Month',
         value: 'this_month',
-        getRange: () => ({
-            from: startOfMonth(new Date()),
-            to: endOfDay(new Date()),
-        }),
+        range: () => ({ startDate: startOfMonth(new Date()), endDate: endOfDay(new Date()) }),
     },
     {
         label: 'Last Month',
         value: 'last_month',
-        getRange: () => ({
-            from: startOfMonth(subMonths(new Date(), 1)),
-            to: endOfMonth(subMonths(new Date(), 1)),
-        }),
-    },
-    {
-        label: 'Custom Range',
-        value: 'custom',
-        getRange: () => ({
-            from: undefined,
-            to: undefined,
+        range: () => ({
+            startDate: startOfMonth(subMonths(new Date(), 1)),
+            endDate: endOfMonth(subMonths(new Date(), 1)),
         }),
     },
 ];
+/** Kept for backward compatibility — consumers that imported this can still use it */
+export const defaultDatePresets = PRESET_RANGES.map((p) => ({
+    label: p.label,
+    value: p.value,
+    getRange: () => {
+        const r = p.range();
+        return { from: r.startDate, to: r.endDate };
+    },
+}));
+// Build react-date-range staticRanges from our definitions
+const staticRanges = createStaticRanges(PRESET_RANGES.map((p) => ({
+    label: p.label,
+    range: p.range,
+})));
+/** Detect which preset matches a given date range */
+const detectPreset = (from, to) => {
+    for (const p of PRESET_RANGES) {
+        const r = p.range();
+        if (isSameDay(from, r.startDate) && isSameDay(to, r.endDate)) {
+            return p.value;
+        }
+    }
+    return 'custom';
+};
+// =============================================================================
+// HELPERS
+// =============================================================================
+const FALLBACK_PRIMARY = '#b45dae';
+const getPrimaryColorFromTheme = () => {
+    if (typeof window === 'undefined')
+        return FALLBACK_PRIMARY;
+    try {
+        const probe = document.createElement('span');
+        probe.style.display = 'none';
+        probe.className = 'bg-primary';
+        document.body.appendChild(probe);
+        const computedColor = window.getComputedStyle(probe).backgroundColor;
+        document.body.removeChild(probe);
+        return computedColor || FALLBACK_PRIMARY;
+    }
+    catch {
+        return FALLBACK_PRIMARY;
+    }
+};
 // =============================================================================
 // COMPONENT
 // =============================================================================
-/**
- * A date range picker with preset options and a dual-month calendar view.
- *
- * @example
- * ```tsx
- * const [dateRange, setDateRange] = useState<DateRange | undefined>();
- * const [preset, setPreset] = useState('last_7_days');
- *
- * <DateRangePickerWithPresets
- *   value={dateRange}
- *   selectedPreset={preset}
- *   onChange={(range, presetValue) => {
- *     setDateRange(range);
- *     if (presetValue) setPreset(presetValue);
- *   }}
- * />
- * ```
- */
-const DateRangePickerWithPresets = ({ value, onChange, presets = defaultDatePresets, selectedPreset = 'last_7_days', placeholder = 'Select date range', minDate, maxDate, numberOfMonths = 2, className, showClearButton = true, dateFormat = 'MM/dd/yyyy', disabled = false, }) => {
+const DateRangePickerWithPresets = ({ value, onChange, selectedPreset = 'last_7_days', placeholder = 'Select date range', minDate, maxDate, numberOfMonths = 2, className, showClearButton = true, dateFormat = 'MM/dd/yyyy', disabled = false, }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [tempRange, setTempRange] = useState(value);
-    const [tempPreset, setTempPreset] = useState(selectedPreset);
-    // Initialize temp state when popover opens
-    React.useEffect(() => {
-        if (isOpen) {
-            setTempRange(value);
-            setTempPreset(selectedPreset);
-        }
-    }, [isOpen, value, selectedPreset]);
-    // Format the display text
+    const [primaryColor, setPrimaryColor] = useState(FALLBACK_PRIMARY);
+    useEffect(() => {
+        setPrimaryColor(getPrimaryColorFromTheme());
+    }, []);
+    const rangeColors = useMemo(() => [primaryColor], [primaryColor]);
+    // Display text for the trigger button
     const displayText = useMemo(() => {
-        // Custom range with dates selected — show the formatted date range
         if (value?.from) {
             if (value.to) {
                 return `${format(value.from, dateFormat)} - ${format(value.to, dateFormat)}`;
             }
             return format(value.from, dateFormat);
         }
-        // No custom dates — show the active preset label
         if (selectedPreset && selectedPreset !== 'custom') {
-            const activePreset = presets.find((p) => p.value === selectedPreset);
-            if (activePreset)
-                return activePreset.label;
+            const match = PRESET_RANGES.find((p) => p.value === selectedPreset);
+            if (match)
+                return match.label;
         }
         return placeholder;
-    }, [value, dateFormat, placeholder, selectedPreset, presets]);
-    // Handle preset selection
-    const handlePresetSelect = (preset) => {
-        // For custom preset, preserve current selection or clear it
-        if (preset.value === 'custom') {
-            setTempPreset('custom');
-            // Keep current tempRange if it exists, otherwise undefined
-            if (!tempRange?.from && !tempRange?.to) {
-                setTempRange(undefined);
-            }
-        }
-        else {
-            // For other presets, apply immediately
-            const range = preset.getRange();
-            setTempRange(range);
-            setTempPreset(preset.value);
-            onChange?.(range, preset.value);
-            setIsOpen(false);
-        }
-    };
-    // Handle calendar selection
-    const handleCalendarSelect = (range) => {
-        setTempRange(range);
-        setTempPreset('custom'); // Switch to custom when manually selecting
-    };
-    // Handle apply
-    const handleApply = () => {
-        onChange?.(tempRange, tempPreset);
-        setIsOpen(false);
-    };
-    // Handle cancel
-    const handleCancel = () => {
-        setTempRange(value);
-        setTempPreset(selectedPreset);
-        setIsOpen(false);
+    }, [value, dateFormat, placeholder, selectedPreset]);
+    // Convert { from, to } to react-date-range format
+    const selectionRange = useMemo(() => ({
+        startDate: value?.from ?? new Date(),
+        endDate: value?.to ?? value?.from ?? new Date(),
+        key: 'selection',
+    }), [value]);
+    const handleRangeChange = (rangesByKey) => {
+        const sel = rangesByKey.selection;
+        if (!sel?.startDate)
+            return;
+        const from = startOfDay(sel.startDate);
+        const to = endOfDay(sel.endDate ?? sel.startDate);
+        const preset = detectPreset(from, to);
+        onChange?.({ from, to }, preset);
     };
-    // Handle clear from trigger button
     const handleClear = (e) => {
         e.stopPropagation();
         onChange?.(undefined, undefined);
     };
-    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", disabled: disabled, className: cn('w-auto justify-start text-left font-normal', !value && 'text-muted-foreground', className), children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: displayText }), showClearButton && value?.from && (_jsx(X, { className: "ml-2 h-4 w-4 opacity-50 hover:opacity-100 cursor-pointer", onClick: handleClear }))] }) }), _jsx(PopoverContent, { className: "w-auto p-0 bg-popover text-popover-foreground border border-border shadow-lg", align: "start", sideOffset: 8, children: _jsxs("div", { className: "flex", children: [_jsx("div", { className: "border-r border-border p-2 min-w-[140px]", children: _jsx("div", { className: "flex flex-col gap-1", children: presets.map((preset) => (_jsx(Button, { type: "button", variant: "ghost", onClick: () => handlePresetSelect(preset), className: cn('text-left px-3 py-2 text-sm rounded-md transition-colors', 'hover:bg-accent hover:text-accent-foreground', tempPreset === preset.value &&
-                                        'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'), children: preset.label }, preset.value))) }) }), tempPreset === 'custom' && (_jsxs("div", { className: "p-3", children: [_jsx(Calendar, { mode: "range", defaultMonth: tempRange?.from || new Date(), selected: tempRange, onSelect: handleCalendarSelect, numberOfMonths: numberOfMonths, disabled: (date) => {
-                                        if (minDate && date < minDate)
-                                            return true;
-                                        if (maxDate && date > maxDate)
-                                            return true;
-                                        return false;
-                                    }, initialFocus: true }), _jsxs("div", { className: "flex items-center justify-between border-t border-border pt-3 mt-3", children: [_jsx("div", { className: "text-sm text-muted-foreground", children: tempRange?.from && tempRange?.to
-                                                ? `${format(tempRange.from, dateFormat)} - ${format(tempRange.to, dateFormat)}`
-                                                : tempRange?.from
-                                                    ? format(tempRange.from, dateFormat)
-                                                    : 'Select a range' }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleApply, disabled: !tempRange?.from || !tempRange?.to, children: "Apply" })] })] })] }))] }) })] }));
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", disabled: disabled, className: cn('w-auto justify-start text-left font-normal', !value && 'text-muted-foreground', className), children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: displayText }), showClearButton && value?.from && (_jsx(X, { className: "ml-2 h-4 w-4 opacity-50 hover:opacity-100 cursor-pointer", onClick: handleClear }))] }) }), _jsx(PopoverContent, { className: "w-auto p-0 bg-popover text-popover-foreground border border-border shadow-lg", align: "start", sideOffset: 8, children: _jsx(DateRangePicker, { ranges: [selectionRange], onChange: handleRangeChange, moveRangeOnFirstSelection: false, months: numberOfMonths, direction: "horizontal", showDateDisplay: false, showPreview: true, minDate: minDate, maxDate: maxDate, rangeColors: rangeColors, staticRanges: staticRanges, inputRanges: [] }) })] }));
 };
 DateRangePickerWithPresets.displayName = 'DateRangePickerWithPresets';
 export default DateRangePickerWithPresets;

package/lib/components/ui/TimerBadge.d.ts

@@ -14,6 +14,8 @@ import * as React from 'react';
 export interface TimerBadgeProps {
     /** ISO date string or Date object marking when the timer started */
     startTime: string | Date;
+    /** ISO date string or Date object marking when the timer stopped. When set, the timer freezes at this time instead of counting up. */
+    stopTime?: string | Date | null;
     /** Minutes elapsed before turning amber (default: 15) */
     warningMinutes?: number;
     /** Minutes elapsed before turning red (default: 30) */

package/lib/components/ui/TimerBadge.js

@@ -16,9 +16,10 @@ import { cn } from '../../helpers/utils';
 // =============================================================================
 // HELPERS
 // =============================================================================
-function getElapsedSeconds(startTime) {
+function getElapsedSeconds(startTime, stopTime) {
     const start = typeof startTime === 'string' ? new Date(startTime) : startTime;
-    return Math.floor((Date.now() - start.getTime()) / 1000);
+    const end = stopTime ? (typeof stopTime === 'string' ? new Date(stopTime) : stopTime).getTime() : Date.now();
+    return Math.max(0, Math.floor((end - start.getTime()) / 1000));
 }
 function formatElapsed(totalSeconds) {
     const minutes = Math.floor(totalSeconds / 60);
@@ -28,14 +29,19 @@ function formatElapsed(totalSeconds) {
 // =============================================================================
 // COMPONENT
 // =============================================================================
-const TimerBadge = ({ startTime, warningMinutes = 15, dangerMinutes = 30, size = 'sm', className, }) => {
-    const [elapsed, setElapsed] = React.useState(() => getElapsedSeconds(startTime));
+const TimerBadge = ({ startTime, stopTime, warningMinutes = 15, dangerMinutes = 30, size = 'sm', className, }) => {
+    const isStopped = !!stopTime;
+    const [elapsed, setElapsed] = React.useState(() => getElapsedSeconds(startTime, stopTime));
     React.useEffect(() => {
+        if (isStopped) {
+            setElapsed(getElapsedSeconds(startTime, stopTime));
+            return;
+        }
         const interval = setInterval(() => {
             setElapsed(getElapsedSeconds(startTime));
         }, 1000);
         return () => clearInterval(interval);
-    }, [startTime]);
+    }, [startTime, stopTime, isStopped]);
     const minutes = elapsed / 60;
     const urgency = minutes >= dangerMinutes ? 'danger' : minutes >= warningMinutes ? 'warning' : 'safe';
     return (_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-full font-mono font-medium tabular-nums', size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm', urgency === 'safe' && 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400', urgency === 'warning' && 'bg-amber-500/15 text-amber-600 dark:text-amber-400', urgency === 'danger' && 'bg-red-500/15 text-red-600 dark:text-red-400', className), children: [_jsxs("svg", { className: cn('h-3 w-3 flex-shrink-0', size === 'md' && 'h-3.5 w-3.5'), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("polyline", { points: "12 6 12 12 16 14" })] }), formatElapsed(elapsed)] }));

package/lib/styles.css

@@ -1437,9 +1437,6 @@ video {
 .min-w-\[120px\] {
   min-width: 120px;
 }
-.min-w-\[140px\] {
-  min-width: 140px;
-}
 .min-w-\[150px\] {
   min-width: 150px;
 }
@@ -6542,6 +6539,9 @@ video {
 .\[\&\>\*\]\:last\:border-b-0:last-child>* {
   border-bottom-width: 0px;
 }
+.\[\&\>button\]\:cursor-pointer>button {
+  cursor: pointer;
+}
 .\[\&\>input\]\:h-\[36px\]>input {
   height: 36px;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.264",
+  "version": "0.8.266",
   "publishConfig": {
     "access": "public",
     "provenance": false