panelui-native 0.25.0 → 0.30.0

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

@@ -106,7 +106,7 @@ const PADDING = { top: 12, right: 10, bottom: 22, left: 10 };
  * stays a flat list of children instead of two nested slots the caller has to
  * remember the order of.
  */
-type Layer = 'svg' | 'overlay';
+type Layer = 'svg' | 'overlay' | 'header';
 
 export type LineChartStatus = 'loading' | 'ready';
 export type LineChartCurve = 'monotone' | 'linear';
@@ -388,39 +388,43 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
     ]
   );
 
-  const { svg, overlay } = partition(children);
+  const { svg, overlay, header } = partition(children);
 
+  /*
+   * Two views, because the header is not part of the plot. `aspectRatio` and
+   * the layout measurement belong to the drawing area alone — measured on the
+   * outer view they would take in the header too, and the plot would lose as
+   * much height as the readout took while still claiming the shape asked for.
+   */
   return (
     <LineChartContext.Provider value={context}>
-      <View
-        {...props}
-        onLayout={onLayout}
-        style={[{ aspectRatio }, props.style]}
-        className={cn('w-full', className)}
-      >
-        {plot.width > 0 ? (
-          <>
-            <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>
-              <Defs>
-                {/*
-                 * One clip for everything in the plot. Sharing it is what makes
-                 * the reveal read as the chart arriving, rather than as three
-                 * separate things animating in at once.
-                 */}
-                <ClipPath id={clipId}>
-                  <AnimatedRect
-                    x={plot.left}
-                    y={0}
-                    height={size.height}
-                    animatedProps={clipProps}
-                  />
-                </ClipPath>
-              </Defs>
-              {svg}
-            </Svg>
-            {overlay}
-          </>
-        ) : null}
+      <View {...props} style={props.style} className={cn('w-full', className)}>
+        {header}
+        <View onLayout={onLayout} style={{ aspectRatio }} className="w-full">
+          {plot.width > 0 ? (
+            <>
+              <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>
+                <Defs>
+                  {/*
+                   * One clip for everything in the plot. Sharing it is what
+                   * makes the reveal read as the chart arriving, rather than as
+                   * three separate things animating in at once.
+                   */}
+                  <ClipPath id={clipId}>
+                    <AnimatedRect
+                      x={plot.left}
+                      y={0}
+                      height={size.height}
+                      animatedProps={clipProps}
+                    />
+                  </ClipPath>
+                </Defs>
+                {svg}
+              </Svg>
+              {overlay}
+            </>
+          ) : null}
+        </View>
       </View>
     </LineChartContext.Provider>
   );
@@ -431,18 +435,19 @@ LineChartRoot.displayName = 'LineChart';
 function partition(children: ReactNode) {
   const svg: ReactNode[] = [];
   const overlay: ReactNode[] = [];
+  const header: ReactNode[] = [];
 
   Children.forEach(children, (child, index) => {
     if (!isValidElement(child)) return;
     const layer = (child.type as { layer?: Layer }).layer ?? 'svg';
-    (layer === 'overlay' ? overlay : svg).push(
+    (layer === 'header' ? header : layer === 'overlay' ? overlay : svg).push(
       // Children of a `Children.forEach` need keys of their own once they are
       // put into a new array.
       <ChildSlot key={index}>{child}</ChildSlot>
     );
   });
 
-  return { svg, overlay };
+  return { svg, overlay, header };
 }
 
 /** Identity wrapper, purely so the partitioned arrays can carry keys. */
@@ -737,20 +742,44 @@ function LineChartXAxis({ ticks = 4, format, className }: LineChartXAxisProps) {
     }).filter((label): label is { key: number; text: string } => label !== null);
   }, [data, ticks, format, xDataKey]);
 
+  /*
+   * Each label sits on its own point rather than being spread along the axis.
+   * The indices `ticks` picks are not evenly spaced — twelve months shown five
+   * at a time gives 0,3,6,8,11 — so spreading them evenly put the ones in
+   * between over the wrong part of the line.
+   *
+   * The box is backed off by half its own width rather than translated by
+   * `-50%`, which is not reliable across React Native versions.
+   */
   return (
     <View
-      pointerEvents="none"
-      style={{
-        position: 'absolute',
-        left: plot.left,
-        right: PADDING.right,
-        bottom: 0,
-        height: PADDING.bottom,
-      }}
-      className={cn('flex-row items-center justify-between', className)}
+      style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}
+      className={cn(className)}
     >
       {labels.map((label) => (
-        <Text key={label.key} size="xs" muted>
+        <Text
+          key={label.key}
+          size="xs"
+          muted
+          numberOfLines={1}
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            // Centred on its point, then held inside the chart. The first and
+            // last points sit on the plot's own edges, so a box centred on
+            // them hangs half its width off the side — the clamp slides those
+            // two back in rather than letting the numbers leave the frame.
+            left: Math.max(
+              0,
+              Math.min(
+                xOf(label.key, data.length, plot) - POINT_LABEL_WIDTH / 2,
+                plot.left + plot.width + PADDING.right - POINT_LABEL_WIDTH
+              )
+            ),
+            width: POINT_LABEL_WIDTH,
+            textAlign: 'center',
+          }}
+        >
           {label.text}
         </Text>
       ))}
@@ -955,6 +984,16 @@ LineChartTooltip.layer = 'overlay' as Layer;
 
 const LABEL_WIDTH = 112;
 
+/**
+ * Box each x label is centred in. Wide enough for a short label to sit over
+ * its point without the neighbours colliding; a longer one is ellipsised
+ * rather than allowed to push the others out of place.
+ */
+const POINT_LABEL_WIDTH = 56;
+
+/** Line height of an `xs` label, for centring one on the grid line it names. */
+const AXIS_LABEL_HEIGHT = 16;
+
 /** A compact number for the crosshair label: 1204 → "1.2k", 24801 → "24.8k". */
 const DOT = 9;
 
@@ -1018,20 +1057,16 @@ export interface LineChartLegendProps extends ViewProps {
  */
 function LineChartLegend({ className, labels, ...props }: LineChartLegendProps) {
   const { series } = useChart('LineChart.Legend');
+  if (!series.length) return null;
 
   return (
     <View
-      pointerEvents="none"
       className={cn('absolute left-2.5 top-0 flex-row flex-wrap items-center gap-4', className)}
       {...props}
+      style={[{ pointerEvents: 'none' }, props.style]}
     >
       {series.map(([key, color]) => (
-        <View key={key} className="flex-row items-center gap-1.5">
-          <View style={{ backgroundColor: color }} className="h-2 w-2 rounded-full" />
-          <Text size="xs" muted>
-            {labels?.[key] ?? key}
-          </Text>
-        </View>
+        <SeriesSwatch key={key} color={color} label={labels?.[key] ?? key} />
       ))}
     </View>
   );
@@ -1039,6 +1074,109 @@ function LineChartLegend({ className, labels, ...props }: LineChartLegendProps)
 LineChartLegend.displayName = 'LineChart.Legend';
 LineChartLegend.layer = 'overlay' as Layer;
 
+/** One series' colour and name. Shared by the legend and the header. */
+function SeriesSwatch({ color, label }: { color: string; label: string }) {
+  return (
+    <View className="flex-row items-center gap-1.5">
+      <View style={{ backgroundColor: color }} className="h-2 w-2 rounded-full" />
+      <Text size="xs" muted>
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Header layer                                                               */
+/* -------------------------------------------------------------------------- */
+
+export interface LineChartHeaderProps extends ViewProps {
+  className?: string;
+  /** Small line above the value — what the chart is of. */
+  title?: string;
+  /** The readout. The largest thing on the card, and the first thing read. */
+  value?: string;
+  /** One muted line under the value — a period, a comparison, a total. */
+  caption?: string;
+  /** Prettier names for the series keys, as the legend takes. */
+  labels?: Record<string, string>;
+  /**
+   * Draw a swatch and a name per series along the trailing edge. Prefer this to
+   * `LineChart.Legend` on a chart that has a header: the legend floats over the
+   * plot, where it competes with the lines for the same corner.
+   */
+  legend?: boolean;
+  /** Trailing slot — a control, a badge, a range picker. Wins over `legend`. */
+  children?: ReactNode;
+}
+
+/**
+ * The strip above the plot: what the chart is of, what it currently reads, and
+ * what the colours mean.
+ *
+ * It belongs to the chart rather than to the card around it because it is about
+ * the *plot* — the number changes as a finger moves along the line, and the
+ * legend is the series list the chart itself is holding. The card's header is a
+ * caption on the tray the chart sits in; this is the chart introducing itself.
+ *
+ * The value is not derived here. A readout that follows the finger belongs to
+ * whoever owns the data — take it from `onActiveIndexChange` and pass the
+ * formatted string down, so one header can show a total when nothing is pressed
+ * and a point's value when something is.
+ */
+function LineChartHeader({
+  className,
+  title,
+  value,
+  caption,
+  labels,
+  legend = false,
+  children,
+  ...props
+}: LineChartHeaderProps) {
+  const { series } = useChart('LineChart.Header');
+  const trailing =
+    children ??
+    (legend && series.length ? (
+      <View className="flex-row flex-wrap items-center justify-end gap-x-3 gap-y-1">
+        {series.map(([key, color]) => (
+          <SeriesSwatch key={key} color={color} label={labels?.[key] ?? key} />
+        ))}
+      </View>
+    ) : null);
+
+  return (
+    <View
+      {...props}
+      className={cn('flex-row items-start justify-between gap-3 pb-3', className)}
+    >
+      <View className="flex-1 gap-0.5">
+        {title ? (
+          <Text size="xs" muted>
+            {title}
+          </Text>
+        ) : null}
+        {value ? (
+          <Text size="xl" weight="bold">
+            {value}
+          </Text>
+        ) : null}
+        {caption ? (
+          <Text size="xs" muted>
+            {caption}
+          </Text>
+        ) : null}
+      </View>
+      {/* Shrinkable, unlike a view's default in React Native. Held rigid, a
+          three-series key takes the width it wants and the caption underneath
+          the value wraps to two lines to make room for it. */}
+      {trailing ? <View className="shrink pt-1">{trailing}</View> : null}
+    </View>
+  );
+}
+LineChartHeader.displayName = 'LineChart.Header';
+LineChartHeader.layer = 'header' as Layer;
+
 /* -------------------------------------------------------------------------- */
 /* Scales and paths                                                           */
 /* -------------------------------------------------------------------------- */
@@ -1046,6 +1184,7 @@ LineChartLegend.layer = 'overlay' as Layer;
 /** Only reached if the theme CSS was never imported. */
 
 export const LineChart = Object.assign(LineChartRoot, {
+  Header: LineChartHeader,
   Grid: LineChartGrid,
   Area: LineChartArea,
   Line: LineChartLine,

package/src/components/map/index.tsx

@@ -46,7 +46,7 @@ import { Pressable, View, type ViewProps } from 'react-native';
 import { useCSSVariable } from 'uniwind';
 import { tv } from 'tailwind-variants';
 import { CompassIcon, CrosshairIcon, MinusIcon, PlusIcon } from '../../icons';
-import { Text } from '../../primitives/text';
+import { Text, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import {
   buildBasemapStyle,
@@ -334,7 +334,7 @@ const MapRoot = forwardRef<MapHandle, MapProps>(function MapRoot(
                 : { center: center ?? [0, 20], zoom, bearing, pitch }
             }
           />
-          {children}
+          {textChildren(children)}
         </MapLibreMap>
       </MapContext.Provider>
     </View>
@@ -471,13 +471,11 @@ function MapLabel({ children, className, side = 'bottom' }: MapLabelProps) {
       style={{ left: -120, right: -120 }}
     >
       <View className={cn('rounded-md bg-background/85 px-1.5 py-0.5', className)}>
-        {typeof children === 'string' ? (
+        {textChildren(children, (text) => (
           <Text size="xs" weight="medium" numberOfLines={1}>
-            {children}
+            {text}
           </Text>
-        ) : (
-          children
-        )}
+        ))}
       </View>
     </View>
   );
@@ -525,7 +523,7 @@ function MapPopup({ children, className, title, lngLat }: MapPopupProps) {
             {title}
           </Text>
         ) : null}
-        {children}
+        {textChildren(children)}
       </View>
     </Marker>
   );
@@ -563,7 +561,7 @@ function ControlButton({
       className={slots.control()}
       onPress={onPress}
     >
-      {children}
+      {textChildren(children)}
     </Pressable>
   );
 }

package/src/components/marker/index.tsx

@@ -25,7 +25,7 @@ import { tv, type VariantProps } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { IconColorProvider } from '../../icons';
 import { AnimatedPressable, type AnimatedPressableProps } from '../../primitives/animated-pressable';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { Separator } from '../separator';
 import { Shimmer } from '../shimmer';
@@ -90,7 +90,7 @@ const MarkerRoot = forwardRef<View, MarkerProps>(
       variant === 'separator' ? (
         <>
           <Separator className="flex-1" />
-          {children}
+          {textChildren(children)}
           <Separator className="flex-1" />
         </>
       ) : (
@@ -149,7 +149,7 @@ const MarkerIcon = forwardRef<View, MarkerIconProps>(
         {...props}
       >
         <IconColorProvider color={typeof muted === 'string' ? muted : undefined}>
-          {children}
+          {textChildren(children)}
         </IconColorProvider>
       </View>
     );