@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/lib/typescript/social/hooks/useGlobalBehavior.d.ts

@@ -8,6 +8,7 @@ export declare const useGlobalBehavior: () => {
             type: "failed" | "success" | "informative" | "loading";
             duration?: number;
             bottomPosition?: number;
+            variant?: "default" | "custom";
         };
         type: "toast/showToast";
     };

package/lib/typescript/social/hooks/useGlobalBehavior.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGlobalBehavior.d.ts","sourceRoot":"","sources":["../../../../src/social/hooks/useGlobalBehavior.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB;gDAMJ;QAAE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE;;;;;;;;;;;CAiBzD,CAAC"}
+{"version":3,"file":"useGlobalBehavior.d.ts","sourceRoot":"","sources":["../../../../src/social/hooks/useGlobalBehavior.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB;gDAMJ;QAAE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE;;;;;;;;;;;;CAiBzD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/react-native-social-uikit",
-  "version": "4.1.0",
+  "version": "4.1.1-d7da0c5c.0",
   "description": "Social UIKit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -33,6 +33,7 @@
     "test": "jest --passWithNoTests",
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "check:chat-toasts": "node scripts/check-chat-toasts.mjs",
     "prepack": "bob build",
     "release": "release-it",
     "example": "yarn --cwd example",
@@ -57,17 +58,18 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@amityco/ts-sdk-react-native": "^7.23.0",
+    "@amityco/ts-sdk-react-native": "7.24.1-a63fc29a.0",
     "@babel/plugin-transform-export-namespace-from": "^7.27.1",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
     "@livekit/react-native": "^2.9.6",
     "@livekit/react-native-webrtc": "^137.0.2",
     "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-camera-roll/camera-roll": "^7.10.2",
     "@react-native-clipboard/clipboard": "^1.16.3",
     "@react-native-community/datetimepicker": "^8.4.4",
     "@react-native-community/eslint-config": "^3.0.2",
-    "@react-native-community/netinfo": "^11.4.1",
+    "@react-native-community/netinfo": "^11.5.2",
     "@react-native-firebase/app": "^20.1.0",
     "@react-native-firebase/messaging": "^20.1.0",
     "@react-native/babel-preset": "0.82.1",
@@ -116,15 +118,18 @@
     "*.{json,md}": "prettier --write"
   },
   "resolutions": {
-    "@types/react": "^19.1.0"
+    "@types/react": "^19.1.0",
+    "@react-native-community/netinfo": "11.5.2",
+    "@react-native-async-storage/async-storage": "2.2.0"
   },
   "peerDependencies": {
-    "@amityco/ts-sdk-react-native": "^7.23.0",
+    "@amityco/ts-sdk-react-native": "7.24.1-a63fc29a.0",
     "@livekit/react-native": "^2.9.6",
     "@livekit/react-native-webrtc": "^137.0.2",
     "@react-native-async-storage/async-storage": "^1.19.3",
+    "@react-native-camera-roll/camera-roll": "^7.10.2",
     "@react-native-clipboard/clipboard": "^1.16.3",
-    "@react-native-community/netinfo": "^11.3.1",
+    "@react-native-community/netinfo": ">=11.5.0",
     "@react-native-firebase/app": "^20.1.0",
     "@react-native-firebase/messaging": "^20.1.0",
     "@react-navigation/native": "^7.1.8",
@@ -140,7 +145,6 @@
     "react-native-haptic-feedback": "^2.3.3",
     "react-native-image-picker": "^8.2.1",
     "react-native-linear-gradient": "^2.8.3",
-    "react-native-netinfo": "^1.1.0",
     "react-native-safe-area-context": "^5.6.2",
     "react-native-screens": "^4.18.0",
     "react-native-svg": "^15.15.1",
@@ -235,6 +239,7 @@
     "dayjs": "^1.11.10",
     "html-entities": "^2.5.2",
     "i18next": "22.4.10",
+    "linkifyjs": "4.1.3",
     "mime": "^4.1.0",
     "polished": "^4.3.1",
     "react-content-loader": "^6.2.1",

package/src/core/assets/icons/emptyCommunity2.tsx

@@ -0,0 +1,46 @@
+// emptyCommunity2 — ported 1:1 from AmityUiKitWeb
+// src/v4/core/design/illustrations/EmptyCommunity2 (Light + Dark). The chat-home
+// "no conversation yet" illustration: a 160×160 circle backdrop behind two list
+// cards (avatar + title/description bars). Web bakes theme-specific colours (not
+// tokens), so this asset lives under core/assets/icons (outside the tokens-only
+// no-hex scope) and returns an SVG string for SvgXml, matching the sibling
+// `emptyCommunity` asset. Pass `dark` to pick the theme variant.
+
+type Palette = {
+  circle: string;
+  card: string;
+  stroke: string;
+  bar: string;
+};
+
+// Web Light() / Dark() fills.
+const LIGHT: Palette = {
+  circle: '#EBEBEB',
+  card: '#FFFFFF',
+  stroke: '#D9D9D9',
+  bar: '#A8A8A8',
+};
+const DARK: Palette = {
+  circle: '#595959',
+  card: '#2E2E2E',
+  stroke: '#2E2E2E',
+  bar: '#949494',
+};
+
+export const emptyCommunity2 = (dark = false): string => {
+  const c = dark ? DARK : LIGHT;
+  return `<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#ec2_clip)">
+    <path d="M70 150C108.66 150 140 118.66 140 80C140 41.3401 108.66 10 70 10C31.3401 10 0 41.3401 0 80C0 118.66 31.3401 150 70 150Z" fill="${c.circle}"/>
+    <path d="M20.0034 89.5857H155.001C157.416 89.5857 159.374 91.543 159.374 93.9578V118.958C159.373 121.372 157.416 123.33 155.001 123.33H20.0034C17.5888 123.33 15.6316 121.372 15.6313 118.958V93.9578C15.6313 91.543 17.5887 89.5857 20.0034 89.5857Z" fill="${c.card}" stroke="${c.stroke}" stroke-width="1.25529"/>
+    <path opacity="0.3" d="M78.5128 96.9578H52.5131C50.8563 96.9578 49.5132 98.3009 49.5132 99.9577C49.5132 101.615 50.8563 102.958 52.5131 102.958H78.5128C80.1696 102.958 81.5128 101.615 81.5128 99.9577C81.5128 98.3009 80.1696 96.9578 78.5128 96.9578Z" fill="${c.bar}"/>
+    <path opacity="0.15" d="M96.5127 109.958H52.5133C50.8564 109.958 49.5133 111.301 49.5133 112.958C49.5133 114.615 50.8564 115.958 52.5133 115.958H96.5127C98.1695 115.958 99.5126 114.615 99.5126 112.958C99.5126 111.301 98.1695 109.958 96.5127 109.958Z" fill="${c.bar}"/>
+    <path d="M32.6069 114.458C37.0252 114.458 40.6069 110.876 40.6069 106.458C40.6069 102.039 37.0252 98.4575 32.6069 98.4575C28.1887 98.4575 24.6069 102.039 24.6069 106.458C24.6069 110.876 28.1887 114.458 32.6069 114.458Z" fill="${c.bar}"/>
+    <path d="M5 44.6279H139.998C142.413 44.6279 144.37 46.5853 144.37 49V74C144.37 76.4146 142.413 78.3721 139.998 78.3721H5C2.58538 78.3721 0.628143 76.4146 0.62793 74V49C0.62793 46.5853 2.58525 44.6279 5 44.6279Z" fill="${c.card}" stroke="${c.stroke}" stroke-width="1.25529"/>
+    <path opacity="0.3" d="M63.5094 52H37.5097C35.8529 52 34.5098 53.3431 34.5098 55C34.5098 56.6568 35.8529 57.9999 37.5097 57.9999H63.5094C65.1662 57.9999 66.5093 56.6568 66.5093 55C66.5093 53.3431 65.1662 52 63.5094 52Z" fill="${c.bar}"/>
+    <path opacity="0.15" d="M81.5093 65H37.5098C35.853 65 34.5099 66.3431 34.5099 68C34.5099 69.6568 35.853 70.9999 37.5098 70.9999H81.5093C83.1661 70.9999 84.5092 69.6568 84.5092 68C84.5092 66.3431 83.1661 65 81.5093 65Z" fill="${c.bar}"/>
+    <path d="M17.6035 69.4998C22.0218 69.4998 25.6035 65.918 25.6035 61.4998C25.6035 57.0815 22.0218 53.4998 17.6035 53.4998C13.1852 53.4998 9.60352 57.0815 9.60352 61.4998C9.60352 65.918 13.1852 69.4998 17.6035 69.4998Z" fill="${c.bar}"/>
+  </g>
+  <defs><clipPath id="ec2_clip"><rect width="160" height="160" fill="white"/></clipPath></defs>
+</svg>`;
+};

package/src/core/design/atoms/Avatar/Avatar.tsx

@@ -0,0 +1,93 @@
+// Avatar atom — ported from AmityUiKitWeb core/design/atoms/Avatar.
+// Profile avatar: image / initials / user-icon fallback, rounded or squared,
+// 8 intrinsic sizes (SoT avatarIcon.avatar.sizes), optional profile border ring,
+// indicator badge slot and label. Web hover edit-photo affordance is web-only
+// (no touch-hover, no matching RN token) and is intentionally omitted.
+
+// 1. React / RN imports
+import { type ReactNode } from 'react';
+import { View, Text, Image, Pressable } from 'react-native';
+
+// 2. Internal imports
+import { AmityIcon } from '../../icons';
+import { useStyles } from './styles';
+
+// 3. Types
+export type AvatarVariant = 'image' | 'icon' | 'text';
+export type AvatarShape = 'rounded' | 'squared';
+export type AvatarSize = 16 | 24 | 28 | 32 | 40 | 56 | 64 | 120;
+export type AvatarState = 'default' | 'skeleton';
+export type AvatarBorderWidth = 0 | 1 | 2 | 3 | 4;
+
+export type AvatarProps = {
+  variant?: AvatarVariant;
+  imageUrl?: string;
+  initials?: string;
+  shape?: AvatarShape;
+  size?: AvatarSize;
+  state?: AvatarState;
+  borderWidth?: AvatarBorderWidth;
+  indicator?: ReactNode;
+  label?: string;
+  onPress?: () => void;
+};
+
+// 4. Named function component
+export function Avatar({
+  variant = 'icon',
+  imageUrl,
+  initials,
+  shape = 'rounded',
+  size = 40,
+  state = 'default',
+  borderWidth = 0,
+  indicator,
+  label,
+  onPress,
+}: AvatarProps) {
+  const { styles, glyphSize, glyphColor } = useStyles(
+    size,
+    shape,
+    state,
+    borderWidth
+  );
+
+  let content: ReactNode = null;
+  if (state !== 'skeleton') {
+    if (variant === 'image' && imageUrl) {
+      content = (
+        <Image
+          source={{ uri: imageUrl }}
+          style={styles.image}
+          resizeMode="cover"
+        />
+      );
+    } else if (variant === 'text' && initials) {
+      content = <Text style={styles.initials}>{initials}</Text>;
+    } else {
+      // PDT-3912 (web b5df56286): the fallback glyph is the SOLID user icon
+      // (User.Regular → User.Solid in web's core Avatar).
+      content = (
+        <AmityIcon name="user-s" size={glyphSize} tokenColor={glyphColor} />
+      );
+    }
+  }
+
+  const frame = <View style={styles.frame}>{content}</View>;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.frameWrapper}>
+        {onPress ? (
+          <Pressable onPress={onPress} accessibilityRole="button">
+            {frame}
+          </Pressable>
+        ) : (
+          frame
+        )}
+        {indicator ? <View style={styles.indicator}>{indicator}</View> : null}
+      </View>
+      {label ? <Text style={styles.label}>{label}</Text> : null}
+    </View>
+  );
+}

package/src/core/design/atoms/Avatar/index.ts

@@ -0,0 +1,9 @@
+export { Avatar } from './Avatar';
+export type {
+  AvatarProps,
+  AvatarVariant,
+  AvatarShape,
+  AvatarSize,
+  AvatarState,
+  AvatarBorderWidth,
+} from './Avatar';

package/src/core/design/atoms/Avatar/styles.ts

@@ -0,0 +1,109 @@
+import { StyleSheet } from 'react-native';
+import { useToken, type ColorTokenRef } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+import type { AvatarShape, AvatarSize, AvatarState } from './Avatar';
+
+// Frame box per intrinsic size — SoT geometry.json avatarIcon.avatar.sizes
+// = [16, 24, 28, 32, 40, 56, 64, 120]. Literal width/height so the geometry
+// gate can assert `width` is one of the SoT sizes.
+const FRAME: Record<AvatarSize, { width: number; height: number }> = {
+  16: { width: 16, height: 16 },
+  24: { width: 24, height: 24 },
+  28: { width: 28, height: 28 },
+  32: { width: 32, height: 32 },
+  40: { width: 40, height: 40 },
+  56: { width: 56, height: 56 },
+  64: { width: 64, height: 64 },
+  120: { width: 120, height: 120 },
+};
+
+// Squared corner radius per size bucket (web Avatar.module.css).
+const SQUARED_RADIUS: Record<AvatarSize, number> = {
+  16: 4,
+  24: 4,
+  28: 4,
+  32: 4,
+  40: 8,
+  56: 16,
+  64: 16,
+  120: 24,
+};
+
+// Fallback user-icon glyph size per avatar size (web Avatar.module.css).
+const GLYPH_SIZE: Record<AvatarSize, number> = {
+  16: 12,
+  24: 16,
+  28: 18,
+  32: 20,
+  40: 24,
+  56: 32,
+  64: 32,
+  120: 64,
+};
+
+// Initials font size per avatar size (web Avatar.module.css).
+const INITIALS_SIZE: Record<AvatarSize, number> = {
+  16: 10,
+  24: 10,
+  28: 10,
+  32: 16,
+  40: 16,
+  56: 24,
+  64: 24,
+  120: 48,
+};
+
+export const useStyles = (
+  size: AvatarSize,
+  shape: AvatarShape,
+  state: AvatarState,
+  borderWidth: number
+) => {
+  const token = useToken();
+  const frame = FRAME[size];
+  const borderRadius = shape === 'rounded' ? size / 2 : SQUARED_RADIUS[size];
+  const backgroundColor =
+    state === 'skeleton'
+      ? token(AmityColorToken.SurfaceSkeletonEffectDefault)
+      : token(AmityColorToken.SurfaceAvatarProfileDefault);
+
+  const styles = StyleSheet.create({
+    container: { alignItems: 'center', gap: 4 },
+    frameWrapper: { position: 'relative', alignSelf: 'flex-start' },
+    frame: {
+      width: frame.width,
+      height: frame.height,
+      borderRadius,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      backgroundColor,
+      borderWidth,
+      borderColor: token(AmityColorToken.BorderAvatarProfileDefault),
+    },
+    image: { width: '100%', height: '100%' },
+    initials: {
+      fontSize: INITIALS_SIZE[size],
+      fontWeight: '600',
+      textTransform: 'uppercase',
+      color: token(AmityColorToken.TextAvatarAtomicGeneral),
+    },
+    indicator: {
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+      borderRadius: 9999,
+      borderWidth: 3,
+      borderColor: token(AmityColorToken.BorderAvatarIndicatorDefault),
+    },
+    label: {
+      fontSize: 13,
+      textAlign: 'center',
+      color: token(AmityColorToken.TextAvatarLabelDefault),
+    },
+  });
+
+  const glyphColor: ColorTokenRef = AmityColorToken.IconAvatarDefault;
+
+  return { styles, glyphSize: GLYPH_SIZE[size], glyphColor };
+};

package/src/core/design/atoms/Badge/Badge.tsx

@@ -0,0 +1,103 @@
+// Badge atom — ported from AmityUiKitWeb core/design/atoms/Badge.
+// Compound namespace: Badge.Label (text pill) and Badge.Icon (icon chip).
+// Shape/fill/size/border + optional semantic `preset` drive geometry (SoT
+// geometry.json → badges) and colour (AmityColorToken via useToken).
+
+import { View, Text } from 'react-native';
+import { AmityIcon, type AmityIconName } from '../../icons';
+import { type ColorTokenRef } from '../../theme/useToken';
+import { resolveBadgeTokens, useStyles } from './styles';
+
+export type BadgeShape = 'round' | 'square';
+export type BadgeFill = 'filled' | 'ghost';
+export type BadgeSize = 14 | 16 | 20 | 24 | 28 | 32;
+export type BadgePreset = { family: string; case: string };
+
+export type BadgeBaseProps = {
+  shape?: BadgeShape;
+  fill?: BadgeFill;
+  size?: BadgeSize;
+  border?: boolean;
+  preset?: BadgePreset;
+};
+
+export type LabelProps = BadgeBaseProps & {
+  label: string;
+};
+
+export type IconProps = BadgeBaseProps & {
+  icon: AmityIconName;
+  /** Override the preset's icon colour (e.g. force a white lock). */
+  iconColorToken?: ColorTokenRef;
+  /** Override the preset's surface (chip background) colour. */
+  surfaceColorToken?: ColorTokenRef;
+};
+
+export const presetSlug = (preset?: BadgePreset) =>
+  preset ? `${preset.family}-${preset.case}`.toLowerCase() : undefined;
+
+function Label({
+  label,
+  shape = 'round',
+  fill = 'filled',
+  size = 24,
+  border = false,
+  preset,
+}: LabelProps) {
+  const tokens = resolveBadgeTokens(presetSlug(preset));
+  const { styles } = useStyles({
+    variant: 'label',
+    shape,
+    fill,
+    size,
+    border,
+    tokens,
+  });
+
+  return (
+    <View style={styles.badge} accessibilityRole="none">
+      <Text style={styles.label} numberOfLines={1}>
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+function Icon({
+  icon,
+  shape = 'round',
+  fill = 'filled',
+  size = 24,
+  border = false,
+  preset,
+  iconColorToken,
+  surfaceColorToken,
+}: IconProps) {
+  const tokens = {
+    ...resolveBadgeTokens(presetSlug(preset)),
+    ...(surfaceColorToken ? { surface: surfaceColorToken } : {}),
+    ...(iconColorToken ? { icon: iconColorToken } : {}),
+  };
+  const { styles } = useStyles({
+    variant: 'icon',
+    shape,
+    fill,
+    size,
+    border,
+    tokens,
+  });
+
+  // Web: glyph fills 100% of the chip, or 75% when a border ring is present.
+  const glyphSize = border ? Math.round(size * 0.75) : size;
+
+  return (
+    <View style={styles.badge} accessibilityRole="none">
+      <AmityIcon name={icon} tokenColor={tokens.icon} size={glyphSize} />
+    </View>
+  );
+}
+
+export const Badge = {
+  Label,
+  Icon,
+};

package/src/core/design/atoms/Badge/index.ts

@@ -0,0 +1,10 @@
+export { Badge, presetSlug } from './Badge';
+export type {
+  BadgeShape,
+  BadgeFill,
+  BadgeSize,
+  BadgePreset,
+  BadgeBaseProps,
+  LabelProps,
+  IconProps,
+} from './Badge';

package/src/core/design/atoms/Badge/styles.ts

@@ -0,0 +1,158 @@
+import { StyleSheet } from 'react-native';
+import { useToken, type ColorTokenRef } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+import type { BadgeFill, BadgeShape, BadgeSize } from './Badge';
+
+// --- Geometry (SoT: geometry.json → badges; web CSS grid, rem × 16) ----------
+// Label per-size: height / round-filled paddingX / fontSize.
+// (size-24 sampled by geometry.json: label.text.size=13, label.round.paddingX=8.)
+const LABEL_GEOMETRY: Record<
+  BadgeSize,
+  { height: number; paddingX: number; fontSize: number }
+> = {
+  14: { height: 14, paddingX: 4, fontSize: 10 },
+  16: { height: 16, paddingX: 4, fontSize: 10 },
+  20: { height: 20, paddingX: 6, fontSize: 12 },
+  24: { height: 24, paddingX: 8, fontSize: 13 },
+  28: { height: 28, paddingX: 8, fontSize: 13 },
+  32: { height: 32, paddingX: 12, fontSize: 15 },
+};
+
+// Square shape narrows label horizontal padding (geometry.json label.square.paddingX=2).
+const squarePaddingX = (
+  fill: BadgeFill,
+  size: BadgeSize
+): number | undefined => {
+  if (fill === 'filled' && (size === 14 || size === 16)) return 2;
+  if (fill === 'ghost' && (size === 20 || size === 24 || size === 28)) return 2;
+  if (fill === 'ghost' && size === 32) return 4;
+  return undefined;
+};
+
+// Corner radius: square = 4 (geometry.json label.square.cornerRadius); round = full pill.
+const SQUARE_RADIUS = 4;
+const ROUND_RADIUS = 9999;
+const BORDER_WIDTH = 1; // web ring: 0 0 0 0.0625rem
+
+// --- Colour token resolution (preset → AmityColorToken refs) ------------------
+export type BadgeColorTokens = {
+  surface: ColorTokenRef;
+  text: ColorTokenRef;
+  icon: ColorTokenRef;
+  border: ColorTokenRef;
+};
+
+const ATOMIC_TOKENS: BadgeColorTokens = {
+  surface: AmityColorToken.SurfaceBadgeAtomicBadgeFilledDefault,
+  text: AmityColorToken.TextBadgeAtomicBadgeDefault,
+  icon: AmityColorToken.IconBadgeAtomicBadgeDefault,
+  border: AmityColorToken.BorderBadgeAtomicBadgeDefault,
+};
+
+export function resolveBadgeTokens(slug?: string): BadgeColorTokens {
+  switch (slug) {
+    case 'general-notification':
+      return {
+        ...ATOMIC_TOKENS,
+        surface: AmityColorToken.SurfaceBadgeSemanticBadgeGeneralNotification,
+        text: AmityColorToken.TextBadgeSemanticBadgeGeneralDefaultDefault,
+        border: AmityColorToken.BorderBadgeSemanticBadgeGeneralDefault,
+      };
+    case 'userstatus-moderator':
+      return {
+        ...ATOMIC_TOKENS,
+        surface: AmityColorToken.SurfaceBadgeSemanticBadgeUserStatusModerator,
+        icon: AmityColorToken.IconBadgeSemanticBadgeUserStatusModeratorDefault,
+        border: AmityColorToken.BorderAvatarIndicatorDefault,
+      };
+    case 'chat-mention':
+      return {
+        ...ATOMIC_TOKENS,
+        surface: AmityColorToken.SurfaceBadgeSemanticBadgeChatMention,
+        icon: AmityColorToken.IconBadgeSemanticBadgeChatMentionDefault,
+      };
+    case 'chat-private':
+      return {
+        ...ATOMIC_TOKENS,
+        surface: AmityColorToken.SurfaceBadgeSemanticBadgeChatPrivate,
+        icon: AmityColorToken.IconBadgeSemanticBadgeChatPrivateDefault,
+        border: AmityColorToken.BorderAvatarProfileDefault,
+      };
+    // userstatus/private — no Surface/UserStatus/Private token yet; stopgap
+    // reuses the Moderator surface until the private surface token ships (matches web).
+    case 'userstatus-private':
+      return {
+        ...ATOMIC_TOKENS,
+        surface: AmityColorToken.SurfaceBadgeSemanticBadgeUserStatusModerator,
+        icon: AmityColorToken.IconBadgeSemanticBadgeUserStatusPrivateDefault,
+      };
+    default:
+      return ATOMIC_TOKENS;
+  }
+}
+
+// --- Style hook ---------------------------------------------------------------
+type UseStylesArgs = {
+  variant: 'label' | 'icon';
+  shape: BadgeShape;
+  fill: BadgeFill;
+  size: BadgeSize;
+  border: boolean;
+  tokens: BadgeColorTokens;
+};
+
+export const useStyles = ({
+  variant,
+  shape,
+  fill,
+  size,
+  border,
+  tokens,
+}: UseStylesArgs) => {
+  const token = useToken();
+
+  const borderRadius = shape === 'square' ? SQUARE_RADIUS : ROUND_RADIUS;
+  const backgroundColor =
+    fill === 'ghost' ? 'transparent' : token(tokens.surface);
+  const borderProps = border
+    ? { borderWidth: BORDER_WIDTH, borderColor: token(tokens.border) }
+    : null;
+
+  const base = {
+    alignSelf: 'flex-start' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    borderRadius,
+    backgroundColor,
+    ...borderProps,
+  };
+
+  const label = LABEL_GEOMETRY[size];
+  const paddingHorizontal =
+    shape === 'square'
+      ? squarePaddingX(fill, size) ?? label.paddingX
+      : label.paddingX;
+
+  const styles = StyleSheet.create({
+    badge:
+      variant === 'label'
+        ? {
+            ...base,
+            height: label.height,
+            paddingHorizontal,
+          }
+        : {
+            ...base,
+            width: size,
+            height: size,
+          },
+    label: {
+      color: token(tokens.text),
+      fontSize: label.fontSize,
+      fontWeight: '600',
+      lineHeight: label.fontSize,
+    },
+  });
+
+  return { styles };
+};