panelui-native 0.25.0 → 0.30.0

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

@@ -88,12 +88,25 @@ const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
 const PADDING = { top: 12, right: 10, bottom: 22, left: 10 };
 const LABEL_WIDTH = 132;
+
+/**
+ * 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;
 const DOT = 9;
 
 /** Left gutter reserved when a `YAxis` is present, for its labels to sit in. */
-const Y_AXIS_WIDTH = 40;
+const Y_AXIS_WIDTH = 44;
+
+/** Gap between the value labels and the plot they sit beside. */
+const Y_AXIS_GUTTER = 6;
 
-type Layer = 'svg' | 'overlay';
+type Layer = 'svg' | 'overlay' | 'header';
 
 export type AreaChartStatus = 'loading' | 'ready';
 export type AreaChartDatum = Record<string, string | number | null | undefined>;
@@ -190,13 +203,14 @@ function ChildSlot({ children }: { children: ReactNode }) {
 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';
     const slot = <ChildSlot key={index}>{child}</ChildSlot>;
-    (layer === 'overlay' ? overlay : svg).push(slot);
+    (layer === 'header' ? header : layer === 'overlay' ? overlay : svg).push(slot);
   });
-  return { svg, overlay };
+  return { svg, overlay, header };
 }
 
 const AreaChartRoot = forwardRef<AreaChartHandle, AreaChartProps>(function AreaChartRoot(
@@ -413,39 +427,43 @@ const AreaChartRoot = forwardRef<AreaChartHandle, AreaChartProps>(function AreaC
     ]
   );
 
-  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 (
     <AreaChartContext.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 several
-                 * bands 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
+                   * several bands 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>
     </AreaChartContext.Provider>
   );
@@ -635,20 +653,44 @@ function AreaChartXAxis({ ticks = 4, format, className }: AreaChartXAxisProps) {
     }).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>
       ))}
@@ -680,8 +722,20 @@ function AreaChartYAxis({ ticks = 4, format, className }: AreaChartYAxisProps) {
   return (
     <View
       pointerEvents="none"
-      style={{ position: 'absolute', left: 0, top: plot.top, height: plot.height }}
-      className={cn('justify-between', className)}
+      style={{
+        position: 'absolute',
+        left: 0,
+        // Centred on the grid line each label names: the strip is lifted half
+        // a label and grown by a whole one, so `justify-between` lands the
+        // text's middle on the line rather than its top edge on the first line
+        // and its bottom edge on the last.
+        top: plot.top - AXIS_LABEL_HEIGHT / 2,
+        height: plot.height + AXIS_LABEL_HEIGHT,
+        // The gutter the root reserved, less a little breathing room, so the
+        // numbers sit clear of the plot instead of against it.
+        width: Math.max(plot.left - Y_AXIS_GUTTER, 0),
+      }}
+      className={cn('items-end justify-between', className)}
     >
       {labels.map((label) => (
         <Text key={label.key} size="xs" muted numberOfLines={1}>
@@ -965,18 +1019,11 @@ function AreaChartLegend({ className, labels, ...props }: AreaChartLegendProps)
   return (
     <View
       {...props}
-      pointerEvents="none"
+      style={[{ pointerEvents: 'none' }, props.style]}
       className={cn('absolute right-2 top-1 flex-row gap-3', className)}
     >
       {ordered.map(([key, color]) => (
-        <View key={key} className="flex-row items-center gap-1.5">
-          <View
-            style={{ width: 8, height: 8, borderRadius: 2, backgroundColor: color }}
-          />
-          <Text size="xs" muted>
-            {labels?.[key] ?? key}
-          </Text>
-        </View>
+        <SeriesSwatch key={key} color={color} label={labels?.[key] ?? key} />
       ))}
     </View>
   );
@@ -984,7 +1031,113 @@ function AreaChartLegend({ className, labels, ...props }: AreaChartLegendProps)
 AreaChartLegend.displayName = 'AreaChart.Legend';
 AreaChartLegend.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 AreaChartHeaderProps 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, in the order
+   * the bands appear on a stack. Prefer this to `AreaChart.Legend` on a chart
+   * that has a header: the legend floats over the plot, where a tall band and a
+   * key end up in 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 bands, 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 AreaChartHeader({
+  className,
+  title,
+  value,
+  caption,
+  labels,
+  legend = false,
+  children,
+  ...props
+}: AreaChartHeaderProps) {
+  const { series, stacked } = useChart('AreaChart.Header');
+  const ordered = stacked ? [...series].reverse() : series;
+  const trailing =
+    children ??
+    (legend && ordered.length ? (
+      <View className="flex-row flex-wrap items-center justify-end gap-x-3 gap-y-1">
+        {ordered.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>
+  );
+}
+AreaChartHeader.displayName = 'AreaChart.Header';
+AreaChartHeader.layer = 'header' as Layer;
+
 export const AreaChart = Object.assign(AreaChartRoot, {
+  Header: AreaChartHeader,
   Grid: AreaChartGrid,
   Area: AreaChartArea,
   XAxis: AreaChartXAxis,

package/src/components/attachment/index.tsx

@@ -31,7 +31,7 @@ import { View, type ViewProps } from 'react-native';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 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 { Item } from '../item';
 import { Shimmer } from '../shimmer';
@@ -262,7 +262,7 @@ const AttachmentAction = forwardRef<View, AttachmentActionProps>(
       )}
       {...props}
     >
-      {children}
+      {textChildren(children)}
     </AnimatedPressable>
   )
 );

package/src/components/avatar/index.tsx

@@ -7,7 +7,7 @@ import {
   type ViewProps,
 } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
-import { Text } from '../../primitives/text';
+import { Text, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 
 const avatarVariants = tv({
@@ -77,7 +77,7 @@ const AvatarRoot = forwardRef<View, AvatarProps>(
         <View accessibilityRole="image" className={root()}>
           {face}
         </View>
-        {children}
+        {textChildren(children)}
       </View>
     );
   }
@@ -105,7 +105,7 @@ const AvatarBadge = forwardRef<View, AvatarBadgeProps>(
       )}
       {...props}
     >
-      {children}
+      {textChildren(children)}
     </View>
   )
 );

package/src/components/badge/index.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
-import { Text } from '../../primitives/text';
+import { Text, textChildren } from '../../primitives/text';
 
 const badgeVariants = tv({
   slots: {
@@ -67,11 +67,11 @@ export const Badge = forwardRef<View, BadgeProps>(
         className={root({ className })}
         {...props}
       >
-        {resolvedShape === 'dot' ? null : typeof content === 'string' ? (
-          <Text className={label({ className: labelClassName })}>{content}</Text>
-        ) : (
-          content
-        )}
+        {resolvedShape === 'dot'
+          ? null
+          : textChildren(content, (text) => (
+              <Text className={label({ className: labelClassName })}>{text}</Text>
+            ))}
       </View>
     );
   }