@amityco/react-native-social-uikit 4.2.1-f052efd.0 → 4.3.0

package/lib/module/chat/elements/MediaUploadOverlay/styles.js

@@ -0,0 +1,25 @@
+// Styles for MediaUploadOverlay — ported from AmityUiKitWeb MediaUploadOverlay.module.css.
+// Absolute inset:0 scrim centered over its parent, on the media-overlay token.
+// It previously borrowed SurfaceBadgeSemanticBadgePostStatusTotalMedia, which
+// happens to carry the same 50% black today but is a post-status badge token —
+// the two would drift apart under a custom theme.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: token(AmityColorToken.SurfaceMediaOverlayTransparentBlack)
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/chat/elements/MediaUploadOverlay/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","overlay","absoluteFillObject","alignItems","justifyContent","backgroundColor","SurfaceMediaOverlayTransparentBlack"],"sourceRoot":"../../../../../src","sources":["chat/elements/MediaUploadOverlay/styles.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,eAAe,QAAQ,gDAAgD;AAEhF,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,OAAO,EAAE;MACP,GAAGP,UAAU,CAACQ,kBAAkB;MAChCC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBC,eAAe,EAAEP,KAAK,CACpBF,eAAe,CAACU,mCAClB;IACF;EACF,CAAC,CAAC;EAEF,OAAO;IAAEP,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

package/lib/module/chat/elements/ReactionPicker/ReactionPicker.js

@@ -0,0 +1,288 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+// ReactionPicker — RN port of AmityUiKitWeb v4/chat/elements/ReactionPicker.
+// The horizontal reactions row shown in the message action popover. Tapping a
+// reaction fires onReactionClick (+ onSelectReaction), matching web. The active
+// reaction shows the reactionstate-active circle; the reaction name floats above
+// the icon the touch is currently over.
+//
+// RN adaptations from web:
+//   - Web reads the reaction set from CustomReactionProvider; RN has no runtime
+//     accessor for the top-level `message_reactions` config, so it defaults to
+//     DEFAULT_MESSAGE_REACTIONS (overridable via the `reactions` prop).
+//   - Web renders reaction.image URLs; RN renders the ported ReactionGlyph art.
+//   - Web drives the drag highlight from a `hoveredReaction` prop that the
+//     popover computes from pointer/touch coordinates and feeds back in as
+//     `data-touch-hovered`. RN owns that state internally instead (see below),
+//     so the element stays a drop-in for the existing action menu.
+//
+// Two defects, one root cause: the port dropped the touch-hover drag entirely
+// as a "pointer-only interaction", so:
+//   * no icon ever lifted while dragging across the bar, and
+//   * the name label was bound to Pressable's `pressed` flag and drawn at
+//     top:-33, i.e. outside the picker's own box, where the action menu's
+//     `pickerCard` (overflow:'hidden', borderRadius:20) clipped it.
+// Both are fixed here by reinstating web's interaction: a PanResponder on the
+// row maps the touch's pageX onto the measured icon slots and drives a
+// `hovered` reaction, and the label overhangs the pill the way web's does —
+// `pickerCard` no longer draws a clipping surface, so nothing crops it.
+//
+// Geometry mirrored from ReactionPicker.module.css:
+//   .reactionButton[data-touch-hovered] .reactionButton__icon
+//       -> transform: scale(1.3) translateY(-8px); transition .15s ease-out
+//   .reactionButton[data-touch-hovered] .reactionButton__text
+//       -> opacity 1 + translateY(-9px) on top of its base top:-2.05rem (-32.8px)
+
+// 1. React / RN imports
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, PanResponder, Pressable, View } from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../core/design/components/Typography';
+import { resolveString } from '../../../core/localization';
+import { DEFAULT_MESSAGE_REACTIONS, ReactionGlyph } from '../../features/shared/utils/reactionIcons';
+import { PILL_PADDING, useStyles } from './styles';
+
+// Web: `transform: scale(1.3) translateY(-8px)` / label `translateY(-9px)`,
+// both `transition: transform .15s ease-out`.
+const LIFT_TRANSLATE_Y = -8;
+const LIFT_SCALE = 1.3;
+const LABEL_TRANSLATE_Y = -9;
+const LIFT_DURATION_MS = 150;
+
+// Slop before the row steals the touch from the per-icon Pressable. Below this a
+// touch is still a plain tap (so tap-to-react and screen-reader activation keep
+// working); above it the gesture becomes a drag across the bar.
+const DRAG_ACTIVATION_PX = 4;
+
+// 3. Types
+
+// Web CustomReactionProvider.getChatReactionLabel.
+function getChatReactionLabel(reactionName) {
+  const name = reactionName.toLowerCase();
+  const key = `amity_chat_reaction_label_${name}`;
+  const localized = resolveString(key);
+  return localized === key ? reactionName : localized;
+}
+
+// 4. Named function component
+export function ReactionPicker({
+  reactions = DEFAULT_MESSAGE_REACTIONS,
+  myReaction,
+  onReactionClick,
+  onSelectReaction
+}) {
+  const {
+    styles
+  } = useStyles();
+  const [hovered, setHovered] = useState(null);
+
+  // One 0→1 driver per reaction: 0 = at rest, 1 = touch-hovered (web's
+  // data-touch-hovered). Drives both the icon lift and the label reveal.
+  const lifts = useMemo(() => {
+    const map = {};
+    reactions.forEach(name => {
+      map[name] = new Animated.Value(0);
+    });
+    return map;
+  }, [reactions]);
+  useEffect(() => {
+    Animated.parallel(reactions.map(name => Animated.timing(lifts[name], {
+      toValue: hovered === name ? 1 : 0,
+      duration: LIFT_DURATION_MS,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true
+    }))).start();
+  }, [hovered, reactions, lifts]);
+
+  // --- shared label --------------------------------------------------------
+  // The label is one node at the root, so its reveal needs its own 0→1 driver
+  // (the per-icon `lifts` still drive the icons themselves).
+  const labelAnim = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(labelAnim, {
+      toValue: hovered ? 1 : 0,
+      duration: LIFT_DURATION_MS,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true
+    }).start();
+  }, [hovered, labelAnim]);
+
+  // Measured so the label can be centred over the hovered icon and kept inside
+  // the pill. Both come from onLayout, so the first hover after mount already
+  // has them.
+  const [pillWidth, setPillWidth] = useState(0);
+  const [labelWidth, setLabelWidth] = useState(0);
+
+  // --- drag tracking -------------------------------------------------------
+  // The PanResponder closure is built once, so everything it reads lives in a
+  // ref; `hovered` state is only the render mirror.
+  const rowRef = useRef(null);
+  const rowPageXRef = useRef(0);
+  const slotsRef = useRef([]);
+  const hoveredRef = useRef(null);
+  const draggingRef = useRef(false);
+  const onPickRef = useRef(() => {});
+  onPickRef.current = reactionName => {
+    onReactionClick(reactionName);
+    onSelectReaction === null || onSelectReaction === void 0 || onSelectReaction(reactionName);
+  };
+  function setHoveredReaction(name) {
+    if (hoveredRef.current === name) return;
+    hoveredRef.current = name;
+    setHovered(name);
+  }
+  function measureRow() {
+    var _rowRef$current;
+    (_rowRef$current = rowRef.current) === null || _rowRef$current === void 0 || _rowRef$current.measureInWindow(x => {
+      rowPageXRef.current = x;
+    });
+  }
+
+  // Web resolves the hovered reaction from the touch point; the slots are the
+  // icons' measured x-ranges within the row.
+  function reactionAt(pageX) {
+    const slots = slotsRef.current.filter(Boolean);
+    if (slots.length === 0) return null;
+    const local = pageX - rowPageXRef.current;
+    const first = slots[0];
+    const last = slots[slots.length - 1];
+    // Dragging off either end of the pill clears the highlight, like web
+    // dropping data-touch-hovered when the pointer leaves the picker.
+    if (local < first.start - PILL_PADDING || local > last.end + PILL_PADDING) {
+      return null;
+    }
+
+    // Snap to the nearest icon so the 8px gaps between them don't flicker.
+    let nearest = first;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    slots.forEach(slot => {
+      const distance = Math.abs(local - (slot.start + slot.end) / 2);
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        nearest = slot;
+      }
+    });
+    return nearest.name;
+  }
+  const panRef = useRef(null);
+  if (panRef.current == null) {
+    panRef.current = PanResponder.create({
+      // Let a plain tap stay with the per-icon Pressable...
+      onStartShouldSetPanResponderCapture: () => false,
+      // ...and only take over once the finger actually travels.
+      onMoveShouldSetPanResponderCapture: (_event, gesture) => Math.abs(gesture.dx) > DRAG_ACTIVATION_PX || Math.abs(gesture.dy) > DRAG_ACTIVATION_PX,
+      onPanResponderGrant: event => {
+        draggingRef.current = true;
+        // Re-measure in case the popover was laid out again since mount; the
+        // callback lands well before the first move event is handled.
+        measureRow();
+        setHoveredReaction(reactionAt(event.nativeEvent.pageX));
+      },
+      onPanResponderMove: event => {
+        setHoveredReaction(reactionAt(event.nativeEvent.pageX));
+      },
+      onPanResponderRelease: () => {
+        const picked = hoveredRef.current;
+        draggingRef.current = false;
+        setHoveredReaction(null);
+        if (picked) onPickRef.current(picked);
+      },
+      onPanResponderTerminate: () => {
+        draggingRef.current = false;
+        setHoveredReaction(null);
+      }
+    });
+  }
+
+  // Centre the label on the hovered icon, then keep it inside the pill. The
+  // slots are row-relative, so add the pill's padding to reach pill coordinates;
+  // `labelAnchor` already centres the bubble, so the shift is measured from the
+  // pill's centre. A name wider than the pill just stays centred.
+  let labelShift = 0;
+  if (hovered && pillWidth > 0 && labelWidth > 0) {
+    const slot = slotsRef.current.find(s => s && s.name === hovered);
+    if (slot) {
+      const iconCentre = PILL_PADDING + (slot.start + slot.end) / 2;
+      const maxShift = Math.max(0, (pillWidth - labelWidth) / 2);
+      const wanted = iconCentre - pillWidth / 2;
+      labelShift = Math.max(-maxShift, Math.min(maxShift, wanted));
+    }
+  }
+  if (!reactions || reactions.length === 0) return null;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.root
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    pointerEvents: "none",
+    style: [styles.labelAnchor, {
+      opacity: labelAnim,
+      transform: [{
+        translateX: labelShift
+      }, {
+        translateY: labelAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, LABEL_TRANSLATE_Y]
+        })
+      }]
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.label,
+    onLayout: event => setLabelWidth(event.nativeEvent.layout.width)
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    style: styles.labelText,
+    numberOfLines: 1
+  }, hovered ? getChatReactionLabel(hovered) : ''))), /*#__PURE__*/React.createElement(View, {
+    style: styles.pill,
+    onLayout: event => setPillWidth(event.nativeEvent.layout.width)
+  }, /*#__PURE__*/React.createElement(View, _extends({
+    ref: rowRef,
+    style: styles.row,
+    onLayout: measureRow
+  }, panRef.current.panHandlers), reactions.map((name, index) => {
+    const active = myReaction === name;
+    const lift = lifts[name];
+    return /*#__PURE__*/React.createElement(Pressable, {
+      key: name,
+      onLayout: event => {
+        const {
+          x,
+          width
+        } = event.nativeEvent.layout;
+        slotsRef.current[index] = {
+          name,
+          start: x,
+          end: x + width
+        };
+      },
+      onPressIn: () => setHoveredReaction(name),
+      onPressOut: () => {
+        if (!draggingRef.current) setHoveredReaction(null);
+      },
+      onPress: () => onPickRef.current(name),
+      accessibilityRole: "button",
+      accessibilityLabel: `React with ${getChatReactionLabel(name)}`
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.reactionButton
+    }, active ? /*#__PURE__*/React.createElement(View, {
+      style: styles.activeBackground
+    }) : null, /*#__PURE__*/React.createElement(Animated.View, {
+      style: {
+        transform: [{
+          translateY: lift.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, LIFT_TRANSLATE_Y]
+          })
+        }, {
+          scale: lift.interpolate({
+            inputRange: [0, 1],
+            outputRange: [1, LIFT_SCALE]
+          })
+        }]
+      }
+    }, /*#__PURE__*/React.createElement(ReactionGlyph, {
+      name: name,
+      size: 32
+    }))));
+  }))));
+}
+//# sourceMappingURL=ReactionPicker.js.map

package/lib/module/chat/elements/ReactionPicker/ReactionPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useRef","useState","Animated","Easing","PanResponder","Pressable","View","Typography","resolveString","DEFAULT_MESSAGE_REACTIONS","ReactionGlyph","PILL_PADDING","useStyles","LIFT_TRANSLATE_Y","LIFT_SCALE","LABEL_TRANSLATE_Y","LIFT_DURATION_MS","DRAG_ACTIVATION_PX","getChatReactionLabel","reactionName","name","toLowerCase","key","localized","ReactionPicker","reactions","myReaction","onReactionClick","onSelectReaction","styles","hovered","setHovered","lifts","map","forEach","Value","parallel","timing","toValue","duration","easing","out","ease","useNativeDriver","start","labelAnim","current","pillWidth","setPillWidth","labelWidth","setLabelWidth","rowRef","rowPageXRef","slotsRef","hoveredRef","draggingRef","onPickRef","setHoveredReaction","measureRow","_rowRef$current","measureInWindow","x","reactionAt","pageX","slots","filter","Boolean","length","local","first","last","end","nearest","bestDistance","Number","POSITIVE_INFINITY","slot","distance","Math","abs","panRef","create","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponderCapture","_event","gesture","dx","dy","onPanResponderGrant","event","nativeEvent","onPanResponderMove","onPanResponderRelease","picked","onPanResponderTerminate","labelShift","find","s","iconCentre","maxShift","max","wanted","min","React","createElement","style","root","pointerEvents","labelAnchor","opacity","transform","translateX","translateY","interpolate","inputRange","outputRange","label","onLayout","layout","width","variant","labelText","numberOfLines","pill","_extends","ref","row","panHandlers","index","active","lift","onPressIn","onPressOut","onPress","accessibilityRole","accessibilityLabel","reactionButton","activeBackground","scale","size"],"sourceRoot":"../../../../../src","sources":["chat/elements/ReactionPicker/ReactionPicker.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/chat/elements/ReactionPicker/index.js

@@ -0,0 +1,2 @@
+export { ReactionPicker } from './ReactionPicker';
+//# sourceMappingURL=index.js.map

package/lib/module/chat/elements/ReactionPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ReactionPicker"],"sourceRoot":"../../../../../src","sources":["chat/elements/ReactionPicker/index.ts"],"mappings":"AAAA,SAASA,cAAc,QAAQ,kBAAkB","ignoreList":[]}

package/lib/module/chat/elements/ReactionPicker/styles.js

@@ -0,0 +1,133 @@
+// Styles for ReactionPicker — ported from AmityUiKitWeb
+// v4/chat/elements/ReactionPicker/ReactionPicker.module.css PLUS the pill
+// wrapper web keeps in MessageActionsPopover.module.css
+// (`.messageActionsPopover__reactionPicker`: filled-default surface, full radius,
+// box-shadow-04). The wrapper is folded in here so the component is a drop-in
+// for the RN action menu — mounting it closes web's reactionpopover-filled-default
+// gap. Orchestrator MUST NOT double-wrap it in another pill.
+// rem→px ×16.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../core/design/theme/useToken';
+import { useAmityTheme } from '../../../core/design/theme/AmityThemeProvider';
+import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
+
+// `.messageActionsPopover__reactionPicker` padding (0.5rem). Exported because the
+// drag hit-test tolerates this much overshoot past the first/last icon before it
+// treats the touch as having left the bar.
+export const PILL_PADDING = 8;
+
+// A 36px transparent band above the pill originally kept the floating label
+// from being clipped by the action menu's `pickerCard`
+// (overflow:'hidden'). That clip is gone — `pickerCard` no longer draws a
+// surface at all — so the band is no longer needed, and it was the reason the
+// picker floated ~44px from the bubble whenever the popover opened below a
+// message (8px anchor gap + 36px of empty band). The label now overhangs the
+// pill instead.
+//
+// Web puts the label `top: -2.05rem` from its own 2rem button, and lifts it a
+// further 9px on hover. Measured from the picker root: down past the pill's
+// padding to the icon's top edge, then back up by that offset.
+const LABEL_TOP_FROM_ICON = -33;
+const LABEL_TOP = PILL_PADDING + LABEL_TOP_FROM_ICON;
+export const useStyles = () => {
+  const token = useToken();
+  const {
+    mode
+  } = useAmityTheme();
+  const styles = StyleSheet.create({
+    // Transparent band + pill. Sized to content so the action menu's card still
+    // hugs the bar.
+    root: {
+      alignSelf: 'flex-start'
+    },
+    // .messageActionsPopover__reactionPicker (the filled pill)
+    pill: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: PILL_PADDING,
+      borderRadius: 9999,
+      backgroundColor: token(AmityColorToken.SurfaceReactionsReactionPopoverFilledDefault),
+      // Match web reaction-bar elevation-08 (3 stacked layers:
+      // 0 4px 24px 4px / 0 32px 64px -12px / 0 6px 6px -4px). RN can't stack
+      // shadows, so approximate with a single heavier, softer shadow; colour is
+      // theme-aware (light rgba(41,43,50), dark rgba(0,0,0)) per the token defs.
+      shadowColor: mode === 'dark' ? 'rgb(0, 0, 0)' : 'rgb(41, 43, 50)',
+      shadowOffset: {
+        width: 0,
+        height: 8
+      },
+      shadowOpacity: 0.18,
+      shadowRadius: 24,
+      elevation: 12
+    },
+    // .reactionPickerContainer
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8
+    },
+    // .reactionButton (2rem × 2rem)
+    reactionButton: {
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 32,
+      height: 32
+    },
+    // .reactionButton__activeBackground
+    //
+    // Web's chat picker draws this circle behind `reaction.image`,
+    // artwork that carries transparent padding, so a same-size circle still
+    // reads as a halo. RN renders the ported ReactionGlyph art instead, whose
+    // outer <Circle r=16> fills the whole 32px box opaquely — a 32px circle
+    // behind it was 100% occluded, which is why an already-given reaction looked
+    // unselected when the bar was reopened. Web's own social picker sizes the
+    // same element at 2.5rem behind a 2rem icon
+    // (social/elements/ReactionPicker.module.css), so adopt that: 40px centred on
+    // the 32px glyph leaves a 4px ring. The 4px bleed sits inside the pill's 8px
+    // padding and inside the row's 8px gaps, so nothing collides or overflows.
+    activeBackground: {
+      position: 'absolute',
+      top: -4,
+      left: -4,
+      width: 40,
+      height: 40,
+      borderRadius: 9999,
+      backgroundColor: token(AmityColorToken.SurfaceReactionsReactionPopoverReactionStateActive)
+    },
+    // .reactionButton__text (floating label tooltip).
+    //
+    // ONE label for the whole picker, not one per icon. Web can hang a label off
+    // each 2rem button because its tooltip escapes the button box; in RN an
+    // absolutely-positioned child with no left/right is clamped to its
+    // containing block, so a per-button label could never be wider than the 32px
+    // `reactionButton` — which is why every name came back ellipsised no matter
+    // what `maxWidth` said. This anchor spans the pill and centres its content,
+    // so the bubble sizes to the full name and is then shifted over whichever
+    // icon is hovered.
+    labelAnchor: {
+      position: 'absolute',
+      top: LABEL_TOP,
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+      zIndex: 2
+    },
+    label: {
+      paddingVertical: 2,
+      paddingHorizontal: 6,
+      borderRadius: 28,
+      backgroundColor: token(AmityColorToken.SurfaceReactionsReactionPopoverReactionNameActive)
+    },
+    labelText: {
+      textTransform: 'capitalize',
+      textAlign: 'center',
+      color: token(AmityColorToken.TextReactionsReactionPopoverReactionNameGeneral)
+    }
+  });
+  return {
+    styles
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/chat/elements/ReactionPicker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","useAmityTheme","AmityColorToken","PILL_PADDING","LABEL_TOP_FROM_ICON","LABEL_TOP","useStyles","token","mode","styles","create","root","alignSelf","pill","flexDirection","alignItems","padding","borderRadius","backgroundColor","SurfaceReactionsReactionPopoverFilledDefault","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","row","gap","reactionButton","position","justifyContent","activeBackground","top","left","SurfaceReactionsReactionPopoverReactionStateActive","labelAnchor","right","zIndex","label","paddingVertical","paddingHorizontal","SurfaceReactionsReactionPopoverReactionNameActive","labelText","textTransform","textAlign","color","TextReactionsReactionPopoverReactionNameGeneral"],"sourceRoot":"../../../../../src","sources":["chat/elements/ReactionPicker/styles.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,aAAa,QAAQ,+CAA+C;AAC7E,SAASC,eAAe,QAAQ,gDAAgD;;AAEhF;AACA;AACA;AACA,OAAO,MAAMC,YAAY,GAAG,CAAC;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAG,CAAC,EAAE;AAC/B,MAAMC,SAAS,GAAGF,YAAY,GAAGC,mBAAmB;AAEpD,OAAO,MAAME,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGP,QAAQ,CAAC,CAAC;EACxB,MAAM;IAAEQ;EAAK,CAAC,GAAGP,aAAa,CAAC,CAAC;EAEhC,MAAMQ,MAAM,GAAGV,UAAU,CAACW,MAAM,CAAC;IAC/B;IACA;IACAC,IAAI,EAAE;MACJC,SAAS,EAAE;IACb,CAAC;IACD;IACAC,IAAI,EAAE;MACJC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,OAAO,EAAEb,YAAY;MACrBc,YAAY,EAAE,IAAI;MAClBC,eAAe,EAAEX,KAAK,CACpBL,eAAe,CAACiB,4CAClB,CAAC;MACD;MACA;MACA;MACA;MACAC,WAAW,EAAEZ,IAAI,KAAK,MAAM,GAAG,cAAc,GAAG,iBAAiB;MACjEa,YAAY,EAAE;QAAEC,KAAK,EAAE,CAAC;QAAEC,MAAM,EAAE;MAAE,CAAC;MACrCC,aAAa,EAAE,IAAI;MACnBC,YAAY,EAAE,EAAE;MAChBC,SAAS,EAAE;IACb,CAAC;IACD;IACAC,GAAG,EAAE;MACHb,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBa,GAAG,EAAE;IACP,CAAC;IACD;IACAC,cAAc,EAAE;MACdC,QAAQ,EAAE,UAAU;MACpBf,UAAU,EAAE,QAAQ;MACpBgB,cAAc,EAAE,QAAQ;MACxBT,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE;IACV,CAAC;IACD;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACAS,gBAAgB,EAAE;MAChBF,QAAQ,EAAE,UAAU;MACpBG,GAAG,EAAE,CAAC,CAAC;MACPC,IAAI,EAAE,CAAC,CAAC;MACRZ,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVN,YAAY,EAAE,IAAI;MAClBC,eAAe,EAAEX,KAAK,CACpBL,eAAe,CAACiC,kDAClB;IACF,CAAC;IACD;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACAC,WAAW,EAAE;MACXN,QAAQ,EAAE,UAAU;MACpBG,GAAG,EAAE5B,SAAS;MACd6B,IAAI,EAAE,CAAC;MACPG,KAAK,EAAE,CAAC;MACRtB,UAAU,EAAE,QAAQ;MACpBuB,MAAM,EAAE;IACV,CAAC;IACDC,KAAK,EAAE;MACLC,eAAe,EAAE,CAAC;MAClBC,iBAAiB,EAAE,CAAC;MACpBxB,YAAY,EAAE,EAAE;MAChBC,eAAe,EAAEX,KAAK,CACpBL,eAAe,CAACwC,iDAClB;IACF,CAAC;IACDC,SAAS,EAAE;MACTC,aAAa,EAAE,YAAY;MAC3BC,SAAS,EAAE,QAAQ;MACnBC,KAAK,EAAEvC,KAAK,CACVL,eAAe,CAAC6C,+CAClB;IACF;EACF,CAAC,CAAC;EAEF,OAAO;IAAEtC;EAAO,CAAC;AACnB,CAAC","ignoreList":[]}

package/lib/module/chat/elements/SettingMenu/SettingMenu.js

@@ -0,0 +1,63 @@
+// SettingMenu element — ported from AmityUiKitWeb chat/elements/SettingMenu.
+// A single tappable settings row: leading icon-badge + label on the left, an
+// optional trailing text + chevron on the right. A `destructive` row instead
+// renders just a bold destructive-coloured label (e.g. "Leave group").
+//
+// RN adaptation from web: web's `icon?: React.ElementType` cannot cross the RN
+// icon system (SoT SVGs rendered by name), so it becomes `iconName?: AmityIconName`.
+
+// 1. React / RN imports
+import { Pressable, View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Typography } from '../../../core/design/components/Typography';
+import { AmityIcon } from '../../../core/design/icons';
+import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
+import { useStyles } from './styles';
+
+// 3. Types
+
+// 4. Named function component
+export function SettingMenu({
+  iconName,
+  label,
+  trailingText,
+  destructive = false,
+  accessibilityLabel,
+  onPress
+}) {
+  const {
+    styles
+  } = useStyles();
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.row,
+    onPress: onPress,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel ?? label
+  }, destructive ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "bodyBold",
+    style: styles.destructiveLabel
+  }, label) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles.leading
+  }, iconName ? /*#__PURE__*/React.createElement(View, {
+    style: styles.iconBadge
+  }, /*#__PURE__*/React.createElement(AmityIcon, {
+    name: iconName,
+    size: 24,
+    tokenColor: AmityColorToken.IconFeaturedIconTinted
+  })) : null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body",
+    style: styles.label,
+    numberOfLines: 1
+  }, label)), /*#__PURE__*/React.createElement(View, {
+    style: styles.trailing
+  }, trailingText ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "body",
+    style: styles.trailingText
+  }, trailingText) : null, /*#__PURE__*/React.createElement(AmityIcon, {
+    name: "chevron-right",
+    size: 24,
+    tokenColor: AmityColorToken.IconListLeadingDefaultDefault
+  }))));
+}
+//# sourceMappingURL=SettingMenu.js.map

package/lib/module/chat/elements/SettingMenu/SettingMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Pressable","View","Typography","AmityIcon","AmityColorToken","useStyles","SettingMenu","iconName","label","trailingText","destructive","accessibilityLabel","onPress","styles","React","createElement","style","row","accessibilityRole","variant","destructiveLabel","Fragment","leading","iconBadge","name","size","tokenColor","IconFeaturedIconTinted","numberOfLines","trailing","IconListLeadingDefaultDefault"],"sourceRoot":"../../../../../src","sources":["chat/elements/SettingMenu/SettingMenu.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAASA,SAAS,EAAEC,IAAI,QAAQ,cAAc;;AAE9C;AACA,SAASC,UAAU,QAAQ,4CAA4C;AACvE,SAASC,SAAS,QAA4B,4BAA4B;AAC1E,SAASC,eAAe,QAAQ,gDAAgD;AAChF,SAASC,SAAS,QAAQ,UAAU;;AAEpC;;AAWA;AACA,OAAO,SAASC,WAAWA,CAAC;EAC1BC,QAAQ;EACRC,KAAK;EACLC,YAAY;EACZC,WAAW,GAAG,KAAK;EACnBC,kBAAkB;EAClBC;AACgB,CAAC,EAAE;EACnB,MAAM;IAAEC;EAAO,CAAC,GAAGR,SAAS,CAAC,CAAC;EAE9B,oBACES,KAAA,CAAAC,aAAA,CAACf,SAAS;IACRgB,KAAK,EAAEH,MAAM,CAACI,GAAI;IAClBL,OAAO,EAAEA,OAAQ;IACjBM,iBAAiB,EAAC,QAAQ;IAC1BP,kBAAkB,EAAEA,kBAAkB,IAAIH;EAAM,GAE/CE,WAAW,gBACVI,KAAA,CAAAC,aAAA,CAACb,UAAU;IAACiB,OAAO,EAAC,UAAU;IAACH,KAAK,EAAEH,MAAM,CAACO;EAAiB,GAC3DZ,KACS,CAAC,gBAEbM,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAO,QAAA,qBACEP,KAAA,CAAAC,aAAA,CAACd,IAAI;IAACe,KAAK,EAAEH,MAAM,CAACS;EAAQ,GACzBf,QAAQ,gBACPO,KAAA,CAAAC,aAAA,CAACd,IAAI;IAACe,KAAK,EAAEH,MAAM,CAACU;EAAU,gBAC5BT,KAAA,CAAAC,aAAA,CAACZ,SAAS;IACRqB,IAAI,EAAEjB,QAAS;IACfkB,IAAI,EAAE,EAAG;IACTC,UAAU,EAAEtB,eAAe,CAACuB;EAAuB,CACpD,CACG,CAAC,GACL,IAAI,eACRb,KAAA,CAAAC,aAAA,CAACb,UAAU;IAACiB,OAAO,EAAC,MAAM;IAACH,KAAK,EAAEH,MAAM,CAACL,KAAM;IAACoB,aAAa,EAAE;EAAE,GAC9DpB,KACS,CACR,CAAC,eACPM,KAAA,CAAAC,aAAA,CAACd,IAAI;IAACe,KAAK,EAAEH,MAAM,CAACgB;EAAS,GAC1BpB,YAAY,gBACXK,KAAA,CAAAC,aAAA,CAACb,UAAU;IAACiB,OAAO,EAAC,MAAM;IAACH,KAAK,EAAEH,MAAM,CAACJ;EAAa,GACnDA,YACS,CAAC,GACX,IAAI,eACRK,KAAA,CAAAC,aAAA,CAACZ,SAAS;IACRqB,IAAI,EAAC,eAAe;IACpBC,IAAI,EAAE,EAAG;IACTC,UAAU,EAAEtB,eAAe,CAAC0B;EAA8B,CAC3D,CACG,CACN,CAEK,CAAC;AAEhB","ignoreList":[]}

package/lib/module/chat/elements/SettingMenu/index.js

@@ -0,0 +1,2 @@
+export { SettingMenu } from './SettingMenu';
+//# sourceMappingURL=index.js.map

package/lib/module/chat/elements/SettingMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SettingMenu"],"sourceRoot":"../../../../../src","sources":["chat/elements/SettingMenu/index.ts"],"mappings":"AAAA,SAASA,WAAW,QAAQ,eAAe","ignoreList":[]}

package/lib/module/chat/elements/SettingMenu/styles.js

@@ -0,0 +1,59 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
+
+// Geometry ported from AmityUiKitWeb SettingMenu.module.css (rem -> px, x16):
+// row padding 1rem=16, gap 0.5rem=8; leading gap 0.75rem=12; icon badge 2rem=32
+// (padding 0.25rem=4, radius 0.5rem=8); icon 1.5rem=24; chevron 1.5rem=24;
+// trailing gap 0.5rem=8.
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 8,
+      width: '100%',
+      padding: 16,
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault)
+    },
+    leading: {
+      flex: 1,
+      minWidth: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      overflow: 'hidden'
+    },
+    iconBadge: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 32,
+      height: 32,
+      padding: 4,
+      borderRadius: 8,
+      backgroundColor: token(AmityColorToken.SurfaceFeaturedIconTinted)
+    },
+    label: {
+      flexShrink: 1,
+      color: token(AmityColorToken.TextListHeaderDefaultDefault)
+    },
+    destructiveLabel: {
+      color: token(AmityColorToken.TextListHeaderDestructiveDefault)
+    },
+    trailing: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8
+    },
+    trailingText: {
+      color: token(AmityColorToken.TextListTrailingTextGeneral)
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/chat/elements/SettingMenu/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","row","flexDirection","alignItems","justifyContent","gap","width","padding","backgroundColor","SurfaceListDefaultDefault","leading","flex","minWidth","overflow","iconBadge","height","borderRadius","SurfaceFeaturedIconTinted","label","flexShrink","color","TextListHeaderDefaultDefault","destructiveLabel","TextListHeaderDestructiveDefault","trailing","trailingText","TextListTrailingTextGeneral"],"sourceRoot":"../../../../../src","sources":["chat/elements/SettingMenu/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,eAAe,QAAQ,gDAAgD;;AAEhF;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,GAAG,EAAE;MACHC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,eAAe;MAC/BC,GAAG,EAAE,CAAC;MACNC,KAAK,EAAE,MAAM;MACbC,OAAO,EAAE,EAAE;MACXC,eAAe,EAAEV,KAAK,CAACF,eAAe,CAACa,yBAAyB;IAClE,CAAC;IACDC,OAAO,EAAE;MACPC,IAAI,EAAE,CAAC;MACPC,QAAQ,EAAE,CAAC;MACXV,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBE,GAAG,EAAE,EAAE;MACPQ,QAAQ,EAAE;IACZ,CAAC;IACDC,SAAS,EAAE;MACTX,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBE,KAAK,EAAE,EAAE;MACTS,MAAM,EAAE,EAAE;MACVR,OAAO,EAAE,CAAC;MACVS,YAAY,EAAE,CAAC;MACfR,eAAe,EAAEV,KAAK,CAACF,eAAe,CAACqB,yBAAyB;IAClE,CAAC;IACDC,KAAK,EAAE;MACLC,UAAU,EAAE,CAAC;MACbC,KAAK,EAAEtB,KAAK,CAACF,eAAe,CAACyB,4BAA4B;IAC3D,CAAC;IACDC,gBAAgB,EAAE;MAChBF,KAAK,EAAEtB,KAAK,CAACF,eAAe,CAAC2B,gCAAgC;IAC/D,CAAC;IACDC,QAAQ,EAAE;MACRtB,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBE,GAAG,EAAE;IACP,CAAC;IACDoB,YAAY,EAAE;MACZL,KAAK,EAAEtB,KAAK,CAACF,eAAe,CAAC8B,2BAA2B;IAC1D;EACF,CAAC,CAAC;EAEF,OAAO;IAAE3B,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}