@medway-ui/native 1.1.2 → 1.2.0

package/src/components/Switch.tsx

@@ -9,6 +9,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
+import { useThemeColor } from "@/hooks/useThemeColor";
 
 interface SwitchProps
   extends Omit<
@@ -35,31 +36,28 @@ const THUMB_TRANSLATE: Record<"sm" | "md" | "lg", number> = {
   lg: 19,
 };
 
-const SWITCH_TRACK: Record<"sm" | "md" | "lg", { width: number; height: number }> = {
+const SWITCH_DIMENSIONS: 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",
-  {
-    variants: {
-      variant: {
-        regular: "",
-      },
-      size: {
-        sm: "h-4 w-6",
-        md: "h-5 w-8",
-        lg: "h-6 w-10",
-      },
+const switchVariants = cva("rounded-full border-2 items-center shrink-0", {
+  variants: {
+    variant: {
+      regular: "",
     },
-    defaultVariants: {
-      variant: "regular",
-      size: "md",
+    size: {
+      sm: "h-4 w-6",
+      md: "h-5 w-8",
+      lg: "h-6 w-10",
     },
-  }
-);
+  },
+  defaultVariants: {
+    variant: "regular",
+    size: "md",
+  },
+});
 
 function Switch({
   className,
@@ -75,25 +73,33 @@ function Switch({
   ...props
 }: SwitchProps) {
   const resolvedSize = size ?? "md";
-  const trackSize = SWITCH_TRACK[resolvedSize];
+  const dimensions = SWITCH_DIMENSIONS[resolvedSize];
   const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
   const isControlled = checked !== undefined;
   const isChecked = isControlled ? (checked ?? false) : internalChecked;
 
+  const trackOn = useThemeColor("primary-background-fill");
+  const trackOff = useThemeColor("surface-card");
+  const trackDisabled = useThemeColor("gray-background-soft-muted");
+  const trackBorder = useThemeColor("gray-stroke-muted");
+  const thumbOn = useThemeColor("primary-foreground-onfill");
+  const thumbOff = useThemeColor("gray-foreground-muted");
+  const thumbDisabled = useThemeColor("gray-background-fill-muted");
+
   const translateX = useSharedValue(isChecked ? THUMB_TRANSLATE[resolvedSize] : 2);
 
   useEffect(() => {
-    translateX.value = withTiming(
-      isChecked ? THUMB_TRANSLATE[resolvedSize] : 2,
-      { duration: 180, easing: Easing.out(Easing.ease) }
-    );
+    translateX.value = withTiming(isChecked ? THUMB_TRANSLATE[resolvedSize] : 2, {
+      duration: 180,
+      easing: Easing.out(Easing.ease),
+    });
   }, [isChecked, resolvedSize, translateX]);
 
   const thumbStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: translateX.value }],
   }));
 
-  const hasIcons = checkedIcon || uncheckedIcon;
+  const hasIcons = Boolean(checkedIcon || uncheckedIcon);
   const thumbSize = THUMB_SIZES[resolvedSize];
 
   const handleCheckedChange = (nextChecked: boolean) => {
@@ -101,14 +107,33 @@ function Switch({
     onCheckedChange?.(nextChecked);
   };
 
-  const trackStyle: ViewStyle = {
-    width: trackSize.width,
-    height: trackSize.height,
-    minWidth: trackSize.width,
-    minHeight: trackSize.height,
-    borderRadius: trackSize.height / 2,
+  const trackBackgroundColor = disabled
+    ? trackDisabled
+    : isChecked
+      ? trackOn
+      : trackOff;
+
+  const trackBorderColor = disabled || !isChecked ? trackBorder : "transparent";
+
+  const thumbBackgroundColor = disabled
+    ? thumbDisabled
+    : hasIcons
+      ? "transparent"
+      : isChecked
+        ? thumbOn
+        : thumbOff;
+
+  const rootStyle: ViewStyle = {
+    width: dimensions.width,
+    height: dimensions.height,
+    minWidth: dimensions.width,
+    minHeight: dimensions.height,
+    borderRadius: dimensions.height / 2,
     borderWidth: 2,
+    alignItems: "flex-start",
     justifyContent: "center",
+    backgroundColor: trackBackgroundColor,
+    borderColor: trackBorderColor,
   };
 
   return (
@@ -117,18 +142,10 @@ function Switch({
       onCheckedChange={handleCheckedChange}
       disabled={disabled}
       style={(state) => [
-        trackStyle,
+        rootStyle,
         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-primary-background-fill"
-            : "bg-surface-card border-gray-stroke-muted",
-        className
-      )}
+      className={cn(switchVariants({ size, variant }), className)}
       {...props}
     >
       <SwitchPrimitive.Thumb asChild>
@@ -138,28 +155,17 @@ function Switch({
             {
               width: thumbSize,
               height: thumbSize,
+              borderRadius: thumbSize / 2,
+              backgroundColor: thumbBackgroundColor,
             },
           ]}
         >
-          <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>
+          {hasIcons ? (
+            <View className="flex-1 items-center justify-center">
+              {isChecked && checkedIcon}
+              {!isChecked && uncheckedIcon}
+            </View>
+          ) : null}
         </Animated.View>
       </SwitchPrimitive.Thumb>
     </SwitchPrimitive.Root>

package/src/components/Tabs.tsx

@@ -0,0 +1,182 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { Pressable, View } from "react-native";
+
+import { Text } from "@/components/Text";
+import * as TabsPrimitive from "@rn-primitives/tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+type TabsVariant = "pill" | "filter";
+
+const TabsVariantContext = createContext<TabsVariant>("pill");
+
+function useTabsVariant() {
+  return useContext(TabsVariantContext);
+}
+
+const tabsTriggerVariants = cva(
+  "min-h-12 flex-row items-center justify-center rounded-pill px-4",
+  {
+    variants: {
+      active: {
+        true: "bg-primary-background-fill",
+        false: "bg-transparent",
+      },
+    },
+    defaultVariants: {
+      active: false,
+    },
+  }
+);
+
+const tabsTriggerTextVariants = cva("text-sm font-semibold", {
+  variants: {
+    active: {
+      true: "text-primary-foreground-onfill",
+      false: "text-primary-foreground",
+    },
+  },
+  defaultVariants: {
+    active: false,
+  },
+});
+
+interface TabsProps extends TabsPrimitive.RootProps {
+  className?: string;
+  children?: ReactNode;
+  variant?: TabsVariant;
+}
+
+interface TabsListProps extends TabsPrimitive.ListProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+interface TabsTriggerProps
+  extends TabsPrimitive.TriggerProps,
+    VariantProps<typeof tabsTriggerVariants> {
+  className?: string;
+  children?: ReactNode;
+  icon?: ReactNode;
+}
+
+interface TabsContentProps extends TabsPrimitive.ContentProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+function Tabs({ className, children, variant = "pill", ...props }: TabsProps) {
+  return (
+    <TabsVariantContext.Provider value={variant}>
+      <TabsPrimitive.Root asChild {...props}>
+        <View
+          className={cn(variant === "filter" ? "gap-8" : "gap-2", className)}
+        >
+          {children}
+        </View>
+      </TabsPrimitive.Root>
+    </TabsVariantContext.Provider>
+  );
+}
+
+function TabsList({ className, children, ...props }: TabsListProps) {
+  const variant = useTabsVariant();
+
+  if (variant === "filter") {
+    return (
+      <View className="rounded-lg border border-gray-stroke-muted bg-surface-section px-6 py-1">
+        <TabsPrimitive.List asChild {...props}>
+          <View className={cn("w-full flex-row items-center", className)}>
+            {children}
+          </View>
+        </TabsPrimitive.List>
+      </View>
+    );
+  }
+
+  return (
+    <TabsPrimitive.List asChild {...props}>
+      <View className={cn("flex-row items-center gap-2", className)}>
+        {children}
+      </View>
+    </TabsPrimitive.List>
+  );
+}
+
+function TabsTrigger({
+  className,
+  children,
+  icon,
+  value,
+  ...props
+}: TabsTriggerProps) {
+  const variant = useTabsVariant();
+  const { value: activeValue } = TabsPrimitive.useRootContext();
+  const isActive = activeValue === value;
+
+  if (variant === "filter") {
+    const hasLabel = typeof children === "string" && children.length > 0;
+    const showLabel = isActive && hasLabel;
+
+    return (
+      <TabsPrimitive.Trigger asChild value={value} {...props}>
+        <Pressable
+          className={cn(
+            "relative min-h-12 flex-1 flex-row items-center justify-center gap-3 py-3",
+            className
+          )}
+        >
+          {icon ? <View className="size-6 shrink-0">{icon}</View> : null}
+          {showLabel ? (
+            <Text className="text-md font-semibold text-primary-foreground">
+              {children}
+            </Text>
+          ) : !hasLabel ? (
+            children
+          ) : null}
+          {isActive ? (
+            <View className="absolute -bottom-1 left-0 right-0 h-0.5 rounded-t-pill bg-secondary-stroke-emphasis" />
+          ) : null}
+        </Pressable>
+      </TabsPrimitive.Trigger>
+    );
+  }
+
+  return (
+    <TabsPrimitive.Trigger asChild value={value} {...props}>
+      <Pressable
+        className={cn(tabsTriggerVariants({ active: isActive }), className)}
+      >
+        {typeof children === "string" ? (
+          <Text className={cn(tabsTriggerTextVariants({ active: isActive }))}>
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </Pressable>
+    </TabsPrimitive.Trigger>
+  );
+}
+
+function TabsContent({ className, children, ...props }: TabsContentProps) {
+  const variant = useTabsVariant();
+
+  return (
+    <TabsPrimitive.Content asChild {...props}>
+      <View className={cn(variant === "filter" ? "gap-8" : "pt-2", className)}>
+        {children}
+      </View>
+    </TabsPrimitive.Content>
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsTriggerVariants };
+export type {
+  TabsContentProps,
+  TabsListProps,
+  TabsProps,
+  TabsTriggerProps,
+  TabsVariant,
+};

package/src/components/Tag.tsx

@@ -1,5 +1,7 @@
 import { type ReactNode, type ReactElement } 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/Text.tsx

@@ -0,0 +1,66 @@
+import { forwardRef, type ComponentProps } from 'react';
+import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
+
+import { cn } from '@/lib/utils';
+
+/**
+ * Maps Medway UI token weight class names → expo-font family keys.
+ * RN cannot pick a weight inside a single "Montserrat" family the way the web does.
+ */
+const FONT_BY_WEIGHT_CLASS: Record<string, string> = {
+  'font-thin': 'MontserratLight',
+  'font-extralight': 'MontserratLight',
+  'font-light': 'MontserratLight',
+  'font-normal': 'Montserrat',
+  'font-regular': 'Montserrat',
+  'font-medium': 'MontserratMedium',
+  'font-semibold': 'MontserratSemiBold',
+  'font-bold': 'MontserratBold',
+  'font-extrabold': 'MontserratExtraBold',
+  'font-black': 'MontserratBlack',
+};
+
+function resolveMontserratFamily(className?: string): string {
+  if (!className) {
+    return 'Montserrat';
+  }
+
+  const tokens = className.split(/\s+/);
+  for (let i = tokens.length - 1; i >= 0; i -= 1) {
+    const family = FONT_BY_WEIGHT_CLASS[tokens[i]];
+    if (family) {
+      return family;
+    }
+  }
+
+  return 'Montserrat';
+}
+
+type TextProps = RNTextProps & {
+  className?: string;
+};
+
+/**
+ * NativeWind Text that always applies the Montserrat file for the token weight
+ * class (font-medium → MontserratMedium, etc.). Last style entry wins over
+ * className-derived styles so RN actually loads the correct TTF.
+ */
+const Text = forwardRef<RNText, TextProps>(function Text(
+  { className, style, ...props },
+  ref,
+) {
+  const fontFamily = resolveMontserratFamily(className);
+
+  return (
+    <RNText
+      ref={ref}
+      className={cn(className)}
+      style={[style, { fontFamily }]}
+      {...props}
+    />
+  );
+});
+
+export { Text, resolveMontserratFamily, FONT_BY_WEIGHT_CLASS };
+export type { TextProps };
+export type TextComponentProps = ComponentProps<typeof Text>;

package/src/components/Toast.tsx

@@ -1,5 +1,7 @@
 import { useState, useEffect, type ReactElement, type ReactNode } from "react";
-import { View, Text, Pressable, type ViewProps } from "react-native";
+import { View, Pressable, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
 import { cva } from "class-variance-authority";
 import Animated, {
   useSharedValue,

package/src/components/Tooltip.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
-import { Text } from "react-native";
+
+import { Text } from "@/components/Text";
 import * as TooltipPrimitive from "@rn-primitives/tooltip";
 import { cn } from "@/lib/utils";
 

package/src/hooks/useThemeColor.ts

@@ -1,46 +1,77 @@
-import { useColorScheme, useUnstableNativeVariable } from "nativewind";
+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",
+  'content-title': 'primary',
+  'content-paragraph': 'gray-600',
+  'gray-foreground': 'gray-600',
+  'primary-foreground': 'primary',
+  'secondary-foreground': 'secondary-darken-3',
+  'secondary-stroke-emphasis': 'secondary-darken-1',
+  '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',
+  'red-foreground': 'red-darken-2',
+  'go-foreground': 'go-darken-1',
 };
 
 /** 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",
+  'content-title': 'white',
+  'content-paragraph': 'gray-150',
+  'gray-foreground': 'gray-100',
+  'primary-foreground': 'gray-100',
+  'secondary-foreground': 'secondary-lighten-1',
+  'secondary-stroke-emphasis': 'secondary',
+  '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',
+  'red-foreground': 'red-lighten-3',
+  'go-foreground': 'go-lighten-5',
 };
 
+/** Fallback estático quando NativeWind não resolve `var(--color-*)` encadeado. */
+const THEME_COLOR_FALLBACKS: Record<string, string> = {
+  white: '#FFFFFF',
+  primary: 'rgba(0, 32, 91, 1)',
+  'gray-600': 'rgba(49, 57, 73, 1)',
+  'gray-450': 'rgba(90, 105, 135, 1)',
+  'gray-400': 'rgba(122, 133, 151, 1)',
+  'gray-100': 'rgba(231, 233, 239, 1)',
+  'gray-30': 'rgba(249, 250, 251, 1)',
+  'gray-150': 'rgba(206, 211, 222, 1)',
+  'gray-300': 'rgba(133, 146, 173, 1)',
+  'gray-700': 'rgba(33, 38, 49, 1)',
+  'gray-850': 'rgba(16, 19, 24, 1)',
+  'gray-70': 'rgba(240, 241, 245, 1)',
+  'red-darken-2': 'rgba(182, 27, 45, 1)',
+  'red-lighten-3': 'rgba(231, 131, 142, 1)',
+  'go-darken-1': 'rgba(141, 22, 77, 1)',
+  'go-lighten-5': 'rgba(237, 187, 192, 1)',
+  'secondary-darken-1': 'rgba(7, 171, 149, 1)',
+  'secondary-darken-3': 'rgba(13, 104, 92, 1)',
+  'secondary-lighten-1': 'rgba(22, 208, 118, 1)',
+};
+
+const DEFAULT_COLOR = '#3B4958';
+
 function toCssVariable(token: ThemeColorToken): string {
-  return token.startsWith("--") ? token : `--color-${token}`;
+  return token.startsWith('--') ? token : `--color-${token}`;
 }
 
 function toTokenName(token: ThemeColorToken): string {
-  return token.startsWith("--color-") ? token.slice("--color-".length) : token;
+  return token.startsWith('--color-') ? token.slice('--color-'.length) : token;
 }
 
 function toResolvedCssVariable(
@@ -52,17 +83,31 @@ function toResolvedCssVariable(
 }
 
 function isResolvedColor(value: unknown): value is string {
-  return typeof value === "string" && !value.startsWith("var(");
+  return typeof value === 'string' && !value.startsWith('var(');
+}
+
+function getFallbackColor(
+  token: ThemeColorToken,
+  aliasMap: Record<string, string>
+): string {
+  const tokenName = toTokenName(token);
+  const aliasToken = aliasMap[tokenName] ?? tokenName;
+
+  return (
+    THEME_COLOR_FALLBACKS[tokenName] ??
+    THEME_COLOR_FALLBACKS[aliasToken] ??
+    DEFAULT_COLOR
+  );
 }
 
 /**
  * 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 {
+function useThemeColor(token: ThemeColorToken): string {
   const { colorScheme } = useColorScheme();
   const aliasMap =
-    colorScheme === "dark" ? DARK_COLOR_ALIAS_MAP : LIGHT_COLOR_ALIAS_MAP;
+    colorScheme === 'dark' ? DARK_COLOR_ALIAS_MAP : LIGHT_COLOR_ALIAS_MAP;
 
   const value = useUnstableNativeVariable(toCssVariable(token));
   const resolvedValue = useUnstableNativeVariable(
@@ -72,8 +117,8 @@ function useThemeColor(token: ThemeColorToken): string | undefined {
   if (isResolvedColor(value)) return value;
   if (isResolvedColor(resolvedValue)) return resolvedValue;
 
-  return undefined;
+  return getFallbackColor(token, aliasMap);
 }
 
-export { useThemeColor, toCssVariable };
+export { useThemeColor, toCssVariable, getFallbackColor, DEFAULT_COLOR };
 export type { ThemeColorToken };