@medway-ui/native 1.6.1 → 1.7.1

package/src/components/Badge.tsx

@@ -1,5 +1,14 @@
-import { type ReactNode } from "react";
-import { View, type ViewProps } from "react-native";
+import { useEffect, type ReactNode } from "react";
+import { View, type LayoutChangeEvent, type ViewProps } from "react-native";
+import Animated, {
+  Easing,
+  cancelAnimation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
 
 import { Text } from "@/components/Text";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -72,12 +81,50 @@ const badgeTextVariants = cva("font-semibold", {
   },
 });
 
+const SHINE_DURATION_MS = 2000;
+
+function BadgeShine() {
+  const progress = useSharedValue(0);
+  const width = useSharedValue(0);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    width.value = event.nativeEvent.layout.width;
+  };
+
+  const bandStyle = useAnimatedStyle(() => ({
+    width: width.value / 2,
+    transform: [
+      { translateX: interpolate(progress.value, [0, 1], [width.value, -width.value / 2]) },
+      { skewX: "-20deg" },
+    ],
+  }));
+
+  useEffect(() => {
+    progress.value = withRepeat(
+      withTiming(1, { duration: SHINE_DURATION_MS, easing: Easing.linear }),
+      -1,
+      false
+    );
+    return () => cancelAnimation(progress);
+  }, [progress]);
+
+  return (
+    <View
+      pointerEvents="none"
+      className="absolute inset-0 overflow-hidden rounded-full"
+      onLayout={handleLayout}
+    >
+      <Animated.View className="absolute bottom-0 top-0 bg-white-24" style={bandStyle} />
+    </View>
+  );
+}
+
 function Badge({
   className,
   variant,
   size,
   icon,
-  animation: _animation,
+  animation,
   children,
   ...props
 }: BadgeProps) {
@@ -101,6 +148,7 @@ function Badge({
       )}
       {...props}
     >
+      {animation === "shine" ? <BadgeShine /> : null}
       {icon}
       {children != null && (
         <Text className={cn(badgeTextVariants({ variant, size }))}>

package/src/components/Button.tsx

@@ -6,6 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { Loading } from "@/components/Loading";
 import { Badge as BadgeComponent } from "@/components/Badge";
+import { type ThemeColorToken } from "@/hooks/useThemeColor";
 
 interface ButtonProps extends Omit<PressableProps, "children">, VariantProps<typeof buttonVariants> {
   children?: ReactNode;
@@ -17,6 +18,8 @@ interface ButtonProps extends Omit<PressableProps, "children">, VariantProps<typ
   alert?: string;
 }
 
+type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
+
 const ICON_ONLY_SIZES: Record<"sm" | "md" | "lg" | "xl", string> = {
   sm: "h-8 min-h-8 w-8",
   md: "h-10 min-h-10 w-10",
@@ -38,6 +41,38 @@ const ALERT_DOT_SIZES: Record<"sm" | "md" | "lg" | "xl", number> = {
   xl: 12,
 };
 
+const LOADING_SIZES: Record<"sm" | "md" | "lg" | "xl", number> = {
+  sm: 16,
+  md: 20,
+  lg: 20,
+  xl: 24,
+};
+
+const FILLED_LOADING_COLOR: ThemeColorToken = "gray-foreground-onfill";
+const SOFT_LOADING_COLOR: ThemeColorToken = "gray-foreground-muted";
+
+// Loading desabilita o Pressable, então o spinner segue a cor de texto do estado disabled.
+const LOADING_COLOR_TOKENS: Record<ButtonVariant, ThemeColorToken> = {
+  regular: FILLED_LOADING_COLOR,
+  "regular-soft": SOFT_LOADING_COLOR,
+  "regular-basic": SOFT_LOADING_COLOR,
+  emphasis: FILLED_LOADING_COLOR,
+  "emphasis-soft": SOFT_LOADING_COLOR,
+  "emphasis-basic": SOFT_LOADING_COLOR,
+  error: FILLED_LOADING_COLOR,
+  "error-soft": SOFT_LOADING_COLOR,
+  "error-basic": SOFT_LOADING_COLOR,
+  warning: FILLED_LOADING_COLOR,
+  "warning-soft": SOFT_LOADING_COLOR,
+  "warning-basic": SOFT_LOADING_COLOR,
+  success: FILLED_LOADING_COLOR,
+  "success-soft": SOFT_LOADING_COLOR,
+  "success-basic": SOFT_LOADING_COLOR,
+  outlined: SOFT_LOADING_COLOR,
+  gradient: FILLED_LOADING_COLOR,
+  medbrain: FILLED_LOADING_COLOR,
+};
+
 const buttonVariants = cva(
   "flex-row items-center justify-center gap-2 rounded-pill font-semibold",
   {
@@ -175,7 +210,10 @@ function Button({
         {loading ? (
           <>
             <View className="absolute">
-              <Loading size={resolvedSize === "sm" ? 16 : resolvedSize === "xl" ? 24 : 20} />
+              <Loading
+                size={LOADING_SIZES[resolvedSize]}
+                colorToken={LOADING_COLOR_TOKENS[resolvedVariant]}
+              />
             </View>
             <View className="opacity-0 flex-row items-center gap-2">
               {iconLeft}

package/src/components/Carousel.tsx

@@ -5,6 +5,7 @@ import { Text } from "@/components/Text";
 import { ChevronLeftMd, ChevronRightMd } from "@medway-ui/icons/native";
 
 import { Button } from "@/components/Button";
+import { useThemeColor } from "@/hooks/useThemeColor";
 import { cn } from "@/lib/utils";
 
 interface CarouselProps extends ViewProps {
@@ -31,13 +32,23 @@ interface CarouselMetricSlideProps extends ViewProps {
   description: string;
 }
 
+function getSlidePositionLabel(slideIndex?: number, slideCount?: number) {
+  if (slideIndex === undefined || slideCount === undefined) return undefined;
+  return `Slide ${slideIndex + 1} de ${slideCount}`;
+}
+
 function Carousel({
   className,
   children,
+  slideIndex,
+  slideCount,
   onPrevious,
   onNext,
   ...props
 }: CarouselProps) {
+  const chevronColor = useThemeColor("primary-foreground");
+  const slidePositionLabel = getSlidePositionLabel(slideIndex, slideCount);
+
   return (
     <View
       className={cn(
@@ -50,18 +61,21 @@ function Carousel({
         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" />}
+        iconLeft={<ChevronLeftMd width={20} height={20} color={chevronColor} />}
         onPress={onPrevious}
         accessibilityLabel="Slide anterior"
       />
-      <View className="h-full min-w-0 flex-1 items-center justify-center px-4">
+      <View
+        className="h-full min-w-0 flex-1 items-center justify-center px-4"
+        accessibilityLabel={slidePositionLabel}
+      >
         {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" />}
+        iconLeft={<ChevronRightMd width={20} height={20} color={chevronColor} />}
         onPress={onNext}
         accessibilityLabel="Próximo slide"
       />

package/src/components/Checkbox.tsx

@@ -4,6 +4,7 @@ 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 { getMinTouchHitSlop } from "@/lib/touch-target";
 import { Check, RemoveMinus } from "@medway-ui/icons/native";
 import { useThemeColor } from "@/hooks/useThemeColor";
 
@@ -113,6 +114,7 @@ function Checkbox({
       checked={isChecked}
       onCheckedChange={handleCheckedChange}
       disabled={disabled}
+      hitSlop={getMinTouchHitSlop(dimension)}
       style={(state) => [
         rootStyle,
         typeof style === "function" ? style(state) : style,

package/src/components/Chip.tsx

@@ -0,0 +1,227 @@
+import { type ReactNode } from "react";
+import { Pressable, View } from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CloseSm } from "@medway-ui/icons/native";
+
+import { Text } from "@/components/Text";
+import { ThemedIcon } from "@/components/ThemedIcon";
+import { cn } from "@/lib/utils";
+
+const chipVariants = cva(
+  "flex-row shrink-0 items-center justify-center rounded-sm",
+  {
+    variants: {
+      size: {
+        sm: "gap-2 px-3 py-2",
+        md: "gap-2.5 px-3.5 py-2.5",
+        lg: "gap-3 px-4 py-3",
+      },
+      disabled: { true: "", false: "" },
+    },
+    defaultVariants: { size: "lg", disabled: false },
+  }
+);
+
+const chipBackgroundVariants = cva("", {
+  variants: {
+    variant: {
+      regular: "bg-primary-background-fill",
+      "regular-soft": "bg-primary-background-soft",
+      emphasis: "bg-secondary-background-fill",
+      "emphasis-soft": "bg-secondary-background-soft",
+      gray: "bg-gray-background-fill",
+      "gray-soft": "bg-gray-background-soft",
+      success: "bg-green-background-fill",
+      "success-soft": "bg-green-background-soft",
+      error: "bg-red-background-fill",
+      "error-soft": "bg-red-background-soft",
+      warning: "bg-yellow-background-fill",
+      "warning-soft": "bg-yellow-background-soft",
+      go: "bg-go-background-fill",
+      "go-soft": "bg-go-background-soft",
+      cm: "bg-cm-background-fill",
+      "cm-soft": "bg-cm-background-soft",
+      cir: "bg-cir-background-fill",
+      "cir-soft": "bg-cir-background-soft",
+      ped: "bg-ped-background-fill",
+      "ped-soft": "bg-ped-background-soft",
+      prev: "bg-prev-background-fill",
+      "prev-soft": "bg-prev-background-soft",
+      ia: "bg-secondary-background-fill",
+      "ia-soft": "bg-secondary-background-soft",
+    },
+    disabled: {
+      true: "bg-gray-background-soft-muted",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: undefined,
+      disabled: false,
+      className: "bg-surface-elevated shadow-sm",
+    },
+  ],
+  defaultVariants: { disabled: false },
+});
+
+const chipTextVariants = cva("text-center font-semibold", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-md",
+    },
+    variant: {
+      regular: "text-primary-foreground-onfill",
+      "regular-soft": "text-primary-foreground",
+      emphasis: "text-secondary-foreground-onfill",
+      "emphasis-soft": "text-secondary-foreground",
+      gray: "text-gray-foreground-onfill",
+      "gray-soft": "text-gray-foreground",
+      success: "text-green-foreground-onfill",
+      "success-soft": "text-green-foreground",
+      error: "text-red-foreground-onfill",
+      "error-soft": "text-red-foreground",
+      warning: "text-yellow-foreground-onfill",
+      "warning-soft": "text-yellow-foreground",
+      go: "text-go-foreground-onfill",
+      "go-soft": "text-go-foreground",
+      cm: "text-cm-foreground-onfill",
+      "cm-soft": "text-cm-foreground",
+      cir: "text-cir-foreground-onfill",
+      "cir-soft": "text-cir-foreground",
+      ped: "text-ped-foreground-onfill",
+      "ped-soft": "text-ped-foreground",
+      prev: "text-prev-foreground-onfill",
+      "prev-soft": "text-prev-foreground",
+      ia: "text-primary-foreground-onfill",
+      "ia-soft": "text-secondary-foreground",
+    },
+    disabled: {
+      true: "font-medium text-gray-foreground-muted",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: undefined,
+      disabled: false,
+      className: "text-primary-foreground",
+    },
+  ],
+  defaultVariants: { size: "lg", disabled: false },
+});
+
+type ChipSize = NonNullable<VariantProps<typeof chipVariants>["size"]>;
+type ChipVariant = NonNullable<
+  VariantProps<typeof chipBackgroundVariants>["variant"]
+>;
+
+const CHIP_ICON_SIZE: Record<ChipSize, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+};
+
+const CHIP_ICON_COLOR_TOKEN: Record<ChipVariant, string> = {
+  regular: "primary-foreground-onfill",
+  "regular-soft": "primary-foreground",
+  emphasis: "secondary-foreground-onfill",
+  "emphasis-soft": "secondary-foreground",
+  gray: "gray-foreground-onfill",
+  "gray-soft": "gray-foreground",
+  success: "green-foreground-onfill",
+  "success-soft": "green-foreground",
+  error: "red-foreground-onfill",
+  "error-soft": "red-foreground",
+  warning: "yellow-foreground-onfill",
+  "warning-soft": "yellow-foreground",
+  go: "go-foreground-onfill",
+  "go-soft": "go-foreground",
+  cm: "cm-foreground-onfill",
+  "cm-soft": "cm-foreground",
+  cir: "cir-foreground-onfill",
+  "cir-soft": "cir-foreground",
+  ped: "ped-foreground-onfill",
+  "ped-soft": "ped-foreground",
+  prev: "prev-foreground-onfill",
+  "prev-soft": "prev-foreground",
+  ia: "primary-foreground-onfill",
+  "ia-soft": "secondary-foreground",
+};
+
+interface ChipProps
+  extends Omit<VariantProps<typeof chipVariants>, "disabled"> {
+  children: ReactNode;
+  variant?: ChipVariant;
+  disabled?: boolean;
+  onPress?: () => void;
+  onDismiss?: () => void;
+  dismissAccessibilityLabel?: string;
+  className?: string;
+}
+
+function Chip({
+  children,
+  size = "lg",
+  variant,
+  disabled = false,
+  onPress,
+  onDismiss,
+  dismissAccessibilityLabel,
+  className,
+}: ChipProps) {
+  const iconSize = CHIP_ICON_SIZE[size ?? "lg"];
+  const variantIconColor = variant
+    ? CHIP_ICON_COLOR_TOKEN[variant]
+    : "primary-foreground";
+  const iconColor = disabled ? "gray-foreground-muted" : variantIconColor;
+
+  const containerClass = cn(
+    chipVariants({ size, disabled }),
+    chipBackgroundVariants({ variant, disabled }),
+    className
+  );
+
+  const content = (
+    <>
+      <Text className={cn(chipTextVariants({ size, variant, disabled }))}>
+        {children}
+      </Text>
+      {onDismiss ? (
+        <Pressable
+          onPress={onDismiss}
+          disabled={disabled}
+          accessibilityRole="button"
+          accessibilityLabel={dismissAccessibilityLabel ?? "Remover"}
+          hitSlop={6}
+        >
+          <ThemedIcon
+            icon={CloseSm as never}
+            size={iconSize}
+            colorToken={iconColor}
+          />
+        </Pressable>
+      ) : null}
+    </>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityRole="button"
+        className={containerClass}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return <View className={containerClass}>{content}</View>;
+}
+
+export { Chip, chipVariants, chipBackgroundVariants, chipTextVariants };
+export type { ChipProps, ChipSize, ChipVariant };

package/src/components/Choice.tsx

@@ -0,0 +1,139 @@
+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 ChoiceSize = "sm" | "md" | "lg";
+
+type ChoiceTheme =
+  | "gray"
+  | "primary"
+  | "secondary"
+  | "green"
+  | "red"
+  | "yellow"
+  | "cm"
+  | "go"
+  | "cir"
+  | "ped"
+  | "prev";
+
+interface ChoiceProps {
+  label: string;
+  selected?: boolean;
+  disabled?: boolean;
+  size?: ChoiceSize;
+  theme?: ChoiceTheme;
+  icon?: ReactNode;
+  onPress?: () => void;
+  className?: string;
+}
+
+const SIZE_MAP: Record<
+  ChoiceSize,
+  { 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 THEME_SELECTED_OUTER_BG: Record<ChoiceTheme, string> = {
+  gray: "bg-gray-background-soft",
+  primary: "bg-primary-background-fill",
+  secondary: "bg-secondary-background-fill",
+  green: "bg-green-background-fill",
+  red: "bg-red-background-fill",
+  yellow: "bg-yellow-background-fill",
+  cm: "bg-cm-background-fill",
+  go: "bg-go-background-fill",
+  cir: "bg-cir-background-fill-emphasis",
+  ped: "bg-ped-background-fill-emphasis",
+  prev: "bg-prev-background-fill",
+};
+
+const THEME_CHECK_COLOR_TOKEN: Record<ChoiceTheme, string> = {
+  gray: "secondary-foreground",
+  primary: "primary-foreground",
+  secondary: "secondary-foreground",
+  green: "green-foreground",
+  red: "red-foreground",
+  yellow: "yellow-foreground",
+  cm: "cm-foreground",
+  go: "go-foreground",
+  cir: "cir-foreground",
+  ped: "ped-foreground",
+  prev: "prev-foreground",
+};
+
+const SHADOW_STYLE = {
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.08,
+  shadowRadius: 4,
+  elevation: 2,
+};
+
+function Choice({
+  label,
+  selected = false,
+  disabled = false,
+  size = "md",
+  theme = "gray",
+  icon,
+  onPress,
+  className,
+}: ChoiceProps) {
+  const sz = SIZE_MAP[size] ?? SIZE_MAP.md;
+  const shadowColor = useThemeColor("gray-700");
+
+  const outerBg = disabled
+    ? "bg-gray-background-soft-muted"
+    : selected
+      ? THEME_SELECTED_OUTER_BG[theme]
+      : "bg-gray-background-soft";
+
+  const textClass = disabled
+    ? "font-medium text-gray-foreground-muted"
+    : selected
+      ? "font-semibold text-primary-foreground"
+      : "font-medium text-gray-foreground";
+
+  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)}>{label}</Text>
+        {selected ? (
+          <View className="shrink-0">
+            <ThemedIcon
+              icon={MedwayIcons.Check}
+              size={sz.icon}
+              colorToken={THEME_CHECK_COLOR_TOKEN[theme]}
+            />
+          </View>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+export { Choice };
+export type { ChoiceProps, ChoiceTheme };

package/src/components/Dialog.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, isValidElement, cloneElement, type ReactElement } from "react";
-import { View, Text, ScrollView, type ViewProps } from "react-native";
+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";
@@ -43,7 +43,7 @@ function DialogClose({ ...props }: DialogPrimitive.CloseProps) {
 function DialogOverlay({ className, ...props }: DialogPrimitive.OverlayProps) {
   return (
     <DialogPrimitive.Overlay
-      className={cn("absolute inset-0 bg-black/50", className)}
+      className={cn("absolute inset-0 bg-black-48", className)}
       {...props}
     />
   );
@@ -61,7 +61,7 @@ function DialogContainer({
   return (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className={cn("absolute inset-0 bg-black/50", overlayClassName)}
+        className={cn("absolute inset-0 bg-black-48", overlayClassName)}
       />
       <DialogPrimitive.Content
         className="absolute inset-0 items-center justify-center px-4"
@@ -75,7 +75,12 @@ function DialogContainer({
         >
           {children}
           {showCloseButton && (
-            <DialogPrimitive.Close className="absolute right-3 top-3 rounded-pill p-1.5 active:bg-gray-background-soft">
+            <DialogPrimitive.Close
+              accessibilityRole="button"
+              accessibilityLabel="Fechar"
+              hitSlop={8}
+              className="absolute right-3 top-3 rounded-pill p-1.5 active:bg-gray-background-soft"
+            >
               {closeIconColor && <CloseMd width={16} height={16} color={closeIconColor} />}
             </DialogPrimitive.Close>
           )}
@@ -131,28 +136,39 @@ function DialogFooter({ className, separator = false, children, ...props }: Dial
   );
 }
 
-function DialogTitle({ className, iconLeft, iconRight, children, ...props }: DialogTitleProps) {
-  const renderIcon = (icon: ReactNode) => {
-    if (isValidElement(icon)) {
-      return cloneElement(icon as ReactElement<{ size?: number; strokeWidth?: number }>, {
-        size: 32,
-        strokeWidth: 2.2,
-      });
+const DIALOG_TITLE_ICON_SIZE = 32;
+const DIALOG_TITLE_CLASS_NAME = "text-title-md font-semibold leading-title-md text-content-title";
+
+function renderTitleIcon(icon: ReactNode) {
+  if (!isValidElement(icon)) return icon;
+
+  return cloneElement(
+    icon as ReactElement<{ width?: number; height?: number; strokeWidth?: number }>,
+    {
+      width: DIALOG_TITLE_ICON_SIZE,
+      height: DIALOG_TITLE_ICON_SIZE,
+      strokeWidth: 2.2,
     }
-    return icon;
-  };
+  );
+}
+
+function DialogTitle({ className, iconLeft, iconRight, children, ...props }: DialogTitleProps) {
+  if (!iconLeft && !iconRight) {
+    return (
+      <DialogPrimitive.Title className={cn(DIALOG_TITLE_CLASS_NAME, className)} {...props}>
+        {children}
+      </DialogPrimitive.Title>
+    );
+  }
 
   return (
-    <DialogPrimitive.Title
-      className={cn("flex-row items-center gap-3", className)}
-      {...props}
-    >
-      {iconLeft && renderIcon(iconLeft)}
-      <Text className="text-title-md font-semibold leading-title-md text-content-title flex-1">
-        {children as string}
-      </Text>
-      {iconRight && renderIcon(iconRight)}
-    </DialogPrimitive.Title>
+    <View className={cn("flex-row items-center gap-3", className)}>
+      {iconLeft ? renderTitleIcon(iconLeft) : null}
+      <DialogPrimitive.Title className={cn(DIALOG_TITLE_CLASS_NAME, "flex-1")} {...props}>
+        {children}
+      </DialogPrimitive.Title>
+      {iconRight ? renderTitleIcon(iconRight) : null}
+    </View>
   );
 }