panelui-native 0.9.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

@@ -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()}>