panelui-native 0.71.0 → 0.75.0

package/src/components/line-chart/index.tsx

@@ -477,11 +477,20 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
                    * One clip for everything in the plot. Sharing it is what
                    * makes the reveal read as the chart arriving, rather than as
                    * three separate things animating in at once.
+                   *
+                   * `width` is set statically as well as animated, and it has
+                   * to be. Animated props on an element inside `Defs` do not
+                   * reach the native clip on every platform, and with the width
+                   * coming only from the animation there is no width at all
+                   * when they do not — an empty clip, and a chart whose marks
+                   * are all invisible while its axes draw normally. Declared,
+                   * the worst case is the reveal not playing.
                    */}
                   <ClipPath id={clipId}>
                     <AnimatedRect
                       x={plot.left}
                       y={0}
+                      width={plot.width}
                       height={size.height}
                       animatedProps={clipProps}
                     />

package/src/components/marker/index.tsx

@@ -100,21 +100,21 @@ const MarkerRoot = forwardRef<View, MarkerProps>(
     const body = !onPress ? (
       <View
         ref={ref}
+        {...(props as ViewProps)}
         accessibilityState={{ disabled: !!disabled }}
         className={root({ className })}
-        {...(props as ViewProps)}
       >
         {inner}
       </View>
     ) : (
       <AnimatedPressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityState={{ disabled: !!disabled }}
         disabled={disabled}
         onPress={onPress}
         className={root({ className })}
-        {...props}
       >
         {inner}
       </AnimatedPressable>

package/src/components/marquee/index.tsx

@@ -62,12 +62,11 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useDirectionSign } from '../../hooks/use-direction';
 import { cn } from '../../utils/cn';
-
-/**
- * Points per second. Slow enough that a word stays readable as it crosses,
- * which is the speed a ticker is actually for.
- */
-const DEFAULT_SPEED = 40;
+import {
+  DEFAULT_MARQUEE_SPEED,
+  marqueeCopyCount,
+  normalizeMarqueeSpeed,
+} from './marquee-math';
 
 export type MarqueeDirection = 'horizontal' | 'vertical';
 
@@ -98,7 +97,7 @@ export interface MarqueeProps extends Omit<ViewProps, 'children'> {
 export function Marquee({
   className,
   children,
-  speed = DEFAULT_SPEED,
+  speed: speedProp = DEFAULT_MARQUEE_SPEED,
   spacing = 0,
   direction = 'horizontal',
   reverse = false,
@@ -115,19 +114,22 @@ export function Marquee({
 
   const [viewport, setViewport] = useState(0);
   const [content, setContent] = useState(0);
+  const speed = normalizeMarqueeSpeed(speedProp);
 
   // The distance from one copy to the same point on the next, and therefore
   // both the layout step and the exact loop length. They are the same number
   // on purpose: taking the gap from anywhere else is how a seam appears.
-  const period = content > 0 ? content + spacing : 0;
+  const layout = useMemo(
+    () => marqueeCopyCount(viewport, content, spacing),
+    [viewport, content, spacing]
+  );
+  const { period } = layout;
 
   const copies = useMemo(() => {
-    if (period <= 0 || viewport <= 0) return [];
     // Enough to span the container, plus one trailing into view and one
     // already past it — the two the travel consumes before the loop restarts.
-    const count = Math.ceil(viewport / period) + 2;
-    return Array.from({ length: count }, (_, index) => index);
-  }, [period, viewport]);
+    return Array.from({ length: layout.count }, (_, index) => index);
+  }, [layout.count]);
 
   const offset = useSharedValue(0);
 

package/src/components/marquee/marquee-math.ts

@@ -0,0 +1,37 @@
+/**
+ * The arithmetic behind the loop, kept out of the component so it can be tested
+ * without rendering one.
+ *
+ * Every value here reaches a Reanimated timing or a layout offset, and both
+ * treat `NaN` and `Infinity` as a frame that never resolves rather than as an
+ * error. A marquee handed a bad number should hold still, not wedge — so the
+ * guards live at the boundary, once, instead of at each use.
+ */
+
+/**
+ * Points per second. Slow enough that a word stays readable as it crosses,
+ * which is the speed a ticker is actually for.
+ */
+export const DEFAULT_MARQUEE_SPEED = 40;
+
+export function normalizeMarqueeSpeed(value: number): number {
+  if (!Number.isFinite(value)) return DEFAULT_MARQUEE_SPEED;
+  return Math.max(value, 0);
+}
+
+export function normalizeMarqueeSpacing(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(value, 0);
+}
+
+export function marqueeCopyCount(
+  viewport: number,
+  content: number,
+  spacing: number
+): { period: number; count: number } {
+  const safeViewport = Number.isFinite(viewport) ? Math.max(viewport, 0) : 0;
+  const safeContent = Number.isFinite(content) ? Math.max(content, 0) : 0;
+  const period = safeContent > 0 ? safeContent + normalizeMarqueeSpacing(spacing) : 0;
+  if (period <= 0 || safeViewport <= 0) return { period, count: 0 };
+  return { period, count: Math.ceil(safeViewport / period) + 2 };
+}

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/otp-input/index.tsx

@@ -38,6 +38,7 @@ import Animated, {
 import { tv, type VariantProps } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import { resolveOtpEditable } from './otp-input-state';
 
 /** Long enough to read as a transition, short enough not to lag a fast type. */
 const FOCUS_DURATION = 150;
@@ -245,6 +246,7 @@ export const OtpInput = forwardRef<TextInput, OtpInputProps>(
       groupEvery = 0,
       size,
       disabled,
+      editable,
       isInvalid,
       errorMessage,
       accessibilityLabel,
@@ -351,7 +353,7 @@ export const OtpInput = forwardRef<TextInput, OtpInputProps>(
             ref={setRef}
             value={value}
             onChangeText={handleChange}
-            editable={!disabled}
+            editable={resolveOtpEditable(editable, disabled)}
             keyboardType={type === 'numeric' ? 'number-pad' : 'default'}
             // The OS one-time-code affordances: iOS surfaces the SMS code above
             // the keyboard, Android offers to autofill it.

package/src/components/otp-input/otp-input-state.ts

@@ -0,0 +1,7 @@
+/** Resolve the native editing state without allowing `disabled` to be bypassed. */
+export function resolveOtpEditable(
+  editable: boolean | undefined,
+  disabled: boolean | undefined
+): boolean {
+  return editable !== false && !disabled;
+}

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;
 }

package/src/components/planner/index.tsx

@@ -115,6 +115,7 @@ import {
   usePlannerMonthLifecycle,
   usePlannerSelectionLifecycle,
 } from './planner-lifecycle';
+import { millisecondsUntilNextLocalDay } from './planner-today';
 
 /** How many of a day's entries a cell draws before it stops and counts. */
 const DEFAULT_ENTRY_LIMIT = 2;
@@ -149,7 +150,13 @@ const dayVariants = tv({
      * Square-ish because a day here holds a number, a marker and sometimes an
      * icon, and a circle wastes the corners it needs for them.
      */
-    cell: 'mx-0.5 h-14 flex-1 rounded-xl px-1.5 pt-1.5',
+    /*
+     * The transparent border is load-bearing: today and the open day both draw
+     * one, and a cell that only grows a border when it is picked shifts its
+     * contents by a point at the moment you look at it. Every cell reserves the
+     * point; the variants below only colour it.
+     */
+    cell: 'mx-0.5 h-14 flex-1 rounded-xl border border-transparent px-1.5 pt-1.5',
     number: 'text-xs leading-none',
     marker: 'absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full',
     body: 'flex-1 flex-row items-center justify-center gap-0.5 pb-1',
@@ -161,13 +168,22 @@ const dayVariants = tv({
       false: { cell: 'bg-muted/15', number: 'text-muted-foreground/40' },
     },
     /*
-     * Today is the number, not the tile. A ring on today and a ring on the
-     * open day are two rings that mean different things and look the same.
+     * Today rings the tile; the open day fills it. Two rings would be the
+     * problem — two channels are not, and the ring is the one that has to
+     * survive being read at a glance across forty-two tiles.
      */
-    today: { true: { number: 'text-primary font-semibold' } },
-    selected: { true: { cell: 'border border-primary/60 bg-primary/10' } },
+    today: { true: { cell: 'border-foreground', number: 'font-semibold' } },
+    selected: { true: { cell: 'border-primary/60 bg-primary/10' } },
     disabled: { true: { cell: 'opacity-40' } },
   },
+  compoundVariants: [
+    /*
+     * Today, and open. Declaration order would otherwise hand the border to
+     * `selected` and lose the one mark that says which day it actually is —
+     * so the ring is restated over the fill.
+     */
+    { today: true, selected: true, class: { cell: 'border-foreground bg-primary/10' } },
+  ],
   defaultVariants: { inMonth: true },
 });
 
@@ -234,21 +250,38 @@ function usePlanner(component: string): PlannerContextValue {
   return context;
 }
 
-/** Today, recomputed when the app comes back rather than only at mount. */
+/** Today, recomputed at local midnight and whenever the app comes back. */
 function useToday(): Date {
   const [today, setToday] = useState(() => startOfDay(new Date()));
 
   useEffect(() => {
-    const refresh = () => {
-      const now = startOfDay(new Date());
+    let timer: ReturnType<typeof setTimeout> | null = null;
+
+    const clearTimer = () => {
+      if (timer === null) return;
+      clearTimeout(timer);
+      timer = null;
+    };
+
+    const refreshAndSchedule = () => {
+      const current = new Date();
+      const now = startOfDay(current);
       // A new object every resume would invalidate every memo below it for a
       // date that has not changed.
-      setToday((current) => (current.getTime() === now.getTime() ? current : now));
+      setToday((previous) => (previous.getTime() === now.getTime() ? previous : now));
+      clearTimer();
+      timer = setTimeout(refreshAndSchedule, millisecondsUntilNextLocalDay(current));
     };
+
+    refreshAndSchedule();
     const subscription = AppState.addEventListener('change', (state) => {
-      if (state === 'active') refresh();
+      if (state === 'active') refreshAndSchedule();
+      else clearTimer();
     });
-    return () => subscription.remove();
+    return () => {
+      clearTimer();
+      subscription.remove();
+    };
   }, []);
 
   return today;

package/src/components/planner/planner-today.ts

@@ -0,0 +1,5 @@
+export function millisecondsUntilNextLocalDay(now: Date): number {
+  const next = new Date(now);
+  next.setHours(24, 0, 0, 0);
+  return Math.max(next.getTime() - now.getTime(), 1);
+}