@amityco/react-native-social-uikit 4.2.0 → 4.2.1-3302b40d.0

package/src/chat/utils/previewLink.ts

@@ -0,0 +1,37 @@
+// previewLink — faithful port of AmityUiKitWeb chat/utils/previewLink.ts.
+// extractFirstPreviewUrl is ported VERBATIM (same linkifyjs `find`, same
+// http→https upgrade) so RN previews the same URLs web does — including bare
+// `www.`/domain URLs and URLs followed by punctuation, which a naive
+// /https?:\/\/\S+/ regex silently misses or over-captures.
+//
+// getHostName: web uses `new URL(url).hostname`, but RN's URL implementation
+// does not reliably expose `.hostname`, so we strip the host with a regex
+// (behaviour-equivalent for display). The SDK metadata already returns `domain`
+// directly; this is only a fallback.
+
+import { find } from 'linkifyjs';
+
+export function extractFirstPreviewUrl(text: string): string | null {
+  if (!text) return null;
+
+  const urls = find(text, 'url');
+  if (urls.length === 0) return null;
+
+  const { value, href } = urls[0];
+
+  // linkifyjs defaults bare `www.foo.com` to `http://www.foo.com`; we want https.
+  if (!/^https?:\/\//i.test(value) && href.startsWith('http://')) {
+    return `https://${href.slice('http://'.length)}`;
+  }
+
+  return href;
+}
+
+export function getHostName(url: string): string {
+  return (
+    url
+      .replace(/^https?:\/\//i, '')
+      .replace(/^www\./i, '')
+      .split(/[/?#]/)[0] ?? ''
+  );
+}

package/src/chat/utils/timestamp.ts

@@ -0,0 +1,54 @@
+// Timestamp util — ported from AmityUiKitWeb v4/chat/utils/timestamp.
+// Formats a channel's last-activity timestamp as a compact relative string
+// ("Now", "5m", "3h", "2d") falling back to a short date ("07 Jul" / "07 Jul 2024").
+//
+// Web adaptations: `navigator.language` (browser-only) is dropped — RN uses the
+// runtime default locale via `Intl.DateTimeFormat(undefined, ...)` (supported by
+// Hermes). The localized suffixes/labels resolve through the same
+// `resolveString` API as web.
+
+import dayjs from 'dayjs';
+import { resolveString } from '../../core/localization';
+
+function formatShortDate(date: Date, withYear: boolean): string {
+  const day = new Intl.DateTimeFormat(undefined, { day: '2-digit' }).format(
+    date
+  );
+  const month = new Intl.DateTimeFormat(undefined, { month: 'short' }).format(
+    date
+  );
+  return withYear ? `${day} ${month} ${date.getFullYear()}` : `${day} ${month}`;
+}
+
+// formatMessageTime — ported from AmityUiKitWeb v4/chat/utils/formatMessageTime.
+// A single message's time as 24-hour HH:MM (shown beside each bubble).
+export function formatMessageTime(input: string | Date | number): string {
+  const d = input instanceof Date ? input : new Date(input);
+  const hh = d.getHours().toString().padStart(2, '0');
+  const mm = d.getMinutes().toString().padStart(2, '0');
+  return `${hh}:${mm}`;
+}
+
+export function formatTimestamp(input: string | Date): string {
+  const now = dayjs();
+  const time = dayjs(input);
+  const diffInSeconds = now.diff(time, 'second');
+  const diffInMinutes = now.diff(time, 'minute');
+  const diffInHours = now.diff(time, 'hour');
+  const diffInDays = now.diff(time, 'day');
+
+  if (diffInSeconds < 60) return resolveString('amity_chat_timestamp_now');
+  if (diffInMinutes < 60)
+    return `${diffInMinutes}${resolveString(
+      'amity_common_time_time_minutes_suffix'
+    )}`;
+  if (diffInHours < 24)
+    return `${diffInHours}${resolveString(
+      'amity_common_time_time_hours_suffix'
+    )}`;
+  if (diffInDays < 7)
+    return `${diffInDays}${resolveString(
+      'amity_common_time_time_days_suffix'
+    )}`;
+  return formatShortDate(time.toDate(), !now.isSame(time, 'year'));
+}

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,116 @@
+// 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,
+  type StyleProp,
+  type ViewStyle,
+} 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;
+  /**
+   * Positional override for the indicator slot, for surfaces whose design
+   * anchors the badge differently. Merged over the atom defaults, which stay
+   * unchanged.
+   */
+  indicatorStyle?: StyleProp<ViewStyle>;
+  label?: string;
+  onPress?: () => void;
+  /** Screen-reader name for the pressable frame. Only meaningful with `onPress`. */
+  accessibilityLabel?: string;
+};
+
+// 4. Named function component
+export function Avatar({
+  variant = 'icon',
+  imageUrl,
+  initials,
+  shape = 'rounded',
+  size = 40,
+  state = 'default',
+  borderWidth = 0,
+  indicator,
+  indicatorStyle,
+  label,
+  onPress,
+  accessibilityLabel,
+}: 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 {
+      // 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"
+            accessibilityLabel={accessibilityLabel}
+          >
+            {frame}
+          </Pressable>
+        ) : (
+          frame
+        )}
+        {indicator ? (
+          <View style={[styles.indicator, indicatorStyle]}>{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,101 @@
+// 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 { 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;
+  /**
+   * Glyph size in px, overriding the default (chip size, or 75% of it when a
+   * border ring is present). Icon-only badges are drawn from a sampled
+   * per-size ramp in Figma rather than a formula, so a case whose render
+   * disagrees with the default passes its measured value here.
+   */
+  glyphSize?: number;
+};
+
+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,
+  glyphSize: glyphSizeProp,
+}: IconProps) {
+  const tokens = resolveBadgeTokens(presetSlug(preset));
+  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.
+  // An explicit `glyphSize` wins over both.
+  const glyphSize = glyphSizeProp ?? (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 };
+};