panelui-native 0.76.0 → 0.78.0

package/lib/module/components/progress-button/index.js

@@ -0,0 +1,390 @@
+"use strict";
+
+/**
+ * ProgressButton — press and hold to confirm, with the wait drawn on the button.
+ *
+ * ```tsx
+ * <ProgressButton onComplete={wipe}>
+ *   <ProgressButton.Label>Hold to erase</ProgressButton.Label>
+ * </ProgressButton>
+ * ```
+ *
+ * For the action a confirmation dialog exists to slow down. A dialog asks the
+ * question somewhere else and takes the answer as a tap — which is two taps,
+ * and two taps in a row is a rhythm a hand falls into. A hold cannot be
+ * completed by accident and cannot be completed by habit: it has to be
+ * sustained, and the fill says for how much longer.
+ *
+ * ## The fill is the promise
+ *
+ * Nothing fires until the fill reaches the end. There is no tolerance near the
+ * top, because a tolerance means the button sometimes commits after the reader
+ * has deliberately let go — which is the one failure a confirmation control
+ * cannot have. Released early, the fill drains back, in proportion to how far
+ * it got.
+ *
+ * ## How it is drawn
+ *
+ * The fill is a clipped copy of the button in inverted colours, growing from
+ * the leading edge. That is what keeps the label legible across the boundary:
+ * a single label under a translucent wash goes muddy in the middle of the
+ * wipe, exactly where the eye is. Two labels, each at full contrast on its own
+ * ground, never do.
+ *
+ * The clip is a view under `overflow: 'hidden'`, and its width is animated.
+ * Animating a width is normally a layout pass per frame; this view is
+ * absolutely positioned over the button and its copy of the label is pinned to
+ * the button's own width, so nothing it contains reflows as it grows.
+ *
+ * ## Reduced motion
+ *
+ * The wipe is replaced by a stepped fill that advances in fifths. The hold
+ * still has to be legible — a control that asks you to wait and shows nothing
+ * is a broken button — so this is a coarser indicator, not the absence of one.
+ */
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, { Easing, cancelAnimation, runOnJS, useAnimatedReaction, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+import { Text, textChildren } from "../../primitives/text.js";
+import { impactKnock, selectionTick } from "../../utils/haptics.js";
+import { DEFAULT_AUTO_RESET_DELAY, DEFAULT_RELEASE_DURATION, releaseDuration, resolveHoldDuration } from "./progress-button-hold.js";
+
+/** How many steps the reduced-motion fill advances in. */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const REDUCED_STEPS = 5;
+const progressButtonVariants = tv({
+  slots: {
+    /*
+     * A pill, not the `rounded-lg` the other buttons take.
+     *
+     * The fill is clipped by this radius, so the shape of the button is also
+     * the shape of the wipe's leading edge as it comes out of the corner. On a
+     * small radius that edge emerges square from a rounded box, which reads as
+     * a rectangle sliding out from under the button rather than as the button
+     * filling up.
+     */
+    root: 'relative overflow-hidden rounded-full border',
+    /*
+     * The row inside the button. It is separate from `root` because the fill
+     * has to sit over the whole button including its padding — a wipe that
+     * stops at the text's own box leaves an unfilled margin down each side and
+     * reads as a progress bar someone put inside a button.
+     */
+    content: 'flex-row items-center justify-center gap-2',
+    label: 'min-w-0 shrink text-center font-medium',
+    /** The inverted copy, drawn on the filled ground. */
+    fill: '',
+    fillLabel: 'min-w-0 shrink text-center font-medium'
+  },
+  variants: {
+    variant: {
+      primary: {
+        root: 'border-primary bg-transparent',
+        label: 'text-primary',
+        fill: 'bg-primary',
+        fillLabel: 'text-primary-foreground'
+      },
+      secondary: {
+        root: 'border-transparent bg-secondary',
+        label: 'text-secondary-foreground',
+        fill: 'bg-foreground',
+        fillLabel: 'text-background'
+      },
+      destructive: {
+        root: 'border-destructive bg-transparent',
+        label: 'text-destructive',
+        fill: 'bg-destructive',
+        fillLabel: 'text-destructive-solid-foreground'
+      },
+      success: {
+        root: 'border-success bg-transparent',
+        label: 'text-success',
+        fill: 'bg-success',
+        fillLabel: 'text-success-solid-foreground'
+      }
+    },
+    size: {
+      // Matched to Button's boxes, and `min-h-*` for the same reason: the
+      // label's glyphs grow with the system text size and the box has to grow
+      // with them.
+      // Wider than the equivalent Button, because the corner is a half-circle
+      // rather than a small radius: the curve eats into the side padding, and
+      // at Button's values the first and last glyphs sit against it.
+      sm: {
+        root: 'min-h-9',
+        content: 'min-h-9 gap-1.5 px-3.5 py-2',
+        label: 'text-[14px]',
+        fillLabel: 'text-[14px]'
+      },
+      md: {
+        root: 'min-h-11',
+        content: 'min-h-11 px-5 py-2.5',
+        label: 'text-[16px]',
+        fillLabel: 'text-[16px]'
+      },
+      lg: {
+        root: 'min-h-12',
+        content: 'min-h-12 px-7 py-2.5',
+        label: 'text-[18px]',
+        fillLabel: 'text-[18px]'
+      }
+    },
+    fullWidth: {
+      true: {
+        root: 'w-full'
+      }
+    },
+    disabled: {
+      true: {
+        root: 'opacity-[0.64]'
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md'
+  }
+});
+
+/** How a progress button looks. */
+
+/** How big a progress button is. */
+
+const ProgressButtonContext = /*#__PURE__*/createContext(null);
+function useProgressButtonContext(component) {
+  const context = useContext(ProgressButtonContext);
+  if (!context) throw new Error(`${component} must be used within a <ProgressButton>`);
+  return context;
+}
+
+/** How far through the hold this button is, for something rendered inside it. */
+export function useProgressButton() {
+  const {
+    progress,
+    completed
+  } = useProgressButtonContext('useProgressButton');
+  return {
+    progress,
+    completed
+  };
+}
+const ProgressButtonRoot = /*#__PURE__*/forwardRef(function ProgressButtonRoot({
+  className,
+  variant = 'primary',
+  size = 'md',
+  fullWidth,
+  holdDuration,
+  onComplete,
+  onCompletedChange,
+  completed: completedProp,
+  autoReset = false,
+  autoResetDelay = DEFAULT_AUTO_RESET_DELAY,
+  disabled = false,
+  haptics = false,
+  accessibilityState,
+  children,
+  ...props
+}, ref) {
+  const slots = progressButtonVariants({
+    variant,
+    size,
+    fullWidth,
+    disabled
+  });
+  const duration = resolveHoldDuration(holdDuration);
+  const reducedMotion = useReducedMotion();
+  const progress = useSharedValue(0);
+  const [width, setWidth] = useState(0);
+  const [internalCompleted, setInternalCompleted] = useState(false);
+  const resetTimer = useRef(null);
+  const isControlled = completedProp !== undefined;
+  const completed = isControlled ? completedProp : internalCompleted;
+  const finish = useCallback(() => {
+    if (!isControlled) setInternalCompleted(true);
+    onCompletedChange?.(true);
+    onComplete?.();
+    if (haptics) impactKnock();
+  }, [isControlled, onComplete, onCompletedChange, haptics]);
+
+  /*
+   * Completion is read off the animation rather than timed alongside it.
+   *
+   * A `setTimeout` for `holdDuration` and a fill for `holdDuration` are two
+   * clocks that agree only while the app is idle: the moment the JS thread is
+   * busy the button fires before the fill arrives, or the fill sits full while
+   * nothing happens. The reaction fires on the frame the value actually
+   * reaches the end, which is the frame the reader saw it get there.
+   */
+  useAnimatedReaction(() => progress.value >= 1, (full, was) => {
+    if (full && !was) runOnJS(finish)();
+  });
+  const begin = useCallback(() => {
+    if (disabled || completed) return;
+    if (haptics) selectionTick();
+    cancelAnimation(progress);
+    if (reducedMotion) {
+      /*
+       * Stepped rather than smooth, and still a real indicator. What reduced
+       * motion is about is continuous movement, not the button telling you how
+       * much longer to wait — take that away and the control asks for a hold
+       * with nothing on screen to say why.
+       */
+      progress.value = withTiming(1, {
+        duration,
+        easing: Easing.steps(REDUCED_STEPS, true)
+      });
+      return;
+    }
+    // Linear. A fill is constant motion, and an eased one misreports the wait:
+    // it races the first half and crawls the second, or the reverse.
+    progress.value = withTiming(1, {
+      duration,
+      easing: Easing.linear
+    });
+  }, [disabled, completed, haptics, progress, reducedMotion, duration]);
+  const abandon = useCallback(() => {
+    cancelAnimation(progress);
+    if (progress.value <= 0) return;
+    progress.value = withTiming(0, {
+      // Proportional to how far it got. A fixed release makes a hold abandoned
+      // after a moment feel sticky, which reads as the button resisting.
+      duration: releaseDuration(progress.value, DEFAULT_RELEASE_DURATION),
+      easing: Easing.out(Easing.cubic)
+    });
+  }, [progress]);
+  const reset = useCallback(() => {
+    cancelAnimation(progress);
+    progress.value = 0;
+    if (!isControlled) setInternalCompleted(false);
+    onCompletedChange?.(false);
+  }, [progress, isControlled, onCompletedChange]);
+  useEffect(() => {
+    if (!completed || !autoReset) return;
+    resetTimer.current = setTimeout(reset, autoResetDelay);
+    return () => {
+      if (resetTimer.current) clearTimeout(resetTimer.current);
+      resetTimer.current = null;
+    };
+  }, [completed, autoReset, autoResetDelay, reset]);
+
+  // A controlled button told it is no longer complete has to empty its fill,
+  // or the next hold starts from a bar that is already full.
+  useEffect(() => {
+    if (!completed) return;
+    progress.value = 1;
+  }, [completed, progress]);
+  useEffect(() => () => {
+    cancelAnimation(progress);
+    if (resetTimer.current) clearTimeout(resetTimer.current);
+  }, [progress]);
+  const onLayout = event => {
+    const next = Math.round(event.nativeEvent.layout.width);
+    setWidth(current => current === next ? current : next);
+    props.onLayout?.(event);
+  };
+  const context = useMemo(() => ({
+    progress,
+    width,
+    completed,
+    variant,
+    size,
+    slots
+  }), [progress, width, completed, variant, size, slots]);
+  const body = children ?? /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(ProgressButtonLabel, {
+      children: "Hold to confirm"
+    })
+  });
+  return /*#__PURE__*/_jsx(ProgressButtonContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      ref: ref,
+      accessibilityRole: "button"
+      /*
+       * Spoken as what it is. A button whose label says "Hold to confirm"
+       * still announces as an ordinary button to anyone who cannot see the
+       * fill, and a single activation does nothing — so the hint carries the
+       * instruction and the state carries the outcome.
+       */,
+      accessibilityHint: "Press and hold to confirm",
+      accessibilityState: {
+        ...accessibilityState,
+        disabled,
+        checked: completed
+      },
+      disabled: disabled,
+      onPressIn: begin,
+      onPressOut: abandon
+      // A few points of drift should not abandon a hold the reader is
+      // still making. Fingers move.
+      ,
+      pressRetentionOffset: 16,
+      ...props,
+      onLayout: onLayout,
+      className: slots.root({
+        className
+      }),
+      children: body
+    })
+  });
+});
+/**
+ * What the button says, drawn twice.
+ *
+ * The second copy is the one inside the fill, in the inverted colour, pinned to
+ * the button's own width and clipped to however far the hold has got. Both are
+ * the same text at the same position, so the boundary between them falls in the
+ * middle of a glyph rather than between two differently laid-out lines.
+ */
+function ProgressButtonLabel({
+  className,
+  children,
+  ...props
+}) {
+  const {
+    progress,
+    width,
+    slots
+  } = useProgressButtonContext('ProgressButton.Label');
+  const fillStyle = useAnimatedStyle(() => ({
+    width: width * progress.value
+  }));
+  return /*#__PURE__*/_jsxs(View, {
+    ...props,
+    className: slots.content({
+      className
+    }),
+    children: [textChildren(children, text => /*#__PURE__*/_jsx(Text, {
+      className: slots.label(),
+      children: text
+    })), /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        overflow: 'hidden'
+      }, fillStyle],
+      className: slots.fill(),
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          width
+        },
+        className: slots.content(),
+        children: textChildren(children, text => /*#__PURE__*/_jsx(Text, {
+          className: slots.fillLabel(),
+          children: text
+        }))
+      })
+    })]
+  });
+}
+ProgressButtonLabel.displayName = 'ProgressButton.Label';
+ProgressButtonRoot.displayName = 'ProgressButton';
+export const ProgressButton = Object.assign(ProgressButtonRoot, {
+  Label: ProgressButtonLabel
+});
+export { DEFAULT_AUTO_RESET_DELAY, DEFAULT_HOLD_DURATION, DEFAULT_RELEASE_DURATION, isComplete, releaseDuration, resolveHoldDuration } from "./progress-button-hold.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/progress-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","forwardRef","useCallback","useContext","useEffect","useMemo","useRef","useState","Pressable","View","Animated","Easing","cancelAnimation","runOnJS","useAnimatedReaction","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","tv","Text","textChildren","impactKnock","selectionTick","DEFAULT_AUTO_RESET_DELAY","DEFAULT_RELEASE_DURATION","releaseDuration","resolveHoldDuration","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","REDUCED_STEPS","progressButtonVariants","slots","root","content","label","fill","fillLabel","variants","variant","primary","secondary","destructive","success","size","sm","md","lg","fullWidth","true","disabled","defaultVariants","ProgressButtonContext","useProgressButtonContext","component","context","Error","useProgressButton","progress","completed","ProgressButtonRoot","className","holdDuration","onComplete","onCompletedChange","completedProp","autoReset","autoResetDelay","haptics","accessibilityState","children","props","ref","duration","reducedMotion","width","setWidth","internalCompleted","setInternalCompleted","resetTimer","isControlled","undefined","finish","value","full","was","begin","easing","steps","linear","abandon","out","cubic","reset","current","setTimeout","clearTimeout","onLayout","event","next","Math","round","nativeEvent","layout","body","ProgressButtonLabel","Provider","accessibilityRole","accessibilityHint","checked","onPressIn","onPressOut","pressRetentionOffset","fillStyle","text","pointerEvents","style","position","top","bottom","left","overflow","displayName","ProgressButton","Object","assign","Label","DEFAULT_HOLD_DURATION","isComplete"],"sourceRoot":"../../../../src","sources":["components/progress-button/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAEH,OAAO;AACd,SACEC,SAAS,EACTC,IAAI,QAIC,cAAc;AACrB,OAAOC,QAAQ,IACbC,MAAM,EACNC,eAAe,EACfC,OAAO,EACPC,mBAAmB,EACnBC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,QAEL,yBAAyB;AAChC,SAASC,EAAE,QAA2B,mBAAmB;AACzD,SAASC,IAAI,EAAEC,YAAY,QAAQ,0BAAuB;AAE1D,SAASC,WAAW,EAAEC,aAAa,QAAQ,wBAAqB;AAChE,SACEC,wBAAwB,EACxBC,wBAAwB,EACxBC,eAAe,EACfC,mBAAmB,QACd,2BAAwB;;AAE/B;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,MAAMC,aAAa,GAAG,CAAC;AAEvB,MAAMC,sBAAsB,GAAGhB,EAAE,CAAC;EAChCiB,KAAK,EAAE;IACL;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACIC,IAAI,EAAE,8CAA8C;IACpD;AACJ;AACA;AACA;AACA;AACA;IACIC,OAAO,EAAE,4CAA4C;IACrDC,KAAK,EAAE,wCAAwC;IAC/C;IACAC,IAAI,EAAE,EAAE;IACRC,SAAS,EAAE;EACb,CAAC;EACDC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;QACPP,IAAI,EAAE,+BAA+B;QACrCE,KAAK,EAAE,cAAc;QACrBC,IAAI,EAAE,YAAY;QAClBC,SAAS,EAAE;MACb,CAAC;MACDI,SAAS,EAAE;QACTR,IAAI,EAAE,iCAAiC;QACvCE,KAAK,EAAE,2BAA2B;QAClCC,IAAI,EAAE,eAAe;QACrBC,SAAS,EAAE;MACb,CAAC;MACDK,WAAW,EAAE;QACXT,IAAI,EAAE,mCAAmC;QACzCE,KAAK,EAAE,kBAAkB;QACzBC,IAAI,EAAE,gBAAgB;QACtBC,SAAS,EAAE;MACb,CAAC;MACDM,OAAO,EAAE;QACPV,IAAI,EAAE,+BAA+B;QACrCE,KAAK,EAAE,cAAc;QACrBC,IAAI,EAAE,YAAY;QAClBC,SAAS,EAAE;MACb;IACF,CAAC;IACDO,IAAI,EAAE;MACJ;MACA;MACA;MACA;MACA;MACA;MACAC,EAAE,EAAE;QACFZ,IAAI,EAAE,SAAS;QACfC,OAAO,EAAE,6BAA6B;QACtCC,KAAK,EAAE,aAAa;QACpBE,SAAS,EAAE;MACb,CAAC;MACDS,EAAE,EAAE;QACFb,IAAI,EAAE,UAAU;QAChBC,OAAO,EAAE,sBAAsB;QAC/BC,KAAK,EAAE,aAAa;QACpBE,SAAS,EAAE;MACb,CAAC;MACDU,EAAE,EAAE;QACFd,IAAI,EAAE,UAAU;QAChBC,OAAO,EAAE,sBAAsB;QAC/BC,KAAK,EAAE,aAAa;QACpBE,SAAS,EAAE;MACb;IACF,CAAC;IACDW,SAAS,EAAE;MACTC,IAAI,EAAE;QAAEhB,IAAI,EAAE;MAAS;IACzB,CAAC;IACDiB,QAAQ,EAAE;MACRD,IAAI,EAAE;QAAEhB,IAAI,EAAE;MAAiB;IACjC;EACF,CAAC;EACDkB,eAAe,EAAE;IACfZ,OAAO,EAAE,SAAS;IAClBK,IAAI,EAAE;EACR;AACF,CAAC,CAAC;;AAIF;;AAEA;;AAcA,MAAMQ,qBAAqB,gBAAGxD,aAAa,CAAoC,IAAI,CAAC;AAEpF,SAASyD,wBAAwBA,CAACC,SAAiB,EAA8B;EAC/E,MAAMC,OAAO,GAAGxD,UAAU,CAACqD,qBAAqB,CAAC;EACjD,IAAI,CAACG,OAAO,EAAE,MAAM,IAAIC,KAAK,CAAC,GAAGF,SAAS,yCAAyC,CAAC;EACpF,OAAOC,OAAO;AAChB;;AAEA;AACA,OAAO,SAASE,iBAAiBA,CAAA,EAAG;EAClC,MAAM;IAAEC,QAAQ;IAAEC;EAAU,CAAC,GAAGN,wBAAwB,CAAC,mBAAmB,CAAC;EAC7E,OAAO;IAAEK,QAAQ;IAAEC;EAAU,CAAC;AAChC;AA8BA,MAAMC,kBAAkB,gBAAG/D,UAAU,CAA4B,SAAS+D,kBAAkBA,CAC1F;EACEC,SAAS;EACTtB,OAAO,GAAG,SAAS;EACnBK,IAAI,GAAG,IAAI;EACXI,SAAS;EACTc,YAAY;EACZC,UAAU;EACVC,iBAAiB;EACjBL,SAAS,EAAEM,aAAa;EACxBC,SAAS,GAAG,KAAK;EACjBC,cAAc,GAAG/C,wBAAwB;EACzC8B,QAAQ,GAAG,KAAK;EAChBkB,OAAO,GAAG,KAAK;EACfC,kBAAkB;EAClBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,EACH;EACA,MAAMxC,KAAK,GAAGD,sBAAsB,CAAC;IAAEQ,OAAO;IAAEK,IAAI;IAAEI,SAAS;IAAEE;EAAS,CAAC,CAAC;EAC5E,MAAMuB,QAAQ,GAAGlD,mBAAmB,CAACuC,YAAY,CAAC;EAClD,MAAMY,aAAa,GAAG9D,gBAAgB,CAAC,CAAC;EAExC,MAAM8C,QAAQ,GAAG7C,cAAc,CAAC,CAAC,CAAC;EAClC,MAAM,CAAC8D,KAAK,EAAEC,QAAQ,CAAC,GAAGzE,QAAQ,CAAC,CAAC,CAAC;EACrC,MAAM,CAAC0E,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG3E,QAAQ,CAAC,KAAK,CAAC;EACjE,MAAM4E,UAAU,GAAG7E,MAAM,CAAuC,IAAI,CAAC;EAErE,MAAM8E,YAAY,GAAGf,aAAa,KAAKgB,SAAS;EAChD,MAAMtB,SAAS,GAAGqB,YAAY,GAAGf,aAAa,GAAGY,iBAAiB;EAElE,MAAMK,MAAM,GAAGpF,WAAW,CAAC,MAAM;IAC/B,IAAI,CAACkF,YAAY,EAAEF,oBAAoB,CAAC,IAAI,CAAC;IAC7Cd,iBAAiB,GAAG,IAAI,CAAC;IACzBD,UAAU,GAAG,CAAC;IACd,IAAIK,OAAO,EAAElD,WAAW,CAAC,CAAC;EAC5B,CAAC,EAAE,CAAC8D,YAAY,EAAEjB,UAAU,EAAEC,iBAAiB,EAAEI,OAAO,CAAC,CAAC;;EAE1D;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE1D,mBAAmB,CACjB,MAAMgD,QAAQ,CAACyB,KAAK,IAAI,CAAC,EACzB,CAACC,IAAI,EAAEC,GAAG,KAAK;IACb,IAAID,IAAI,IAAI,CAACC,GAAG,EAAE5E,OAAO,CAACyE,MAAM,CAAC,CAAC,CAAC;EACrC,CACF,CAAC;EAED,MAAMI,KAAK,GAAGxF,WAAW,CAAC,MAAM;IAC9B,IAAIoD,QAAQ,IAAIS,SAAS,EAAE;IAC3B,IAAIS,OAAO,EAAEjD,aAAa,CAAC,CAAC;IAC5BX,eAAe,CAACkD,QAAQ,CAAC;IACzB,IAAIgB,aAAa,EAAE;MACjB;AACN;AACA;AACA;AACA;AACA;MACMhB,QAAQ,CAACyB,KAAK,GAAGrE,UAAU,CAAC,CAAC,EAAE;QAC7B2D,QAAQ;QACRc,MAAM,EAAEhF,MAAM,CAACiF,KAAK,CAAC1D,aAAa,EAAE,IAAI;MAC1C,CAAC,CAAC;MACF;IACF;IACA;IACA;IACA4B,QAAQ,CAACyB,KAAK,GAAGrE,UAAU,CAAC,CAAC,EAAE;MAAE2D,QAAQ;MAAEc,MAAM,EAAEhF,MAAM,CAACkF;IAAO,CAAC,CAAC;EACrE,CAAC,EAAE,CAACvC,QAAQ,EAAES,SAAS,EAAES,OAAO,EAAEV,QAAQ,EAAEgB,aAAa,EAAED,QAAQ,CAAC,CAAC;EAErE,MAAMiB,OAAO,GAAG5F,WAAW,CAAC,MAAM;IAChCU,eAAe,CAACkD,QAAQ,CAAC;IACzB,IAAIA,QAAQ,CAACyB,KAAK,IAAI,CAAC,EAAE;IACzBzB,QAAQ,CAACyB,KAAK,GAAGrE,UAAU,CAAC,CAAC,EAAE;MAC7B;MACA;MACA2D,QAAQ,EAAEnD,eAAe,CAACoC,QAAQ,CAACyB,KAAK,EAAE9D,wBAAwB,CAAC;MACnEkE,MAAM,EAAEhF,MAAM,CAACoF,GAAG,CAACpF,MAAM,CAACqF,KAAK;IACjC,CAAC,CAAC;EACJ,CAAC,EAAE,CAAClC,QAAQ,CAAC,CAAC;EAEd,MAAMmC,KAAK,GAAG/F,WAAW,CAAC,MAAM;IAC9BU,eAAe,CAACkD,QAAQ,CAAC;IACzBA,QAAQ,CAACyB,KAAK,GAAG,CAAC;IAClB,IAAI,CAACH,YAAY,EAAEF,oBAAoB,CAAC,KAAK,CAAC;IAC9Cd,iBAAiB,GAAG,KAAK,CAAC;EAC5B,CAAC,EAAE,CAACN,QAAQ,EAAEsB,YAAY,EAAEhB,iBAAiB,CAAC,CAAC;EAE/ChE,SAAS,CAAC,MAAM;IACd,IAAI,CAAC2D,SAAS,IAAI,CAACO,SAAS,EAAE;IAC9Ba,UAAU,CAACe,OAAO,GAAGC,UAAU,CAACF,KAAK,EAAE1B,cAAc,CAAC;IACtD,OAAO,MAAM;MACX,IAAIY,UAAU,CAACe,OAAO,EAAEE,YAAY,CAACjB,UAAU,CAACe,OAAO,CAAC;MACxDf,UAAU,CAACe,OAAO,GAAG,IAAI;IAC3B,CAAC;EACH,CAAC,EAAE,CAACnC,SAAS,EAAEO,SAAS,EAAEC,cAAc,EAAE0B,KAAK,CAAC,CAAC;;EAEjD;EACA;EACA7F,SAAS,CAAC,MAAM;IACd,IAAI,CAAC2D,SAAS,EAAE;IAChBD,QAAQ,CAACyB,KAAK,GAAG,CAAC;EACpB,CAAC,EAAE,CAACxB,SAAS,EAAED,QAAQ,CAAC,CAAC;EAEzB1D,SAAS,CACP,MAAM,MAAM;IACVQ,eAAe,CAACkD,QAAQ,CAAC;IACzB,IAAIqB,UAAU,CAACe,OAAO,EAAEE,YAAY,CAACjB,UAAU,CAACe,OAAO,CAAC;EAC1D,CAAC,EACD,CAACpC,QAAQ,CACX,CAAC;EAED,MAAMuC,QAAQ,GAAIC,KAAwB,IAAK;IAC7C,MAAMC,IAAI,GAAGC,IAAI,CAACC,KAAK,CAACH,KAAK,CAACI,WAAW,CAACC,MAAM,CAAC5B,KAAK,CAAC;IACvDC,QAAQ,CAAEkB,OAAO,IAAMA,OAAO,KAAKK,IAAI,GAAGL,OAAO,GAAGK,IAAK,CAAC;IAC1D5B,KAAK,CAAC0B,QAAQ,GAAGC,KAAK,CAAC;EACzB,CAAC;EAED,MAAM3C,OAAO,GAAGtD,OAAO,CACrB,OAAO;IAAEyD,QAAQ;IAAEiB,KAAK;IAAEhB,SAAS;IAAEpB,OAAO;IAAEK,IAAI;IAAEZ;EAAM,CAAC,CAAC,EAC5D,CAAC0B,QAAQ,EAAEiB,KAAK,EAAEhB,SAAS,EAAEpB,OAAO,EAAEK,IAAI,EAAEZ,KAAK,CACnD,CAAC;EAED,MAAMwE,IAAI,GAAGlC,QAAQ,iBACnB7C,IAAA,CAAAE,SAAA;IAAA2C,QAAA,eACE7C,IAAA,CAACgF,mBAAmB;MAAAnC,QAAA,EAAC;IAAe,CAAqB;EAAC,CAC1D,CACH;EAED,oBACE7C,IAAA,CAAC2B,qBAAqB,CAACsD,QAAQ;IAACvB,KAAK,EAAE5B,OAAQ;IAAAe,QAAA,eAC7C7C,IAAA,CAACrB,SAAS;MACRoE,GAAG,EAAEA,GAAI;MACTmC,iBAAiB,EAAC;MAClB;AACR;AACA;AACA;AACA;AACA,SALQ;MAMAC,iBAAiB,EAAC,2BAA2B;MAC7CvC,kBAAkB,EAAE;QAClB,GAAGA,kBAAkB;QACrBnB,QAAQ;QACR2D,OAAO,EAAElD;MACX,CAAE;MACFT,QAAQ,EAAEA,QAAS;MACnB4D,SAAS,EAAExB,KAAM;MACjByB,UAAU,EAAErB;MACZ;MACA;MAAA;MACAsB,oBAAoB,EAAE,EAAG;MAAA,GACrBzC,KAAK;MACT0B,QAAQ,EAAEA,QAAS;MACnBpC,SAAS,EAAE7B,KAAK,CAACC,IAAI,CAAC;QAAE4B;MAAU,CAAC,CAAE;MAAAS,QAAA,EAEpCkC;IAAI,CACI;EAAC,CACkB,CAAC;AAErC,CAAC,CAAC;AAOF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,mBAAmBA,CAAC;EAAE5C,SAAS;EAAES,QAAQ;EAAE,GAAGC;AAAgC,CAAC,EAAE;EACxF,MAAM;IAAEb,QAAQ;IAAEiB,KAAK;IAAE3C;EAAM,CAAC,GAAGqB,wBAAwB,CAAC,sBAAsB,CAAC;EAEnF,MAAM4D,SAAS,GAAGtG,gBAAgB,CAAC,OAAO;IAAEgE,KAAK,EAAEA,KAAK,GAAGjB,QAAQ,CAACyB;EAAM,CAAC,CAAC,CAAC;EAE7E,oBACEtD,KAAA,CAACxB,IAAI;IAAA,GAAKkE,KAAK;IAAEV,SAAS,EAAE7B,KAAK,CAACE,OAAO,CAAC;MAAE2B;IAAU,CAAC,CAAE;IAAAS,QAAA,GACtDrD,YAAY,CAACqD,QAAQ,EAAG4C,IAAI,iBAC3BzF,IAAA,CAACT,IAAI;MAAC6C,SAAS,EAAE7B,KAAK,CAACG,KAAK,CAAC,CAAE;MAAAmC,QAAA,EAAE4C;IAAI,CAAO,CAC7C,CAAC,eAMFzF,IAAA,CAACnB,QAAQ,CAACD,IAAI;MACZ8G,aAAa,EAAC,MAAM;MACpBC,KAAK,EAAE,CACL;QAAEC,QAAQ,EAAE,UAAU;QAAEC,GAAG,EAAE,CAAC;QAAEC,MAAM,EAAE,CAAC;QAAEC,IAAI,EAAE,CAAC;QAAEC,QAAQ,EAAE;MAAS,CAAC,EACxER,SAAS,CACT;MACFpD,SAAS,EAAE7B,KAAK,CAACI,IAAI,CAAC,CAAE;MAAAkC,QAAA,eAExB7C,IAAA,CAACpB,IAAI;QAAC+G,KAAK,EAAE;UAAEzC;QAAM,CAAE;QAACd,SAAS,EAAE7B,KAAK,CAACE,OAAO,CAAC,CAAE;QAAAoC,QAAA,EAChDrD,YAAY,CAACqD,QAAQ,EAAG4C,IAAI,iBAC3BzF,IAAA,CAACT,IAAI;UAAC6C,SAAS,EAAE7B,KAAK,CAACK,SAAS,CAAC,CAAE;UAAAiC,QAAA,EAAE4C;QAAI,CAAO,CACjD;MAAC,CACE;IAAC,CACM,CAAC;EAAA,CACZ,CAAC;AAEX;AACAT,mBAAmB,CAACiB,WAAW,GAAG,sBAAsB;AAExD9D,kBAAkB,CAAC8D,WAAW,GAAG,gBAAgB;AAEjD,OAAO,MAAMC,cAAc,GAAGC,MAAM,CAACC,MAAM,CAACjE,kBAAkB,EAAE;EAC9DkE,KAAK,EAAErB;AACT,CAAC,CAAC;AAEF,SACErF,wBAAwB,EACxB2G,qBAAqB,EACrB1G,wBAAwB,EACxB2G,UAAU,EACV1G,eAAe,EACfC,mBAAmB,QACd,2BAAwB","ignoreList":[]}

package/lib/module/components/progress-button/progress-button-hold.js

@@ -0,0 +1,57 @@
+"use strict";
+
+/**
+ * The arithmetic behind a hold, kept out of the component so it can be tested
+ * without a renderer — the same split `splitter-math` and `ai-input-growth` use.
+ *
+ * None of it is worklet-only, so the component can call it from either runtime.
+ */
+
+/** Milliseconds a hold has to be sustained before it counts. */
+export const DEFAULT_HOLD_DURATION = 2000;
+
+/** Milliseconds the fill takes to drain when a hold is abandoned. */
+export const DEFAULT_RELEASE_DURATION = 240;
+
+/** Milliseconds before an `autoReset` button offers itself again. */
+export const DEFAULT_AUTO_RESET_DELAY = 1000;
+
+/**
+ * A hold duration that cannot produce a broken animation.
+ *
+ * Zero would complete on touch-down, which defeats the point of the control:
+ * a hold-to-confirm that confirms on a tap is a button with extra steps. A
+ * floor rather than a rejection, because the caller asking for `0` wants it
+ * fast, not broken.
+ */
+export function resolveHoldDuration(duration) {
+  if (duration === undefined) return DEFAULT_HOLD_DURATION;
+  if (!Number.isFinite(duration)) return DEFAULT_HOLD_DURATION;
+  return Math.max(200, duration);
+}
+
+/**
+ * How long the fill should take to drain from where it is.
+ *
+ * Proportional to how far it got, so abandoning a hold at a tenth of the way
+ * does not take the same quarter-second as abandoning it at nine tenths. A
+ * fixed release makes a barely-started hold feel sticky, which reads as the
+ * control resisting being let go.
+ */
+export function releaseDuration(progress, full = DEFAULT_RELEASE_DURATION) {
+  const travelled = Math.min(1, Math.max(0, progress));
+  return Math.max(80, full * travelled);
+}
+
+/**
+ * Whether a hold that has been released should still be honoured.
+ *
+ * The fill is the promise, so anything short of the end is not a confirmation —
+ * there is no "close enough" here. It exists as a named function because the
+ * tempting version of this rule is a tolerance, and a tolerance means the
+ * button sometimes fires when the reader let go early on purpose.
+ */
+export function isComplete(progress) {
+  return progress >= 1;
+}
+//# sourceMappingURL=progress-button-hold.js.map

package/lib/module/components/progress-button/progress-button-hold.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_HOLD_DURATION","DEFAULT_RELEASE_DURATION","DEFAULT_AUTO_RESET_DELAY","resolveHoldDuration","duration","undefined","Number","isFinite","Math","max","releaseDuration","progress","full","travelled","min","isComplete"],"sourceRoot":"../../../../src","sources":["components/progress-button/progress-button-hold.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,MAAMA,qBAAqB,GAAG,IAAI;;AAEzC;AACA,OAAO,MAAMC,wBAAwB,GAAG,GAAG;;AAE3C;AACA,OAAO,MAAMC,wBAAwB,GAAG,IAAI;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAACC,QAA4B,EAAU;EACxE,IAAIA,QAAQ,KAAKC,SAAS,EAAE,OAAOL,qBAAqB;EACxD,IAAI,CAACM,MAAM,CAACC,QAAQ,CAACH,QAAQ,CAAC,EAAE,OAAOJ,qBAAqB;EAC5D,OAAOQ,IAAI,CAACC,GAAG,CAAC,GAAG,EAAEL,QAAQ,CAAC;AAChC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,eAAeA,CAC7BC,QAAgB,EAChBC,IAAY,GAAGX,wBAAwB,EAC/B;EACR,MAAMY,SAAS,GAAGL,IAAI,CAACM,GAAG,CAAC,CAAC,EAAEN,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEE,QAAQ,CAAC,CAAC;EACpD,OAAOH,IAAI,CAACC,GAAG,CAAC,EAAE,EAAEG,IAAI,GAAGC,SAAS,CAAC;AACvC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,UAAUA,CAACJ,QAAgB,EAAW;EACpD,OAAOA,QAAQ,IAAI,CAAC;AACtB","ignoreList":[]}

package/lib/module/components/scatter-chart/index.js

@@ -50,6 +50,7 @@ import { Text } from "../../primitives/text.js";
 import { ChartAccessibilityData } from "../../primitives/chart-accessibility.js";
 import { compactNumber, useSeriesColor, xAt, yOf } from "../../utils/chart.js";
 import { cn } from "../../utils/cn.js";
+import { useSkeletonHandoff } from "../../hooks/use-skeleton-handoff.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const AnimatedG = Animated.createAnimatedComponent(G);
@@ -61,9 +62,6 @@ const AnimatedG = Animated.createAnimatedComponent(G);
  */
 const STAGGER = 0.4;
 
-/** Milliseconds for the placeholder field to dissolve once the data arrives. */
-const SKELETON_FADE = 220;
-
 /** Milliseconds for a point to swell as it is selected, and settle as it is not. */
 const SELECT_DURATION = 140;
 
@@ -153,7 +151,7 @@ const ScatterChartRoot = /*#__PURE__*/forwardRef(function ScatterChartRoot({
   xDataKey = 'x',
   status = 'ready',
   aspectRatio = 1,
-  animationDuration = 900,
+  animationDuration = 650,
   domainDuration = 500,
   xDomain,
   yDomain,
@@ -678,27 +676,10 @@ function ScatterChartSkeleton({
   } = useChart('ScatterChart.Skeleton');
   const token = useCSSVariable('--color-skeleton');
   const fill = color ?? (typeof token === 'string' ? token : 'rgba(128,128,128,0.2)');
-  const reducedMotion = useReducedMotion();
-  const loading = status === 'loading';
-  const fade = useSharedValue(1);
-  // Mounted a beat longer than `loading`, so there is something to fade.
-  const [mounted, setMounted] = useState(loading);
-  useEffect(() => {
-    if (loading) {
-      fade.value = 1;
-      setMounted(true);
-      return;
-    }
-    if (reducedMotion) {
-      setMounted(false);
-      return;
-    }
-    fade.value = withTiming(0, {
-      duration: SKELETON_FADE
-    }, finished => {
-      if (finished) runOnJS(setMounted)(false);
-    });
-  }, [loading, reducedMotion, fade]);
+  const {
+    mounted,
+    opacity: fade
+  } = useSkeletonHandoff(status === 'loading');
   const dots = useMemo(() => {
     // A cheap deterministic scatter: two irrational-ish strides that do not
     // share a factor, so the points spread instead of falling into a lattice.