panelui-native 0.7.0 → 0.12.0

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

@@ -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,66 @@ 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';
+type RadioOrientation = 'vertical' | 'horizontal';
+
+const itemVariants = tv({
+  slots: {
+    // `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',
+    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. 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',
+      },
+    },
+    selected: {
+      true: {},
+    },
+    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',
+  },
+});
+
 interface RadioGroupContextValue {
   value: string | undefined;
   onValueChange: (value: string) => void;
   disabled?: boolean;
+  variant: RadioVariant;
+  orientation: RadioOrientation;
 }
 
 const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
@@ -29,14 +102,38 @@ 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;
+  /**
+   * `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, children, ...props }, ref) => {
+  (
+    {
+      className,
+      value,
+      onValueChange,
+      disabled,
+      variant = 'dot',
+      orientation = 'vertical',
+      children,
+      ...props
+    },
+    ref
+  ) => {
     const context = useMemo(
-      () => ({ value, onValueChange, disabled }),
-      [value, onValueChange, disabled]
+      () => ({ value, onValueChange, disabled, variant, orientation }),
+      [value, onValueChange, disabled, variant, orientation]
     );
 
     return (
@@ -44,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}
@@ -59,12 +164,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 +184,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 +198,39 @@ const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
       transform: [{ scale: progress.value }],
     }));
 
+    const slots = itemVariants({
+      variant,
+      selected,
+      disabled: !!disabled,
+      horizontal: context.orientation === 'horizontal',
+    });
+
+    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 +239,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 +252,5 @@ RadioGroupItem.displayName = 'RadioGroup.Item';
 export const RadioGroup = Object.assign(RadioGroupRoot, {
   Item: RadioGroupItem,
 });
+
+export type { RadioVariant };