@medway-ui/native 1.6.1 → 1.7.0

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>
   );
 }