panelui-native 0.75.1 → 0.77.0

package/src/components/timeline/index.tsx

@@ -45,14 +45,23 @@
  */
 import {
   Children,
+  cloneElement,
   createContext,
   forwardRef,
   isValidElement,
   useContext,
   useMemo,
+  type ReactElement,
   type ReactNode,
 } from 'react';
-import { ScrollView, View, type Text as RNText, type ViewProps } from 'react-native';
+import {
+  ScrollView,
+  View,
+  type FlatListProps,
+  type ListRenderItemInfo,
+  type Text as RNText,
+  type ViewProps,
+} from 'react-native';
 import Animated, {
   interpolate,
   useAnimatedScrollHandler,
@@ -65,7 +74,7 @@ import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { IconColorProvider } from '../../icons';
 import { Text, type TextProps, textChildren } from '../../primitives/text';
-import { timelineColumnWidth } from './timeline-geometry';
+import { TIMELINE_WIDE_COLUMN, timelineColumnOffsets, timelineColumnWidth } from './timeline-geometry';
 
 export type TimelineVariant = 'dot' | 'icon' | 'numbered' | 'card' | 'compact';
 /** Semantic colour for a single event, independent of progress. */
@@ -74,6 +83,7 @@ export type TimelineTone = 'default' | 'info' | 'success' | 'warning' | 'danger'
 export type TimelineOrientation = 'vertical' | 'horizontal';
 
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
+const TimelineColumnOffsetContext = createContext<number | null>(null);
 
 /*
  * Horizontal geometry.
@@ -252,6 +262,8 @@ interface TimelineContextValue {
   offsets: number[];
   /** Horizontal only: false when the reader has asked for less movement. */
   animate: boolean;
+  /** A virtualized list draws one rail segment per mounted cell. */
+  virtualized: boolean;
 }
 
 interface TimelineItemContextValue {
@@ -330,17 +342,28 @@ const TimelineRoot = forwardRef<View, TimelineProps>(
      * themselves by. These are the snap points, and they are what an item reads
      * to know how far it is from the reading edge.
      */
-    const offsets = useMemo(() => {
-      if (!horizontal) return [];
-      const result: number[] = [];
-      let sum = 0;
+    const columns = useMemo(() => {
+      if (!horizontal) return { offsets: [], children };
+      const items: ReactElement<TimelineItemProps>[] = [];
       Children.forEach(children, (child) => {
-        if (!isValidElement(child)) return;
-        result.push(sum);
-        sum += itemWidth(child.props as TimelineItemProps);
+        if (isValidElement(child) && child.type === TimelineItem) {
+          items.push(child as ReactElement<TimelineItemProps>);
+        }
       });
-      return result;
+      const offsets = timelineColumnOffsets(items.map((item) => itemWidth(item.props)));
+      let position = 0;
+      const rendered = Children.map(children, (child) => {
+        if (!isValidElement(child) || child.type !== TimelineItem) return child;
+        const offset = offsets[position++] ?? 0;
+        return (
+          <TimelineColumnOffsetContext.Provider value={offset}>
+            {child}
+          </TimelineColumnOffsetContext.Provider>
+        );
+      });
+      return { offsets, children: rendered };
     }, [children, horizontal]);
+    const { offsets } = columns;
 
     const context = useMemo(
       () => ({
@@ -350,6 +373,7 @@ const TimelineRoot = forwardRef<View, TimelineProps>(
         scrollX,
         offsets,
         animate: !reducedMotion,
+        virtualized: false,
       }),
       [value, variant, orientation, scrollX, offsets, reducedMotion]
     );
@@ -402,7 +426,7 @@ const TimelineRoot = forwardRef<View, TimelineProps>(
                   borderColor: typeof border === 'string' ? border : undefined,
                 }}
               />
-              {textChildren(children)}
+              {textChildren(columns.children)}
             </View>
           </AnimatedScrollView>
         </View>
@@ -412,6 +436,128 @@ const TimelineRoot = forwardRef<View, TimelineProps>(
 );
 TimelineRoot.displayName = 'Timeline';
 
+export interface TimelineListProps<T>
+  extends Omit<
+    FlatListProps<T>,
+    | 'data'
+    | 'renderItem'
+    | 'horizontal'
+    | 'getItemLayout'
+    | 'onScroll'
+    | 'snapToOffsets'
+    | 'CellRendererComponent'
+  > {
+  /** Complete event collection; rows outside the native window stay unmounted. */
+  data: readonly T[];
+  /** Render one `Timeline.Item`. Its step, width, and last marker are owned by the list. */
+  renderItem: (info: ListRenderItemInfo<T>) => ReactElement<TimelineItemProps>;
+  /** Width of each column, or a resolver for mixed-width histories. */
+  itemWidth?: number | ((item: T, index: number) => number);
+  /** Steps at or below this index render as completed. */
+  value?: number;
+  variant?: TimelineVariant;
+  snap?: boolean;
+}
+
+/**
+ * Opt-in bounded mount path for long horizontal histories. The compound
+ * `Timeline` API remains the simpler choice for short or mixed-content lists.
+ */
+function TimelineList<T>({
+  data,
+  renderItem,
+  itemWidth: requestedWidth = TIMELINE_WIDE_COLUMN,
+  value = 0,
+  variant = 'dot',
+  snap = true,
+  initialNumToRender = 6,
+  maxToRenderPerBatch = 6,
+  windowSize = 5,
+  className,
+  ...props
+}: TimelineListProps<T>) {
+  const reducedMotion = useReducedMotion();
+  const scrollX = useSharedValue(0);
+  const widths = useMemo(
+    () =>
+      data.map((item, index) =>
+        timelineColumnWidth(
+          typeof requestedWidth === 'function' ? requestedWidth(item, index) : requestedWidth,
+          true
+        )
+      ),
+    [data, requestedWidth]
+  );
+  const offsets = useMemo(() => {
+    let offset = 0;
+    return widths.map((width) => {
+      const current = offset;
+      offset += width;
+      return current;
+    });
+  }, [widths]);
+  const context = useMemo(
+    () => ({
+      activeStep: value,
+      variant,
+      orientation: 'horizontal' as const,
+      scrollX,
+      offsets,
+      animate: !reducedMotion,
+      virtualized: true,
+    }),
+    [value, variant, scrollX, offsets, reducedMotion]
+  );
+  const { root } = timelineVariants({ variant, orientation: 'horizontal' });
+  const onScroll = useAnimatedScrollHandler((event) => {
+    scrollX.value = event.contentOffset.x;
+  });
+
+  return (
+    <TimelineContext.Provider value={context}>
+      <Animated.FlatList
+        data={data}
+        horizontal
+        accessibilityRole="list"
+        showsHorizontalScrollIndicator={false}
+        decelerationRate="fast"
+        snapToAlignment="start"
+        initialNumToRender={initialNumToRender}
+        maxToRenderPerBatch={maxToRenderPerBatch}
+        windowSize={windowSize}
+        removeClippedSubviews
+        className={root({ className })}
+        {...props}
+        getItemLayout={(_, index) => ({
+          index,
+          length: widths[index] ?? TIMELINE_WIDE_COLUMN,
+          offset: offsets[index] ?? 0,
+        })}
+        snapToOffsets={snap ? offsets : undefined}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+        renderItem={(info) => (
+          /*
+           * The list owns the order, so it hands each column its own left edge
+           * the same way the compound root does. An item reads its offset from
+           * here rather than indexing by `step`, and a virtualized item that
+           * was given none would sit at zero and never recede.
+           */
+          <TimelineColumnOffsetContext.Provider value={offsets[info.index] ?? 0}>
+            {cloneElement(renderItem(info), {
+              step: info.index,
+              width: widths[info.index],
+              last: info.index === data.length - 1,
+              role: 'listitem',
+            })}
+          </TimelineColumnOffsetContext.Provider>
+        )}
+      />
+    </TimelineContext.Provider>
+  );
+}
+TimelineList.displayName = 'Timeline.List';
+
 export interface TimelineItemProps extends ViewProps {
   className?: string;
   /** Position in the sequence, zero-based. */
@@ -450,8 +596,16 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
     },
     ref
   ) => {
-    const { activeStep, variant, orientation, scrollX, offsets, animate } =
+    const { activeStep, variant, orientation, scrollX, animate, virtualized } =
       useTimeline('Timeline.Item');
+    /*
+     * Where this column starts, from its position among the rendered items
+     * rather than from `step`. `step` is the semantic progress value: it may
+     * be sparse, repeated or reordered, and indexing the offsets by it lands a
+     * column on another column's snap point.
+     */
+    const columnOffset = useContext(TimelineColumnOffsetContext);
+    const border = useCSSVariable('--color-border');
     const isCompleted = completed ?? step <= activeStep;
     const { item } = timelineVariants({
       variant,
@@ -464,7 +618,7 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
     const columnWidth = horizontal
       ? itemWidth({ step, width, children } as TimelineItemProps)
       : undefined;
-    const offset = offsets[step] ?? 0;
+    const offset = columnOffset ?? 0;
 
     const context = useMemo(
       () => ({
@@ -479,8 +633,8 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
     );
 
     /*
-     * A column recedes as it leaves the reading edge, so the one being read is
-     * the one that looks read.
+     * A column scales and drops as it leaves the reading edge, so the one being
+     * read is distinct without fading informative text below its contrast.
      *
      * One column's width either side, not two: a window wide enough to hold
      * three columns near full strength is a row where nothing is picked out,
@@ -494,12 +648,11 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
      * the rest.
      */
     const columnStyle = useAnimatedStyle(() => {
-      if (!horizontal || !animate) return { opacity: 1, transform: [] };
+      if (!horizontal || !animate) return { transform: [] };
       const distance = Math.abs(scrollX.value - offset);
       const window = Math.max(columnWidth ?? timelineColumnWidth(undefined, true), 1);
       const away = interpolate(distance, [0, window], [0, 1], 'clamp');
       return {
-        opacity: 1 - away * 0.4,
         transform: [{ scale: 1 - away * 0.04 }, { translateY: away * 4 }],
       };
     });
@@ -522,6 +675,22 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
           {...props}
           style={[style, { width: columnWidth }, columnStyle]}
         >
+          {virtualized && !last ? (
+            <View
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              style={{
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: HORIZONTAL_RAIL_TOP,
+                borderTopWidth: 1,
+                borderStyle: 'dashed',
+                borderColor: typeof border === 'string' ? border : undefined,
+              }}
+            />
+          ) : null}
           {textChildren(children)}
         </Animated.View>
       </TimelineItemContext.Provider>
@@ -678,22 +847,7 @@ const TimelineContent = forwardRef<View, ViewProps & { className?: string }>(
     const { body, panel } = timelineVariants({ variant, tone, completed, orientation });
     const horizontal = orientation === 'horizontal';
 
-    /*
-     * Horizontal: the body recedes further than the column around it.
-     *
-     * The rail is a continuous thing and has to stay readable across the whole
-     * track — the years either side of the one being read are half of what a
-     * timeline is for. The prose under them is not: several columns of it at
-     * equal weight is a wall, and no amount of fading the column as a whole
-     * fixes that without taking the years down with it. So the body takes a
-     * second, steeper curve and the dates keep the first one.
-     */
-    const bodyStyle = useAnimatedStyle(() => {
-      if (!horizontal || !animate) return { opacity: 1 };
-      const distance = Math.abs(scrollX.value - offset);
-      const window = Math.max(columnWidth, 1);
-      return { opacity: interpolate(distance, [0, window], [1, 0.3], 'clamp') };
-    });
+    /* Horizontal content stays fully opaque; scale and translation provide focus. */
 
     const inner =
       variant === 'card' ? (
@@ -715,7 +869,7 @@ const TimelineContent = forwardRef<View, ViewProps & { className?: string }>(
         ref={ref}
         className={body({ className })}
         {...props}
-        style={[style, bodyStyle]}
+        style={style}
       >
         {inner}
       </Animated.View>
@@ -825,6 +979,7 @@ const TimelineStat = forwardRef<View, TimelineStatProps>(
 TimelineStat.displayName = 'Timeline.Stat';
 
 export const Timeline = Object.assign(TimelineRoot, {
+  List: TimelineList,
   Item: TimelineItem,
   Aside: TimelineAside,
   Indicator: TimelineIndicator,

package/src/components/timeline/timeline-geometry.ts

@@ -7,3 +7,14 @@ export function timelineColumnWidth(requested: number | undefined, filled: boole
   }
   return filled ? TIMELINE_WIDE_COLUMN : TIMELINE_NARROW_COLUMN;
 }
+
+/** Left edge of each column in render order. */
+export function timelineColumnOffsets(widths: readonly number[]): number[] {
+  const offsets: number[] = [];
+  let sum = 0;
+  for (const width of widths) {
+    offsets.push(sum);
+    sum += width;
+  }
+  return offsets;
+}

package/src/components/toast/index.tsx

@@ -175,7 +175,12 @@ const ToastRoot = ({ className, variant = 'default', onHide, children, ...props
 
   return (
     <ToastContext.Provider value={context}>
-      <View accessibilityRole="alert" accessibilityLiveRegion="polite" className={root({ className })} {...props}>
+      <View
+        {...props}
+        accessibilityRole="alert"
+        accessibilityLiveRegion="polite"
+        className={root({ className })}
+      >
         {textChildren(children)}
       </View>
     </ToastContext.Provider>

package/src/components/tooltip/index.tsx

@@ -623,7 +623,7 @@ function TooltipTitle({ className, ...props }: TooltipTitleProps) {
   const { title } = tooltipVariants({ variant });
 
   return (
-    <Text accessibilityRole="header" className={cn(title(), className)} {...props} />
+    <Text {...props} accessibilityRole="header" className={cn(title(), className)} />
   );
 }
 

package/src/components/tree/index.tsx

@@ -286,10 +286,10 @@ const TreeRoot = forwardRef<View, TreeProps>(
       <TreeContext.Provider value={context}>
         <Animated.View
           ref={ref}
+          {...props}
           layout={LinearTransition.duration(TRANSITION_DURATION)}
           accessibilityRole="list"
           className={root({ className })}
-          {...props}
         >
           {children}
         </Animated.View>
@@ -394,6 +394,7 @@ const TreeTrigger = forwardRef<View, TreeTriggerProps>(
     return (
       <Pressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityState={{
           expanded: isBranch ? isExpanded : undefined,
@@ -403,7 +404,6 @@ const TreeTrigger = forwardRef<View, TreeTriggerProps>(
         aria-level={level + 1}
         disabled={triggerDisabled}
         className={trigger({ className })}
-        {...props}
         onPress={handlePress}
       >
         <IconColorProvider color={isSelected ? selectedColor : undefined}>

package/src/components/typography/index.tsx

@@ -290,9 +290,9 @@ export interface TypographyListProps extends ViewProps {
  */
 const TypographyList = forwardRef<View, TypographyListProps>(
   ({ className, ordered = false, children, ...props }, ref) => (
-    <View ref={ref} accessibilityRole="list" className={cn('gap-2', className)} {...props}>
+    <View ref={ref} {...props} accessibilityRole="list" className={cn('gap-2', className)}>
       {Children.map(children, (child, index) => (
-        <View className="w-full flex-row gap-2">
+        <View role="listitem" className="w-full flex-row gap-2">
           {ordered ? (
             <Text className="text-base text-muted-foreground">{index + 1}.</Text>
           ) : (

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

@@ -65,7 +65,12 @@ import Animated, {
 } from 'react-native-reanimated';
 import Svg, { Defs, G, Line as SvgLine, LinearGradient, Path, Stop } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import { Text } from '../../primitives/text';
+import {
+  finiteChartDomain,
+  finiteChartNumber,
+} from '../../primitives/finite-chart';
 import { barPath, compactNumber, type Plot } from '../../utils/chart';
 import { cn } from '../../utils/cn';
 
@@ -196,7 +201,7 @@ export function waterfallSteps(data: WaterfallDatum[]): WaterfallStep[] {
   let running = 0;
 
   for (const datum of data) {
-    const value = typeof datum.value === 'number' && !Number.isNaN(datum.value) ? datum.value : 0;
+    const value = finiteChartNumber(datum.value) ?? 0;
 
     if (datum.total) {
       // A total is a reading, so it is measured from the baseline and the
@@ -228,7 +233,7 @@ export function waterfallSteps(data: WaterfallDatum[]): WaterfallStep[] {
   return steps;
 }
 
-export interface WaterfallChartProps extends ViewProps {
+export interface WaterfallChartProps extends ViewProps, ChartAccessibilityProps<WaterfallStep> {
   className?: string;
   /** The steps, in the order they happen. */
   data: WaterfallDatum[];
@@ -327,6 +332,11 @@ const WaterfallChartRoot = forwardRef<WaterfallChartHandle, WaterfallChartProps>
       fallColor,
       totalColor,
       onActiveIndexChange,
+      accessible,
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityLabelForDatum,
+      onAccessibilityDatumPress,
       compact = false,
       children,
       ...props
@@ -385,7 +395,8 @@ const WaterfallChartRoot = forwardRef<WaterfallChartHandle, WaterfallChartProps>
     };
 
     const extent = useMemo<[number, number]>(() => {
-      if (yDomain) return yDomain;
+      const explicit = finiteChartDomain(yDomain);
+      if (explicit) return explicit;
 
       /*
        * Both ends of every bar, not just the values. A step's bar occupies the
@@ -535,7 +546,29 @@ const WaterfallChartRoot = forwardRef<WaterfallChartHandle, WaterfallChartProps>
       <WaterfallChartContext.Provider value={context}>
         <View {...props} style={props.style} className={cn('w-full', className)}>
           {header}
-          <View onLayout={onLayout} style={{ aspectRatio }} className="w-full">
+          <ChartAccessibilityData
+            chart="Waterfall chart"
+            data={steps}
+            disabled={accessible === false || loading}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            accessibilityLabelForDatum={accessibilityLabelForDatum}
+            onAccessibilityDatumPress={onAccessibilityDatumPress}
+            valueOf={(step) => [
+              ['label', step.label],
+              ['change', step.value],
+              ['kind', step.kind],
+              ['starts at', step.start],
+              ['ends at', step.end],
+            ]}
+          />
+          <View
+            onLayout={onLayout}
+            style={{ aspectRatio }}
+            className="w-full"
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          >
             {plot.width > 0 ? (
               <>
                 <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>

package/src/hooks/use-disclosure.ts

@@ -1,4 +1,5 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
+import { useControllableState } from '../primitives/controllable-state';
 
 export interface UseDisclosureOptions {
   defaultOpen?: boolean;
@@ -34,17 +35,11 @@ export function useDisclosure({
   open: controlledOpen,
   onOpenChange,
 }: UseDisclosureOptions = {}): UseDisclosureResult {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
-  const isControlled = controlledOpen !== undefined;
-  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-
-  const setOpen = useCallback(
-    (next: boolean) => {
-      if (!isControlled) setUncontrolledOpen(next);
-      onOpenChange?.(next);
-    },
-    [isControlled, onOpenChange]
-  );
+  const { value: isOpen, setValue: setOpen } = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
 
   const open = useCallback(() => setOpen(true), [setOpen]);
   const close = useCallback(() => setOpen(false), [setOpen]);

package/src/icons/index.tsx

@@ -852,6 +852,22 @@ export function PaperclipIcon({ size = 16, color, ...props }: IconProps) {
 }
 
 /** A capsule on a stand — a microphone, for anything voice. */
+/** A voice waveform — dictation, voice mode, a recording that has a shape. */
+export function AudioLinesIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M2 10v3M6 6v11M10 3v18M14 8v7M18 5v13M22 10v3"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
 export function MicIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
   return (
@@ -1078,6 +1094,73 @@ export function CrosshairIcon({ size = 16, color, ...props }: IconProps) {
 }
 
 /** A compass needle — which way is north. */
+export function GlobeIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Circle
+        cx={12}
+        cy={12}
+        r={10}
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function CameraIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Circle
+        cx={12}
+        cy={13}
+        r={3}
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/**
+ * The glyph on a control that opens a list of values — a stacked pair, because
+ * one chevron promises a direction the control does not travel in.
+ */
+export function ChevronsUpDownIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="m7 15 5 5 5-5M7 9l5-5 5 5"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
 export function CompassIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
   return (
@@ -1256,6 +1339,29 @@ export interface ToggleIconProps extends IconProps {
 }
 
 /** Upvote. Filled once the vote is cast. */
+/**
+ * A plain up arrow, drawn symmetrically about the centre of its box so it sits
+ * dead centre in a circular button.
+ *
+ * Distinct from `ArrowUpIcon`, which is the heavy solid arrow a vote control
+ * wants, and from `SendIcon`, which is a paper plane. This is the one a
+ * composer's send button uses.
+ */
+export function SendArrowIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="m5 12 7-7 7 7M12 19V5"
+        stroke={resolved}
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
 export function ArrowUpIcon({ size = 16, color, filled, ...props }: ToggleIconProps) {
   const resolved = useResolvedColor(color, '#737373');
   return (