@medway-ui/native 1.9.1 → 1.10.0

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>
   );
 }
 

package/src/components/LoadingOverlay.tsx

@@ -1,6 +1,6 @@
 import { useEffect, type ReactNode } from "react";
 import { Modal, View, type ModalProps, type ViewProps } from "react-native";
-import Svg, { Circle } from "react-native-svg";
+import Svg, { Circle, Path } from "react-native-svg";
 import Animated, {
   cancelAnimation,
   Easing,
@@ -16,20 +16,20 @@ import { useThemeColor, type ThemeColorToken } from "@/hooks/useThemeColor";
 import { cn } from "@/lib/utils";
 
 interface LoadingOverlaySpinnerProps {
-  /** Icon rendered at the center of the ring, e.g. `<ThemedIcon icon={Brain} />`. */
+  /** Icon rendered at the center of the ring. Defaults to the Medway "m"; pass `null` to show only the ring. */
   icon?: ReactNode;
   /** Ring diameter in px. Defaults to 72. */
   size?: number;
-  /** Ring stroke width in px. Defaults to 2. */
+  /** Ring stroke width in px. Defaults to 2.16. */
   trackWidth?: number;
-  /** Theme token for the spinning arc. Defaults to `gray-stroke-muted`. */
+  /** Theme token for the spinning arc. Defaults to `gray-stroke`. */
   colorToken?: ThemeColorToken;
   /** Explicit arc color. Takes precedence over `colorToken`. */
   color?: string;
-  /** Theme token for the track behind the arc. The track is hidden when omitted. */
-  trackColorToken?: ThemeColorToken;
-  /** Pulses the center icon opacity. Defaults to true. */
+  /** Pulses the center icon opacity from 20% to 100% every 400ms. Defaults to true. */
   pulse?: boolean;
+  /** @deprecated No effect: the ring has no track, as in Figma. Removed in the next major. */
+  trackColorToken?: ThemeColorToken;
 }
 
 interface LoadingOverlayCardProps
@@ -60,39 +60,31 @@ interface LoadingOverlayProps extends LoadingOverlayCardProps {
   modalProps?: Omit<ModalProps, "visible" | "onRequestClose" | "children">;
 }
 
-/** Rendered only when a track token is set, so the default case skips the color lookup. */
-function SpinnerTrack({
-  size,
-  radius,
-  strokeWidth,
-  colorToken,
-}: {
-  size: number;
-  radius: number;
-  strokeWidth: number;
-  colorToken: ThemeColorToken;
-}) {
-  const color = useThemeColor(colorToken);
+const SPIN_DURATION_MS = 1600;
+const PULSE_TIMING = { duration: 400, easing: Easing.linear };
+const PULSE_MIN_OPACITY = 0.2;
+const LOGO_SHORT_GLYPH_VIEWBOX = "0 10.4159 59.65 41.85";
+const LOGO_SHORT_GLYPH_PATH =
+  "M42.33 10.8959C37.32 10.8959 32.8 12.8259 29.64 15.8959C26.55 12.5459 21.96 10.4159 16.83 10.4159C8.54 10.4159 1.65 15.9859 0.25 23.3059C0.09 24.1959 0 25.1159 0 26.0459V50.4759C0 51.4659 0.8 52.2659 1.79 52.2659H9.76C10.75 52.2659 11.55 51.4659 11.55 50.4759V28.8559C11.55 25.8359 13.98 22.8859 16.97 22.4959C19.03 22.2259 20.91 22.9659 22.22 24.2759C23.35 25.4059 24.05 26.9659 24.05 28.6959V50.4759C24.05 51.4659 24.85 52.2659 25.84 52.2659H33.81C34.8 52.2659 35.6 51.4659 35.6 50.4759V28.8559C35.6 25.8359 38.03 22.8859 41.02 22.4959C43.08 22.2259 44.96 22.9659 46.27 24.2759C47.4 25.4059 48.1 26.9659 48.1 28.6959V50.4759C48.1 51.4659 48.9 52.2659 49.89 52.2659H57.86C58.85 52.2659 59.65 51.4659 59.65 50.4759V26.5259C59.65 25.0959 59.44 23.7159 59.04 22.3959C57.03 15.7659 50.31 10.8959 42.33 10.8959Z";
+
+function LoadingOverlayMark() {
+  const color = useThemeColor("secondary-stroke-emphasis");
 
   return (
-    <Circle
-      cx={size / 2}
-      cy={size / 2}
-      r={radius}
-      stroke={color}
-      strokeWidth={strokeWidth}
-      fill="none"
-    />
+    <Svg width={20} height={14} viewBox={LOGO_SHORT_GLYPH_VIEWBOX}>
+      <Path d={LOGO_SHORT_GLYPH_PATH} fill={color} />
+    </Svg>
   );
 }
 
+const DEFAULT_ICON = <LoadingOverlayMark />;
+
 function LoadingOverlaySpinner({
-  icon,
+  icon = DEFAULT_ICON,
   size = 72,
-  trackWidth = 2,
-  colorToken = "gray-stroke-muted",
+  trackWidth = 2.16,
+  colorToken = "gray-stroke",
   color,
-  trackColorToken,
   pulse = true,
 }: LoadingOverlaySpinnerProps) {
   const themeColor = useThemeColor(colorToken);
@@ -104,7 +96,7 @@ function LoadingOverlaySpinner({
 
   useEffect(() => {
     rotation.value = withRepeat(
-      withTiming(360, { duration: 1000, easing: Easing.linear }),
+      withTiming(360, { duration: SPIN_DURATION_MS, easing: Easing.linear }),
       -1,
       false
     );
@@ -117,11 +109,11 @@ function LoadingOverlaySpinner({
       opacity.value = 1;
       return;
     }
-    opacity.value = 0.4;
+    opacity.value = PULSE_MIN_OPACITY;
     opacity.value = withRepeat(
       withSequence(
-        withTiming(1, { duration: 400 }),
-        withTiming(0.4, { duration: 400 })
+        withTiming(1, PULSE_TIMING),
+        withTiming(PULSE_MIN_OPACITY, PULSE_TIMING)
       ),
       -1,
       false
@@ -147,14 +139,6 @@ function LoadingOverlaySpinner({
     >
       <Animated.View style={[{ position: "absolute" }, ringStyle]}>
         <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-          {trackColorToken ? (
-            <SpinnerTrack
-              size={size}
-              radius={radius}
-              strokeWidth={trackWidth}
-              colorToken={trackColorToken}
-            />
-          ) : null}
           <Circle
             cx={size / 2}
             cy={size / 2}
@@ -189,8 +173,8 @@ function LoadingOverlayCard({
   trackWidth,
   colorToken,
   color,
-  trackColorToken,
   pulse,
+  trackColorToken: _trackColorToken,
   text = "Carregando...",
   description,
   children,
@@ -203,7 +187,7 @@ function LoadingOverlayCard({
   return (
     <View
       className={cn(
-        "w-full min-h-[230px] items-center justify-center gap-6 rounded-xl bg-surface-card p-10",
+        "w-full min-h-[230px] items-center justify-center gap-6 rounded-lg bg-surface-card p-10",
         className
       )}
       {...props}
@@ -218,7 +202,7 @@ function LoadingOverlayCard({
         }
         accessibilityState={{ busy: true }}
         accessibilityLiveRegion="polite"
-        className="w-full items-center gap-6"
+        className="w-full items-center gap-4"
       >
         <LoadingOverlaySpinner
           icon={icon}
@@ -226,7 +210,6 @@ function LoadingOverlayCard({
           trackWidth={trackWidth}
           colorToken={colorToken}
           color={color}
-          trackColorToken={trackColorToken}
           pulse={pulse}
         />
 
@@ -235,7 +218,7 @@ function LoadingOverlayCard({
             {text ? (
               <Text
                 className={cn(
-                  "text-center text-sm font-semibold text-content-title",
+                  "text-center text-xs font-semibold leading-xs text-content-title",
                   textClassName
                 )}
               >
@@ -245,7 +228,7 @@ function LoadingOverlayCard({
             {description ? (
               <Text
                 className={cn(
-                  "text-center text-sm font-medium text-content-paragraph",
+                  "text-center text-xs font-medium leading-xs text-content-paragraph",
                   descriptionClassName
                 )}
               >

package/src/components/MemberRow.tsx

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 import { type ReactNode } from "react";
 import { View, type ViewProps } from "react-native";
 
@@ -11,7 +11,7 @@ import { cn } from "@/lib/utils";
 const rankIndicatorVariants = cva("size-[22px] rounded-full", {
   variants: {
     rank: {
-      1: "bg-yellow-background-fill",
+      1: "bg-feedback-warning-background-fill",
       2: "bg-gray-background-fill",
       3: "bg-bronze-background-fill",
     },
@@ -102,7 +102,7 @@ function MemberRow({
         {...props}
       >
         <View className="min-w-0 flex-1 flex-row items-center gap-4">
-          <RadioGroupItem value={value} size="md" />
+          <RadioGroupItem value={value} size="md" accessibilityLabel={name} />
           <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/PageHeader.tsx

@@ -32,7 +32,10 @@ function PageHeader({
         <View className="flex-row items-start gap-3">
           {icon}
           <View className="flex-1 gap-1">
-            <Text className="text-title-xs font-semibold text-primary-foreground">
+            <Text
+              accessibilityRole="header"
+              className="text-title-xs font-semibold text-primary-foreground"
+            >
               {title}
             </Text>
             {description ? (