@flipdish/ui-library 0.30.0 → 0.31.1

package/dist/components/organisms/Calendar/components/CalendarWeekView.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var date = require('@internationalized/date');
+var React = require('react');
+var calendar_utils = require('../calendar.utils.cjs');
+var CalendarColumnHeader = require('./CalendarColumnHeader.cjs');
+var CalendarRowLabel = require('./CalendarRowLabel.cjs');
+var CalendarTimeMarker = require('./CalendarTimeMarker.cjs');
+var CalendarWeekViewDay = require('./CalendarWeekViewDay.cjs');
+
+const WeekView = ({ currentMonthDate, selectedDate, zonedEvents, locale, timeZone, currentTime, setSelectedDate, shortWeekdayFormatter, timeFormatter, hourOnlyFormatter, className, view, }) => {
+    const currentWeekStart = date.startOfWeek(currentMonthDate, locale);
+    const currentWeekEnd = date.endOfWeek(currentMonthDate, locale);
+    const localCurrentTime = currentTime;
+    const scrollContainerRef = React.useRef(null);
+    const formatTime = (dateTime) => timeFormatter.format(dateTime.toDate());
+    const showTimeMarker = localCurrentTime.compare(date.toZoned(currentWeekStart, timeZone)) >= 0 &&
+        localCurrentTime.compare(date.toZoned(currentWeekEnd, timeZone).add({ days: 1 })) < 0;
+    const days = [];
+    let dayIterator = currentWeekStart;
+    while (dayIterator.compare(currentWeekEnd) <= 0) {
+        days.push(dayIterator);
+        dayIterator = dayIterator.add({ days: 1 });
+    }
+    const hours = Array.from({ length: 24 }, (_, i) => i);
+    let timeMarkerTop = 0;
+    if (showTimeMarker) {
+        const startOfVisibleDay = calendar_utils.getStartOfDay(localCurrentTime, timeZone);
+        const minutesFromTop = localCurrentTime.hour * 60 + localCurrentTime.minute - (startOfVisibleDay.hour * 60 + startOfVisibleDay.minute);
+        timeMarkerTop = (minutesFromTop / 30) * calendar_utils.SLOT_HEIGHT;
+    }
+    const visibleEvents = zonedEvents.filter((event) => {
+        const eventStartDay = date.toCalendarDate(event.start);
+        const eventEndDay = date.toCalendarDate(event.end);
+        return eventStartDay.compare(currentWeekEnd) <= 0 && eventEndDay.compare(currentWeekStart) >= 0;
+    });
+    const earliestEventTimeInWeek = React.useMemo(() => {
+        if (visibleEvents.length === 0) {
+            // No events: default the scroll target to 8 AM.
+            return date.toZoned(currentWeekStart, timeZone).set({ hour: 8 });
+        }
+        return visibleEvents.reduce((earliest, current) => {
+            return current.start.compare(earliest.start) < 0 ? current : earliest;
+        }).start;
+    }, [visibleEvents, currentWeekStart, timeZone]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to include currentMonthDate in the dependency array to recalculate the earliest event time when the week changes
+    React.useLayoutEffect(() => {
+        if (view === 'week' && scrollContainerRef.current && earliestEventTimeInWeek) {
+            const startMinutes = earliestEventTimeInWeek.hour * 60 + earliestEventTimeInWeek.minute;
+            let targetScrollTop = Math.max(0, (startMinutes / 30) * calendar_utils.SLOT_HEIGHT);
+            // One slot of breathing room above the first event.
+            targetScrollTop = Math.max(0, targetScrollTop - calendar_utils.SLOT_HEIGHT);
+            if (scrollContainerRef.current) {
+                scrollContainerRef.current.scrollTop = targetScrollTop;
+            }
+        }
+    }, [view, earliestEventTimeInWeek, currentMonthDate]);
+    return (jsxRuntime.jsxs("div", { className: cx.cx('flex flex-1 flex-col overflow-auto', className), children: [jsxRuntime.jsx("div", { className: "sticky top-0 z-10 grid grid-cols-7 bg-primary pl-18 shadow-sm dark:border-b dark:border-secondary", children: days.map((day) => {
+                    const isTodayFlag = date.isToday(day, timeZone);
+                    const dayToHighlight = selectedDate && day.compare(currentWeekStart) >= 0 && day.compare(currentWeekEnd) <= 0 ? selectedDate : currentWeekStart;
+                    const isSelectedFlag = date.isSameDay(day, dayToHighlight);
+                    const weekDayShort = shortWeekdayFormatter.format(day.toDate(timeZone));
+                    return (jsxRuntime.jsx(CalendarColumnHeader.CalendarColumnHeader, { onClick: () => setSelectedDate(day), weekDay: weekDayShort, day: day.day, state: isSelectedFlag ? 'selected' : isTodayFlag ? 'current' : 'default', className: "cursor-pointer first:before:-left-px first:before:border-l" }, `mobile-header-${day.toString()}`));
+                }) }), jsxRuntime.jsxs("div", { ref: scrollContainerRef, tabIndex: 0, className: "relative flex flex-1 overflow-y-auto", children: [jsxRuntime.jsx("div", { className: "flex h-max w-18 flex-col border-r border-secondary", children: hours.map((hour) => {
+                            const time = new date.CalendarDateTime(currentWeekStart.year, currentWeekStart.month, currentWeekStart.day, hour);
+                            const timeString = hourOnlyFormatter.format(date.toZoned(time, timeZone).toDate());
+                            return jsxRuntime.jsx(CalendarRowLabel.CalendarRowLabel, { children: timeString }, `time-${hour}`);
+                        }) }), jsxRuntime.jsx("div", { className: "grid flex-1 grid-cols-7", children: days.map((day, index) => {
+                            const isLastDay = index === days.length - 1;
+                            return (jsxRuntime.jsx(CalendarWeekViewDay.WeekViewDay, { day: day, isLastDay: isLastDay, visibleEvents: visibleEvents, timeZone: timeZone, slotHeight: calendar_utils.SLOT_HEIGHT, setSelectedDate: setSelectedDate, timeFormatter: timeFormatter }, day.toString()));
+                        }) }), showTimeMarker && jsxRuntime.jsx(CalendarTimeMarker.CalendarTimeMarker, { style: { top: `${timeMarkerTop}px` }, children: formatTime(localCurrentTime) })] })] }));
+};
+
+exports.WeekView = WeekView;
+//# sourceMappingURL=CalendarWeekView.cjs.map

package/dist/components/organisms/Calendar/components/CalendarWeekView.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeekView.cjs","sources":["../../../../../src/components/organisms/Calendar/components/CalendarWeekView.tsx"],"sourcesContent":[null],"names":["startOfWeek","endOfWeek","useRef","toZoned","getStartOfDay","SLOT_HEIGHT","toCalendarDate","useMemo","useLayoutEffect","_jsxs","cx","_jsx","isDateToday","isSameDay","CalendarColumnHeader","CalendarDateTime","CalendarRowLabel","WeekViewDay","CalendarTimeMarker"],"mappings":"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"}

package/dist/components/organisms/Calendar/components/CalendarWeekView.d.ts

@@ -0,0 +1,20 @@
+import { type CalendarDate, type ZonedDateTime } from '@internationalized/date';
+import type { DateFormatter } from '@react-aria/i18n';
+import { type ZonedEvent } from '../calendar.utils';
+interface WeekViewProps {
+    currentMonthDate: CalendarDate;
+    selectedDate: CalendarDate | null;
+    zonedEvents: ZonedEvent[];
+    locale: string;
+    timeZone: string;
+    currentTime: ZonedDateTime;
+    setSelectedDate: (date: CalendarDate | null) => void;
+    shortWeekdayFormatter: DateFormatter;
+    timeFormatter: DateFormatter;
+    hourOnlyFormatter: DateFormatter;
+    className?: string;
+    view?: string;
+}
+export declare const WeekView: ({ currentMonthDate, selectedDate, zonedEvents, locale, timeZone, currentTime, setSelectedDate, shortWeekdayFormatter, timeFormatter, hourOnlyFormatter, className, view, }: WeekViewProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CalendarWeekView.d.ts.map

package/dist/components/organisms/Calendar/components/CalendarWeekView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeekView.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Calendar/components/CalendarWeekView.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,YAAY,EAQjB,KAAK,aAAa,EACnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAA8B,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAMhF,UAAU,aAAa;IACrB,gBAAgB,EAAE,YAAY,CAAC;IAC/B,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,aAAa,CAAC;IAC3B,eAAe,EAAE,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,qBAAqB,EAAE,aAAa,CAAC;IACrC,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,aAAa,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,QAAQ,GAAI,4KAatB,aAAa,gCAuHf,CAAC"}

package/dist/components/organisms/Calendar/components/CalendarWeekView.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { startOfWeek, endOfWeek, toZoned, toCalendarDate, isToday, isSameDay, CalendarDateTime } from '@internationalized/date';
+import { useRef, useMemo, useLayoutEffect } from 'react';
+import { getStartOfDay, SLOT_HEIGHT } from '../calendar.utils.js';
+import { CalendarColumnHeader } from './CalendarColumnHeader.js';
+import { CalendarRowLabel } from './CalendarRowLabel.js';
+import { CalendarTimeMarker } from './CalendarTimeMarker.js';
+import { WeekViewDay } from './CalendarWeekViewDay.js';
+
+const WeekView = ({ currentMonthDate, selectedDate, zonedEvents, locale, timeZone, currentTime, setSelectedDate, shortWeekdayFormatter, timeFormatter, hourOnlyFormatter, className, view, }) => {
+    const currentWeekStart = startOfWeek(currentMonthDate, locale);
+    const currentWeekEnd = endOfWeek(currentMonthDate, locale);
+    const localCurrentTime = currentTime;
+    const scrollContainerRef = useRef(null);
+    const formatTime = (dateTime) => timeFormatter.format(dateTime.toDate());
+    const showTimeMarker = localCurrentTime.compare(toZoned(currentWeekStart, timeZone)) >= 0 &&
+        localCurrentTime.compare(toZoned(currentWeekEnd, timeZone).add({ days: 1 })) < 0;
+    const days = [];
+    let dayIterator = currentWeekStart;
+    while (dayIterator.compare(currentWeekEnd) <= 0) {
+        days.push(dayIterator);
+        dayIterator = dayIterator.add({ days: 1 });
+    }
+    const hours = Array.from({ length: 24 }, (_, i) => i);
+    let timeMarkerTop = 0;
+    if (showTimeMarker) {
+        const startOfVisibleDay = getStartOfDay(localCurrentTime, timeZone);
+        const minutesFromTop = localCurrentTime.hour * 60 + localCurrentTime.minute - (startOfVisibleDay.hour * 60 + startOfVisibleDay.minute);
+        timeMarkerTop = (minutesFromTop / 30) * SLOT_HEIGHT;
+    }
+    const visibleEvents = zonedEvents.filter((event) => {
+        const eventStartDay = toCalendarDate(event.start);
+        const eventEndDay = toCalendarDate(event.end);
+        return eventStartDay.compare(currentWeekEnd) <= 0 && eventEndDay.compare(currentWeekStart) >= 0;
+    });
+    const earliestEventTimeInWeek = useMemo(() => {
+        if (visibleEvents.length === 0) {
+            // No events: default the scroll target to 8 AM.
+            return toZoned(currentWeekStart, timeZone).set({ hour: 8 });
+        }
+        return visibleEvents.reduce((earliest, current) => {
+            return current.start.compare(earliest.start) < 0 ? current : earliest;
+        }).start;
+    }, [visibleEvents, currentWeekStart, timeZone]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to include currentMonthDate in the dependency array to recalculate the earliest event time when the week changes
+    useLayoutEffect(() => {
+        if (view === 'week' && scrollContainerRef.current && earliestEventTimeInWeek) {
+            const startMinutes = earliestEventTimeInWeek.hour * 60 + earliestEventTimeInWeek.minute;
+            let targetScrollTop = Math.max(0, (startMinutes / 30) * SLOT_HEIGHT);
+            // One slot of breathing room above the first event.
+            targetScrollTop = Math.max(0, targetScrollTop - SLOT_HEIGHT);
+            if (scrollContainerRef.current) {
+                scrollContainerRef.current.scrollTop = targetScrollTop;
+            }
+        }
+    }, [view, earliestEventTimeInWeek, currentMonthDate]);
+    return (jsxs("div", { className: cx('flex flex-1 flex-col overflow-auto', className), children: [jsx("div", { className: "sticky top-0 z-10 grid grid-cols-7 bg-primary pl-18 shadow-sm dark:border-b dark:border-secondary", children: days.map((day) => {
+                    const isTodayFlag = isToday(day, timeZone);
+                    const dayToHighlight = selectedDate && day.compare(currentWeekStart) >= 0 && day.compare(currentWeekEnd) <= 0 ? selectedDate : currentWeekStart;
+                    const isSelectedFlag = isSameDay(day, dayToHighlight);
+                    const weekDayShort = shortWeekdayFormatter.format(day.toDate(timeZone));
+                    return (jsx(CalendarColumnHeader, { onClick: () => setSelectedDate(day), weekDay: weekDayShort, day: day.day, state: isSelectedFlag ? 'selected' : isTodayFlag ? 'current' : 'default', className: "cursor-pointer first:before:-left-px first:before:border-l" }, `mobile-header-${day.toString()}`));
+                }) }), jsxs("div", { ref: scrollContainerRef, tabIndex: 0, className: "relative flex flex-1 overflow-y-auto", children: [jsx("div", { className: "flex h-max w-18 flex-col border-r border-secondary", children: hours.map((hour) => {
+                            const time = new CalendarDateTime(currentWeekStart.year, currentWeekStart.month, currentWeekStart.day, hour);
+                            const timeString = hourOnlyFormatter.format(toZoned(time, timeZone).toDate());
+                            return jsx(CalendarRowLabel, { children: timeString }, `time-${hour}`);
+                        }) }), jsx("div", { className: "grid flex-1 grid-cols-7", children: days.map((day, index) => {
+                            const isLastDay = index === days.length - 1;
+                            return (jsx(WeekViewDay, { day: day, isLastDay: isLastDay, visibleEvents: visibleEvents, timeZone: timeZone, slotHeight: SLOT_HEIGHT, setSelectedDate: setSelectedDate, timeFormatter: timeFormatter }, day.toString()));
+                        }) }), showTimeMarker && jsx(CalendarTimeMarker, { style: { top: `${timeMarkerTop}px` }, children: formatTime(localCurrentTime) })] })] }));
+};
+
+export { WeekView };
+//# sourceMappingURL=CalendarWeekView.js.map

package/dist/components/organisms/Calendar/components/CalendarWeekView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeekView.js","sources":["../../../../../src/components/organisms/Calendar/components/CalendarWeekView.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","isDateToday"],"mappings":"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"}

package/dist/components/organisms/Calendar/components/CalendarWeekViewDay.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var React = require('react');
+var calendar_utils = require('../calendar.utils.cjs');
+var CalendarDwViewCell = require('./CalendarDwViewCell.cjs');
+var CalendarPositionedEvent = require('./CalendarPositionedEvent.cjs');
+
+const WeekViewDay = ({ day, isLastDay, visibleEvents, timeZone, slotHeight, setSelectedDate, timeFormatter }) => {
+    const dateKey = day.toString();
+    const dayEvents = React.useMemo(() => calendar_utils.getEventsForDay(visibleEvents, day, timeZone), [visibleEvents, day, timeZone]);
+    const dayStart = React.useMemo(() => calendar_utils.getStartOfDay(day, timeZone), [day, timeZone]);
+    return (jsxRuntime.jsx("div", { className: "flex flex-col border-secondary", children: jsxRuntime.jsxs("div", { className: "relative flex-1 bg-primary", style: { minHeight: `${48 * slotHeight}px` }, children: [Array.from({ length: 48 }).map((_, slotIndex) => (jsxRuntime.jsx(CalendarDwViewCell.CalendarDwViewCell
+                // biome-ignore lint/suspicious/noArrayIndexKey: fixed 48 half-hour slots — the index is a stable slot position
+                , { className: cx.cx('last:before:border-b-0', isLastDay && 'before:border-r-0') }, `slot-${dateKey}-${slotIndex}`))), dayEvents.map((event, index) => {
+                    const overlapIndex = dayEvents.filter((e, i) => i < index && event.start.compare(e.end) < 0 && event.end.compare(e.start) > 0).length;
+                    return (jsxRuntime.jsx(CalendarPositionedEvent.PositionedEvent, { event: event, dayStart: dayStart, timeZone: timeZone, slotHeight: slotHeight, overlapIndex: overlapIndex, setSelectedDate: setSelectedDate, timeFormatter: timeFormatter }, event.id));
+                })] }) }));
+};
+
+exports.WeekViewDay = WeekViewDay;
+//# sourceMappingURL=CalendarWeekViewDay.cjs.map

package/dist/components/organisms/Calendar/components/CalendarWeekViewDay.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeekViewDay.cjs","sources":["../../../../../src/components/organisms/Calendar/components/CalendarWeekViewDay.tsx"],"sourcesContent":[null],"names":["useMemo","getEventsForDay","getStartOfDay","_jsx","_jsxs","CalendarDwViewCell","cx","PositionedEvent"],"mappings":";;;;;;;;;MAoBa,WAAW,GAAG,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAoB,KAAI;AACvI,IAAA,MAAM,OAAO,GAAG,GAAG,CAAC,QAAQ,EAAE;IAC9B,MAAM,SAAS,GAAGA,aAAO,CAAC,MAAMC,8BAAe,CAAC,aAAa,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;IAC9G,MAAM,QAAQ,GAAGD,aAAO,CAAC,MAAME,4BAAa,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAE7E,QACEC,wBAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAC7CC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,UAAU,CAAA,EAAA,CAAI,EAAE,aACrF,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,SAAS,MAC3CD,cAAA,CAACE;;AAGC,kBAAA,EAAA,SAAS,EAAEC,KAAE,CAAC,wBAAwB,EAAE,SAAS,IAAI,mBAAmB,CAAC,EAAA,EADpE,CAAA,KAAA,EAAQ,OAAO,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,CAEnC,CACH,CAAC,EAED,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;oBAC9B,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;AAErI,oBAAA,QACEH,cAAA,CAACI,uCAAe,EAAA,EAEd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAAA,EAPvB,KAAK,CAAC,EAAE,CAQb;AAEN,gBAAA,CAAC,CAAC,CAAA,EAAA,CACE,EAAA,CACF;AAEV;;;;"}

package/dist/components/organisms/Calendar/components/CalendarWeekViewDay.d.ts

@@ -0,0 +1,15 @@
+import type { CalendarDate } from '@internationalized/date';
+import type { DateFormatter } from '@react-aria/i18n';
+import { type ZonedEvent } from '../calendar.utils';
+interface WeekViewDayProps {
+    day: CalendarDate;
+    isLastDay: boolean;
+    visibleEvents: ZonedEvent[];
+    timeZone: string;
+    slotHeight: number;
+    setSelectedDate: (date: CalendarDate | null) => void;
+    timeFormatter: DateFormatter;
+}
+export declare const WeekViewDay: ({ day, isLastDay, visibleEvents, timeZone, slotHeight, setSelectedDate, timeFormatter }: WeekViewDayProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CalendarWeekViewDay.d.ts.map

package/dist/components/organisms/Calendar/components/CalendarWeekViewDay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeekViewDay.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Calendar/components/CalendarWeekViewDay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAkC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAIpF,UAAU,gBAAgB;IACxB,GAAG,EAAE,YAAY,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,GAAI,yFAAyF,gBAAgB,gCAmCpI,CAAC"}

package/dist/components/organisms/Calendar/components/CalendarWeekViewDay.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useMemo } from 'react';
+import { getEventsForDay, getStartOfDay } from '../calendar.utils.js';
+import { CalendarDwViewCell } from './CalendarDwViewCell.js';
+import { PositionedEvent } from './CalendarPositionedEvent.js';
+
+const WeekViewDay = ({ day, isLastDay, visibleEvents, timeZone, slotHeight, setSelectedDate, timeFormatter }) => {
+    const dateKey = day.toString();
+    const dayEvents = useMemo(() => getEventsForDay(visibleEvents, day, timeZone), [visibleEvents, day, timeZone]);
+    const dayStart = useMemo(() => getStartOfDay(day, timeZone), [day, timeZone]);
+    return (jsx("div", { className: "flex flex-col border-secondary", children: jsxs("div", { className: "relative flex-1 bg-primary", style: { minHeight: `${48 * slotHeight}px` }, children: [Array.from({ length: 48 }).map((_, slotIndex) => (jsx(CalendarDwViewCell
+                // biome-ignore lint/suspicious/noArrayIndexKey: fixed 48 half-hour slots — the index is a stable slot position
+                , { className: cx('last:before:border-b-0', isLastDay && 'before:border-r-0') }, `slot-${dateKey}-${slotIndex}`))), dayEvents.map((event, index) => {
+                    const overlapIndex = dayEvents.filter((e, i) => i < index && event.start.compare(e.end) < 0 && event.end.compare(e.start) > 0).length;
+                    return (jsx(PositionedEvent, { event: event, dayStart: dayStart, timeZone: timeZone, slotHeight: slotHeight, overlapIndex: overlapIndex, setSelectedDate: setSelectedDate, timeFormatter: timeFormatter }, event.id));
+                })] }) }));
+};
+
+export { WeekViewDay };
+//# sourceMappingURL=CalendarWeekViewDay.js.map

package/dist/components/organisms/Calendar/components/CalendarWeekViewDay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeekViewDay.js","sources":["../../../../../src/components/organisms/Calendar/components/CalendarWeekViewDay.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;;MAoBa,WAAW,GAAG,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAoB,KAAI;AACvI,IAAA,MAAM,OAAO,GAAG,GAAG,CAAC,QAAQ,EAAE;IAC9B,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,eAAe,CAAC,aAAa,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;IAC9G,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,aAAa,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAE7E,QACEA,aAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAC7CC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,UAAU,CAAA,EAAA,CAAI,EAAE,aACrF,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,SAAS,MAC3CD,GAAA,CAAC;;AAGC,kBAAA,EAAA,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,IAAI,mBAAmB,CAAC,EAAA,EADpE,CAAA,KAAA,EAAQ,OAAO,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,CAEnC,CACH,CAAC,EAED,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;oBAC9B,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;AAErI,oBAAA,QACEA,GAAA,CAAC,eAAe,EAAA,EAEd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAAA,EAPvB,KAAK,CAAC,EAAE,CAQb;AAEN,gBAAA,CAAC,CAAC,CAAA,EAAA,CACE,EAAA,CACF;AAEV;;;;"}

package/dist/components/organisms/Calendar/index.cjs

@@ -6,10 +6,10 @@ var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 var date = require('@internationalized/date');
 var i18n = require('@react-aria/i18n');
 var React = require('react');
-var calendarDayView = require('./components/calendar-day-view.cjs');
-var calendarHeader = require('./components/calendar-header.cjs');
-var calendarMonthView = require('./components/calendar-month-view.cjs');
-var calendarWeekView = require('./components/calendar-week-view.cjs');
+var CalendarDayView = require('./components/CalendarDayView.cjs');
+var CalendarHeader = require('./components/CalendarHeader.cjs');
+var CalendarMonthView = require('./components/CalendarMonthView.cjs');
+var CalendarWeekView = require('./components/CalendarWeekView.cjs');
 
 const viewOptions = [
     { value: 'day', label: 'Day view' },
@@ -88,7 +88,7 @@ const Calendar = ({ events, view: defaultView = 'month', className, 'data-testid
     const dayToDisplay = selectedDate || currentMonthDate;
     if (!isMounted)
         return null;
-    return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsxs("div", { role: "application", "aria-label": "Calendar", "data-testid": rootTestId, className: cx.cx('flex flex-col overflow-hidden rounded-xl bg-primary shadow-xs ring ring-secondary', view === 'month' ? 'h-full md:min-h-[912px]' : 'h-[912px]', className), children: [jsxRuntime.jsx(calendarHeader.CalendarHeader, { date: headerDate, selectedView: view, onSelectionChange: setView, viewOptions: viewOptions, onClickPrev: () => handleNavigate('PREV'), onClickNext: () => handleNavigate('NEXT'), onClickToday: () => handleNavigate('TODAY') }), jsxRuntime.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [view === 'month' && (jsxRuntime.jsx(calendarMonthView.MonthView, { currentMonthDate: currentMonthDate, selectedDate: selectedDate, zonedEvents: zonedEvents, locale: locale, timeZone: timeZone, setSelectedDate: setSelectedDate, fullDateFormatter: fullDateFormatter, shortWeekdayFormatter: shortWeekdayFormatter, timeFormatter: timeFormatter })), view === 'week' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(calendarDayView.DayView, { dayToDisplay: dayToDisplay, selectedDate: selectedDate, zonedEvents: zonedEvents, locale: locale, timeZone: timeZone, currentTime: currentTime, setSelectedDate: setSelectedDate, shortWeekdayFormatter: shortWeekdayFormatter, timeFormatter: timeFormatter, hourOnlyFormatter: hourOnlyFormatter, view: view, className: "md:hidden" }), jsxRuntime.jsx(calendarWeekView.WeekView, { currentMonthDate: currentMonthDate, selectedDate: selectedDate, zonedEvents: zonedEvents, locale: locale, timeZone: timeZone, currentTime: currentTime, setSelectedDate: setSelectedDate, shortWeekdayFormatter: shortWeekdayFormatter, timeFormatter: timeFormatter, hourOnlyFormatter: hourOnlyFormatter, view: view, className: "max-md:hidden" })] })), view === 'day' && (jsxRuntime.jsx(calendarDayView.DayView, { dayToDisplay: dayToDisplay, selectedDate: selectedDate, zonedEvents: zonedEvents, locale: locale, timeZone: timeZone, currentTime: currentTime, setSelectedDate: setSelectedDate, shortWeekdayFormatter: shortWeekdayFormatter, timeFormatter: timeFormatter, hourOnlyFormatter: hourOnlyFormatter, view: view }))] })] }) }));
+    return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsxs("div", { role: "application", "aria-label": "Calendar", "data-testid": rootTestId, className: cx.cx('flex flex-col overflow-hidden rounded-xl bg-primary shadow-xs ring ring-secondary', view === 'month' ? 'h-full md:min-h-[912px]' : 'h-[912px]', className), children: [jsxRuntime.jsx(CalendarHeader.CalendarHeader, { date: headerDate, selectedView: view, onSelectionChange: setView, viewOptions: viewOptions, onClickPrev: () => handleNavigate('PREV'), onClickNext: () => handleNavigate('NEXT'), onClickToday: () => handleNavigate('TODAY') }), jsxRuntime.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [view === 'month' && (jsxRuntime.jsx(CalendarMonthView.MonthView, { currentMonthDate: currentMonthDate, selectedDate: selectedDate, zonedEvents: zonedEvents, locale: locale, timeZone: timeZone, setSelectedDate: setSelectedDate, fullDateFormatter: fullDateFormatter, shortWeekdayFormatter: shortWeekdayFormatter, timeFormatter: timeFormatter })), view === 'week' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CalendarDayView.DayView, { dayToDisplay: dayToDisplay, selectedDate: selectedDate, zonedEvents: zonedEvents, locale: locale, timeZone: timeZone, currentTime: currentTime, setSelectedDate: setSelectedDate, shortWeekdayFormatter: shortWeekdayFormatter, timeFormatter: timeFormatter, hourOnlyFormatter: hourOnlyFormatter, view: view, className: "md:hidden" }), jsxRuntime.jsx(CalendarWeekView.WeekView, { currentMonthDate: currentMonthDate, selectedDate: selectedDate, zonedEvents: zonedEvents, locale: locale, timeZone: timeZone, currentTime: currentTime, setSelectedDate: setSelectedDate, shortWeekdayFormatter: shortWeekdayFormatter, timeFormatter: timeFormatter, hourOnlyFormatter: hourOnlyFormatter, view: view, className: "max-md:hidden" })] })), view === 'day' && (jsxRuntime.jsx(CalendarDayView.DayView, { dayToDisplay: dayToDisplay, selectedDate: selectedDate, zonedEvents: zonedEvents, locale: locale, timeZone: timeZone, currentTime: currentTime, setSelectedDate: setSelectedDate, shortWeekdayFormatter: shortWeekdayFormatter, timeFormatter: timeFormatter, hourOnlyFormatter: hourOnlyFormatter, view: view }))] })] }) }));
 };
 
 exports.Calendar = Calendar;

package/dist/components/organisms/Calendar/index.d.ts

@@ -1,4 +1,4 @@
-import type { EventViewColor } from './components/calendar-month-view-event';
+import type { EventViewColor } from './components/CalendarMonthViewEvent';
 export type CalendarEvent = {
     id: string;
     title: string;

package/dist/components/organisms/Calendar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Calendar/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAI7E,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAQF,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,qEAA+E,aAAa,uCAoKpH,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Calendar/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAI1E,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAQF,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,qEAA+E,aAAa,uCAoKpH,CAAC"}

package/dist/components/organisms/Calendar/index.js

@@ -4,10 +4,10 @@ import { useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilitie
 import { getLocalTimeZone, today, now, parseAbsoluteToLocal, startOfWeek } from '@internationalized/date';
 import { useLocale, useDateFormatter } from '@react-aria/i18n';
 import { useMemo, useState, useEffect } from 'react';
-import { DayView } from './components/calendar-day-view.js';
-import { CalendarHeader } from './components/calendar-header.js';
-import { MonthView } from './components/calendar-month-view.js';
-import { WeekView } from './components/calendar-week-view.js';
+import { DayView } from './components/CalendarDayView.js';
+import { CalendarHeader } from './components/CalendarHeader.js';
+import { MonthView } from './components/CalendarMonthView.js';
+import { WeekView } from './components/CalendarWeekView.js';
 
 const viewOptions = [
     { value: 'day', label: 'Day view' },

package/dist/components/organisms/Charts/components/ActivityGauge.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var recharts = require('recharts');
+var ChartsBase = require('./ChartsBase.cjs');
+
+const radialData = [
+    {
+        name: 'Series 3',
+        value: 660,
+        className: 'text-utility-brand-400',
+    },
+    {
+        name: 'Series 2',
+        value: 774,
+        className: 'text-utility-brand-600',
+    },
+    {
+        name: 'Series 1',
+        value: 866,
+        className: 'text-utility-brand-700',
+    },
+];
+const sizeConfig = {
+    xs: { height: 220, innerRadius: 52, outerRadius: 86, title: 'text-xl', subtitle: 'text-xs' },
+    sm: { height: 256, innerRadius: 64, outerRadius: 104, title: 'text-2xl', subtitle: 'text-sm' },
+    md: { height: 296, innerRadius: 78, outerRadius: 124, title: 'text-3xl', subtitle: 'text-sm' },
+    lg: { height: 340, innerRadius: 92, outerRadius: 148, title: 'text-4xl', subtitle: 'text-md' },
+};
+/**
+ * Concentric radial bars with a value in the centre, for showing a few related figures as
+ * progress toward or share of a whole. Part of the Charts family.
+ *
+ * @summary radial gauge of related figures around a centred total
+ */
+const ActivityGauge = ({ data = radialData, title = '1,000', subtitle = 'Active users', size = 'xs', domainMax, showLegend = true, showTooltip = true, className, 'data-testid': dataTestId, }) => {
+    const config = sizeConfig[size];
+    const max = domainMax ?? Math.max(0, ...data.map((item) => item.value));
+    const testId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'activity-gauge', rootName: 'activity-gauge' });
+    return (jsxRuntime.jsx("div", { "data-testid": testId, className: "contents", children: jsxRuntime.jsx(recharts.ResponsiveContainer, { initialDimension: { width: 1, height: 1 }, height: config.height, children: jsxRuntime.jsxs(recharts.RadialBarChart, { data: data, accessibilityLayer: true, innerRadius: config.innerRadius, outerRadius: config.outerRadius, 
+                // This is needed to start the chart at the top and go clockwise
+                startAngle: 90, endAngle: 360 + 90, className: cx.cx('font-medium text-tertiary [&_.recharts-polar-grid]:text-utility-neutral-100 [&_.recharts-text]:text-sm', className), margin: {
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                }, children: [jsxRuntime.jsx(recharts.PolarAngleAxis, { tick: false, domain: [0, max], type: "number", reversed: true }), showLegend && jsxRuntime.jsx(recharts.Legend, { verticalAlign: "bottom", align: "center", layout: "horizontal", content: jsxRuntime.jsx(ChartsBase.ChartLegendContent, {}) }), showTooltip && jsxRuntime.jsx(recharts.Tooltip, { content: jsxRuntime.jsx(ChartsBase.ChartTooltipContent, { isRadialChart: true }) }), jsxRuntime.jsx(recharts.RadialBar, { isAnimationActive: false, dataKey: "value", cornerRadius: 99, fill: "currentColor", background: {
+                            className: 'fill-utility-neutral-100',
+                        } }), (title || subtitle) && (jsxRuntime.jsxs("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", children: [subtitle && (jsxRuntime.jsx("tspan", { x: "50%", dy: title ? '-1.175em' : '1%', className: cx.cx('fill-current text-tertiary font-medium', config.subtitle), children: subtitle })), title && (jsxRuntime.jsx("tspan", { x: "50%", dy: subtitle ? '1.25em' : '1%', className: cx.cx('fill-current text-primary font-semibold', config.title), children: title }))] }))] }) }) }));
+};
+/** @deprecated Use `<ActivityGauge size="xs" />` instead. */
+const ActivityGaugeXs = (props) => jsxRuntime.jsx(ActivityGauge, { ...props, size: "xs" });
+/** @deprecated Use `<ActivityGauge size="sm" />` instead. */
+const ActivityGaugeSm = (props) => jsxRuntime.jsx(ActivityGauge, { ...props, size: "sm" });
+/** @deprecated Use `<ActivityGauge size="md" />` instead. */
+const ActivityGaugeMd = (props) => jsxRuntime.jsx(ActivityGauge, { ...props, size: "md" });
+/** @deprecated Use `<ActivityGauge size="lg" />` instead. */
+const ActivityGaugeLg = (props) => jsxRuntime.jsx(ActivityGauge, { ...props, size: "lg" });
+
+exports.ActivityGauge = ActivityGauge;
+exports.ActivityGaugeLg = ActivityGaugeLg;
+exports.ActivityGaugeMd = ActivityGaugeMd;
+exports.ActivityGaugeSm = ActivityGaugeSm;
+exports.ActivityGaugeXs = ActivityGaugeXs;
+//# sourceMappingURL=ActivityGauge.cjs.map

package/dist/components/organisms/Charts/components/ActivityGauge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityGauge.cjs","sources":["../../../../../src/components/organisms/Charts/components/ActivityGauge.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","ResponsiveContainer","_jsxs","RadialBarChart","cx","PolarAngleAxis","Legend","ChartLegendContent","Tooltip","ChartTooltipContent","RadialBar"],"mappings":"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"}

package/dist/components/organisms/Charts/components/ActivityGauge.d.ts

@@ -0,0 +1,53 @@
+export interface ActivityGaugeDataItem {
+    name: string;
+    value: number;
+    className?: string;
+}
+export type ActivityGaugeSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface ActivityGaugeProps {
+    /** The segments rendered by the radial bar chart. */
+    data?: ActivityGaugeDataItem[];
+    /** Primary value displayed in the centre of the gauge. */
+    title?: string;
+    /** Secondary label displayed above the title. */
+    subtitle?: string;
+    /**
+     * The size of the gauge, controlling height and radii.
+     * @default "xs"
+     */
+    size?: ActivityGaugeSize;
+    /**
+     * The upper bound of the radial axis. Defaults to the largest value in `data`.
+     */
+    domainMax?: number;
+    /**
+     * Whether to render the legend below the gauge.
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Whether to render the tooltip on hover.
+     * @default true
+     */
+    showTooltip?: boolean;
+    /** Additional class name for the chart container. */
+    className?: string;
+    /** Overrides the `data-testid` on the chart container (defaults to `fd-activity-gauge`). */
+    'data-testid'?: string;
+}
+/**
+ * Concentric radial bars with a value in the centre, for showing a few related figures as
+ * progress toward or share of a whole. Part of the Charts family.
+ *
+ * @summary radial gauge of related figures around a centred total
+ */
+export declare const ActivityGauge: ({ data, title, subtitle, size, domainMax, showLegend, showTooltip, className, "data-testid": dataTestId, }: ActivityGaugeProps) => import("react").JSX.Element;
+/** @deprecated Use `<ActivityGauge size="xs" />` instead. */
+export declare const ActivityGaugeXs: (props: Omit<ActivityGaugeProps, "size">) => import("react").JSX.Element;
+/** @deprecated Use `<ActivityGauge size="sm" />` instead. */
+export declare const ActivityGaugeSm: (props: Omit<ActivityGaugeProps, "size">) => import("react").JSX.Element;
+/** @deprecated Use `<ActivityGauge size="md" />` instead. */
+export declare const ActivityGaugeMd: (props: Omit<ActivityGaugeProps, "size">) => import("react").JSX.Element;
+/** @deprecated Use `<ActivityGauge size="lg" />` instead. */
+export declare const ActivityGaugeLg: (props: Omit<ActivityGaugeProps, "size">) => import("react").JSX.Element;
+//# sourceMappingURL=ActivityGauge.d.ts.map

package/dist/components/organisms/Charts/components/ActivityGauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityGauge.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Charts/components/ActivityGauge.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D,MAAM,WAAW,kBAAkB;IACjC,qDAAqD;IACrD,IAAI,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAC/B,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA2BD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,4GAU3B,kBAAkB,gCA0DpB,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,eAAe,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,gCAA2C,CAAC;AACnH,6DAA6D;AAC7D,eAAO,MAAM,eAAe,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,gCAA2C,CAAC;AACnH,6DAA6D;AAC7D,eAAO,MAAM,eAAe,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,gCAA2C,CAAC;AACnH,6DAA6D;AAC7D,eAAO,MAAM,eAAe,GAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,gCAA2C,CAAC"}

package/dist/components/organisms/Charts/components/ActivityGauge.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { ResponsiveContainer, RadialBarChart, PolarAngleAxis, Legend, Tooltip, RadialBar } from 'recharts';
+import { ChartLegendContent, ChartTooltipContent } from './ChartsBase.js';
+
+const radialData = [
+    {
+        name: 'Series 3',
+        value: 660,
+        className: 'text-utility-brand-400',
+    },
+    {
+        name: 'Series 2',
+        value: 774,
+        className: 'text-utility-brand-600',
+    },
+    {
+        name: 'Series 1',
+        value: 866,
+        className: 'text-utility-brand-700',
+    },
+];
+const sizeConfig = {
+    xs: { height: 220, innerRadius: 52, outerRadius: 86, title: 'text-xl', subtitle: 'text-xs' },
+    sm: { height: 256, innerRadius: 64, outerRadius: 104, title: 'text-2xl', subtitle: 'text-sm' },
+    md: { height: 296, innerRadius: 78, outerRadius: 124, title: 'text-3xl', subtitle: 'text-sm' },
+    lg: { height: 340, innerRadius: 92, outerRadius: 148, title: 'text-4xl', subtitle: 'text-md' },
+};
+/**
+ * Concentric radial bars with a value in the centre, for showing a few related figures as
+ * progress toward or share of a whole. Part of the Charts family.
+ *
+ * @summary radial gauge of related figures around a centred total
+ */
+const ActivityGauge = ({ data = radialData, title = '1,000', subtitle = 'Active users', size = 'xs', domainMax, showLegend = true, showTooltip = true, className, 'data-testid': dataTestId, }) => {
+    const config = sizeConfig[size];
+    const max = domainMax ?? Math.max(0, ...data.map((item) => item.value));
+    const testId = useResolvedTestId({ testId: dataTestId, segment: 'activity-gauge', rootName: 'activity-gauge' });
+    return (jsx("div", { "data-testid": testId, className: "contents", children: jsx(ResponsiveContainer, { initialDimension: { width: 1, height: 1 }, height: config.height, children: jsxs(RadialBarChart, { data: data, accessibilityLayer: true, innerRadius: config.innerRadius, outerRadius: config.outerRadius, 
+                // This is needed to start the chart at the top and go clockwise
+                startAngle: 90, endAngle: 360 + 90, className: cx('font-medium text-tertiary [&_.recharts-polar-grid]:text-utility-neutral-100 [&_.recharts-text]:text-sm', className), margin: {
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                }, children: [jsx(PolarAngleAxis, { tick: false, domain: [0, max], type: "number", reversed: true }), showLegend && jsx(Legend, { verticalAlign: "bottom", align: "center", layout: "horizontal", content: jsx(ChartLegendContent, {}) }), showTooltip && jsx(Tooltip, { content: jsx(ChartTooltipContent, { isRadialChart: true }) }), jsx(RadialBar, { isAnimationActive: false, dataKey: "value", cornerRadius: 99, fill: "currentColor", background: {
+                            className: 'fill-utility-neutral-100',
+                        } }), (title || subtitle) && (jsxs("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", children: [subtitle && (jsx("tspan", { x: "50%", dy: title ? '-1.175em' : '1%', className: cx('fill-current text-tertiary font-medium', config.subtitle), children: subtitle })), title && (jsx("tspan", { x: "50%", dy: subtitle ? '1.25em' : '1%', className: cx('fill-current text-primary font-semibold', config.title), children: title }))] }))] }) }) }));
+};
+/** @deprecated Use `<ActivityGauge size="xs" />` instead. */
+const ActivityGaugeXs = (props) => jsx(ActivityGauge, { ...props, size: "xs" });
+/** @deprecated Use `<ActivityGauge size="sm" />` instead. */
+const ActivityGaugeSm = (props) => jsx(ActivityGauge, { ...props, size: "sm" });
+/** @deprecated Use `<ActivityGauge size="md" />` instead. */
+const ActivityGaugeMd = (props) => jsx(ActivityGauge, { ...props, size: "md" });
+/** @deprecated Use `<ActivityGauge size="lg" />` instead. */
+const ActivityGaugeLg = (props) => jsx(ActivityGauge, { ...props, size: "lg" });
+
+export { ActivityGauge, ActivityGaugeLg, ActivityGaugeMd, ActivityGaugeSm, ActivityGaugeXs };
+//# sourceMappingURL=ActivityGauge.js.map

package/dist/components/organisms/Charts/components/ActivityGauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityGauge.js","sources":["../../../../../src/components/organisms/Charts/components/ActivityGauge.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}