panelui-native 0.68.0 → 0.73.0

package/src/components/menu/index.tsx

@@ -451,6 +451,8 @@ export function MenuItem({
   closeOnSelect = true,
   onSelect,
   onPress,
+  onPressIn,
+  onPressOut,
   ...props
 }: MenuItemProps) {
   const { close, haptics } = useMenu('Menu.Item');
@@ -467,15 +469,21 @@ export function MenuItem({
 
   return (
     <AnimatedPressable
+      {...props}
       accessibilityRole="menuitem"
       accessibilityState={{ disabled }}
       disabled={disabled}
       onPress={handlePress}
-      onPressIn={press.onPressIn}
-      onPressOut={press.onPressOut}
+      onPressIn={(event) => {
+        onPressIn?.(event);
+        press.onPressIn();
+      }}
+      onPressOut={(event) => {
+        onPressOut?.(event);
+        press.onPressOut();
+      }}
       style={press.rowStyle}
       className={cn(slots.item(), 'overflow-hidden', className)}
-      {...props}
     >
       <Animated.View
         pointerEvents="none"

package/src/components/meter/index.tsx

@@ -11,16 +11,21 @@ import Animated, {
 import { tv, type VariantProps } from 'tailwind-variants';
 import { Text } from '../../primitives/text';
 import {
-  clamp,
   colorFor,
-  fractionOf,
-  formatValue,
   litSegments,
+  meterSemantics,
+  normalizeScale,
+  normalizeSegments,
   type MeterColor,
   type MeterThreshold,
 } from './meter-scale';
 
-const SPRING = { damping: 20, stiffness: 180, mass: 0.6 } as const;
+const SPRING = {
+  damping: 20,
+  stiffness: 180,
+  mass: 0.6,
+  overshootClamping: true,
+} as const;
 /** Milliseconds for a segment to light or go out. */
 const SEGMENT_DURATION = 180;
 /** How faint an unlit segment sits. Present, but plainly not counted. */
@@ -32,7 +37,7 @@ const meterVariants = tv({
     header: 'flex-row items-center justify-between gap-2',
     track: 'w-full overflow-hidden rounded-full',
     indicator: 'h-full rounded-full',
-    segments: 'w-full flex-row',
+    segments: 'w-full flex-row overflow-hidden',
     segment: 'flex-1 rounded-full',
   },
   variants: {
@@ -70,7 +75,7 @@ export interface MeterProps
   extends Omit<ViewProps, 'children'>,
     MeterVariantProps {
   className?: string;
-  /** The measurement, somewhere between `minValue` and `maxValue`. */
+  /** The measurement. Values outside the scale are clamped to its ends. */
   value: number;
   /**
    * The bottom of the scale — the value at which the bar reads as empty.
@@ -111,7 +116,8 @@ export interface MeterProps
   /**
    * Points on the scale where the colour changes, each `{ from, color }`. The
    * highest one the reading has reached wins, so the order you list them in
-   * does not matter; below all of them the `color` prop applies.
+   * does not matter; below all of them the `color` prop applies. Non-finite
+   * `from` values are ignored.
    *
    * This is the difference between a meter and a bar: the colour is a
    * judgement about the reading. Which direction is bad is yours to say —
@@ -125,8 +131,10 @@ export interface MeterProps
    * say "three out of four" where a bar says "about seventy percent", and a
    * password is not seventy percent strong.
    *
-   * Any value above the floor lights at least one block, so a reading that
-   * is not empty never looks it.
+   * Fractional counts round down and counts above 100 clamp to 100. Invalid,
+   * non-positive, or sub-one counts use the continuous bar. Any value above
+   * the floor lights at least one block, so a reading that is not empty never
+   * looks it.
    */
   segments?: number;
   /** Extra classes for the fill, or for a lit segment. */
@@ -207,8 +215,9 @@ export const Meter = forwardRef<View, MeterProps>(
     },
     ref
   ) => {
-    const held = clamp(value, minValue, maxValue);
-    const fraction = fractionOf(value, minValue, maxValue);
+    const scale = normalizeScale(value, minValue, maxValue);
+    const { value: held, fraction } = scale;
+    const segmentCount = normalizeSegments(segments);
     const resolvedColor = colorFor(held, color ?? 'primary', thresholds);
     const slots = meterVariants({ color: resolvedColor, size });
     const reducedMotion = useReducedMotion();
@@ -218,7 +227,7 @@ export const Meter = forwardRef<View, MeterProps>(
     // Any reading above the floor lights a block, so "a little" never looks
     // like "none". Rounding down would leave the first quarter of a
     // four-block meter dark, which is the reading it is least able to afford.
-    const litCount = segments ? litSegments(fraction, segments) : 0;
+    const litCount = litSegments(fraction, segmentCount);
     const lit = useSharedValue(litCount);
 
     // Reduce motion lands on the value instead of springing to it — the
@@ -232,39 +241,47 @@ export const Meter = forwardRef<View, MeterProps>(
     }, [lit, litCount]);
 
     const onLayout = (event: LayoutChangeEvent) => {
-      trackWidth.value = event.nativeEvent.layout.width;
+      const width = event.nativeEvent.layout.width;
+      trackWidth.value = Number.isFinite(width) && width > 0 ? width : 0;
     };
 
     const fillStyle = useAnimatedStyle(() => ({
       width: trackWidth.value * progress.value,
     }));
 
-    const spoken = formatValue(held, fraction, valueLabel, formatOptions);
+    const semantics = meterSemantics({
+      value: held,
+      fraction,
+      // The normalized ends, not the raw props: an invalid scale is repaired
+      // for the bar, and the spoken reading has to describe the same one.
+      minValue: scale.min,
+      maxValue: scale.max,
+      label,
+      accessibilityLabel,
+      valueLabel,
+      formatOptions,
+    });
+    const spoken = semantics.text;
     const showValue = showValueLabel;
     const hasHeader = label != null || showValue;
 
     const accessibility = {
       accessibilityRole: 'progressbar' as const,
-      accessibilityLabel: accessibilityLabel ?? label,
-      accessibilityValue: {
-        min: minValue,
-        max: maxValue,
-        now: held,
-        // Without this the scale is read as a bare number. `text` is what
-        // carries the unit — the percent sign, the gigabytes, the word.
-        text: spoken,
-      },
+      accessibilityLabel: semantics.label,
+      // `text` carries the unit or word and intentionally overrides the
+      // platform's generic rendering of this numeric range.
+      accessibilityValue: semantics.value,
     };
 
     const bar =
-      segments && segments > 0 ? (
+      segmentCount > 0 ? (
         <View
           ref={ref}
           {...accessibility}
           className={slots.segments({ className })}
           {...props}
         >
-          {Array.from({ length: segments }, (_, index) => (
+          {Array.from({ length: segmentCount }, (_, index) => (
             <Segment
               key={index}
               index={index}
@@ -293,7 +310,13 @@ export const Meter = forwardRef<View, MeterProps>(
 
     return (
       <View className={slots.root()}>
-        <View className={slots.header({ className: headerClassName })}>
+        <View
+          className={slots.header({ className: headerClassName })}
+          // This is the visual rendering of the name and value already owned
+          // by the bar below. Hiding the subtree keeps one concise focus stop.
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
           {label != null ? (
             <Text size="sm" weight="medium" numberOfLines={1}>
               {label}

package/src/components/meter/meter-scale.ts

@@ -29,11 +29,55 @@ export interface MeterThreshold {
   color: MeterColor;
 }
 
+/** A bounded block count keeps malformed input from allocating without limit. */
+export const MAX_METER_SEGMENTS = 100;
+
+export interface MeterScale {
+  min: number;
+  max: number;
+  value: number;
+  fraction: number;
+}
+
+/**
+ * Make a public scale safe for layout, animation and native accessibility.
+ * Invalid bounds fall back to their documented defaults; if those still do
+ * not produce a positive span, the scale honestly collapses at its floor.
+ */
+export function normalizeScale(value: number, min: number, max: number): MeterScale {
+  const floor = Number.isFinite(min) ? min : 0;
+  const candidateMax = Number.isFinite(max) ? max : 100;
+  const ceiling = candidateMax > floor ? candidateMax : floor;
+  const held = Number.isNaN(value)
+    ? floor
+    : value === Number.POSITIVE_INFINITY
+      ? ceiling
+      : value === Number.NEGATIVE_INFINITY
+        ? floor
+        : Math.min(Math.max(value, floor), ceiling);
+  const magnitude = Math.max(Math.abs(floor), Math.abs(ceiling), 1);
+  const position =
+    ceiling > floor
+      ? (held / magnitude - floor / magnitude) /
+        (ceiling / magnitude - floor / magnitude)
+      : 0;
+  return {
+    min: floor,
+    max: ceiling,
+    value: held,
+    fraction: Math.min(Math.max(position, 0), 1),
+  };
+}
+
+/** Positive counts are whole and bounded; zero means the continuous meter. */
+export function normalizeSegments(segments: number | undefined) {
+  if (segments == null || !Number.isFinite(segments) || !(segments > 0)) return 0;
+  return Math.min(Math.floor(segments), MAX_METER_SEGMENTS);
+}
+
 /** `value` held inside the scale, so a stray number cannot escape the track. */
 export function clamp(value: number, min: number, max: number) {
-  if (!(value > min)) return min;
-  if (value > max) return max;
-  return value;
+  return normalizeScale(value, min, max).value;
 }
 
 /**
@@ -41,9 +85,7 @@ export function clamp(value: number, min: number, max: number) {
  * meaningful position in it, so it reads as empty rather than dividing by zero.
  */
 export function fractionOf(value: number, min: number, max: number) {
-  const span = max - min;
-  if (!(span > 0)) return 0;
-  return clamp((value - min) / span, 0, 1);
+  return normalizeScale(value, min, max).fraction;
 }
 
 /**
@@ -62,6 +104,7 @@ export function colorFor(
   if (!thresholds?.length) return base;
   let winner: MeterThreshold | undefined;
   for (const threshold of thresholds) {
+    if (!Number.isFinite(threshold.from)) continue;
     if (value < threshold.from) continue;
     if (!winner || threshold.from > winner.from) winner = threshold;
   }
@@ -77,8 +120,10 @@ export function colorFor(
  * wrong.
  */
 export function litSegments(fraction: number, segments: number) {
-  if (!(segments > 0)) return 0;
-  return Math.min(Math.ceil(fraction * segments), segments);
+  const count = normalizeSegments(segments);
+  if (count === 0 || Number.isNaN(fraction) || fraction <= 0) return 0;
+  if (!Number.isFinite(fraction) || fraction >= 1) return count;
+  return Math.min(Math.ceil(fraction * count), count);
 }
 
 /**
@@ -107,3 +152,34 @@ export function formatValue(
   }
   return `${Math.round(fraction * 100)}%`;
 }
+
+/**
+ * The meter's single spoken contract. Visual treatments such as segments,
+ * thresholds and motion do not belong here: they do not change the reading.
+ */
+export function meterSemantics({
+  value,
+  fraction,
+  minValue,
+  maxValue,
+  label,
+  accessibilityLabel,
+  valueLabel,
+  formatOptions,
+}: {
+  value: number;
+  fraction: number;
+  minValue: number;
+  maxValue: number;
+  label?: string;
+  accessibilityLabel?: string;
+  valueLabel?: string;
+  formatOptions?: Intl.NumberFormatOptions;
+}) {
+  const text = formatValue(value, fraction, valueLabel, formatOptions);
+  return {
+    label: accessibilityLabel ?? label,
+    text,
+    value: { min: minValue, max: maxValue, now: value, text },
+  };
+}

package/src/components/pagination/index.tsx

@@ -367,7 +367,7 @@ export interface PaginationItemProps
  * are on, so the current page is spoken as state rather than only painted.
  */
 const PaginationItem = forwardRef<View, PaginationItemProps>(
-  ({ className, labelClassName, page, children, ...props }, ref) => {
+  ({ className, labelClassName, page, children, onPress, ...props }, ref) => {
     const { page: current, size, disabled, goTo } = usePagination('Pagination.Item');
     const isCurrent = page === current;
     const { item, itemLabel } = paginationVariants({ size, current: isCurrent, disabled });
@@ -375,14 +375,17 @@ const PaginationItem = forwardRef<View, PaginationItemProps>(
     return (
       <AnimatedPressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityLabel={`Page ${page}`}
         accessibilityState={{ selected: isCurrent, disabled }}
         disabled={disabled}
         hitSlop={size === 'sm' ? SMALL_HIT_SLOP : undefined}
-        onPress={() => goTo(page)}
+        onPress={(event) => {
+          onPress?.(event);
+          goTo(page);
+        }}
         className={item({ className })}
-        {...props}
       >
         {textChildren(children ?? String(page), (text) => (
           <Text className={itemLabel({ className: labelClassName })}>{text}</Text>
@@ -437,23 +440,29 @@ function PaginationArrow({
   word,
   className,
   label,
+  disabled,
+  onPress,
   ...props
 }: PaginationArrowProps & { step: -1 | 1; part: string; word: string }) {
   const { Glyph, size, spent, color, press } = useArrow(step, part);
-  const { item, itemLabel } = paginationVariants({ size, disabled: spent });
+  const isDisabled = Boolean(spent || disabled);
+  const { item, itemLabel } = paginationVariants({ size, disabled: isDisabled });
 
   return (
     <AnimatedPressable
+      {...props}
       accessibilityRole="button"
       accessibilityLabel={word}
-      accessibilityState={{ disabled: spent }}
-      disabled={spent}
+      accessibilityState={{ disabled: isDisabled }}
+      disabled={isDisabled}
       hitSlop={size === 'sm' ? SMALL_HIT_SLOP : undefined}
-      onPress={press}
+      onPress={(event) => {
+        onPress?.(event);
+        press();
+      }}
       className={item({
         className: cn('flex-row gap-1', label && (size === 'sm' ? 'px-2' : 'px-3'), className),
       })}
-      {...props}
     >
       {step === -1 ? <Glyph size={iconSize[size]} color={color} /> : null}
       {label ? <Text className={itemLabel()}>{word}</Text> : null}
@@ -489,24 +498,28 @@ export interface PaginationEllipsisProps
  * that always went forwards would strand anyone reading the row right to left.
  */
 const PaginationEllipsis = forwardRef<View, PaginationEllipsisProps>(
-  ({ className, direction = 1, jump = 5, ...props }, ref) => {
+  ({ className, direction = 1, jump = 5, disabled: disabledProp, onPress, ...props }, ref) => {
     const { page, size, disabled, goTo } = usePagination('Pagination.Ellipsis');
     const color = useCSSVariable('--color-muted-foreground');
     const { ellipsis } = paginationVariants({ size });
+    const isDisabled = Boolean(disabled || disabledProp);
 
     return (
       <AnimatedPressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityLabel={
           direction === -1 ? `Back ${jump} pages` : `Forward ${jump} pages`
         }
-        accessibilityState={{ disabled }}
-        disabled={disabled}
+        accessibilityState={{ disabled: isDisabled }}
+        disabled={isDisabled}
         hitSlop={size === 'sm' ? SMALL_HIT_SLOP : undefined}
-        onPress={() => goTo(page + direction * jump)}
+        onPress={(event) => {
+          onPress?.(event);
+          goTo(page + direction * jump);
+        }}
         className={ellipsis({ className })}
-        {...props}
       >
         <EllipsisIcon
           size={iconSize[size]}

package/src/components/panelside/index.tsx

@@ -1412,6 +1412,7 @@ function PanelsideTrigger({
   className,
   label = 'Open navigation panel',
   children,
+  onPress,
   ...props
 }: PanelsideTriggerProps) {
   const { toggle, docked } = usePanelsideContext('Panelside.Trigger');
@@ -1426,6 +1427,7 @@ function PanelsideTrigger({
     return cloneElement(children, {
       onPress: (...args: unknown[]) => {
         children.props.onPress?.(...args);
+        onPress?.(...(args as Parameters<NonNullable<PressableProps['onPress']>>));
         toggle();
       },
     });
@@ -1433,11 +1435,14 @@ function PanelsideTrigger({
 
   return (
     <AnimatedPressable
-      onPress={toggle}
+      {...props}
+      onPress={(event) => {
+        onPress?.(event);
+        toggle();
+      }}
       className={cn('h-10 w-10 items-center justify-center rounded-full', className)}
       accessibilityRole="button"
       accessibilityLabel={label}
-      {...props}
     >
       <MenuIcon size={20} color={color} />
     </AnimatedPressable>

package/src/components/plan/index.tsx

@@ -285,7 +285,7 @@ function PlanIcon({ className, children, ...props }: PlanIconProps) {
   );
 }
 
-export interface PlanTitleProps extends ViewProps {
+export interface PlanTitleProps extends TextProps {
   className?: string;
   children?: ReactNode;
 }
@@ -306,7 +306,7 @@ function PlanTitle({ className, children, ...props }: PlanTitleProps) {
   );
 }
 
-export interface PlanDescriptionProps extends ViewProps {
+export interface PlanDescriptionProps extends TextProps {
   className?: string;
   children?: ReactNode;
 }