@bigbinary/neetoui-rn 3.0.3 → 3.1.0

package/src/components/Header/ScreenHeader.tsx

@@ -1,7 +1,7 @@
 import { Platform, type StyleProp, type ViewStyle } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { scaleFor } from "../../utils/scale";
 import { Typography } from "../Typography";
 import { BaseHeader } from "./BaseHeader";
 
@@ -22,13 +22,20 @@ export const ScreenHeader = ({ title, style }: ScreenHeaderProps) => (
   </BaseHeader>
 );
 
-const styles = StyleSheet.create({
-  container: {
-    height: Platform.OS === "android" ? moderateScale(48) : moderateScale(42),
-  },
-  title: {
-    includeFontPadding: false,
-    textAlignVertical: "center",
-    ...(Platform.OS === "android" ? { lineHeight: moderateScale(28) } : {}),
-  },
+const styles = StyleSheet.create((_theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    container: {
+      height: Platform.OS === "android" ? moderateScale(48) : moderateScale(42),
+    },
+    title: {
+      includeFontPadding: false,
+      textAlignVertical: "center",
+      ...(Platform.OS === "android" ? { lineHeight: moderateScale(28) } : {}),
+    },
+  };
 });

package/src/components/Input/Input.tsx

@@ -1,21 +1,29 @@
-import { forwardRef, useState } from "react";
-import {
-  TextInput,
-  View,
-  type StyleProp,
-  type TextInputProps,
-  type ViewStyle,
-} from "react-native";
-import { StyleSheet } from "react-native-unistyles";
+import { forwardRef, useRef, useState } from "react";
+import Close from "@bigbinary/neeto-icons-rn/icons/Close";
+import { TextInput, type TextInputProps } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { Typography } from "../Typography";
+import { InputFrame, type InputFrameProps } from "./InputFrame";
 
-export type InputProps = Omit<TextInputProps, "editable"> & {
-  label?: string;
-  error?: string;
-  disabled?: boolean;
-  containerStyle?: StyleProp<ViewStyle>;
-};
+import { moderateScale } from "../../utils/scale";
+import { Touchable } from "../Touchable";
+
+export type InputProps = Omit<TextInputProps, "editable"> &
+  Pick<
+    InputFrameProps,
+    | "label"
+    | "error"
+    | "disabled"
+    | "isRequiredLabel"
+    | "noBorder"
+    | "containerStyle"
+    | "fieldStyle"
+  > & {
+    /** Shows a clear button inside the field whenever it holds text. */
+    isClearable?: boolean;
+    /** Called after the clear button has emptied the field. */
+    onClear?: () => void;
+  };
 
 /** Forwards its ref to the underlying TextInput, so forms can focus it. */
 export const Input = forwardRef<TextInput, InputProps>(
@@ -24,49 +32,112 @@ export const Input = forwardRef<TextInput, InputProps>(
       label,
       error,
       disabled = false,
+      isRequiredLabel = false,
+      isClearable = false,
+      noBorder = false,
+      onClear,
       containerStyle,
+      fieldStyle,
       style,
+      value,
+      defaultValue,
+      placeholder,
+      multiline = false,
       onFocus,
       onBlur,
+      onChangeText,
       ...rest
     },
     ref
   ) => {
+    const { theme } = useUnistyles();
     const [isFocused, setIsFocused] = useState(false);
 
-    styles.useVariants({ focused: isFocused, error: !!error, disabled });
+    // The clear button and the label both need to know whether the field
+    // holds text. A controlled caller answers that with `value`; an
+    // uncontrolled one has nothing to read, so its emptiness is tracked here.
+    const [hasText, setHasText] = useState(() => !!(value ?? defaultValue));
+    const isEmpty = value === undefined ? !hasText : !value;
+
+    const inputRef = useRef<TextInput | null>(null);
+    const attachRef = (node: TextInput | null) => {
+      inputRef.current = node;
+
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+
+    const handleClear = () => {
+      // clear() is what empties an uncontrolled field; a controlled one is
+      // emptied by the caller reacting to onChangeText.
+      inputRef.current?.clear();
+      setHasText(false);
+      onChangeText?.("");
+      onClear?.();
+    };
+
+    const isLabelFloating = isFocused || !isEmpty;
+
+    styles.useVariants({ disabled });
 
     return (
-      <View style={[styles.container, containerStyle]}>
-        {!!label && (
-          <Typography size="xs" style={styles.label}>
-            {label}
-          </Typography>
-        )}
+      <InputFrame
+        containerStyle={containerStyle}
+        disabled={disabled}
+        error={error}
+        fieldStyle={fieldStyle}
+        isFocused={isFocused}
+        isLabelFloating={isLabelFloating}
+        isRequiredLabel={isRequiredLabel}
+        label={label}
+        multiline={multiline}
+        noBorder={noBorder}
+        trailing={
+          isClearable && !disabled && !isEmpty ? (
+            <Touchable
+              accessibilityLabel={label ? `Clear ${label}` : "Clear"}
+              accessibilityRole="button"
+              hitSlop={moderateScale(8)}
+              onPress={handleClear}
+            >
+              <Close color={theme.colors.text.muted} size={moderateScale(18)} />
+            </Touchable>
+          ) : null
+        }
+        onPress={() => {
+          if (!inputRef.current?.isFocused()) inputRef.current?.focus();
+        }}
+      >
         <TextInput
           // Before the spread: the label is only a fallback, and setting it
           // afterwards overwrote a caller's own accessibilityLabel with
           // undefined whenever no label was passed.
           accessibilityLabel={label}
-          {...rest}
+          defaultValue={defaultValue}
           editable={!disabled}
-          ref={ref}
+          multiline={multiline}
+          placeholderTextColor={theme.colors.text.muted}
+          // A resting label already occupies the value line, so showing the
+          // placeholder there too would print the two on top of each other.
+          placeholder={label && !isLabelFloating ? undefined : placeholder}
+          {...rest}
+          ref={attachRef}
           style={[styles.input, style]}
+          value={value}
           onBlur={event => {
             setIsFocused(false);
             onBlur?.(event);
           }}
+          onChangeText={next => {
+            setHasText(!!next);
+            onChangeText?.(next);
+          }}
           onFocus={event => {
             setIsFocused(true);
             onFocus?.(event);
           }}
         />
-        {!!error && (
-          <Typography size="2xs" style={styles.error}>
-            {error}
-          </Typography>
-        )}
-      </View>
+      </InputFrame>
     );
   }
 );
@@ -74,49 +145,22 @@ export const Input = forwardRef<TextInput, InputProps>(
 Input.displayName = "Input";
 
 const styles = StyleSheet.create(theme => ({
-  container: {
-    gap: theme.spacing.xs,
-  },
-  label: {
-    color: theme.colors.text.secondary,
-    fontFamily: theme.fonts.medium,
-  },
   input: {
-    borderColor: theme.colors.border.primary,
-    borderRadius: theme.radii.md,
-    borderWidth: 1,
     color: theme.colors.text.primary,
     fontFamily: theme.fonts.regular,
-    fontSize: theme.fontSizes.s,
-    paddingHorizontal: theme.spacing.md,
-    paddingVertical: theme.spacing.sm,
+    // 17 is what v2 typed at, and it is what the resting label shrinks
+    // from: any other size makes the label jump rather than lift.
+    fontSize: theme.fontSizes.xl,
+    // Android's EditText brings its own padding, which would stack on top
+    // of the box's and make the field taller on one platform only.
+    padding: 0,
     variants: {
-      focused: {
-        true: { borderColor: theme.colors.primary },
-        false: {},
-      },
-      error: {
-        true: { borderColor: theme.colors.danger },
-        false: {},
-      },
+      // Dimmed by color, not by the frame's opacity: still legible, and it
+      // does not drag the label and border down with it.
       disabled: {
-        true: {
-          backgroundColor: theme.colors.background.secondary,
-          opacity: 0.5,
-        },
+        true: { color: theme.colors.text.muted },
         false: {},
       },
     },
-    // Error must win over focus when both are active.
-    compoundVariants: [
-      {
-        error: true,
-        focused: true,
-        styles: { borderColor: theme.colors.danger },
-      },
-    ],
-  },
-  error: {
-    color: theme.colors.danger,
   },
 }));

package/src/components/Input/InputFrame.tsx

@@ -0,0 +1,261 @@
+import { useEffect, type ReactNode } from "react";
+import {
+  Pressable,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { scaleFor } from "../../utils/scale";
+import { LINE_HEIGHT_RATIO, Typography } from "../Typography";
+
+export type InputFrameProps = {
+  label?: string;
+  error?: string;
+  disabled?: boolean;
+  /** Appends a danger-colored `*` to the label. */
+  isRequiredLabel?: boolean;
+  /**
+   * Lifts the label out of the value line and shrinks it. The caller decides
+   * because only it knows what "has a value" means: text for an Input,
+   * a selection for a picker, an open sheet for a dropdown.
+   */
+  isLabelFloating?: boolean;
+  /** Paints the focus border. */
+  isFocused?: boolean;
+  /** Drops the border, for a field already framed by its container. */
+  noBorder?: boolean;
+  /** Pins the trailing slot to the first line of a field that grows. */
+  multiline?: boolean;
+  /** The value line: a TextInput, a Typography, a row of chips. */
+  children?: ReactNode;
+  /** Icons inside the frame, after the value. */
+  trailing?: ReactNode;
+  onPress?: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Styles the bordered box itself. */
+  fieldStyle?: StyleProp<ViewStyle>;
+};
+
+const LABEL_ANIMATION_DURATION = 200;
+/** Shared by the box's padding and the label's inset, which must agree. */
+const HORIZONTAL_PADDING = 12;
+/** Shared by the box's height and the resting label, which is centred in it. */
+const LABELLED_MIN_HEIGHT = 56;
+const LABEL_FLOATING_TOP = 6;
+
+/**
+ * The bordered box with a floating label, shared by every field-shaped
+ * control. v2's Input animated its label from the value line up to the top
+ * edge; v3 replaced it with a static caption above the box, which reads as a
+ * second, smaller heading and leaves an empty field with nothing in it.
+ *
+ * Split out of Input because a picker is the same box with a different value
+ * line — a date, a chevron, a row of chips — and duplicating the animation
+ * per screen is how four controls end up nearly, but not quite, aligned.
+ */
+export const InputFrame = ({
+  label,
+  error,
+  disabled = false,
+  isRequiredLabel = false,
+  isLabelFloating = false,
+  isFocused = false,
+  noBorder = false,
+  multiline = false,
+  children,
+  trailing,
+  onPress,
+  containerStyle,
+  fieldStyle,
+}: InputFrameProps) => {
+  const { theme, rt } = useUnistyles();
+  // Read through the hook rather than the stylesheet: the worklet needs the
+  // numbers themselves, and useUnistyles re-renders on a window resize so
+  // they stay right when the window changes size.
+  const moderateScale = scaleFor(rt.screen);
+
+  const restingFontSize = theme.fontSizes.xl;
+  const floatingFontSize = theme.fontSizes.xs;
+  // Derived, not typed in: a resting label is the value line, so it has to
+  // sit on the box's centre line or the field looks top-heavy.
+  const restingTop =
+    (moderateScale(LABELLED_MIN_HEIGHT) - restingFontSize * LINE_HEIGHT_RATIO) /
+    2;
+  const floatingTop = moderateScale(LABEL_FLOATING_TOP);
+
+  // Plain object, not a sheet entry: Skeleton keeps unistyles styles off
+  // animated elements too, and these belong next to the interpolation that
+  // moves them anyway.
+  const labelStyle: TextStyle = {
+    // muted, the placeholder grey: at rest the label stands in for the value,
+    // and text.secondary is close enough to text.primary to read as one.
+    // A disabled field steps down one more, rather than the whole box fading.
+    color: disabled ? theme.colors.palette.grey400 : theme.colors.text.muted,
+    fontFamily: theme.fonts.regular,
+    includeFontPadding: false,
+    left: moderateScale(HORIZONTAL_PADDING),
+    // Positioned by the animated `top`, so it takes no part in the row.
+    position: "absolute",
+    right: moderateScale(HORIZONTAL_PADDING),
+  };
+
+  const progress = useSharedValue(isLabelFloating ? 1 : 0);
+
+  useEffect(() => {
+    progress.value = withTiming(isLabelFloating ? 1 : 0, {
+      duration: LABEL_ANIMATION_DURATION,
+    });
+  }, [isLabelFloating, progress]);
+
+  const animatedLabelStyle = useAnimatedStyle(() => {
+    const fontSize = interpolate(
+      progress.value,
+      [0, 1],
+      [restingFontSize, floatingFontSize]
+    );
+
+    return {
+      fontSize,
+      lineHeight: fontSize * LINE_HEIGHT_RATIO,
+      top: interpolate(progress.value, [0, 1], [restingTop, floatingTop]),
+    };
+  });
+
+  styles.useVariants({
+    focused: isFocused,
+    error: !!error,
+    disabled,
+    multiline,
+    noBorder,
+    hasLabel: !!label,
+  });
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <Pressable
+        disabled={disabled || !onPress}
+        style={[styles.field, fieldStyle]}
+        onPress={onPress}
+      >
+        {!!label && (
+          <Animated.Text
+            numberOfLines={1}
+            style={[labelStyle, animatedLabelStyle]}
+          >
+            {label}
+            {/* A plain Text, so it inherits the animated font size and only
+                overrides the color. */}
+            {isRequiredLabel && <Text style={styles.required}>*</Text>}
+          </Animated.Text>
+        )}
+        <View style={styles.value}>{children}</View>
+        {trailing}
+      </Pressable>
+      {!!error && (
+        <Typography size="2xs" style={styles.error}>
+          {error}
+        </Typography>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    container: {
+      gap: moderateScale(4),
+    },
+    field: {
+      alignItems: "center",
+      borderColor: theme.colors.border.primary,
+      borderRadius: moderateScale(8),
+      borderWidth: 1,
+      flexDirection: "row",
+      gap: moderateScale(8),
+      paddingHorizontal: moderateScale(HORIZONTAL_PADDING),
+      variants: {
+        // A labelled box reserves the top strip for the floated label; an
+        // unlabelled one is a plain field at the 44pt iOS HIG minimum.
+        hasLabel: {
+          true: {
+            minHeight: moderateScale(LABELLED_MIN_HEIGHT),
+            paddingBottom: moderateScale(6),
+            paddingTop: moderateScale(22),
+          },
+          false: {
+            minHeight: moderateScale(44),
+            paddingVertical: moderateScale(8),
+          },
+        },
+        focused: {
+          true: { borderColor: theme.colors.primary },
+          false: {},
+        },
+        error: {
+          true: { borderColor: theme.colors.danger },
+          false: {},
+        },
+        // No opacity: fading the container takes the value text with it, and
+        // grey-on-grey at half alpha drops under the 4.5:1 contrast floor
+        // exactly when a disabled field still has something to read. The
+        // greys are stated per element instead.
+        disabled: {
+          true: {
+            backgroundColor: theme.colors.background.secondary,
+            borderColor: theme.colors.palette.grey200,
+          },
+          false: {},
+        },
+        // A multiline field grows downward, so its trailing icon belongs at
+        // the first line rather than floating at the vertical centre.
+        multiline: {
+          true: { alignItems: "flex-start" },
+          false: {},
+        },
+        noBorder: {
+          true: { borderWidth: 0 },
+          false: {},
+        },
+      },
+      // Error must win over focus when both are active.
+      compoundVariants: [
+        {
+          error: true,
+          focused: true,
+          styles: { borderColor: theme.colors.danger },
+        },
+        // borderWidth 0 would otherwise still paint a focus/error color.
+        {
+          noBorder: true,
+          focused: true,
+          styles: { borderWidth: 0 },
+        },
+      ],
+    },
+    required: {
+      color: theme.colors.danger,
+    },
+    value: {
+      flex: 1,
+      justifyContent: "center",
+    },
+    error: {
+      color: theme.colors.danger,
+    },
+  };
+});

package/src/components/Input/index.ts

@@ -1 +1,2 @@
 export { Input, type InputProps } from "./Input";
+export { InputFrame, type InputFrameProps } from "./InputFrame";

package/src/components/NeetoUIProvider/NeetoUIProvider.tsx

@@ -24,7 +24,8 @@ export type NeetoUIProviderProps = {
  */
 export const NeetoUIProvider = ({ children }: NeetoUIProviderProps) => {
   // Idempotent fallback — the root entry already configures on import
-  // (src/unistyles-init.ts); this covers deep-import edge cases.
+  // (src/unistyles-init.ts); this covers deep-import edge cases. Passing no
+  // options keeps an app's adaptiveThemes opt-in intact.
   configureNeetoUI();
 
   return (

package/src/components/OnBoarding/OnBoarding.tsx

@@ -9,7 +9,7 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { moderateScale, scaleFor } from "../../utils/scale";
 import { Button } from "../Button";
 import { Typography } from "../Typography";
 
@@ -122,56 +122,63 @@ export const OnBoarding = ({
   );
 };
 
-const styles = StyleSheet.create(theme => ({
-  root: {
-    backgroundColor: theme.colors.background.primary,
-    flex: 1,
-  },
-  logoContainer: {
-    alignItems: "center",
-  },
-  slide: {
-    flex: 1,
-    justifyContent: "space-between",
-  },
-  illustration: {
-    alignItems: "center",
-    flex: 1,
-    justifyContent: "center",
-    marginHorizontal: moderateScale(24),
-    marginVertical: moderateScale(12),
-  },
-  slideText: {
-    alignItems: "center",
-    marginHorizontal: moderateScale(24),
-    marginVertical: moderateScale(12),
-  },
-  centered: {
-    textAlign: "center",
-  },
-  description: {
-    color: theme.colors.text.muted,
-  },
-  dots: {
-    alignItems: "center",
-    flexDirection: "row",
-    justifyContent: "center",
-    marginVertical: moderateScale(20),
-  },
-  dot: {
-    backgroundColor: theme.colors.text.primary,
-    borderRadius: moderateScale(5),
-    height: moderateScale(10),
-    marginHorizontal: moderateScale(4),
-    width: moderateScale(10),
-  },
-  inactiveDot: {
-    backgroundColor: theme.colors.palette.grey400,
-  },
-  buttonContainer: {
-    marginHorizontal: moderateScale(24),
-  },
-  buttonContainerInsetless: {
-    marginBottom: moderateScale(16),
-  },
-}));
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    root: {
+      backgroundColor: theme.colors.background.primary,
+      flex: 1,
+    },
+    logoContainer: {
+      alignItems: "center",
+    },
+    slide: {
+      flex: 1,
+      justifyContent: "space-between",
+    },
+    illustration: {
+      alignItems: "center",
+      flex: 1,
+      justifyContent: "center",
+      marginHorizontal: moderateScale(24),
+      marginVertical: moderateScale(12),
+    },
+    slideText: {
+      alignItems: "center",
+      marginHorizontal: moderateScale(24),
+      marginVertical: moderateScale(12),
+    },
+    centered: {
+      textAlign: "center",
+    },
+    description: {
+      color: theme.colors.text.muted,
+    },
+    dots: {
+      alignItems: "center",
+      flexDirection: "row",
+      justifyContent: "center",
+      marginVertical: moderateScale(20),
+    },
+    dot: {
+      backgroundColor: theme.colors.text.primary,
+      borderRadius: moderateScale(5),
+      height: moderateScale(10),
+      marginHorizontal: moderateScale(4),
+      width: moderateScale(10),
+    },
+    inactiveDot: {
+      backgroundColor: theme.colors.palette.grey400,
+    },
+    buttonContainer: {
+      marginHorizontal: moderateScale(24),
+    },
+    buttonContainerInsetless: {
+      marginBottom: moderateScale(16),
+    },
+  };
+});