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

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

@@ -0,0 +1,290 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionPicker = ReactionPicker;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _Typography = require("../../../core/design/components/Typography");
+var _localization = require("../../../core/localization");
+var _reactionIcons = require("../../features/shared/utils/reactionIcons");
+var _styles = require("./styles");
+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
+// 2. Internal imports
+// 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 = (0, _localization.resolveString)(key);
+  return localized === key ? reactionName : localized;
+}
+
+// 4. Named function component
+function ReactionPicker({
+  reactions = _reactionIcons.DEFAULT_MESSAGE_REACTIONS,
+  myReaction,
+  onReactionClick,
+  onSelectReaction
+}) {
+  const {
+    styles
+  } = (0, _styles.useStyles)();
+  const [hovered, setHovered] = (0, _react.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 = (0, _react.useMemo)(() => {
+    const map = {};
+    reactions.forEach(name => {
+      map[name] = new _reactNative.Animated.Value(0);
+    });
+    return map;
+  }, [reactions]);
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.parallel(reactions.map(name => _reactNative.Animated.timing(lifts[name], {
+      toValue: hovered === name ? 1 : 0,
+      duration: LIFT_DURATION_MS,
+      easing: _reactNative.Easing.out(_reactNative.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 = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(labelAnim, {
+      toValue: hovered ? 1 : 0,
+      duration: LIFT_DURATION_MS,
+      easing: _reactNative.Easing.out(_reactNative.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] = (0, _react.useState)(0);
+  const [labelWidth, setLabelWidth] = (0, _react.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 = (0, _react.useRef)(null);
+  const rowPageXRef = (0, _react.useRef)(0);
+  const slotsRef = (0, _react.useRef)([]);
+  const hoveredRef = (0, _react.useRef)(null);
+  const draggingRef = (0, _react.useRef)(false);
+  const onPickRef = (0, _react.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 - _styles.PILL_PADDING || local > last.end + _styles.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 = (0, _react.useRef)(null);
+  if (panRef.current == null) {
+    panRef.current = _reactNative.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 = _styles.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(_reactNative.View, {
+    style: styles.root
+  }, /*#__PURE__*/React.createElement(_reactNative.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(_reactNative.View, {
+    style: styles.label,
+    onLayout: event => setLabelWidth(event.nativeEvent.layout.width)
+  }, /*#__PURE__*/React.createElement(_Typography.Typography, {
+    variant: "caption",
+    style: styles.labelText,
+    numberOfLines: 1
+  }, hovered ? getChatReactionLabel(hovered) : ''))), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.pill,
+    onLayout: event => setPillWidth(event.nativeEvent.layout.width)
+  }, /*#__PURE__*/React.createElement(_reactNative.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(_reactNative.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(_reactNative.View, {
+      style: styles.reactionButton
+    }, active ? /*#__PURE__*/React.createElement(_reactNative.View, {
+      style: styles.activeBackground
+    }) : null, /*#__PURE__*/React.createElement(_reactNative.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(_reactionIcons.ReactionGlyph, {
+      name: name,
+      size: 32
+    }))));
+  }))));
+}
+//# sourceMappingURL=ReactionPicker.js.map

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ReactionPicker", {
+  enumerable: true,
+  get: function () {
+    return _ReactionPicker.ReactionPicker;
+  }
+});
+var _ReactionPicker = require("./ReactionPicker");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_ReactionPicker","require"],"sourceRoot":"../../../../../src","sources":["chat/elements/ReactionPicker/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA","ignoreList":[]}

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

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = exports.PILL_PADDING = void 0;
+var _reactNative = require("react-native");
+var _useToken = require("../../../core/design/theme/useToken");
+var _AmityThemeProvider = require("../../../core/design/theme/AmityThemeProvider");
+var _amityColorTokens = require("../../../core/design/tokens/amity-color-tokens");
+// 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.
+
+// `.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.
+const PILL_PADDING = exports.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;
+const useStyles = () => {
+  const token = (0, _useToken.useToken)();
+  const {
+    mode
+  } = (0, _AmityThemeProvider.useAmityTheme)();
+  const styles = _reactNative.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(_amityColorTokens.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(_amityColorTokens.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(_amityColorTokens.AmityColorToken.SurfaceReactionsReactionPopoverReactionNameActive)
+    },
+    labelText: {
+      textTransform: 'capitalize',
+      textAlign: 'center',
+      color: token(_amityColorTokens.AmityColorToken.TextReactionsReactionPopoverReactionNameGeneral)
+    }
+  });
+  return {
+    styles
+  };
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_useToken","_AmityThemeProvider","_amityColorTokens","PILL_PADDING","exports","LABEL_TOP_FROM_ICON","LABEL_TOP","useStyles","token","useToken","mode","useAmityTheme","styles","StyleSheet","create","root","alignSelf","pill","flexDirection","alignItems","padding","borderRadius","backgroundColor","AmityColorToken","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":"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","ignoreList":[]}

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SettingMenu = SettingMenu;
+var _reactNative = require("react-native");
+var _Typography = require("../../../core/design/components/Typography");
+var _icons = require("../../../core/design/icons");
+var _amityColorTokens = require("../../../core/design/tokens/amity-color-tokens");
+var _styles = require("./styles");
+// 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
+
+// 2. Internal imports (relative)
+
+// 3. Types
+
+// 4. Named function component
+function SettingMenu({
+  iconName,
+  label,
+  trailingText,
+  destructive = false,
+  accessibilityLabel,
+  onPress
+}) {
+  const {
+    styles
+  } = (0, _styles.useStyles)();
+  return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+    style: styles.row,
+    onPress: onPress,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel ?? label
+  }, destructive ? /*#__PURE__*/React.createElement(_Typography.Typography, {
+    variant: "bodyBold",
+    style: styles.destructiveLabel
+  }, label) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.leading
+  }, iconName ? /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.iconBadge
+  }, /*#__PURE__*/React.createElement(_icons.AmityIcon, {
+    name: iconName,
+    size: 24,
+    tokenColor: _amityColorTokens.AmityColorToken.IconFeaturedIconTinted
+  })) : null, /*#__PURE__*/React.createElement(_Typography.Typography, {
+    variant: "body",
+    style: styles.label,
+    numberOfLines: 1
+  }, label)), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.trailing
+  }, trailingText ? /*#__PURE__*/React.createElement(_Typography.Typography, {
+    variant: "body",
+    style: styles.trailingText
+  }, trailingText) : null, /*#__PURE__*/React.createElement(_icons.AmityIcon, {
+    name: "chevron-right",
+    size: 24,
+    tokenColor: _amityColorTokens.AmityColorToken.IconListLeadingDefaultDefault
+  }))));
+}
+//# sourceMappingURL=SettingMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_Typography","_icons","_amityColorTokens","_styles","SettingMenu","iconName","label","trailingText","destructive","accessibilityLabel","onPress","styles","useStyles","React","createElement","Pressable","style","row","accessibilityRole","Typography","variant","destructiveLabel","Fragment","View","leading","iconBadge","AmityIcon","name","size","tokenColor","AmityColorToken","IconFeaturedIconTinted","numberOfLines","trailing","IconListLeadingDefaultDefault"],"sourceRoot":"../../../../../src","sources":["chat/elements/SettingMenu/SettingMenu.tsx"],"mappings":";;;;;;AASA,IAAAA,YAAA,GAAAC,OAAA;AAGA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAfA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAGA;;AAMA;;AAWA;AACO,SAASK,WAAWA,CAAC;EAC1BC,QAAQ;EACRC,KAAK;EACLC,YAAY;EACZC,WAAW,GAAG,KAAK;EACnBC,kBAAkB;EAClBC;AACgB,CAAC,EAAE;EACnB,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,iBAAS,EAAC,CAAC;EAE9B,oBACEC,KAAA,CAAAC,aAAA,CAAChB,YAAA,CAAAiB,SAAS;IACRC,KAAK,EAAEL,MAAM,CAACM,GAAI;IAClBP,OAAO,EAAEA,OAAQ;IACjBQ,iBAAiB,EAAC,QAAQ;IAC1BT,kBAAkB,EAAEA,kBAAkB,IAAIH;EAAM,GAE/CE,WAAW,gBACVK,KAAA,CAAAC,aAAA,CAACd,WAAA,CAAAmB,UAAU;IAACC,OAAO,EAAC,UAAU;IAACJ,KAAK,EAAEL,MAAM,CAACU;EAAiB,GAC3Df,KACS,CAAC,gBAEbO,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAS,QAAA,qBACET,KAAA,CAAAC,aAAA,CAAChB,YAAA,CAAAyB,IAAI;IAACP,KAAK,EAAEL,MAAM,CAACa;EAAQ,GACzBnB,QAAQ,gBACPQ,KAAA,CAAAC,aAAA,CAAChB,YAAA,CAAAyB,IAAI;IAACP,KAAK,EAAEL,MAAM,CAACc;EAAU,gBAC5BZ,KAAA,CAAAC,aAAA,CAACb,MAAA,CAAAyB,SAAS;IACRC,IAAI,EAAEtB,QAAS;IACfuB,IAAI,EAAE,EAAG;IACTC,UAAU,EAAEC,iCAAe,CAACC;EAAuB,CACpD,CACG,CAAC,GACL,IAAI,eACRlB,KAAA,CAAAC,aAAA,CAACd,WAAA,CAAAmB,UAAU;IAACC,OAAO,EAAC,MAAM;IAACJ,KAAK,EAAEL,MAAM,CAACL,KAAM;IAAC0B,aAAa,EAAE;EAAE,GAC9D1B,KACS,CACR,CAAC,eACPO,KAAA,CAAAC,aAAA,CAAChB,YAAA,CAAAyB,IAAI;IAACP,KAAK,EAAEL,MAAM,CAACsB;EAAS,GAC1B1B,YAAY,gBACXM,KAAA,CAAAC,aAAA,CAACd,WAAA,CAAAmB,UAAU;IAACC,OAAO,EAAC,MAAM;IAACJ,KAAK,EAAEL,MAAM,CAACJ;EAAa,GACnDA,YACS,CAAC,GACX,IAAI,eACRM,KAAA,CAAAC,aAAA,CAACb,MAAA,CAAAyB,SAAS;IACRC,IAAI,EAAC,eAAe;IACpBC,IAAI,EAAE,EAAG;IACTC,UAAU,EAAEC,iCAAe,CAACI;EAA8B,CAC3D,CACG,CACN,CAEK,CAAC;AAEhB","ignoreList":[]}

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SettingMenu", {
+  enumerable: true,
+  get: function () {
+    return _SettingMenu.SettingMenu;
+  }
+});
+var _SettingMenu = require("./SettingMenu");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_SettingMenu","require"],"sourceRoot":"../../../../../src","sources":["chat/elements/SettingMenu/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA","ignoreList":[]}

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

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _reactNative = require("react-native");
+var _useToken = require("../../../core/design/theme/useToken");
+var _amityColorTokens = require("../../../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.
+const useStyles = () => {
+  const token = (0, _useToken.useToken)();
+  const styles = _reactNative.StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 8,
+      width: '100%',
+      padding: 16,
+      backgroundColor: token(_amityColorTokens.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(_amityColorTokens.AmityColorToken.SurfaceFeaturedIconTinted)
+    },
+    label: {
+      flexShrink: 1,
+      color: token(_amityColorTokens.AmityColorToken.TextListHeaderDefaultDefault)
+    },
+    destructiveLabel: {
+      color: token(_amityColorTokens.AmityColorToken.TextListHeaderDestructiveDefault)
+    },
+    trailing: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8
+    },
+    trailingText: {
+      color: token(_amityColorTokens.AmityColorToken.TextListTrailingTextGeneral)
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_useToken","_amityColorTokens","useStyles","token","useToken","styles","StyleSheet","create","row","flexDirection","alignItems","justifyContent","gap","width","padding","backgroundColor","AmityColorToken","SurfaceListDefaultDefault","leading","flex","minWidth","overflow","iconBadge","height","borderRadius","SurfaceFeaturedIconTinted","label","flexShrink","color","TextListHeaderDefaultDefault","destructiveLabel","TextListHeaderDestructiveDefault","trailing","trailingText","TextListTrailingTextGeneral","exports"],"sourceRoot":"../../../../../src","sources":["chat/elements/SettingMenu/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACA;AACO,MAAMG,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EAExB,MAAMC,MAAM,GAAGC,uBAAU,CAACC,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,EAAEZ,KAAK,CAACa,iCAAe,CAACC,yBAAyB;IAClE,CAAC;IACDC,OAAO,EAAE;MACPC,IAAI,EAAE,CAAC;MACPC,QAAQ,EAAE,CAAC;MACXX,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBE,GAAG,EAAE,EAAE;MACPS,QAAQ,EAAE;IACZ,CAAC;IACDC,SAAS,EAAE;MACTZ,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBE,KAAK,EAAE,EAAE;MACTU,MAAM,EAAE,EAAE;MACVT,OAAO,EAAE,CAAC;MACVU,YAAY,EAAE,CAAC;MACfT,eAAe,EAAEZ,KAAK,CAACa,iCAAe,CAACS,yBAAyB;IAClE,CAAC;IACDC,KAAK,EAAE;MACLC,UAAU,EAAE,CAAC;MACbC,KAAK,EAAEzB,KAAK,CAACa,iCAAe,CAACa,4BAA4B;IAC3D,CAAC;IACDC,gBAAgB,EAAE;MAChBF,KAAK,EAAEzB,KAAK,CAACa,iCAAe,CAACe,gCAAgC;IAC/D,CAAC;IACDC,QAAQ,EAAE;MACRvB,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBE,GAAG,EAAE;IACP,CAAC;IACDqB,YAAY,EAAE;MACZL,KAAK,EAAEzB,KAAK,CAACa,iCAAe,CAACkB,2BAA2B;IAC1D;EACF,CAAC,CAAC;EAEF,OAAO;IAAE7B,MAAM;IAAEF;EAAM,CAAC;AAC1B,CAAC;AAACgC,OAAA,CAAAjC,SAAA,GAAAA,SAAA","ignoreList":[]}