panelui-native 0.22.6 → 0.28.1

package/src/components/item/index.tsx

@@ -28,7 +28,7 @@ import { createContext, forwardRef, useContext, type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
 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';
 
 type ItemSize = 'default' | 'sm' | 'xs';
@@ -152,7 +152,7 @@ const ItemRoot = forwardRef<View, ItemProps>(
         className={root({ className })}
         {...(props as ViewProps)}
       >
-        {children}
+        {textChildren(children)}
       </View>
     ) : (
       <AnimatedPressable
@@ -164,7 +164,7 @@ const ItemRoot = forwardRef<View, ItemProps>(
         className={root({ className })}
         {...props}
       >
-        {children}
+        {textChildren(children)}
       </AnimatedPressable>
     );
 
@@ -200,7 +200,7 @@ const ItemGroup = forwardRef<View, ItemGroupProps>(
       )}
       {...props}
     >
-      {children}
+      {textChildren(children)}
     </View>
   )
 );
@@ -246,7 +246,7 @@ const ItemMedia = forwardRef<View, ItemMediaProps>(
         className={mediaVariants({ variant, size: size ?? item.size, className })}
         {...props}
       >
-        {children}
+        {textChildren(children)}
       </View>
     );
   }
@@ -277,7 +277,7 @@ const ItemContent = forwardRef<View, ItemContentProps>(
         )}
         {...props}
       >
-        {children}
+        {textChildren(children)}
       </View>
     );
   }
@@ -326,7 +326,7 @@ const ItemActions = forwardRef<View, ItemActionsProps>(
       className={cn('shrink-0 flex-row items-center gap-1.5', className)}
       {...props}
     >
-      {children}
+      {textChildren(children)}
     </View>
   )
 );
@@ -349,7 +349,7 @@ const ItemHeader = forwardRef<View, ItemHeaderProps>(
       className={cn('w-full flex-row items-center justify-between gap-2', className)}
       {...props}
     >
-      {children}
+      {textChildren(children)}
     </View>
   )
 );
@@ -368,7 +368,7 @@ const ItemFooter = forwardRef<View, ItemFooterProps>(
       className={cn('w-full flex-row items-center gap-2', className)}
       {...props}
     >
-      {children}
+      {textChildren(children)}
     </View>
   )
 );

package/src/components/label/index.tsx

@@ -16,7 +16,7 @@ import {
 } from 'react';
 import { View, type Text as RNText, type ViewProps } from 'react-native';
 import { tv } from 'tailwind-variants';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
 
 const labelVariants = tv({
   slots: {
@@ -86,7 +86,7 @@ const LabelRoot = forwardRef<View, LabelProps>(
           {...props}
         >
           {/* Bare strings are the common case — wrap them so callers don't have to. */}
-          {typeof children === 'string' ? <LabelText>{children}</LabelText> : children}
+          {textChildren(children, (text) => <LabelText>{text}</LabelText>)}
         </View>
       </LabelContext.Provider>
     );

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

@@ -81,6 +81,16 @@ import Svg, {
 } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import {
+  areaPath,
+  columnValues,
+  compactNumber,
+  linePath,
+  useSeriesColor,
+  xOf,
+  yOf,
+  type Plot,
+} from '../../utils/chart';
 import { cn } from '../../utils/cn';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
@@ -96,19 +106,12 @@ 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';
 export type LineChartDatum = Record<string, string | number | null | undefined>;
 
-interface Plot {
-  width: number;
-  height: number;
-  left: number;
-  top: number;
-}
-
 interface LineChartContextValue {
   data: LineChartDatum[];
   xDataKey: string;
@@ -385,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>
   );
@@ -428,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. */
@@ -524,7 +532,7 @@ function LineChartLine({
     return () => unregisterSeries(dataKey);
   }, [dataKey, stroke, registerSeries, unregisterSeries]);
 
-  const values = useMemo(() => numbersOf(data, dataKey), [data, dataKey]);
+  const values = useMemo(() => columnValues(data, dataKey), [data, dataKey]);
   const loading = status === 'loading';
 
   const animatedProps = useAnimatedProps(() => ({
@@ -609,7 +617,7 @@ function LineChartArea({ dataKey, color, colorIndex = 1, opacity = 0.18 }: LineC
   const fill = useSeriesColor(color, colorIndex);
   const gradientId = useRef(`panelui-area-${Math.random().toString(36).slice(2, 9)}`).current;
 
-  const values = useMemo(() => numbersOf(data, dataKey), [data, dataKey]);
+  const values = useMemo(() => columnValues(data, dataKey), [data, dataKey]);
   const loading = status === 'loading';
 
   const animatedProps = useAnimatedProps(() => ({
@@ -734,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>
       ))}
@@ -893,7 +925,7 @@ function LineChartTooltip({ color, showLabel = true, formatValue, formatX }: Lin
         {series.map(([key, seriesColor]) => (
           <TooltipDot
             key={key}
-            values={numbersOf(data, key)}
+            values={columnValues(data, key)}
             plot={plot}
             domainMin={domainMin}
             domainMax={domainMax}
@@ -952,14 +984,17 @@ LineChartTooltip.layer = 'overlay' as Layer;
 
 const LABEL_WIDTH = 112;
 
-/** A compact number for the crosshair label: 1204 → "1.2k", 24801 → "24.8k". */
-function compactNumber(value: number): string {
-  const abs = Math.abs(value);
-  if (abs >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
-  if (abs >= 1_000) return `${(value / 1_000).toFixed(1)}k`;
-  return `${Math.round(value)}`;
-}
+/**
+ * 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;
 
 /** The dot riding one series under the crosshair. */
@@ -1022,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>
   );
@@ -1043,177 +1074,117 @@ function LineChartLegend({ className, labels, ...props }: LineChartLegendProps)
 LineChartLegend.displayName = 'LineChart.Legend';
 LineChartLegend.layer = 'overlay' as Layer;
 
-/* -------------------------------------------------------------------------- */
-/* Scales and paths                                                           */
-/* -------------------------------------------------------------------------- */
-
-/** Only reached if the theme CSS was never imported. */
-const FALLBACK_SERIES = ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899'];
-
-/** Series colour: an explicit one, else the `--color-chart-*` token. */
-function useSeriesColor(explicit: string | undefined, index: 1 | 2 | 3 | 4 | 5): string {
-  const token = useCSSVariable(`--color-chart-${index}`);
-  return explicit ?? (typeof token === 'string' ? token : FALLBACK_SERIES[index - 1]!);
-}
-
-function numbersOf(data: LineChartDatum[], key: string): (number | null)[] {
-  return data.map((row) => {
-    const value = row[key];
-    return typeof value === 'number' && !Number.isNaN(value) ? value : null;
-  });
+/** 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>
+  );
 }
 
-function xOf(index: number, total: number, plot: Plot): number {
-  'worklet';
-  if (total <= 1) return plot.left + plot.width / 2;
-  return plot.left + (plot.width * index) / (total - 1);
-}
+/* -------------------------------------------------------------------------- */
+/* Header layer                                                               */
+/* -------------------------------------------------------------------------- */
 
-function yOf(value: number, plot: Plot, min: number, max: number): number {
-  'worklet';
-  const span = max - min || 1;
-  return plot.top + plot.height - ((value - min) / span) * plot.height;
+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;
 }
 
 /**
- * Monotone cubic tangents.
+ * The strip above the plot: what the chart is of, what it currently reads, and
+ * what the colours mean.
  *
- * Written out rather than taken from a charting dependency, because it is forty
- * lines and it has to run inside a worklet — the path is rebuilt on the UI
- * thread on every frame the y-domain is tweening.
+ * 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.
  *
- * Monotone is the right default for a time series. A plain cubic spline
- * overshoots between points, so a series that never goes below zero draws a dip
- * under the axis between two low values — a shape that is not in the data. This
- * one cannot, because the tangent at each point is clamped against the slopes
- * either side of it, and a local peak or trough is given a flat one.
+ * 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 tangents(xs: number[], ys: number[]): number[] {
-  'worklet';
-  const n = xs.length;
-  const slopes: number[] = [];
-  for (let i = 0; i < n - 1; i += 1) {
-    slopes.push((ys[i + 1]! - ys[i]!) / (xs[i + 1]! - xs[i]! || 1));
-  }
-
-  const result: number[] = new Array(n).fill(0);
-  result[0] = slopes[0] ?? 0;
-  result[n - 1] = slopes[n - 2] ?? 0;
-
-  for (let i = 1; i < n - 1; i += 1) {
-    const previous = slopes[i - 1]!;
-    const next = slopes[i]!;
-    result[i] = previous * next <= 0 ? 0 : (previous + next) / 2;
-  }
-
-  // Fritsch–Carlson: pull any tangent back inside the circle of radius 3, which
-  // is the condition for the segment to stay monotone.
-  for (let i = 0; i < n - 1; i += 1) {
-    const slope = slopes[i]!;
-    if (slope === 0) {
-      result[i] = 0;
-      result[i + 1] = 0;
-      continue;
-    }
-    const a = result[i]! / slope;
-    const b = result[i + 1]! / slope;
-    const magnitude = Math.sqrt(a * a + b * b);
-    if (magnitude > 3) {
-      result[i] = (3 / magnitude) * a * slope;
-      result[i + 1] = (3 / magnitude) * b * slope;
-    }
-  }
-
-  return result;
-}
-
-/** Points, split at the gaps — a null breaks the series rather than crossing it. */
-function runsOf(
-  values: (number | null)[],
-  plot: Plot,
-  min: number,
-  max: number
-): { x: number; y: number }[][] {
-  'worklet';
-  const runs: { x: number; y: number }[][] = [];
-  let run: { x: number; y: number }[] = [];
-
-  for (let i = 0; i < values.length; i += 1) {
-    const value = values[i];
-    if (value === null || value === undefined) {
-      if (run.length) runs.push(run);
-      run = [];
-      continue;
-    }
-    run.push({ x: xOf(i, values.length, plot), y: yOf(value, plot, min, max) });
-  }
-  if (run.length) runs.push(run);
-  return runs;
-}
-
-function segment(points: { x: number; y: number }[], curve: LineChartCurve): string {
-  'worklet';
-  if (!points.length) return '';
-  if (points.length < 3 || curve === 'linear') {
-    return points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ');
-  }
-
-  const xs = points.map((p) => p.x);
-  const ys = points.map((p) => p.y);
-  const ms = tangents(xs, ys);
+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);
 
-  let d = `M${xs[0]},${ys[0]}`;
-  for (let i = 0; i < points.length - 1; i += 1) {
-    const dx = (xs[i + 1]! - xs[i]!) / 3;
-    d += ` C${xs[i]! + dx},${ys[i]! + ms[i]! * dx} ${xs[i + 1]! - dx},${ys[i + 1]! - ms[i + 1]! * dx} ${xs[i + 1]},${ys[i + 1]}`;
-  }
-  return d;
+  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;
 
-function linePath(
-  values: (number | null)[],
-  plot: Plot,
-  min: number,
-  max: number,
-  curve: LineChartCurve,
-  loading: boolean
-): string {
-  'worklet';
-  if (loading || plot.width <= 0) {
-    // Flat down the middle: the shape the skeleton holds, and the shape the
-    // real series grows out of once the data arrives.
-    const y = plot.top + plot.height / 2;
-    return `M${plot.left},${y} L${plot.left + plot.width},${y}`;
-  }
-  return runsOf(values, plot, min, max)
-    .map((run) => segment(run, curve))
-    .join(' ');
-}
+/* -------------------------------------------------------------------------- */
+/* Scales and paths                                                           */
+/* -------------------------------------------------------------------------- */
 
-function areaPath(
-  values: (number | null)[],
-  plot: Plot,
-  min: number,
-  max: number,
-  curve: LineChartCurve,
-  loading: boolean
-): string {
-  'worklet';
-  if (loading || plot.width <= 0) return '';
-
-  const baseline = plot.top + plot.height;
-  return runsOf(values, plot, min, max)
-    .map((run) => {
-      const top = segment(run, curve);
-      if (!top) return '';
-      const first = run[0]!;
-      const last = run[run.length - 1]!;
-      return `${top} L${last.x},${baseline} L${first.x},${baseline} Z`;
-    })
-    .join(' ');
-}
+/** Only reached if the theme CSS was never imported. */
 
 export const LineChart = Object.assign(LineChartRoot, {
+  Header: LineChartHeader,
   Grid: LineChartGrid,
   Area: LineChartArea,
   Line: LineChartLine,