panelui-native 0.9.0 → 0.13.0

package/src/components/input/index.tsx

@@ -1,44 +1,93 @@
-import { forwardRef, useCallback, useState } from 'react';
+/**
+ * Input — a text field with a label, a description and an error line.
+ *
+ * The field's focus state is animated rather than switched. A border that
+ * snaps between two colours reads as a redraw; one that crosses over in
+ * 150ms reads as the field responding to you. The interpolation runs on the
+ * UI thread, so it costs nothing and keeps up with a fast tab through a form.
+ *
+ * Two backgrounds, because a field's job changes with what surrounds it:
+ * `outline` sits on the page and draws its own edge; `filled` sits inside a
+ * card or a sheet, where a second border next to the container's own reads as
+ * a seam.
+ *
+ * ```tsx
+ * <Input label="Email" placeholder="you@example.com" />
+ * <Input variant="filled" size="lg" label="Name" isRequired />
+ * ```
+ *
+ * For a field with an icon or a button attached, reach for `InputGroup` — it
+ * measures its decorators and pads this field around them.
+ */
+import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { TextInput, View, type TextInputProps } from 'react-native';
-import { tv } from 'tailwind-variants';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { tv, type VariantProps } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { KeyboardAvoider } from '../../primitives/keyboard-avoider';
 import { Text } from '../../primitives/text';
+import { Label } from '../label';
+
+/** Long enough to read as a transition, short enough not to lag a fast tab. */
+const FOCUS_DURATION = 150;
 
 const inputVariants = tv({
   slots: {
     container: 'w-full gap-1.5',
-    field:
-      'h-11 w-full rounded-lg border border-input bg-background px-3 text-base text-foreground',
-    label: 'text-sm font-medium text-foreground',
+    field: 'w-full rounded-lg border text-foreground',
     description: 'text-sm text-muted-foreground',
     error: 'text-sm text-destructive',
   },
   variants: {
-    focused: {
-      true: { field: 'border-ring' },
+    variant: {
+      // The border colour is animated, so it is deliberately not set here —
+      // only the background and the resting border width belong to the class.
+      outline: { field: 'bg-background' },
+      filled: { field: 'bg-muted' },
+    },
+    size: {
+      sm: { field: 'h-10 px-3 text-sm' },
+      md: { field: 'h-12 px-3.5 text-base' },
+      lg: { field: 'h-14 px-4 text-base' },
     },
-    invalid: {
-      true: { field: 'border-destructive/40' },
+    multiline: {
+      // A multiline field grows, so a fixed height would crop it. Text starts
+      // at the top rather than floating in the middle of an empty box.
+      true: { field: 'h-auto min-h-24 py-3' },
     },
     disabled: {
       true: { field: 'opacity-[0.64]' },
     },
   },
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
 });
 
-export interface InputProps extends TextInputProps {
+type InputVariantProps = VariantProps<typeof inputVariants>;
+
+export interface InputProps
+  extends TextInputProps,
+    Omit<InputVariantProps, 'disabled' | 'multiline'> {
   className?: string;
   containerClassName?: string;
   label?: string;
   description?: string;
   /** Error message. When set, the field renders in its invalid state. */
   errorMessage?: string;
+  /** Marks the field required — an asterisk on the label, and the a11y state. */
+  isRequired?: boolean;
   disabled?: boolean;
   /**
    * Lift the field above the software keyboard when it would otherwise be
    * covered. Moves by exactly the overlap, and not at all when the field is
-   * already clear.
+   * already clear — or when the keyboard belongs to a different field.
    *
    * Install `react-native-keyboard-controller` for this to behave on Android.
    *
@@ -50,6 +99,8 @@ export interface InputProps extends TextInputProps {
   keyboardOffset?: number;
 }
 
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
 export const Input = forwardRef<TextInput, InputProps>(
   (
     {
@@ -58,23 +109,61 @@ export const Input = forwardRef<TextInput, InputProps>(
       label,
       description,
       errorMessage,
+      isRequired,
       disabled,
+      variant,
+      size,
       avoidKeyboard = false,
       keyboardOffset = 16,
       onFocus,
       onBlur,
+      style,
       ...props
     },
     ref
   ) => {
     const [focused, setFocused] = useState(false);
+    const invalid = !!errorMessage;
+
     const placeholderColor = useCSSVariable('--color-muted-foreground');
+    const restColor = useCSSVariable('--color-input');
+    const focusColor = useCSSVariable('--color-ring');
+    const errorColor = useCSSVariable('--color-destructive');
+
     const slots = inputVariants({
-      focused,
-      invalid: !!errorMessage,
+      variant,
+      size,
+      multiline: !!props.multiline,
       disabled: !!disabled,
     });
 
+    /*
+     * Border colour is driven by one 0..1 value rather than by a class per
+     * state. Uniwind can only swap a class wholesale, which is the snap this
+     * is here to avoid, and a shared value crosses between the two colours on
+     * the UI thread without a re-render.
+     */
+    const focus = useSharedValue(0);
+    useEffect(() => {
+      focus.value = withTiming(focused ? 1 : 0, { duration: FOCUS_DURATION });
+    }, [focused, focus]);
+
+    const resting = typeof restColor === 'string' ? restColor : '#e5e5e5';
+    const active = invalid
+      ? typeof errorColor === 'string'
+        ? errorColor
+        : '#ef4444'
+      : typeof focusColor === 'string'
+        ? focusColor
+        : '#a3a3a3';
+    // An invalid field is tinted even at rest — the error is a fact about the
+    // value, not about whether the field happens to be focused.
+    const idle = invalid ? active : resting;
+
+    const borderStyle = useAnimatedStyle(() => ({
+      borderColor: interpolateColor(focus.value, [0, 1], [idle, active]),
+    }));
+
     const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(
       (event) => {
         setFocused(true);
@@ -93,15 +182,24 @@ export const Input = forwardRef<TextInput, InputProps>(
 
     const body = (
       <>
-        {label ? <Text className={slots.label()}>{label}</Text> : null}
-        <TextInput
+        {label ? (
+          <Label isRequired={isRequired} isInvalid={invalid} isDisabled={!!disabled}>
+            {label}
+          </Label>
+        ) : null}
+        <AnimatedTextInput
           ref={ref}
           editable={!disabled}
           onFocus={handleFocus}
           onBlur={handleBlur}
           accessibilityLabel={label}
           accessibilityState={{ disabled: !!disabled }}
+          aria-required={isRequired}
+          aria-invalid={invalid}
           className={slots.field({ className })}
+          // Caller styles come last so InputGroup can pad the field around its
+          // decorators, but never last enough to drop the animated border.
+          style={[borderStyle, style]}
           placeholderTextColor={
             typeof placeholderColor === 'string' ? placeholderColor : undefined
           }
@@ -127,7 +225,15 @@ export const Input = forwardRef<TextInput, InputProps>(
      */
     if (avoidKeyboard) {
       return (
-        <KeyboardAvoider offset={keyboardOffset} className={containerClasses}>
+        <KeyboardAvoider
+          // Only while *this* field is the one being typed into. Without it
+          // every avoiding field on the screen lifts the moment any field
+          // anywhere is tapped, and since they all aim at the same gap above
+          // the keyboard, they arrive stacked on top of one another.
+          active={focused}
+          offset={keyboardOffset}
+          className={containerClasses}
+        >
           {body}
         </KeyboardAvoider>
       );

package/src/components/popover/index.tsx

@@ -221,6 +221,12 @@ export interface PopoverContentProps extends ViewProps {
    * `full` spans the safe area, and a number is that many pixels.
    */
   width?: number | 'trigger' | 'full' | 'content-fit';
+  /**
+   * Floor for the panel's width, in pixels. Worth setting with
+   * `width="trigger"`, where a narrow trigger would otherwise squeeze the
+   * content into a column.
+   */
+  minWidth?: number;
   /** Tap outside the panel closes it. Default true. */
   dismissible?: boolean;
   /**
@@ -239,9 +245,12 @@ function PopoverContent({
   offset = DEFAULT_OFFSET,
   alignOffset = 0,
   width = 'content-fit',
+  minWidth,
   dismissible = true,
   blur = false,
   children,
+  onLayout: onLayoutProp,
+  style,
   ...props
 }: PopoverContentProps) {
   const context = usePopover('Popover.Content');
@@ -259,7 +268,7 @@ function PopoverContent({
         ? current
         : { width: w, height: h }
     );
-    props.onLayout?.(event);
+    onLayoutProp?.(event);
   };
 
   const bounds = {
@@ -269,15 +278,23 @@ function PopoverContent({
     bottom: screenHeight - insets.bottom - SCREEN_MARGIN,
   };
 
-  const resolvedWidth =
+  const available = bounds.right - bounds.left;
+  const requestedWidth =
     width === 'content-fit'
       ? undefined
       : width === 'trigger'
         ? trigger?.width
         : width === 'full'
-          ? bounds.right - bounds.left
+          ? available
           : width;
 
+  // The floor never wins past the space there actually is — a panel wider than
+  // the screen is worse than a cramped one.
+  const resolvedWidth =
+    minWidth !== undefined && requestedWidth !== undefined
+      ? Math.min(Math.max(requestedWidth, minWidth), available)
+      : requestedWidth;
+
   const position =
     trigger && size
       ? place({ trigger, size, placement, align, offset, alignOffset, bounds })
@@ -362,31 +379,39 @@ function PopoverContent({
             className="absolute inset-0"
             onPress={dismissible ? () => setOpen(false) : undefined}
           />
+          {/*
+            Two views, not one, and the reason is a Reanimated rule: a layout
+            animation and an animated style may not drive the same property on
+            the same component, or the layout animation silently wins. The exit
+            fade and `panelStyle`'s opacity both want it — so the outer view
+            owns the position and the exit, and the inner one owns the entrance
+            and the panel's own surface.
+          */}
           <Animated.View
             exiting={FadeOut.duration(120)}
             onLayout={onLayout}
-            accessibilityViewIsModal
-            style={[
-              {
-                position: 'absolute',
-                // Until it has measured itself the panel has no honest
-                // position, so it is laid out off-screen rather than at the
-                // origin — an invisible view at 0,0 still catches taps.
-                top: position?.top ?? -9999,
-                left: position?.left ?? -9999,
-                maxWidth: bounds.right - bounds.left,
-                width: resolvedWidth,
-              },
-              panelStyle,
-              props.style,
-            ]}
-            className={cn(
-              'gap-1.5 rounded-2xl border border-border bg-popover p-4 shadow-lg',
-              className
-            )}
-            {...props}
+            style={{
+              position: 'absolute',
+              // Until it has measured itself the panel has no honest position,
+              // so it is laid out off-screen rather than at the origin — an
+              // invisible view at 0,0 still catches taps.
+              top: position?.top ?? -9999,
+              left: position?.left ?? -9999,
+              maxWidth: bounds.right - bounds.left,
+              width: resolvedWidth,
+            }}
           >
-            {children}
+            <Animated.View
+              accessibilityViewIsModal
+              style={[panelStyle, style]}
+              className={cn(
+                'gap-1.5 rounded-2xl border border-border bg-popover p-4 shadow-lg',
+                className
+              )}
+              {...props}
+            >
+              {children}
+            </Animated.View>
           </Animated.View>
         </View>
       </PopoverContext.Provider>

package/src/components/progress/index.tsx

@@ -11,6 +11,8 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { Text } from '../../primitives/text';
+import { cn } from '../../utils/cn';
 
 const SPRING = { damping: 20, stiffness: 180, mass: 0.6 } as const;
 /** Fraction of the track covered by the sliding bar in indeterminate mode. */
@@ -18,6 +20,8 @@ const INDETERMINATE_WIDTH = 0.4;
 
 const progressVariants = tv({
   slots: {
+    root: 'w-full gap-2',
+    header: 'flex-row items-center justify-between',
     track: 'w-full overflow-hidden rounded-full',
     indicator: 'h-full rounded-full',
   },
@@ -53,6 +57,30 @@ export interface ProgressProps
   indeterminate?: boolean;
   /** Extra classes for the moving indicator. */
   indicatorClassName?: string;
+  /**
+   * Caption drawn above the track, on the left. Supplying it (or
+   * `showValueLabel`) wraps the bar in a header row; the track alone renders
+   * otherwise.
+   */
+  label?: string;
+  /**
+   * Draw the percentage above the track, on the right. Hidden while
+   * `indeterminate` — there is nothing meaningful to show.
+   */
+  showValueLabel?: boolean;
+  /**
+   * Text for the value label. Overrides the formatted percentage — use it for
+   * a byte count, a step tally, anything that is not a bare percent.
+   */
+  valueLabel?: string;
+  /**
+   * Format the value label as a fraction of the whole with `Intl.NumberFormat`
+   * — e.g. `{ style: 'currency', currency: 'USD' }`. Falls back to a rounded
+   * percent when omitted.
+   */
+  formatOptions?: Intl.NumberFormatOptions;
+  /** Extra classes for the label + value-label row. */
+  headerClassName?: string;
 }
 
 function clamp(value: number) {
@@ -62,18 +90,43 @@ function clamp(value: number) {
   return value;
 }
 
+/** The right-hand caption: an explicit override, an Intl fraction, or a percent. */
+function formatValue(
+  value: number,
+  valueLabel?: string,
+  formatOptions?: Intl.NumberFormatOptions
+) {
+  if (valueLabel != null) return valueLabel;
+  if (formatOptions) {
+    try {
+      return new Intl.NumberFormat(undefined, formatOptions).format(value / 100);
+    } catch {
+      // Some engines ship a partial Intl; fall through to the plain percent.
+    }
+  }
+  return `${Math.round(value)}%`;
+}
+
 /**
  * Determinate or indeterminate progress bar. The fill width (determinate) and
  * the sliding bar (indeterminate) are both driven on the UI thread, so updates
  * never re-render past the value change itself.
+ *
+ * Pass `label` or `showValueLabel` to caption the bar with a header row; the
+ * bare track renders when neither is set, so existing call sites are untouched.
  */
 export const Progress = forwardRef<View, ProgressProps>(
   (
     {
       className,
       indicatorClassName,
+      headerClassName,
       value = 0,
       indeterminate = false,
+      label,
+      showValueLabel = false,
+      valueLabel,
+      formatOptions,
       color,
       size,
       ...props
@@ -124,10 +177,15 @@ export const Progress = forwardRef<View, ProgressProps>(
       };
     });
 
-    return (
+    // The value label is meaningless while looping, so it is dropped there.
+    const showValue = showValueLabel && !indeterminate;
+    const hasHeader = label != null || showValue;
+
+    const track = (
       <View
         ref={ref}
         accessibilityRole="progressbar"
+        accessibilityLabel={label}
         accessibilityValue={
           indeterminate ? undefined : { min: 0, max: 100, now: clamp(value) }
         }
@@ -141,6 +199,28 @@ export const Progress = forwardRef<View, ProgressProps>(
         />
       </View>
     );
+
+    if (!hasHeader) return track;
+
+    return (
+      <View className={slots.root()}>
+        <View className={slots.header({ className: headerClassName })}>
+          {label != null ? (
+            <Text size="sm" weight="medium" numberOfLines={1}>
+              {label}
+            </Text>
+          ) : (
+            <View />
+          )}
+          {showValue ? (
+            <Text size="sm" muted className={cn(label == null && 'ml-auto')}>
+              {formatValue(clamp(value), valueLabel, formatOptions)}
+            </Text>
+          ) : null}
+        </View>
+        {track}
+      </View>
+    );
   }
 );
 

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

@@ -38,10 +38,14 @@ import { cn } from '../../utils/cn';
 import { Text } from '../../primitives/text';
 
 type RadioVariant = 'dot' | 'card';
+type RadioOrientation = 'vertical' | 'horizontal';
 
 const itemVariants = tv({
   slots: {
-    row: 'flex-row items-center gap-2.5',
+    // `self-start` matters: the group is a column, so without it Yoga stretches
+    // the row to the full width and the dead space to the right of the label
+    // becomes part of the target. Tapping nothing would select the option.
+    row: 'flex-row items-center gap-2.5 self-start',
     indicator:
       'h-5 w-5 items-center justify-center rounded-full border border-input bg-background',
     label: 'text-sm text-foreground',
@@ -52,8 +56,9 @@ const itemVariants = tv({
       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',
+        // as a confirmation of the row, not the affordance for it. Here the
+        // full width is deliberate, so it takes `self-stretch` back.
+        row: 'w-full self-stretch items-start justify-between gap-3 rounded-xl border border-border bg-card p-4',
         label: 'text-base font-medium',
       },
     },
@@ -63,9 +68,19 @@ const itemVariants = tv({
     disabled: {
       true: { row: 'opacity-50' },
     },
+    /**
+     * A card in a row shares the width rather than filling it, so two or three
+     * options sit side by side instead of each taking the whole line.
+     */
+    horizontal: {
+      true: {},
+    },
   },
   compoundVariants: [
     { variant: 'card', selected: true, class: { row: 'border-primary bg-accent' } },
+    // Share the row instead of filling it, keeping the disc on the trailing
+    // edge of each narrower card.
+    { variant: 'card', horizontal: true, class: { row: 'w-auto flex-1' } },
   ],
   defaultVariants: {
     variant: 'dot',
@@ -77,6 +92,7 @@ interface RadioGroupContextValue {
   onValueChange: (value: string) => void;
   disabled?: boolean;
   variant: RadioVariant;
+  orientation: RadioOrientation;
 }
 
 const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
@@ -92,14 +108,32 @@ export interface RadioGroupProps extends ViewProps {
    * settings choice where each option carries a description.
    */
   variant?: RadioVariant;
+  /**
+   * `horizontal` lays the options out along a row that wraps — for two or
+   * three short choices, where a stacked list wastes the width and reads as
+   * longer than it is.
+   */
+  orientation?: RadioOrientation;
   children: ReactNode;
 }
 
 const RadioGroupRoot = forwardRef<View, RadioGroupProps>(
-  ({ className, value, onValueChange, disabled, variant = 'dot', children, ...props }, ref) => {
+  (
+    {
+      className,
+      value,
+      onValueChange,
+      disabled,
+      variant = 'dot',
+      orientation = 'vertical',
+      children,
+      ...props
+    },
+    ref
+  ) => {
     const context = useMemo(
-      () => ({ value, onValueChange, disabled, variant }),
-      [value, onValueChange, disabled, variant]
+      () => ({ value, onValueChange, disabled, variant, orientation }),
+      [value, onValueChange, disabled, variant, orientation]
     );
 
     return (
@@ -107,7 +141,15 @@ const RadioGroupRoot = forwardRef<View, RadioGroupProps>(
         <View
           ref={ref}
           accessibilityRole="radiogroup"
-          className={cn('gap-3', className)}
+          className={cn(
+            orientation === 'horizontal'
+              ? // Wrapping, not scrolling: a choice that runs off the edge is
+                // a choice nobody knows is there. The cross-axis gap is
+                // smaller because wrapped rows already read as separate.
+                'flex-row flex-wrap items-stretch gap-x-5 gap-y-3'
+              : 'gap-3',
+            className
+          )}
           {...props}
         >
           {children}
@@ -156,7 +198,12 @@ const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
       transform: [{ scale: progress.value }],
     }));
 
-    const slots = itemVariants({ variant, selected, disabled: !!disabled });
+    const slots = itemVariants({
+      variant,
+      selected,
+      disabled: !!disabled,
+      horizontal: context.orientation === 'horizontal',
+    });
 
     const indicator = hideIndicator ? null : (
       <View className={slots.indicator()}>