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

package/lib/module/core/design/components/Menu/Menu.js

@@ -0,0 +1,93 @@
+// Menu — ported from AmityUiKitWeb core/design/components/Menu.
+// Web renders a <div> wrapper whose CSS descendant selectors style each row by
+// the parent's data-container / data-variant. RN has no cascade, so the parent
+// pushes those two axes to rows through context. `Menu.Item` is an icon + label
+// row (tinted per destructive flag); `Menu.Item.Skeleton` is the loading row.
+
+import { createContext, useContext } from 'react';
+import { Pressable, View } from 'react-native';
+import { AmityIcon } from '../../icons';
+import { Typography } from '../Typography';
+import { Skeleton } from '../Skeleton';
+import { useStyles } from './styles';
+const MenuContext = /*#__PURE__*/createContext({
+  container: 'popover',
+  variant: 'social'
+});
+export function Menu({
+  children,
+  container = 'popover',
+  variant = 'social'
+}) {
+  const {
+    styles
+  } = useStyles({
+    container,
+    variant
+  });
+  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: {
+      container,
+      variant
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.menu
+  }, children));
+}
+function MenuItem({
+  label,
+  icon,
+  destructive = false,
+  onPress,
+  typography = 'bodyBold'
+}) {
+  const {
+    container,
+    variant
+  } = useContext(MenuContext);
+  const {
+    styles,
+    iconSize,
+    labelColorToken
+  } = useStyles({
+    container,
+    variant,
+    destructive
+  });
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: ({
+      pressed
+    }) => [styles.menuItem, pressed && styles.menuItemPressed],
+    onPress: onPress,
+    accessibilityRole: "menuitem"
+  }, icon ? /*#__PURE__*/React.createElement(AmityIcon, {
+    name: icon,
+    size: iconSize,
+    tokenColor: labelColorToken
+  }) : null, /*#__PURE__*/React.createElement(Typography, {
+    variant: typography,
+    style: styles.menuItemLabel
+  }, label));
+}
+Menu.Item = MenuItem;
+function MenuItemSkeleton() {
+  const {
+    container,
+    variant
+  } = useContext(MenuContext);
+  const {
+    styles
+  } = useStyles({
+    container,
+    variant
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.menuItemSkeleton,
+    accessibilityElementsHidden: true
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    height: 10,
+    width: "100%"
+  }));
+}
+MenuItem.Skeleton = MenuItemSkeleton;
+//# sourceMappingURL=Menu.js.map

package/lib/module/core/design/components/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","Pressable","View","AmityIcon","Typography","Skeleton","useStyles","MenuContext","container","variant","Menu","children","styles","React","createElement","Provider","value","style","menu","MenuItem","label","icon","destructive","onPress","typography","iconSize","labelColorToken","pressed","menuItem","menuItemPressed","accessibilityRole","name","size","tokenColor","menuItemLabel","Item","MenuItemSkeleton","menuItemSkeleton","accessibilityElementsHidden","height","width"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Menu/Menu.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAwB,OAAO;AACjE,SAASC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAC9C,SAASC,SAAS,QAA4B,aAAa;AAC3D,SAASC,UAAU,QAAgC,eAAe;AAClE,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,SAAS,QAA8C,UAAU;AAO1E,MAAMC,WAAW,gBAAGR,aAAa,CAAmB;EAClDS,SAAS,EAAE,SAAS;EACpBC,OAAO,EAAE;AACX,CAAC,CAAC;AAQF,OAAO,SAASC,IAAIA,CAAC;EACnBC,QAAQ;EACRH,SAAS,GAAG,SAAS;EACrBC,OAAO,GAAG;AACD,CAAC,EAAE;EACZ,MAAM;IAAEG;EAAO,CAAC,GAAGN,SAAS,CAAC;IAAEE,SAAS;IAAEC;EAAQ,CAAC,CAAC;EAEpD,oBACEI,KAAA,CAAAC,aAAA,CAACP,WAAW,CAACQ,QAAQ;IAACC,KAAK,EAAE;MAAER,SAAS;MAAEC;IAAQ;EAAE,gBAClDI,KAAA,CAAAC,aAAA,CAACZ,IAAI;IAACe,KAAK,EAAEL,MAAM,CAACM;EAAK,GAAEP,QAAe,CACtB,CAAC;AAE3B;AAUA,SAASQ,QAAQA,CAAC;EAChBC,KAAK;EACLC,IAAI;EACJC,WAAW,GAAG,KAAK;EACnBC,OAAO;EACPC,UAAU,GAAG;AACA,CAAC,EAAE;EAChB,MAAM;IAAEhB,SAAS;IAAEC;EAAQ,CAAC,GAAGT,UAAU,CAACO,WAAW,CAAC;EACtD,MAAM;IAAEK,MAAM;IAAEa,QAAQ;IAAEC;EAAgB,CAAC,GAAGpB,SAAS,CAAC;IACtDE,SAAS;IACTC,OAAO;IACPa;EACF,CAAC,CAAC;EAEF,oBACET,KAAA,CAAAC,aAAA,CAACb,SAAS;IACRgB,KAAK,EAAEA,CAAC;MAAEU;IAAQ,CAAC,KAAK,CACtBf,MAAM,CAACgB,QAAQ,EACfD,OAAO,IAAIf,MAAM,CAACiB,eAAe,CACjC;IACFN,OAAO,EAAEA,OAAQ;IACjBO,iBAAiB,EAAC;EAAU,GAE3BT,IAAI,gBACHR,KAAA,CAAAC,aAAA,CAACX,SAAS;IAAC4B,IAAI,EAAEV,IAAK;IAACW,IAAI,EAAEP,QAAS;IAACQ,UAAU,EAAEP;EAAgB,CAAE,CAAC,GACpE,IAAI,eACRb,KAAA,CAAAC,aAAA,CAACV,UAAU;IAACK,OAAO,EAAEe,UAAW;IAACP,KAAK,EAAEL,MAAM,CAACsB;EAAc,GAC1Dd,KACS,CACH,CAAC;AAEhB;AAEAV,IAAI,CAACyB,IAAI,GAAGhB,QAAQ;AAEpB,SAASiB,gBAAgBA,CAAA,EAAG;EAC1B,MAAM;IAAE5B,SAAS;IAAEC;EAAQ,CAAC,GAAGT,UAAU,CAACO,WAAW,CAAC;EACtD,MAAM;IAAEK;EAAO,CAAC,GAAGN,SAAS,CAAC;IAAEE,SAAS;IAAEC;EAAQ,CAAC,CAAC;EAEpD,oBACEI,KAAA,CAAAC,aAAA,CAACZ,IAAI;IAACe,KAAK,EAAEL,MAAM,CAACyB,gBAAiB;IAACC,2BAA2B;EAAA,gBAE/DzB,KAAA,CAAAC,aAAA,CAACT,QAAQ;IAACkC,MAAM,EAAE,EAAG;IAACC,KAAK,EAAC;EAAM,CAAE,CAChC,CAAC;AAEX;AAEArB,QAAQ,CAACd,QAAQ,GAAG+B,gBAAgB","ignoreList":[]}

package/lib/module/core/design/components/Menu/index.js

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

package/lib/module/core/design/components/Menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Menu"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Menu/index.ts"],"mappings":"AAAA,SAASA,IAAI,QAAQ,QAAQ","ignoreList":[]}

package/lib/module/core/design/components/Menu/styles.js

@@ -0,0 +1,89 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+// Web geometry (Menu.module.css, rem × 16). The web cascade is flattened here
+// into explicit per-combination values since RN has no descendant selectors.
+export const useStyles = ({
+  container = 'popover',
+  variant = 'social',
+  destructive = false
+}) => {
+  const token = useToken();
+
+  // --- .menu padding ---------------------------------------------------------
+  // base: 0.5rem 0; drawer: 0; chat popover: 0.
+  let menuPaddingVertical = 8;
+  if (container === 'drawer') menuPaddingVertical = 0;else if (variant === 'chat') menuPaddingVertical = 0;
+
+  // --- .menuItem geometry ----------------------------------------------------
+  // base: gap 0.75rem (12), padding 0.875rem 1rem (14/16).
+  let gap = 12;
+  let paddingVertical = 14;
+  let paddingHorizontal = 16;
+  let borderRadius = 0;
+  if (container === 'drawer') {
+    // .menu[data-container='drawer'] .menuItem { padding: 0.875rem 0; }
+    paddingHorizontal = 0;
+  } else if (variant === 'chat') {
+    // chat popover: padding 12/16; border radius 8.
+    paddingVertical = 12;
+    paddingHorizontal = 16;
+    borderRadius = 8;
+  } else {
+    // social popover: gap 0.5rem (8); padding 1rem (16).
+    gap = 8;
+    paddingVertical = 16;
+    paddingHorizontal = 16;
+  }
+
+  // --- icon size -------------------------------------------------------------
+  // base 1.5rem (24); chat popover 1.25rem (20).
+  const iconSize = container === 'popover' && variant === 'chat' ? 20 : 24;
+
+  // --- colour: menuItem[data-destructive] ------------------------------------
+  const labelColorToken = destructive ? AmityColorToken.TextListHeaderDestructiveDefault : AmityColorToken.TextListHeaderDefaultDefault;
+
+  // --- pressed state ---------------------------------------------------------
+  // There is no hover on a touch device, so the press slice carries the row's
+  // highlight. The chat popover additionally squares the row off while it is
+  // held: a rounded highlight inside an already-rounded card reads as a gap.
+  const pressedBorderRadius = container === 'popover' && variant === 'chat' ? 0 : borderRadius;
+  const styles = StyleSheet.create({
+    menu: {
+      paddingVertical: menuPaddingVertical
+    },
+    menuItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      gap,
+      paddingVertical,
+      paddingHorizontal,
+      borderRadius
+    },
+    // Press affordance, standing in for hover.
+    menuItemPressed: {
+      backgroundColor: token(AmityColorToken.SurfacePopoverListsHover),
+      borderRadius: pressedBorderRadius
+    },
+    menuItemLabel: {
+      color: token(labelColorToken)
+    },
+    // .menuItem--skeleton — non-interactive placeholder row.
+    menuItemSkeleton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap,
+      paddingVertical,
+      paddingHorizontal,
+      borderRadius
+    }
+  });
+  return {
+    styles,
+    token,
+    iconSize,
+    labelColorToken
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/core/design/components/Menu/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","container","variant","destructive","token","menuPaddingVertical","gap","paddingVertical","paddingHorizontal","borderRadius","iconSize","labelColorToken","TextListHeaderDestructiveDefault","TextListHeaderDefaultDefault","pressedBorderRadius","styles","create","menu","menuItem","flexDirection","alignItems","justifyContent","menuItemPressed","backgroundColor","SurfacePopoverListsHover","menuItemLabel","color","menuItemSkeleton"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Menu/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,eAAe,QAAQ,iCAAiC;AAWjE;AACA;AACA,OAAO,MAAMC,SAAS,GAAGA,CAAC;EACxBC,SAAS,GAAG,SAAS;EACrBC,OAAO,GAAG,QAAQ;EAClBC,WAAW,GAAG;AACD,CAAC,KAAK;EACnB,MAAMC,KAAK,GAAGN,QAAQ,CAAC,CAAC;;EAExB;EACA;EACA,IAAIO,mBAAmB,GAAG,CAAC;EAC3B,IAAIJ,SAAS,KAAK,QAAQ,EAAEI,mBAAmB,GAAG,CAAC,CAAC,KAC/C,IAAIH,OAAO,KAAK,MAAM,EAAEG,mBAAmB,GAAG,CAAC;;EAEpD;EACA;EACA,IAAIC,GAAG,GAAG,EAAE;EACZ,IAAIC,eAAe,GAAG,EAAE;EACxB,IAAIC,iBAAiB,GAAG,EAAE;EAC1B,IAAIC,YAAY,GAAG,CAAC;EACpB,IAAIR,SAAS,KAAK,QAAQ,EAAE;IAC1B;IACAO,iBAAiB,GAAG,CAAC;EACvB,CAAC,MAAM,IAAIN,OAAO,KAAK,MAAM,EAAE;IAC7B;IACAK,eAAe,GAAG,EAAE;IACpBC,iBAAiB,GAAG,EAAE;IACtBC,YAAY,GAAG,CAAC;EAClB,CAAC,MAAM;IACL;IACAH,GAAG,GAAG,CAAC;IACPC,eAAe,GAAG,EAAE;IACpBC,iBAAiB,GAAG,EAAE;EACxB;;EAEA;EACA;EACA,MAAME,QAAQ,GAAGT,SAAS,KAAK,SAAS,IAAIC,OAAO,KAAK,MAAM,GAAG,EAAE,GAAG,EAAE;;EAExE;EACA,MAAMS,eAAe,GAAGR,WAAW,GAC/BJ,eAAe,CAACa,gCAAgC,GAChDb,eAAe,CAACc,4BAA4B;;EAEhD;EACA;EACA;EACA;EACA,MAAMC,mBAAmB,GACvBb,SAAS,KAAK,SAAS,IAAIC,OAAO,KAAK,MAAM,GAAG,CAAC,GAAGO,YAAY;EAElE,MAAMM,MAAM,GAAGlB,UAAU,CAACmB,MAAM,CAAC;IAC/BC,IAAI,EAAE;MACJV,eAAe,EAAEF;IACnB,CAAC;IACDa,QAAQ,EAAE;MACRC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,YAAY;MAC5Bf,GAAG;MACHC,eAAe;MACfC,iBAAiB;MACjBC;IACF,CAAC;IACD;IACAa,eAAe,EAAE;MACfC,eAAe,EAAEnB,KAAK,CAACL,eAAe,CAACyB,wBAAwB,CAAC;MAChEf,YAAY,EAAEK;IAChB,CAAC;IACDW,aAAa,EAAE;MACbC,KAAK,EAAEtB,KAAK,CAACO,eAAe;IAC9B,CAAC;IACD;IACAgB,gBAAgB,EAAE;MAChBR,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBd,GAAG;MACHC,eAAe;MACfC,iBAAiB;MACjBC;IACF;EACF,CAAC,CAAC;EAEF,OAAO;IAAEM,MAAM;IAAEX,KAAK;IAAEM,QAAQ;IAAEC;EAAgB,CAAC;AACrD,CAAC","ignoreList":[]}

package/lib/module/core/design/components/MenuOptionButton/MenuOptionButton.js

@@ -0,0 +1,34 @@
+// MenuOptionButton — ported from AmityUiKitWeb core/design/components/MenuOptionButton.
+// A single full-width row: leading icon + bold label, with a danger variant that
+// tints both the icon and the text with the alert token. Web rendered a Button +
+// Typography.BodyBold; RN uses Pressable + the Typography component.
+
+import { Pressable } from 'react-native';
+import { AmityIcon } from '../../icons';
+import { Typography } from '../Typography';
+import { useStyles } from './styles';
+export function MenuOptionButton({
+  text,
+  icon,
+  onPress,
+  isDanger = false
+}) {
+  const {
+    styles,
+    colorToken
+  } = useStyles({
+    isDanger
+  });
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.menuOptionButton,
+    onPress: onPress
+  }, icon ? /*#__PURE__*/React.createElement(AmityIcon, {
+    name: icon,
+    size: 24,
+    tokenColor: colorToken
+  }) : null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "bodyBold",
+    style: styles.text
+  }, text));
+}
+//# sourceMappingURL=MenuOptionButton.js.map

package/lib/module/core/design/components/MenuOptionButton/MenuOptionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Pressable","AmityIcon","Typography","useStyles","MenuOptionButton","text","icon","onPress","isDanger","styles","colorToken","React","createElement","style","menuOptionButton","name","size","tokenColor","variant"],"sourceRoot":"../../../../../../src","sources":["core/design/components/MenuOptionButton/MenuOptionButton.tsx"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,QAAQ,cAAc;AACxC,SAASC,SAAS,QAA4B,aAAa;AAC3D,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,SAAS,QAAQ,UAAU;AASpC,OAAO,SAASC,gBAAgBA,CAAC;EAC/BC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,QAAQ,GAAG;AACU,CAAC,EAAE;EACxB,MAAM;IAAEC,MAAM;IAAEC;EAAW,CAAC,GAAGP,SAAS,CAAC;IAAEK;EAAS,CAAC,CAAC;EAEtD,oBACEG,KAAA,CAAAC,aAAA,CAACZ,SAAS;IAACa,KAAK,EAAEJ,MAAM,CAACK,gBAAiB;IAACP,OAAO,EAAEA;EAAQ,GACzDD,IAAI,gBACHK,KAAA,CAAAC,aAAA,CAACX,SAAS;IAACc,IAAI,EAAET,IAAK;IAACU,IAAI,EAAE,EAAG;IAACC,UAAU,EAAEP;EAAW,CAAE,CAAC,GACzD,IAAI,eACRC,KAAA,CAAAC,aAAA,CAACV,UAAU;IAACgB,OAAO,EAAC,UAAU;IAACL,KAAK,EAAEJ,MAAM,CAACJ;EAAK,GAC/CA,IACS,CACH,CAAC;AAEhB","ignoreList":[]}

package/lib/module/core/design/components/MenuOptionButton/index.js

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

package/lib/module/core/design/components/MenuOptionButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MenuOptionButton"],"sourceRoot":"../../../../../../src","sources":["core/design/components/MenuOptionButton/index.ts"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,oBAAoB","ignoreList":[]}

package/lib/module/core/design/components/MenuOptionButton/styles.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+// Web geometry (MenuOptionButton.module.css, rem × 16).
+export const useStyles = ({
+  isDanger = false
+}) => {
+  const token = useToken();
+
+  // Web primitives base-default / alert-default map to the closest semantic
+  // tokens in the RN model: Text/Base/Default and Text/Base/Alert.
+  const colorToken = isDanger ? AmityColorToken.TextBaseAlert : AmityColorToken.TextListHeaderDefaultDefault;
+  const styles = StyleSheet.create({
+    menuOptionButton: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      // 0.75rem
+      paddingVertical: 12,
+      // 0.75rem
+      paddingHorizontal: 16 // 1rem
+    },
+    text: {
+      flex: 1,
+      color: token(colorToken)
+    }
+  });
+  return {
+    styles,
+    token,
+    colorToken
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/core/design/components/MenuOptionButton/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","isDanger","token","colorToken","TextBaseAlert","TextListHeaderDefaultDefault","styles","create","menuOptionButton","width","flexDirection","alignItems","gap","paddingVertical","paddingHorizontal","text","flex","color"],"sourceRoot":"../../../../../../src","sources":["core/design/components/MenuOptionButton/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,eAAe,QAAQ,iCAAiC;AAMjE;AACA,OAAO,MAAMC,SAAS,GAAGA,CAAC;EAAEC,QAAQ,GAAG;AAAqB,CAAC,KAAK;EAChE,MAAMC,KAAK,GAAGJ,QAAQ,CAAC,CAAC;;EAExB;EACA;EACA,MAAMK,UAAU,GAAGF,QAAQ,GACvBF,eAAe,CAACK,aAAa,GAC7BL,eAAe,CAACM,4BAA4B;EAEhD,MAAMC,MAAM,GAAGT,UAAU,CAACU,MAAM,CAAC;IAC/BC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,MAAM;MACbC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,GAAG,EAAE,EAAE;MAAE;MACTC,eAAe,EAAE,EAAE;MAAE;MACrBC,iBAAiB,EAAE,EAAE,CAAE;IACzB,CAAC;IACDC,IAAI,EAAE;MACJC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAEf,KAAK,CAACC,UAAU;IACzB;EACF,CAAC,CAAC;EAEF,OAAO;IAAEG,MAAM;IAAEJ,KAAK;IAAEC;EAAW,CAAC;AACtC,CAAC","ignoreList":[]}

package/lib/module/core/design/components/Popover/Popover.js

@@ -0,0 +1,169 @@
+// Popover — ported from AmityUiKitWeb core/design/components/Popover.
+// Web uses react-aria overlay positioning with a `trigger` render-prop and a
+// node-or-function `children` render-prop. RN has no react-aria, so this is
+// implemented with a transparent `Modal` acting as an anchored overlay: the
+// trigger wrapper is measured with `measureInWindow`, and the popover content
+// is absolutely positioned near the anchor. Tapping the backdrop closes it.
+// The public API (function `trigger`, node-or-function `children`, `placement`)
+// is kept so callers such as Menu and header buttons work unchanged.
+//
+// A function `children` also receives `isAbove`: whether the popover resolved
+// to open above the anchor (explicit 'top' placement, or flipped for lack of
+// room below). Content that stacks several surfaces can reorder itself so the
+// piece meant to sit next to the anchor stays next to it on either side (web
+// leaves that to react-aria's placement data attribute).
+//
+// An optional `above` render-prop places a second surface on the OPPOSITE side
+// of the anchor while the main content opens below it — the chat design puts
+// the reaction bar above a bubble and the action menu under it, with the
+// message visible in between. It is not rendered once the popover flips above
+// (there is no room under the anchor by definition); callers fold that content
+// into `children` instead, which is why both render-props receive `isAbove`.
+
+import React, { useRef, useState } from 'react';
+import { Dimensions, Modal, Pressable, View } from 'react-native';
+import { useStyles } from './styles';
+
+// react-aria placements are space-separated (e.g. 'bottom right'); we accept the
+// full string and read the two axes we support (vertical: top/bottom, horizontal
+// alignment: left/right).
+
+// Gap between the trigger and the popover content (web `--origin` 0.5rem = 8px).
+const ANCHOR_GAP = 8;
+// Keep the popover this far from the screen edges, and never narrower than the
+// content min-width (styles.popover minWidth 200) when clamping.
+const SCREEN_MARGIN = 8;
+const POPOVER_MIN_WIDTH = 200;
+// Approx tallest menu; if less room than this below the anchor, open upward.
+const ESTIMATED_MENU_HEIGHT = 260;
+export function Popover({
+  trigger,
+  children,
+  above,
+  placement = 'bottom right',
+  onOpen,
+  onClose,
+  surface = true
+}) {
+  const {
+    styles
+  } = useStyles();
+  const [isOpen, setIsOpen] = useState(false);
+  const [anchor, setAnchor] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const triggerRef = useRef(null);
+  /**
+   * The backdrop's own measured height.
+   *
+   * `bottom` is resolved against the PARENT box, which here is the backdrop
+   * inside the Modal — and on Android that box excludes the status bar and the
+   * gesture/navigation bar, while `Dimensions.get('window').height` reports the
+   * full screen. Mixing the two put the flipped-above popover ~76dp too high on
+   * a 420dpi device (measured: 84dp of air above the bubble instead of 8dp), and
+   * by a constant, so it read as "the menu is always far from the bubble".
+   *
+   * The `top` branch never had the problem: it is anchor-relative and never
+   * touches this number. Falls back to the Dimensions value until the first
+   * layout, which only affects the very first frame.
+   */
+  const [backdropHeight, setBackdropHeight] = useState(null);
+  const openPopover = () => {
+    var _triggerRef$current;
+    // Measure the trigger in window coordinates, then open once positioned.
+    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.measureInWindow((x, y, width, height) => {
+      setAnchor({
+        x,
+        y,
+        width,
+        height
+      });
+      setIsOpen(true);
+      onOpen === null || onOpen === void 0 || onOpen();
+    });
+  };
+  const closePopover = () => {
+    setIsOpen(false);
+    onClose === null || onClose === void 0 || onClose();
+  };
+  const isRight = placement.includes('right');
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = Dimensions.get('window');
+
+  // Vertical: honor an explicit 'top', but also flip above the anchor when there
+  // isn't room below (chat bubbles sit near the bottom, so a 'bottom' menu would
+  // otherwise clip off the screen).
+  const spaceBelow = screenHeight - (anchor.y + anchor.height);
+  const isTop = placement.includes('top') || spaceBelow < ESTIMATED_MENU_HEIGHT;
+  // `bottom` is relative to the backdrop, so measure the backdrop rather than
+  // assuming it matches the window (see backdropHeight).
+  const bottomReference = backdropHeight ?? screenHeight;
+  const abovePosition = {
+    bottom: bottomReference - anchor.y + ANCHOR_GAP
+  };
+  const verticalPosition = isTop ? abovePosition : {
+    top: anchor.y + anchor.height + ANCHOR_GAP
+  };
+
+  // Horizontal alignment: right-align to the anchor's right edge, else left-align to
+  // the anchor's left edge (the bubble's start). Clamp so the popover (min-width 200)
+  // never runs past either screen edge — the off-screen overflow inbound bubbles hit.
+  const maxInset = Math.max(SCREEN_MARGIN, screenWidth - POPOVER_MIN_WIDTH - SCREEN_MARGIN);
+  const horizontalPosition = isRight ? {
+    right: Math.min(maxInset, Math.max(SCREEN_MARGIN, screenWidth - (anchor.x + anchor.width)))
+  } : {
+    left: Math.min(maxInset, Math.max(SCREEN_MARGIN, anchor.x))
+  };
+  const content = typeof children === 'function' ? children({
+    closePopover,
+    isAbove: isTop
+  }) : children;
+  // The companion surface only exists while the main content sits below.
+  const aboveContent = isTop ? null : (above === null || above === void 0 ? void 0 : above({
+    closePopover,
+    isAbove: false
+  })) ?? null;
+  return /*#__PURE__*/React.createElement(View, {
+    ref: triggerRef,
+    collapsable: false
+  }, trigger({
+    isOpen,
+    isDesktop: true,
+    openPopover,
+    closePopover
+  }), /*#__PURE__*/React.createElement(Modal, {
+    transparent: true,
+    visible: isOpen,
+    animationType: "fade",
+    onRequestClose: closePopover
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.backdrop,
+    onPress: closePopover,
+    onLayout: event => {
+      const {
+        height
+      } = event.nativeEvent.layout;
+      if (height > 0) setBackdropHeight(height);
+    }
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    style: [surface ? styles.popover : styles.popoverBare, verticalPosition, horizontalPosition],
+    onPress: () => {}
+  }, surface ?
+  /*#__PURE__*/
+  // The card's radius + shadow sit on the Pressable above; the clip
+  // has to be a separate inner layer or iOS clips the shadow away.
+  React.createElement(View, {
+    style: styles.clip
+  }, content) : content), aboveContent ? /*#__PURE__*/React.createElement(Pressable, {
+    style: [surface ? styles.popover : styles.popoverBare, abovePosition, horizontalPosition],
+    onPress: () => {}
+  }, surface ? /*#__PURE__*/React.createElement(View, {
+    style: styles.clip
+  }, aboveContent) : aboveContent) : null)));
+}
+//# sourceMappingURL=Popover.js.map

package/lib/module/core/design/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","useState","Dimensions","Modal","Pressable","View","useStyles","ANCHOR_GAP","SCREEN_MARGIN","POPOVER_MIN_WIDTH","ESTIMATED_MENU_HEIGHT","Popover","trigger","children","above","placement","onOpen","onClose","surface","styles","isOpen","setIsOpen","anchor","setAnchor","x","y","width","height","triggerRef","backdropHeight","setBackdropHeight","openPopover","_triggerRef$current","current","measureInWindow","closePopover","isRight","includes","screenWidth","screenHeight","get","spaceBelow","isTop","bottomReference","abovePosition","bottom","verticalPosition","top","maxInset","Math","max","horizontalPosition","right","min","left","content","isAbove","aboveContent","createElement","ref","collapsable","isDesktop","transparent","visible","animationType","onRequestClose","style","backdrop","onPress","onLayout","event","nativeEvent","layout","popover","popoverBare","clip"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Popover/Popover.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/core/design/components/Popover/index.js

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

package/lib/module/core/design/components/Popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Popover"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Popover/index.ts"],"mappings":"AAAA,SAASA,OAAO,QAAQ,WAAW","ignoreList":[]}

package/lib/module/core/design/components/Popover/styles.js

@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    // Full-screen backdrop; tapping it closes the popover.
+    backdrop: {
+      flex: 1
+    },
+    // The floating card: radius 12, popover surface, elevation-04 shadow.
+    // RN's default shadowColor is black, so no colour literal is needed here.
+    //
+    // Deliberately NO `overflow: 'hidden'` on this view. On iOS that sets
+    // clipsToBounds, which clips the layer's own shadow away; Android draws from
+    // `elevation` instead and is unaffected. Losing the shadow is not a cosmetic
+    // detail here: Surface/Popover/Background/Default is pure white in the light
+    // theme, exactly like the page behind it, so the shadow is the ONLY thing
+    // that draws the card's outline. Without it the card has no visible corners
+    // and no visible right edge, and the menu reads as square and flush against
+    // the screen. Clipping lives on `clip` below so the shadow and the clip are
+    // never on the same layer.
+    popover: {
+      position: 'absolute',
+      borderRadius: 12,
+      // Matches the menu/dialog content min-width.
+      minWidth: 200,
+      backgroundColor: token(AmityColorToken.SurfacePopoverBackgroundDefault),
+      shadowOffset: {
+        width: 0,
+        height: 4
+      },
+      shadowOpacity: 0.16,
+      shadowRadius: 16,
+      elevation: 8
+    },
+    // Inner clipping layer — keeps arbitrary popover content inside the rounded
+    // corners. It carries no shadow, so clipping here costs nothing.
+    clip: {
+      borderRadius: 12,
+      overflow: 'hidden'
+    },
+    // surface={false}: positioning only, no card surface — lets the caller render
+    // its own separate floating surfaces (web MessageActionsPopover: a transparent
+    // Dialog holding a reaction-picker pill above a menu card, two distinct surfaces).
+    popoverBare: {
+      position: 'absolute',
+      minWidth: 200
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/core/design/components/Popover/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","backdrop","flex","popover","position","borderRadius","minWidth","backgroundColor","SurfacePopoverBackgroundDefault","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","clip","overflow","popoverBare"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Popover/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/B;IACAC,QAAQ,EAAE;MACRC,IAAI,EAAE;IACR,CAAC;IACD;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACAC,OAAO,EAAE;MACPC,QAAQ,EAAE,UAAU;MACpBC,YAAY,EAAE,EAAE;MAChB;MACAC,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAET,KAAK,CAACF,eAAe,CAACY,+BAA+B,CAAC;MACvEC,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;IACA;IACAC,IAAI,EAAE;MACJV,YAAY,EAAE,EAAE;MAChBW,QAAQ,EAAE;IACZ,CAAC;IACD;IACA;IACA;IACAC,WAAW,EAAE;MACXb,QAAQ,EAAE,UAAU;MACpBE,QAAQ,EAAE;IACZ;EACF,CAAC,CAAC;EAEF,OAAO;IAAEP,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

package/lib/module/core/design/components/Skeleton/Skeleton.js

@@ -0,0 +1,49 @@
+// Skeleton — ported from AmityUiKitWeb core/design/components/Skeleton.
+// A placeholder box filled with the skeleton-effect surface token. The web
+// shimmer (CSS `pulse` keyframes: opacity 1 -> 0.4 -> 1 over 1.75s,
+// cubic-bezier(0.4, 0, 0.6, 1), infinite) is ported to an RN Animated opacity
+// loop. Default square radius is 8px (web 0.5rem); pass `circle` for a round
+// placeholder (avatars) or an explicit `borderRadius` for pills.
+
+import { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import { useStyles } from './styles';
+const PULSE_DURATION = 1750;
+export function Skeleton({
+  width = '100%',
+  height = 16,
+  borderRadius = 8,
+  circle = false,
+  style
+}) {
+  const {
+    styles
+  } = useStyles();
+  const opacity = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    const loop = Animated.loop(Animated.sequence([Animated.timing(opacity, {
+      toValue: 0.4,
+      duration: PULSE_DURATION / 2,
+      easing: Easing.bezier(0.4, 0, 0.6, 1),
+      useNativeDriver: true
+    }), Animated.timing(opacity, {
+      toValue: 1,
+      duration: PULSE_DURATION / 2,
+      easing: Easing.bezier(0.4, 0, 0.6, 1),
+      useNativeDriver: true
+    })]));
+    loop.start();
+    return () => loop.stop();
+  }, [opacity]);
+  const radius = circle && typeof height === 'number' ? height / 2 : borderRadius;
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    accessibilityRole: "none",
+    style: [styles.skeleton, {
+      width,
+      height,
+      borderRadius: radius,
+      opacity
+    }, style]
+  });
+}
+//# sourceMappingURL=Skeleton.js.map

package/lib/module/core/design/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","Animated","Easing","useStyles","PULSE_DURATION","Skeleton","width","height","borderRadius","circle","style","styles","opacity","Value","current","loop","sequence","timing","toValue","duration","easing","bezier","useNativeDriver","start","stop","radius","React","createElement","View","accessibilityRole","skeleton"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Skeleton/Skeleton.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACzC,SACEC,QAAQ,EACRC,MAAM,QAID,cAAc;AACrB,SAASC,SAAS,QAAQ,UAAU;AAUpC,MAAMC,cAAc,GAAG,IAAI;AAE3B,OAAO,SAASC,QAAQA,CAAC;EACvBC,KAAK,GAAG,MAAM;EACdC,MAAM,GAAG,EAAE;EACXC,YAAY,GAAG,CAAC;EAChBC,MAAM,GAAG,KAAK;EACdC;AACa,CAAC,EAAE;EAChB,MAAM;IAAEC;EAAO,CAAC,GAAGR,SAAS,CAAC,CAAC;EAC9B,MAAMS,OAAO,GAAGZ,MAAM,CAAC,IAAIC,QAAQ,CAACY,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAErDf,SAAS,CAAC,MAAM;IACd,MAAMgB,IAAI,GAAGd,QAAQ,CAACc,IAAI,CACxBd,QAAQ,CAACe,QAAQ,CAAC,CAChBf,QAAQ,CAACgB,MAAM,CAACL,OAAO,EAAE;MACvBM,OAAO,EAAE,GAAG;MACZC,QAAQ,EAAEf,cAAc,GAAG,CAAC;MAC5BgB,MAAM,EAAElB,MAAM,CAACmB,MAAM,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;MACrCC,eAAe,EAAE;IACnB,CAAC,CAAC,EACFrB,QAAQ,CAACgB,MAAM,CAACL,OAAO,EAAE;MACvBM,OAAO,EAAE,CAAC;MACVC,QAAQ,EAAEf,cAAc,GAAG,CAAC;MAC5BgB,MAAM,EAAElB,MAAM,CAACmB,MAAM,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;MACrCC,eAAe,EAAE;IACnB,CAAC,CAAC,CACH,CACH,CAAC;IACDP,IAAI,CAACQ,KAAK,CAAC,CAAC;IACZ,OAAO,MAAMR,IAAI,CAACS,IAAI,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACZ,OAAO,CAAC,CAAC;EAEb,MAAMa,MAAM,GACVhB,MAAM,IAAI,OAAOF,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAG,CAAC,GAAGC,YAAY;EAElE,oBACEkB,KAAA,CAAAC,aAAA,CAAC1B,QAAQ,CAAC2B,IAAI;IACZC,iBAAiB,EAAC,MAAM;IACxBnB,KAAK,EAAE,CACLC,MAAM,CAACmB,QAAQ,EACf;MAAExB,KAAK;MAAEC,MAAM;MAAEC,YAAY,EAAEiB,MAAM;MAAEb;IAAQ,CAAC,EAChDF,KAAK;EACL,CACH,CAAC;AAEN","ignoreList":[]}

package/lib/module/core/design/components/Skeleton/index.js

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

package/lib/module/core/design/components/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Skeleton"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Skeleton/index.ts"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,YAAY","ignoreList":[]}

package/lib/module/core/design/components/Skeleton/styles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+
+// Skeleton fill = Surface/SkeletonEffect/Default
+// (web var(--asc-color-surface-skeletoneffect-default)).
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    skeleton: {
+      backgroundColor: token(AmityColorToken.SurfaceSkeletonEffectDefault)
+    }
+  });
+  return {
+    styles
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/core/design/components/Skeleton/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","skeleton","backgroundColor","SurfaceSkeletonEffectDefault"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Skeleton/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,eAAe,QAAQ,iCAAiC;;AAEjE;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,QAAQ,EAAE;MACRC,eAAe,EAAEJ,KAAK,CAACF,eAAe,CAACO,4BAA4B;IACrE;EACF,CAAC,CAAC;EAEF,OAAO;IAAEJ;EAAO,CAAC;AACnB,CAAC","ignoreList":[]}