@medway-ui/native 1.1.2 → 1.2.0

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,
+};

package/src/components/EmptyState.tsx

@@ -1,15 +1,7 @@
 import { type ReactNode } from "react";
 import { View, type ViewProps } from "react-native";
 
-import {
-  Alert,
-  AlertActions,
-  AlertContainer,
-  AlertContent,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-} from "@/components/Alert";
+import { Text } from "@/components/Text";
 import { cn } from "@/lib/utils";
 
 interface EmptyStateProps extends ViewProps {
@@ -26,29 +18,35 @@ function EmptyState({
   title,
   description,
   action,
-  variant = "regular",
+  variant: _variant = "regular",
   ...props
 }: EmptyStateProps) {
   return (
     <View
       className={cn(
-        "items-center gap-6 rounded-lg border border-gray-stroke-muted bg-surface-card p-8",
+        "w-full items-center gap-6 rounded-xl border border-gray-stroke-muted bg-surface-card p-8 shadow-sm",
         className
       )}
       {...props}
     >
-      <Alert variant={variant} className="border-0 bg-transparent p-0">
-        <AlertContainer>
-          {icon ? <AlertIcon icon={icon} /> : null}
-          <AlertContent>
-            <AlertTitle>{title}</AlertTitle>
-            {description ? (
-              <AlertDescription>{description}</AlertDescription>
-            ) : null}
-          </AlertContent>
-        </AlertContainer>
-        {action ? <AlertActions>{action}</AlertActions> : null}
-      </Alert>
+      {icon ? (
+        <View className="size-16 items-center justify-center rounded-full bg-gray-background-soft">
+          {icon}
+        </View>
+      ) : null}
+
+      <View className="w-full items-center gap-4">
+        <Text className="text-center text-lg font-semibold text-primary-foreground">
+          {title}
+        </Text>
+        {description ? (
+          <Text className="text-center text-sm font-medium text-primary-foreground-muted">
+            {description}
+          </Text>
+        ) : null}
+      </View>
+
+      {action ? <View className="w-full">{action}</View> : null}
     </View>
   );
 }

package/src/components/Feed.tsx

@@ -0,0 +1,96 @@
+import { type ReactNode } from "react";
+import { TextInput, View, type TextInputProps, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
+
+import { InputText, inputVariants } from "@/components/Input";
+import { cn } from "@/lib/utils";
+
+interface FeedProps extends ViewProps {
+  children?: ReactNode;
+}
+
+interface FeedTitleProps extends ViewProps {
+  children?: ReactNode;
+}
+
+interface FeedComposerProps extends Omit<TextInputProps, "value" | "defaultValue"> {
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: (value: string) => void;
+  maxLength?: number;
+  placeholder?: string;
+  iconLeft?: ReactNode;
+}
+
+function Feed({ className, children, ...props }: FeedProps) {
+  return (
+    <View className={cn("gap-3", className)} {...props}>
+      {children}
+    </View>
+  );
+}
+
+function FeedTitle({ className, children, ...props }: FeedTitleProps) {
+  return (
+    <Text
+      className={cn("text-lg font-medium text-primary-foreground", className)}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+
+function FeedComposer({
+  className,
+  value,
+  defaultValue,
+  onChangeText,
+  maxLength = 120,
+  placeholder = "Diga alguma coisa",
+  iconLeft,
+  editable = true,
+  ...props
+}: FeedComposerProps) {
+  const currentLength = (value ?? defaultValue ?? "").length;
+
+  return (
+    <View className={cn("gap-1", className)}>
+      <View className="relative flex-row items-center">
+        {iconLeft ? (
+          <View className="absolute left-4 z-10 size-6">{iconLeft}</View>
+        ) : null}
+        <TextInput
+          multiline
+          textAlignVertical="top"
+          maxLength={maxLength}
+          value={value}
+          defaultValue={defaultValue}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          editable={editable}
+          className={cn(
+            inputVariants({
+              size: "lg",
+              invalid: false,
+              focused: false,
+              disabled: !editable,
+            }),
+            "min-h-12 py-3 font-medium",
+            iconLeft ? "pl-12" : ""
+          )}
+          accessibilityLabel={placeholder}
+          {...props}
+          style={[{ fontFamily: "MontserratMedium" }, props.style]}
+        />
+      </View>
+      <InputText className="text-right text-xs font-medium text-gray-foreground">
+        {currentLength} / {maxLength}
+      </InputText>
+    </View>
+  );
+}
+
+export { Feed, FeedComposer, FeedTitle };
+export type { FeedComposerProps, FeedProps, FeedTitleProps };