@himakarinv/nativex 1.0.0

package/src/components/InputField/InputField.tsx

@@ -0,0 +1,527 @@
+import { useState } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type TextInputProps,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, button as buttonTokens, colors, radius, shadows, spacing, typography } from '../../theme';
+import { Button, ButtonSize, ButtonVariant } from '../Button';
+import { HintError } from '../HintError';
+import { Icon, IconName } from '../Icon';
+import { Label } from '../Label';
+
+export const InputVariant = {
+  Default: 'default',
+  Email: 'email',
+  Card: 'card',
+  Currency: 'currency',
+  PhoneDropdown: 'phone-dropdown',
+  Addon: 'addon',
+} as const;
+
+export type InputVariant = (typeof InputVariant)[keyof typeof InputVariant];
+
+export const InputState = {
+  Default: 'default',
+  Error: 'error',
+  Help: 'help',
+} as const;
+
+export type InputState = (typeof InputState)[keyof typeof InputState];
+
+export type InputFieldProps = {
+  label?: string;
+  required?: boolean;
+  fullWidth?: boolean;
+  placeholder?: string;
+  hint?: string;
+  error?: string;
+  value?: string;
+  variant?: InputVariant;
+  state?: InputState;
+  disabled?: boolean;
+  fieldType?: 'text' | 'password';
+  readOnly?: boolean;
+  inputId?: string;
+  showPasswordToggle?: boolean;
+  suppressLabel?: boolean;
+  suppressHintError?: boolean;
+  datepickerFieldNativeLook?: boolean;
+  leftIconName?: string;
+  rightIconName?: string;
+  addonPrefix?: string;
+  inputType?: string;
+  autoComplete?: TextInputProps['autoComplete'];
+  accessibilityLabel?: string;
+  onValueChange?: (value: string) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  onKeyPress?: TextInputProps['onKeyPress'];
+  style?: StyleProp<ViewStyle>;
+};
+
+const isNative = Platform.OS !== 'web';
+const FIELD_WIDTH = isNative ? 255 : 320;
+const FIELD_HEIGHT = isNative ? buttonTokens.height.sm : buttonTokens.height.md;
+
+function fieldElevation(): ViewStyle {
+  if (Platform.OS !== 'web') {
+    return {};
+  }
+
+  return {
+    boxShadow: `0 ${shadows.boxLight.offsetY}px ${shadows.boxLight.radius}px ${colors.boxShadowLight}`,
+  } as ViewStyle;
+}
+
+function webFocusChrome(isAlert: boolean): ViewStyle {
+  return {
+    outline: `solid ${colors.focus}`,
+    boxShadow: isAlert
+      ? `0 ${shadows.boxLight.offsetY}px ${shadows.boxLight.radius}px ${colors.boxShadowLight}, 0 0 0 ${borders.width.thick}px ${colors.danger.light}`
+      : `0 ${shadows.boxLight.offsetY}px ${shadows.boxLight.radius}px ${colors.boxShadowLight}, 0 0 0 ${borders.width.thick}px ${colors.primary.background}`,
+  } as ViewStyle;
+}
+
+function nativeRingStyle(offset: number, width: number, color: string): ViewStyle {
+  const spread = offset + width;
+  return {
+    position: 'absolute',
+    top: -spread,
+    right: -spread,
+    bottom: -spread,
+    left: -spread,
+    borderRadius: radius.md + spread,
+    borderWidth: width,
+    borderColor: color,
+    zIndex: 0,
+  };
+}
+
+export function InputField({
+  label,
+  required = false,
+  fullWidth = false,
+  placeholder,
+  hint,
+  error,
+  value,
+  variant = InputVariant.Default,
+  state = InputState.Default,
+  disabled = false,
+  fieldType = 'text',
+  readOnly = false,
+  inputId,
+  showPasswordToggle = true,
+  suppressLabel = false,
+  suppressHintError = false,
+  datepickerFieldNativeLook = false,
+  leftIconName,
+  rightIconName,
+  addonPrefix,
+  inputType = 'text',
+  autoComplete,
+  accessibilityLabel,
+  onValueChange,
+  onBlur,
+  onFocus,
+  onKeyPress,
+  style,
+}: InputFieldProps) {
+  const [internalValue, setInternalValue] = useState(value ?? '');
+  const [focused, setFocused] = useState(false);
+  const [passwordVisible, setPasswordVisible] = useState(false);
+
+  const text = value !== undefined ? value : internalValue;
+  const isPassword = fieldType === 'password';
+  const showToggle = isPassword && showPasswordToggle && !readOnly;
+  const isAlert = state === InputState.Error;
+  const isHelp = state === InputState.Help;
+  const isAddon = variant === InputVariant.Addon;
+  const isCurrency = variant === InputVariant.Currency;
+  const isPhone = variant === InputVariant.PhoneDropdown;
+  const showFocusChrome = focused && !datepickerFieldNativeLook;
+
+  const effectiveLeftIcon =
+    leftIconName ||
+    (variant === InputVariant.Email ? IconName.Email : variant === InputVariant.Card ? IconName.Card : '');
+
+  const effectiveRightIcon = showToggle
+    ? ''
+    : rightIconName || (isAlert ? IconName.Alert : isHelp ? IconName.Help : '');
+
+  const resolvedType = isPassword ? (passwordVisible ? 'text' : 'password') : inputType;
+  const secure = isPassword && !passwordVisible;
+  const showLabel = !suppressLabel && Boolean(label);
+  const showAddonStatusIcon = isAddon && (isAlert || isHelp) && Boolean(effectiveRightIcon);
+  const showDefaultRightIcon = !isAddon && !showToggle && Boolean(effectiveRightIcon);
+
+  const paddingLeft = isAddon
+    ? spacing['7xl'] + spacing['5xl'] - spacing.xs
+    : isPhone
+      ? spacing['7xl'] + spacing['4xl'] - spacing.sm
+      : isCurrency
+        ? spacing['6xl']
+        : effectiveLeftIcon === IconName.Card
+          ? spacing['7xl'] + spacing.base
+          : effectiveLeftIcon
+            ? spacing['7xl']
+            : spacing.base + spacing.xs;
+
+  const paddingRight = showToggle
+    ? spacing['7xl']
+    : isCurrency && isAlert
+      ? spacing['7xl'] + spacing['7xl'] + spacing['4xl']
+      : isCurrency
+        ? spacing['6xl'] + spacing['6xl'] + spacing.base
+        : showDefaultRightIcon || showAddonStatusIcon
+          ? spacing['7xl']
+          : spacing.base + spacing.xs;
+
+  const setText = (next: string) => {
+    if (value === undefined) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  };
+
+  const fieldBorder = isAlert ? colors.danger.background : colors.input.border;
+  const keyboardType: TextInputProps['keyboardType'] =
+    resolvedType === 'email' || variant === InputVariant.Email
+      ? 'email-address'
+      : isPhone
+        ? 'phone-pad'
+        : 'default';
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        fullWidth && !datepickerFieldNativeLook && styles.fullWidth,
+        datepickerFieldNativeLook && styles.datepickerWrapper,
+        style,
+      ]}>
+      {showLabel ? <Label text={label} required={required} /> : null}
+
+      <View
+        style={[
+          styles.fieldHost,
+          (fullWidth || datepickerFieldNativeLook) && styles.fieldHostFullWidth,
+          datepickerFieldNativeLook && styles.datepickerHost,
+        ]}>
+        {showFocusChrome && isNative ? (
+          <>
+            <View
+              pointerEvents="none"
+              style={nativeRingStyle(
+                spacing.none,
+                borders.width.thick,
+                isAlert ? colors.danger.light : colors.primary.background,
+              )}
+            />
+            <View
+              pointerEvents="none"
+              style={nativeRingStyle(spacing.none, borders.focusRing.width, colors.focus)}
+            />
+          </>
+        ) : null}
+
+        <View
+          style={[
+            datepickerFieldNativeLook ? styles.datepickerShell : isAddon ? styles.addonShell : styles.fieldShell,
+            fullWidth && !datepickerFieldNativeLook && styles.fullWidth,
+            !datepickerFieldNativeLook && fieldElevation(),
+            !datepickerFieldNativeLook && {
+              borderColor: showFocusChrome && isNative ? colors.focus : fieldBorder,
+            },
+            showFocusChrome && !isNative && webFocusChrome(isAlert),
+            disabled && styles.disabled,
+          ]}>
+          {effectiveLeftIcon && !isAddon && !datepickerFieldNativeLook ? (
+            <View style={styles.leftIcon} pointerEvents="none">
+              <Icon name={effectiveLeftIcon} size={spacing.xl} decorative />
+            </View>
+          ) : null}
+
+          {isCurrency ? (
+            <Text style={styles.currencyPrefix} pointerEvents="none">
+              $
+            </Text>
+          ) : null}
+
+          {isPhone ? (
+            <View style={styles.phonePrefix} pointerEvents="none">
+              <Text style={styles.phoneCode}>US</Text>
+              <Icon name={IconName.DropdownArrow} size={spacing.base} decorative />
+            </View>
+          ) : null}
+
+          {isAddon && addonPrefix ? <Text style={styles.addonPrefix}>{addonPrefix}</Text> : null}
+          {isAddon ? <View style={styles.addonRule} pointerEvents="none" /> : null}
+
+          {showDefaultRightIcon || showAddonStatusIcon ? (
+            <View
+              style={[styles.rightIcon, isCurrency && isAlert && styles.rightIconCurrencyAlert]}
+              pointerEvents={isHelp ? 'auto' : 'none'}>
+              <Icon name={effectiveRightIcon} size={spacing.lg} decorative={isAlert} />
+            </View>
+          ) : null}
+
+          {isCurrency ? (
+            <View style={[styles.currencySuffix, isAlert && styles.currencySuffixAlert]} pointerEvents="none">
+              <Text style={styles.currencyCode}>USD</Text>
+              <Icon name={IconName.DropdownArrow} size={spacing.base} decorative />
+            </View>
+          ) : null}
+
+          {showToggle ? (
+            <View style={styles.passwordToggle}>
+              <Button
+                label=""
+                variant={ButtonVariant.LinkGray}
+                size={ButtonSize.Small}
+                disabled={disabled}
+                iconName={passwordVisible ? IconName.EyeOff : IconName.Eye}
+                iconDecorative
+                accessibilityLabel={passwordVisible ? 'Hide password' : 'Show password'}
+                onPress={() => {
+                  if (!disabled) {
+                    setPasswordVisible((visible) => !visible);
+                  }
+                }}
+              />
+            </View>
+          ) : null}
+
+          <TextInput
+            nativeID={inputId}
+            value={text}
+            onChangeText={setText}
+            onFocus={() => {
+              setFocused(true);
+              onFocus?.();
+            }}
+            onKeyPress={onKeyPress}
+            onBlur={() => {
+              setFocused(false);
+              onBlur?.();
+            }}
+            placeholder={placeholder}
+            placeholderTextColor={
+              datepickerFieldNativeLook ? colors.datepicker.fieldLabelMuted : colors.input.placeholder
+            }
+            editable={!disabled && !readOnly}
+            secureTextEntry={secure}
+            autoComplete={autoComplete}
+            accessibilityLabel={accessibilityLabel || label}
+            keyboardType={keyboardType}
+            cursorColor={colors.focus}
+            selectionColor={colors.focus}
+            underlineColorAndroid="transparent"
+            style={[
+              styles.input,
+              isAddon && styles.addonInput,
+              datepickerFieldNativeLook && styles.datepickerInput,
+              fullWidth && !datepickerFieldNativeLook && styles.fullWidth,
+              !datepickerFieldNativeLook && { paddingLeft, paddingRight },
+              Platform.OS === 'web' ? webInputReset : null,
+            ]}
+          />
+        </View>
+      </View>
+
+      {suppressHintError ? null : <HintError hint={hint} error={error} />}
+    </View>
+  );
+}
+
+const webInputReset = {
+  outlineStyle: 'solid',
+  outlineWidth: borders.width.none,
+  outlineColor: colors.transparent,
+} as TextStyle;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: FIELD_WIDTH + (borders.width.thick + borders.focusRing.width) * 2,
+    position: 'relative',
+    overflow: 'visible',
+  },
+  fullWidth: {
+    width: '100%',
+    maxWidth: '100%',
+    paddingHorizontal: borders.width.thick + borders.focusRing.width,
+  },
+  fieldHost: {
+    position: 'relative',
+    width: FIELD_WIDTH,
+    marginHorizontal: borders.width.thick + borders.focusRing.width,
+    overflow: 'visible',
+  },
+  fieldHostFullWidth: {
+    width: '100%',
+    marginHorizontal: spacing.none,
+  },
+  datepickerWrapper: {
+    width: '100%',
+    maxWidth: '100%',
+  },
+  datepickerHost: {
+    width: '100%',
+    height: FIELD_HEIGHT,
+    marginHorizontal: spacing.none,
+  },
+  fieldShell: {
+    position: 'relative',
+    width: FIELD_WIDTH,
+    height: FIELD_HEIGHT,
+    borderWidth: borders.width.thin,
+    borderRadius: radius.md,
+    backgroundColor: colors.white,
+    zIndex: 1,
+    overflow: 'visible',
+  },
+  addonShell: {
+    position: 'relative',
+    width: FIELD_WIDTH,
+    height: FIELD_HEIGHT,
+    borderWidth: borders.width.thin,
+    borderRadius: radius.md,
+    backgroundColor: colors.white,
+    overflow: 'hidden',
+    zIndex: 1,
+  },
+  datepickerShell: {
+    position: 'relative',
+    width: '100%',
+    height: FIELD_HEIGHT,
+    minWidth: spacing.none,
+    justifyContent: 'center',
+    backgroundColor: colors.transparent,
+  },
+  input: {
+    width: '100%',
+    height: FIELD_HEIGHT,
+    paddingVertical: buttonTokens.paddingY.xl,
+    fontSize: typography.fontSize.base,
+    lineHeight: typography.fontSize.base * typography.lineHeight.normal,
+    color: colors.input.text,
+    fontFamily: typography.fontFamily.base,
+  },
+  addonInput: {
+    borderWidth: borders.width.none,
+  },
+  datepickerInput: {
+    width: '100%',
+    minWidth: spacing.none,
+    height: FIELD_HEIGHT,
+    minHeight: FIELD_HEIGHT,
+    paddingVertical: spacing.none,
+    paddingHorizontal: spacing.none,
+    borderWidth: borders.width.none,
+    borderRadius: radius.none,
+    backgroundColor: colors.transparent,
+    textAlignVertical: 'center',
+  },
+  disabled: {
+    opacity: 0.7,
+  },
+  leftIcon: {
+    position: 'absolute',
+    left: spacing.base + spacing.xs,
+    top: spacing.none,
+    bottom: spacing.none,
+    justifyContent: 'center',
+    zIndex: 1,
+  },
+  rightIcon: {
+    position: 'absolute',
+    right: spacing.base + spacing.xs,
+    top: spacing.none,
+    bottom: spacing.none,
+    justifyContent: 'center',
+    zIndex: 2,
+  },
+  rightIconCurrencyAlert: {
+    right: spacing['7xl'] + spacing['6xl'],
+  },
+  passwordToggle: {
+    position: 'absolute',
+    right: buttonTokens.paddingY.xl,
+    top: spacing.none,
+    bottom: spacing.none,
+    justifyContent: 'center',
+    zIndex: 2,
+  },
+  currencyPrefix: {
+    position: 'absolute',
+    left: spacing.base + spacing.xs,
+    top: spacing.none,
+    bottom: spacing.none,
+    textAlignVertical: 'center',
+    fontSize: typography.fontSize.base,
+    lineHeight: FIELD_HEIGHT,
+    color: colors.input.placeholder,
+    zIndex: 1,
+  },
+  currencySuffix: {
+    position: 'absolute',
+    right: spacing.base + spacing.xs,
+    top: spacing.none,
+    bottom: spacing.none,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    zIndex: 1,
+  },
+  currencySuffixAlert: {
+    right: spacing['6xl'],
+  },
+  currencyCode: {
+    fontSize: typography.fontSize.base,
+    color: colors.input.text,
+  },
+  phonePrefix: {
+    position: 'absolute',
+    left: spacing.base + spacing.xs,
+    top: spacing.none,
+    bottom: spacing.none,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm + spacing.xs,
+    zIndex: 1,
+  },
+  phoneCode: {
+    fontSize: typography.fontSize.base,
+    color: colors.input.text,
+  },
+  addonPrefix: {
+    position: 'absolute',
+    left: spacing.base + spacing.xs,
+    top: spacing.none,
+    bottom: spacing.none,
+    textAlignVertical: 'center',
+    lineHeight: FIELD_HEIGHT,
+    fontSize: typography.fontSize.base,
+    color: colors.input.placeholder,
+    zIndex: 2,
+    backgroundColor: colors.white,
+    paddingRight: spacing.md,
+  },
+  addonRule: {
+    position: 'absolute',
+    left: spacing['7xl'] + spacing['2xl'],
+    top: spacing.none,
+    bottom: spacing.none,
+    width: borders.width.thin,
+    backgroundColor: colors.input.border,
+    zIndex: 1,
+  },
+});

package/src/components/InputField/index.ts

@@ -0,0 +1,2 @@
+export { InputField, InputVariant, InputState } from './InputField';
+export type { InputFieldProps } from './InputField';

package/src/components/Label/Label.tsx

@@ -0,0 +1,88 @@
+import { StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+
+import { colors, typography } from '../../theme';
+import { a11yHiddenProps } from '../../utils/a11y';
+
+export type LabelProps = {
+  text?: string;
+  supportingText?: string;
+  required?: boolean;
+  embedded?: boolean;
+  htmlFor?: string;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  supportingStyle?: StyleProp<TextStyle>;
+};
+
+function RequiredMark() {
+  return (
+    <Text style={styles.required} {...a11yHiddenProps()}>
+      *
+    </Text>
+  );
+}
+
+export function Label({
+  text,
+  supportingText,
+  required = false,
+  embedded = false,
+  htmlFor,
+  style,
+  labelStyle,
+  supportingStyle,
+}: LabelProps) {
+  const showMain = Boolean(text) && (!embedded || Boolean(htmlFor) || !htmlFor);
+  const showSupporting = Boolean(supportingText) && (!embedded || Boolean(htmlFor) || !htmlFor);
+
+  if (!showMain && !showSupporting) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[styles.host, embedded && htmlFor && styles.ghost, style]}
+      nativeID={htmlFor ? `${htmlFor}-label` : undefined}>
+      {showMain ? (
+        <Text style={[styles.label, embedded && styles.embeddedLabel, labelStyle]}>
+          {text}
+          {required ? <RequiredMark /> : null}
+        </Text>
+      ) : null}
+      {showSupporting ? <Text style={[styles.supporting, supportingStyle]}>{supportingText}</Text> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: 2,
+    minWidth: 0,
+  },
+  ghost: {
+    gap: 2,
+  },
+  label: {
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.tight,
+    color: colors.input.label,
+    marginBottom: 6,
+    fontFamily: typography.fontFamily.base,
+  },
+  embeddedLabel: {
+    marginBottom: 0,
+  },
+  required: {
+    color: colors.danger.dark,
+    fontWeight: typography.fontWeight.semibold,
+    paddingLeft: 2,
+  },
+  supporting: {
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.tight,
+    color: colors.input.label,
+    fontFamily: typography.fontFamily.base,
+  },
+});

package/src/components/Label/index.ts

@@ -0,0 +1,2 @@
+export { Label } from './Label';
+export type { LabelProps } from './Label';