@medway-ui/native 1.1.2 → 1.3.0

package/setup/tailwind.js

@@ -23,6 +23,47 @@ function resolveNativePackageRoot() {
   return path.resolve(__dirname, '..');
 }
 
+/**
+ * React Native registers Montserrat as separate family names per weight
+ * (MontserratMedium, MontserratSemiBold, …). Numeric fontWeight + "Montserrat"
+ * does not resolve the file, so weight utilities must set fontFamily instead.
+ * Keys stay aligned with Medway UI tokens (`regular` | `medium` | `semibold` | …).
+ */
+const NATIVE_MONTSERRAT_BY_WEIGHT = {
+  thin: 'MontserratLight',
+  extralight: 'MontserratLight',
+  light: 'MontserratLight',
+  normal: 'Montserrat',
+  regular: 'Montserrat',
+  medium: 'MontserratMedium',
+  semibold: 'MontserratSemiBold',
+  bold: 'MontserratBold',
+  extrabold: 'MontserratExtraBold',
+  black: 'MontserratBlack',
+};
+
+function createNativeMontserratFontPlugin() {
+  // Lazy-require so greenfield web tooling can still import this file if needed.
+  const plugin = require('tailwindcss/plugin');
+
+  return plugin(({ addBase, addUtilities }) => {
+    addBase({
+      '*': {
+        fontFamily: 'Montserrat',
+      },
+    });
+
+    addUtilities(
+      Object.fromEntries(
+        Object.entries(NATIVE_MONTSERRAT_BY_WEIGHT).map(([weight, fontFamily]) => [
+          `.font-${weight}`,
+          { fontFamily },
+        ]),
+      ),
+    );
+  });
+}
+
 /**
  * Tailwind config para apps com @medway-ui/native.
  *
@@ -38,7 +79,6 @@ function createMedwayUiTailwindConfig(options = {}) {
     colors,
     fontFamily,
     fontSize,
-    fontWeight,
     lineHeight,
     borderRadius,
     boxShadow,
@@ -68,17 +108,25 @@ function createMedwayUiTailwindConfig(options = {}) {
     darkMode: 'class',
     presets: [require('nativewind/preset')],
     theme: {
+      // Disable numeric font-weight utilities; RN needs fontFamily per weight.
+      fontWeight: {},
       extend: {
         colors,
-        fontFamily,
+        fontFamily: {
+          ...fontFamily,
+          sans: ['Montserrat'],
+        },
         fontSize,
-        fontWeight,
         lineHeight,
         borderRadius,
         boxShadow,
       },
     },
+    plugins: [createNativeMontserratFontPlugin()],
   };
 }
 
-module.exports = { createMedwayUiTailwindConfig };
+module.exports = {
+  createMedwayUiTailwindConfig,
+  NATIVE_MONTSERRAT_BY_WEIGHT,
+};

package/setup/tokens.native.css

@@ -545,11 +545,15 @@
   --color-gradient-pt-bg-2: var(--color-gray-450);
 
   /* === Typography fontfamily === */
-  --font-sans:
-    "Montserrat", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* RN: single family name (loaded via expo-font as "Montserrat"). */
+  --font-sans: Montserrat;
 
   /* === Typography weight === */
+  /*
+   * Token keys stay the same as web. On native, Tailwind maps these class
+   * names (font-medium, font-semibold, …) to Montserrat* fontFamily files
+   * in setup/tailwind.js — numeric fontWeight is not used for RN text.
+   */
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
@@ -615,6 +619,7 @@
   --sidebar-width-mobile: 256px;
   --sidebar-width-icon: 72px;
 }
+
 .dark {
   /* === Dark base colors === */
   --color-background: var(--color-gray-850);

package/src/components/Alert.tsx

@@ -4,7 +4,9 @@ import {
   useMemo,
   type ReactNode,
 } from "react";
-import { View, Text, Pressable, type ViewProps, type PressableProps } from "react-native";
+import { View, Pressable, type ViewProps, type PressableProps } from "react-native";
+
+import { Text } from "@/components/Text";
 import { cva, type VariantProps } from "class-variance-authority";
 import { CloseMd } from "@medway-ui/icons/native";
 import { useThemeColor } from "@/hooks/useThemeColor";
@@ -141,7 +143,7 @@ function AlertDescription({ className, children, ...props }: ViewProps & { child
     <View className={cn("", className)} {...props}>
       <Text
         numberOfLines={3}
-        className={cn("text-sm leading-5", alertTextColorVariants({ variant }))}
+        className={cn("text-sm font-medium leading-5", alertTextColorVariants({ variant }))}
       >
         {children}
       </Text>

package/src/components/Avatar.tsx

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
-import { View, Text, type ViewProps } from "react-native";
+import { View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
 import * as AvatarPrimitive from "@rn-primitives/avatar";
 import { cva, type VariantProps } from "class-variance-authority";
 import { User } from "@medway-ui/icons/native";

package/src/components/Badge.tsx

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
-import { View, Text, type ViewProps } from "react-native";
+import { View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 

package/src/components/Button.tsx

@@ -1,11 +1,7 @@
 import { type ReactNode } from "react";
-import {
-  Pressable,
-  View,
-  Text,
-  type PressableProps,
-  type ViewStyle,
-} from "react-native";
+import { Pressable, View, type PressableProps, type ViewStyle } from "react-native";
+
+import { Text } from "@/components/Text";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { Loading } from "@/components/Loading";

package/src/components/CardNews.tsx

@@ -8,13 +8,14 @@ import {
 } from "react";
 import {
   Image,
-  Text,
   View,
   useWindowDimensions,
   type ImageProps,
   type ViewProps,
 } from "react-native";
 
+import { Text } from "@/components/Text";
+
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/Avatar";
 import { Button, type ButtonProps } from "@/components/Button";
 import { FallbackImage } from "@/components/FallbackImage";

package/src/components/Carousel.tsx

@@ -0,0 +1,152 @@
+import { type ReactNode } from "react";
+import { Image, Pressable, View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
+import { ChevronLeftMd, ChevronRightMd } from "@medway-ui/icons/native";
+
+import { Button } from "@/components/Button";
+import { cn } from "@/lib/utils";
+
+interface CarouselProps extends ViewProps {
+  slideIndex?: number;
+  slideCount?: number;
+  onPrevious?: () => void;
+  onNext?: () => void;
+  children?: ReactNode;
+}
+
+interface CarouselMediaSlideProps extends ViewProps {
+  imageSrc?: string;
+  image?: ReactNode;
+  label: string;
+  title: string;
+  linkLabel?: string;
+  onLinkPress?: () => void;
+  linkIcon?: ReactNode;
+}
+
+interface CarouselMetricSlideProps extends ViewProps {
+  icon?: ReactNode;
+  value: string;
+  description: string;
+}
+
+function Carousel({
+  className,
+  children,
+  onPrevious,
+  onNext,
+  ...props
+}: CarouselProps) {
+  return (
+    <View
+      className={cn(
+        "h-[284px] flex-row items-center justify-between px-6",
+        className
+      )}
+      {...props}
+    >
+      <Button
+        variant="regular-soft"
+        size="md"
+        className="size-10 min-h-10 min-w-10 max-w-10 p-0"
+        iconLeft={<ChevronLeftMd width={20} height={20} color="#00205B" />}
+        onPress={onPrevious}
+        accessibilityLabel="Slide anterior"
+      />
+      <View className="h-full min-w-0 flex-1 items-center justify-center px-4">
+        {children}
+      </View>
+      <Button
+        variant="regular-soft"
+        size="md"
+        className="size-10 min-h-10 min-w-10 max-w-10 p-0"
+        iconLeft={<ChevronRightMd width={20} height={20} color="#00205B" />}
+        onPress={onNext}
+        accessibilityLabel="Próximo slide"
+      />
+    </View>
+  );
+}
+
+function CarouselMediaSlide({
+  className,
+  imageSrc,
+  image,
+  label,
+  title,
+  linkLabel = "Ver coleção",
+  onLinkPress,
+  linkIcon,
+  ...props
+}: CarouselMediaSlideProps) {
+  return (
+    <View className={cn("items-center gap-2", className)} {...props}>
+      {image ??
+        (imageSrc ? (
+          <Image
+            source={{ uri: imageSrc }}
+            accessibilityLabel={title}
+            className="h-[188px] w-[161px]"
+            resizeMode="contain"
+          />
+        ) : null)}
+      <View className="items-center gap-2">
+        <View className="items-center">
+          <Text className="text-sm font-medium text-primary-foreground">
+            {label}
+          </Text>
+          <Text className="text-center text-title-xs font-semibold text-primary-foreground">
+            {title}
+          </Text>
+        </View>
+        {linkLabel ? (
+          <Pressable
+            accessibilityRole="link"
+            className="flex-row items-center gap-1"
+            onPress={onLinkPress}
+          >
+            <Text className="text-xs font-semibold text-secondary-stroke-emphasis">
+              {linkLabel}
+            </Text>
+            {linkIcon}
+          </Pressable>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+function CarouselMetricSlide({
+  className,
+  icon,
+  value,
+  description,
+  ...props
+}: CarouselMetricSlideProps) {
+  return (
+    <View
+      className={cn("max-w-[242px] items-center gap-3", className)}
+      {...props}
+    >
+      {icon ? (
+        <View className="items-center justify-center">{icon}</View>
+      ) : null}
+      <View className="w-full items-center gap-3">
+        <Text className="text-center text-[32px] font-bold leading-10 text-primary-foreground">
+          {value}
+        </Text>
+        <Text className="text-center text-sm font-semibold leading-sm text-primary-foreground">
+          {description}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+export { Carousel, CarouselMediaSlide, CarouselMetricSlide };
+export type {
+  CarouselMediaSlideProps,
+  CarouselMetricSlideProps,
+  CarouselProps,
+};

package/src/components/Checkbox.tsx

@@ -1,11 +1,21 @@
 import { useState, type ReactNode } from "react";
 import { type ViewStyle } from "react-native";
+import { cssInterop } from "nativewind";
 import * as CheckboxPrimitive from "@rn-primitives/checkbox";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { Check, RemoveMinus } from "@medway-ui/icons/native";
 import { useThemeColor } from "@/hooks/useThemeColor";
 
+// `@rn-primitives/checkbox` renders plain React Native primitives with no
+// NativeWind support, so `className` is otherwise silently ignored.
+const StyledCheckboxRoot = cssInterop(CheckboxPrimitive.Root, {
+  className: "style",
+});
+const StyledCheckboxIndicator = cssInterop(CheckboxPrimitive.Indicator, {
+  className: "style",
+});
+
 interface CheckboxProps
   extends Omit<
       CheckboxPrimitive.RootProps,
@@ -99,7 +109,7 @@ function Checkbox({
   };
 
   return (
-    <CheckboxPrimitive.Root
+    <StyledCheckboxRoot
       checked={isChecked}
       onCheckedChange={handleCheckedChange}
       disabled={disabled}
@@ -118,15 +128,15 @@ function Checkbox({
       )}
       {...props}
     >
-      <CheckboxPrimitive.Indicator className="items-center justify-center">
+      <StyledCheckboxIndicator className="items-center justify-center">
         {iconColor && (uncheckIcon ? (
           <RemoveMinus width={iconSize} height={iconSize} strokeWidth={2.6} color={iconColor} />
         ) : (
           <Check width={iconSize} height={iconSize} strokeWidth={2.6} color={iconColor} />
         ))}
-      </CheckboxPrimitive.Indicator>
+      </StyledCheckboxIndicator>
       {children}
-    </CheckboxPrimitive.Root>
+    </StyledCheckboxRoot>
   );
 }
 

package/src/components/DropdownMenu.tsx

@@ -0,0 +1,312 @@
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  type ReactNode,
+} from "react";
+import { Dimensions, Pressable, StyleSheet, View, type PressableProps, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
+import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
+
+import { useOverlayHost } from "@/lib/overlay-host";
+import { cn } from "@/lib/utils";
+
+interface DropdownMenuProps extends DropdownMenuPrimitive.RootProps {
+  children?: ReactNode;
+}
+
+interface DropdownMenuTriggerProps extends DropdownMenuPrimitive.TriggerProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+interface DropdownMenuContentProps {
+  className?: string;
+  children?: ReactNode;
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  /** Backdrop dim behind the menu. Defaults to true. */
+  overlay?: boolean;
+}
+
+interface DropdownMenuItemProps extends Omit<PressableProps, "children"> {
+  icon?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+type MenuActionsContextValue = {
+  close: () => void;
+};
+
+const MenuActionsContext = createContext<MenuActionsContextValue | null>(null);
+
+function useMenuActions() {
+  const ctx = useContext(MenuActionsContext);
+  if (!ctx) {
+    throw new Error("DropdownMenuItem must be used within DropdownMenu");
+  }
+  return ctx;
+}
+
+function MenuActionsBridge({ children }: { children: ReactNode }) {
+  const { onOpenChange, setTriggerPosition, setContentLayout } =
+    DropdownMenuPrimitive.useRootContext();
+
+  const value = useMemo<MenuActionsContextValue>(
+    () => ({
+      close: () => {
+        setTriggerPosition(null);
+        setContentLayout(null);
+        onOpenChange(false);
+      },
+    }),
+    [onOpenChange, setContentLayout, setTriggerPosition]
+  );
+
+  return (
+    <MenuActionsContext.Provider value={value}>{children}</MenuActionsContext.Provider>
+  );
+}
+
+function DropdownMenu({ children, ...props }: DropdownMenuProps) {
+  return (
+    <DropdownMenuPrimitive.Root {...props}>
+      <MenuActionsBridge>{children}</MenuActionsBridge>
+    </DropdownMenuPrimitive.Root>
+  );
+}
+
+const DropdownMenuTrigger = forwardRef<
+  DropdownMenuPrimitive.TriggerRef,
+  DropdownMenuTriggerProps
+>(function DropdownMenuTrigger({ className, children, style, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      ref={ref}
+      collapsable={false}
+      accessibilityRole="button"
+      className={cn("items-center justify-center", className)}
+      style={(state) => [
+        {
+          minWidth: 32,
+          minHeight: 32,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+        typeof style === "function" ? style(state) : style,
+      ]}
+      {...props}
+    >
+      {children}
+    </DropdownMenuPrimitive.Trigger>
+  );
+});
+
+/**
+ * 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.
+ */
+function DropdownMenuContent({
+  className,
+  align = "end",
+  sideOffset = 8,
+  overlay: showOverlay = true,
+  children,
+}: DropdownMenuContentProps) {
+  const id = useId();
+  const overlay = useOverlayHost();
+  const { close } = useMenuActions();
+  const { open, triggerPosition } = DropdownMenuPrimitive.useRootContext();
+
+  useEffect(() => {
+    if (!open || !triggerPosition) {
+      overlay.unmount(id);
+      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>
+      );
+    });
+
+    return () => {
+      cancelled = true;
+      overlay.unmount(id);
+    };
+  }, [
+    align,
+    children,
+    className,
+    close,
+    id,
+    open,
+    overlay,
+    showOverlay,
+    sideOffset,
+    triggerPosition,
+  ]);
+
+  return null;
+}
+
+function DropdownMenuGroup({ className, children, ...props }: ViewProps) {
+  return (
+    <View className={cn("gap-0", className)} {...props}>
+      {children}
+    </View>
+  );
+}
+
+function DropdownMenuSeparator({ className, ...props }: ViewProps) {
+  return (
+    <View className={cn("my-1 h-px bg-gray-stroke-muted", className)} {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  icon,
+  children,
+  onPress,
+  ...props
+}: DropdownMenuItemProps) {
+  const { close } = useMenuActions();
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      className={cn(
+        "flex-row items-center gap-2 rounded-md px-3 py-2 active:bg-gray-background-soft",
+        className
+      )}
+      onPress={(event) => {
+        onPress?.(event);
+        close();
+      }}
+      {...props}
+    >
+      {icon ? (
+        <View className="size-4 shrink-0" pointerEvents="none">
+          {icon}
+        </View>
+      ) : null}
+      {typeof children === "string" ? (
+        <Text
+          numberOfLines={1}
+          className="flex-1 text-xs font-medium text-gray-foreground"
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+
+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,
+  },
+});
+
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+};
+export type {
+  DropdownMenuContentProps,
+  DropdownMenuItemProps,
+  DropdownMenuProps,
+  DropdownMenuTriggerProps,
+};