@pagamio/frontend-commons-lib 0.8.360 → 0.8.362

package/lib/components/ui/DateRangePickerWithPresets.js

@@ -111,7 +111,11 @@ const DateRangePickerWithPresets = ({ value, onChange, selectedPreset = 'last_7_
         setPrimaryColor(getPrimaryColorFromTheme());
     }, []);
     const rangeColors = useMemo(() => [primaryColor], [primaryColor]);
-    // Display text for the trigger button
+    // Display text for the trigger button. With no selected range we show the
+    // placeholder, NOT a preset label — a relative preset like "Last 7 Days"
+    // names a concrete range, so it must only label the trigger when a range is
+    // actually applied. `all_time` is the one preset that legitimately has no
+    // range, so it keeps its label.
     const displayText = useMemo(() => {
         if (value?.from) {
             if (value.to) {
@@ -122,11 +126,6 @@ const DateRangePickerWithPresets = ({ value, onChange, selectedPreset = 'last_7_
         if (selectedPreset === ALL_TIME_PRESET_VALUE) {
             return ALL_TIME_PRESET_LABEL;
         }
-        if (selectedPreset && selectedPreset !== 'custom') {
-            const match = PRESET_RANGES.find((p) => p.value === selectedPreset);
-            if (match)
-                return match.label;
-        }
         return placeholder;
     }, [value, dateFormat, placeholder, selectedPreset]);
     // Convert { from, to } to react-date-range format

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+/** A single day rendered in the grid. `inMonth` is false for leading/trailing days. */
+export interface MonthCalendarDay {
+    date: Date;
+    /** YYYY-MM-DD, handy as a map key for consumer data. */
+    key: string;
+    inMonth: boolean;
+    isToday: boolean;
+}
+export interface MonthCalendarProps {
+    /** Any date within the month to display. Controlled. */
+    month: Date;
+    /** Fired when the user pages to a previous/next month. */
+    onMonthChange?: (next: Date) => void;
+    /**
+     * Render the contents of a single day cell — typically a number plus any
+     * badges/metrics the consumer wants. The cell chrome (border, today ring,
+     * out-of-month dimming) is handled here.
+     */
+    renderDay?: (day: MonthCalendarDay) => React.ReactNode;
+    /** Optional click handler per day. */
+    onDayClick?: (day: MonthCalendarDay) => void;
+    className?: string;
+    /** Hide the built-in month header + nav (e.g. when the parent supplies its own). */
+    hideHeader?: boolean;
+}
+/**
+ * A generic month-grid calendar (Sunday-first) with a render-prop for day
+ * cell contents — for dashboards, attendance, schedules, etc. Distinct from
+ * the date-picker `Calendar`: this one is for *displaying* data across a
+ * month, not selecting a date.
+ *
+ * The grid always renders 6 weeks (42 cells) so its height is stable as the
+ * user pages between months. Out-of-month days are dimmed.
+ */
+export declare function MonthCalendar({ month, onMonthChange, renderDay, onDayClick, className, hideHeader, }: MonthCalendarProps): import("react/jsx-runtime").JSX.Element;
+export default MonthCalendar;

package/lib/components/ui/MonthCalendar.js

@@ -0,0 +1,63 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { HiChevronLeft, HiChevronRight } from 'react-icons/hi';
+import * as React from 'react';
+import { cn } from '../../helpers/utils';
+import IconButton from './IconButton';
+const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const MONTH_LABELS = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+const toKey = (d) => {
+    const y = d.getFullYear();
+    const m = `${d.getMonth() + 1}`.padStart(2, '0');
+    const day = `${d.getDate()}`.padStart(2, '0');
+    return `${y}-${m}-${day}`;
+};
+/**
+ * A generic month-grid calendar (Sunday-first) with a render-prop for day
+ * cell contents — for dashboards, attendance, schedules, etc. Distinct from
+ * the date-picker `Calendar`: this one is for *displaying* data across a
+ * month, not selecting a date.
+ *
+ * The grid always renders 6 weeks (42 cells) so its height is stable as the
+ * user pages between months. Out-of-month days are dimmed.
+ */
+export function MonthCalendar({ month, onMonthChange, renderDay, onDayClick, className, hideHeader = false, }) {
+    // Stable "today" key so the day grid memo doesn't recompute every render.
+    const todayKey = toKey(new Date());
+    const days = React.useMemo(() => {
+        const firstOfMonth = new Date(month.getFullYear(), month.getMonth(), 1);
+        // Back up to the Sunday on or before the 1st.
+        const gridStart = new Date(firstOfMonth);
+        gridStart.setDate(firstOfMonth.getDate() - firstOfMonth.getDay());
+        return Array.from({ length: 42 }, (_, i) => {
+            const date = new Date(gridStart);
+            date.setDate(gridStart.getDate() + i);
+            const key = toKey(date);
+            return {
+                date,
+                key,
+                inMonth: date.getMonth() === month.getMonth(),
+                isToday: key === todayKey,
+            };
+        });
+    }, [month, todayKey]);
+    const goToMonth = (offset) => {
+        if (!onMonthChange)
+            return;
+        onMonthChange(new Date(month.getFullYear(), month.getMonth() + offset, 1));
+    };
+    return (_jsxs("div", { className: cn('rounded-lg border border-border bg-background', className), children: [!hideHeader && (_jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [_jsxs("h3", { className: "text-sm font-semibold text-foreground", children: [MONTH_LABELS[month.getMonth()], " ", month.getFullYear()] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(IconButton, { icon: HiChevronLeft, label: "Previous month", variant: "outline", size: "sm", onClick: () => goToMonth(-1) }), _jsx(IconButton, { icon: HiChevronRight, label: "Next month", variant: "outline", size: "sm", onClick: () => goToMonth(1) })] })] })), _jsx("div", { className: "grid grid-cols-7 border-b border-border", children: WEEKDAY_LABELS.map((label) => (_jsx("div", { className: "px-2 py-2 text-center text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }, label))) }), _jsx("div", { className: "grid grid-cols-7", children: days.map((day) => (_jsxs("div", { onClick: onDayClick ? () => onDayClick(day) : undefined, className: cn('min-h-[88px] border-b border-r border-border p-1.5 last:border-r-0', !day.inMonth && 'bg-muted/30 text-muted-foreground', onDayClick && 'cursor-pointer hover:bg-muted/40'), children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("span", { className: cn('inline-flex h-6 w-6 items-center justify-center rounded-full text-xs', day.isToday && 'bg-primary font-semibold text-primary-foreground', !day.isToday && !day.inMonth && 'text-muted-foreground', !day.isToday && day.inMonth && 'text-foreground'), children: day.date.getDate() }) }), renderDay && day.inMonth ? _jsx("div", { className: "mt-1", children: renderDay(day) }) : null] }, day.key))) })] }));
+}
+export default MonthCalendar;

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

@@ -15,6 +15,7 @@ export * from './Sheet';
 export { default as AvatorIcon } from './AvatarIcon';
 export { default as Button, ButtonGroup, type ButtonVariant, type ButtonSize, variantStyles } from './Button';
 export { default as Calendar } from './Calendar';
+export { MonthCalendar, default as MonthCalendarDefault, type MonthCalendarProps, type MonthCalendarDay, } from './MonthCalendar';
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './Card';
 export { default as LegacyCard } from './LegacyCard';
 export { Skeleton, SkeletonText, SkeletonCircle, SkeletonCard, SkeletonAvatar, SkeletonChart, SkeletonStatCard, } from './Skeleton';

package/lib/components/ui/index.js

@@ -14,6 +14,7 @@ export * from './Sheet';
 export { default as AvatorIcon } from './AvatarIcon';
 export { default as Button, ButtonGroup, variantStyles } from './Button';
 export { default as Calendar } from './Calendar';
+export { MonthCalendar, default as MonthCalendarDefault, } from './MonthCalendar';
 // Card - v2 shadcn-style primitives (composable)
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './Card';
 // LegacyCard - v1 Card for backward compatibility

package/lib/styles.css

@@ -1336,6 +1336,9 @@ video {
 .min-h-\[60px\] {
   min-height: 60px;
 }
+.min-h-\[88px\] {
+  min-height: 88px;
+}
 .min-h-\[calc\(100vh-5rem\)\] {
   min-height: calc(100vh - 5rem);
 }
@@ -4237,6 +4240,9 @@ video {
 .last\:border-0:last-child {
   border-width: 0px;
 }
+.last\:border-r-0:last-child {
+  border-right-width: 0px;
+}
 .odd\:bg-white:nth-child(odd) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -4425,6 +4431,9 @@ video {
 .hover\:bg-muted:hover {
   background-color: hsl(var(--muted));
 }
+.hover\:bg-muted\/40:hover {
+  background-color: hsl(var(--muted) / 0.4);
+}
 .hover\:bg-pink-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(250 209 232 / var(--tw-bg-opacity, 1));

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.360",
+  "version": "0.8.362",
   "publishConfig": {
     "access": "public",
     "provenance": false