panelui-native 0.62.0 → 0.65.0

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

@@ -245,7 +245,7 @@ const BarChartRoot = forwardRef<BarChartHandle, BarChartProps>(function BarChart
     xDataKey = 'name',
     status = 'ready',
     aspectRatio = 2,
-    animationDuration = 1100,
+    animationDuration = 700,
     domainDuration = 500,
     yDomain,
     orientation = 'vertical',
@@ -374,17 +374,27 @@ const BarChartRoot = forwardRef<BarChartHandle, BarChartProps>(function BarChart
       reveal.value = 0;
       reveal.value = withTiming(1, {
         duration: animationDuration,
-        easing: Easing.bezier(0.85, 0, 0.15, 1),
+        easing: Easing.out(Easing.cubic),
       });
     },
     [reducedMotion, animationDuration, reveal]
   );
 
   useEffect(() => {
-    if (revealed.current || loading || plot.width <= 0 || !data.length) return;
+    /*
+     * Going back to `loading` arms the reveal again. Without this a chart that
+     * is refetched comes back fully drawn on the frame the data lands, which
+     * reads as the loading state having been for nothing.
+     */
+    if (loading) {
+      revealed.current = false;
+      reveal.value = 0;
+      return;
+    }
+    if (revealed.current || plot.width <= 0 || !data.length) return;
     revealed.current = true;
     playReveal();
-  }, [loading, plot.width, data.length, playReveal]);
+  }, [loading, plot.width, data.length, playReveal, reveal]);
 
   useImperativeHandle(ref, () => ({ replay: playReveal }), [playReveal]);
 
@@ -1073,6 +1083,15 @@ function BarChartTooltip({ formatValue, formatX, className }: BarChartTooltipPro
   const width = plot.width;
   const height = plot.height;
 
+  /*
+   * The readout's own height, measured rather than assumed. Sideways it has to
+   * be clamped inside the plot vertically, and how tall it is depends on how
+   * many series are listed in it — a constant here would either let a
+   * three-series readout hang off the bottom or reserve room a one-series
+   * readout never uses.
+   */
+  const labelHeight = useSharedValue(0);
+
   /*
    * Declared inside the memo, next to its callers: a worklet may only call
    * another worklet, and the rule is enforced by crashing rather than warning.
@@ -1108,8 +1127,17 @@ function BarChartTooltip({ formatValue, formatX, className }: BarChartTooltipPro
       });
   }, [total, left, top, width, height, horizontal, activeIndex, setActiveIndexJS]);
 
-  // The readout centres over its band and is clamped inside the plot, so it
-  // never runs off the edge at the first or last one.
+  /*
+   * The readout centres over its band and is clamped inside the plot, so it
+   * never runs off the edge at the first or last one.
+   *
+   * Which axis the band runs along is the whole difference between the two
+   * orientations. Upright, the bands are side by side, so the readout slides
+   * across and sits above them all. Sideways, the bands are stacked down the
+   * plot, so it slides *down* to the row it is describing and stays centred
+   * across — held at the top instead, it would name the row under the finger
+   * while covering the first one, which is the row a reader checks it against.
+   */
   const labelStyle = useAnimatedStyle(() => {
     const index = activeIndex.value;
     if (index < 0 || !total) return { opacity: 0 };
@@ -1120,7 +1148,23 @@ function BarChartTooltip({ formatValue, formatX, className }: BarChartTooltipPro
       plot.left + plot.width - half,
       Math.max(plot.left + half, horizontal ? plot.left + plot.width / 2 : centre)
     );
-    return { opacity: 1, transform: [{ translateX: clamped - half }] };
+
+    if (!horizontal) {
+      return { opacity: 1, transform: [{ translateX: clamped - half }] };
+    }
+
+    // Until the first measurement lands the height is zero, which clamps to
+    // the top of the plot — the same place it used to sit, rather than a jump
+    // from somewhere it never was.
+    const tall = labelHeight.value;
+    const y = Math.min(
+      plot.top + Math.max(plot.height - tall, 0),
+      Math.max(plot.top, centre - tall / 2)
+    );
+    return {
+      opacity: 1,
+      transform: [{ translateX: clamped - half }, { translateY: y }],
+    };
   });
 
   const active = activeIndexJS >= 0 ? data[activeIndexJS] : null;
@@ -1141,6 +1185,9 @@ function BarChartTooltip({ formatValue, formatX, className }: BarChartTooltipPro
         >
           {active ? (
             <View
+              onLayout={(event) => {
+                labelHeight.value = event.nativeEvent.layout.height;
+              }}
               className={cn(
                 'rounded-xl border border-border bg-popover px-2.5 py-1.5 shadow-lg',
                 className

package/src/components/bottom-sheet/index.tsx

@@ -31,7 +31,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { tv } from 'tailwind-variants';
 import { getNativeUI } from '../../native';
 import { XIcon } from '../../icons';
-import { Portal } from '../../primitives/portal';
+import { ModalPortal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
 import { Text, textChildren } from '../../primitives/text';
 import { useBackHandler } from '../../hooks/use-back-handler';
@@ -435,7 +435,7 @@ function BottomSheetContent({
   if (!open) return null;
 
   return (
-    <Portal>
+    <ModalPortal>
       {/* Portal content mounts under PortalHost, outside this provider's
           subtree — re-provide the context so nested consumers keep working. */}
       <BottomSheetContext.Provider value={context}>
@@ -507,7 +507,7 @@ function BottomSheetContent({
         </GestureDetector>
         </View>
       </BottomSheetContext.Provider>
-    </Portal>
+    </ModalPortal>
   );
 }
 

package/src/components/button/index.tsx

@@ -42,8 +42,9 @@ const buttonVariants = tv({
       },
       destructive: {
         root: 'border-destructive bg-destructive shadow-sm',
-        label: 'text-white',
-        spinner: 'border-white/32 border-t-white',
+        label: 'text-destructive-solid-foreground',
+        spinner:
+          'border-destructive-solid-foreground/32 border-t-destructive-solid-foreground',
       },
       /** Neutral surface for third-party sign-in, sized for a full-width stack. */
       social: {
@@ -53,8 +54,8 @@ const buttonVariants = tv({
       },
     },
     size: {
-      sm: { root: 'h-9 gap-1.5 px-2.5', label: 'text-sm' },
-      md: { root: 'h-11 px-4', label: 'text-base' },
+      sm: { root: 'h-9 min-w-9 gap-1.5 px-2.5', label: 'text-sm' },
+      md: { root: 'h-11 min-w-11 px-4', label: 'text-base' },
       lg: { root: 'h-12 px-6', label: 'text-lg' },
       icon: { root: 'h-11 w-11 px-0' },
     },
@@ -134,18 +135,16 @@ const ATTACHED = 'rounded-none border-transparent shadow-none active:bg-accent';
 
 const SPINNER_SIZE = { sm: 'sm', md: 'sm', lg: 'md', icon: 'sm' } as const;
 
+/** Extra room around the styled sizes so even the compact button reaches 48dp. */
+const BUTTON_HIT_SLOP = { sm: 6, md: 2, lg: 0, icon: 2 } as const;
+
 /**
  * The theme token each variant's content reads against. Icons in the content
  * slots inherit the resolved value, so they follow the theme automatically.
- *
- * `destructive` is absent on purpose: its background is a saturated red in
- * every theme, so its content is always white rather than a themed token.
  */
-const CONTENT_COLOR_VAR: Record<
-  Exclude<NonNullable<ButtonVariantProps['variant']>, 'destructive'>,
-  string
-> = {
+const CONTENT_COLOR_VAR: Record<NonNullable<ButtonVariantProps['variant']>, string> = {
   primary: '--color-primary-foreground',
+  destructive: '--color-destructive-solid-foreground',
   secondary: '--color-secondary-foreground',
   outline: '--color-foreground',
   ghost: '--color-foreground',
@@ -328,17 +327,9 @@ export const Button = forwardRef<View, ButtonProps>(
     // Icons in the content slots inherit this, so they stay legible when the
     // theme inverts the button's background. Without it every caller has to
     // hardcode a hex that is wrong in one theme or the other.
-    const themedColor = useCSSVariable(
-      CONTENT_COLOR_VAR[
-        resolvedVariant === 'destructive' ? 'primary' : (resolvedVariant ?? 'primary')
-      ]
-    );
+    const themedColor = useCSSVariable(CONTENT_COLOR_VAR[resolvedVariant ?? 'primary']);
     const contentColor =
-      resolvedVariant === 'destructive'
-        ? '#ffffff'
-        : typeof themedColor === 'string'
-          ? themedColor
-          : undefined;
+      typeof themedColor === 'string' ? themedColor : undefined;
 
     if (nativeUI) {
       const { Host, Button: NativeButton, RNHostView } = nativeUI;
@@ -446,6 +437,9 @@ export const Button = forwardRef<View, ButtonProps>(
           accessibilityRole="button"
           accessibilityState={{ disabled: isDisabled, busy: loading }}
           disabled={isDisabled}
+          // Joined segments cannot borrow room from each other without making
+          // two actions claim the same pixels. ButtonGroup owns that layout.
+          hitSlop={attached ? undefined : BUTTON_HIT_SLOP[resolvedSize ?? 'md']}
           // Before the spread, so a caller can still ask for the scale back.
           pressScale={attached ? 1 : undefined}
           className={root({ className: cn(attached && ATTACHED, className) })}

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

@@ -249,9 +249,12 @@ export interface CandlestickChartProps extends ViewProps {
   /** Key holding the closing price. */
   closeDataKey?: string;
   /**
-   * `loading` draws a row of flat placeholder candles and grows them into the
-   * real ones when it turns `ready`. One component throughout, rather than a
-   * spinner swapped for a chart — swapping loses the transition.
+   * `loading` leaves the plot empty — the frame, the grid and the header stay,
+   * and no candles are drawn. Turning `ready` grows them in left to right.
+   *
+   * Nothing stands in for the candles while they are missing. A placeholder
+   * candle is four made-up prices, and a reader has no way to tell an invented
+   * one from a real one until it changes under them.
    */
   status?: CandlestickChartStatus;
   /** Width ÷ height. `1.6` suits a chart this dense better than `2`. */
@@ -323,7 +326,7 @@ const CandlestickChartRoot = forwardRef<CandlestickChartHandle, CandlestickChart
       closeDataKey = 'close',
       status = 'ready',
       aspectRatio = 1.6,
-      animationDuration = 1100,
+      animationDuration = 700,
       domainDuration = 500,
       yDomain,
       candleGap = 0.3,
@@ -427,17 +430,27 @@ const CandlestickChartRoot = forwardRef<CandlestickChartHandle, CandlestickChart
         reveal.value = 0;
         reveal.value = withTiming(1, {
           duration: animationDuration,
-          easing: Easing.bezier(0.85, 0, 0.15, 1),
+          easing: Easing.out(Easing.cubic),
         });
       },
       [reducedMotion, animationDuration, reveal]
     );
 
     useEffect(() => {
-      if (revealed.current || loading || plot.width <= 0 || !data.length) return;
+      /*
+       * Going back to `loading` arms the reveal again. Without this a chart
+       * that is refetched comes back fully drawn on the frame the data lands,
+       * which reads as the loading state having been for nothing.
+       */
+      if (loading) {
+        revealed.current = false;
+        reveal.value = 0;
+        return;
+      }
+      if (revealed.current || plot.width <= 0 || !data.length) return;
       revealed.current = true;
       playReveal();
-    }, [loading, plot.width, data.length, playReveal]);
+    }, [loading, plot.width, data.length, playReveal, reveal]);
 
     useImperativeHandle(ref, () => ({ replay: playReveal }), [playReveal]);
 

package/src/components/card/index.tsx

@@ -23,13 +23,40 @@
  */
 import { forwardRef } from 'react';
 import { View, type ViewProps } from 'react-native';
+import { tv, type VariantProps } from 'tailwind-variants';
 import { cn } from '../../utils/cn';
 import { Text, type TextProps } from '../../primitives/text';
 
+const footerVariants = tv({
+  base: 'flex-row items-center gap-2',
+  variants: {
+    /**
+     * Whether the footer draws a surface of its own.
+     *
+     * `plain` is part of the card: same background, padding continuing from the
+     * content above it. `panel` is a band set into it — a rule across the top,
+     * a step darker, and the card's own bottom corners — so the buttons read as
+     * the card's actions rather than as the last thing in its body. Use it when
+     * the footer is what somebody does with the card, not more of what it says.
+     */
+    variant: {
+      plain: 'p-6 pt-0',
+      panel: 'rounded-b-2xl border-t border-border bg-inset p-6',
+    },
+  },
+  defaultVariants: {
+    variant: 'plain',
+  },
+});
+
 export interface CardProps extends ViewProps {
   className?: string;
 }
 
+export interface CardFooterProps
+  extends CardProps,
+    VariantProps<typeof footerVariants> {}
+
 const CardRoot = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
   <View
     ref={ref}
@@ -69,13 +96,11 @@ const CardContent = forwardRef<View, CardProps>(({ className, ...props }, ref) =
 ));
 CardContent.displayName = 'Card.Content';
 
-const CardFooter = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
-  <View
-    ref={ref}
-    className={cn('flex-row items-center gap-2 p-6 pt-0', className)}
-    {...props}
-  />
-));
+const CardFooter = forwardRef<View, CardFooterProps>(
+  ({ className, variant, ...props }, ref) => (
+    <View ref={ref} className={cn(footerVariants({ variant }), className)} {...props} />
+  )
+);
 CardFooter.displayName = 'Card.Footer';
 
 export const Card = Object.assign(CardRoot, {

package/src/components/carousel/index.tsx

@@ -207,7 +207,7 @@ export interface CarouselProps extends ViewProps {
   autoplay?: boolean;
   /** Milliseconds each slide is held when `autoplay` is set. */
   autoplayInterval?: number;
-  /** Controlled active slide. */
+  /** Controlled active slide. Requests move visually only after this value changes. */
   index?: number;
   /** Starting slide when uncontrolled. */
   defaultIndex?: number;
@@ -269,28 +269,37 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
     [isControlled, onIndexChange]
   );
 
-  const scrollTo = useCallback(
+  const animateTo = useCallback(
     (target: number) => {
-      if (count <= 0) return;
-      const settled = loop ? wrap(target, count) : Math.max(0, Math.min(target, count - 1));
-
       if (reducedMotion) {
-        progress.value = settled;
+        progress.value = target;
       } else if (loop) {
         // Spring to the nearest representation of the target rather than to the
         // target itself, so a wrap from the last slide to the first travels one
         // step forward instead of winding all the way back through the run.
-        const shortest = progress.value + distance(settled, progress.value, count, true);
+        const shortest = progress.value + distance(target, progress.value, count, true);
         progress.value = withSpring(shortest, SPRING, (finished) => {
           if (finished) progress.value = wrap(progress.value, count);
         });
       } else {
-        progress.value = withSpring(settled, SPRING);
+        progress.value = withSpring(target, SPRING);
       }
+    },
+    [count, loop, progress, reducedMotion]
+  );
+
+  const scrollTo = useCallback(
+    (target: number) => {
+      if (count <= 0) return;
+      const settled = loop ? wrap(target, count) : Math.max(0, Math.min(target, count - 1));
 
+      // A controlled request belongs to its owner. The finger may move the run,
+      // but after release it returns to the current prop until the owner accepts
+      // the request by changing that prop.
+      animateTo(isControlled ? index : settled);
       setIndex(settled);
     },
-    [count, loop, progress, reducedMotion, setIndex]
+    [animateTo, count, index, isControlled, loop, setIndex]
   );
 
   const next = useCallback(() => scrollTo(index + 1), [index, scrollTo]);
@@ -302,8 +311,8 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
   useEffect(() => {
     if (!isControlled || indexProp === undefined || count <= 0) return;
     if (Math.abs(progress.value - indexProp) < 0.001) return;
-    progress.value = reducedMotion ? indexProp : withSpring(indexProp, SPRING);
-  }, [isControlled, indexProp, count, progress, reducedMotion]);
+    animateTo(indexProp);
+  }, [animateTo, isControlled, indexProp, count, progress]);
 
   /*
    * Autoplay stops for good the first time a finger lands, rather than pausing.
@@ -688,16 +697,30 @@ function CarouselDots({
             key={dot}
             disabled={!interactive}
             onPress={() => scrollTo(dot)}
-            hitSlop={6}
             accessibilityRole="tab"
             accessibilityLabel={`Slide ${dot + 1} of ${count}`}
             accessibilityState={{ selected: active }}
-            className={cn(
-              'rounded-full',
-              horizontal ? (active ? 'h-1 w-4' : 'h-1 w-1') : active ? 'h-4 w-1' : 'h-1 w-1',
-              active ? 'bg-foreground' : 'bg-foreground/30'
-            )}
-          />
+            // 24, not the 48 the buttons get. Dots sit a few points apart, so
+            // a 48 box would either overlap its neighbours — making a tap near
+            // the join land on the wrong slide — or push a five-slide run out
+            // to the width of the screen. 24 clears the minimum with the pitch
+            // still wider than the target, so no two dots contend for a touch.
+            className={cn('items-center justify-center', interactive && 'h-6 w-6')}
+          >
+            <View
+              className={cn(
+                'rounded-full',
+                horizontal
+                  ? active
+                    ? 'h-1 w-4'
+                    : 'h-1 w-1'
+                  : active
+                    ? 'h-4 w-1'
+                    : 'h-1 w-1',
+                active ? 'bg-foreground' : 'bg-foreground/30'
+              )}
+            />
+          </Pressable>
         );
       })}
     </View>
@@ -723,12 +746,11 @@ function makeArrow(direction: 'previous' | 'next') {
       <Pressable
         disabled={disabled}
         onPress={direction === 'next' ? next : previous}
-        hitSlop={8}
         accessibilityRole="button"
         accessibilityLabel={direction === 'next' ? 'Next slide' : 'Previous slide'}
         accessibilityState={{ disabled }}
         className={cn(
-          'items-center justify-center rounded-full p-1',
+          'h-12 w-12 items-center justify-center rounded-full',
           disabled ? 'opacity-30' : 'active:bg-foreground/10',
           className
         )}

package/src/components/checkbox/index.tsx

@@ -13,7 +13,7 @@ import { Text } from '../../primitives/text';
 
 const checkboxVariants = tv({
   slots: {
-    row: 'flex-row items-center gap-2.5',
+    row: 'min-h-12 min-w-12 flex-row items-center gap-2.5',
     box: 'h-5 w-5 items-center justify-center rounded-md border border-input bg-background',
     fill: 'absolute inset-0 items-center justify-center rounded-md bg-primary',
     content: 'flex-1 gap-0.5',
@@ -130,7 +130,6 @@ export const Checkbox = forwardRef<View, CheckboxProps>(
         disabled={disabled}
         // An indeterminate box resolves upward: the press turns the group on.
         onPress={() => onCheckedChange?.(indeterminate ? true : !checked)}
-        hitSlop={8}
         // A description makes the row two lines tall — align the box to the
         // label rather than centring it against the whole block.
         className={slots.row({

package/src/components/dialog/index.tsx

@@ -12,7 +12,8 @@ import {
 } from 'react';
 import { Pressable, View, type ViewProps } from 'react-native';
 import Animated, { FadeIn, FadeOut, ZoomIn } from 'react-native-reanimated';
-import { Portal } from '../../primitives/portal';
+import { tv, type VariantProps } from 'tailwind-variants';
+import { ModalPortal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
 import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { useBackHandler } from '../../hooks/use-back-handler';
@@ -110,7 +111,7 @@ function DialogContent({
   if (!open) return null;
 
   return (
-    <Portal>
+    <ModalPortal>
       {/* Portal content mounts under PortalHost, outside this provider's
           subtree — re-provide the context so Dialog.Close etc. keep working. */}
       <DialogContext.Provider value={context}>
@@ -129,6 +130,8 @@ function DialogContent({
           entering={ZoomIn.springify().damping(18).stiffness(250).mass(0.6)}
           exiting={FadeOut.duration(120)}
           accessibilityViewIsModal
+          // `p-5` is `DIALOG_PADDING` above — a panel footer bleeds back out
+          // through exactly this much, so the two move together.
           className={cn(
             'w-full max-w-sm gap-1.5 rounded-2xl border border-border bg-popover p-5 shadow-lg',
             className
@@ -139,7 +142,7 @@ function DialogContent({
           </Animated.View>
         </Animated.View>
       </DialogContext.Provider>
-    </Portal>
+    </ModalPortal>
   );
 }
 
@@ -163,10 +166,60 @@ const DialogDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
 );
 DialogDescription.displayName = 'Dialog.Description';
 
-function DialogFooter({ className, ...props }: ViewProps & { className?: string }) {
+/**
+ * The dialog's padding, in points. The panel footer bleeds back out through it,
+ * so the two have to agree — a mismatch is a band inset from one edge.
+ */
+const DIALOG_PADDING = 20;
+
+const dialogFooterVariants = tv({
+  base: 'flex-row items-center justify-end gap-2',
+  variants: {
+    /**
+     * Whether the footer draws a surface of its own.
+     *
+     * `plain` is part of the dialog: same background, sitting under the content
+     * with a gap above it. `panel` is a band set into it — a rule across the
+     * top, a step darker, and the dialog's own bottom corners — which separates
+     * what the dialog says from what you can do about it. Worth it on a dialog
+     * with a form in it, where the buttons are otherwise one more row of it.
+     */
+    variant: {
+      plain: 'mt-4',
+      panel: 'mt-5 rounded-b-2xl border-t border-border bg-inset',
+    },
+  },
+  defaultVariants: {
+    variant: 'plain',
+  },
+});
+
+export interface DialogFooterProps extends ViewProps, VariantProps<typeof dialogFooterVariants> {
+  className?: string;
+}
+
+function DialogFooter({ className, variant, style, ...props }: DialogFooterProps) {
   return (
     <View
-      className={cn('mt-4 flex-row items-center justify-end gap-2', className)}
+      /*
+       * The bleed is a style rather than a class because it is arithmetic on the
+       * dialog's own padding, and a class would be a second copy of that number
+       * waiting to disagree with the first.
+       */
+      style={
+        variant === 'panel'
+          ? [
+              {
+                marginHorizontal: -DIALOG_PADDING,
+                marginBottom: -DIALOG_PADDING,
+                paddingHorizontal: DIALOG_PADDING,
+                paddingVertical: 16,
+              },
+              style,
+            ]
+          : style
+      }
+      className={cn(dialogFooterVariants({ variant }), className)}
       {...props}
     />
   );

package/src/components/drawer/index.tsx

@@ -84,7 +84,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { XIcon } from '../../icons';
-import { Portal } from '../../primitives/portal';
+import { ModalPortal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
 import { Text, textChildren } from '../../primitives/text';
 import { useBackHandler } from '../../hooks/use-back-handler';
@@ -458,7 +458,7 @@ function DrawerContent({
   };
 
   return (
-    <Portal>
+    <ModalPortal>
       {/* Portal content mounts under PortalHost, outside this provider's
           subtree — re-provide the context so Drawer.Close keeps working. */}
       <DrawerContext.Provider value={{ open, setOpen }}>
@@ -561,7 +561,7 @@ function DrawerContent({
           </View>
         </DirectionContext.Provider>
       </DrawerContext.Provider>
-    </Portal>
+    </ModalPortal>
   );
 }
 

package/src/components/fab/index.tsx

@@ -129,7 +129,10 @@ const fabVariants = tv({
       primary: { root: 'bg-primary', label: 'text-primary-foreground' },
       secondary: { root: 'bg-secondary', label: 'text-secondary-foreground' },
       surface: { root: 'border border-border bg-popover', label: 'text-foreground' },
-      destructive: { root: 'bg-destructive', label: 'text-white' },
+      destructive: {
+        root: 'bg-destructive',
+        label: 'text-destructive-solid-foreground',
+      },
     },
     disabled: {
       true: { root: 'opacity-[0.64] shadow-none' },
@@ -158,8 +161,9 @@ export type FabSize = NonNullable<FabVariantProps['size']>;
 export type FabVariant = NonNullable<FabVariantProps['variant']>;
 
 /** The theme token each variant's icon reads against. */
-const CONTENT_COLOR_VAR: Record<Exclude<FabVariant, 'destructive'>, string> = {
+const CONTENT_COLOR_VAR: Record<FabVariant, string> = {
   primary: '--color-primary-foreground',
+  destructive: '--color-destructive-solid-foreground',
   secondary: '--color-secondary-foreground',
   surface: '--color-foreground',
 };
@@ -234,17 +238,9 @@ const FabRoot = forwardRef<View, FabProps>(
       disabled,
     });
 
-    const themed = useCSSVariable(
-      CONTENT_COLOR_VAR[
-        variant === 'destructive' ? 'primary' : (variant ?? 'primary')
-      ]
-    );
+    const themed = useCSSVariable(CONTENT_COLOR_VAR[variant ?? 'primary']);
     const contentColor =
-      variant === 'destructive'
-        ? '#ffffff'
-        : typeof themed === 'string'
-          ? themed
-          : undefined;
+      typeof themed === 'string' ? themed : undefined;
 
     const handlePress = useCallback(() => {
       if (haptics) selectionTick();