@himakarinv/nativex 1.0.0

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,217 @@
+import { useEffect, useState } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, button as buttonTokens, colors, radius, shadows, spacing, typography } from '../../theme';
+import { HintError } from '../HintError';
+import { Label } from '../Label';
+
+export const TextareaVariant = {
+  Default: 'default',
+  Danger: 'danger',
+} as const;
+
+export type TextareaVariant = (typeof TextareaVariant)[keyof typeof TextareaVariant];
+
+export type TextareaProps = {
+  label?: string;
+  required?: boolean;
+  placeholder?: string;
+  hint?: string;
+  variant?: TextareaVariant;
+  disabled?: boolean;
+  value?: string;
+  id?: string;
+  rows?: number;
+  maxLength?: number;
+  accessibilityLabel?: string;
+  onValueChange?: (value: string) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const isNative = Platform.OS !== 'web';
+const FIELD_WIDTH = isNative ? 230 : 320;
+const FIELD_HEIGHT = isNative
+  ? buttonTokens.height.xl + buttonTokens.height.lg
+  : spacing['7xl'] + spacing['7xl'] + spacing['6xl'];
+
+function webFocusChrome(isDanger: boolean): ViewStyle {
+  const ring = isDanger ? colors.danger.light : colors.textarea.focusShadow;
+  return {
+    boxShadow: `0 0 0 ${borders.width.thick}px ${ring}, 0 ${shadows.boxLight.offsetY}px ${shadows.boxLight.radius}px ${colors.textarea.shadow}`,
+  } as ViewStyle;
+}
+
+function nativeRingStyle(color: string): ViewStyle {
+  return {
+    position: 'absolute',
+    top: -borders.width.thick,
+    right: -borders.width.thick,
+    bottom: -borders.width.thick,
+    left: -borders.width.thick,
+    borderRadius: radius.md + borders.width.thick,
+    borderWidth: borders.width.thick,
+    borderColor: color,
+    zIndex: 0,
+  };
+}
+
+export function Textarea({
+  label = '',
+  required = false,
+  placeholder = '',
+  hint = '',
+  variant = TextareaVariant.Default,
+  disabled = false,
+  value,
+  id,
+  rows = 4,
+  maxLength,
+  accessibilityLabel,
+  onValueChange,
+  style,
+}: TextareaProps) {
+  const [internalValue, setInternalValue] = useState(value ?? '');
+  const [focused, setFocused] = useState(false);
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  const isDanger = variant === TextareaVariant.Danger;
+  const fieldBorder = focused
+    ? isDanger
+      ? colors.danger.medium
+      : colors.focus
+    : isDanger
+      ? colors.textarea.dangerBorder
+      : colors.input.border;
+  const fieldBackground = disabled
+    ? isDanger
+      ? colors.danger.lightest
+      : colors.gray.lightest
+    : colors.textarea.background;
+
+  const setText = (next: string) => {
+    setInternalValue(next);
+    onValueChange?.(next);
+  };
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      <Label text={label} required={required} />
+
+      <View style={styles.fieldHost}>
+        {focused && isNative ? (
+          <View
+            pointerEvents="none"
+            style={nativeRingStyle(isDanger ? colors.danger.light : colors.textarea.focusShadow)}
+          />
+        ) : null}
+
+        <View
+          style={[
+            styles.fieldShell,
+            { borderColor: fieldBorder, backgroundColor: fieldBackground },
+            focused && !isNative && webFocusChrome(isDanger),
+          ]}>
+          <TextInput
+            nativeID={id}
+            value={internalValue}
+            onChangeText={setText}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            placeholder={placeholder}
+            placeholderTextColor={colors.textarea.placeholder}
+            editable={!disabled}
+            multiline
+            numberOfLines={rows}
+            maxLength={maxLength}
+            textAlignVertical="top"
+            accessibilityLabel={accessibilityLabel || label}
+            cursorColor={colors.focus}
+            selectionColor={colors.focus}
+            underlineColorAndroid="transparent"
+            style={[styles.input, Platform.OS === 'web' ? webInputReset : null]}
+          />
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <View style={styles.hintSlot}>
+          <HintError hint={isDanger ? undefined : hint} error={isDanger ? hint : undefined} />
+        </View>
+        {maxLength ? (
+          <Text style={styles.charCount}>
+            {internalValue.length}/{maxLength}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const webInputReset = {
+  outlineStyle: 'solid',
+  outlineWidth: borders.width.none,
+  outlineColor: colors.transparent,
+} as TextStyle;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: FIELD_WIDTH,
+    flexDirection: 'column',
+  },
+  fieldHost: {
+    position: 'relative',
+    width: FIELD_WIDTH,
+    overflow: 'visible',
+  },
+  fieldShell: {
+    position: 'relative',
+    width: FIELD_WIDTH,
+    height: FIELD_HEIGHT,
+    borderWidth: borders.width.thin,
+    borderRadius: radius.md,
+    backgroundColor: colors.textarea.background,
+    zIndex: 1,
+    overflow: 'hidden',
+  },
+  input: {
+    width: '100%',
+    height: '100%',
+    paddingVertical: buttonTokens.paddingY.xl,
+    paddingHorizontal: spacing.base + spacing.xs,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.normal,
+    color: colors.textarea.text,
+    fontFamily: typography.fontFamily.base,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  hintSlot: {
+    flex: 1,
+    minWidth: spacing.none,
+  },
+  charCount: {
+    marginTop: spacing.sm + spacing.xs,
+    marginLeft: spacing.md,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.tight,
+    color: colors.textarea.label,
+    fontFamily: typography.fontFamily.base,
+  },
+});

package/src/components/Textarea/index.ts

@@ -0,0 +1,2 @@
+export { Textarea, TextareaVariant } from './Textarea';
+export type { TextareaProps } from './Textarea';

package/src/components/Timepicker/Timepicker.tsx

@@ -0,0 +1,384 @@
+import { useEffect, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { borders, colors, radius, spacing, typography } from '../../theme';
+import { Label } from '../Label';
+
+export const TimepickerSize = {
+  Small: 'small',
+  Medium: 'medium',
+  Large: 'large',
+} as const;
+
+export type TimepickerSize = (typeof TimepickerSize)[keyof typeof TimepickerSize];
+
+export type TimepickerTime = {
+  hour: number;
+  minute: number;
+  second: number;
+};
+
+export type TimepickerProps = {
+  time?: TimepickerTime | null;
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  meridian?: boolean;
+  seconds?: boolean;
+  readonlyInputs?: boolean;
+  hourStep?: number;
+  minuteStep?: number;
+  secondStep?: number;
+  size?: TimepickerSize;
+  onTimeChange?: (time: TimepickerTime) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+type FieldKey = 'hour' | 'minute' | 'second';
+
+const UNIT = {
+  [TimepickerSize.Small]: {
+    width: spacing['7xl'],
+    height: spacing['4xl'],
+    fontSize: typography.fontSize.sm,
+    spacer: spacing.base,
+    meridianPad: spacing.sm,
+  },
+  [TimepickerSize.Medium]: {
+    width: spacing['7xl'] + spacing.sm,
+    height: spacing['5xl'],
+    fontSize: typography.fontSize.sm,
+    spacer: spacing.base,
+    meridianPad: spacing.md,
+  },
+  [TimepickerSize.Large]: {
+    width: spacing['7xl'] + spacing.base,
+    height: spacing['6xl'],
+    fontSize: typography.fontSize.base,
+    spacer: spacing.lg,
+    meridianPad: spacing.base,
+  },
+} as const;
+
+function pad2(value: number) {
+  return String(value).padStart(2, '0');
+}
+
+function onlyDigits(text: string) {
+  return text.replace(/\D/g, '').slice(0, 2);
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function applyStep(value: number, step: number, max: number) {
+  const safeStep = step > 0 ? step : 1;
+  return clamp(Math.round(value / safeStep) * safeStep, 0, max);
+}
+
+function normalizeTime(time: TimepickerTime | null | undefined): TimepickerTime {
+  if (!time) {
+    return { hour: 0, minute: 0, second: 0 };
+  }
+  return {
+    hour: clamp(time.hour, 0, 23),
+    minute: clamp(time.minute, 0, 59),
+    second: clamp(time.second ?? 0, 0, 59),
+  };
+}
+
+function displayHour(hour: number, meridian: boolean) {
+  if (!meridian) {
+    return hour;
+  }
+  const hour12 = hour % 12;
+  return hour12 === 0 ? 12 : hour12;
+}
+
+function fromDisplayHour(value: number, meridian: boolean, isPm: boolean) {
+  if (!meridian) {
+    return clamp(value, 0, 23);
+  }
+  const hour12 = clamp(value, 1, 12);
+  if (hour12 === 12) {
+    return isPm ? 12 : 0;
+  }
+  return isPm ? hour12 + 12 : hour12;
+}
+
+function unitFocusRing(focused: boolean): ViewStyle | undefined {
+  if (!focused) {
+    return undefined;
+  }
+  return {
+    boxShadow: `0 0 0 ${borders.focusRing.width}px ${colors.timepicker.focus}`,
+  } as ViewStyle;
+}
+
+export function Timepicker({
+  time,
+  label = '',
+  required = false,
+  disabled = false,
+  meridian = false,
+  seconds = false,
+  readonlyInputs = false,
+  hourStep = 1,
+  minuteStep = 1,
+  secondStep = 1,
+  size = TimepickerSize.Medium,
+  onTimeChange,
+  style,
+}: TimepickerProps) {
+  const [value, setValue] = useState<TimepickerTime>(() => normalizeTime(time));
+  const [focusedField, setFocusedField] = useState<FieldKey | null>(null);
+  const [hourText, setHourText] = useState(() => pad2(displayHour(normalizeTime(time).hour, meridian)));
+  const [minuteText, setMinuteText] = useState(() => pad2(normalizeTime(time).minute));
+  const [secondText, setSecondText] = useState(() => pad2(normalizeTime(time).second));
+  const [meridianHovered, setMeridianHovered] = useState(false);
+  const inputsLocked = disabled || readonlyInputs;
+  const isPm = value.hour >= 12;
+  const tokens = UNIT[size];
+
+  const syncTexts = (next: TimepickerTime, nextMeridian = meridian) => {
+    setHourText(pad2(displayHour(next.hour, nextMeridian)));
+    setMinuteText(pad2(next.minute));
+    setSecondText(pad2(next.second));
+  };
+
+  useEffect(() => {
+    const next = normalizeTime(time);
+    setValue(next);
+    if (!focusedField) {
+      syncTexts(next);
+    }
+  }, [time?.hour, time?.minute, time?.second, meridian]);
+
+  const commit = (next: TimepickerTime) => {
+    setValue(next);
+    onTimeChange?.({ ...next });
+  };
+
+  const parseField = (field: FieldKey, text: string) => {
+    const digits = onlyDigits(text);
+    if (field === 'hour') {
+      setHourText(digits);
+    } else if (field === 'minute') {
+      setMinuteText(digits);
+    } else {
+      setSecondText(digits);
+    }
+    if (!digits) {
+      return;
+    }
+    const parsed = Number(digits);
+    if (!Number.isFinite(parsed)) {
+      return;
+    }
+    if (field === 'hour') {
+      commit({ ...value, hour: fromDisplayHour(parsed, meridian, isPm) });
+      return;
+    }
+    if (field === 'minute') {
+      commit({ ...value, minute: clamp(parsed, 0, 59) });
+      return;
+    }
+    commit({ ...value, second: clamp(parsed, 0, 59) });
+  };
+
+  const blurField = () => {
+    setFocusedField(null);
+    const next = {
+      hour: applyStep(value.hour, hourStep, 23),
+      minute: applyStep(value.minute, minuteStep, 59),
+      second: applyStep(value.second, secondStep, 59),
+    };
+    commit(next);
+    syncTexts(next);
+  };
+
+  const toggleMeridian = () => {
+    if (disabled) {
+      return;
+    }
+    const next = { ...value, hour: (value.hour + 12) % 24 };
+    commit(next);
+    syncTexts(next);
+  };
+
+  const renderUnit = (field: FieldKey, fieldValue: string, fieldLabel: string, placeholder: string) => {
+    const focused = focusedField === field;
+    return (
+      <View
+        style={[
+          styles.unitBox,
+          {
+            width: tokens.width,
+            height: tokens.height,
+          },
+          focused && styles.unitBoxFocused,
+          focused && unitFocusRing(focused),
+          disabled && styles.unitBoxDisabled,
+        ]}>
+        <TextInput
+          value={fieldValue}
+          placeholder={placeholder}
+          placeholderTextColor={colors.timepicker.placeholder}
+          editable={!inputsLocked}
+          keyboardType="number-pad"
+          inputMode="numeric"
+          maxLength={2}
+          selectTextOnFocus
+          autoCorrect={false}
+          autoCapitalize="none"
+          accessibilityLabel={fieldLabel}
+          underlineColorAndroid="transparent"
+          cursorColor={colors.primary.base}
+          selectionColor={colors.timepicker.focus}
+          onFocus={() => setFocusedField(field)}
+          onBlur={blurField}
+          onChangeText={(next) => parseField(field, next)}
+          style={[
+            styles.unitInput,
+            { fontSize: tokens.fontSize },
+            disabled && styles.unitInputDisabled,
+          ]}
+        />
+      </View>
+    );
+  };
+
+  const renderSpacer = (text: string) => (
+    <Text style={[styles.spacer, { width: tokens.spacer, fontSize: tokens.fontSize, lineHeight: tokens.height }]}>
+      {text}
+    </Text>
+  );
+
+  return (
+    <View style={[styles.host, style]}>
+      {label ? <Label text={label} required={required} /> : null}
+      <View style={styles.control}>
+        {renderUnit('hour', hourText, 'Hours', 'HH')}
+        {renderSpacer(':')}
+        {renderUnit('minute', minuteText, 'Minutes', 'MM')}
+        {seconds ? (
+          <>
+            {renderSpacer(':')}
+            {renderUnit('second', secondText, 'Seconds', 'SS')}
+          </>
+        ) : null}
+        {meridian ? (
+          <>
+            {renderSpacer('')}
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Toggle AM PM"
+              accessibilityState={{ disabled }}
+              disabled={disabled}
+              onHoverIn={() => setMeridianHovered(true)}
+              onHoverOut={() => setMeridianHovered(false)}
+              onPress={toggleMeridian}
+              style={({ pressed }) => [
+                styles.meridian,
+                {
+                  height: tokens.height,
+                  minWidth: tokens.width + tokens.meridianPad,
+                  paddingHorizontal: tokens.meridianPad,
+                },
+                !disabled && (pressed || meridianHovered) && styles.meridianActive,
+                disabled && styles.meridianDisabled,
+              ]}>
+              {({ pressed }) => (
+                <Text
+                  style={[
+                    styles.meridianText,
+                    { fontSize: tokens.fontSize },
+                    !disabled && (pressed || meridianHovered) && styles.meridianTextActive,
+                    disabled && styles.meridianTextDisabled,
+                  ]}>
+                  {isPm ? 'PM' : 'AM'}
+                </Text>
+              )}
+            </Pressable>
+          </>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    alignSelf: 'center',
+    alignItems: 'flex-start',
+    gap: spacing.xs,
+    maxWidth: '100%',
+  },
+  control: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+  },
+  unitBox: {
+    justifyContent: 'center',
+    backgroundColor: colors.timepicker.background,
+    borderWidth: borders.width.thin,
+    borderColor: colors.timepicker.border,
+    borderRadius: radius.md,
+  },
+  unitBoxFocused: {
+    borderColor: colors.primary.base,
+  },
+  unitBoxDisabled: {
+    backgroundColor: colors.timepicker.disabledBackground,
+    borderColor: colors.timepicker.disabled,
+  },
+  unitInput: {
+    ...StyleSheet.absoluteFillObject,
+    paddingHorizontal: spacing.none,
+    paddingVertical: spacing.none,
+    margin: spacing.none,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    color: colors.timepicker.text,
+    fontFamily: typography.fontFamily.base,
+    fontWeight: typography.fontWeight.regular,
+    includeFontPadding: false,
+  },
+  unitInputDisabled: {
+    color: colors.timepicker.disabledText,
+  },
+  spacer: {
+    color: colors.text.muted,
+    textAlign: 'center',
+    fontFamily: typography.fontFamily.base,
+    fontWeight: typography.fontWeight.regular,
+  },
+  meridian: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.timepicker.background,
+    borderWidth: borders.width.thin,
+    borderColor: colors.primary.base,
+    borderRadius: radius.md,
+  },
+  meridianActive: {
+    backgroundColor: colors.primary.base,
+    borderColor: colors.primary.base,
+  },
+  meridianText: {
+    color: colors.primary.base,
+    fontFamily: typography.fontFamily.base,
+    fontWeight: typography.fontWeight.regular,
+  },
+  meridianTextActive: {
+    color: colors.timepicker.background,
+  },
+  meridianDisabled: {
+    opacity: 0.55,
+  },
+  meridianTextDisabled: {
+    color: colors.primary.base,
+  },
+});

package/src/components/Timepicker/index.ts

@@ -0,0 +1,2 @@
+export { Timepicker, TimepickerSize } from './Timepicker';
+export type { TimepickerProps, TimepickerTime } from './Timepicker';