@medway-ui/native 1.6.1 → 1.7.1

package/src/components/DropdownMenu.tsx

@@ -5,6 +5,7 @@ import {
   useEffect,
   useId,
   useMemo,
+  useState,
   type ReactNode,
 } from "react";
 import { Dimensions, Pressable, StyleSheet, View, type PressableProps, type ViewProps } from "react-native";
@@ -12,7 +13,8 @@ import { Dimensions, Pressable, StyleSheet, View, type PressableProps, type View
 import { Text } from "@/components/Text";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
 
-import { useOverlayHost } from "@/lib/overlay-host";
+import { useThemeColor } from "@/hooks/useThemeColor";
+import { useOverlayHost, type HostOrigin } from "@/lib/overlay-host";
 import { cn } from "@/lib/utils";
 
 interface DropdownMenuProps extends DropdownMenuPrimitive.RootProps {
@@ -43,6 +45,14 @@ type MenuActionsContextValue = {
   close: () => void;
 };
 
+type MenuAlign = NonNullable<DropdownMenuContentProps["align"]>;
+
+type MenuPosition = { top: number; left: number };
+
+type TriggerPosition = NonNullable<
+  ReturnType<typeof DropdownMenuPrimitive.useRootContext>["triggerPosition"]
+>;
+
 const MenuActionsContext = createContext<MenuActionsContextValue | null>(null);
 
 function useMenuActions() {
@@ -90,6 +100,7 @@ const DropdownMenuTrigger = forwardRef<
       ref={ref}
       collapsable={false}
       accessibilityRole="button"
+      hitSlop={6}
       className={cn("items-center justify-center", className)}
       style={(state) => [
         {
@@ -107,13 +118,36 @@ const DropdownMenuTrigger = forwardRef<
   );
 });
 
-/**
- * Content renderizado no OverlayHost do MedwayUiProvider (acima da stack).
- * Mantém Root/Trigger do @rn-primitives/dropdown-menu para open + measure.
- *
- * `triggerPosition` vem em coordenadas de janela (pageX/pageY). O OverlayHost
- * fica abaixo do header da navegação, então subtraímos a origem do host.
- */
+const MENU_WIDTH = 200;
+const MENU_EDGE_GAP = 8;
+
+// triggerPosition vem em coordenadas de janela; o OverlayHost fica abaixo do header, então subtrai a origem.
+function computeMenuPosition({
+  triggerPosition,
+  hostOrigin,
+  align,
+  sideOffset,
+}: {
+  triggerPosition: TriggerPosition;
+  hostOrigin: HostOrigin;
+  align: MenuAlign;
+  sideOffset: number;
+}): MenuPosition {
+  const windowWidth = Dimensions.get("window").width;
+  const alignOffset: Record<MenuAlign, number> = {
+    start: 0,
+    center: triggerPosition.width / 2 - MENU_WIDTH / 2,
+    end: triggerPosition.width - MENU_WIDTH,
+  };
+  const rawLeft = triggerPosition.pageX + alignOffset[align] - hostOrigin.x;
+  const maxLeft = windowWidth - hostOrigin.x - MENU_WIDTH - MENU_EDGE_GAP;
+
+  return {
+    left: Math.max(MENU_EDGE_GAP, Math.min(rawLeft, maxLeft)),
+    top: triggerPosition.pageY + triggerPosition.height + sideOffset - hostOrigin.y,
+  };
+}
+
 function DropdownMenuContent({
   className,
   align = "end",
@@ -125,103 +159,83 @@ function DropdownMenuContent({
   const overlay = useOverlayHost();
   const { close } = useMenuActions();
   const { open, triggerPosition } = DropdownMenuPrimitive.useRootContext();
+  const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null);
+  const surfaceColor = useThemeColor("surface-elevated");
+  const borderColor = useThemeColor("gray-stroke-muted");
+  const backdropColor = useThemeColor("black-48");
 
   useEffect(() => {
     if (!open || !triggerPosition) {
-      overlay.unmount(id);
+      setMenuPosition(null);
       return;
     }
 
     let cancelled = false;
-    const menuWidth = 200;
-    const windowWidth = Dimensions.get("window").width;
 
     overlay.measureHostOrigin((hostOrigin) => {
-      if (cancelled) {
-        return;
-      }
-
-      let left =
-        triggerPosition.pageX - hostOrigin.x;
-
-      if (align === "end") {
-        left =
-          triggerPosition.pageX +
-          triggerPosition.width -
-          menuWidth -
-          hostOrigin.x;
-      } else if (align === "center") {
-        left =
-          triggerPosition.pageX +
-          triggerPosition.width / 2 -
-          menuWidth / 2 -
-          hostOrigin.x;
-      }
-
-      left = Math.max(8, Math.min(left, windowWidth - hostOrigin.x - menuWidth - 8));
-
-      const top =
-        triggerPosition.pageY +
-        triggerPosition.height +
-        sideOffset -
-        hostOrigin.y;
-
-      overlay.mount(
-        id,
-        <MenuActionsContext.Provider value={{ close }}>
-          <View style={styles.layer} pointerEvents="box-none">
-            <Pressable
-              accessibilityLabel="Fechar menu"
-              style={[
-                StyleSheet.absoluteFill,
-                showOverlay ? styles.backdrop : null,
-              ]}
-              onPress={close}
-            />
-            <View
-              className={cn(
-                "overflow-hidden rounded-md border border-gray-stroke-muted bg-surface-elevated p-1 shadow-md",
-                className
-              )}
-              // Fallback visual caso NativeWind não aplique no host de overlay
-              style={[
-                styles.menu,
-                {
-                  top,
-                  left,
-                  width: menuWidth,
-                  backgroundColor: "white",
-                  borderRadius: 8,
-                  borderWidth: 1,
-                  borderColor: "#E7E9EF",
-                  padding: 4,
-                },
-              ]}
-            >
-              {children}
-            </View>
-          </View>
-        </MenuActionsContext.Provider>
-      );
+      if (cancelled) return;
+      setMenuPosition(computeMenuPosition({ triggerPosition, hostOrigin, align, sideOffset }));
     });
 
     return () => {
       cancelled = true;
-      overlay.unmount(id);
     };
+  }, [align, open, overlay, sideOffset, triggerPosition]);
+
+  useEffect(() => {
+    if (!menuPosition) {
+      overlay.unmount(id);
+      return;
+    }
+
+    overlay.mount(
+      id,
+      <MenuActionsContext.Provider value={{ close }}>
+        <View style={styles.layer} pointerEvents="box-none">
+          <Pressable
+            accessibilityLabel="Fechar menu"
+            style={[
+              StyleSheet.absoluteFill,
+              showOverlay ? { backgroundColor: backdropColor } : null,
+            ]}
+            onPress={close}
+          />
+          <View
+            className={cn(
+              "overflow-hidden rounded-md border border-gray-stroke-muted bg-surface-elevated p-1 shadow-md",
+              className
+            )}
+            style={[
+              styles.menu,
+              {
+                top: menuPosition.top,
+                left: menuPosition.left,
+                width: MENU_WIDTH,
+                backgroundColor: surfaceColor,
+                borderColor,
+              },
+            ]}
+          >
+            {children}
+          </View>
+        </View>
+      </MenuActionsContext.Provider>
+    );
   }, [
-    align,
+    backdropColor,
+    borderColor,
     children,
     className,
     close,
     id,
-    open,
+    menuPosition,
     overlay,
     showOverlay,
-    sideOffset,
-    triggerPosition,
+    surfaceColor,
   ]);
 
+  useEffect(() => () => overlay.unmount(id), [id, overlay]);
+
   return null;
 }
 
@@ -284,15 +298,13 @@ const styles = StyleSheet.create({
   layer: {
     ...StyleSheet.absoluteFill,
   },
-  backdrop: {
-    // Alinhado ao Dialog/Sheet (`bg-black/50`); style explícito porque
-    // NativeWind pode não aplicar classes montadas no OverlayHost.
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-  },
   menu: {
     position: "absolute",
     zIndex: 2,
     elevation: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    padding: 4,
   },
 });
 

package/src/components/EmptyState.tsx

@@ -9,16 +9,26 @@ interface EmptyStateProps extends ViewProps {
   title: string;
   description?: string;
   action?: ReactNode;
-  variant?: "regular" | "emphasis" | "success" | "warning" | "error";
+  variant?: EmptyStateVariant;
 }
 
+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",
+};
+
 function EmptyState({
   className,
   icon,
   title,
   description,
   action,
-  variant: _variant = "regular",
+  variant = "regular",
   ...props
 }: EmptyStateProps) {
   return (
@@ -30,7 +40,12 @@ function EmptyState({
       {...props}
     >
       {icon ? (
-        <View className="size-16 items-center justify-center rounded-full bg-gray-background-soft">
+        <View
+          className={cn(
+            "size-16 items-center justify-center rounded-full",
+            ICON_BACKGROUND_BY_VARIANT[variant]
+          )}
+        >
           {icon}
         </View>
       ) : null}

package/src/components/Feed.tsx

@@ -4,6 +4,7 @@ import { TextInput, View, type TextInputProps, type ViewProps } from "react-nati
 import { Text } from "@/components/Text";
 
 import { InputText, inputVariants } from "@/components/Input";
+import { useTrackedText } from "@/hooks/useTrackedText";
 import { cn } from "@/lib/utils";
 
 interface FeedProps extends ViewProps {
@@ -53,7 +54,7 @@ function FeedComposer({
   editable = true,
   ...props
 }: FeedComposerProps) {
-  const currentLength = (value ?? defaultValue ?? "").length;
+  const { text, handleChangeText } = useTrackedText(value, defaultValue, onChangeText);
 
   return (
     <View className={cn("gap-1", className)}>
@@ -67,7 +68,7 @@ function FeedComposer({
           maxLength={maxLength}
           value={value}
           defaultValue={defaultValue}
-          onChangeText={onChangeText}
+          onChangeText={handleChangeText}
           placeholder={placeholder}
           editable={editable}
           className={cn(
@@ -86,7 +87,7 @@ function FeedComposer({
         />
       </View>
       <InputText className="text-right text-xs font-medium text-gray-foreground">
-        {currentLength} / {maxLength}
+        {text.length} / {maxLength}
       </InputText>
     </View>
   );

package/src/components/Feedback.tsx

@@ -0,0 +1,111 @@
+import { cloneElement, isValidElement, type ReactNode } from "react";
+import { View } from "react-native";
+
+import { Text } from "@/components/Text";
+import { cn } from "@/lib/utils";
+
+type FeedbackType = "success" | "error" | "warning";
+type FeedbackVariant = "filled" | "soft" | "basic";
+type FeedbackSize = "sm" | "md";
+
+interface FeedbackProps {
+  text: string;
+  type?: FeedbackType;
+  variant?: FeedbackVariant;
+  size?: FeedbackSize;
+  icon?: ReactNode;
+  showIcon?: boolean;
+  className?: string;
+}
+
+const SIZE_MAP: Record<
+  FeedbackSize,
+  { gap: string; padding: string; text: string; iconSize: number }
+> = {
+  sm: {
+    gap: "gap-1.5",
+    padding: "px-2 py-1",
+    text: "text-xs leading-xs",
+    iconSize: 16,
+  },
+  md: {
+    gap: "gap-2",
+    padding: "px-2.5 py-1.5",
+    text: "text-sm leading-sm",
+    iconSize: 20,
+  },
+};
+
+const FILLED_BG: Record<FeedbackType, string> = {
+  success: "bg-feedback-success-background-fill",
+  error: "bg-feedback-error-background-fill",
+  warning: "bg-feedback-warning-background-fill",
+};
+
+const SOFT_BG: Record<FeedbackType, string> = {
+  success: "bg-feedback-success-background-soft",
+  error: "bg-feedback-error-background-soft",
+  warning: "bg-feedback-warning-background-soft",
+};
+
+const FILLED_TEXT_COLOR: Record<FeedbackType, string> = {
+  success: "text-feedback-success-foreground-onfill",
+  error: "text-feedback-error-foreground-onfill",
+  warning: "text-feedback-warning-foreground-onfill",
+};
+
+const DEFAULT_TEXT_COLOR: Record<FeedbackType, string> = {
+  success: "text-feedback-success-foreground",
+  error: "text-feedback-error-foreground",
+  warning: "text-feedback-warning-foreground",
+};
+
+function Feedback({
+  text,
+  type = "success",
+  variant = "filled",
+  size = "md",
+  icon,
+  showIcon = true,
+  className,
+}: FeedbackProps) {
+  const sz = SIZE_MAP[size];
+
+  const isBasic = variant === "basic";
+  const bg = variant === "filled" ? FILLED_BG[type] : SOFT_BG[type];
+  const textColor =
+    variant === "filled" ? FILLED_TEXT_COLOR[type] : DEFAULT_TEXT_COLOR[type];
+
+  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,
+        height: icon.props.height ?? sz.iconSize,
+      })
+    : icon;
+
+  return (
+    <View
+      className={cn(
+        "flex-row items-center justify-center",
+        shouldRenderIcon && sz.gap,
+        !isBasic && sz.padding,
+        !isBasic && "rounded-md",
+        !isBasic && bg,
+        className,
+      )}
+    >
+      {shouldRenderIcon ? <View className="shrink-0">{sizedIcon}</View> : null}
+      <Text
+        className={cn("text-center font-semibold", sz.text, textColor)}
+      >
+        {text}
+      </Text>
+    </View>
+  );
+}
+
+export { Feedback };
+export type { FeedbackProps, FeedbackSize, FeedbackType, FeedbackVariant };

package/src/components/Filter.tsx

@@ -0,0 +1,106 @@
+import type { ReactNode } from "react";
+import { Pressable, View } from "react-native";
+import * as MedwayIcons from "@medway-ui/icons/native";
+
+import { Text } from "@/components/Text";
+import { ThemedIcon } from "@/components/ThemedIcon";
+import { useThemeColor } from "@/hooks/useThemeColor";
+import { cn } from "@/lib/utils";
+
+type FilterSize = "sm" | "md" | "lg";
+
+interface FilterProps {
+  label: string;
+  criteria?: string;
+  showCriteria?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+  size?: FilterSize;
+  icon?: ReactNode;
+  onPress?: () => void;
+  className?: string;
+}
+
+const SIZE_MAP: Record<
+  FilterSize,
+  { container: string; text: string; icon: number }
+> = {
+  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 },
+};
+
+const SHADOW_STYLE = {
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.08,
+  shadowRadius: 4,
+  elevation: 2,
+};
+
+function Filter({
+  label,
+  criteria,
+  showCriteria = true,
+  selected = false,
+  disabled = false,
+  size = "md",
+  icon,
+  onPress,
+  className,
+}: FilterProps) {
+  const sz = SIZE_MAP[size] ?? SIZE_MAP.md;
+  const shadowColor = useThemeColor("gray-700");
+
+  const outerBg = disabled
+    ? "bg-gray-background-soft-muted"
+    : "bg-gray-background-soft";
+
+  const textClass = disabled
+    ? "font-medium text-gray-foreground-muted"
+    : selected
+      ? "font-semibold text-primary-foreground"
+      : "font-medium text-gray-foreground";
+
+  const dropdownColorToken = disabled
+    ? "gray-foreground-muted"
+    : selected
+      ? "primary-foreground"
+      : "gray-foreground";
+
+  const hasCriteria = showCriteria && !!criteria;
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ selected, disabled }}
+      className={cn("rounded-md", outerBg, className)}
+      style={{ padding: 2 }}
+    >
+      <View
+        className={cn(
+          "flex-row items-center justify-center rounded-md",
+          sz.container,
+          selected ? "bg-surface-card" : "bg-transparent",
+        )}
+        style={selected ? { ...SHADOW_STYLE, shadowColor } : undefined}
+      >
+        {icon ? <View className="shrink-0">{icon}</View> : null}
+        <Text className={cn("text-center", sz.text, textClass)}>
+          {hasCriteria ? `${label}: ${criteria}` : label}
+        </Text>
+        <View className="shrink-0">
+          <ThemedIcon
+            icon={MedwayIcons.ChevronDown as never}
+            size={sz.icon}
+            colorToken={dropdownColorToken}
+          />
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+export { Filter };
+export type { FilterProps };

package/src/components/IndexLevel.tsx

@@ -24,6 +24,10 @@ import {
   withAlpha,
   type ThemeColorToken,
 } from "@/hooks/useThemeColor";
+import {
+  loadLinearGradient,
+  type LinearGradientComponent,
+} from "@/lib/optional-deps";
 import { cn } from "@/lib/utils";
 
 /**
@@ -195,13 +199,7 @@ type RingDeps = {
     maskElement: ReactNode;
     children?: ReactNode;
   }>;
-  LinearGradient: ComponentType<{
-    colors: string[];
-    locations?: number[];
-    start?: { x: number; y: number };
-    end?: { x: number; y: number };
-    style?: object;
-  }>;
+  LinearGradient: LinearGradientComponent;
 };
 
 /** Lazy-load optional peers so the static chip works without them installed. */
@@ -209,11 +207,11 @@ function loadRingDeps(): RingDeps | null {
   try {
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     const masked = require("@react-native-masked-view/masked-view");
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const gradient = require("expo-linear-gradient");
+    const LinearGradient = loadLinearGradient();
+    if (!LinearGradient) return null;
     return {
       MaskedView: masked.default ?? masked,
-      LinearGradient: gradient.LinearGradient,
+      LinearGradient,
     };
   } catch {
     return null;