@medway-ui/native 1.6.1 → 1.7.0

package/src/components/Input.tsx

@@ -32,6 +32,7 @@ import {
 } from "@medway-ui/icons/native";
 import { Text, type TextComponentProps } from "@/components/Text";
 import { useThemeColor } from "@/hooks/useThemeColor";
+import { useTrackedText } from "@/hooks/useTrackedText";
 import { fontFamilyMedium } from "@/lib/typography";
 import { cn } from "@/lib/utils";
 
@@ -72,6 +73,9 @@ export interface InputNumericProps
   label?: string;
 }
 
+type FocusHandler = TextInputProps["onFocus"];
+type BlurHandler = TextInputProps["onBlur"];
+
 export interface InputLabelProps {
   children?: ReactNode;
   floated?: boolean;
@@ -213,11 +217,38 @@ function applyInputIconSize(
   });
 }
 
-function InputPassword({ className, size = "lg", invalid = false, label, ...props }: InputPasswordProps) {
-  const [visible, setVisible] = useState(false);
+function useInputFocus(onFocus?: FocusHandler, onBlur?: BlurHandler) {
   const [focused, setFocused] = useState(false);
-  const hasValue = Boolean(props.value || props.defaultValue);
-  const isFloated = focused || hasValue;
+
+  const handleFocus: NonNullable<FocusHandler> = (event) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+
+  const handleBlur: NonNullable<BlurHandler> = (event) => {
+    setFocused(false);
+    onBlur?.(event);
+  };
+
+  return { focused, handleFocus, handleBlur };
+}
+
+function InputPassword({
+  className,
+  size = "lg",
+  invalid = false,
+  label,
+  value,
+  defaultValue,
+  onFocus,
+  onBlur,
+  onChangeText,
+  ...props
+}: InputPasswordProps) {
+  const [visible, setVisible] = useState(false);
+  const { focused, handleFocus, handleBlur } = useInputFocus(onFocus, onBlur);
+  const { text, handleChangeText } = useTrackedText(value, defaultValue, onChangeText);
+  const isFloated = focused || text !== "";
   const iconColor = useThemeColor("gray-foreground");
   const iconSize = size === "md" ? INPUT_ICON_SIZE_MD : INPUT_ICON_SIZE_LG;
 
@@ -242,10 +273,13 @@ function InputPassword({ className, size = "lg", invalid = false, label, ...prop
             "pl-12 pr-12 font-medium",
             className
           )}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
+          value={value}
+          defaultValue={defaultValue}
           accessibilityLabel={label}
           {...props}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChangeText={handleChangeText}
           style={[{ fontFamily: fontFamilyMedium }, props.style]}
         />
       </View>
@@ -253,7 +287,9 @@ function InputPassword({ className, size = "lg", invalid = false, label, ...prop
         <Pressable
           onPress={() => setVisible((v) => !v)}
           disabled={props.editable === false}
-          accessibilityLabel={visible ? "Hide password" : "Show password"}
+          accessibilityRole="button"
+          accessibilityLabel={visible ? "Ocultar senha" : "Mostrar senha"}
+          hitSlop={10}
         >
           {iconColor && (visible ? (
             <Hide width={iconSize} height={iconSize} strokeWidth={INPUT_ICON_STROKE_WIDTH} color={iconColor} />
@@ -278,26 +314,28 @@ function InputNumeric({
   editable = true,
   allowNegative = false,
   label,
+  onFocus,
+  onBlur,
   ...props
 }: InputNumericProps) {
   const [internalValue, setInternalValue] = useState(String(defaultValue ?? ""));
   const isControlled = value !== undefined;
   const displayValue = isControlled ? String(value ?? "") : internalValue;
-  const [focused, setFocused] = useState(false);
+  const { focused, handleFocus, handleBlur } = useInputFocus(onFocus, onBlur);
   const isFloated = focused || displayValue !== "";
   const iconColor = useThemeColor("gray-foreground");
 
   const numericValue = parseFloat(displayValue.replace(",", ".")) || 0;
+  const lowerBound = Math.max(min ?? -Infinity, allowNegative ? -Infinity : 0);
 
   const handleStep = useCallback(
     (delta: number) => {
-      let next = numericValue + delta;
-      if (min !== undefined && next < min) next = min;
+      const next = Math.max(numericValue + delta, lowerBound);
       const nextStr = String(next);
       if (!isControlled) setInternalValue(nextStr);
       onChangeText?.(nextStr);
     },
-    [numericValue, min, isControlled, onChangeText]
+    [numericValue, lowerBound, isControlled, onChangeText]
   );
 
   const chevronSize = size === "md" ? CHEVRON_SIZE_MD : CHEVRON_SIZE_LG;
@@ -322,8 +360,6 @@ function InputNumeric({
             onChangeText?.(cleaned);
           }}
           editable={editable}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
           className={cn(
             inputVariants({ size, invalid, focused, disabled: !editable }),
             iconLeft ? "pl-12" : "",
@@ -332,6 +368,8 @@ function InputNumeric({
           )}
           accessibilityLabel={label}
           {...props}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
           style={[{ fontFamily: fontFamilyMedium }, props.style]}
         />
       </View>
@@ -341,7 +379,9 @@ function InputNumeric({
             disabled={!editable}
             onPress={() => handleStep(1)}
             className="items-center justify-center p-1"
-            accessibilityLabel="Increase value"
+            accessibilityRole="button"
+            accessibilityLabel="Aumentar valor"
+            hitSlop={{ top: 12, bottom: 4, left: 16, right: 16 }}
           >
             {iconColor && (
               <ChevronDown
@@ -357,7 +397,9 @@ function InputNumeric({
             disabled={!editable}
             onPress={() => handleStep(-1)}
             className="items-center justify-center p-1"
-            accessibilityLabel="Decrease value"
+            accessibilityRole="button"
+            accessibilityLabel="Diminuir valor"
+            hitSlop={{ top: 4, bottom: 12, left: 16, right: 16 }}
           >
             {iconColor && (
               <ChevronDown width={chevronSize} height={chevronSize} strokeWidth={3} color={iconColor} />
@@ -369,7 +411,7 @@ function InputNumeric({
   );
 }
 
-function Input({
+function InputTextual({
   className,
   type = "text",
   size = "lg",
@@ -380,45 +422,17 @@ function Input({
   value,
   defaultValue,
   editable = true,
+  onFocus,
+  onBlur,
+  onChangeText,
   ...props
 }: InputProps) {
-  const [focused, setFocused] = useState(false);
-  const hasValue = Boolean(value || defaultValue);
-  const isFloated = focused || hasValue;
+  const { focused, handleFocus, handleBlur } = useInputFocus(onFocus, onBlur);
+  const { text, handleChangeText } = useTrackedText(value, defaultValue, onChangeText);
+  const isFloated = focused || text !== "";
   const iconColor = useThemeColor("gray-foreground");
   const errorIconColor = useThemeColor("feedback-error-foreground");
 
-  if (type === "numeric") {
-    return (
-      <InputNumeric
-        className={className}
-        size={size}
-        invalid={invalid}
-        iconLeft={iconLeft}
-        value={value as string}
-        defaultValue={defaultValue as string}
-        editable={editable}
-        label={label}
-        {...props}
-      />
-    );
-  }
-
-  if (type === "password") {
-    return (
-      <InputPassword
-        className={className}
-        size={size}
-        invalid={invalid}
-        value={value as string}
-        defaultValue={defaultValue as string}
-        editable={editable}
-        label={label}
-        {...props}
-      />
-    );
-  }
-
   const iconSize = size === "md" ? INPUT_ICON_SIZE_MD : INPUT_ICON_SIZE_LG;
   const defaultIconLeft =
     type === "email" && iconColor ? (
@@ -448,11 +462,9 @@ function Input({
         {label && <InputLabel floated={isFloated} disabled={!editable}>{label}</InputLabel>}
         <TextInput
           keyboardType={type === "email" ? "email-address" : "default"}
-          value={value as string}
-          defaultValue={defaultValue as string}
+          value={value}
+          defaultValue={defaultValue}
           editable={editable}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
           className={cn(
             inputVariants({ size, invalid, focused, disabled: !editable }),
             resolvedIconLeft ? "pl-12" : "",
@@ -462,6 +474,9 @@ function Input({
           )}
           accessibilityLabel={label}
           {...props}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChangeText={handleChangeText}
           style={[{ fontFamily: fontFamilyMedium }, props.style]}
         />
       </View>
@@ -474,6 +489,79 @@ function Input({
   );
 }
 
+function Input({
+  className,
+  type = "text",
+  size = "lg",
+  invalid = false,
+  iconLeft,
+  iconRight,
+  label,
+  value,
+  defaultValue,
+  editable = true,
+  onFocus,
+  onBlur,
+  onChangeText,
+  ...props
+}: InputProps) {
+  if (type === "numeric") {
+    return (
+      <InputNumeric
+        className={className}
+        size={size}
+        invalid={invalid}
+        iconLeft={iconLeft}
+        value={value}
+        defaultValue={defaultValue}
+        editable={editable}
+        label={label}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onChangeText={onChangeText}
+        {...props}
+      />
+    );
+  }
+
+  if (type === "password") {
+    return (
+      <InputPassword
+        className={className}
+        size={size}
+        invalid={invalid}
+        value={value}
+        defaultValue={defaultValue}
+        editable={editable}
+        label={label}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onChangeText={onChangeText}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <InputTextual
+      className={className}
+      type={type}
+      size={size}
+      invalid={invalid}
+      iconLeft={iconLeft}
+      iconRight={iconRight}
+      label={label}
+      value={value}
+      defaultValue={defaultValue}
+      editable={editable}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onChangeText={onChangeText}
+      {...props}
+    />
+  );
+}
+
 export {
   Input,
   InputAdornment,

package/src/components/InvitePopover.tsx

@@ -8,6 +8,7 @@ import { CloseMd } from "@medway-ui/icons/native";
 import { Button } from "@/components/Button";
 import { Input } from "@/components/Input";
 import { Separator } from "@/components/Separator";
+import { useThemeColor } from "@/hooks/useThemeColor";
 import { cn } from "@/lib/utils";
 
 interface InvitePopoverProps extends PopoverPrimitive.RootProps {
@@ -87,17 +88,20 @@ function InvitePopoverContent({
 }
 
 function InvitePopoverClose({ className, ...props }: PopoverPrimitive.CloseProps) {
+  const closeIconColor = useThemeColor("primary-foreground-onfill");
+
   return (
     <PopoverPrimitive.Close
       className={cn(
         "mb-4 size-12 items-center justify-center self-end rounded-pill bg-primary-background-fill active:bg-primary-background-fill-emphasis",
         className
       )}
+      accessibilityRole="button"
       accessibilityLabel="Fechar"
       {...props}
     >
       <View className="size-6">
-        <CloseMd width={24} height={24} color="#FFFFFF" strokeWidth={2.2} />
+        <CloseMd width={24} height={24} color={closeIconColor} strokeWidth={2.2} />
       </View>
     </PopoverPrimitive.Close>
   );

package/src/components/MemberRow.tsx

@@ -13,7 +13,7 @@ const rankIndicatorVariants = cva("size-[22px] rounded-full", {
     rank: {
       1: "bg-yellow-background-fill",
       2: "bg-gray-background-fill",
-      3: "bg-warning-background-fill",
+      3: "bg-bronze-background-fill",
     },
   },
   defaultVariants: {
@@ -95,16 +95,14 @@ function MemberRow({
 }: MemberRowProps) {
   const initials = avatarFallback ?? getInitials(name);
 
-  if (variant === "selectable") {
-    const selectionValue = (props as MemberRowSelectableProps).value;
-
+  if (variant === "selectable" && value !== undefined) {
     return (
       <View
         className={cn(memberRowVariants({ variant, highlighted }), className)}
         {...props}
       >
         <View className="min-w-0 flex-1 flex-row items-center gap-4">
-          <RadioGroupItem value={selectionValue} size="md" />
+          <RadioGroupItem value={value} size="md" />
           <View className="min-w-0 flex-1 flex-row items-center gap-2">
             <Avatar size="sm" alt={avatarAlt ?? name}>
               {avatarSrc ? <AvatarImage src={avatarSrc} /> : null}

package/src/components/PostForm.tsx

@@ -1,4 +1,4 @@
-import { type ReactElement, type ReactNode } from "react";
+import { useState, type ReactElement, type ReactNode } from "react";
 import { Pressable, TextInput, View, type PressableProps, type TextInputProps, type ViewProps } from "react-native";
 
 import { Text } from "@/components/Text";
@@ -6,6 +6,7 @@ import { Text } from "@/components/Text";
 import { Button } from "@/components/Button";
 import { Checkbox } from "@/components/Checkbox";
 import { Input, InputText, inputVariants } from "@/components/Input";
+import { useTrackedText } from "@/hooks/useTrackedText";
 import { cn } from "@/lib/utils";
 
 interface PostFormProps extends ViewProps {
@@ -124,7 +125,7 @@ function PostFormDescription({
   editable = true,
   ...props
 }: PostFormDescriptionProps) {
-  const currentLength = (value ?? defaultValue ?? "").length;
+  const { text, handleChangeText } = useTrackedText(value, defaultValue, onChangeText);
 
   return (
     <View className={cn("gap-1", className)}>
@@ -134,7 +135,7 @@ function PostFormDescription({
         maxLength={maxLength}
         value={value}
         defaultValue={defaultValue}
-        onChangeText={onChangeText}
+        onChangeText={handleChangeText}
         placeholder={placeholder}
         editable={editable}
         className={cn(
@@ -151,7 +152,7 @@ function PostFormDescription({
         style={[{ fontFamily: "MontserratMedium" }, props.style]}
       />
       <InputText className="text-right text-xs font-medium text-gray-foreground">
-        {currentLength} / {maxLength}
+        {text.length} / {maxLength}
       </InputText>
     </View>
   );
@@ -196,11 +197,18 @@ function PostFormCheckboxOption({
   disabled,
   ...props
 }: PostFormCheckboxOptionProps) {
-  const isChecked = checked ?? defaultChecked ?? false;
+  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+  const isControlled = checked !== undefined;
+  const isChecked = isControlled ? checked : internalChecked;
+
+  const handleCheckedChange = (nextChecked: boolean) => {
+    if (!isControlled) setInternalChecked(nextChecked);
+    onCheckedChange?.(nextChecked);
+  };
 
   const toggle = () => {
     if (disabled) return;
-    onCheckedChange?.(!isChecked);
+    handleCheckedChange(!isChecked);
   };
 
   return (
@@ -210,9 +218,8 @@ function PostFormCheckboxOption({
     >
       <Checkbox
         size="lg"
-        checked={checked}
-        defaultChecked={defaultChecked}
-        onCheckedChange={onCheckedChange}
+        checked={isChecked}
+        onCheckedChange={handleCheckedChange}
         disabled={disabled}
       />
       <Pressable

package/src/components/PrizeCollection.tsx

@@ -37,7 +37,7 @@ interface PrizeItemProps extends ViewProps {
 const rankColors: Record<1 | 2 | 3, string> = {
   1: "bg-yellow-background-fill",
   2: "bg-gray-background-fill",
-  3: "bg-warning-background-fill",
+  3: "bg-bronze-background-fill",
 };
 
 function PrizeCollection({

package/src/components/RadioGroup.tsx

@@ -3,6 +3,7 @@ import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
 import { cva, type VariantProps } from "class-variance-authority";
 import { type ReactNode } from "react";
 import { cn } from "@/lib/utils";
+import { getMinTouchHitSlop } from "@/lib/touch-target";
 
 interface RadioGroupItemProps
   extends RadioGroupPrimitive.ItemProps,
@@ -14,6 +15,12 @@ const INNER_DOT_SIZES: Record<"sm" | "md" | "lg", number> = {
   lg: 14,
 };
 
+const RADIO_DIMENSIONS: Record<"sm" | "md" | "lg", number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+};
+
 const radioGroupVariants = cva(
   "items-center justify-center rounded-full border-2 shrink-0 bg-surface-card border-gray-stroke-muted",
   {
@@ -46,6 +53,7 @@ function RadioGroupItem({ className, size = "md", variant, ...props }: RadioGrou
 
   return (
     <RadioGroupPrimitive.Item
+      hitSlop={getMinTouchHitSlop(RADIO_DIMENSIONS[resolvedSize])}
       className={cn(radioGroupVariants({ size, variant }), className)}
       {...props}
     >

package/src/components/Select.tsx

@@ -114,7 +114,7 @@ function SelectValue({ className, placeholder, ...props }: SelectPrimitive.Value
 function SelectContent({ className, children, ...props }: SelectPrimitive.ContentProps) {
   return (
     <SelectPrimitive.Portal>
-      <SelectPrimitive.Overlay className="absolute inset-0 bg-black/20">
+      <SelectPrimitive.Overlay className="absolute inset-0 bg-black-24">
         <SelectPrimitive.Content
           className={cn(
             "z-50 min-w-48 overflow-hidden rounded-md border border-gray-stroke-muted bg-surface-elevated shadow-lg",

package/src/components/Sheet.tsx

@@ -68,7 +68,7 @@ function SheetContainer({
   return (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className={cn("absolute inset-0 bg-black/50", overlayClassName)}
+        className={cn("absolute inset-0 bg-black-48", overlayClassName)}
       />
       <DialogPrimitive.Content
         className={cn(overlayPositionMap[side])}
@@ -84,6 +84,9 @@ function SheetContainer({
           {children}
           {showCloseButton && (
             <DialogPrimitive.Close
+              accessibilityRole="button"
+              accessibilityLabel="Fechar"
+              hitSlop={8}
               className={cn(
                 closeButtonPositionMap[side],
                 "rounded-pill p-1.5 active:bg-gray-background-soft"

package/src/components/Skeleton.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { type ViewProps } from "react-native";
+import { StyleSheet, View, type ViewProps } from "react-native";
 import Animated, {
   cancelAnimation,
   Easing,
@@ -16,8 +16,41 @@ interface SkeletonProps extends ViewProps {
   className?: string;
 }
 
-function Skeleton({ className, style, ...props }: SkeletonProps) {
+// `bg-*` after any variant (`dark:`, `data-[state=on]:`, `[&>*]:`), with or
+// without the important modifier (`!bg-*`).
+const BACKGROUND_CLASS = /(?:^|:)!?bg-/;
+
+/** Background classes paint the pulsing layer; the rest shape the box. */
+function splitClassName(className: string | undefined) {
+  const classes = className?.split(/\s+/).filter(Boolean) ?? [];
+
+  return {
+    box: classes.filter((name) => !BACKGROUND_CLASS.test(name)).join(" "),
+    background: classes.filter((name) => BACKGROUND_CLASS.test(name)).join(" "),
+  };
+}
+
+/** Same split for `style`: `backgroundColor` paints the pulsing layer. */
+function splitStyle(style: ViewProps["style"]) {
+  const flat = StyleSheet.flatten(style);
+  if (flat?.backgroundColor === undefined) {
+    return { box: style, background: undefined };
+  }
+
+  const { backgroundColor, ...box } = flat;
+  return { box, background: { backgroundColor } };
+}
+
+// NativeWind only maps `className` on registered components, and a Reanimated
+// view isn't one: the classes were dropped and the skeleton had no size or
+// color. Registering it doesn't help either, since NativeWind then merges the
+// classes and the animated style into one object that Reanimated reads as the
+// animated style alone. So the classes stay on plain views and only the pulse
+// runs on the Reanimated one.
+function Skeleton({ className, style, children, ...props }: SkeletonProps) {
   const shimmer = useSharedValue(0);
+  const classes = splitClassName(className);
+  const styles = splitStyle(style);
 
   useEffect(() => {
     shimmer.value = withRepeat(
@@ -33,11 +66,19 @@ function Skeleton({ className, style, ...props }: SkeletonProps) {
   }));
 
   return (
-    <Animated.View
-      style={[animatedStyle, style]}
-      className={cn("rounded-md bg-gray-150", className)}
+    <View
+      style={styles.box}
+      className={cn("overflow-hidden rounded-md", classes.box)}
       {...props}
-    />
+    >
+      <Animated.View style={[StyleSheet.absoluteFill, animatedStyle]}>
+        <View
+          style={styles.background}
+          className={cn("flex-1 bg-gray-150", classes.background)}
+        />
+      </Animated.View>
+      {children}
+    </View>
   );
 }
 

package/src/components/Switch.tsx

@@ -9,6 +9,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
+import { getMinTouchHitSlop } from "@/lib/touch-target";
 import { useThemeColor } from "@/hooks/useThemeColor";
 
 interface SwitchProps
@@ -141,6 +142,7 @@ function Switch({
       checked={isChecked}
       onCheckedChange={handleCheckedChange}
       disabled={disabled}
+      hitSlop={getMinTouchHitSlop(dimensions.width, dimensions.height)}
       style={(state) => [
         rootStyle,
         typeof style === "function" ? style(state) : style,

package/src/components/Tabs.tsx

@@ -118,10 +118,12 @@ function TabsTrigger({
   if (variant === "filter") {
     const hasLabel = typeof children === "string" && children.length > 0;
     const showLabel = isActive && hasLabel;
+    const accessibilityLabel = props.accessibilityLabel ?? (hasLabel ? children : undefined);
 
     return (
       <TabsPrimitive.Trigger asChild value={value} {...props}>
         <Pressable
+          accessibilityLabel={accessibilityLabel}
           className={cn(
             "relative min-h-12 flex-1 flex-row items-center justify-center gap-3 py-3",
             className

package/src/components/ThemedIcon.tsx

@@ -5,7 +5,7 @@ import { useThemeColor, type ThemeColorToken } from "@/hooks/useThemeColor";
 type NativeIconProps = {
   width?: number;
   height?: number;
-  color?: string;
+  color: string;
   strokeWidth?: number;
   className?: string;
 };