panelui-native 0.22.6 → 0.25.0

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

@@ -0,0 +1,423 @@
+"use strict";
+
+/**
+ * RingChart — progress towards several targets, as concentric arcs.
+ *
+ * ```tsx
+ * <RingChart data={goals}>
+ *   <RingChart.Ring index={0} />
+ *   <RingChart.Ring index={1} />
+ *   <RingChart.Center />
+ *   <RingChart.Legend />
+ * </RingChart>
+ * ```
+ *
+ * ## What it is not
+ *
+ * It is not a pie or a donut, and the difference matters. A pie divides one
+ * whole between its slices, so its parts are only meaningful against each
+ * other and the angles must add to a full turn. A ring here is a value against
+ * *its own* target — three rings can all be at ninety percent of three
+ * unrelated numbers, and that is the reading. Nothing is normalised across
+ * rings, and nothing has to add up.
+ *
+ * That is also why each ring gets a track. An arc drawn on nothing shows how
+ * far something went; an arc drawn on a full circle shows how far it went *of
+ * what it was aiming at*, which is the entire question.
+ *
+ * ## Drawing
+ *
+ * Each ring is two arcs — a full-circle track and the progress over it — with
+ * only the progress animated, through `strokeDasharray`. Sweeping the arc by
+ * rebuilding its path would work, but a dash offset is two numbers moving on
+ * an unchanged path, and it keeps the rounded cap pinned to the moving end for
+ * free.
+ *
+ * Touch, not hover: a ring is selected by pressing it, and pressing the same
+ * one again clears the selection. There is no equivalent of a pointer resting
+ * somewhere without committing, so a chart that only revealed its numbers on
+ * hover would never reveal them at all.
+ */
+import { Children, createContext, forwardRef, isValidElement, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, { Easing, useAnimatedProps, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
+import Svg, { Circle, G } from 'react-native-svg';
+import { Text } from "../../primitives/text.js";
+import { compactNumber, useSeriesColor } from "../../utils/chart.js";
+import { cn } from "../../utils/cn.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+/** One ring per datum, and the datum is the whole of its contract. */
+
+const RingChartContext = /*#__PURE__*/createContext(null);
+function useChart(component) {
+  const context = useContext(RingChartContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <RingChart>`);
+  }
+  return context;
+}
+
+/** The selected ring, for something rendered inside the chart. */
+export function useRingChart() {
+  const {
+    data,
+    activeIndex
+  } = useChart('useRingChart');
+  return {
+    activeIndex,
+    activeRing: activeIndex >= 0 ? data[activeIndex] ?? null : null
+  };
+}
+
+/** Imperative handle: re-run the sweep, for a "replay" control. */
+
+const RingChartRoot = /*#__PURE__*/forwardRef(function RingChartRoot({
+  className,
+  data,
+  size,
+  strokeWidth = 12,
+  ringGap = 6,
+  animationDuration = 1100,
+  activeIndex: activeIndexProp,
+  onActiveIndexChange,
+  children,
+  ...props
+}, ref) {
+  const [measured, setMeasured] = useState(0);
+  const [internalActive, setInternalActive] = useState(-1);
+  const reveal = useSharedValue(0);
+  const reducedMotion = useReducedMotion();
+  const controlled = activeIndexProp !== undefined;
+  const activeIndex = controlled ? activeIndexProp : internalActive;
+  const setActiveIndex = useMemo(() => index => {
+    if (!controlled) setInternalActive(index);
+    onActiveIndexChange?.(index);
+  }, [controlled, onActiveIndexChange]);
+  const box = size ?? measured;
+
+  /*
+   * Outermost ring first, so `data[0]` is the one the eye lands on. Each ring
+   * inside it steps in by its own thickness plus the gap.
+   */
+  const radiusOf = useMemo(() => index => Math.max(box / 2 - strokeWidth / 2 - index * (strokeWidth + ringGap), strokeWidth / 2), [box, strokeWidth, ringGap]);
+  const playReveal = useMemo(() => () => {
+    if (reducedMotion) {
+      reveal.value = 1;
+      return;
+    }
+    reveal.value = 0;
+    reveal.value = withTiming(1, {
+      duration: animationDuration,
+      easing: Easing.bezier(0.85, 0, 0.15, 1)
+    });
+  }, [reducedMotion, animationDuration, reveal]);
+  const revealed = useRef(false);
+  useEffect(() => {
+    if (revealed.current || box <= 0 || !data.length) return;
+    revealed.current = true;
+    playReveal();
+  }, [box, data.length, playReveal]);
+  useImperativeHandle(ref, () => ({
+    replay: playReveal
+  }), [playReveal]);
+
+  // Resolved here rather than inside each ring, so the legend and the centre
+  // readout can name a ring's colour without rendering one.
+  const c1 = useSeriesColor(undefined, 1);
+  const c2 = useSeriesColor(undefined, 2);
+  const c3 = useSeriesColor(undefined, 3);
+  const c4 = useSeriesColor(undefined, 4);
+  const c5 = useSeriesColor(undefined, 5);
+  const palette = useMemo(() => [c1, c2, c3, c4, c5], [c1, c2, c3, c4, c5]);
+  const colors = useMemo(() => data.map((ring, index) => ring.color ?? palette[index % palette.length]), [data, palette]);
+  const onLayout = event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    const next = Math.round(Math.min(width, height));
+    if (next !== measured) setMeasured(next);
+    props.onLayout?.(event);
+  };
+  const context = useMemo(() => ({
+    data,
+    size: box,
+    strokeWidth,
+    ringGap,
+    colors,
+    reveal,
+    activeIndex,
+    setActiveIndex,
+    radiusOf
+  }), [data, box, strokeWidth, ringGap, colors, reveal, activeIndex, setActiveIndex, radiusOf]);
+  const rings = [];
+  const overlay = [];
+  Children.forEach(children, (child, index) => {
+    if (! /*#__PURE__*/isValidElement(child)) return;
+    const slot = child.type.slot ?? 'overlay';
+    (slot === 'ring' ? rings : overlay).push(/*#__PURE__*/_jsx(ChildSlot, {
+      children: child
+    }, index));
+  });
+  return /*#__PURE__*/_jsx(RingChartContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(View, {
+      ...props,
+      onLayout: onLayout,
+      style: [size ? {
+        width: size,
+        height: size
+      } : {
+        aspectRatio: 1
+      }, props.style],
+      className: cn('w-full items-center justify-center', className),
+      children: box > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Svg, {
+          width: box,
+          height: box,
+          children: rings
+        }), /*#__PURE__*/_jsx(View, {
+          pointerEvents: "box-none",
+          style: {
+            position: 'absolute',
+            width: box,
+            height: box
+          },
+          className: "items-center justify-center",
+          children: overlay
+        })]
+      }) : null
+    })
+  });
+});
+RingChartRoot.displayName = 'RingChart';
+function ChildSlot({
+  children
+}) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+}
+/**
+ * One ring: a full-circle track, and the arc showing how far along it the
+ * value has got.
+ *
+ * The arc is swept with `strokeDasharray` rather than by rebuilding its path.
+ * Both work, but a dash offset moves two numbers on a path that never changes
+ * — and it keeps the rounded cap pinned to the moving end without any extra
+ * geometry.
+ */
+function RingChartRing({
+  index,
+  color,
+  colorIndex,
+  lineCap = 'round',
+  trackOpacity = 0.15
+}) {
+  const {
+    data,
+    size,
+    strokeWidth,
+    colors,
+    reveal,
+    activeIndex,
+    setActiveIndex,
+    radiusOf
+  } = useChart('RingChart.Ring');
+  const datum = data[index];
+  const tokenColor = useSeriesColor(undefined, colorIndex ?? 1);
+  const stroke = color ?? datum?.color ?? (colorIndex ? tokenColor : colors[index]) ?? tokenColor;
+  const radius = radiusOf(index);
+  const circumference = 2 * Math.PI * radius;
+  const centre = size / 2;
+  const fraction = datum && datum.maxValue > 0 ? datum.value / datum.maxValue : 0;
+  // A value past its target fills the ring and stops. Going round twice would
+  // draw 110% as 10%, which is the wrong answer told confidently.
+  const clamped = Math.max(0, Math.min(1, fraction));
+
+  /*
+   * Staggered outward-in, so the rings arrive as a sequence rather than all at
+   * once. The window each gets is what is left after the stagger, so a chart
+   * of five rings still finishes inside the one duration.
+   */
+  const count = Math.max(1, data.length);
+  const start = index / count * 0.4;
+  const props = useAnimatedProps(() => {
+    const progress = Math.max(0, Math.min(1, (reveal.value - start) / 0.6));
+    const drawn = circumference * clamped * progress;
+    return {
+      strokeDasharray: [drawn, circumference]
+    };
+  });
+  const dimmed = activeIndex >= 0 && activeIndex !== index;
+  if (!datum || radius <= 0) return null;
+  return /*#__PURE__*/_jsxs(G, {
+    opacity: dimmed ? 0.35 : 1,
+    children: [/*#__PURE__*/_jsx(Circle, {
+      cx: centre,
+      cy: centre,
+      r: radius,
+      stroke: stroke,
+      strokeOpacity: trackOpacity,
+      strokeWidth: strokeWidth,
+      fill: "none"
+    }), /*#__PURE__*/_jsx(AnimatedCircle, {
+      animatedProps: props,
+      cx: centre,
+      cy: centre,
+      r: radius,
+      stroke: stroke,
+      strokeWidth: strokeWidth,
+      strokeLinecap: lineCap,
+      fill: "none"
+      // Rotated so the arc starts at twelve o'clock. An arc starting at
+      // three reads as a gauge that has already been running.
+      ,
+      transform: `rotate(-90 ${centre} ${centre})`
+    }), /*#__PURE__*/_jsx(Circle, {
+      cx: centre,
+      cy: centre,
+      r: radius,
+      stroke: "transparent",
+      strokeWidth: Math.max(strokeWidth, 28),
+      fill: "none",
+      onPress: () => setActiveIndex(activeIndex === index ? -1 : index)
+    })]
+  });
+}
+RingChartRing.displayName = 'RingChart.Ring';
+RingChartRing.slot = 'ring';
+/**
+ * The readout in the hole.
+ *
+ * With nothing selected it shows the outermost ring — the one the eye lands on
+ * first. Not a total: the rings measure different things against different
+ * targets, so their values do not add up and their percentages do not average,
+ * and a total here would be a confident number about nothing. Selecting a ring
+ * swaps it for that ring's own figures.
+ */
+function RingChartCenter({
+  defaultLabel,
+  formatValue,
+  children,
+  className
+}) {
+  const {
+    data,
+    activeIndex,
+    strokeWidth,
+    radiusOf
+  } = useChart('RingChart.Center');
+
+  /*
+   * With nothing selected the centre shows the outermost ring — the one the
+   * eye lands on — rather than an aggregate. There is no aggregate to show:
+   * the rings measure different things against different targets, so their
+   * values do not add up and their percentages do not average. A total here
+   * would be a confident number about nothing.
+   */
+  const ring = (activeIndex >= 0 ? data[activeIndex] : data[0]) ?? null;
+  const selected = activeIndex >= 0;
+  const format = formatValue ?? (amount => compactNumber(amount));
+
+  /*
+   * The hole is what is left inside the innermost ring, measured off the same
+   * function that places the rings so the two cannot disagree. Text wider than
+   * it would sit on the arcs rather than inside them.
+   */
+  const inner = Math.max(radiusOf(Math.max(data.length - 1, 0)) - strokeWidth / 2, 0);
+  // A square inside a circle, not across it: the corners of a box as wide as
+  // the diameter fall outside the hole.
+  const hole = inner * Math.SQRT2;
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    style: {
+      maxWidth: hole
+    },
+    className: cn('items-center', className),
+    children: children ? children(selected ? ring : null) : ring ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        numberOfLines: 1,
+        children: selected ? ring.label : defaultLabel ?? ring.label
+      }), /*#__PURE__*/_jsx(Text, {
+        size: hole < 90 ? 'lg' : 'xl',
+        weight: "semibold",
+        numberOfLines: 1,
+        children: format(ring.value, ring)
+      }), hole >= 90 ? /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        numberOfLines: 1,
+        children: `of ${format(ring.maxValue, ring)}`
+      }) : null]
+    }) : null
+  });
+}
+RingChartCenter.displayName = 'RingChart.Center';
+RingChartCenter.slot = 'overlay';
+/**
+ * A swatch and a name per ring, pressable in the same way the rings are — the
+ * legend is usually the easier target of the two, and on a small chart it is
+ * the only comfortable one.
+ */
+function RingChartLegend({
+  className,
+  showValue = true,
+  ...props
+}) {
+  const {
+    data,
+    colors,
+    activeIndex,
+    setActiveIndex
+  } = useChart('RingChart.Legend');
+  if (!data.length) return null;
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    pointerEvents: "box-none",
+    className: cn('absolute -bottom-2 w-full gap-1', className),
+    children: data.map((ring, index) => {
+      const percent = ring.maxValue > 0 ? Math.round(ring.value / ring.maxValue * 100) : 0;
+      const dimmed = activeIndex >= 0 && activeIndex !== index;
+      return /*#__PURE__*/_jsxs(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: `${ring.label}, ${percent} percent`,
+        onPress: () => setActiveIndex(activeIndex === index ? -1 : index),
+        style: {
+          opacity: dimmed ? 0.4 : 1
+        },
+        className: "flex-row items-center gap-1.5",
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: 8,
+            height: 8,
+            borderRadius: 4,
+            backgroundColor: colors[index]
+          }
+        }), /*#__PURE__*/_jsx(Text, {
+          size: "xs",
+          muted: true,
+          numberOfLines: 1,
+          className: "flex-1",
+          children: ring.label
+        }), showValue ? /*#__PURE__*/_jsxs(Text, {
+          size: "xs",
+          weight: "medium",
+          children: [percent, "%"]
+        }) : null]
+      }, ring.label);
+    })
+  });
+}
+RingChartLegend.displayName = 'RingChart.Legend';
+RingChartLegend.slot = 'overlay';
+export const RingChart = Object.assign(RingChartRoot, {
+  Ring: RingChartRing,
+  Center: RingChartCenter,
+  Legend: RingChartLegend
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/ring-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Children","createContext","forwardRef","isValidElement","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","Pressable","View","Animated","Easing","useAnimatedProps","useReducedMotion","useSharedValue","withTiming","Svg","Circle","G","Text","compactNumber","useSeriesColor","cn","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","AnimatedCircle","createAnimatedComponent","RingChartContext","useChart","component","context","Error","useRingChart","data","activeIndex","activeRing","RingChartRoot","className","size","strokeWidth","ringGap","animationDuration","activeIndexProp","onActiveIndexChange","children","props","ref","measured","setMeasured","internalActive","setInternalActive","reveal","reducedMotion","controlled","undefined","setActiveIndex","index","box","radiusOf","Math","max","playReveal","value","duration","easing","bezier","revealed","current","length","replay","c1","c2","c3","c4","c5","palette","colors","map","ring","color","onLayout","event","width","height","nativeEvent","layout","next","round","min","rings","overlay","forEach","child","slot","type","push","ChildSlot","Provider","style","aspectRatio","pointerEvents","position","displayName","RingChartRing","colorIndex","lineCap","trackOpacity","datum","tokenColor","stroke","radius","circumference","PI","centre","fraction","maxValue","clamped","count","start","progress","drawn","strokeDasharray","dimmed","opacity","cx","cy","r","strokeOpacity","fill","animatedProps","strokeLinecap","transform","onPress","RingChartCenter","defaultLabel","formatValue","selected","format","amount","inner","hole","SQRT2","maxWidth","muted","numberOfLines","label","weight","RingChartLegend","showValue","percent","accessibilityRole","accessibilityLabel","borderRadius","backgroundColor","RingChart","Object","assign","Ring","Center","Legend"],"sourceRoot":"../../../../src","sources":["components/ring-chart/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/section-rail/index.js

@@ -182,7 +182,7 @@ function SectionRailTrigger({
     // Generous padding is the hit target; the bars themselves are hairlines.
     ,
     hitSlop: 8,
-    className: cn('gap-2 py-3', placement === 'right' ? 'items-end pl-6 pr-2' : 'items-start pl-2 pr-6', className),
+    className: cn('gap-2 py-3', placement === 'right' ? 'items-end ps-6 pe-2' : 'items-start ps-2 pe-6', className),
     ...props,
     children: children
   });
@@ -336,7 +336,7 @@ function SectionRailItem({
     style: {
       paddingLeft: 12 + level * ITEM_INDENT
     },
-    className: cn('rounded-lg py-2 pr-3 active:bg-accent', selected && 'bg-accent', className),
+    className: cn('rounded-lg py-2 pe-3 active:bg-accent', selected && 'bg-accent', className),
     children: /*#__PURE__*/_jsx(Text, {
       size: "sm",
       weight: selected ? 'medium' : 'normal',

package/lib/module/components/separator/index.js

@@ -11,17 +11,25 @@
  * ```tsx
  * <Separator />
  * <Separator orientation="vertical" />
+ * <Separator>or</Separator>
  * ```
  *
  * A vertical separator takes its length from the parent, so the parent needs a
  * height — inside a `flex-row` with `items-stretch`, or with an explicit `h-*`
  * on either the row or the separator itself. Without one it measures zero and
  * nothing draws.
+ *
+ * Passing children turns it into a *labelled* separator: the rule breaks around
+ * centred content — the "or continue with" divider in a sign-in form. Only the
+ * horizontal axis carries a label, because a stacked word is not a divider; a
+ * vertical separator ignores its children and stays a plain hairline.
  */
-import { forwardRef } from 'react';
+import { forwardRef, isValidElement } from 'react';
 import { View } from 'react-native';
 import { tv } from 'tailwind-variants';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "../../primitives/text.js";
+import { cn } from "../../utils/cn.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const separatorVariants = tv({
   base: 'bg-border',
   variants: {
@@ -61,31 +69,77 @@ const separatorVariants = tv({
 });
 export const Separator = /*#__PURE__*/forwardRef(({
   className,
+  labelClassName,
   orientation = 'horizontal',
   variant,
   thickness,
   decorative = true,
+  children,
   style,
   ...props
-}, ref) => /*#__PURE__*/_jsx(View, {
-  ref: ref
-  // `role` rather than `accessibilityRole` — React Native's older role list
-  // has no separator, the ARIA-aligned one does.
-  ,
-  role: decorative ? 'none' : 'separator',
-  accessible: !decorative,
-  "aria-orientation": decorative ? undefined : orientation,
-  className: separatorVariants({
-    orientation,
-    variant,
-    className
-  }),
-  style: thickness !== undefined ? [orientation === 'horizontal' ? {
-    height: thickness
-  } : {
-    width: thickness
-  }, style] : style,
-  ...props
-}));
+}, ref) => {
+  const hasLabel = orientation === 'horizontal' && children != null && children !== false;
+
+  // Labelled: two rules flanking centred content. The label carries meaning,
+  // so the row announces itself as a separator regardless of `decorative`,
+  // and the flanking rules are hidden from the reader. Here `className`
+  // styles the wrapping row and `labelClassName` the text.
+  if (hasLabel) {
+    const rule = separatorVariants({
+      orientation,
+      variant
+    });
+    const ruleStyle = thickness !== undefined ? {
+      height: thickness
+    } : undefined;
+    return /*#__PURE__*/_jsxs(View, {
+      ref: ref,
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: cn('w-full flex-row items-center gap-3', className),
+      style: style,
+      ...props,
+      children: [/*#__PURE__*/_jsx(View, {
+        "aria-hidden": true,
+        className: rule,
+        style: [styles.flex, ruleStyle]
+      }), /*#__PURE__*/isValidElement(children) ? children : /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        className: labelClassName,
+        children: children
+      }), /*#__PURE__*/_jsx(View, {
+        "aria-hidden": true,
+        className: rule,
+        style: [styles.flex, ruleStyle]
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref
+    // `role` rather than `accessibilityRole` — React Native's older role list
+    // has no separator, the ARIA-aligned one does.
+    ,
+    role: decorative ? 'none' : 'separator',
+    accessible: !decorative,
+    "aria-orientation": decorative ? undefined : orientation,
+    className: separatorVariants({
+      orientation,
+      variant,
+      className
+    }),
+    style: thickness !== undefined ? [orientation === 'horizontal' ? {
+      height: thickness
+    } : {
+      width: thickness
+    }, style] : style,
+    ...props
+  });
+});
 Separator.displayName = 'Separator';
+const styles = {
+  flex: {
+    flex: 1
+  }
+};
 //# sourceMappingURL=index.js.map

package/lib/module/components/separator/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","View","tv","jsx","_jsx","separatorVariants","base","variants","orientation","horizontal","vertical","variant","thin","thick","compoundVariants","class","defaultVariants","Separator","className","thickness","decorative","style","props","ref","role","accessible","undefined","height","width","displayName"],"sourceRoot":"../../../../src","sources":["components/separator/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,EAAE,QAA2B,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1D,MAAMC,iBAAiB,GAAGH,EAAE,CAAC;EAC3BI,IAAI,EAAE,WAAW;EACjBC,QAAQ,EAAE;IACRC,WAAW,EAAE;MACXC,UAAU,EAAE,QAAQ;MACpBC,QAAQ,EAAE;IACZ,CAAC;IACDC,OAAO,EAAE;MACPC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,gBAAgB,EAAE;EAChB;EACA;EACA;IAAEN,WAAW,EAAE,YAAY;IAAEG,OAAO,EAAE,MAAM;IAAEI,KAAK,EAAE;EAAO,CAAC,EAC7D;IAAEP,WAAW,EAAE,YAAY;IAAEG,OAAO,EAAE,OAAO;IAAEI,KAAK,EAAE;EAAM,CAAC,EAC7D;IAAEP,WAAW,EAAE,UAAU;IAAEG,OAAO,EAAE,MAAM;IAAEI,KAAK,EAAE;EAAO,CAAC,EAC3D;IAAEP,WAAW,EAAE,UAAU;IAAEG,OAAO,EAAE,OAAO;IAAEI,KAAK,EAAE;EAAM,CAAC,CAC5D;EACDC,eAAe,EAAE;IACfR,WAAW,EAAE,YAAY;IACzBG,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAmBF,OAAO,MAAMM,SAAS,gBAAGjB,UAAU,CACjC,CACE;EACEkB,SAAS;EACTV,WAAW,GAAG,YAAY;EAC1BG,OAAO;EACPQ,SAAS;EACTC,UAAU,GAAG,IAAI;EACjBC,KAAK;EACL,GAAGC;AACL,CAAC,EACDC,GAAG,kBAEHnB,IAAA,CAACH,IAAI;EACHsB,GAAG,EAAEA;EACL;EACA;EAAA;EACAC,IAAI,EAAEJ,UAAU,GAAG,MAAM,GAAG,WAAY;EACxCK,UAAU,EAAE,CAACL,UAAW;EACxB,oBAAkBA,UAAU,GAAGM,SAAS,GAAGlB,WAAY;EACvDU,SAAS,EAAEb,iBAAiB,CAAC;IAAEG,WAAW;IAAEG,OAAO;IAAEO;EAAU,CAAC,CAAE;EAClEG,KAAK,EACHF,SAAS,KAAKO,SAAS,GACnB,CAAClB,WAAW,KAAK,YAAY,GAAG;IAAEmB,MAAM,EAAER;EAAU,CAAC,GAAG;IAAES,KAAK,EAAET;EAAU,CAAC,EAAEE,KAAK,CAAC,GACpFA,KACL;EAAA,GACGC;AAAK,CACV,CAEL,CAAC;AAEDL,SAAS,CAACY,WAAW,GAAG,WAAW","ignoreList":[]}
+{"version":3,"names":["forwardRef","isValidElement","View","tv","Text","cn","jsx","_jsx","jsxs","_jsxs","separatorVariants","base","variants","orientation","horizontal","vertical","variant","thin","thick","compoundVariants","class","defaultVariants","Separator","className","labelClassName","thickness","decorative","children","style","props","ref","hasLabel","rule","ruleStyle","undefined","height","role","styles","flex","size","muted","accessible","width","displayName"],"sourceRoot":"../../../../src","sources":["components/separator/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/shimmer/index.js

@@ -21,6 +21,7 @@ import MaskedView from '@react-native-masked-view/masked-view';
 import { LinearGradient } from 'expo-linear-gradient';
 import Animated, { cancelAnimation, Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
 import { useCSSVariable } from 'uniwind';
+import { useDirectionSign } from "../../hooks/use-direction.js";
 import { Text } from "../../primitives/text.js";
 import { cn } from "../../utils/cn.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,6 +46,8 @@ export function Shimmer({
   const [width, setWidth] = useState(0);
   const progress = useSharedValue(0);
   const reducedMotion = useReducedMotion();
+  // The sweep follows the reading direction; `reverse` then flips it again.
+  const sign = useDirectionSign();
   const themeMuted = useCSSVariable('--color-muted-foreground');
   const themeForeground = useCSSVariable('--color-foreground');
   const base = baseColor ?? (typeof themeMuted === 'string' ? themeMuted : '#a1a1aa');
@@ -71,7 +74,13 @@ export function Shimmer({
     // Travel from fully off one edge to fully off the other.
     const from = -bandWidth;
     const to = width;
-    const x = reverse ? to - progress.value * (to - from) : from + progress.value * (to - from);
+    /*
+     * The sweep follows the reading direction. It is standing in for text
+     * arriving, and text arrives from the side you start reading on — a band
+     * travelling against the script reads as something leaving.
+     */
+    const backwards = reverse !== (sign === -1);
+    const x = backwards ? to - progress.value * (to - from) : from + progress.value * (to - from);
     return {
       transform: [{
         translateX: x