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

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

@@ -0,0 +1,309 @@
+import { StyleSheet } from 'react-native';
+import { useToken, type ColorTokenRef } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+import type { ButtonHierarchy, ButtonSize, ButtonTone } from './Button';
+
+// ── Geometry: SoT geometry.json → button.main ──
+// label sizes lg {15/20} sm {13/18}; iconGlyph 16; weight 590 → RN '600'.
+// Tertiary uses paddingH_tertiary (4) but keeps full height + paddingV (ghost-like,
+// NOT link-like). Border width 0.0625rem = 1px.
+const GEOMETRY = {
+  lg: {
+    height: 40,
+    paddingV: 10,
+    paddingH: 12,
+    paddingHTertiary: 4,
+    radius: 8,
+    fontSize: 15,
+    lineHeight: 20,
+    gap: 8,
+  },
+  sm: {
+    height: 28,
+    paddingV: 4,
+    paddingH: 8,
+    paddingHTertiary: 4,
+    radius: 6,
+    fontSize: 13,
+    lineHeight: 18,
+    gap: 4,
+  },
+} as const;
+
+const ICON_GLYPH = 16;
+const BORDER_WIDTH = 1;
+const FONT_WEIGHT = '600' as const;
+
+export type ButtonVisualState = 'enabled' | 'pressed' | 'disabled';
+
+// A token slice for one visual state. `surface`/`border` are optional because
+// ghost/link tones have no resting surface or border token (transparent at rest;
+// ghost gains a surface only on hover/press).
+type StateTokens = {
+  surface?: ColorTokenRef;
+  border?: ColorTokenRef;
+  text: ColorTokenRef;
+  icon: ColorTokenRef;
+};
+
+type ToneSlice = Record<ButtonVisualState, StateTokens>;
+
+// (hierarchy, tone) → token slice, resolving to the web MainButton token model
+// (color × styleType × tokenHierarchy). Every name below is grep-confirmed to exist
+// in amity-color-tokens.ts. RN has no hover, so `pressed` reuses the web Hover slice
+// for the transparent/ghost styles (outlined/ghost/link) — where the resting surface
+// is transparent and the Hover token is the intended touch affordance.
+//
+// EXCEPTION (filled/primary): web's Main.module.css defines NO `:active`/`[data-pressed]`
+// rule for filled buttons — only `[data-hovered]` (a desktop-mouse hover). On an actual
+// press/tap the filled surface does NOT change. Reusing the Hover slice here made the
+// primary/save button shift to the lighter `primary_shade1` blue on tap, which web never
+// shows. So filled/primary `pressed` mirrors `enabled` (surface/border/text/icon all
+// unchanged on press), matching web's real active-state behaviour.
+const SLICES: Partial<Record<`${ButtonHierarchy}-${ButtonTone}`, ToneSlice>> = {
+  // Primary → Filled / Primary
+  'primary-default': {
+    enabled: {
+      surface: AmityColorToken.SurfaceMainButtonDefaultFilledPrimaryEnabled,
+      border: AmityColorToken.BorderMainButtonDefaultFilledPrimaryEnabled,
+      text: AmityColorToken.TextMainButtonDefaultFilledPrimaryEnabled,
+      icon: AmityColorToken.IconMainButtonDefaultFilledPrimaryEnabled,
+    },
+    // Filled has no web press state → keep the enabled surface on press.
+    pressed: {
+      surface: AmityColorToken.SurfaceMainButtonDefaultFilledPrimaryEnabled,
+      border: AmityColorToken.BorderMainButtonDefaultFilledPrimaryEnabled,
+      text: AmityColorToken.TextMainButtonDefaultFilledPrimaryEnabled,
+      icon: AmityColorToken.IconMainButtonDefaultFilledPrimaryEnabled,
+    },
+    disabled: {
+      surface: AmityColorToken.SurfaceMainButtonDefaultFilledPrimaryDisabled,
+      border: AmityColorToken.BorderMainButtonDefaultFilledPrimaryDisabled,
+      text: AmityColorToken.TextMainButtonDefaultFilledPrimaryDisabled,
+      icon: AmityColorToken.IconMainButtonDefaultFilledPrimaryDisabled,
+    },
+  },
+  'primary-destructive': {
+    enabled: {
+      surface: AmityColorToken.SurfaceMainButtonDestructiveFilledPrimaryEnabled,
+      border: AmityColorToken.BorderMainButtonDestructiveFilledPrimaryEnabled,
+      text: AmityColorToken.TextMainButtonDestructiveFilledPrimaryEnabled,
+      icon: AmityColorToken.IconMainButtonDestructiveFilledPrimaryEnabled,
+    },
+    // Filled has no web press state → keep the enabled surface on press.
+    pressed: {
+      surface: AmityColorToken.SurfaceMainButtonDestructiveFilledPrimaryEnabled,
+      border: AmityColorToken.BorderMainButtonDestructiveFilledPrimaryEnabled,
+      text: AmityColorToken.TextMainButtonDestructiveFilledPrimaryEnabled,
+      icon: AmityColorToken.IconMainButtonDestructiveFilledPrimaryEnabled,
+    },
+    disabled: {
+      surface:
+        AmityColorToken.SurfaceMainButtonDestructiveFilledPrimaryDisabled,
+      border: AmityColorToken.BorderMainButtonDestructiveFilledPrimaryDisabled,
+      text: AmityColorToken.TextMainButtonDestructiveFilledPrimaryDisabled,
+      icon: AmityColorToken.IconMainButtonDestructiveFilledPrimaryDisabled,
+    },
+  },
+
+  // Secondary → Outlined / Primary (transparent surface + border)
+  'secondary-default': {
+    enabled: {
+      surface: AmityColorToken.SurfaceMainButtonDefaultOutlinedPrimaryEnabled,
+      border: AmityColorToken.BorderMainButtonDefaultOutlinedPrimaryEnabled,
+      text: AmityColorToken.TextMainButtonDefaultOutlinedPrimaryEnabled,
+      icon: AmityColorToken.IconMainButtonDefaultOutlinedPrimaryEnabled,
+    },
+    pressed: {
+      surface: AmityColorToken.SurfaceMainButtonDefaultOutlinedPrimaryHover,
+      border: AmityColorToken.BorderMainButtonDefaultOutlinedPrimaryHover,
+      text: AmityColorToken.TextMainButtonDefaultOutlinedPrimaryHover,
+      icon: AmityColorToken.IconMainButtonDefaultOutlinedPrimaryHover,
+    },
+    disabled: {
+      surface: AmityColorToken.SurfaceMainButtonDefaultOutlinedPrimaryDisabled,
+      border: AmityColorToken.BorderMainButtonDefaultOutlinedPrimaryDisabled,
+      text: AmityColorToken.TextMainButtonDefaultOutlinedPrimaryDisabled,
+      icon: AmityColorToken.IconMainButtonDefaultOutlinedPrimaryDisabled,
+    },
+  },
+  'secondary-destructive': {
+    enabled: {
+      surface:
+        AmityColorToken.SurfaceMainButtonDestructiveOutlinedPrimaryEnabled,
+      border: AmityColorToken.BorderMainButtonDestructiveOutlinedPrimaryEnabled,
+      text: AmityColorToken.TextMainButtonDestructiveOutlinedPrimaryEnabled,
+      icon: AmityColorToken.IconMainButtonDestructiveOutlinedPrimaryEnabled,
+    },
+    pressed: {
+      surface: AmityColorToken.SurfaceMainButtonDestructiveOutlinedPrimaryHover,
+      border: AmityColorToken.BorderMainButtonDestructiveOutlinedPrimaryHover,
+      text: AmityColorToken.TextMainButtonDestructiveOutlinedPrimaryHover,
+      icon: AmityColorToken.IconMainButtonDestructiveOutlinedPrimaryHover,
+    },
+    disabled: {
+      surface:
+        AmityColorToken.SurfaceMainButtonDestructiveOutlinedPrimaryDisabled,
+      border:
+        AmityColorToken.BorderMainButtonDestructiveOutlinedPrimaryDisabled,
+      text: AmityColorToken.TextMainButtonDestructiveOutlinedPrimaryDisabled,
+      icon: AmityColorToken.IconMainButtonDestructiveOutlinedPrimaryDisabled,
+    },
+  },
+  // Secondary / Inverse → Inverse / Primary (extension)
+  'secondary-inverse': {
+    enabled: {
+      surface: AmityColorToken.SurfaceMainButtonDefaultInversePrimaryEnabled,
+      border: AmityColorToken.BorderMainButtonDefaultInversePrimaryEnabled,
+      text: AmityColorToken.TextMainButtonDefaultInversePrimaryEnabled,
+      icon: AmityColorToken.IconMainButtonDefaultInversePrimaryEnabled,
+    },
+    pressed: {
+      surface: AmityColorToken.SurfaceMainButtonDefaultInversePrimaryHover,
+      border: AmityColorToken.BorderMainButtonDefaultInversePrimaryHover,
+      text: AmityColorToken.TextMainButtonDefaultInversePrimaryHover,
+      icon: AmityColorToken.IconMainButtonDefaultInversePrimaryHover,
+    },
+    disabled: {
+      surface: AmityColorToken.SurfaceMainButtonDefaultInversePrimaryDisabled,
+      border: AmityColorToken.BorderMainButtonDefaultInversePrimaryDisabled,
+      text: AmityColorToken.TextMainButtonDefaultInversePrimaryDisabled,
+      icon: AmityColorToken.IconMainButtonDefaultInversePrimaryDisabled,
+    },
+  },
+
+  // Tertiary → Ghost / Primary (no resting surface/border; surface only on press)
+  'tertiary-default': {
+    enabled: {
+      text: AmityColorToken.TextMainButtonDefaultGhostPrimaryEnabled,
+      icon: AmityColorToken.IconMainButtonDefaultGhostPrimaryEnabled,
+    },
+    pressed: {
+      surface: AmityColorToken.SurfaceMainButtonDefaultGhostPrimaryHover,
+      border: AmityColorToken.BorderMainButtonDefaultGhostPrimaryHover,
+      text: AmityColorToken.TextMainButtonDefaultGhostPrimaryHover,
+      icon: AmityColorToken.IconMainButtonDefaultGhostPrimaryHover,
+    },
+    disabled: {
+      text: AmityColorToken.TextMainButtonDefaultGhostPrimaryDisabled,
+      icon: AmityColorToken.IconMainButtonDefaultGhostPrimaryDisabled,
+    },
+  },
+  'tertiary-destructive': {
+    enabled: {
+      text: AmityColorToken.TextMainButtonDestructiveGhostPrimaryEnabled,
+      icon: AmityColorToken.IconMainButtonDestructiveGhostPrimaryEnabled,
+    },
+    pressed: {
+      surface: AmityColorToken.SurfaceMainButtonDestructiveGhostPrimaryHover,
+      border: AmityColorToken.BorderMainButtonDestructiveGhostPrimaryHover,
+      text: AmityColorToken.TextMainButtonDestructiveGhostPrimaryHover,
+      icon: AmityColorToken.IconMainButtonDestructiveGhostPrimaryHover,
+    },
+    disabled: {
+      text: AmityColorToken.TextMainButtonDestructiveGhostPrimaryDisabled,
+      icon: AmityColorToken.IconMainButtonDestructiveGhostPrimaryDisabled,
+    },
+  },
+  // Tertiary / Brand → Link / Primary (brand-colored text; ghost geometry) (extension)
+  'tertiary-brand': {
+    enabled: {
+      text: AmityColorToken.TextMainButtonDefaultLinkPrimaryEnabled,
+      icon: AmityColorToken.IconMainButtonDefaultLinkPrimaryEnabled,
+    },
+    pressed: {
+      text: AmityColorToken.TextMainButtonDefaultLinkPrimaryHover,
+      icon: AmityColorToken.IconMainButtonDefaultLinkPrimaryHover,
+    },
+    disabled: {
+      text: AmityColorToken.TextMainButtonDefaultLinkPrimaryDisabled,
+      icon: AmityColorToken.IconMainButtonDefaultLinkPrimaryDisabled,
+    },
+  },
+  // Tertiary / Subtle → Ghost / Secondary (muted text) (extension)
+  'tertiary-subtle': {
+    enabled: {
+      text: AmityColorToken.TextMainButtonDefaultGhostSecondaryEnabled,
+      icon: AmityColorToken.IconMainButtonDefaultGhostSecondaryEnabled,
+    },
+    pressed: {
+      surface: AmityColorToken.SurfaceMainButtonDefaultGhostSecondaryHover,
+      border: AmityColorToken.BorderMainButtonDefaultGhostSecondaryHover,
+      text: AmityColorToken.TextMainButtonDefaultGhostSecondaryHover,
+      icon: AmityColorToken.IconMainButtonDefaultGhostSecondaryHover,
+    },
+    disabled: {
+      text: AmityColorToken.TextMainButtonDefaultGhostSecondaryDisabled,
+      icon: AmityColorToken.IconMainButtonDefaultGhostSecondaryDisabled,
+    },
+  },
+  // Note: tertiary-inverse has no clean token (Inverse styleType is filled-surface,
+  // the tertiary/inverse spec is transparent text-only) — deferred. Falls back to
+  // tertiary-default below.
+};
+
+export type ResolvedState = {
+  backgroundColor: string;
+  borderColor: string;
+  textColor: string;
+  iconColor: string;
+};
+
+export type ButtonPalette = Record<ButtonVisualState, ResolvedState>;
+
+export const useStyles = (
+  hierarchy: ButtonHierarchy,
+  tone: ButtonTone,
+  size: ButtonSize,
+  iconOnly: boolean,
+  fullWidth: boolean
+) => {
+  const token = useToken();
+  const g = GEOMETRY[size];
+
+  const slice =
+    SLICES[`${hierarchy}-${tone}`] ??
+    SLICES[`${hierarchy}-default`] ??
+    SLICES['primary-default']!;
+
+  const resolveState = (state: ButtonVisualState): ResolvedState => {
+    const s = slice[state];
+    return {
+      backgroundColor: s.surface ? token(s.surface) : 'transparent',
+      borderColor: s.border ? token(s.border) : 'transparent',
+      textColor: token(s.text),
+      iconColor: token(s.icon),
+    };
+  };
+
+  const palette: ButtonPalette = {
+    enabled: resolveState('enabled'),
+    pressed: resolveState('pressed'),
+    disabled: resolveState('disabled'),
+  };
+
+  const paddingH = hierarchy === 'tertiary' ? g.paddingHTertiary : g.paddingH;
+
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: g.gap,
+      height: g.height,
+      borderRadius: g.radius,
+      borderWidth: BORDER_WIDTH,
+      paddingVertical: g.paddingV,
+      paddingHorizontal: iconOnly ? g.paddingV : paddingH,
+      width: iconOnly ? g.height : fullWidth ? '100%' : undefined,
+      alignSelf: fullWidth && !iconOnly ? 'stretch' : 'flex-start',
+    },
+    label: {
+      fontSize: g.fontSize,
+      lineHeight: g.lineHeight,
+      fontWeight: FONT_WEIGHT,
+    },
+  });
+
+  return { styles, palette, iconGlyph: ICON_GLYPH };
+};

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

@@ -0,0 +1,37 @@
+// Divider atom — ported from AmityUiKitWeb core/design/atoms/Divider.
+// Hairline separator (1px, from SoT divider geometry), variant-tinted via a line token.
+
+import { View, Text } from 'react-native';
+import { useStyles } from './styles';
+
+export type DividerVariant = 'content' | 'post';
+export type DividerOrientation = 'horizontal' | 'vertical';
+
+export type DividerProps = {
+  variant?: DividerVariant;
+  orientation?: DividerOrientation;
+  inset?: boolean;
+  label?: string;
+};
+
+export function Divider({
+  variant = 'post',
+  orientation = 'horizontal',
+  inset,
+  label,
+}: DividerProps) {
+  const resolvedInset = inset ?? variant === 'content';
+  const { styles } = useStyles(variant, orientation, resolvedInset);
+
+  if (label) {
+    return (
+      <View style={styles.labeled} accessibilityRole="none">
+        <View style={styles.line} />
+        <Text style={styles.label}>{label}</Text>
+        <View style={styles.line} />
+      </View>
+    );
+  }
+
+  return <View style={styles.divider} accessibilityRole="none" />;
+}

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

@@ -0,0 +1,6 @@
+export { Divider } from './Divider';
+export type {
+  DividerProps,
+  DividerVariant,
+  DividerOrientation,
+} from './Divider';

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

@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+import type { DividerOrientation, DividerVariant } from './Divider';
+
+// Hairline thickness = 1 (SoT geometry.divider.types[].thickness). Label font 13px (web 0.8125rem).
+export const useStyles = (
+  variant: DividerVariant,
+  orientation: DividerOrientation,
+  inset: boolean
+) => {
+  const token = useToken();
+  const lineColor = token(
+    variant === 'content'
+      ? AmityColorToken.LineDividerContentDefault
+      : AmityColorToken.LineDividerPostDefault
+  );
+
+  const bar =
+    orientation === 'horizontal'
+      ? {
+          height: 1,
+          width: inset ? ('auto' as const) : ('100%' as const),
+          marginHorizontal: inset ? 16 : 0,
+        }
+      : {
+          width: 1,
+          height: inset ? ('auto' as const) : ('100%' as const),
+          marginVertical: inset ? 16 : 0,
+        };
+
+  const styles = StyleSheet.create({
+    divider: { backgroundColor: lineColor, ...bar },
+    labeled: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    line: { flex: 1, height: 1, backgroundColor: lineColor },
+    label: {
+      flexShrink: 0,
+      fontSize: 13,
+      color: token(AmityColorToken.TextDividerDefault),
+    },
+  });
+
+  return { styles };
+};

package/src/core/design/atoms/Input/Boxed/Boxed.tsx

@@ -0,0 +1,97 @@
+// Boxed input atom — ported from AmityUiKitWeb core/design/atoms/Input/Boxed.
+// A filled container field (pill / square / rounded) with optional leading and
+// trailing icons. Web's :focus-within cascade becomes explicit focus state.
+
+import { useState, type ReactNode } from 'react';
+import { TextInput, View } from 'react-native';
+import {
+  useStyles,
+  type BoxedSize,
+  type BoxedState,
+  type BoxedVariant,
+} from './styles';
+
+export type { BoxedSize, BoxedVariant } from './styles';
+
+export type BoxedProps = {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+  size?: BoxedSize;
+  variant?: BoxedVariant;
+  maxLength?: number;
+  multiline?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onSubmit?: (value: string) => void;
+  accessibilityLabel?: string;
+};
+
+export function Boxed({
+  value,
+  onChange,
+  placeholder,
+  leadingIcon,
+  trailingIcon,
+  size = 'medium',
+  variant = 'pill',
+  maxLength,
+  multiline = false,
+  isDisabled = false,
+  isInvalid = false,
+  onFocus,
+  onBlur,
+  onSubmit,
+  accessibilityLabel,
+}: BoxedProps) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const state: BoxedState = isDisabled
+    ? 'disabled'
+    : isInvalid
+    ? 'invalid'
+    : isFocused
+    ? 'focused'
+    : 'enabled';
+
+  const { styles, placeholderColor, cursorColor } = useStyles({
+    state,
+    size,
+    variant,
+    filled: !!value,
+    multiline,
+  });
+
+  return (
+    <View style={styles.boxed}>
+      {leadingIcon ? <View style={styles.icon}>{leadingIcon}</View> : null}
+      <TextInput
+        style={styles.input}
+        value={value}
+        onChangeText={onChange}
+        placeholder={placeholder}
+        placeholderTextColor={placeholderColor}
+        selectionColor={cursorColor}
+        cursorColor={cursorColor}
+        maxLength={maxLength}
+        multiline={multiline}
+        editable={!isDisabled}
+        accessibilityLabel={accessibilityLabel}
+        onFocus={() => {
+          setIsFocused(true);
+          onFocus?.();
+        }}
+        onBlur={() => {
+          setIsFocused(false);
+          onBlur?.();
+        }}
+        onSubmitEditing={() => onSubmit?.(value ?? '')}
+      />
+      {trailingIcon ? <View style={styles.icon}>{trailingIcon}</View> : null}
+    </View>
+  );
+}

package/src/core/design/atoms/Input/Boxed/index.ts

@@ -0,0 +1,2 @@
+export { Boxed } from './Boxed';
+export type { BoxedProps, BoxedSize, BoxedVariant } from './Boxed';

package/src/core/design/atoms/Input/Boxed/styles.ts

@@ -0,0 +1,103 @@
+import { StyleSheet } from 'react-native';
+import { useToken, type ColorTokenRef } from '../../../theme/useToken';
+import { AmityColorToken } from '../../../tokens/amity-color-tokens';
+
+export type BoxedSize = 'medium' | 'small';
+export type BoxedVariant = 'pill' | 'square' | 'rounded';
+export type BoxedState = 'enabled' | 'focused' | 'invalid' | 'disabled';
+
+// Boxed reuses the TextInput placeholder tokens but has no highlight modifier —
+// only base / filled per state. Precedence: disabled > invalid > focused > enabled.
+const PLACEHOLDER: Record<
+  BoxedState,
+  { base: ColorTokenRef; filled: ColorTokenRef }
+> = {
+  enabled: {
+    base: AmityColorToken.TextInputTextInputPlaceholderEnabled,
+    filled: AmityColorToken.TextInputTextInputPlaceholderEnabledFilled,
+  },
+  focused: {
+    base: AmityColorToken.TextInputTextInputPlaceholderFocused,
+    filled: AmityColorToken.TextInputTextInputPlaceholderFocusedFilled,
+  },
+  invalid: {
+    base: AmityColorToken.TextInputTextInputPlaceholderError,
+    filled: AmityColorToken.TextInputTextInputPlaceholderErrorFilled,
+  },
+  disabled: {
+    base: AmityColorToken.TextInputTextInputPlaceholderDisabled,
+    filled: AmityColorToken.TextInputTextInputPlaceholderDisabledFilled,
+  },
+};
+
+// Geometry (SoT: Boxed.module.css, rem × 16).
+const SIZE = {
+  medium: { gap: 12, minHeight: 56, paddingV: 8, paddingH: 16 },
+  small: { gap: 8, minHeight: 40, paddingV: 10, paddingH: 12 },
+} as const;
+
+const RADIUS: Record<BoxedVariant, number> = {
+  pill: 9999,
+  square: 8,
+  rounded: 24,
+};
+
+type UseStylesArgs = {
+  state: BoxedState;
+  size: BoxedSize;
+  variant: BoxedVariant;
+  filled: boolean;
+  multiline: boolean;
+};
+
+export const useStyles = ({
+  state,
+  size,
+  variant,
+  filled,
+  multiline,
+}: UseStylesArgs) => {
+  const token = useToken();
+
+  const slice = PLACEHOLDER[state];
+  const textColor = token(filled ? slice.filled : slice.base);
+  const g = SIZE[size];
+
+  const styles = StyleSheet.create({
+    boxed: {
+      flexDirection: 'row',
+      alignItems: multiline ? 'flex-start' : 'center',
+      gap: g.gap,
+      width: '100%',
+      minHeight: g.minHeight,
+      paddingVertical: g.paddingV,
+      paddingHorizontal: g.paddingH,
+      borderRadius: RADIUS[variant],
+      borderWidth: 1,
+      borderColor:
+        state === 'invalid'
+          ? token(AmityColorToken.BorderInputBoxedInputError)
+          : 'transparent',
+      backgroundColor: token(AmityColorToken.SurfaceInputBoxedInputDefault),
+    },
+    icon: {
+      width: 20,
+      height: 20,
+      flexShrink: 0,
+    },
+    input: {
+      flex: 1,
+      minWidth: 0,
+      padding: 0,
+      fontSize: 16,
+      color: textColor,
+    },
+  });
+
+  return {
+    styles,
+    token,
+    placeholderColor: textColor,
+    cursorColor: token(AmityColorToken.TextInputTextInputTextCursorDefault),
+  };
+};