@medway-ui/native 1.0.3 → 1.1.1

package/src/components/Select.tsx

@@ -9,9 +9,10 @@ import React, {
 } from "react";
 import { View, Text, type ViewProps, type TextProps } from "react-native";
 import * as SelectPrimitive from "@rn-primitives/select";
-import { Check, ChevronDown, ChevronUp } from "@medway-ui/icons/native";
 import { cva } from "class-variance-authority";
 import { cn } from "@/lib/utils";
+import { Check, ChevronDown, ChevronUp } from "@medway-ui/icons/native";
+import { useThemeColor } from "@/hooks/useThemeColor";
 
 type SelectSize = "md" | "lg";
 
@@ -53,6 +54,11 @@ const selectVariants = cva(
   }
 );
 
+const SELECT_HEIGHT: Record<SelectSize, number> = {
+  lg: 48,
+  md: 40,
+};
+
 const SelectContext = createContext<SelectContextValue>({
   invalid: false,
   size: "lg",
@@ -71,20 +77,21 @@ function SelectWrapper({ className, ...props }: ViewProps) {
   return <View className={cn("relative flex-col gap-2", className)} {...props} />;
 }
 
-function SelectTrigger({ className, children, ...props }: SelectTriggerProps) {
+function SelectTrigger({ className, children, style, ...props }: SelectTriggerProps & { style?: ViewProps['style'] }) {
   const { invalid, size } = useContext(SelectContext);
+  const chevronSize = size === "lg" ? 24 : 20;
+  const chevronColor = useThemeColor("gray-foreground");
 
   return (
     <SelectPrimitive.Trigger
+      style={[{ height: SELECT_HEIGHT[size], minHeight: SELECT_HEIGHT[size] }, style]}
       className={cn(selectVariants({ size, invalid }), className)}
       {...props}
     >
       {children}
-      <ChevronDown
-        size={size === "lg" ? 24 : 20}
-        strokeWidth={1.6}
-        className="text-gray-foreground shrink-0"
-      />
+      {chevronColor && (
+        <ChevronDown width={chevronSize} height={chevronSize} strokeWidth={1.6} color={chevronColor} />
+      )}
     </SelectPrimitive.Trigger>
   );
 }
@@ -142,6 +149,7 @@ function SelectHeader({ className, ...props }: SelectPrimitive.LabelProps) {
 function SelectItem({ className, children, icon, label, ...props }: SelectItemProps) {
   const { size } = useContext(SelectContext);
   const resolvedLabel = label ?? (typeof children === "string" ? children : "");
+  const checkColor = useThemeColor("secondary-foreground");
 
   return (
     <SelectPrimitive.Item
@@ -163,7 +171,7 @@ function SelectItem({ className, children, icon, label, ...props }: SelectItemPr
       )}
       <SelectPrimitive.ItemText className="flex-1 text-sm font-medium text-gray-foreground" />
       <SelectPrimitive.ItemIndicator className="absolute right-2 h-3.5 w-3.5 items-center justify-center">
-        <Check size={14} strokeWidth={1.6} className="text-secondary-foreground" />
+        {checkColor && <Check width={14} height={14} strokeWidth={1.6} color={checkColor} />}
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   );
@@ -179,23 +187,27 @@ function SelectSeparator({ className, ...props }: SelectPrimitive.SeparatorProps
 }
 
 function SelectScrollUpButton({ className, ...props }: SelectPrimitive.ScrollUpButtonProps) {
+  const chevronColor = useThemeColor("gray-foreground");
+
   return (
     <SelectPrimitive.ScrollUpButton
       className={cn("items-center justify-center py-1", className)}
       {...props}
     >
-      <ChevronUp size={16} strokeWidth={1.6} className="text-gray-foreground" />
+      {chevronColor && <ChevronUp width={16} height={16} strokeWidth={1.6} color={chevronColor} />}
     </SelectPrimitive.ScrollUpButton>
   );
 }
 
 function SelectScrollDownButton({ className, ...props }: SelectPrimitive.ScrollDownButtonProps) {
+  const chevronColor = useThemeColor("gray-foreground");
+
   return (
     <SelectPrimitive.ScrollDownButton
       className={cn("items-center justify-center py-1", className)}
       {...props}
     >
-      <ChevronDown size={16} strokeWidth={1.6} className="text-gray-foreground" />
+      {chevronColor && <ChevronDown width={16} height={16} strokeWidth={1.6} color={chevronColor} />}
     </SelectPrimitive.ScrollDownButton>
   );
 }

package/src/components/Sheet.tsx

@@ -2,6 +2,7 @@ import { type ReactNode } from "react";
 import { View, ScrollView, type ViewProps } from "react-native";
 import * as DialogPrimitive from "@rn-primitives/dialog";
 import { CloseMd } from "@medway-ui/icons/native";
+import { useThemeColor } from "@/hooks/useThemeColor";
 import { cn } from "@/lib/utils";
 import { Separator } from "@/components/Separator";
 
@@ -62,33 +63,38 @@ function SheetContainer({
   showCloseButton = true,
   ...props
 }: SheetContainerProps) {
+  const closeIconColor = useThemeColor("gray-foreground");
+
   return (
     <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay
-          className={cn("bg-black/50", overlayPositionMap[side], overlayClassName)}
+      <DialogPrimitive.Overlay
+        className={cn("absolute inset-0 bg-black/50", overlayClassName)}
+      />
+      <DialogPrimitive.Content
+        className={cn(overlayPositionMap[side])}
+        {...props}
+      >
+        <View
+          className={cn(
+            "relative flex-col bg-background shadow-lg overflow-hidden",
+            contentSizeMap[side],
+            className
+          )}
         >
-          <DialogPrimitive.Content
-            className={cn(
-              "relative flex-col bg-background shadow-lg overflow-hidden",
-              contentSizeMap[side],
-              className
-            )}
-            {...props}
-          >
-            {children}
-            {showCloseButton && (
-              <DialogPrimitive.Close
-                className={cn(
-                  closeButtonPositionMap[side],
-                  "rounded-pill p-1.5 active:bg-gray-background-soft"
-                )}
-              >
-                <CloseMd size={16} className="text-gray-foreground" />
-              </DialogPrimitive.Close>
-            )}
-          </DialogPrimitive.Content>
-        </DialogPrimitive.Overlay>
-      </DialogPrimitive.Portal>
+          {children}
+          {showCloseButton && (
+            <DialogPrimitive.Close
+              className={cn(
+                closeButtonPositionMap[side],
+                "rounded-pill p-1.5 active:bg-gray-background-soft"
+              )}
+            >
+              {closeIconColor && <CloseMd width={16} height={16} color={closeIconColor} />}
+            </DialogPrimitive.Close>
+          )}
+        </View>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
   );
 }
 

package/src/components/Skeleton.tsx

@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+import { type ViewProps } from "react-native";
+import Animated, {
+  cancelAnimation,
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+
+import { cn } from "@/lib/utils";
+
+interface SkeletonProps extends ViewProps {
+  className?: string;
+}
+
+function Skeleton({ className, style, ...props }: SkeletonProps) {
+  const shimmer = useSharedValue(0);
+
+  useEffect(() => {
+    shimmer.value = withRepeat(
+      withTiming(1, { duration: 1200, easing: Easing.inOut(Easing.ease) }),
+      -1,
+      true
+    );
+    return () => cancelAnimation(shimmer);
+  }, [shimmer]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(shimmer.value, [0, 1], [0.35, 0.75]),
+  }));
+
+  return (
+    <Animated.View
+      style={[animatedStyle, style]}
+      className={cn("rounded-md bg-gray-150", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
+export type { SkeletonProps };

package/src/components/Switch.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, type ReactNode } from "react";
-import { View } from "react-native";
+import { View, type ViewStyle } from "react-native";
 import * as SwitchPrimitive from "@rn-primitives/switch";
 import Animated, {
   useSharedValue,
@@ -10,7 +10,12 @@ import Animated, {
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
-interface SwitchProps extends Omit<SwitchPrimitive.RootProps, "checked" | "onCheckedChange">, VariantProps<typeof switchVariants> {
+interface SwitchProps
+  extends Omit<
+      SwitchPrimitive.RootProps,
+      "checked" | "onCheckedChange" | "children"
+    >,
+    VariantProps<typeof switchVariants> {
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
@@ -30,6 +35,12 @@ const THUMB_TRANSLATE: Record<"sm" | "md" | "lg", number> = {
   lg: 19,
 };
 
+const SWITCH_TRACK: Record<"sm" | "md" | "lg", { width: number; height: number }> = {
+  sm: { width: 24, height: 16 },
+  md: { width: 32, height: 20 },
+  lg: { width: 40, height: 24 },
+};
+
 const switchVariants = cva(
   "rounded-full border-2 items-center shrink-0",
   {
@@ -60,9 +71,11 @@ function Switch({
   defaultChecked,
   onCheckedChange,
   disabled,
+  style,
   ...props
 }: SwitchProps) {
   const resolvedSize = size ?? "md";
+  const trackSize = SWITCH_TRACK[resolvedSize];
   const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
   const isControlled = checked !== undefined;
   const isChecked = isControlled ? (checked ?? false) : internalChecked;
@@ -83,9 +96,19 @@ function Switch({
   const hasIcons = checkedIcon || uncheckedIcon;
   const thumbSize = THUMB_SIZES[resolvedSize];
 
-  const handleCheckedChange = (val: boolean) => {
-    if (!isControlled) setInternalChecked(val);
-    onCheckedChange?.(val);
+  const handleCheckedChange = (nextChecked: boolean) => {
+    if (!isControlled) setInternalChecked(nextChecked);
+    onCheckedChange?.(nextChecked);
+  };
+
+  const trackStyle: ViewStyle = {
+    width: trackSize.width,
+    height: trackSize.height,
+    minWidth: trackSize.width,
+    minHeight: trackSize.height,
+    borderRadius: trackSize.height / 2,
+    borderWidth: 2,
+    justifyContent: "center",
   };
 
   return (
@@ -93,43 +116,52 @@ function Switch({
       checked={isChecked}
       onCheckedChange={handleCheckedChange}
       disabled={disabled}
+      style={(state) => [
+        trackStyle,
+        typeof style === "function" ? style(state) : style,
+      ]}
       className={cn(
         switchVariants({ size, variant }),
         disabled
           ? "bg-gray-background-soft-muted border-gray-stroke-muted"
           : isChecked
-          ? "bg-primary-background-fill border-transparent"
-          : "bg-surface-card border-gray-stroke-muted",
+            ? "bg-primary-background-fill border-primary-background-fill"
+            : "bg-surface-card border-gray-stroke-muted",
         className
       )}
       {...props}
     >
-      <Animated.View
-        style={[
-          thumbStyle,
-          {
-            width: thumbSize,
-            height: thumbSize,
-            borderRadius: thumbSize / 2,
-          },
-        ]}
-        className={cn(
-          disabled
-            ? "bg-gray-background-fill-muted"
-            : hasIcons
-            ? "bg-transparent"
-            : isChecked
-            ? "bg-primary-foreground-onfill"
-            : "bg-gray-foreground-muted"
-        )}
-      >
-        {hasIcons && (
-          <View className="flex-1 items-center justify-center">
-            {isChecked && checkedIcon}
-            {!isChecked && uncheckedIcon}
+      <SwitchPrimitive.Thumb asChild>
+        <Animated.View
+          style={[
+            thumbStyle,
+            {
+              width: thumbSize,
+              height: thumbSize,
+            },
+          ]}
+        >
+          <View
+            className={cn(
+              "flex-1 items-center justify-center rounded-full",
+              disabled
+                ? "bg-gray-background-fill-muted"
+                : hasIcons
+                  ? "bg-transparent"
+                  : isChecked
+                    ? "bg-primary-foreground-onfill"
+                    : "bg-gray-foreground-muted"
+            )}
+          >
+            {hasIcons ? (
+              <>
+                {isChecked && checkedIcon}
+                {!isChecked && uncheckedIcon}
+              </>
+            ) : null}
           </View>
-        )}
-      </Animated.View>
+        </Animated.View>
+      </SwitchPrimitive.Thumb>
     </SwitchPrimitive.Root>
   );
 }

package/src/components/ThemedIcon.tsx

@@ -0,0 +1,46 @@
+import type { ComponentType } from "react";
+
+import { useThemeColor, type ThemeColorToken } from "@/hooks/useThemeColor";
+
+type NativeIconProps = {
+  width?: number;
+  height?: number;
+  color?: string;
+  strokeWidth?: number;
+  className?: string;
+};
+
+interface ThemedIconProps {
+  icon: ComponentType<NativeIconProps>;
+  size?: number;
+  colorToken: ThemeColorToken;
+  strokeWidth?: number;
+  className?: string;
+}
+
+/**
+ * Ícone @medway-ui/icons com cor vinda do theme (CSS variables / NativeWind).
+ * Substitui `size` + `className` nos SVGs, que não resolvem cor sozinhos.
+ */
+function ThemedIcon({
+  icon: Icon,
+  size = 24,
+  colorToken,
+  strokeWidth = 2,
+  className,
+}: ThemedIconProps) {
+  const color = useThemeColor(colorToken);
+
+  return (
+    <Icon
+      width={size}
+      height={size}
+      color={color}
+      strokeWidth={strokeWidth}
+      className={className}
+    />
+  );
+}
+
+export { ThemedIcon };
+export type { ThemedIconProps, NativeIconProps };

package/src/components/Toast.tsx

@@ -1,12 +1,5 @@
 import { useState, useEffect, type ReactElement, type ReactNode } from "react";
 import { View, Text, Pressable, type ViewProps } from "react-native";
-import {
-  Info,
-  CircleCheck,
-  TriangleWarning,
-  OctagonWarning,
-  CloseMd,
-} from "@medway-ui/icons/native";
 import { cva } from "class-variance-authority";
 import Animated, {
   useSharedValue,
@@ -16,8 +9,16 @@ import Animated, {
   runOnJS,
 } from "react-native-reanimated";
 import { cn } from "@/lib/utils";
+import {
+  CircleCheck,
+  CloseMd,
+  Info,
+  OctagonWarning,
+  TriangleWarning,
+} from "@medway-ui/icons/native";
 import { Button, type ButtonProps } from "@/components/Button";
 import { useToast } from "@/hooks/use-toast";
+import { useThemeColor } from "@/hooks/useThemeColor";
 
 type ToastVariant = "primary" | "secondary" | "success" | "warning" | "error";
 type ToastActionVariant = ToastVariant;
@@ -81,13 +82,21 @@ const toastActionButtonVariantMap: Record<ToastActionVariant, ButtonProps["varia
   error: "error-soft",
 };
 
-const variantIcons: Record<ToastVariant, typeof Info> = {
+const toastIconColorTokens: Record<ToastVariant, string> = {
+  primary: "primary-foreground",
+  secondary: "secondary-foreground",
+  success: "feedback-success-foreground",
+  warning: "feedback-warning-foreground",
+  error: "feedback-error-foreground",
+};
+
+const variantIcons = {
   primary: Info,
   secondary: Info,
   success: CircleCheck,
   warning: TriangleWarning,
   error: OctagonWarning,
-};
+} as const;
 
 function ToastItem({
   className,
@@ -106,6 +115,8 @@ function ToastItem({
     transform: [{ translateY: translateY.value }],
     opacity: opacity.value,
   }));
+  const iconColor = useThemeColor(toastIconColorTokens[variant]);
+  const closeIconColor = useThemeColor("gray-foreground");
 
   useEffect(() => {
     if (open) {
@@ -127,8 +138,8 @@ function ToastItem({
   return (
     <Animated.View style={animatedStyle}>
       <View className={cn(toastVariants({ variant }), className)} {...props}>
-        {showIcon && (
-          <IconComponent size={20} className={cn(toastIconVariants({ variant }))} />
+        {showIcon && iconColor && (
+          <IconComponent width={20} height={20} color={iconColor} />
         )}
         <View className="flex-1 flex-row items-center justify-between gap-3">
           {children}
@@ -137,7 +148,7 @@ function ToastItem({
           onPress={() => onOpenChange?.(false)}
           className="rounded-pill p-1 active:bg-gray-background-soft"
         >
-          <CloseMd size={16} className="text-gray-foreground" />
+          {closeIconColor && <CloseMd width={16} height={16} color={closeIconColor} />}
         </Pressable>
       </View>
     </Animated.View>
@@ -216,6 +227,8 @@ function ToastViewport({ className, children, ...props }: ViewProps & { children
 }
 
 function ToastClose({ className, onPress, label = "Close", ...props }: ToastCloseProps) {
+  const closeIconColor = useThemeColor("gray-foreground");
+
   return (
     <Pressable
       onPress={onPress}
@@ -223,7 +236,7 @@ function ToastClose({ className, onPress, label = "Close", ...props }: ToastClos
       className={cn("rounded-pill p-1 active:bg-gray-background-soft", className)}
       {...props}
     >
-      <CloseMd size={16} className="text-gray-foreground" />
+      {closeIconColor && <CloseMd width={16} height={16} color={closeIconColor} />}
     </Pressable>
   );
 }

package/src/components/Tooltip.tsx

@@ -27,6 +27,7 @@ function TooltipContent({
 }: TooltipContentProps) {
   return (
     <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Overlay className="absolute inset-0" />
       <TooltipPrimitive.Content
         sideOffset={sideOffset}
         className={cn(

package/src/hooks/useThemeColor.ts

@@ -0,0 +1,79 @@
+import { useColorScheme, useUnstableNativeVariable } from "nativewind";
+
+/** Token sem prefixo `--color-` (ex.: `gray-foreground`, `primary-background-fill`). */
+type ThemeColorToken = string;
+
+/** Fallback quando NativeWind não resolve cadeias `var()` — light mode. */
+const LIGHT_COLOR_ALIAS_MAP: Record<string, string> = {
+  "content-title": "primary",
+  "content-paragraph": "gray-600",
+  "gray-foreground": "gray-600",
+  "primary-foreground": "primary",
+  "secondary-foreground": "secondary-darken-3",
+  "surface-card": "white",
+  "gray-foreground-muted": "gray-450",
+  "gray-stroke-muted": "gray-100",
+  "gray-background-fill-muted": "gray-400",
+  "gray-background-soft-muted": "gray-30",
+  "primary-foreground-onfill": "white",
+  "primary-background-fill": "primary",
+};
+
+/** Fallback — dark mode (espelha tokens.css `.dark`). */
+const DARK_COLOR_ALIAS_MAP: Record<string, string> = {
+  "content-title": "white",
+  "content-paragraph": "gray-150",
+  "gray-foreground": "gray-100",
+  "primary-foreground": "gray-100",
+  "secondary-foreground": "secondary-lighten-1",
+  "surface-card": "gray-850",
+  "gray-foreground-muted": "gray-150",
+  "gray-stroke-muted": "gray-700",
+  "gray-background-fill-muted": "gray-300",
+  "gray-background-soft-muted": "gray-700",
+  "primary-foreground-onfill": "primary",
+  "primary-background-fill": "gray-70",
+};
+
+function toCssVariable(token: ThemeColorToken): string {
+  return token.startsWith("--") ? token : `--color-${token}`;
+}
+
+function toTokenName(token: ThemeColorToken): string {
+  return token.startsWith("--color-") ? token.slice("--color-".length) : token;
+}
+
+function toResolvedCssVariable(
+  token: ThemeColorToken,
+  aliasMap: Record<string, string>
+): string {
+  const tokenName = toTokenName(token);
+  return toCssVariable(aliasMap[tokenName] ?? tokenName);
+}
+
+function isResolvedColor(value: unknown): value is string {
+  return typeof value === "string" && !value.startsWith("var(");
+}
+
+/**
+ * Resolve uma cor semântica do design system (tokens.native.css) em runtime.
+ * Use quando a prop `color` for obrigatória (SVG, stroke Reanimated, etc.).
+ */
+function useThemeColor(token: ThemeColorToken): string | undefined {
+  const { colorScheme } = useColorScheme();
+  const aliasMap =
+    colorScheme === "dark" ? DARK_COLOR_ALIAS_MAP : LIGHT_COLOR_ALIAS_MAP;
+
+  const value = useUnstableNativeVariable(toCssVariable(token));
+  const resolvedValue = useUnstableNativeVariable(
+    toResolvedCssVariable(token, aliasMap)
+  );
+
+  if (isResolvedColor(value)) return value;
+  if (isResolvedColor(resolvedValue)) return resolvedValue;
+
+  return undefined;
+}
+
+export { useThemeColor, toCssVariable };
+export type { ThemeColorToken };

package/src/index.ts

@@ -17,6 +17,56 @@ export type { AlertButtonProps, AlertProps } from "@/components/Alert";
 export { Badge, badgeVariants } from "@/components/Badge";
 export type { BadgeAnimation, BadgeProps } from "@/components/Badge";
 
+// Avatar
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  avatarVariants,
+} from "@/components/Avatar";
+export type {
+  AvatarFallbackProps,
+  AvatarImageProps,
+  AvatarProps,
+} from "@/components/Avatar";
+
+// FallbackImage
+export { FallbackImage } from "@/components/FallbackImage";
+export type { FallbackImageProps } from "@/components/FallbackImage";
+
+// CardNews
+export {
+  CardNews,
+  CardNewsAuthor,
+  CardNewsBody,
+  CardNewsContent,
+  CardNewsDate,
+  CardNewsDescription,
+  CardNewsFooter,
+  CardNewsHeader,
+  CardNewsImage,
+  CardNewsResourceItem,
+  CardNewsResources,
+  CardNewsSkeleton,
+  CardNewsTags,
+  CardNewsTitle,
+} from "@/components/CardNews";
+export type {
+  CardNewsAuthorProps,
+  CardNewsDateProps,
+  CardNewsImageProps,
+  CardNewsProps,
+  CardNewsResourcesProps,
+} from "@/components/CardNews";
+
+// EmptyState
+export { EmptyState } from "@/components/EmptyState";
+export type { EmptyStateProps } from "@/components/EmptyState";
+
+// PageHeader
+export { PageHeader } from "@/components/PageHeader";
+export type { PageHeaderProps } from "@/components/PageHeader";
+
 // Button
 export { Button, buttonVariants, buttonTextVariants } from "@/components/Button";
 export type { ButtonProps } from "@/components/Button";
@@ -84,6 +134,10 @@ export type { SelectProps, SelectItemProps, SelectSize } from "@/components/Sele
 export { Separator } from "@/components/Separator";
 export type { SeparatorProps } from "@/components/Separator";
 
+// Skeleton
+export { Skeleton } from "@/components/Skeleton";
+export type { SkeletonProps } from "@/components/Skeleton";
+
 // Switch
 export { Switch, switchVariants } from "@/components/Switch";
 export type { SwitchProps } from "@/components/Switch";
@@ -191,3 +245,9 @@ export type { TooltipContentProps } from "@/components/Tooltip";
 
 // Hooks
 export { useToast, toast } from "@/hooks/use-toast";
+export { useThemeColor } from "@/hooks/useThemeColor";
+export type { ThemeColorToken } from "@/hooks/useThemeColor";
+
+// Theme-aware icon helper
+export { ThemedIcon } from "@/components/ThemedIcon";
+export type { ThemedIconProps } from "@/components/ThemedIcon";