@medway-ui/native 1.8.1 → 1.9.0

package/src/components/Input.tsx

@@ -2,6 +2,7 @@ import {
   useState,
   useCallback,
   useEffect,
+  useRef,
   cloneElement,
   type ReactElement,
   type ReactNode,
@@ -11,6 +12,8 @@ import {
   View,
   TextInput,
   Pressable,
+  StyleSheet,
+  type LayoutChangeEvent,
   type TextInputProps,
   type ViewProps,
 } from "react-native";
@@ -20,6 +23,7 @@ import Animated, {
   withTiming,
   interpolate,
   Easing,
+  type SharedValue,
 } from "react-native-reanimated";
 import { cva, type VariantProps } from "class-variance-authority";
 import {
@@ -80,6 +84,10 @@ export interface InputLabelProps {
   children?: ReactNode;
   floated?: boolean;
   disabled?: boolean;
+  invalid?: boolean;
+  size?: VariantProps<typeof inputVariants>["size"];
+  hasStartIcon?: boolean;
+  hasEndIcon?: boolean;
 }
 
 export interface InputTextProps extends TextComponentProps {
@@ -92,6 +100,10 @@ const INPUT_ICON_STROKE_WIDTH = 1.6;
 const CHEVRON_SIZE_LG = 10;
 const CHEVRON_SIZE_MD = 8;
 
+const LABELED_INPUT_HEIGHT_CLASS = { lg: "h-14", md: "h-11" } as const;
+const LABEL_FONT_SIZE = { lg: 16, md: 14 } as const;
+const FLOATED_LABEL_FONT_SIZE = 12;
+
 const inputVariants = cva(
   "w-full rounded-md border-2 border-gray-stroke-muted bg-surface-card px-4 text-gray-foreground",
   {
@@ -130,42 +142,112 @@ function InputField({ className, ...props }: ViewProps) {
   return <View className={cn("relative", className)} {...props} />;
 }
 
-function FloatingLabel({ children, floated = false, disabled = false }: InputLabelProps) {
+// `left-4`/`right-4` and `left-12`/`right-12` in FloatingLabel, in rem.
+const LABEL_INSET_REM = 1;
+const LABEL_ICON_INSET_REM = 3;
+
+// Reanimated views drop `className` (see Skeleton), so the classes stay on plain views.
+function FloatingLabelBackground({ progress }: { progress: SharedValue<number> }) {
+  const style = useAnimatedStyle(() => ({ opacity: progress.value }));
+
+  return (
+    <Animated.View style={[StyleSheet.absoluteFill, style]}>
+      <View className="absolute -inset-x-1 inset-y-0 rounded-sm bg-surface-card" />
+    </Animated.View>
+  );
+}
+
+function FloatingLabel({
+  children,
+  floated = false,
+  disabled = false,
+  invalid = false,
+  size,
+  hasStartIcon = false,
+  hasEndIcon = false,
+}: InputLabelProps) {
+  const resolvedSize = size ?? "lg";
   const progress = useSharedValue(floated ? 1 : 0);
+  const metrics = useSharedValue({ restWidth: 0, floatedWidth: 0, floatedX: 0, floatedY: 0 });
+  const lastFloated = useRef(floated);
+  const floatedScale = FLOATED_LABEL_FONT_SIZE / LABEL_FONT_SIZE[resolvedSize];
 
   useEffect(() => {
+    if (lastFloated.current === floated) return;
+    lastFloated.current = floated;
     progress.value = withTiming(floated ? 1 : 0, { duration: 200, easing: Easing.out(Easing.ease) });
-  }, [floated]);
+  }, [floated, progress]);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { x, width, height } = event.nativeEvent.layout;
+    const rem = x / (hasStartIcon ? LABEL_ICON_INSET_REM : LABEL_INSET_REM);
+    const inset = rem * LABEL_INSET_REM;
+    const fieldWidth = x + width + rem * (hasEndIcon ? LABEL_ICON_INSET_REM : LABEL_INSET_REM);
+    metrics.value = {
+      restWidth: width,
+      floatedWidth: fieldWidth - inset * 2,
+      floatedX: inset - x,
+      floatedY: -height / 2,
+    };
+  };
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: interpolate(progress.value, [0, 1], [-6, -22]) }],
-    fontSize: interpolate(progress.value, [0, 1], [15, 12]),
-  }));
+  // Older React Native ignores `transformOrigin`, so it scales around the center
+  // and `translateX` makes up for the width lost on the left.
+  const labelStyle = useAnimatedStyle(() => {
+    const { restWidth, floatedWidth, floatedX, floatedY } = metrics.value;
+    const scale = interpolate(progress.value, [0, 1], [1, floatedScale]);
+    const width = interpolate(progress.value, [0, 1], [restWidth, floatedWidth / floatedScale]);
+
+    return {
+      opacity: restWidth > 0 ? 1 : 0,
+      width,
+      transform: [
+        { translateX: interpolate(progress.value, [0, 1], [0, floatedX]) - (width * (1 - scale)) / 2 },
+        { translateY: interpolate(progress.value, [0, 1], [0, floatedY]) },
+        { scale },
+      ],
+    };
+  });
 
   return (
-    <Animated.Text
-      style={[
-        animatedStyle,
-        {
-          position: "absolute",
-          left: 16,
-          top: "50%",
-          zIndex: 10,
-          fontFamily: fontFamilyMedium,
-        },
-      ]}
+    <View
+      pointerEvents="none"
+      importantForAccessibility="no-hide-descendants"
+      accessibilityElementsHidden
+      onLayout={handleLayout}
       className={cn(
-        "font-medium",
-        disabled ? "text-gray-foreground-muted" : "text-gray-foreground"
+        "absolute inset-y-0 z-10",
+        hasStartIcon ? "left-12" : "left-4",
+        hasEndIcon ? "right-12" : "right-4"
       )}
     >
-      {children}
-    </Animated.Text>
+      <Animated.View
+        style={[{ flex: 1, justifyContent: "center", alignItems: "flex-start" }, labelStyle]}
+      >
+        <View className="max-w-full">
+          {!disabled && <FloatingLabelBackground progress={progress} />}
+          <Text
+            numberOfLines={1}
+            className={cn(
+              floated ? "font-medium" : "font-normal",
+              resolvedSize === "md" ? "text-sm" : "text-md",
+              disabled
+                ? "text-gray-foreground-muted"
+                : invalid
+                  ? "text-feedback-error-foreground"
+                  : "text-gray-foreground"
+            )}
+          >
+            {children}
+          </Text>
+        </View>
+      </Animated.View>
+    </View>
   );
 }
 
-function InputLabel({ children, floated = false, disabled = false }: InputLabelProps) {
-  return <FloatingLabel floated={floated} disabled={disabled}>{children}</FloatingLabel>;
+function InputLabel(props: InputLabelProps) {
+  return <FloatingLabel {...props} />;
 }
 
 function InputText({ invalid = false, className, ...props }: InputTextProps) {
@@ -265,11 +347,23 @@ function InputPassword({
         )}
       </InputStartIcon>
       <View className="relative flex-1">
-        {label && <InputLabel floated={isFloated} disabled={props.editable === false}>{label}</InputLabel>}
+        {label && (
+          <InputLabel
+            floated={isFloated}
+            disabled={props.editable === false}
+            invalid={invalid}
+            size={size}
+            hasStartIcon
+            hasEndIcon
+          >
+            {label}
+          </InputLabel>
+        )}
         <TextInput
           secureTextEntry={!visible}
           className={cn(
             inputVariants({ size, invalid, focused, disabled: props.editable === false }),
+            label ? LABELED_INPUT_HEIGHT_CLASS[size ?? "lg"] : "",
             "pl-12 pr-12 font-medium",
             className
           )}
@@ -277,6 +371,7 @@ function InputPassword({
           defaultValue={defaultValue}
           accessibilityLabel={label}
           {...props}
+          placeholderTextColor={label ? "transparent" : props.placeholderTextColor}
           onFocus={handleFocus}
           onBlur={handleBlur}
           onChangeText={handleChangeText}
@@ -348,7 +443,18 @@ function InputNumeric({
         </InputStartIcon>
       )}
       <View className="relative flex-1">
-        {label && <InputLabel floated={isFloated} disabled={!editable}>{label}</InputLabel>}
+        {label && (
+          <InputLabel
+            floated={isFloated}
+            disabled={!editable}
+            invalid={invalid}
+            size={size}
+            hasStartIcon={!!iconLeft}
+            hasEndIcon
+          >
+            {label}
+          </InputLabel>
+        )}
         <TextInput
           keyboardType={allowNegative ? "numbers-and-punctuation" : "numeric"}
           value={displayValue}
@@ -362,12 +468,14 @@ function InputNumeric({
           editable={editable}
           className={cn(
             inputVariants({ size, invalid, focused, disabled: !editable }),
+            label ? LABELED_INPUT_HEIGHT_CLASS[size ?? "lg"] : "",
             iconLeft ? "pl-12" : "",
             "pr-12 font-medium",
             className
           )}
           accessibilityLabel={label}
           {...props}
+          placeholderTextColor={label ? "transparent" : props.placeholderTextColor}
           onFocus={handleFocus}
           onBlur={handleBlur}
           style={[{ fontFamily: fontFamilyMedium }, props.style]}
@@ -459,7 +567,18 @@ function InputTextual({
         </InputStartIcon>
       )}
       <View className="relative flex-1">
-        {label && <InputLabel floated={isFloated} disabled={!editable}>{label}</InputLabel>}
+        {label && (
+          <InputLabel
+            floated={isFloated}
+            disabled={!editable}
+            invalid={invalid}
+            size={size}
+            hasStartIcon={!!resolvedIconLeft}
+            hasEndIcon={!!resolvedIconRight}
+          >
+            {label}
+          </InputLabel>
+        )}
         <TextInput
           keyboardType={type === "email" ? "email-address" : "default"}
           value={value}
@@ -467,6 +586,7 @@ function InputTextual({
           editable={editable}
           className={cn(
             inputVariants({ size, invalid, focused, disabled: !editable }),
+            label ? LABELED_INPUT_HEIGHT_CLASS[size ?? "lg"] : "",
             resolvedIconLeft ? "pl-12" : "",
             resolvedIconRight ? "pr-12" : "",
             "font-medium",
@@ -474,6 +594,7 @@ function InputTextual({
           )}
           accessibilityLabel={label}
           {...props}
+          placeholderTextColor={label ? "transparent" : props.placeholderTextColor}
           onFocus={handleFocus}
           onBlur={handleBlur}
           onChangeText={handleChangeText}

package/src/components/Switch.tsx

@@ -9,7 +9,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
-import { StyleSheet, type ViewStyle } from "react-native";
+import { StyleSheet, type StyleProp, type ViewStyle } from "react-native";
 import { cssInterop } from "nativewind";
 import * as SwitchPrimitive from "@rn-primitives/switch";
 import Animated, {
@@ -115,9 +115,10 @@ const switchVariants = cva("shrink-0", {
 interface SwitchProps
   extends Omit<
       SwitchPrimitive.RootProps,
-      "checked" | "onCheckedChange" | "children"
+      "checked" | "onCheckedChange" | "children" | "style"
     >,
     VariantProps<typeof switchVariants> {
+  style?: StyleProp<ViewStyle>;
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
@@ -333,10 +334,9 @@ const Switch = memo(function Switch({
         switchVariants({ size: resolvedSize, variant }),
         className
       )}
-      style={(state) => [
-        baseRootStyle,
-        typeof style === "function" ? style(state) : style,
-      ]}
+      // Not a function: with a `className`, NativeWind spreads `style` into an
+      // object, and a function spreads to nothing.
+      style={[baseRootStyle, style]}
     >
       <Animated.View
         pointerEvents="none"