@expokit/cli 0.4.4 → 0.5.0

package/registry/password-input/files/src/components/ui/floating-input.tsx

@@ -24,60 +24,60 @@ export interface FloatingInputProps extends Omit<TextInputProps, 'style' | 'plac
   /** Sits inside the field like a placeholder, then floats onto the border when focused or filled. */
   label: string;
   /** `false` puts the label above the field as static text (no notch) and shows `placeholder` inside. */
-  floatingLabel?: boolean;
+  floatingLabel?: boolean | undefined;
   /** Hint inside the empty field — only used when `floatingLabel` is false. */
-  placeholder?: string;
-  variant?: FloatingInputVariant;
+  placeholder?: string | undefined;
+  variant?: FloatingInputVariant | undefined;
   /** Error message. Turns the field red, shows it with an icon and shakes the field once when it appears. */
-  error?: string;
+  error?: string | undefined;
   /** Valid state: success border and an animated check. A string is shown as the message under the field. */
-  success?: boolean | string;
+  success?: boolean | string | undefined;
   /** Hint under the field (replaced by the error / success message while one is shown). */
-  helper?: string;
+  helper?: string | undefined;
   /** Colour of the focused border, halo and floating label (default: theme accent). */
-  accent?: string;
+  accent?: string | undefined;
   /** Background behind the field — the floating label cuts its notch with this colour. */
-  surface?: string;
-  left?: React.ReactNode;
-  right?: React.ReactNode;
+  surface?: string | undefined;
+  left?: React.ReactNode | undefined;
+  right?: React.ReactNode | undefined;
   /** Text before the value, shown once the label floats — '₹', '+91', 'https://'. */
-  prefix?: string;
+  prefix?: string | undefined;
   /** Text after the value, shown once the label floats — 'INR', 'kg', '.com'. */
-  suffix?: string;
+  suffix?: string | undefined;
   /** Show an animated clear button while there is text. */
-  clearable?: boolean;
+  clearable?: boolean | undefined;
   /** Show `length/maxLength` under the field (needs `maxLength`). */
-  counter?: boolean;
+  counter?: boolean | undefined;
   /** 'sm' 44pt / 14px · 'md' 54pt / 16px · 'lg' 64pt / 18px — type, padding and icons scale too. */
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg' | undefined;
   /** Root wrapper (the one that shakes) — margins, width, flex. */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
   /**
    * The bordered box: background, border width / colour, radius, height, padding. Applied after
    * the computed style, so it wins. A `borderColor` replaces the resting border only — focus
    * (accent), error and success colours still take over in those states. A numeric `height` /
    * `borderRadius` also re-centres the label and resizes the focus halo.
    */
-  fieldStyle?: StyleProp<ViewStyle>;
+  fieldStyle?: StyleProp<ViewStyle> | undefined;
   /** The typed text — fontSize, fontWeight, color, letterSpacing, fontFamily… */
-  inputStyle?: StyleProp<TextStyle>;
+  inputStyle?: StyleProp<TextStyle> | undefined;
   /**
    * The label, floating or above the field. Its `color` is the resting colour; focus (accent),
    * error (danger) and success colours still take over in those states. With `fontSize` the
    * floating label rests at that size and floats at the same ratio as the default, and the notch
    * follows the rendered label width.
    */
-  labelStyle?: StyleProp<TextStyle>;
+  labelStyle?: StyleProp<TextStyle> | undefined;
   /** Helper / error / success text under the field. `color` applies to the helper; error and success keep their tone colour. */
-  messageStyle?: StyleProp<TextStyle>;
+  messageStyle?: StyleProp<TextStyle> | undefined;
   /** `prefix` text. */
-  prefixStyle?: StyleProp<TextStyle>;
+  prefixStyle?: StyleProp<TextStyle> | undefined;
   /** `suffix` text. */
-  suffixStyle?: StyleProp<TextStyle>;
+  suffixStyle?: StyleProp<TextStyle> | undefined;
   /** The `length/maxLength` counter. Turns danger at the limit regardless. */
-  counterStyle?: StyleProp<TextStyle>;
+  counterStyle?: StyleProp<TextStyle> | undefined;
   /** Built-in icons at rest — the clear button (default: theme mutedForeground). */
-  iconColor?: string;
+  iconColor?: string | undefined;
 }
 
 /** Everything that scales with `size`: height, type, padding, icons and the floated label. */
@@ -169,7 +169,7 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
   },
   ref
 ) {
-  const { colors, radius, font } = useKit();
+  const { colors, radius, font, labels } = useKit();
   const reduce = useReduceMotion();
   const ff = font.family ? { fontFamily: font.family } : null;
   const S = FLOATING_INPUT_SIZES[size];
@@ -197,12 +197,12 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
   const ok = !error && !!success;
   const successText = typeof success === 'string' && ok ? success : undefined;
 
-  const float = useRef(new Animated.Value(floating ? 1 : 0)).current; // native: label + affixes
-  const glow = useRef(new Animated.Value(0)).current; // native: halo + indicator bar
-  const focus = useRef(new Animated.Value(0)).current; // JS: border / label colour
-  const shake = useRef(new Animated.Value(0)).current; // native
-  const clear = useRef(new Animated.Value(clearable && text ? 1 : 0)).current; // native
-  const check = useRef(new Animated.Value(ok ? 1 : 0)).current; // native
+  const [float] = useState(() => new Animated.Value(floating ? 1 : 0)); // native: label + affixes
+  const [glow] = useState(() => new Animated.Value(0)); // native: halo + indicator bar
+  const [focus] = useState(() => new Animated.Value(0)); // JS: border / label colour
+  const [shake] = useState(() => new Animated.Value(0)); // native
+  const [clear] = useState(() => new Animated.Value(clearable && text ? 1 : 0)); // native
+  const [check] = useState(() => new Animated.Value(ok ? 1 : 0)); // native
 
   useEffect(() => {
     if (reduce) float.setValue(floating ? 1 : 0);
@@ -400,7 +400,7 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
                 <Pressable
                   hitSlop={(44 - S.icon) / 2}
                   accessibilityRole="button"
-                  accessibilityLabel={`Clear ${label}`}
+                  accessibilityLabel={labels.clearField(label)}
                   onPress={() => {
                     setText('');
                     inputRef.current?.focus();
@@ -493,7 +493,7 @@ function FieldMessage({
   reduce: boolean;
 }) {
   const { font } = useKit();
-  const enter = useRef(new Animated.Value(tone === 'helper' ? 1 : 0)).current; // native
+  const [enter] = useState(() => new Animated.Value(tone === 'helper' ? 1 : 0)); // native
   useEffect(() => {
     if (tone === 'helper') return;
     if (reduce) Animated.timing(enter, { toValue: 1, duration: 150, useNativeDriver: true }).start();

package/registry/password-input/files/src/components/ui/password-input.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
+import React, { forwardRef, useEffect, useMemo, useState, type ComponentRef } from 'react';
 import { AccessibilityInfo, Animated, Pressable, StyleSheet, Text, View, type TextInput } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 
@@ -21,24 +21,23 @@ export const DEFAULT_PASSWORD_REQUIREMENTS: PasswordRequirement[] = [
 
 export interface PasswordInputProps extends Omit<FloatingInputProps, 'secureTextEntry' | 'right'> {
   /** Show the 4-segment strength meter under the field. */
-  strength?: boolean;
+  strength?: boolean | undefined;
   /** Replace the built-in scorer (return 0–4). */
-  score?: (password: string) => number;
+  score?: ((password: string) => number) | undefined;
   /** Checklist under the field; each row ticks itself off when met. `true` uses DEFAULT_PASSWORD_REQUIREMENTS. */
-  requirements?: PasswordRequirement[] | boolean;
+  requirements?: PasswordRequirement[] | boolean | undefined;
   /** Makes this a "confirm password" field: shows a match / mismatch message once the user types. */
-  confirmOf?: string;
+  confirmOf?: string | undefined;
   /** Message when `confirmOf` matches (default 'Passwords match'). */
-  matchMessage?: string;
+  matchMessage?: string | undefined;
   /** Message when `confirmOf` doesn't match (default "Passwords don't match"). */
-  mismatchMessage?: string;
+  mismatchMessage?: string | undefined;
 }
 
 // Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
 // content text scales all the way.
 const FONT_CAP = 1.35;
 
-const LEVEL_LABELS = ['Too short', 'Weak', 'Okay', 'Strong', 'Very strong'];
 const ICON = { sm: 18, md: 22, lg: 24 };
 
 export function scorePassword(pw: string) {
@@ -60,8 +59,8 @@ export const PasswordInput = forwardRef<ComponentRef<typeof TextInput>, Password
     score = scorePassword,
     requirements,
     confirmOf,
-    matchMessage = 'Passwords match',
-    mismatchMessage = "Passwords don't match",
+    matchMessage: matchMessageProp,
+    mismatchMessage: mismatchMessageProp,
     value,
     defaultValue,
     onChangeText,
@@ -73,7 +72,9 @@ export const PasswordInput = forwardRef<ComponentRef<typeof TextInput>, Password
   },
   ref
 ) {
-  const { colors } = useKit();
+  const { colors, labels } = useKit();
+  const matchMessage = matchMessageProp ?? labels.passwordsMatch;
+  const mismatchMessage = mismatchMessageProp ?? labels.passwordsDontMatch;
   const reduce = useReduceMotion();
   const [hidden, setHidden] = useState(true);
   const [inner, setInner] = useState(defaultValue ?? '');
@@ -87,13 +88,15 @@ export const PasswordInput = forwardRef<ComponentRef<typeof TextInput>, Password
   const mismatch =
     confirming && text.length > 0 && !matches && (text.length >= confirmOf.length || !confirmOf.startsWith(text));
 
-  const eye = useRef(new Animated.Value(hidden ? 0 : 1)).current; // native: 1 = visible
+  const [eye] = useState(() => new Animated.Value(hidden ? 0 : 1)); // native: 1 = visible
   useEffect(() => {
     if (reduce) Animated.timing(eye, { toValue: hidden ? 0 : 1, duration: 150, useNativeDriver: true }).start();
     else Animated.spring(eye, { toValue: hidden ? 0 : 1, useNativeDriver: true, ...motion.snappy }).start();
   }, [hidden, eye, reduce]);
 
   const iconColor = iconColorProp ?? colors.mutedForeground;
+  const errorText = error ?? (mismatch ? mismatchMessage : undefined);
+  const successValue = success ?? (matches ? matchMessage : undefined);
   const iconSize = ICON[size];
   const fade = (on: 0 | 1) => ({
     opacity: eye.interpolate({ inputRange: [0, 1], outputRange: on ? [0, 1] : [1, 0], extrapolate: 'clamp' }),
@@ -112,14 +115,15 @@ export const PasswordInput = forwardRef<ComponentRef<typeof TextInput>, Password
         ref={ref}
         {...props}
         size={size}
-        iconColor={iconColorProp}
+        // FloatingInput's optional props don't accept an explicit undefined (exactOptionalPropertyTypes).
+        {...(iconColorProp !== undefined ? { iconColor: iconColorProp } : null)}
         value={text}
         onChangeText={(next) => {
           if (value === undefined) setInner(next);
           onChangeText?.(next);
         }}
-        error={error ?? (mismatch ? mismatchMessage : undefined)}
-        success={success ?? (matches ? matchMessage : undefined)}
+        {...(errorText !== undefined ? { error: errorText } : null)}
+        {...(successValue !== undefined ? { success: successValue } : null)}
         secureTextEntry={hidden}
         autoCapitalize="none"
         autoCorrect={false}
@@ -128,7 +132,7 @@ export const PasswordInput = forwardRef<ComponentRef<typeof TextInput>, Password
             hitSlop={(44 - iconSize) / 2}
             onPress={() => setHidden((h) => !h)}
             accessibilityRole="button"
-            accessibilityLabel={hidden ? 'Show password' : 'Hide password'}
+            accessibilityLabel={hidden ? labels.showPassword : labels.hidePassword}
             accessibilityState={{ checked: !hidden }}
             style={{ width: iconSize, height: iconSize }}
           >
@@ -161,11 +165,11 @@ const EYE_OFF =
 
 /** Four segments that spring-fill left to right; the colour slides with the score. */
 function Meter({ level, reduce }: { level: number; reduce: boolean }) {
-  const { colors, dark, font } = useKit();
+  const { colors, dark, font, labels } = useKit();
   const palette = [colors.mutedForeground, colors.danger, colors.warning, colors.success, colors.success];
-  const fills = useRef([0, 1, 2, 3].map(() => new Animated.Value(0))).current; // native: scaleX
-  const tone = useRef(new Animated.Value(level)).current; // JS: colour
-  const enter = useRef(new Animated.Value(0)).current; // native
+  const [fills] = useState(() => [0, 1, 2, 3].map(() => new Animated.Value(0))); // native: scaleX
+  const [tone] = useState(() => new Animated.Value(level)); // JS: colour
+  const [enter] = useState(() => new Animated.Value(0)); // native
 
   useEffect(() => {
     if (reduce) enter.setValue(1);
@@ -200,7 +204,7 @@ function Meter({ level, reduce }: { level: number; reduce: boolean }) {
         },
       ]}
       accessible
-      accessibilityLabel={`Password strength: ${LEVEL_LABELS[level]}`}
+      accessibilityLabel={labels.passwordStrength(labels.passwordLevels[level] ?? '')}
     >
       <View style={styles.bars}>
         {fills.map((a, i) => (
@@ -216,7 +220,7 @@ function Meter({ level, reduce }: { level: number; reduce: boolean }) {
           </View>
         ))}
       </View>
-      <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.level, font.family ? { fontFamily: font.family } : null, { color: palette[level] }]}>{LEVEL_LABELS[level]}</Text>
+      <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.level, font.family ? { fontFamily: font.family } : null, { color: palette[level] }]}>{labels.passwordLevels[level]}</Text>
     </Animated.View>
   );
 }
@@ -232,8 +236,8 @@ function Checklist({ rules, value, reduce }: { rules: PasswordRequirement[]; val
 }
 
 function Requirement({ label, met, reduce }: { label: string; met: boolean; reduce: boolean }) {
-  const { colors, dark, font } = useKit();
-  const tick = useRef(new Animated.Value(met ? 1 : 0)).current; // native
+  const { colors, dark, font, labels } = useKit();
+  const [tick] = useState(() => new Animated.Value(met ? 1 : 0)); // native
   useEffect(() => {
     if (reduce) Animated.timing(tick, { toValue: met ? 1 : 0, duration: 150, useNativeDriver: true }).start();
     else Animated.spring(tick, { toValue: met ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
@@ -243,7 +247,7 @@ function Requirement({ label, met, reduce }: { label: string; met: boolean; redu
     <View
       style={styles.rule}
       accessible
-      accessibilityLabel={`${label}: ${met ? 'done' : 'not yet'}`}
+      accessibilityLabel={met ? labels.ruleMet(label) : labels.ruleUnmet(label)}
       accessibilityState={{ checked: met }}
     >
       <View style={styles.ruleIcon}>