panelui-native 0.30.0 → 0.34.0

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

@@ -0,0 +1,477 @@
+"use strict";
+
+/**
+ * Drawer — a panel that comes in from an edge of the screen and covers the app
+ * until it is dismissed.
+ *
+ * ```tsx
+ * <Drawer>
+ *   <Drawer.Trigger>
+ *     <Button variant="outline">Menu</Button>
+ *   </Drawer.Trigger>
+ *   <Drawer.Content>
+ *     <Drawer.Header title="Workspace" description="Switch or manage" />
+ *     <Drawer.Body>
+ *       <Item title="Projects" />
+ *       <Item title="Members" />
+ *     </Drawer.Body>
+ *     <Drawer.Footer>
+ *       <Button className="flex-1">Settings</Button>
+ *     </Drawer.Footer>
+ *   </Drawer.Content>
+ * </Drawer>
+ * ```
+ *
+ * ## Why the sides are `start` and `end`
+ *
+ * A drawer is the one overlay whose whole identity is the edge it belongs to,
+ * and in a right-to-left app "the navigation edge" is the right one. Naming the
+ * sides `left` and `right` would bake a reading direction into the API and
+ * force every caller in an RTL app to invert it themselves, so the sides are
+ * logical: `start` is the edge text begins at, `end` the edge it runs toward.
+ * Both follow the enclosing `<Direction>`, and `top` and `bottom` mean what
+ * they say because the vertical axis does not mirror.
+ *
+ * Yoga mirrors the panel's own position, because that is laid out from `start-0`
+ * / `end-0`. It does not mirror the drag, which is measured in raw pixels — so
+ * the gesture consults the direction and negates itself, which is what keeps a
+ * swipe *outward* dismissing in both directions rather than only one.
+ *
+ * ## Why it is not a BottomSheet with a different edge
+ *
+ * A sheet is sized by its content and dragged along the axis its scroller runs
+ * on, which is why so much of it is about sharing one drag between the two. A
+ * side drawer is sized by the screen and dragged across its scroller's axis, so
+ * the two gestures never compete: the cross-axis drag simply fails and the list
+ * keeps it. That difference is the reason this is a separate component and not
+ * a prop on the sheet.
+ */
+import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Pressable, ScrollView, useWindowDimensions, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { SlideInDown, SlideInLeft, SlideInRight, SlideInUp, SlideOutDown, SlideOutLeft, SlideOutRight, SlideOutUp, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { XIcon } from "../../icons/index.js";
+import { Portal } from "../../primitives/portal.js";
+import { Scrim } from "../../primitives/scrim.js";
+import { Text, textChildren } from "../../primitives/text.js";
+import { useBackHandler } from "../../hooks/use-back-handler.js";
+import { DirectionContext, useDirection, useDirectionSign } from "../../hooks/use-direction.js";
+import { cn } from "../../utils/cn.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SPRING = {
+  damping: 24,
+  stiffness: 300,
+  mass: 0.7
+};
+/** How far a drag has to travel outward before releasing it dismisses. */
+const DISMISS_DISTANCE = 80;
+/** A flick this fast dismisses regardless of how far it got. */
+const DISMISS_VELOCITY = 650;
+/**
+ * How much of the screen each size asks for, and the cap it is never allowed
+ * past on a wide screen.
+ *
+ * The cap is the whole point. A fraction alone reads correctly on a phone and
+ * absurdly on a tablet, where 78% of the width is a navigation list with a
+ * column of whitespace beside it. Capping turns the fraction into "no wider
+ * than it needs to be", which is what a drawer is.
+ */
+const WIDTH = {
+  sm: {
+    fraction: 0.62,
+    max: 280
+  },
+  md: {
+    fraction: 0.78,
+    max: 320
+  },
+  lg: {
+    fraction: 0.88,
+    max: 400
+  },
+  // Not 1: an edge of the app left showing is what says it is still there
+  // behind the drawer, and it is also the only thing left to tap to dismiss.
+  full: {
+    fraction: 0.94,
+    max: Infinity
+  }
+};
+
+/** The same idea on the vertical axis, where there is no sensible cap. */
+const HEIGHT = {
+  sm: 0.3,
+  md: 0.45,
+  lg: 0.62,
+  full: 0.94
+};
+const panelVariants = tv({
+  base: 'absolute border-border bg-popover shadow-lg',
+  variants: {
+    side: {
+      // Three real edges each. The fourth is the screen edge the drawer is
+      // docked to, and drawing a border or a radius along it would be a line
+      // through the middle of nothing.
+      start: 'bottom-0 start-0 top-0 rounded-e-3xl border-e',
+      end: 'bottom-0 end-0 top-0 rounded-s-3xl border-s',
+      top: 'end-0 start-0 top-0 rounded-b-3xl border-b',
+      bottom: 'bottom-0 end-0 start-0 rounded-t-3xl border-t'
+    }
+  },
+  defaultVariants: {
+    side: 'start'
+  }
+});
+const DrawerContext = /*#__PURE__*/createContext(null);
+function useDrawer(component) {
+  const context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <Drawer>`);
+  }
+  return context;
+}
+
+/**
+ * What the panel knows and its parts need: which corner the close button took,
+ * so a header can leave it clear rather than wrap underneath it.
+ */
+
+const DrawerSurfaceContext = /*#__PURE__*/createContext(null);
+function DrawerRoot({
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const controlled = controlledOpen !== undefined;
+  const open = controlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = useCallback(next => {
+    if (!controlled) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  }, [controlled, onOpenChange]);
+  const context = useMemo(() => ({
+    open,
+    setOpen
+  }), [open, setOpen]);
+  return /*#__PURE__*/_jsx(DrawerContext.Provider, {
+    value: context,
+    children: children
+  });
+}
+function DrawerTrigger({
+  children
+}) {
+  const {
+    setOpen
+  } = useDrawer('Drawer.Trigger');
+  if (! /*#__PURE__*/isValidElement(children)) return children;
+  return /*#__PURE__*/cloneElement(children, {
+    onPress: (...args) => {
+      children.props.onPress?.(...args);
+      setOpen(true);
+    }
+  });
+}
+function DrawerClose({
+  children
+}) {
+  const {
+    setOpen
+  } = useDrawer('Drawer.Close');
+  if (! /*#__PURE__*/isValidElement(children)) return children;
+  return /*#__PURE__*/cloneElement(children, {
+    onPress: (...args) => {
+      children.props.onPress?.(...args);
+      setOpen(false);
+    }
+  });
+}
+function DrawerContent({
+  className,
+  side = 'start',
+  size = 'md',
+  dismissible = true,
+  swipeToDismiss = true,
+  showClose = true,
+  blur = false,
+  children,
+  ...props
+}) {
+  const {
+    open,
+    setOpen
+  } = useDrawer('Drawer.Content');
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const dir = useDirection();
+  const sign = useDirectionSign();
+  const closeTint = useCSSVariable('--color-muted-foreground');
+
+  // Memoised for the reason `Direction` memoises its own: this is the object
+  // that invalidates layout for the whole panel, and a fresh one every render
+  // would re-run Yoga over it for a value that almost never changes.
+  const directionStyle = useMemo(() => ({
+    direction: dir
+  }), [dir]);
+  const close = useCallback(() => setOpen(false), [setOpen]);
+
+  // An open drawer catches the Android back button, closing itself instead of
+  // popping the screen behind it.
+  useBackHandler(open, close);
+  const horizontal = side === 'start' || side === 'end';
+
+  /**
+   * How far the panel has to travel to be fully off-screen — the distance a
+   * dismissing drag animates out to, and the axis the drag is measured on.
+   */
+  const extent = horizontal ? Math.min(screenWidth * WIDTH[size].fraction, WIDTH[size].max) : screenHeight * HEIGHT[size];
+
+  /**
+   * Which way "outward" points in raw pixels.
+   *
+   * Yoga has already mirrored where the panel sits, but a transform is not
+   * laid out — it is applied to whatever Yoga decided — so this is the one
+   * place that has to know the reading direction and negate itself. A `start`
+   * drawer leaves toward negative X in a left-to-right app and positive X in a
+   * right-to-left one; `end` is the mirror of that.
+   */
+  const outward = horizontal ? (side === 'start' ? -1 : 1) * sign : side === 'top' ? -1 : 1;
+
+  /** Outward drag distance in points. Negative means dragged further in. */
+  const travel = useSharedValue(0);
+
+  /*
+   * Parked at zero on every open. A swipe-dismiss leaves the panel a full
+   * extent outward, and without this the next open would draw a lit backdrop
+   * over an app with the drawer still off-screen behind it — dimmed, blocking,
+   * and with nothing on it to close.
+   */
+  useEffect(() => {
+    if (open) travel.value = 0;
+  }, [open, travel]);
+  const pan = useMemo(() => {
+    const gesture = Gesture.Pan().enabled(swipeToDismiss).onChange(event => {
+      const delta = (horizontal ? event.changeX : event.changeY) * outward;
+      const next = travel.value + delta;
+      // Follow the finger outward; rubber-band the pull further in, which
+      // has nowhere to go.
+      travel.value = next > 0 ? next : next / 3;
+    }).onEnd(event => {
+      const velocity = (horizontal ? event.velocityX : event.velocityY) * outward;
+      if (travel.value > DISMISS_DISTANCE || velocity > DISMISS_VELOCITY) {
+        travel.value = withTiming(extent, {
+          duration: 180
+        }, finished => {
+          if (finished) runOnJS(close)();
+        });
+      } else {
+        travel.value = withSpring(0, SPRING);
+      }
+    });
+
+    /*
+     * The drag has to give way to whatever the content is doing on the other
+     * axis. A side drawer holds a vertical list, so a mostly-vertical drag
+     * fails here and the list keeps it — which is why a side drawer needs none
+     * of the shared-gesture machinery a bottom sheet does.
+     */
+    return horizontal ? gesture.activeOffsetX([-12, 12]).failOffsetY([-18, 18]) : gesture.activeOffsetY([-12, 12]).failOffsetX([-18, 18]);
+  }, [close, extent, horizontal, outward, swipeToDismiss, travel]);
+  const panelStyle = useAnimatedStyle(() => horizontal ? {
+    transform: [{
+      translateX: travel.value * outward
+    }]
+  } : {
+    transform: [{
+      translateY: travel.value * outward
+    }]
+  });
+  const surface = useMemo(() => ({
+    side,
+    showClose
+  }), [side, showClose]);
+  if (!open) return null;
+
+  /*
+   * The slide has to be given a physical direction, since the animation
+   * presets are physical. This is the same mirroring Yoga did for the panel's
+   * position, applied by hand to the one thing Yoga does not own.
+   */
+  const physical = horizontal ? side === 'start' === (dir === 'ltr') ? 'left' : 'right' : side;
+  const entering = {
+    left: SlideInLeft,
+    right: SlideInRight,
+    top: SlideInUp,
+    bottom: SlideInDown
+  }[physical];
+  const exiting = {
+    left: SlideOutLeft,
+    right: SlideOutRight,
+    top: SlideOutUp,
+    bottom: SlideOutDown
+  }[physical];
+
+  /*
+   * The inset and the panel's own padding stack rather than compete.
+   *
+   * A drawer that reaches the top of the screen is drawn behind the status bar
+   * on purpose — a surface the app disappears under should not stop short of
+   * the edge — but the clock and the battery are drawn *in* that band, so the
+   * content clears the whole of it and then takes its padding on top. `Math.max`
+   * gave the two the same slot: on a 59-point inset it resolved to 59, leaving
+   * the header and the close button flush against the clock with nothing
+   * between them.
+   *
+   * `bottom` is the one side whose top edge is nowhere near the status bar, and
+   * `top` the one side ending in open screen rather than at the home indicator.
+   * Each takes plain padding on the edge it does not meet.
+   */
+  const padding = {
+    paddingTop: side === 'bottom' ? 16 : insets.top + 16,
+    paddingBottom: side === 'top' ? 16 : Math.max(insets.bottom, 16)
+  };
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(DrawerContext.Provider, {
+      value: {
+        open,
+        setOpen
+      },
+      children: /*#__PURE__*/_jsx(DirectionContext.Provider, {
+        value: dir,
+        children: /*#__PURE__*/_jsxs(View, {
+          className: "absolute inset-0",
+          style: directionStyle,
+          children: [/*#__PURE__*/_jsxs(View, {
+            className: "absolute inset-0",
+            children: [/*#__PURE__*/_jsx(Scrim, {
+              blur: blur
+            }), /*#__PURE__*/_jsx(Pressable, {
+              accessibilityLabel: "Close drawer",
+              className: "flex-1",
+              onPress: dismissible ? close : undefined
+            })]
+          }), /*#__PURE__*/_jsx(GestureDetector, {
+            gesture: pan,
+            children: /*#__PURE__*/_jsx(Animated.View, {
+              entering: entering.springify().damping(24).stiffness(260).mass(0.7),
+              exiting: exiting.duration(200),
+              accessibilityViewIsModal: true,
+              className: panelVariants({
+                side,
+                className
+              }),
+              ...props,
+              // After the spread, and folding the caller's own `style` in
+              // rather than replacing the array: spread last, a caller
+              // passing `style` would silently drop the drag transform and
+              // the safe-area padding with it.
+              style: [panelStyle, padding, horizontal ? {
+                width: extent
+              } : {
+                height: extent
+              }, props.style],
+              children: /*#__PURE__*/_jsxs(DrawerSurfaceContext.Provider, {
+                value: surface,
+                children: [textChildren(children), showClose ? /*#__PURE__*/_jsx(Pressable, {
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Close",
+                  onPress: close,
+                  hitSlop: 8,
+                  className: cn('absolute z-10 h-8 w-8 items-center justify-center rounded-full bg-muted active:opacity-70', side === 'end' ? 'start-4' : 'end-4'),
+                  style: {
+                    top: padding.paddingTop
+                  },
+                  children: /*#__PURE__*/_jsx(XIcon, {
+                    size: 16,
+                    color: typeof closeTint === 'string' ? closeTint : undefined
+                  })
+                }) : null]
+              })
+            })
+          })]
+        })
+      })
+    })
+  });
+}
+function DrawerHeader({
+  className,
+  title,
+  description,
+  children,
+  ...props
+}) {
+  const surface = useContext(DrawerSurfaceContext);
+
+  /*
+   * Padding on whichever side the close button took, so a long title wraps
+   * above it rather than running underneath it. Nothing to clear when the
+   * button was turned off, and a header used outside a panel keeps its plain
+   * padding rather than reserving a corner for a button that is not there.
+   */
+  const clearance = !surface?.showClose ? undefined : surface.side === 'end' ? 'ps-14' : 'pe-14';
+  return /*#__PURE__*/_jsxs(View, {
+    className: cn('gap-1 px-5 pb-3', clearance, className),
+    ...props,
+    children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+      size: "lg",
+      weight: "semibold",
+      children: title
+    }) : title, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+      className: "text-sm text-muted-foreground",
+      children: description
+    }) : description, textChildren(children)]
+  });
+}
+function DrawerBody({
+  className,
+  scrollable = true,
+  children,
+  contentContainerStyle,
+  ...props
+}) {
+  if (!scrollable) {
+    return /*#__PURE__*/_jsx(View, {
+      className: cn('flex-1 px-5', className),
+      children: textChildren(children)
+    });
+  }
+  return /*#__PURE__*/_jsx(ScrollView, {
+    className: cn('flex-1', className),
+    showsVerticalScrollIndicator: false
+    // The drawer's own drag runs across this axis and fails out of a mostly
+    // vertical touch, so the two never have to be reconciled.
+    ,
+    contentContainerStyle: [{
+      paddingHorizontal: 20
+    }, contentContainerStyle],
+    ...props,
+    children: textChildren(children)
+  });
+}
+function DrawerFooter({
+  className,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    className: cn('flex-row items-center gap-2 border-t border-border px-5 pt-3', className),
+    ...props,
+    children: textChildren(children)
+  });
+}
+export const Drawer = Object.assign(DrawerRoot, {
+  Trigger: DrawerTrigger,
+  Content: DrawerContent,
+  Header: DrawerHeader,
+  Body: DrawerBody,
+  Footer: DrawerFooter,
+  Close: DrawerClose
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cloneElement","createContext","isValidElement","useCallback","useContext","useEffect","useMemo","useState","Pressable","ScrollView","useWindowDimensions","View","Gesture","GestureDetector","Animated","SlideInDown","SlideInLeft","SlideInRight","SlideInUp","SlideOutDown","SlideOutLeft","SlideOutRight","SlideOutUp","runOnJS","useAnimatedStyle","useSharedValue","withSpring","withTiming","useSafeAreaInsets","tv","useCSSVariable","XIcon","Portal","Scrim","Text","textChildren","useBackHandler","DirectionContext","useDirection","useDirectionSign","cn","jsx","_jsx","jsxs","_jsxs","SPRING","damping","stiffness","mass","DISMISS_DISTANCE","DISMISS_VELOCITY","WIDTH","sm","fraction","max","md","lg","full","Infinity","HEIGHT","panelVariants","base","variants","side","start","end","top","bottom","defaultVariants","DrawerContext","useDrawer","component","context","Error","DrawerSurfaceContext","DrawerRoot","children","open","controlledOpen","onOpenChange","defaultOpen","uncontrolledOpen","setUncontrolledOpen","controlled","undefined","setOpen","next","Provider","value","DrawerTrigger","onPress","args","props","DrawerClose","DrawerContent","className","size","dismissible","swipeToDismiss","showClose","blur","width","screenWidth","height","screenHeight","insets","dir","sign","closeTint","directionStyle","direction","close","horizontal","extent","Math","min","outward","travel","pan","gesture","Pan","enabled","onChange","event","delta","changeX","changeY","onEnd","velocity","velocityX","velocityY","duration","finished","activeOffsetX","failOffsetY","activeOffsetY","failOffsetX","panelStyle","transform","translateX","translateY","surface","physical","entering","left","right","exiting","padding","paddingTop","paddingBottom","style","accessibilityLabel","springify","accessibilityViewIsModal","accessibilityRole","hitSlop","color","DrawerHeader","title","description","clearance","weight","DrawerBody","scrollable","contentContainerStyle","showsVerticalScrollIndicator","paddingHorizontal","DrawerFooter","Drawer","Object","assign","Trigger","Content","Header","Body","Footer","Close"],"sourceRoot":"../../../../src","sources":["components/drawer/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;AACA;AACA;AACA;AACA,SACEA,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QAGH,OAAO;AACd,SACEC,SAAS,EACTC,UAAU,EACVC,mBAAmB,EACnBC,IAAI,QAGC,cAAc;AACrB,SAASC,OAAO,EAAEC,eAAe,QAAQ,8BAA8B;AACvE,OAAOC,QAAQ,IACbC,WAAW,EACXC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,YAAY,EACZC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,OAAO,EACPC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,UAAU,QACL,yBAAyB;AAChC,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,EAAE,QAAQ,mBAAmB;AACtC,SAASC,cAAc,QAAQ,SAAS;AACxC,SAASC,KAAK,QAAQ,sBAAa;AACnC,SAASC,MAAM,QAAQ,4BAAyB;AAChD,SAASC,KAAK,QAAQ,2BAAwB;AAC9C,SAASC,IAAI,EAAEC,YAAY,QAAQ,0BAAuB;AAC1D,SAASC,cAAc,QAAQ,iCAA8B;AAC7D,SACEC,gBAAgB,EAChBC,YAAY,EACZC,gBAAgB,QACX,8BAA2B;AAClC,SAASC,EAAE,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpC,MAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE,EAAE;EAAEC,SAAS,EAAE,GAAG;EAAEC,IAAI,EAAE;AAAI,CAAU;AAClE;AACA,MAAMC,gBAAgB,GAAG,EAAE;AAC3B;AACA,MAAMC,gBAAgB,GAAG,GAAG;AAK5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAK,GAAG;EACZC,EAAE,EAAE;IAAEC,QAAQ,EAAE,IAAI;IAAEC,GAAG,EAAE;EAAI,CAAC;EAChCC,EAAE,EAAE;IAAEF,QAAQ,EAAE,IAAI;IAAEC,GAAG,EAAE;EAAI,CAAC;EAChCE,EAAE,EAAE;IAAEH,QAAQ,EAAE,IAAI;IAAEC,GAAG,EAAE;EAAI,CAAC;EAChC;EACA;EACAG,IAAI,EAAE;IAAEJ,QAAQ,EAAE,IAAI;IAAEC,GAAG,EAAEI;EAAS;AACxC,CAAU;;AAEV;AACA,MAAMC,MAAM,GAAG;EACbP,EAAE,EAAE,GAAG;EACPG,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,IAAI,EAAE;AACR,CAAU;AAEV,MAAMG,aAAa,GAAG/B,EAAE,CAAC;EACvBgC,IAAI,EAAE,6CAA6C;EACnDC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ;MACA;MACA;MACAC,KAAK,EAAE,+CAA+C;MACtDC,GAAG,EAAE,6CAA6C;MAClDC,GAAG,EAAE,4CAA4C;MACjDC,MAAM,EAAE;IACV;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CAAC,CAAC;AAOF,MAAMM,aAAa,gBAAGpE,aAAa,CAA4B,IAAI,CAAC;AAEpE,SAASqE,SAASA,CAACC,SAAiB,EAAsB;EACxD,MAAMC,OAAO,GAAGpE,UAAU,CAACiE,aAAa,CAAC;EACzC,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,GAAGF,SAAS,iCAAiC,CAAC;EAChE;EACA,OAAOC,OAAO;AAChB;;AAEA;AACA;AACA;AACA;;AAMA,MAAME,oBAAoB,gBAAGzE,aAAa,CAA4B,IAAI,CAAC;AAY3E,SAAS0E,UAAUA,CAAC;EAClBC,QAAQ;EACRC,IAAI,EAAEC,cAAc;EACpBC,YAAY;EACZC,WAAW,GAAG;AACH,CAAC,EAAE;EACd,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG3E,QAAQ,CAACyE,WAAW,CAAC;EACrE,MAAMG,UAAU,GAAGL,cAAc,KAAKM,SAAS;EAC/C,MAAMP,IAAI,GAAGM,UAAU,GAAGL,cAAc,GAAGG,gBAAgB;EAE3D,MAAMI,OAAO,GAAGlF,WAAW,CACxBmF,IAAa,IAAK;IACjB,IAAI,CAACH,UAAU,EAAED,mBAAmB,CAACI,IAAI,CAAC;IAC1CP,YAAY,GAAGO,IAAI,CAAC;EACtB,CAAC,EACD,CAACH,UAAU,EAAEJ,YAAY,CAC3B,CAAC;EAED,MAAMP,OAAO,GAAGlE,OAAO,CACrB,OAAO;IAAEuE,IAAI;IAAEQ;EAAQ,CAAC,CAAC,EACzB,CAACR,IAAI,EAAEQ,OAAO,CAChB,CAAC;EAED,oBACE3C,IAAA,CAAC2B,aAAa,CAACkB,QAAQ;IAACC,KAAK,EAAEhB,OAAQ;IAAAI,QAAA,EAAEA;EAAQ,CAAyB,CAAC;AAE/E;AAOA,SAASa,aAAaA,CAAC;EAAEb;AAA6B,CAAC,EAAE;EACvD,MAAM;IAAES;EAAQ,CAAC,GAAGf,SAAS,CAAC,gBAAgB,CAAC;EAC/C,IAAI,eAACpE,cAAc,CAAC0E,QAAQ,CAAC,EAAE,OAAOA,QAAQ;EAE9C,oBAAO5E,YAAY,CAAC4E,QAAQ,EAAE;IAC5Bc,OAAO,EAAEA,CAAC,GAAGC,IAAe,KAAK;MAC/Bf,QAAQ,CAACgB,KAAK,CAACF,OAAO,GAAG,GAAGC,IAAI,CAAC;MACjCN,OAAO,CAAC,IAAI,CAAC;IACf;EACF,CAAC,CAAC;AACJ;AAOA,SAASQ,WAAWA,CAAC;EAAEjB;AAA2B,CAAC,EAAE;EACnD,MAAM;IAAES;EAAQ,CAAC,GAAGf,SAAS,CAAC,cAAc,CAAC;EAC7C,IAAI,eAACpE,cAAc,CAAC0E,QAAQ,CAAC,EAAE,OAAOA,QAAQ;EAE9C,oBAAO5E,YAAY,CAAC4E,QAAQ,EAAE;IAC5Bc,OAAO,EAAEA,CAAC,GAAGC,IAAe,KAAK;MAC/Bf,QAAQ,CAACgB,KAAK,CAACF,OAAO,GAAG,GAAGC,IAAI,CAAC;MACjCN,OAAO,CAAC,KAAK,CAAC;IAChB;EACF,CAAC,CAAC;AACJ;AAkCA,SAASS,aAAaA,CAAC;EACrBC,SAAS;EACThC,IAAI,GAAG,OAAO;EACdiC,IAAI,GAAG,IAAI;EACXC,WAAW,GAAG,IAAI;EAClBC,cAAc,GAAG,IAAI;EACrBC,SAAS,GAAG,IAAI;EAChBC,IAAI,GAAG,KAAK;EACZxB,QAAQ;EACR,GAAGgB;AACe,CAAC,EAAE;EACrB,MAAM;IAAEf,IAAI;IAAEQ;EAAQ,CAAC,GAAGf,SAAS,CAAC,gBAAgB,CAAC;EACrD,MAAM;IAAE+B,KAAK,EAAEC,WAAW;IAAEC,MAAM,EAAEC;EAAa,CAAC,GAAG9F,mBAAmB,CAAC,CAAC;EAC1E,MAAM+F,MAAM,GAAG7E,iBAAiB,CAAC,CAAC;EAClC,MAAM8E,GAAG,GAAGpE,YAAY,CAAC,CAAC;EAC1B,MAAMqE,IAAI,GAAGpE,gBAAgB,CAAC,CAAC;EAC/B,MAAMqE,SAAS,GAAG9E,cAAc,CAAC,0BAA0B,CAAC;;EAE5D;EACA;EACA;EACA,MAAM+E,cAAc,GAAGvG,OAAO,CAAC,OAAO;IAAEwG,SAAS,EAAEJ;EAAI,CAAC,CAAU,EAAE,CAACA,GAAG,CAAC,CAAC;EAE1E,MAAMK,KAAK,GAAG5G,WAAW,CAAC,MAAMkF,OAAO,CAAC,KAAK,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;;EAE1D;EACA;EACAjD,cAAc,CAACyC,IAAI,EAAEkC,KAAK,CAAC;EAE3B,MAAMC,UAAU,GAAGjD,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,KAAK;;EAErD;AACF;AACA;AACA;EACE,MAAMkD,MAAM,GAAGD,UAAU,GACrBE,IAAI,CAACC,GAAG,CAACb,WAAW,GAAGnD,KAAK,CAAC6C,IAAI,CAAC,CAAC3C,QAAQ,EAAEF,KAAK,CAAC6C,IAAI,CAAC,CAAC1C,GAAG,CAAC,GAC7DkD,YAAY,GAAG7C,MAAM,CAACqC,IAAI,CAAC;;EAE/B;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE,MAAMoB,OAAO,GAAGJ,UAAU,GACtB,CAACjD,IAAI,KAAK,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI4C,IAAI,GAClC5C,IAAI,KAAK,KAAK,GACZ,CAAC,CAAC,GACF,CAAC;;EAEP;EACA,MAAMsD,MAAM,GAAG5F,cAAc,CAAC,CAAC,CAAC;;EAEhC;AACF;AACA;AACA;AACA;AACA;EACEpB,SAAS,CAAC,MAAM;IACd,IAAIwE,IAAI,EAAEwC,MAAM,CAAC7B,KAAK,GAAG,CAAC;EAC5B,CAAC,EAAE,CAACX,IAAI,EAAEwC,MAAM,CAAC,CAAC;EAElB,MAAMC,GAAG,GAAGhH,OAAO,CAAC,MAAM;IACxB,MAAMiH,OAAO,GAAG3G,OAAO,CAAC4G,GAAG,CAAC,CAAC,CAC1BC,OAAO,CAACvB,cAAc,CAAC,CACvBwB,QAAQ,CAAEC,KAAK,IAAK;MACnB,MAAMC,KAAK,GAAG,CAACZ,UAAU,GAAGW,KAAK,CAACE,OAAO,GAAGF,KAAK,CAACG,OAAO,IAAIV,OAAO;MACpE,MAAM9B,IAAI,GAAG+B,MAAM,CAAC7B,KAAK,GAAGoC,KAAK;MACjC;MACA;MACAP,MAAM,CAAC7B,KAAK,GAAGF,IAAI,GAAG,CAAC,GAAGA,IAAI,GAAGA,IAAI,GAAG,CAAC;IAC3C,CAAC,CAAC,CACDyC,KAAK,CAAEJ,KAAK,IAAK;MAChB,MAAMK,QAAQ,GACZ,CAAChB,UAAU,GAAGW,KAAK,CAACM,SAAS,GAAGN,KAAK,CAACO,SAAS,IAAId,OAAO;MAC5D,IAAIC,MAAM,CAAC7B,KAAK,GAAGvC,gBAAgB,IAAI+E,QAAQ,GAAG9E,gBAAgB,EAAE;QAClEmE,MAAM,CAAC7B,KAAK,GAAG7D,UAAU,CAACsF,MAAM,EAAE;UAAEkB,QAAQ,EAAE;QAAI,CAAC,EAAGC,QAAQ,IAAK;UACjE,IAAIA,QAAQ,EAAE7G,OAAO,CAACwF,KAAK,CAAC,CAAC,CAAC;QAChC,CAAC,CAAC;MACJ,CAAC,MAAM;QACLM,MAAM,CAAC7B,KAAK,GAAG9D,UAAU,CAAC,CAAC,EAAEmB,MAAM,CAAC;MACtC;IACF,CAAC,CAAC;;IAEJ;AACJ;AACA;AACA;AACA;AACA;IACI,OAAOmE,UAAU,GACbO,OAAO,CAACc,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,GACvDf,OAAO,CAACgB,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;EAC7D,CAAC,EAAE,CAACzB,KAAK,EAAEE,MAAM,EAAED,UAAU,EAAEI,OAAO,EAAElB,cAAc,EAAEmB,MAAM,CAAC,CAAC;EAEhE,MAAMoB,UAAU,GAAGjH,gBAAgB,CAAC,MAClCwF,UAAU,GACN;IAAE0B,SAAS,EAAE,CAAC;MAAEC,UAAU,EAAEtB,MAAM,CAAC7B,KAAK,GAAG4B;IAAQ,CAAC;EAAE,CAAC,GACvD;IAAEsB,SAAS,EAAE,CAAC;MAAEE,UAAU,EAAEvB,MAAM,CAAC7B,KAAK,GAAG4B;IAAQ,CAAC;EAAE,CAC5D,CAAC;EAED,MAAMyB,OAAO,GAAGvI,OAAO,CACrB,OAAO;IAAEyD,IAAI;IAAEoC;EAAU,CAAC,CAAC,EAC3B,CAACpC,IAAI,EAAEoC,SAAS,CAClB,CAAC;EAED,IAAI,CAACtB,IAAI,EAAE,OAAO,IAAI;;EAEtB;AACF;AACA;AACA;AACA;EACE,MAAMiE,QAA6C,GAAG9B,UAAU,GAC3DjD,IAAI,KAAK,OAAO,MAAO2C,GAAG,KAAK,KAAK,CAAC,GACpC,MAAM,GACN,OAAO,GACT3C,IAAI;EAER,MAAMgF,QAAQ,GAAG;IACfC,IAAI,EAAEhI,WAAW;IACjBiI,KAAK,EAAEhI,YAAY;IACnBiD,GAAG,EAAEhD,SAAS;IACdiD,MAAM,EAAEpD;EACV,CAAC,CAAC+H,QAAQ,CAAC;EAEX,MAAMI,OAAO,GAAG;IACdF,IAAI,EAAE5H,YAAY;IAClB6H,KAAK,EAAE5H,aAAa;IACpB6C,GAAG,EAAE5C,UAAU;IACf6C,MAAM,EAAEhD;EACV,CAAC,CAAC2H,QAAQ,CAAC;;EAEX;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE,MAAMK,OAAO,GAAG;IACdC,UAAU,EAAErF,IAAI,KAAK,QAAQ,GAAG,EAAE,GAAG0C,MAAM,CAACvC,GAAG,GAAG,EAAE;IACpDmF,aAAa,EAAEtF,IAAI,KAAK,KAAK,GAAG,EAAE,GAAGmD,IAAI,CAAC5D,GAAG,CAACmD,MAAM,CAACtC,MAAM,EAAE,EAAE;EACjE,CAAC;EAED,oBACEzB,IAAA,CAACV,MAAM;IAAA4C,QAAA,eAGLlC,IAAA,CAAC2B,aAAa,CAACkB,QAAQ;MAACC,KAAK,EAAE;QAAEX,IAAI;QAAEQ;MAAQ,CAAE;MAAAT,QAAA,eAe/ClC,IAAA,CAACL,gBAAgB,CAACkD,QAAQ;QAACC,KAAK,EAAEkB,GAAI;QAAA9B,QAAA,eACpChC,KAAA,CAACjC,IAAI;UAACoF,SAAS,EAAC,kBAAkB;UAACuD,KAAK,EAAEzC,cAAe;UAAAjC,QAAA,gBACvDhC,KAAA,CAACjC,IAAI;YAACoF,SAAS,EAAC,kBAAkB;YAAAnB,QAAA,gBAIhClC,IAAA,CAACT,KAAK;cAACmE,IAAI,EAAEA;YAAK,CAAE,CAAC,eACrB1D,IAAA,CAAClC,SAAS;cACR+I,kBAAkB,EAAC,cAAc;cACjCxD,SAAS,EAAC,QAAQ;cAClBL,OAAO,EAAEO,WAAW,GAAGc,KAAK,GAAG3B;YAAU,CAC1C,CAAC;UAAA,CACE,CAAC,eACP1C,IAAA,CAAC7B,eAAe;YAAC0G,OAAO,EAAED,GAAI;YAAA1C,QAAA,eAC5BlC,IAAA,CAAC5B,QAAQ,CAACH,IAAI;cACZoI,QAAQ,EAAEA,QAAQ,CACfS,SAAS,CAAC,CAAC,CACX1G,OAAO,CAAC,EAAE,CAAC,CACXC,SAAS,CAAC,GAAG,CAAC,CACdC,IAAI,CAAC,GAAG,CAAE;cACbkG,OAAO,EAAEA,OAAO,CAACf,QAAQ,CAAC,GAAG,CAAE;cAC/BsB,wBAAwB;cACxB1D,SAAS,EAAEnC,aAAa,CAAC;gBAAEG,IAAI;gBAAEgC;cAAU,CAAC,CAAE;cAAA,GAC1CH,KAAK;cACT;cACA;cACA;cACA;cACA0D,KAAK,EAAE,CACLb,UAAU,EACVU,OAAO,EACPnC,UAAU,GAAG;gBAAEX,KAAK,EAAEY;cAAO,CAAC,GAAG;gBAAEV,MAAM,EAAEU;cAAO,CAAC,EACnDrB,KAAK,CAAC0D,KAAK,CACX;cAAA1E,QAAA,eAEFhC,KAAA,CAAC8B,oBAAoB,CAACa,QAAQ;gBAACC,KAAK,EAAEqD,OAAQ;gBAAAjE,QAAA,GAC3CzC,YAAY,CAACyC,QAAQ,CAAC,EAsBtBuB,SAAS,gBACRzD,IAAA,CAAClC,SAAS;kBACRkJ,iBAAiB,EAAC,QAAQ;kBAC1BH,kBAAkB,EAAC,OAAO;kBAC1B7D,OAAO,EAAEqB,KAAM;kBACf4C,OAAO,EAAE,CAAE;kBACX5D,SAAS,EAAEvD,EAAE,CACX,2FAA2F,EAC3FuB,IAAI,KAAK,KAAK,GAAG,SAAS,GAAG,OAC/B,CAAE;kBACFuF,KAAK,EAAE;oBAAEpF,GAAG,EAAEiF,OAAO,CAACC;kBAAW,CAAE;kBAAAxE,QAAA,eAEnClC,IAAA,CAACX,KAAK;oBACJiE,IAAI,EAAE,EAAG;oBACT4D,KAAK,EACH,OAAOhD,SAAS,KAAK,QAAQ,GAAGA,SAAS,GAAGxB;kBAC7C,CACF;gBAAC,CACO,CAAC,GACV,IAAI;cAAA,CACqB;YAAC,CACnB;UAAC,CACD,CAAC;QAAA,CACd;MAAC,CACkB;IAAC,CACN;EAAC,CACnB,CAAC;AAEb;AAWA,SAASyE,YAAYA,CAAC;EACpB9D,SAAS;EACT+D,KAAK;EACLC,WAAW;EACXnF,QAAQ;EACR,GAAGgB;AACc,CAAC,EAAE;EACpB,MAAMiD,OAAO,GAAGzI,UAAU,CAACsE,oBAAoB,CAAC;;EAEhD;AACF;AACA;AACA;AACA;AACA;EACE,MAAMsF,SAAS,GAAG,CAACnB,OAAO,EAAE1C,SAAS,GACjCf,SAAS,GACTyD,OAAO,CAAC9E,IAAI,KAAK,KAAK,GACpB,OAAO,GACP,OAAO;EAEb,oBACEnB,KAAA,CAACjC,IAAI;IAACoF,SAAS,EAAEvD,EAAE,CAAC,iBAAiB,EAAEwH,SAAS,EAAEjE,SAAS,CAAE;IAAA,GAAKH,KAAK;IAAAhB,QAAA,GACpE,OAAOkF,KAAK,KAAK,QAAQ,gBACxBpH,IAAA,CAACR,IAAI;MAAC8D,IAAI,EAAC,IAAI;MAACiE,MAAM,EAAC,UAAU;MAAArF,QAAA,EAC9BkF;IAAK,CACF,CAAC,GAEPA,KACD,EACA,OAAOC,WAAW,KAAK,QAAQ,gBAC9BrH,IAAA,CAACR,IAAI;MAAC6D,SAAS,EAAC,+BAA+B;MAAAnB,QAAA,EAAEmF;IAAW,CAAO,CAAC,GAEpEA,WACD,EACA5H,YAAY,CAACyC,QAAQ,CAAC;EAAA,CACnB,CAAC;AAEX;AAcA,SAASsF,UAAUA,CAAC;EAClBnE,SAAS;EACToE,UAAU,GAAG,IAAI;EACjBvF,QAAQ;EACRwF,qBAAqB;EACrB,GAAGxE;AACY,CAAC,EAAE;EAClB,IAAI,CAACuE,UAAU,EAAE;IACf,oBACEzH,IAAA,CAAC/B,IAAI;MAACoF,SAAS,EAAEvD,EAAE,CAAC,aAAa,EAAEuD,SAAS,CAAE;MAAAnB,QAAA,EAC3CzC,YAAY,CAACyC,QAAQ;IAAC,CACnB,CAAC;EAEX;EAEA,oBACElC,IAAA,CAACjC,UAAU;IACTsF,SAAS,EAAEvD,EAAE,CAAC,QAAQ,EAAEuD,SAAS,CAAE;IACnCsE,4BAA4B,EAAE;IAC9B;IACA;IAAA;IACAD,qBAAqB,EAAE,CAAC;MAAEE,iBAAiB,EAAE;IAAG,CAAC,EAAEF,qBAAqB,CAAE;IAAA,GACtExE,KAAK;IAAAhB,QAAA,EAERzC,YAAY,CAACyC,QAAQ;EAAC,CACb,CAAC;AAEjB;AAOA,SAAS2F,YAAYA,CAAC;EAAExE,SAAS;EAAEnB,QAAQ;EAAE,GAAGgB;AAAyB,CAAC,EAAE;EAC1E,oBACElD,IAAA,CAAC/B,IAAI;IACHoF,SAAS,EAAEvD,EAAE,CACX,8DAA8D,EAC9DuD,SACF,CAAE;IAAA,GACEH,KAAK;IAAAhB,QAAA,EAERzC,YAAY,CAACyC,QAAQ;EAAC,CACnB,CAAC;AAEX;AAEA,OAAO,MAAM4F,MAAM,GAAGC,MAAM,CAACC,MAAM,CAAC/F,UAAU,EAAE;EAC9CgG,OAAO,EAAElF,aAAa;EACtBmF,OAAO,EAAE9E,aAAa;EACtB+E,MAAM,EAAEhB,YAAY;EACpBiB,IAAI,EAAEZ,UAAU;EAChBa,MAAM,EAAER,YAAY;EACpBS,KAAK,EAAEnF;AACT,CAAC,CAAC","ignoreList":[]}

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

@@ -44,6 +44,7 @@ import Svg, { ClipPath, Defs, G, Line as SvgLine, Rect } from 'react-native-svg'
 import { useCSSVariable } from 'uniwind';
 import { Text } from "../../primitives/text.js";
 import { cn } from "../../utils/cn.js";
+import { normalizeWeekStart, startOfDay } from "../../utils/date.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 
@@ -137,11 +138,14 @@ export function useHeatmapChart() {
  * empty cells or the calendar develops holes.
  */
 export function buildHeatmapCalendar(entries, options = {}) {
-  const weekStartDay = options.weekStartDay ?? 0;
+  const weekStartDay = normalizeWeekStart(options.weekStartDay ?? 0);
   if (!entries.length && !options.start) return [];
   const times = entries.map(entry => entry.date.getTime());
-  const start = options.start ?? new Date(Math.min(...times));
-  const end = options.end ?? new Date(Math.max(...times));
+  // Both bounds at local midnight, and both the same way. Comparing a
+  // normalised lower bound against a raw upper one drops the last day whenever
+  // the caller's `end` carries a time earlier than the cell being tested.
+  const start = startOfDay(options.start ?? new Date(Math.min(...times)));
+  const end = startOfDay(options.end ?? new Date(Math.max(...times)));
   const byDay = new Map();
   for (const entry of entries) {
     const key = dayKey(entry.date);
@@ -150,7 +154,7 @@ export function buildHeatmapCalendar(entries, options = {}) {
 
   // Back up to the first day of the week the range starts in, so column 0 is a
   // whole week and every row lines up with a weekday for the rest of the chart.
-  const cursor = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+  const cursor = startOfDay(start);
   cursor.setDate(cursor.getDate() - (cursor.getDay() - weekStartDay + 7) % 7);
   const columns = [];
   let column = [];
@@ -159,7 +163,7 @@ export function buildHeatmapCalendar(entries, options = {}) {
     const date = new Date(cursor);
     // Before the range starts and after it ends the cell exists but has no
     // reading — `count: 0` and no date, so the tooltip stays quiet on it.
-    const inRange = date >= startOfDay(start) && date <= end;
+    const inRange = date >= start && date <= end;
     column.push({
       bin: row,
       count: inRange ? byDay.get(dayKey(date)) ?? 0 : 0,
@@ -177,9 +181,6 @@ export function buildHeatmapCalendar(entries, options = {}) {
   }
   return columns;
 }
-function startOfDay(date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-}
 function dayKey(date) {
   return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
 }