panelui-native 0.28.1 → 0.32.0

package/src/components/heatmap-chart/index.tsx

@@ -60,6 +60,7 @@ import Svg, { ClipPath, Defs, G, Line as SvgLine, Rect } from 'react-native-svg'
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
+import { normalizeWeekStart, startOfDay } from '../../utils/date';
 
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 
@@ -225,12 +226,15 @@ export function buildHeatmapCalendar(
   entries: { date: Date; count: number }[],
   options: { start?: Date; end?: Date; weekStartDay?: number } = {}
 ): HeatmapColumn[] {
-  const weekStartDay = options.weekStartDay ?? 0;
+  const weekStartDay = normalizeWeekStart(options.weekStartDay ?? 0);
   if (!entries.length && !options.start) return [];
 
   const times = entries.map((entry) => entry.date.getTime());
-  const start = options.start ?? new Date(Math.min(...times));
-  const end = options.end ?? new Date(Math.max(...times));
+  // Both bounds at local midnight, and both the same way. Comparing a
+  // normalised lower bound against a raw upper one drops the last day whenever
+  // the caller's `end` carries a time earlier than the cell being tested.
+  const start = startOfDay(options.start ?? new Date(Math.min(...times)));
+  const end = startOfDay(options.end ?? new Date(Math.max(...times)));
 
   const byDay = new Map<string, number>();
   for (const entry of entries) {
@@ -240,7 +244,7 @@ export function buildHeatmapCalendar(
 
   // Back up to the first day of the week the range starts in, so column 0 is a
   // whole week and every row lines up with a weekday for the rest of the chart.
-  const cursor = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+  const cursor = startOfDay(start);
   cursor.setDate(cursor.getDate() - ((cursor.getDay() - weekStartDay + 7) % 7));
 
   const columns: HeatmapColumn[] = [];
@@ -251,7 +255,7 @@ export function buildHeatmapCalendar(
     const date = new Date(cursor);
     // Before the range starts and after it ends the cell exists but has no
     // reading — `count: 0` and no date, so the tooltip stays quiet on it.
-    const inRange = date >= startOfDay(start) && date <= end;
+    const inRange = date >= start && date <= end;
     column.push({
       bin: row,
       count: inRange ? (byDay.get(dayKey(date)) ?? 0) : 0,
@@ -269,10 +273,6 @@ export function buildHeatmapCalendar(
   return columns;
 }
 
-function startOfDay(date: Date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-}
-
 function dayKey(date: Date) {
   return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
 }

package/src/components/map/index.tsx

@@ -78,6 +78,11 @@ const mapVariants = tv({
     control: 'h-9 w-9 items-center justify-center active:bg-muted',
     popup: 'rounded-xl border border-border bg-popover px-3 py-2 shadow-lg',
     pin: 'h-3.5 w-3.5 rounded-full border-2 border-background bg-primary shadow-md',
+    // Opaque enough to read over a landmass fill, with an edge and a shadow so
+    // it sits on the map rather than in it. At 85% the basemap's own roads and
+    // borders showed through the text.
+    label: 'rounded-md border border-border bg-background/95 shadow-sm',
+    labelText: 'text-foreground',
   },
   variants: {
     position: {
@@ -90,6 +95,27 @@ const mapVariants = tv({
   defaultVariants: { position: 'bottom-right' },
 });
 
+/**
+ * The two knobs on a label's pill.
+ *
+ * Lookups rather than `tv()` variants because they belong to `Map.Label`, not
+ * to `Map` — a variant here would be read off the root and documented as
+ * something you could pass to the map itself.
+ */
+const labelSize: Record<'sm' | 'md', string> = {
+  sm: 'px-1.5 py-px',
+  md: 'px-2 py-0.5',
+};
+
+const labelTone: Record<'default' | 'muted' | 'primary', { pill: string; text: string }> = {
+  default: { pill: '', text: '' },
+  muted: { pill: '', text: 'text-muted-foreground' },
+  primary: {
+    pill: 'border-primary/24 bg-primary',
+    text: 'text-primary-foreground',
+  },
+};
+
 export type MapControlsPosition =
   | 'top-left'
   | 'top-right'
@@ -445,6 +471,13 @@ export interface MapLabelProps {
   className?: string;
   /** Which side of the marker the label sits on. */
   side?: 'top' | 'bottom';
+  /** `sm` for a map carrying a lot of them, where the pills start to collide. */
+  size?: 'sm' | 'md';
+  /**
+   * How loud the label is. `muted` for codes and counts that support the map
+   * without being its subject; `primary` for the one place being pointed at.
+   */
+  tone?: 'default' | 'muted' | 'primary';
 }
 
 /**
@@ -460,19 +493,35 @@ export interface MapLabelProps {
  * without widening the marker — a name is usually far wider than the dot it
  * belongs to, and a box sized to the name would be anchored by the name.
  */
-function MapLabel({ children, className, side = 'bottom' }: MapLabelProps) {
+function MapLabel({
+  children,
+  className,
+  side = 'bottom',
+  size = 'md',
+  tone = 'default',
+}: MapLabelProps) {
+  const { label, labelText } = mapVariants();
+  const shade = labelTone[tone];
+
   return (
     <View
       pointerEvents="none"
       className={cn(
         'absolute items-center',
-        side === 'top' ? 'bottom-full mb-1' : 'top-full mt-1'
+        // 6pt of clearance rather than 4: the pill has a border now, and at 4
+        // its edge and the pin's ring read as one smudged shape.
+        side === 'top' ? 'bottom-full mb-1.5' : 'top-full mt-1.5'
       )}
       style={{ left: -120, right: -120 }}
     >
-      <View className={cn('rounded-md bg-background/85 px-1.5 py-0.5', className)}>
+      <View className={label({ className: cn(labelSize[size], shade.pill, className) })}>
         {textChildren(children, (text) => (
-          <Text size="xs" weight="medium" numberOfLines={1}>
+          <Text
+            size="xs"
+            weight="medium"
+            numberOfLines={1}
+            className={labelText({ className: shade.text })}
+          >
             {text}
           </Text>
         ))}