panelui-native 0.6.0 → 0.9.0

package/src/components/radio-group/index.tsx

@@ -1,3 +1,23 @@
+/**
+ * RadioGroup — one choice from a set.
+ *
+ * The group owns the value and hands each item its selected state through
+ * context, so an item is a thin pressable that reports its own value up and
+ * reads selection back down.
+ *
+ * Two shapes, chosen on the group and inherited by every item: `dot` is the
+ * classic label-beside-a-disc row; `card` turns the whole surface into the
+ * target — for pickable options where the disc is a confirmation rather than
+ * the thing you aim at. The card is the same treatment `Checkbox` offers, so a
+ * form mixing single- and multi-select choices reads as one family.
+ *
+ * ```tsx
+ * <RadioGroup value={plan} onValueChange={setPlan} variant="card">
+ *   <RadioGroup.Item value="pro" label="Pro" description="For growing teams" />
+ *   <RadioGroup.Item value="max" label="Max" description="Everything, uncapped" />
+ * </RadioGroup>
+ * ```
+ */
 import {
   createContext,
   forwardRef,
@@ -13,13 +33,50 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
+import { tv, type VariantProps } from 'tailwind-variants';
 import { cn } from '../../utils/cn';
 import { Text } from '../../primitives/text';
 
+type RadioVariant = 'dot' | 'card';
+
+const itemVariants = tv({
+  slots: {
+    row: 'flex-row items-center gap-2.5',
+    indicator:
+      'h-5 w-5 items-center justify-center rounded-full border border-input bg-background',
+    label: 'text-sm text-foreground',
+    description: 'text-xs text-muted-foreground',
+  },
+  variants: {
+    variant: {
+      dot: {},
+      card: {
+        // The whole surface is the target; the disc moves to the trailing edge
+        // as a confirmation of the row, not the affordance for it.
+        row: 'w-full items-start justify-between gap-3 rounded-xl border border-border bg-card p-4',
+        label: 'text-base font-medium',
+      },
+    },
+    selected: {
+      true: {},
+    },
+    disabled: {
+      true: { row: 'opacity-50' },
+    },
+  },
+  compoundVariants: [
+    { variant: 'card', selected: true, class: { row: 'border-primary bg-accent' } },
+  ],
+  defaultVariants: {
+    variant: 'dot',
+  },
+});
+
 interface RadioGroupContextValue {
   value: string | undefined;
   onValueChange: (value: string) => void;
   disabled?: boolean;
+  variant: RadioVariant;
 }
 
 const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
@@ -29,14 +86,20 @@ export interface RadioGroupProps extends ViewProps {
   value?: string;
   onValueChange: (value: string) => void;
   disabled?: boolean;
+  /**
+   * `dot` is the label-beside-a-disc row. `card` makes the whole surface the
+   * target and highlights the selected option — for a plan picker or a
+   * settings choice where each option carries a description.
+   */
+  variant?: RadioVariant;
   children: ReactNode;
 }
 
 const RadioGroupRoot = forwardRef<View, RadioGroupProps>(
-  ({ className, value, onValueChange, disabled, children, ...props }, ref) => {
+  ({ className, value, onValueChange, disabled, variant = 'dot', children, ...props }, ref) => {
     const context = useMemo(
-      () => ({ value, onValueChange, disabled }),
-      [value, onValueChange, disabled]
+      () => ({ value, onValueChange, disabled, variant }),
+      [value, onValueChange, disabled, variant]
     );
 
     return (
@@ -59,12 +122,19 @@ export interface RadioGroupItemProps {
   className?: string;
   value: string;
   label?: string;
+  /** Secondary line under the label. Most at home in the `card` variant. */
+  description?: string;
   disabled?: boolean;
+  /** Hide the disc entirely — for a card whose selected fill is enough. */
+  hideIndicator?: boolean;
   children?: ReactNode;
 }
 
 const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
-  ({ className, value, label, disabled: itemDisabled, children }, ref) => {
+  (
+    { className, value, label, description, disabled: itemDisabled, hideIndicator, children },
+    ref
+  ) => {
     const context = useContext(RadioGroupContext);
     if (!context) {
       throw new Error('RadioGroup.Item must be used within a <RadioGroup>');
@@ -72,6 +142,7 @@ const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
 
     const selected = context.value === value;
     const disabled = itemDisabled || context.disabled;
+    const variant = context.variant;
     const progress = useSharedValue(selected ? 1 : 0);
 
     useEffect(() => {
@@ -85,6 +156,34 @@ const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
       transform: [{ scale: progress.value }],
     }));
 
+    const slots = itemVariants({ variant, selected, disabled: !!disabled });
+
+    const indicator = hideIndicator ? null : (
+      <View className={slots.indicator()}>
+        <Animated.View style={dotStyle} className="h-2.5 w-2.5 rounded-full bg-primary" />
+      </View>
+    );
+
+    // The card lays its text out first so the disc sits at the trailing edge;
+    // the dot row keeps the classic disc-then-label order.
+    const body =
+      variant === 'card' ? (
+        <>
+          <View className="flex-1 gap-1">
+            {label ? <Text className={slots.label()}>{label}</Text> : children}
+            {description ? (
+              <Text className={slots.description()}>{description}</Text>
+            ) : null}
+          </View>
+          {indicator}
+        </>
+      ) : (
+        <>
+          {indicator}
+          {label ? <Text className={slots.label()}>{label}</Text> : children}
+        </>
+      );
+
     return (
       <Pressable
         ref={ref}
@@ -93,20 +192,10 @@ const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
         accessibilityLabel={label}
         disabled={disabled}
         onPress={() => context.onValueChange(value)}
-        hitSlop={8}
-        className={cn(
-          'flex-row items-center gap-2.5',
-          disabled && 'opacity-50',
-          className
-        )}
+        hitSlop={variant === 'card' ? undefined : 8}
+        className={slots.row({ className })}
       >
-        <View className="h-5 w-5 items-center justify-center rounded-full border border-input bg-background">
-          <Animated.View
-            style={dotStyle}
-            className="h-2.5 w-2.5 rounded-full bg-primary"
-          />
-        </View>
-        {label ? <Text className="text-sm text-foreground">{label}</Text> : children}
+        {body}
       </Pressable>
     );
   }
@@ -116,3 +205,5 @@ RadioGroupItem.displayName = 'RadioGroup.Item';
 export const RadioGroup = Object.assign(RadioGroupRoot, {
   Item: RadioGroupItem,
 });
+
+export type { RadioVariant };

package/src/components/scroll-fade/index.tsx

@@ -1,14 +1,13 @@
 /**
  * ScrollFade — fades the edges of a scroll container.
  *
- * The React Native equivalent of shadcn-ui/ui's `scroll-fade` utility
- * (https://ui.shadcn.com/docs/utils/scroll-fade), which is CSS `mask-image`
- * driven by a scroll timeline. React Native has neither masks nor scroll
- * timelines, so the fades are SVG gradients overlaid on each edge, with their
- * opacity following the scroll position.
+ * Content that runs past a boundary reads better fading out than being cut
+ * off, and the fade doubles as an affordance: an edge that is fading is an
+ * edge with more content behind it.
  *
- * Composition follows heroui-native's ScrollShadow: wrap the scrollable and
- * let the orientation be inferred from its `horizontal` prop.
+ * Scroll position, content size and viewport size are all held in shared
+ * values and consumed by `useAnimatedStyle`, so the fades track the scroll on
+ * the UI thread without re-rendering React.
  *
  * ```tsx
  * <ScrollFade>
@@ -20,39 +19,63 @@ import {
   Children,
   cloneElement,
   isValidElement,
-  useState,
+  useMemo,
+  type ComponentType,
   type ReactElement,
   type ReactNode,
 } from 'react';
 import {
+  StyleSheet,
   View,
+  type LayoutChangeEvent,
   type NativeScrollEvent,
   type NativeSyntheticEvent,
   type ViewProps,
 } from 'react-native';
-import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { LinearGradient } from 'expo-linear-gradient';
+import Animated, {
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useComposedEventHandler,
+  useDerivedValue,
+  useSharedValue,
+  type AnimatedScrollViewProps,
+  type DerivedValue,
+} from 'react-native-reanimated';
 import { useCSSVariable } from 'uniwind';
 
 /** Past this many pixels from an edge, that edge's fade is fully shown. */
-const FADE_IN_DISTANCE = 24;
+const DEFAULT_FADE_IN_DISTANCE = 24;
 
 export interface ScrollFadeProps extends ViewProps {
   className?: string;
   /** Depth of the fade in pixels. */
   size?: number;
   /** Which edges fade. */
-  edges?: 'both' | 'start' | 'end';
+  edges?: 'both' | 'start' | 'end' | 'none';
+  /**
+   * Scroll axis. Inferred from the child's `horizontal` prop when omitted —
+   * pass it explicitly for children that scroll horizontally without that prop
+   * (a `FlatList` with `horizontal` set through `contentContainerStyle`, say).
+   */
+  orientation?: 'horizontal' | 'vertical';
   /**
    * Colour the fade resolves to — normally whatever sits behind the
    * scrollable. Defaults to the theme's background.
    */
   color?: string;
+  /** Distance in pixels over which an edge fades from clear to full. */
+  fadeInDistance?: number;
+  /** Set false to render the child with no fades at all. */
+  enabled?: boolean;
   children?: ReactNode;
 }
 
 interface ScrollableProps {
   horizontal?: boolean;
-  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  onScroll?: AnimatedScrollViewProps['onScroll'];
+  onLayout?: (event: LayoutChangeEvent) => void;
+  onContentSizeChange?: (width: number, height: number) => void;
   scrollEventThrottle?: number;
 }
 
@@ -60,50 +83,106 @@ export function ScrollFade({
   className,
   size = 48,
   edges = 'both',
+  orientation,
   color,
+  fadeInDistance = DEFAULT_FADE_IN_DISTANCE,
+  enabled = true,
   children,
   ...props
 }: ScrollFadeProps) {
-  const [startOpacity, setStartOpacity] = useState(0);
-  const [endOpacity, setEndOpacity] = useState(0);
+  const offset = useSharedValue(0);
+  const contentLength = useSharedValue(0);
+  const viewportLength = useSharedValue(0);
 
   const themeBackground = useCSSVariable('--color-background');
   const fadeColor =
     color ?? (typeof themeBackground === 'string' ? themeBackground : '#000000');
 
   const child = Children.only(children) as ReactElement<ScrollableProps>;
-  const horizontal = isValidElement(child) ? !!child.props.horizontal : false;
+  const horizontal =
+    orientation !== undefined
+      ? orientation === 'horizontal'
+      : isValidElement(child) && !!child.props.horizontal;
 
-  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
-    const offset = horizontal ? contentOffset.x : contentOffset.y;
-    const total = horizontal ? contentSize.width : contentSize.height;
-    const visible = horizontal ? layoutMeasurement.width : layoutMeasurement.height;
-    const remaining = total - visible - offset;
+  // Reanimated can only drive a scroll handler on an animated component, and
+  // `Animated.ScrollView` is not necessarily what was passed in — the child may
+  // be a FlatList, a SectionList or a custom scrollable. Keyed on the element
+  // *type*, not the element: rebuilding the wrapper would remount the list.
+  const childType = isValidElement(child)
+    ? (child.type as ComponentType<ScrollableProps>)
+    : null;
+  const AnimatedScrollable = useMemo(
+    () => (childType ? Animated.createAnimatedComponent(childType) : null),
+    [childType]
+  );
 
-    // Each edge fades in over the first FADE_IN_DISTANCE px of travel, so an
-    // edge with nothing past it shows nothing.
-    setStartOpacity(Math.min(offset / FADE_IN_DISTANCE, 1));
-    setEndOpacity(Math.min(Math.max(remaining, 0) / FADE_IN_DISTANCE, 1));
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      const { contentOffset, contentSize, layoutMeasurement } = event;
+      offset.value = horizontal ? contentOffset.x : contentOffset.y;
+      contentLength.value = horizontal ? contentSize.width : contentSize.height;
+      viewportLength.value = horizontal
+        ? layoutMeasurement.width
+        : layoutMeasurement.height;
+    },
+  });
 
-    child.props.onScroll?.(event);
+  // A consumer `onScroll` is composed rather than dropped — but because the
+  // child is now an animated component it has to be an animated handler too.
+  const onScroll = useComposedEventHandler([
+    scrollHandler,
+    (child.props.onScroll as typeof scrollHandler | undefined) ?? null,
+  ]);
+
+  // Measured up front as well as on scroll, so an end edge with content behind
+  // it fades from the first frame rather than waiting for a scroll event.
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    viewportLength.value = horizontal ? width : height;
+    child.props.onLayout?.(event);
   };
 
-  const scrollable = isValidElement(child)
-    ? cloneElement(child, {
-        onScroll: handleScroll,
-        scrollEventThrottle: child.props.scrollEventThrottle ?? 16,
-      })
-    : child;
+  const onContentSizeChange = (width: number, height: number) => {
+    contentLength.value = horizontal ? width : height;
+    child.props.onContentSizeChange?.(width, height);
+  };
+
+  const startOpacity = useDerivedValue(() =>
+    Math.min(offset.value / fadeInDistance, 1)
+  );
+
+  const endOpacity = useDerivedValue(() => {
+    // Nothing to fade towards when the content fits inside the viewport.
+    const remaining = contentLength.value - viewportLength.value - offset.value;
+    return Math.min(Math.max(remaining, 0) / fadeInDistance, 1);
+  });
+
+  const scrollable =
+    AnimatedScrollable && isValidElement(child) ? (
+      <AnimatedScrollable
+        {...child.props}
+        onScroll={onScroll}
+        onLayout={onLayout}
+        onContentSizeChange={onContentSizeChange}
+        scrollEventThrottle={child.props.scrollEventThrottle ?? 16}
+      />
+    ) : (
+      child
+    );
 
-  const showStart = edges !== 'end';
-  const showEnd = edges !== 'start';
+  if (!enabled || edges === 'none') {
+    return (
+      <View {...props} className={className}>
+        {scrollable}
+      </View>
+    );
+  }
 
   return (
     <View {...props} className={className}>
       {scrollable}
 
-      {showStart ? (
+      {edges !== 'end' ? (
         <Fade
           color={fadeColor}
           size={size}
@@ -112,7 +191,7 @@ export function ScrollFade({
           edge="start"
         />
       ) : null}
-      {showEnd ? (
+      {edges !== 'start' ? (
         <Fade
           color={fadeColor}
           size={size}
@@ -138,31 +217,64 @@ function Fade({
   color: string;
   size: number;
   horizontal: boolean;
-  opacity: number;
+  opacity: DerivedValue<number>;
   edge: 'start' | 'end';
 }) {
   const isStart = edge === 'start';
-  const id = `scroll-fade-${edge}-${horizontal ? 'x' : 'y'}`;
 
   const position = horizontal
     ? { top: 0, bottom: 0, width: size, ...(isStart ? { left: 0 } : { right: 0 }) }
     : { left: 0, right: 0, height: size, ...(isStart ? { top: 0 } : { bottom: 0 }) };
 
-  // The gradient runs from the screen edge inwards, so it is reversed on the
+  const style = useAnimatedStyle(() => ({ opacity: opacity.value }));
+
+  // The gradient runs from the edge inwards, so its stops are reversed on the
   // end edge.
-  const [x2, y2] = horizontal ? [1, 0] : [0, 1];
+  const colors: [string, string] = isStart
+    ? [withAlpha(color, 1), withAlpha(color, 0)]
+    : [withAlpha(color, 0), withAlpha(color, 1)];
 
   return (
-    <View pointerEvents="none" style={{ position: 'absolute', opacity, ...position }}>
-      <Svg width="100%" height="100%">
-        <Defs>
-          <LinearGradient id={id} x1="0" y1="0" x2={String(x2)} y2={String(y2)}>
-            <Stop offset="0" stopColor={color} stopOpacity={isStart ? 1 : 0} />
-            <Stop offset="1" stopColor={color} stopOpacity={isStart ? 0 : 1} />
-          </LinearGradient>
-        </Defs>
-        <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${id})`} />
-      </Svg>
-    </View>
+    <Animated.View
+      pointerEvents="none"
+      style={[{ position: 'absolute' }, position, style]}
+    >
+      <LinearGradient
+        colors={colors}
+        start={{ x: 0, y: 0 }}
+        end={horizontal ? { x: 1, y: 0 } : { x: 0, y: 1 }}
+        style={StyleSheet.absoluteFill}
+      />
+    </Animated.View>
   );
 }
+
+/**
+ * Gradients need a transparent stop of the *same* colour — `transparent` is
+ * black at zero alpha on Android, which shows as a grey smear.
+ */
+function withAlpha(color: string, alpha: number): string {
+  if (color.startsWith('#')) {
+    const hex = color.slice(1);
+    const full =
+      hex.length === 3
+        ? hex
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : hex.slice(0, 6);
+    const r = parseInt(full.slice(0, 2), 16);
+    const g = parseInt(full.slice(2, 4), 16);
+    const b = parseInt(full.slice(4, 6), 16);
+    if (Number.isNaN(r + g + b)) return color;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
+  const channels = color.match(/rgba?\(([^)]+)\)/)?.[1];
+  if (channels) {
+    const [r, g, b] = channels.split(',').map((part) => part.trim());
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
+  return color;
+}

package/src/components/select/index.tsx

@@ -12,6 +12,7 @@ import { Pressable, ScrollView, View } from 'react-native';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { CheckIcon, ChevronDownIcon } from '../../icons';
+import { getNativeUI } from '../../native';
 import { Text } from '../../primitives/text';
 import { BottomSheet } from '../bottom-sheet';
 
@@ -86,6 +87,21 @@ export interface SelectProps {
   /** Sheet title shown above the options. */
   title?: string;
   disabled?: boolean;
+  /**
+   * Render the platform's own picker instead of the trigger-and-sheet pair.
+   * Requires the optional `@expo/ui` package; without it this prop does
+   * nothing.
+   *
+   * **Theme tokens do not apply** — the platform draws the picker, so
+   * `className` and `title` are ignored. `Select.Item` children still declare
+   * the options.
+   */
+  native?: boolean;
+  /**
+   * Native picker style. `menu` is a compact button opening a dropdown;
+   * `wheel` is an always-visible rotor (iOS; falls back to `menu` elsewhere).
+   */
+  nativeAppearance?: 'menu' | 'wheel';
   children: ReactNode;
 }
 
@@ -96,22 +112,27 @@ function SelectRoot({
   placeholder = 'Select an option',
   title,
   disabled,
+  native,
+  nativeAppearance = 'menu',
   children,
 }: SelectProps) {
   const [open, setOpen] = useState(false);
+  const nativeUI = native ? getNativeUI() : null;
 
-  const selectedLabel = useMemo(() => {
-    let label: string | undefined;
+  const options = useMemo(() => {
+    const collected: SelectItemProps[] = [];
     Children.forEach(children, (child) => {
-      if (
-        isValidElement<SelectItemProps>(child) &&
-        child.props.value === value
-      ) {
-        label = child.props.label;
+      if (isValidElement<SelectItemProps>(child)) {
+        collected.push({ value: child.props.value, label: child.props.label });
       }
     });
-    return label;
-  }, [children, value]);
+    return collected;
+  }, [children]);
+
+  const selectedLabel = useMemo(
+    () => options.find((option) => option.value === value)?.label,
+    [options, value]
+  );
 
   const context = useMemo<SelectContextValue>(
     () => ({
@@ -129,6 +150,30 @@ function SelectRoot({
   });
   const chevronColor = useCSSVariable('--color-muted-foreground');
 
+  if (nativeUI) {
+    const { Host, Picker } = nativeUI;
+    // The native picker has no empty state, so an unset value shows the first
+    // option rather than the placeholder.
+    return (
+      <Host matchContents>
+        <Picker
+          selectedValue={value ?? options[0]?.value ?? ''}
+          onValueChange={(next: string) => onValueChange(next)}
+          appearance={nativeAppearance}
+          enabled={!disabled}
+        >
+          {options.map((option) => (
+            <Picker.Item
+              key={option.value}
+              label={option.label}
+              value={option.value}
+            />
+          ))}
+        </Picker>
+      </Host>
+    );
+  }
+
   return (
     <SelectContext.Provider value={context}>
       <Pressable