panelui-native 0.30.0 → 0.32.0

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

@@ -0,0 +1,992 @@
+"use strict";
+
+/**
+ * Post — a card carrying something somebody said, and what everyone did about it.
+ *
+ * Four shapes, because a feed is not one thing. `feed` is the full card: author,
+ * body, media and a row of counts. `vote` puts a score pill beside a headline
+ * and a thumbnail, the way a ranked community reads. `compact` drops the media
+ * and puts the name and handle on one line, for a dense timeline. `media` gives
+ * the image the whole card and lays the author over it.
+ *
+ * What they share is the anatomy — the same `Post.Header`, `Post.Body`,
+ * `Post.Footer` in every one — so moving between them is a prop rather than a
+ * rewrite. The variant decides padding, media shape and where the author sits;
+ * it does not decide which parts exist.
+ *
+ * ```tsx
+ * <Post variant="feed">
+ *   <Post.Header>
+ *     <Post.Author name="Dwayne F. White" verified timestamp="3m ago" avatar={face} />
+ *     <Post.Action><EllipsisIcon /></Post.Action>
+ *   </Post.Header>
+ *   <Post.Body>I've been paying off my credit card #FinancialFreedom</Post.Body>
+ *   <Post.Media source={photo} />
+ *   <Post.Footer>
+ *     <Post.Stat icon={EyeIcon} value="5,874" />
+ *     <Post.Stat icon={HeartIcon} value="215" tone="like" />
+ *     <Post.Stat icon={MessageCircleIcon} value="11" />
+ *     <Post.Stat icon={BookmarkIcon} value="Save" align="end" />
+ *   </Post.Footer>
+ * </Post>
+ * ```
+ *
+ * ## Counts change under the finger
+ *
+ * Every control here is a toggle over a number, and the number is the point: a
+ * like that lights up but leaves `215` sitting there has not told you it
+ * counted. So a stat that changes animates the old value out and the new one in
+ * along the direction of the change, and `Post.Votes` does the same with its
+ * arrows. The alternative — repainting the digits in place — is indisting-
+ * uishable from a re-render, which is exactly the doubt the animation exists to
+ * remove.
+ */
+import { createContext, forwardRef, useContext, useEffect, useMemo, useRef } from 'react';
+import { Image, Pressable, View } from 'react-native';
+import Animated, { FadeIn, FadeInDown, FadeInUp, FadeOut, useAnimatedStyle, useReducedMotion, useSharedValue, withSequence, withSpring, withTiming } from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { ArrowDownIcon, ArrowUpIcon, BadgeCheckIcon } from "../../icons/index.js";
+import { usePrevious } from "../../hooks/use-previous.js";
+import { AnimatedPressable } from "../../primitives/animated-pressable.js";
+import { Text, textChildren } from "../../primitives/text.js";
+import { cn } from "../../utils/cn.js";
+import { selectionTick } from "../../utils/haptics.js";
+import { Avatar } from "../avatar/index.js";
+
+/** Long enough to see the value move, short enough to keep up with a fast tap. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const COUNT_DURATION = 160;
+
+/** The pop on a toggle: past 1 and back, so the press has a shape. */
+const POP = {
+  mass: 0.4,
+  damping: 12,
+  stiffness: 320
+};
+const postVariants = tv({
+  slots: {
+    root: 'w-full overflow-hidden rounded-2xl border border-border bg-card',
+    header: 'flex-row items-start gap-3',
+    author: 'min-w-0 flex-1 gap-0.5',
+    authorLine: 'flex-row items-center gap-1.5',
+    name: 'font-semibold text-card-foreground',
+    handle: 'text-muted-foreground',
+    meta: 'text-sm text-muted-foreground',
+    // As tall as the name's own line box, so at `items-start` the menu lands on
+    // the username's line rather than somewhere between the two lines of the
+    // author block — and lands there identically in all four variants.
+    action: 'h-6 shrink-0 items-center justify-center',
+    // `flex-1` for the same reason `Post.Author` has it: it is the header's
+    // flexible side, and without it the row is only as wide as the group's
+    // name — so `Post.Action` sits against the name instead of at the edge.
+    community: 'min-w-0 h-6 flex-1 flex-row items-center gap-2',
+    communityName: 'text-xs font-semibold text-card-foreground',
+    communityMeta: 'text-xs text-muted-foreground',
+    title: 'text-base font-semibold leading-snug text-card-foreground',
+    body: 'text-card-foreground',
+    media: 'overflow-hidden bg-muted',
+    footer: 'flex-row items-center',
+    stat: 'flex-row items-center gap-1.5 rounded-full',
+    statLabel: 'text-sm text-muted-foreground',
+    votes: 'flex-row items-center gap-0.5 rounded-full bg-muted',
+    voteButton: 'h-8 w-8 items-center justify-center rounded-full',
+    voteScore: 'text-sm font-semibold tabular-nums'
+  },
+  variants: {
+    variant: {
+      /** The full card — author, body, media, counts. */
+      feed: {
+        header: 'p-4 pb-3',
+        body: 'px-4 pb-3 text-base leading-relaxed',
+        media: 'mx-4 rounded-xl',
+        footer: 'gap-5 p-4'
+      },
+      /** A headline with a score beside it, the way a ranked community reads. */
+      vote: {
+        header: 'px-4 pb-2 pt-3.5',
+        body: 'px-4 pb-3 text-sm leading-relaxed',
+        media: 'mx-4 rounded-xl',
+        footer: 'gap-2 px-4 pb-3.5'
+      },
+      /** No media, name and handle on one line — for a dense timeline. */
+      compact: {
+        root: 'rounded-xl',
+        header: 'p-3.5 pb-2',
+        body: 'px-3.5 pb-2.5 text-sm leading-relaxed',
+        media: 'mx-3.5 rounded-lg',
+        footer: 'gap-6 px-3.5 pb-3'
+      },
+      /** The image is the card; the author is laid over it. */
+      media: {
+        header: 'absolute inset-x-0 top-0 z-10 p-3',
+        body: 'px-4 pb-3 pt-3 text-sm leading-relaxed',
+        media: 'rounded-none',
+        footer: 'gap-5 px-4 pb-4'
+      }
+    },
+    size: {
+      default: {},
+      sm: {
+        name: 'text-sm',
+        meta: 'text-xs',
+        statLabel: 'text-xs'
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'feed',
+    size: 'default'
+  }
+});
+const PostContext = /*#__PURE__*/createContext({
+  variant: 'feed',
+  size: 'default'
+});
+function usePost() {
+  return useContext(PostContext);
+}
+const PostRoot = /*#__PURE__*/forwardRef(({
+  className,
+  variant = 'feed',
+  size = 'default',
+  onPress,
+  children,
+  ...props
+}, ref) => {
+  const {
+    root
+  } = postVariants({
+    variant,
+    size
+  });
+  const context = useMemo(() => ({
+    variant,
+    size
+  }), [variant, size]);
+  const body = /*#__PURE__*/_jsx(PostContext.Provider, {
+    value: context,
+    children: children
+  });
+  if (!onPress) {
+    return /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      className: root({
+        className
+      }),
+      ...props,
+      children: body
+    });
+  }
+  return (
+    /*#__PURE__*/
+    // `article` rather than `button`: the card opens, but the row of controls
+    // inside it is the reason anyone is here, and announcing the whole thing
+    // as one button buries them.
+    _jsx(AnimatedPressable, {
+      ref: ref,
+      accessibilityRole: "link",
+      onPress: onPress,
+      className: root({
+        className
+      }),
+      ...props,
+      children: body
+    })
+  );
+});
+PostRoot.displayName = 'Post';
+
+/* -------------------------------------------------------------------------- */
+/* Header                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The author row. `Post.Action` is pulled to the trailing edge, so the overflow
+ * menu stays in the corner as a long display name wraps rather than riding down
+ * with it.
+ */
+const PostHeader = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    size
+  } = usePost();
+  const {
+    header
+  } = postVariants({
+    variant,
+    size
+  });
+  const content = [];
+  const actions = [];
+  for (const child of Array.isArray(children) ? children : [children]) {
+    if (isType(child, PostAction)) actions.push(child);else content.push(child);
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: header({
+      className
+    }),
+    ...props,
+    children: [content, actions]
+  });
+});
+PostHeader.displayName = 'Post.Header';
+function isType(child, type) {
+  return typeof child === 'object' && child !== null && 'type' in child && child.type === type;
+}
+/**
+ * Who posted it.
+ *
+ * The handle sits beside the name in `compact` and beneath it everywhere else,
+ * which is the difference between a timeline row and a card: a dense row cannot
+ * afford a second line, and a card looks starved without one.
+ */
+const PostAuthor = /*#__PURE__*/forwardRef(({
+  className,
+  name,
+  handle,
+  avatar,
+  fallback,
+  verified,
+  timestamp,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    size
+  } = usePost();
+  const {
+    author,
+    authorLine,
+    name: nameSlot,
+    handle: handleSlot,
+    meta
+  } = postVariants({
+    variant,
+    size
+  });
+  const verifiedColor = useCSSVariable('--color-primary');
+  const onVerified = useCSSVariable('--color-primary-foreground');
+  const inline = variant === 'compact';
+  const overlaid = variant === 'media';
+  return (
+    /*#__PURE__*/
+    // Top-aligned, not centred. The name is the first line of the block, and
+    // aligning to the top is what puts it — and therefore the menu opposite
+    // it — on the same rule in every variant, whether the block below the
+    // name is one line, two, or none.
+    _jsxs(View, {
+      ref: ref,
+      className: "min-w-0 flex-1 flex-row items-start gap-2.5",
+      ...props,
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        size: variant === 'compact' ? 'sm' : 'md',
+        source: avatar,
+        fallback: fallback ?? initials(name),
+        className: overlaid ? 'border-white/30' : undefined
+      }), /*#__PURE__*/_jsxs(View, {
+        className: author({
+          className
+        }),
+        children: [/*#__PURE__*/_jsxs(View, {
+          className: authorLine({
+            className: 'h-6'
+          }),
+          children: [/*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            className: nameSlot({
+              className: cn('shrink', overlaid && 'text-white')
+            }),
+            children: name
+          }), verified ? /*#__PURE__*/_jsx(BadgeCheckIcon, {
+            size: 15,
+            color: typeof verifiedColor === 'string' ? verifiedColor : '#2563eb',
+            checkColor: typeof onVerified === 'string' ? onVerified : '#ffffff'
+          }) : null, inline && handle ? /*#__PURE__*/_jsx(Text, {
+            size: "sm",
+            numberOfLines: 1,
+            className: handleSlot({
+              className: 'shrink'
+            }),
+            children: handle
+          }) : null, inline && timestamp !== undefined ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              size: "sm",
+              className: handleSlot(),
+              children: "\xB7"
+            }), textChildren(timestamp, text => /*#__PURE__*/_jsx(Text, {
+              size: "sm",
+              className: handleSlot(),
+              children: text
+            }))]
+          }) : null]
+        }), !inline && (handle || timestamp !== undefined) ? /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          className: meta({
+            className: overlaid ? 'text-white/80' : undefined
+          }),
+          children: [handle, typeof timestamp === 'string' ? timestamp : undefined].filter(Boolean).join(' · ')
+        }) : null, !inline && timestamp !== undefined && typeof timestamp !== 'string' ? timestamp : null, children]
+      })]
+    })
+  );
+});
+PostAuthor.displayName = 'Post.Author';
+
+/** First letters of the first two words — enough to tell two people apart. */
+function initials(name) {
+  return name.split(/\s+/).slice(0, 2).map(word => word[0] ?? '').join('').toUpperCase();
+}
+/** The header's trailing slot — an overflow menu, a follow button, a badge. */
+const PostAction = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    size
+  } = usePost();
+  const {
+    action
+  } = postVariants({
+    variant,
+    size
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: action({
+      className
+    }),
+    ...props,
+    children: children
+  });
+});
+PostAction.displayName = 'Post.Action';
+/**
+ * The group a post was made in, above its headline.
+ *
+ * Smaller and quieter than an author row, because in a ranked community the
+ * post's subject is the headline — the group is where it came from, not who
+ * said it.
+ */
+const PostCommunity = /*#__PURE__*/forwardRef(({
+  className,
+  name,
+  avatar,
+  meta,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    size
+  } = usePost();
+  const {
+    community,
+    communityName,
+    communityMeta
+  } = postVariants({
+    variant,
+    size
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: community({
+      className
+    }),
+    ...props,
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      size: "sm",
+      source: avatar,
+      fallback: name.replace(/^[^a-z0-9]*/i, '').slice(0, 1).toUpperCase(),
+      className: "h-6 w-6"
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      className: communityName({
+        className: 'shrink'
+      }),
+      children: name
+    }), meta !== undefined ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        className: communityMeta(),
+        children: "\xB7"
+      }), textChildren(meta, text => /*#__PURE__*/_jsx(Text, {
+        className: communityMeta(),
+        children: text
+      }))]
+    }) : null, children]
+  });
+});
+PostCommunity.displayName = 'Post.Community';
+
+/* -------------------------------------------------------------------------- */
+/* Body                                                                       */
+/* -------------------------------------------------------------------------- */
+
+/** The headline of a post whose subject is a headline rather than a person. */
+const PostTitle = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    size
+  } = usePost();
+  const {
+    title
+  } = postVariants({
+    variant,
+    size
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: cn('px-4 pb-2', className),
+    ...props,
+    children: textChildren(children, text => /*#__PURE__*/_jsx(Text, {
+      className: title(),
+      children: text
+    }))
+  });
+});
+PostTitle.displayName = 'Post.Title';
+/**
+ * What was written.
+ *
+ * Hashtags and mentions inside a string child are picked out and coloured. They
+ * are found in the text rather than declared, because a post body arrives as
+ * one string from wherever it was typed — asking the caller to pre-split it
+ * would mean every caller writing the same tokeniser.
+ *
+ * A non-string child is left entirely alone: it has already been laid out by
+ * someone who knew more than we do.
+ */
+const PostBody = /*#__PURE__*/forwardRef(({
+  className,
+  numberOfLines,
+  onTagPress,
+  onMentionPress,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    size
+  } = usePost();
+  const {
+    body
+  } = postVariants({
+    variant,
+    size
+  });
+  if (typeof children !== 'string') {
+    return /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      className: cn(body(), className),
+      ...props,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: cn(body({
+      className
+    })),
+    ...props,
+    children: /*#__PURE__*/_jsx(Text, {
+      numberOfLines: numberOfLines,
+      className: body({
+        className: 'p-0'
+      }),
+      children: tokenize(children).map((token, index) => token.kind === 'text' ? token.value : /*#__PURE__*/_jsx(Text, {
+        className: "text-primary",
+        onPress: token.kind === 'tag' ? onTagPress && (() => onTagPress(token.value.slice(1))) : onMentionPress && (() => onMentionPress(token.value.slice(1))),
+        children: token.value
+      }, index))
+    })
+  });
+});
+PostBody.displayName = 'Post.Body';
+/**
+ * Splits a body into plain runs, hashtags and mentions.
+ *
+ * The tag pattern stops at whitespace and at punctuation that ends a sentence,
+ * so "#DebtSnowball." highlights the tag and leaves the full stop black — the
+ * naive `\S+` swallows it and the sentence loses its ending.
+ */
+function tokenize(text) {
+  const pattern = /[#@][\w-]+/g;
+  const tokens = [];
+  let last = 0;
+  for (const match of text.matchAll(pattern)) {
+    const start = match.index ?? 0;
+    if (start > last) tokens.push({
+      kind: 'text',
+      value: text.slice(last, start)
+    });
+    tokens.push({
+      kind: match[0].startsWith('#') ? 'tag' : 'mention',
+      value: match[0]
+    });
+    last = start + match[0].length;
+  }
+  if (last < text.length) tokens.push({
+    kind: 'text',
+    value: text.slice(last)
+  });
+  return tokens;
+}
+/**
+ * Black, fading to nothing.
+ *
+ * Three stops rather than two: a straight linear ramp from 55% to nothing has a
+ * visible shoulder where it meets the picture, and the eye reads that shoulder
+ * as an edge — which is the whole thing a scrim exists to avoid.
+ */
+const SCRIM_COLOURS = ['rgba(0,0,0,0.55)', 'rgba(0,0,0,0.28)', 'rgba(0,0,0,0)'];
+
+/**
+ * The picture.
+ *
+ * A fixed aspect ratio rather than the image's own, because a feed of cards
+ * whose heights are decided by whatever was uploaded scrolls like a broken
+ * staircase. The image covers the box and is cropped by it.
+ */
+const PostMedia = /*#__PURE__*/forwardRef(({
+  className,
+  source,
+  aspectRatio = 16 / 10,
+  scrim,
+  overlay,
+  alt,
+  onPress,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    size
+  } = usePost();
+  const {
+    media
+  } = postVariants({
+    variant,
+    size
+  });
+  // The media variant lays the author over the image, so it needs shading by
+  // default — the caller should not have to remember what makes their own
+  // layout readable.
+  const shade = scrim ?? (variant === 'media' ? 'top' : 'none');
+  const picture = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Image, {
+      source: source,
+      resizeMode: "cover",
+      accessible: !!alt,
+      accessibilityLabel: alt,
+      accessibilityRole: alt ? 'image' : undefined,
+      className: "h-full w-full"
+    }), shade === 'top' || shade === 'both' ? /*#__PURE__*/_jsx(LinearGradient, {
+      pointerEvents: "none",
+      colors: SCRIM_COLOURS
+      // A fixed height, not a fraction. The scrim is there to carry one
+      // row of type, and a fraction of a 4:5 portrait shades half the
+      // photograph to do a job that needs the top 112 points of it.
+      ,
+      className: "absolute inset-x-0 top-0 h-28"
+    }) : null, shade === 'bottom' || shade === 'both' ? /*#__PURE__*/_jsx(LinearGradient, {
+      pointerEvents: "none",
+      colors: [SCRIM_COLOURS[2], SCRIM_COLOURS[1], SCRIM_COLOURS[0]],
+      className: "absolute inset-x-0 bottom-0 h-32"
+    }) : null, overlay ? /*#__PURE__*/_jsx(View, {
+      pointerEvents: "box-none",
+      className: "absolute inset-0",
+      children: overlay
+    }) : null, children]
+  });
+  if (!onPress) {
+    return /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      className: media({
+        className
+      }),
+      style: {
+        aspectRatio
+      },
+      ...props,
+      children: picture
+    });
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    accessibilityRole: "imagebutton",
+    accessibilityLabel: alt,
+    onPress: onPress,
+    className: media({
+      className
+    }),
+    style: {
+      aspectRatio
+    },
+    ...props,
+    children: picture
+  });
+});
+PostMedia.displayName = 'Post.Media';
+
+/* -------------------------------------------------------------------------- */
+/* Footer                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/** The row of counts and controls under the post. */
+const PostFooter = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    size
+  } = usePost();
+  const {
+    footer
+  } = postVariants({
+    variant,
+    size
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: footer({
+      className
+    }),
+    ...props,
+    children: children
+  });
+});
+PostFooter.displayName = 'Post.Footer';
+
+/** What lighting up means. A like is red, a save is the accent, a repost green. */
+const statTone = {
+  default: '--color-primary',
+  like: '--color-destructive',
+  save: '--color-primary',
+  repost: '--color-success'
+};
+/**
+ * One count in the footer, and the control that changes it.
+ *
+ * Pressing it pops the icon past its own size and settles back, fills it, and
+ * animates the value: the old number leaves upwards and the new one arrives
+ * from below when the count goes up, and the other way when it comes down.
+ * Repainting the digits in place is indistinguishable from a re-render, which
+ * is the doubt this exists to remove.
+ */
+const PostStat = /*#__PURE__*/forwardRef(({
+  className,
+  icon: Icon,
+  value,
+  active = false,
+  tone = 'default',
+  align = 'start',
+  onPress,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    size
+  } = usePost();
+  const {
+    stat,
+    statLabel
+  } = postVariants({
+    variant,
+    size
+  });
+  const litColor = useCSSVariable(statTone[tone]);
+  const restColor = useCSSVariable('--color-muted-foreground');
+  const reducedMotion = useReducedMotion();
+  const pop = useSharedValue(1);
+  const first = useRef(true);
+  useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    if (reducedMotion) return;
+    // Past 1 and back. A toggle that only grows reads as a state that got
+    // bigger; one that overshoots reads as a press.
+    pop.value = withSequence(withTiming(active ? 1.25 : 0.85, {
+      duration: 90
+    }), withSpring(1, POP));
+  }, [active, reducedMotion, pop]);
+  const iconStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scale: pop.value
+    }]
+  }));
+  const colour = active ? typeof litColor === 'string' ? litColor : '#e11d48' : typeof restColor === 'string' ? restColor : '#737373';
+  const inner = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [Icon ? /*#__PURE__*/_jsx(Animated.View, {
+      style: iconStyle,
+      children: /*#__PURE__*/_jsx(Icon, {
+        size: variant === 'compact' ? 15 : 17,
+        color: colour,
+        filled: active
+      })
+    }) : null, value !== undefined ? /*#__PURE__*/_jsx(PostCount, {
+      value: value,
+      className: statLabel({
+        className: active ? '' : undefined
+      }),
+      color: active ? colour : undefined
+    }) : null, children]
+  });
+  const classes = stat({
+    className: cn(align === 'end' && 'ms-auto', className)
+  });
+  if (!onPress) {
+    return /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      className: classes,
+      children: inner
+    });
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    accessibilityRole: "button",
+    accessibilityState: {
+      selected: active
+    }
+    // The row is dense, so the targets overlap their own boxes rather than
+    // being spaced far enough apart to be hit — spacing them would be a
+    // footer twice as wide as the numbers in it.
+    ,
+    hitSlop: 10,
+    onPress: event => {
+      selectionTick();
+      onPress(event);
+    },
+    className: classes,
+    ...props,
+    children: inner
+  });
+});
+PostStat.displayName = 'Post.Stat';
+
+/**
+ * A number that moves when it changes.
+ *
+ * The new value arrives from the direction the count travelled — rising into
+ * place when it went up, dropping in when it came down — while the old one
+ * fades. `215 → 216` then reads as a count going up rather than as text being
+ * replaced, which is the doubt worth removing: repainting digits in place is
+ * indistinguishable from a re-render.
+ *
+ * Only the entering half carries the direction. The element leaving was
+ * rendered before anyone knew which way the number would go, so asking it to
+ * animate knowingly would mean knowing the future.
+ *
+ * A value that is not a number — "Save" — cross-fades, since there is no
+ * direction for a word to go.
+ */
+function PostCount({
+  value,
+  className,
+  color
+}) {
+  const reducedMotion = useReducedMotion();
+  // Read during the render the value changes on, not after it: an effect would
+  // settle the direction one frame after the animation had already started.
+  const before = numeric(usePrevious(value));
+  const after = numeric(value);
+  const direction = before === null || after === null || before === after ? 0 : after > before ? 1 : -1;
+  const label = /*#__PURE__*/_jsx(Text, {
+    className: className,
+    style: color ? {
+      color
+    } : undefined,
+    children: value
+  });
+  if (reducedMotion) return label;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    entering: direction === 1 ? FadeInUp.duration(COUNT_DURATION) : direction === -1 ? FadeInDown.duration(COUNT_DURATION) : FadeIn.duration(COUNT_DURATION),
+    exiting: FadeOut.duration(COUNT_DURATION),
+    children: label
+  }, String(value));
+}
+
+/** The value as a number, where it is one. `"5,874"` counts; `"Save"` does not. */
+function numeric(value) {
+  if (typeof value === 'number') return value;
+  if (typeof value !== 'string') return null;
+  const parsed = Number(value.replace(/[,\s]/g, ''));
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Votes                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The score, and the two arrows that move it.
+ *
+ * Both arrows fill and take a colour when cast, and the whole pill tints with
+ * them — the arrow alone is 16pt of a card, which is not enough to notice from
+ * arm's length. The score rolls in the direction of the change.
+ *
+ * Pressing the arrow already cast clears the vote. This is not a nicety: a
+ * score is a thing people change their minds about, and a vote that cannot be
+ * withdrawn is one they think twice before casting.
+ */
+const PostVotes = /*#__PURE__*/forwardRef(({
+  className,
+  score,
+  vote = null,
+  onVote,
+  orientation = 'horizontal',
+  disabled = false,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    size
+  } = usePost();
+  const {
+    votes,
+    voteButton,
+    voteScore
+  } = postVariants({
+    variant,
+    size
+  });
+  const upColor = useCSSVariable('--color-success');
+  const downColor = useCSSVariable('--color-destructive');
+  const restColor = useCSSVariable('--color-muted-foreground');
+  const up = typeof upColor === 'string' ? upColor : '#16a34a';
+  const down = typeof downColor === 'string' ? downColor : '#dc2626';
+  const rest = typeof restColor === 'string' ? restColor : '#737373';
+  const cast = next => {
+    selectionTick();
+    onVote?.(vote === next ? null : next);
+  };
+  const scoreColour = vote === 'up' ? up : vote === 'down' ? down : undefined;
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    accessibilityRole: "adjustable",
+    accessibilityLabel: "Score",
+    accessibilityValue: {
+      text: String(score)
+    },
+    className: votes({
+      className: cn(orientation === 'vertical' && 'flex-col gap-0', vote === 'up' && 'bg-success/12', vote === 'down' && 'bg-destructive/12', className)
+    }),
+    ...props,
+    children: [/*#__PURE__*/_jsx(VoteArrow, {
+      direction: "up",
+      active: vote === 'up',
+      color: vote === 'up' ? up : rest,
+      disabled: disabled,
+      className: voteButton(),
+      onPress: () => cast('up')
+    }), /*#__PURE__*/_jsx(PostCount, {
+      value: score,
+      className: voteScore({
+        className: 'min-w-6 text-center'
+      }),
+      color: scoreColour
+    }), /*#__PURE__*/_jsx(VoteArrow, {
+      direction: "down",
+      active: vote === 'down',
+      color: vote === 'down' ? down : rest,
+      disabled: disabled,
+      className: voteButton(),
+      onPress: () => cast('down')
+    })]
+  });
+});
+PostVotes.displayName = 'Post.Votes';
+
+/**
+ * One arrow.
+ *
+ * It travels along its own axis as it is cast — up for the up arrow, down for
+ * the down one — and springs back. The direction of the throw is the whole
+ * point: an arrow that merely scales says *something happened*, one that moves
+ * the way it points says *which way*.
+ */
+function VoteArrow({
+  direction,
+  active,
+  color,
+  disabled,
+  className,
+  onPress
+}) {
+  const reducedMotion = useReducedMotion();
+  const shift = useSharedValue(0);
+  const scale = useSharedValue(1);
+  const first = useRef(true);
+  useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    if (reducedMotion) return;
+    const travel = direction === 'up' ? -5 : 5;
+    shift.value = withSequence(withTiming(active ? travel : -travel * 0.4, {
+      duration: 100
+    }), withSpring(0, POP));
+    scale.value = withSequence(withTiming(active ? 1.2 : 0.9, {
+      duration: 100
+    }), withSpring(1, POP));
+  }, [active, direction, reducedMotion, shift, scale]);
+  const style = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: shift.value
+    }, {
+      scale: scale.value
+    }]
+  }));
+  const Arrow = direction === 'up' ? ArrowUpIcon : ArrowDownIcon;
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: direction === 'up' ? 'Upvote' : 'Downvote',
+    accessibilityState: {
+      selected: active,
+      disabled
+    },
+    disabled: disabled,
+    hitSlop: 6,
+    onPress: onPress,
+    className: cn(className, disabled && 'opacity-[0.64]'),
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: style,
+      children: /*#__PURE__*/_jsx(Arrow, {
+        size: 17,
+        color: color,
+        filled: active
+      })
+    })
+  });
+}
+export const Post = Object.assign(PostRoot, {
+  Header: PostHeader,
+  Author: PostAuthor,
+  Action: PostAction,
+  Community: PostCommunity,
+  Title: PostTitle,
+  Body: PostBody,
+  Media: PostMedia,
+  Footer: PostFooter,
+  Stat: PostStat,
+  Votes: PostVotes
+});
+//# sourceMappingURL=index.js.map