@medway-ui/native 1.9.2 → 1.10.1

package/src/components/DropdownMenu.tsx

@@ -8,7 +8,18 @@ import {
   useState,
   type ReactNode,
 } from "react";
-import { Dimensions, Pressable, StyleSheet, View, type PressableProps, type ViewProps } from "react-native";
+import {
+  BackHandler,
+  Dimensions,
+  Pressable,
+  StyleSheet,
+  View,
+  type PressableProps,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
 
 import { Text } from "@/components/Text";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
@@ -21,8 +32,11 @@ interface DropdownMenuProps extends DropdownMenuPrimitive.RootProps {
   children?: ReactNode;
 }
 
-interface DropdownMenuTriggerProps extends DropdownMenuPrimitive.TriggerProps {
+interface DropdownMenuTriggerProps extends Omit<DropdownMenuPrimitive.TriggerProps, "style"> {
   children?: ReactNode;
+  style?:
+    | StyleProp<ViewStyle>
+    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
   className?: string;
 }
 
@@ -47,7 +61,7 @@ type MenuActionsContextValue = {
 
 type MenuAlign = NonNullable<DropdownMenuContentProps["align"]>;
 
-type MenuPosition = { top: number; left: number };
+type MenuPosition = { top: number; left: number; triggerTop: number; bottomLimit: number };
 
 type TriggerPosition = NonNullable<
   ReturnType<typeof DropdownMenuPrimitive.useRootContext>["triggerPosition"]
@@ -91,6 +105,13 @@ function DropdownMenu({ children, ...props }: DropdownMenuProps) {
   );
 }
 
+const TRIGGER_MIN_SIZE: ViewStyle = {
+  minWidth: 32,
+  minHeight: 32,
+  alignItems: "center",
+  justifyContent: "center",
+};
+
 const DropdownMenuTrigger = forwardRef<
   DropdownMenuPrimitive.TriggerRef,
   DropdownMenuTriggerProps
@@ -102,15 +123,11 @@ const DropdownMenuTrigger = forwardRef<
       accessibilityRole="button"
       hitSlop={6}
       className={cn("items-center justify-center", className)}
-      style={(state) => [
-        {
-          minWidth: 32,
-          minHeight: 32,
-          alignItems: "center",
-          justifyContent: "center",
-        },
-        typeof style === "function" ? style(state) : style,
-      ]}
+      style={
+        typeof style === "function"
+          ? (state: PressableStateCallbackType) => [TRIGGER_MIN_SIZE, style(state)]
+          : [TRIGGER_MIN_SIZE, style]
+      }
       {...props}
     >
       {children}
@@ -142,12 +159,22 @@ function computeMenuPosition({
   const rawLeft = triggerPosition.pageX + alignOffset[align] - hostOrigin.x;
   const maxLeft = windowWidth - hostOrigin.x - MENU_WIDTH - MENU_EDGE_GAP;
 
+  const triggerTop = triggerPosition.pageY - hostOrigin.y;
+
   return {
     left: Math.max(MENU_EDGE_GAP, Math.min(rawLeft, maxLeft)),
-    top: triggerPosition.pageY + triggerPosition.height + sideOffset - hostOrigin.y,
+    top: triggerTop + triggerPosition.height + sideOffset,
+    triggerTop,
+    bottomLimit: hostOrigin.height - MENU_EDGE_GAP,
   };
 }
 
+function resolveMenuTop(position: MenuPosition, menuHeight: number, sideOffset: number) {
+  if (position.top + menuHeight <= position.bottomLimit) return position.top;
+
+  return Math.max(MENU_EDGE_GAP, position.triggerTop - sideOffset - menuHeight);
+}
+
 function DropdownMenuContent({
   className,
   align = "end",
@@ -160,6 +187,8 @@ function DropdownMenuContent({
   const { close } = useMenuActions();
   const { open, triggerPosition } = DropdownMenuPrimitive.useRootContext();
   const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null);
+  const [menuHeight, setMenuHeight] = useState<number | null>(null);
+  const isMenuMounted = menuPosition !== null;
   const surfaceColor = useThemeColor("surface-elevated");
   const borderColor = useThemeColor("gray-stroke-muted");
   const backdropColor = useThemeColor("black-48");
@@ -167,6 +196,7 @@ function DropdownMenuContent({
   useEffect(() => {
     if (!open || !triggerPosition) {
       setMenuPosition(null);
+      setMenuHeight(null);
       return;
     }
 
@@ -208,13 +238,18 @@ function DropdownMenuContent({
             style={[
               styles.menu,
               {
-                top: menuPosition.top,
+                top:
+                  menuHeight === null
+                    ? menuPosition.top
+                    : resolveMenuTop(menuPosition, menuHeight, sideOffset),
                 left: menuPosition.left,
                 width: MENU_WIDTH,
                 backgroundColor: surfaceColor,
                 borderColor,
+                opacity: menuHeight === null ? 0 : 1,
               },
             ]}
+            onLayout={(event) => setMenuHeight(event.nativeEvent.layout.height)}
           >
             {children}
           </View>
@@ -228,12 +263,25 @@ function DropdownMenuContent({
     className,
     close,
     id,
+    menuHeight,
     menuPosition,
     overlay,
     showOverlay,
+    sideOffset,
     surfaceColor,
   ]);
 
+  useEffect(() => {
+    if (!isMenuMounted) return;
+
+    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+      close();
+      return true;
+    });
+
+    return () => subscription.remove();
+  }, [close, isMenuMounted]);
+
   useEffect(() => () => overlay.unmount(id), [id, overlay]);
 
   return null;

package/src/components/EmptyState.tsx

@@ -17,9 +17,9 @@ type EmptyStateVariant = "regular" | "emphasis" | "success" | "warning" | "error
 const ICON_BACKGROUND_BY_VARIANT: Record<EmptyStateVariant, string> = {
   regular: "bg-gray-background-soft",
   emphasis: "bg-secondary-background-soft",
-  success: "bg-green-background-soft",
-  warning: "bg-yellow-background-soft",
-  error: "bg-red-background-soft",
+  success: "bg-feedback-success-background-soft",
+  warning: "bg-feedback-warning-background-soft",
+  error: "bg-feedback-error-background-soft",
 };
 
 function EmptyState({

package/src/components/FallbackImage.tsx

@@ -1,3 +1,4 @@
+import { View } from "react-native";
 import Svg, {
   Defs,
   RadialGradient,
@@ -20,37 +21,45 @@ interface FallbackImageProps extends SvgProps {
   className?: string;
 }
 
+// react-native-svg isn't registered with NativeWind, so the classes go on a View and the Svg fills it.
 function FallbackImage({
   className,
   label = "Medway",
   ...props
 }: FallbackImageProps) {
+  const isDecorative = label === "";
+
   return (
-    <Svg
-      accessibilityRole="image"
-      accessibilityLabel={label}
-      viewBox="0 0 320 167"
-      preserveAspectRatio="xMidYMid slice"
+    <View
       className={cn("size-full", className)}
-      {...props}
+      accessibilityElementsHidden={isDecorative}
+      importantForAccessibility={isDecorative ? "no-hide-descendants" : "auto"}
     >
-      <Defs>
-        <RadialGradient
-          id={GRADIENT_ID}
-          cx="50%"
-          cy="42%"
-          r="78%"
-        >
-          <Stop offset="0%" stopColor="#15397A" />
-          <Stop offset="55%" stopColor="#06245E" />
-          <Stop offset="100%" stopColor="#021536" />
-        </RadialGradient>
-      </Defs>
-      <Rect width="320" height="167" fill={`url(#${GRADIENT_ID})`} />
-      <G transform="translate(85.5 62.7) scale(1.38)" fill="#FFFFFF">
-        <Path d={LOGO_PATH} />
-      </G>
-    </Svg>
+      <Svg
+        accessibilityRole="image"
+        accessibilityLabel={label}
+        viewBox="0 0 320 167"
+        preserveAspectRatio="xMidYMid slice"
+        {...props}
+      >
+        <Defs>
+          <RadialGradient
+            id={GRADIENT_ID}
+            cx="50%"
+            cy="42%"
+            r="78%"
+          >
+            <Stop offset="0%" stopColor="#15397A" />
+            <Stop offset="55%" stopColor="#06245E" />
+            <Stop offset="100%" stopColor="#021536" />
+          </RadialGradient>
+        </Defs>
+        <Rect width="320" height="167" fill={`url(#${GRADIENT_ID})`} />
+        <G transform="translate(85.5 62.7) scale(1.38)" fill="#FFFFFF">
+          <Path d={LOGO_PATH} />
+        </G>
+      </Svg>
+    </View>
   );
 }
 

package/src/components/Feed.tsx

@@ -5,6 +5,7 @@ import { Text } from "@/components/Text";
 
 import { InputText, inputVariants } from "@/components/Input";
 import { useTrackedText } from "@/hooks/useTrackedText";
+import { fontFamilyMedium } from "@/lib/typography";
 import { cn } from "@/lib/utils";
 
 interface FeedProps extends ViewProps {
@@ -83,7 +84,7 @@ function FeedComposer({
           )}
           accessibilityLabel={placeholder}
           {...props}
-          style={[{ fontFamily: "MontserratMedium" }, props.style]}
+          style={[{ fontFamily: fontFamilyMedium }, props.style]}
         />
       </View>
       <InputText className="text-right text-xs font-medium text-gray-foreground">

package/src/components/Feedback.tsx

@@ -78,7 +78,6 @@ function Feedback({
 
   const shouldRenderIcon = showIcon && !!icon;
 
-  // Aplica o tamanho do size ao ícone, sem sobrescrever width/height explícitos.
   const sizedIcon = isValidElement<{ width?: number; height?: number }>(icon)
     ? cloneElement(icon, {
         width: icon.props.width ?? sz.iconSize,

package/src/components/Filter.tsx

@@ -27,7 +27,7 @@ const SIZE_MAP: Record<
 > = {
   sm: { container: "gap-2 px-3 py-2", text: "text-xs", icon: 16 },
   md: { container: "gap-2.5 px-3.5 py-2.5", text: "text-sm", icon: 20 },
-  lg: { container: "gap-3 px-4 py-3", text: "text-base", icon: 24 },
+  lg: { container: "gap-3 px-4 py-3", text: "text-md", icon: 24 },
 };
 
 const SHADOW_STYLE = {
@@ -75,8 +75,7 @@ function Filter({
       disabled={disabled}
       accessibilityRole="button"
       accessibilityState={{ selected, disabled }}
-      className={cn("rounded-md", outerBg, className)}
-      style={{ padding: 2 }}
+      className={cn("rounded-md p-0.5", outerBg, className)}
     >
       <View
         className={cn(

package/src/components/Input.tsx

@@ -1,4 +1,5 @@
 import {
+  forwardRef,
   useState,
   useCallback,
   useEffect,
@@ -315,18 +316,21 @@ function useInputFocus(onFocus?: FocusHandler, onBlur?: BlurHandler) {
   return { focused, handleFocus, handleBlur };
 }
 
-function InputPassword({
-  className,
-  size = "lg",
-  invalid = false,
-  label,
-  value,
-  defaultValue,
-  onFocus,
-  onBlur,
-  onChangeText,
-  ...props
-}: InputPasswordProps) {
+const InputPassword = forwardRef<TextInput, InputPasswordProps>(function InputPassword(
+  {
+    className,
+    size = "lg",
+    invalid = false,
+    label,
+    value,
+    defaultValue,
+    onFocus,
+    onBlur,
+    onChangeText,
+    ...props
+  }: InputPasswordProps,
+  ref
+) {
   const [visible, setVisible] = useState(false);
   const { focused, handleFocus, handleBlur } = useInputFocus(onFocus, onBlur);
   const { text, handleChangeText } = useTrackedText(value, defaultValue, onChangeText);
@@ -360,6 +364,7 @@ function InputPassword({
           </InputLabel>
         )}
         <TextInput
+          ref={ref}
           secureTextEntry={!visible}
           className={cn(
             inputVariants({ size, invalid, focused, disabled: props.editable === false }),
@@ -395,24 +400,27 @@ function InputPassword({
       </InputEndIcon>
     </InputAdornment>
   );
-}
+});
 
-function InputNumeric({
-  className,
-  size = "lg",
-  invalid = false,
-  iconLeft,
-  min,
-  value,
-  defaultValue,
-  onChangeText,
-  editable = true,
-  allowNegative = false,
-  label,
-  onFocus,
-  onBlur,
-  ...props
-}: InputNumericProps) {
+const InputNumeric = forwardRef<TextInput, InputNumericProps>(function InputNumeric(
+  {
+    className,
+    size = "lg",
+    invalid = false,
+    iconLeft,
+    min,
+    value,
+    defaultValue,
+    onChangeText,
+    editable = true,
+    allowNegative = false,
+    label,
+    onFocus,
+    onBlur,
+    ...props
+  }: InputNumericProps,
+  ref
+) {
   const [internalValue, setInternalValue] = useState(String(defaultValue ?? ""));
   const isControlled = value !== undefined;
   const displayValue = isControlled ? String(value ?? "") : internalValue;
@@ -456,6 +464,7 @@ function InputNumeric({
           </InputLabel>
         )}
         <TextInput
+          ref={ref}
           keyboardType={allowNegative ? "numbers-and-punctuation" : "numeric"}
           value={displayValue}
           onChangeText={(text) => {
@@ -517,24 +526,27 @@ function InputNumeric({
       </InputEndIcon>
     </InputAdornment>
   );
-}
+});
 
-function InputTextual({
-  className,
-  type = "text",
-  size = "lg",
-  invalid = false,
-  iconLeft,
-  iconRight,
-  label,
-  value,
-  defaultValue,
-  editable = true,
-  onFocus,
-  onBlur,
-  onChangeText,
-  ...props
-}: InputProps) {
+const InputTextual = forwardRef<TextInput, InputProps>(function InputTextual(
+  {
+    className,
+    type = "text",
+    size = "lg",
+    invalid = false,
+    iconLeft,
+    iconRight,
+    label,
+    value,
+    defaultValue,
+    editable = true,
+    onFocus,
+    onBlur,
+    onChangeText,
+    ...props
+  }: InputProps,
+  ref
+) {
   const { focused, handleFocus, handleBlur } = useInputFocus(onFocus, onBlur);
   const { text, handleChangeText } = useTrackedText(value, defaultValue, onChangeText);
   const isFloated = focused || text !== "";
@@ -580,6 +592,7 @@ function InputTextual({
           </InputLabel>
         )}
         <TextInput
+          ref={ref}
           keyboardType={type === "email" ? "email-address" : "default"}
           value={value}
           defaultValue={defaultValue}
@@ -608,27 +621,31 @@ function InputTextual({
       )}
     </InputAdornment>
   );
-}
+});
 
-function Input({
-  className,
-  type = "text",
-  size = "lg",
-  invalid = false,
-  iconLeft,
-  iconRight,
-  label,
-  value,
-  defaultValue,
-  editable = true,
-  onFocus,
-  onBlur,
-  onChangeText,
-  ...props
-}: InputProps) {
+const Input = forwardRef<TextInput, InputProps>(function Input(
+  {
+    className,
+    type = "text",
+    size = "lg",
+    invalid = false,
+    iconLeft,
+    iconRight,
+    label,
+    value,
+    defaultValue,
+    editable = true,
+    onFocus,
+    onBlur,
+    onChangeText,
+    ...props
+  }: InputProps,
+  ref
+) {
   if (type === "numeric") {
     return (
       <InputNumeric
+        ref={ref}
         className={className}
         size={size}
         invalid={invalid}
@@ -648,6 +665,7 @@ function Input({
   if (type === "password") {
     return (
       <InputPassword
+        ref={ref}
         className={className}
         size={size}
         invalid={invalid}
@@ -665,6 +683,7 @@ function Input({
 
   return (
     <InputTextual
+      ref={ref}
       className={className}
       type={type}
       size={size}
@@ -681,7 +700,7 @@ function Input({
       {...props}
     />
   );
-}
+});
 
 export {
   Input,

package/src/components/InvitePopover.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { View, type ViewProps } from "react-native";
+import { StyleSheet, View, useWindowDimensions, type ViewProps } from "react-native";
 
 import { Text } from "@/components/Text";
 import * as PopoverPrimitive from "@rn-primitives/popover";
@@ -62,13 +62,20 @@ function InvitePopoverTrigger({
   );
 }
 
+const CONTENT_MAX_WIDTH = 370;
+const CONTENT_WINDOW_GUTTER = 32;
+
 function InvitePopoverContent({
   className,
   align = "end",
   sideOffset = 8,
+  style,
   children,
   ...props
 }: InvitePopoverContentProps) {
+  const { width: windowWidth } = useWindowDimensions();
+  const contentWidth = Math.min(CONTENT_MAX_WIDTH, windowWidth - CONTENT_WINDOW_GUTTER);
+
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Overlay className="absolute inset-0" />
@@ -76,9 +83,10 @@ function InvitePopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-[min(370px,100vw-2rem)] border-0 bg-transparent p-0 shadow-none",
+          "z-50 border-0 bg-transparent p-0 shadow-none",
           className
         )}
+        style={{ ...StyleSheet.flatten(style), width: contentWidth }}
         {...props}
       >
         {children}
@@ -111,7 +119,7 @@ function InvitePopoverCard({ className, children, ...props }: ViewProps) {
   return (
     <View
       className={cn(
-        "gap-6 rounded-lg border border-gray-stroke-muted bg-gray-foreground-onfill p-4",
+        "gap-6 rounded-lg border border-gray-stroke-muted bg-surface-elevated p-4",
         className
       )}
       {...props}

package/src/components/LeaderboardCard.tsx

@@ -47,7 +47,10 @@ function LeaderboardCardHeader({
         </View>
       ) : null}
       <View className="min-w-0 flex-1 flex-row items-center justify-between gap-2">
-        <Text className="text-lg font-semibold text-primary-foreground">
+        <Text
+          accessibilityRole="header"
+          className="text-lg font-semibold text-primary-foreground"
+        >
           {title}
         </Text>
         {typeof badge === "string" ? (

package/src/components/Loading.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { View } from "react-native";
 import Svg, { Path } from "react-native-svg";
 import Animated, {
   useSharedValue,
@@ -44,20 +45,22 @@ function Loading({
   }));
 
   return (
-    <Animated.View style={animatedStyle} className={cn(className)}>
-      <Svg
-        width={size}
-        height={size}
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke={stroke}
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <Path d="M21 12a9 9 0 1 1-6.219-8.56" />
-      </Svg>
-    </Animated.View>
+    <View className={cn(className)}>
+      <Animated.View style={animatedStyle}>
+        <Svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={stroke}
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <Path d="M21 12a9 9 0 1 1-6.219-8.56" />
+        </Svg>
+      </Animated.View>
+    </View>
   );
 }