@wallarm-org/design-system 0.35.0 → 0.36.0

package/dist/components/SimpleCharts/hooks/useChartTimeFormatters.js

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+import { useDateFormat } from "../../DateFormatProvider/useDateFormat.js";
+import { formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, withTimezoneChip } from "../lib/timeFormatters.js";
+const useChartTimeFormatters = ()=>{
+    const { order = 'day-first', hourCycle } = useDateFormat();
+    const resolvedHourCycle = hourCycle ?? 24;
+    return useMemo(()=>{
+        const formatHour = (value)=>formatChartHour(value, {
+                hourCycle: resolvedHourCycle
+            });
+        const formatDate = (value)=>formatChartDate(value, {
+                order
+            });
+        const formatDateTime = (value)=>formatChartDateTime(value, {
+                order,
+                hourCycle: resolvedHourCycle
+            });
+        return {
+            formatHour,
+            formatDate,
+            formatDateTime,
+            formatTimezone: formatChartTimezone,
+            formatHourWithTimezone: withTimezoneChip(formatHour),
+            formatDateWithTimezone: withTimezoneChip(formatDate),
+            formatDateTimeWithTimezone: withTimezoneChip(formatDateTime),
+            formatDateRange: ({ from, to })=>`${formatDate(from)} → ${formatDate(to)}`
+        };
+    }, [
+        order,
+        resolvedHourCycle
+    ]);
+};
+export { useChartTimeFormatters };

package/dist/components/SimpleCharts/index.d.ts

@@ -1,4 +1,7 @@
 export { BarList, BarListBar, type BarListBarProps, BarListItem, type BarListItemProps, BarListLabel, type BarListLabelProps, BarListPercent, type BarListPercentProps, type BarListProps, BarListSkeleton, type BarListSkeletonProps, BarListValue, type BarListValueProps, } from './BarList';
 export { Chart, ChartActions, type ChartActionsProps, ChartEmpty, type ChartEmptyProps, ChartHeader, type ChartHeaderProps, type ChartProps, ChartTitle, type ChartTitleProps, } from './Chart';
+export { type ChartTimeFormatters, useChartTimeFormatters } from './hooks';
+export { LineChart, LineChartBody, type LineChartBodyProps, type LineChartDatum, LineChartEmpty, type LineChartEmptyProps, LineChartGrid, type LineChartGridProps, LineChartHoverPopover, LineChartHoverPopoverDot, type LineChartHoverPopoverDotProps, type LineChartHoverPopoverProps, LineChartHoverPopoverRow, type LineChartHoverPopoverRowProps, LineChartHoverPopoverTimestamp, type LineChartHoverPopoverTimestampProps, LineChartLegend, LineChartLegendItem, type LineChartLegendItemProps, type LineChartLegendOrientation, type LineChartLegendProps, LineChartLine, type LineChartLineProps, type LineChartProps, type LineChartSeries, LineChartTooltip, type LineChartTooltipProps, type LineChartTooltipRenderArgs, LineChartXAxis, type LineChartXAxisProps, LineChartYAxis, type LineChartYAxisProps, LineChartZoomBrush, type LineChartZoomBrushProps, LineChartZoomPopover, LineChartZoomPopoverConfirm, type LineChartZoomPopoverConfirmProps, type LineChartZoomPopoverProps, LineChartZoomPopoverRange, type LineChartZoomPopoverRangeProps, type LineChartZoomRange, } from './LineChart';
+export { type ChartHourCycle, type ChartTimeFormatterOptions, type ChartTimeOrder, formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, withTimezoneChip, } from './lib';
 export { LegendDot, type LegendDotProps, PieChart, PieChartCenter, PieChartCenterLabel, type PieChartCenterLabelPluralRules, type PieChartCenterLabelProps, type PieChartCenterProps, PieChartCenterValue, type PieChartCenterValueProps, type PieChartDatum, PieChartDonut, type PieChartDonutProps, PieChartLegend, PieChartLegendItem, type PieChartLegendItemProps, PieChartLegendPercent, type PieChartLegendPercentProps, type PieChartLegendPercentVariant, type PieChartLegendProps, PieChartLegendValue, type PieChartLegendValueProps, type PieChartProps, PieChartSkeleton, type PieChartSkeletonProps, } from './PieChart';
 export type { ChartColor } from './types';

package/dist/components/SimpleCharts/index.js

@@ -1,4 +1,7 @@
 import { BarList, BarListBar, BarListItem, BarListLabel, BarListPercent, BarListSkeleton, BarListValue } from "./BarList/index.js";
 import { Chart, ChartActions, ChartEmpty, ChartHeader, ChartTitle } from "./Chart/index.js";
+import { useChartTimeFormatters } from "./hooks/index.js";
+import { LineChart, LineChartBody, LineChartEmpty, LineChartGrid, LineChartHoverPopover, LineChartHoverPopoverDot, LineChartHoverPopoverRow, LineChartHoverPopoverTimestamp, LineChartLegend, LineChartLegendItem, LineChartLine, LineChartTooltip, LineChartXAxis, LineChartYAxis, LineChartZoomBrush, LineChartZoomPopover, LineChartZoomPopoverConfirm, LineChartZoomPopoverRange } from "./LineChart/index.js";
+import { formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, withTimezoneChip } from "./lib/index.js";
 import { LegendDot, PieChart, PieChartCenter, PieChartCenterLabel, PieChartCenterValue, PieChartDonut, PieChartLegend, PieChartLegendItem, PieChartLegendPercent, PieChartLegendValue, PieChartSkeleton } from "./PieChart/index.js";
-export { BarList, BarListBar, BarListItem, BarListLabel, BarListPercent, BarListSkeleton, BarListValue, Chart, ChartActions, ChartEmpty, ChartHeader, ChartTitle, LegendDot, PieChart, PieChartCenter, PieChartCenterLabel, PieChartCenterValue, PieChartDonut, PieChartLegend, PieChartLegendItem, PieChartLegendPercent, PieChartLegendValue, PieChartSkeleton };
+export { BarList, BarListBar, BarListItem, BarListLabel, BarListPercent, BarListSkeleton, BarListValue, Chart, ChartActions, ChartEmpty, ChartHeader, ChartTitle, LegendDot, LineChart, LineChartBody, LineChartEmpty, LineChartGrid, LineChartHoverPopover, LineChartHoverPopoverDot, LineChartHoverPopoverRow, LineChartHoverPopoverTimestamp, LineChartLegend, LineChartLegendItem, LineChartLine, LineChartTooltip, LineChartXAxis, LineChartYAxis, LineChartZoomBrush, LineChartZoomPopover, LineChartZoomPopoverConfirm, LineChartZoomPopoverRange, PieChart, PieChartCenter, PieChartCenterLabel, PieChartCenterValue, PieChartDonut, PieChartLegend, PieChartLegendItem, PieChartLegendPercent, PieChartLegendValue, PieChartSkeleton, formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, useChartTimeFormatters, withTimezoneChip };

package/dist/components/SimpleCharts/lib/chartPalette.d.ts

@@ -0,0 +1,10 @@
+import type { ChartColor } from '../types';
+export declare const CHART_PALETTE_FILL: Record<ChartColor, string>;
+/**
+ * Resolve a chart colour to a CSS color string. A `ChartColor` palette key is
+ * looked up in `CHART_PALETTE_FILL`; any other string is returned verbatim so
+ * callers can pass `var(--color-violet-500)`, `#8b5cf6`, `oklch(…)`, etc.
+ * Returns `undefined` only when `color` is undefined — the caller decides the
+ * fallback (line/slice fall back to slate; popover dots stay transparent).
+ */
+export declare const resolveChartColor: (color: ChartColor | string | undefined) => string | undefined;

package/dist/components/SimpleCharts/lib/chartPalette.js

@@ -0,0 +1,20 @@
+const CHART_PALETTE_FILL = {
+    brand: 'var(--color-w-orange-500)',
+    blue: 'var(--color-blue-500)',
+    green: 'var(--color-green-500)',
+    red: 'var(--color-red-500)',
+    amber: 'var(--color-amber-500)',
+    purple: 'var(--color-purple-500)',
+    slate: 'var(--color-badge-slate-dark-alt)',
+    teal: 'var(--color-teal-500)',
+    cyan: 'var(--color-cyan-500)',
+    indigo: 'var(--color-indigo-500)',
+    pink: 'var(--color-pink-500)',
+    rose: 'var(--color-rose-500)'
+};
+const resolveChartColor = (color)=>{
+    if (void 0 === color) return;
+    if (color in CHART_PALETTE_FILL) return CHART_PALETTE_FILL[color];
+    return color;
+};
+export { CHART_PALETTE_FILL, resolveChartColor };

package/dist/components/SimpleCharts/lib/hoverSync.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Builds an `isHoverSyncTarget` predicate for a chart's hover-syncing surfaces.
+ *
+ * Without this guard, mouseLeave/blur handlers fire `setActive(null)` on every
+ * row crossing — and the matching mouseEnter on the next sibling re-sets the
+ * active key, but React commits the intermediate `null` frame first, flickering
+ * popovers and dimmed series on every crossing.
+ */
+export declare const makeIsHoverSyncTarget: (slots: readonly string[]) => (target: EventTarget | null | undefined) => boolean;

package/dist/components/SimpleCharts/lib/hoverSync.js

@@ -0,0 +1,5 @@
+const makeIsHoverSyncTarget = (slots)=>{
+    const selector = slots.map((slot)=>`[data-slot="${slot}"]`).join(', ');
+    return (target)=>target instanceof Element && null !== target.closest(selector);
+};
+export { makeIsHoverSyncTarget };

package/dist/components/SimpleCharts/lib/index.d.ts

@@ -0,0 +1,2 @@
+export { makeIsHoverSyncTarget } from './hoverSync';
+export { type ChartHourCycle, type ChartTimeFormatterOptions, type ChartTimeOrder, formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, withTimezoneChip, } from './timeFormatters';

package/dist/components/SimpleCharts/lib/index.js

@@ -0,0 +1,3 @@
+import { makeIsHoverSyncTarget } from "./hoverSync.js";
+import { formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, withTimezoneChip } from "./timeFormatters.js";
+export { formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, makeIsHoverSyncTarget, withTimezoneChip };

package/dist/components/SimpleCharts/lib/timeFormatters.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { DateOrder } from '../../DateFormatProvider/context';
+export type ChartTimeOrder = DateOrder;
+export type ChartHourCycle = 12 | 24;
+export interface ChartTimeFormatterOptions {
+    order?: ChartTimeOrder;
+    hourCycle?: ChartHourCycle;
+}
+/** `14:32` (24h) / `2:32 PM` (12h). Empty string for invalid input. */
+export declare const formatChartHour: (value: unknown, options?: {
+    hourCycle?: ChartHourCycle;
+}) => string;
+/** `24 Jan` (day-first) / `Jan 24` (month-first). Year is omitted — axis space is precious. */
+export declare const formatChartDate: (value: unknown, options?: {
+    order?: ChartTimeOrder;
+}) => string;
+/** Combined `24 Jan 14:32`. Respects both `order` and `hourCycle`. */
+export declare const formatChartDateTime: (value: unknown, options?: ChartTimeFormatterOptions) => string;
+/** `GMT±N` / `UTC`. Delegates to the shared `utils/formatDateTime` helper. */
+export declare const formatChartTimezone: (value: unknown) => string;
+/**
+ * Wrap a string formatter so it appends a dimmed timezone chip. Returns a
+ * `ReactNode` so it can be passed to tooltip / zoom-popover slots.
+ */
+export declare const withTimezoneChip: (formatter: (value: unknown) => string) => ((value: unknown) => ReactNode);

package/dist/components/SimpleCharts/lib/timeFormatters.js

@@ -0,0 +1,57 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { format, isValid } from "date-fns";
+import { formatTimezone } from "../../../utils/formatDateTime.js";
+const toDate = (value)=>{
+    if (value instanceof Date) return isValid(value) ? value : null;
+    if ('number' == typeof value || 'string' == typeof value) {
+        const d = new Date(value);
+        return isValid(d) ? d : null;
+    }
+    return null;
+};
+const datePattern = (order, withYear)=>{
+    if ('month-first' === order) return withYear ? 'MMM d, yyyy' : 'MMM d';
+    return withYear ? 'd MMM, yyyy' : 'd MMM';
+};
+const timePattern = (hourCycle, withSeconds)=>{
+    if (12 === hourCycle) return withSeconds ? 'h:mm:ss a' : 'h:mm a';
+    return withSeconds ? 'HH:mm:ss' : 'HH:mm';
+};
+const formatChartHour = (value, options = {})=>{
+    const date = toDate(value);
+    if (!date) return '';
+    return format(date, timePattern(options.hourCycle ?? 24, false));
+};
+const formatChartDate = (value, options = {})=>{
+    const date = toDate(value);
+    if (!date) return '';
+    return format(date, datePattern(options.order ?? 'day-first', false));
+};
+const formatChartDateTime = (value, options = {})=>{
+    const date = toDate(value);
+    if (!date) return '';
+    const { order = 'day-first', hourCycle = 24 } = options;
+    return format(date, `${datePattern(order, false)} ${timePattern(hourCycle, false)}`);
+};
+const formatChartTimezone = (value)=>{
+    const date = toDate(value);
+    return date ? formatTimezone(date) : '';
+};
+const withTimezoneChip = (formatter)=>(value)=>{
+        const date = toDate(value);
+        if (!date) return null;
+        const main = formatter(value);
+        if (!main) return null;
+        const tz = formatTimezone(date);
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                main,
+                " ",
+                /*#__PURE__*/ jsx("span", {
+                    className: "text-text-secondary",
+                    children: tz
+                })
+            ]
+        });
+    };
+export { formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, withTimezoneChip };

package/dist/hooks/useOverflowItems.js

@@ -44,7 +44,7 @@ function useOverflowItems({ items, renderItem, renderMeasurementItem, overflowRe
                         ]);
                         if (overflowElement && 'object' == typeof overflowElement) tempDiv.textContent = '+1';
                     }
-                    dynamicReserveSpace = tempDiv.offsetWidth + gap;
+                    dynamicReserveSpace = Math.max(reserveSpace, tempDiv.offsetWidth + gap);
                     document.body.removeChild(tempDiv);
                 } catch  {}
                 const maxWidth = availableWidth - (needsIndicator ? dynamicReserveSpace : 0);