@medway-ui/native 1.9.1 → 1.10.0

package/src/components/PostForm.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/components/Button";
 import { Checkbox } from "@/components/Checkbox";
 import { Input, InputText, inputVariants } from "@/components/Input";
 import { useTrackedText } from "@/hooks/useTrackedText";
+import { fontFamilyMedium } from "@/lib/typography";
 import { cn } from "@/lib/utils";
 
 interface PostFormProps extends ViewProps {
@@ -149,7 +150,7 @@ function PostFormDescription({
         )}
         accessibilityLabel={placeholder}
         {...props}
-        style={[{ fontFamily: "MontserratMedium" }, props.style]}
+        style={[{ fontFamily: fontFamilyMedium }, props.style]}
       />
       <InputText className="text-right text-xs font-medium text-gray-foreground">
         {text.length} / {maxLength}
@@ -172,7 +173,13 @@ function PostFormDateTimeField({
       {label ? (
         <Text className="text-sm font-medium text-gray-foreground">{label}</Text>
       ) : null}
-      <Pressable accessibilityRole="button" onPress={onPress} disabled={!onPress}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={label ?? placeholder}
+        accessibilityValue={value ? { text: value } : undefined}
+        onPress={onPress}
+        disabled={!onPress}
+      >
         <View pointerEvents="none">
           <Input
             size="lg"
@@ -216,24 +223,29 @@ function PostFormCheckboxOption({
       className={cn("flex-row items-start gap-3", disabled ? "opacity-50" : "", className)}
       {...props}
     >
-      <Checkbox
-        size="lg"
-        checked={isChecked}
-        onCheckedChange={handleCheckedChange}
-        disabled={disabled}
-      />
       <Pressable
-        accessibilityRole="button"
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked: isChecked, disabled: !!disabled }}
         disabled={disabled}
         onPress={toggle}
-        className="min-w-0 flex-1 gap-1 pb-2"
+        className="min-w-0 flex-1 flex-row items-start gap-3"
       >
-        <Text className="text-md font-semibold text-gray-foreground">{title}</Text>
-        {description ? (
-          <Text className="text-xs font-medium text-gray-foreground">
-            {description}
-          </Text>
-        ) : null}
+        <Checkbox
+          size="lg"
+          checked={isChecked}
+          onCheckedChange={handleCheckedChange}
+          disabled={disabled}
+          accessible={false}
+          importantForAccessibility="no-hide-descendants"
+        />
+        <View className="min-w-0 flex-1 gap-1 pb-2">
+          <Text className="text-md font-semibold text-gray-foreground">{title}</Text>
+          {description ? (
+            <Text className="text-xs font-medium text-gray-foreground">
+              {description}
+            </Text>
+          ) : null}
+        </View>
       </Pressable>
     </View>
   );

package/src/components/PrizeCollection.tsx

@@ -35,7 +35,7 @@ interface PrizeItemProps extends ViewProps {
 }
 
 const rankColors: Record<1 | 2 | 3, string> = {
-  1: "bg-yellow-background-fill",
+  1: "bg-feedback-warning-background-fill",
   2: "bg-gray-background-fill",
   3: "bg-bronze-background-fill",
 };
@@ -147,8 +147,8 @@ function PrizeItem({
       {...props}
     >
       {isNew ? (
-        <View className="absolute -right-1 -top-1 rounded-md bg-green-background-fill px-2 py-1">
-          <Text className="text-xs font-semibold text-green-foreground-onfill">
+        <View className="absolute -right-1 -top-1 rounded-md bg-feedback-success-background-fill px-2 py-1">
+          <Text className="text-xs font-semibold text-feedback-success-foreground-onfill">
             Novo
           </Text>
         </View>

package/src/components/RadioGroup.tsx

@@ -1,18 +1,25 @@
 import { View, type ViewProps } from "react-native";
 import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
 import { cva, type VariantProps } from "class-variance-authority";
-import { type ReactNode } from "react";
+import { createContext, useContext, useMemo, type ReactNode } from "react";
 import { cn } from "@/lib/utils";
 import { getMinTouchHitSlop } from "@/lib/touch-target";
 
 interface RadioGroupItemProps
   extends RadioGroupPrimitive.ItemProps,
-    VariantProps<typeof radioGroupVariants> {}
+    Omit<VariantProps<typeof radioGroupVariants>, "checked" | "disabled"> {}
+
+interface RadioGroupState {
+  value: string | undefined;
+  disabled: boolean;
+}
+
+const RadioGroupStateContext = createContext<RadioGroupState | null>(null);
 
 const INNER_DOT_SIZES: Record<"sm" | "md" | "lg", number> = {
-  sm: 8,
-  md: 10,
-  lg: 14,
+  sm: 6,
+  md: 6,
+  lg: 8,
 };
 
 const RADIO_DIMENSIONS: Record<"sm" | "md" | "lg", number> = {
@@ -33,34 +40,82 @@ const radioGroupVariants = cva(
       variant: {
         regular: "",
       },
+      checked: {
+        true: "bg-primary-background-fill border-primary-background-fill",
+        false: "",
+      },
+      disabled: {
+        true: "bg-gray-background-soft-muted border-gray-stroke-muted",
+        false: "",
+      },
     },
     defaultVariants: {
       size: "md",
       variant: "regular",
+      checked: false,
+      disabled: false,
     },
   }
 );
 
+function getDotClassName(state: { checked: boolean; disabled: boolean }) {
+  if (state.disabled) return "bg-gray-background-fill-muted";
+  return state.checked ? "bg-primary-foreground-onfill" : "bg-primary-background-fill";
+}
+
+function RadioGroupStateProvider({
+  value,
+  disabled = false,
+  children,
+}: {
+  value: string | undefined;
+  disabled?: boolean;
+  children: ReactNode;
+}) {
+  const state = useMemo(() => ({ value, disabled }), [value, disabled]);
+
+  return (
+    <RadioGroupStateContext.Provider value={state}>{children}</RadioGroupStateContext.Provider>
+  );
+}
+
 function RadioGroup({ className, ...props }: RadioGroupPrimitive.RootProps) {
   return (
-    <RadioGroupPrimitive.Root className={cn("gap-3", className)} {...props} />
+    <RadioGroupStateProvider value={props.value} disabled={props.disabled}>
+      <RadioGroupPrimitive.Root className={cn("gap-3", className)} {...props} />
+    </RadioGroupStateProvider>
   );
 }
 
-function RadioGroupItem({ className, size = "md", variant, ...props }: RadioGroupItemProps) {
+function RadioGroupItem({
+  className,
+  size = "md",
+  variant,
+  value,
+  disabled,
+  ...props
+}: RadioGroupItemProps) {
+  const group = useContext(RadioGroupStateContext);
   const resolvedSize = size ?? "md";
   const dotSize = INNER_DOT_SIZES[resolvedSize];
+  const checked = group?.value === value;
+  const isDisabled = Boolean(group?.disabled || disabled);
 
   return (
     <RadioGroupPrimitive.Item
       hitSlop={getMinTouchHitSlop(RADIO_DIMENSIONS[resolvedSize])}
-      className={cn(radioGroupVariants({ size, variant }), className)}
+      className={cn(
+        radioGroupVariants({ size, variant, checked, disabled: isDisabled }),
+        className
+      )}
+      value={value}
+      disabled={disabled}
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="items-center justify-center">
         <View
           style={{ width: dotSize, height: dotSize, borderRadius: dotSize / 2 }}
-          className="bg-primary-background-fill"
+          className={getDotClassName({ checked, disabled: isDisabled })}
         />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
@@ -74,9 +129,11 @@ interface RadioGroupListProps extends RadioGroupPrimitive.RootProps {
 
 function RadioGroupList({ className, children, ...props }: RadioGroupListProps) {
   return (
-    <RadioGroupPrimitive.Root className={cn("gap-0", className)} {...props}>
-      {children}
-    </RadioGroupPrimitive.Root>
+    <RadioGroupStateProvider value={props.value} disabled={props.disabled}>
+      <RadioGroupPrimitive.Root className={cn("gap-0", className)} {...props}>
+        {children}
+      </RadioGroupPrimitive.Root>
+    </RadioGroupStateProvider>
   );
 }
 

package/src/components/SectionHeader.tsx

@@ -25,7 +25,10 @@ function SectionHeader({
       {...props}
     >
       <View className="min-w-0 flex-1 gap-0">
-        <Text className="text-title-xs font-semibold text-primary-foreground">
+        <Text
+          accessibilityRole="header"
+          className="text-title-xs font-semibold text-primary-foreground"
+        >
           {title}
         </Text>
         {subtitle != null ? (

package/src/components/Select.tsx

@@ -7,7 +7,8 @@ import React, {
   type ReactNode,
   type ReactElement,
 } from "react";
-import { View, Text, type ViewProps, type TextProps } from "react-native";
+import { View, type ViewProps } from "react-native";
+import { Text, type TextProps } from "@/components/Text";
 import * as SelectPrimitive from "@rn-primitives/select";
 import { cva } from "class-variance-authority";
 import { cn } from "@/lib/utils";
@@ -101,7 +102,7 @@ function SelectValue({ className, placeholder, ...props }: SelectPrimitive.Value
   return (
     <SelectPrimitive.Value
       className={cn(
-        "text-gray-foreground flex-1",
+        "text-gray-foreground font-regular flex-1",
         size === "lg" ? "text-md" : "text-sm",
         className
       )}
@@ -155,7 +156,7 @@ function SelectItem({ className, children, icon, label, ...props }: SelectItemPr
     <SelectPrimitive.Item
       label={resolvedLabel}
       className={cn(
-        "relative flex-row w-full items-center rounded px-2 gap-3",
+        "relative flex-row w-full items-center rounded-sm px-2 gap-3",
         size === "lg" ? "py-2" : "py-1.5",
         "active:bg-secondary-background-soft-emphasis",
         className

package/src/components/Separator.tsx

@@ -1,4 +1,4 @@
-import { View, type ViewProps, type AccessibilityRole } from "react-native";
+import { View, type ViewProps } from "react-native";
 import { cn } from "@/lib/utils";
 
 interface SeparatorProps extends ViewProps {
@@ -9,7 +9,7 @@ interface SeparatorProps extends ViewProps {
 function Separator({ className, orientation = "horizontal", decorative = true, ...props }: SeparatorProps) {
   return (
     <View
-      accessibilityRole={decorative ? undefined : ("separator" as AccessibilityRole)}
+      role={decorative ? undefined : "separator"}
       className={cn(
         "shrink-0 bg-gray-stroke-muted",
         orientation === "horizontal" ? "h-px w-full" : "w-px h-full",

package/src/components/Sheet.tsx

@@ -3,6 +3,7 @@ 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 { useBackdropStyle } from "@/lib/backdrop";
 import { cn } from "@/lib/utils";
 import { Separator } from "@/components/Separator";
 
@@ -12,6 +13,7 @@ interface SheetContainerProps extends DialogPrimitive.ContentProps {
   side?: SheetSide;
   showCloseButton?: boolean;
   overlayClassName?: string;
+  closeOnOverlayPress?: boolean;
 }
 
 interface SheetHeaderProps extends ViewProps {
@@ -30,10 +32,10 @@ const overlayPositionMap: Record<SheetSide, string> = {
 };
 
 const contentSizeMap: Record<SheetSide, string> = {
-  bottom: "w-full max-h-[90%] rounded-t-xl",
-  top: "w-full max-h-[90%] rounded-b-xl",
-  left: "h-full max-w-[80%] rounded-r-xl",
-  right: "h-full max-w-[80%] rounded-l-xl",
+  bottom: "w-full max-h-[90%] rounded-t-lg",
+  top: "w-full max-h-[90%] rounded-b-lg",
+  left: "h-full max-w-[80%] rounded-r-lg",
+  right: "h-full max-w-[80%] rounded-l-lg",
 };
 
 const closeButtonPositionMap: Record<SheetSide, string> = {
@@ -61,22 +63,27 @@ function SheetContainer({
   children,
   side = "bottom",
   showCloseButton = true,
+  closeOnOverlayPress = true,
   ...props
 }: SheetContainerProps) {
   const closeIconColor = useThemeColor("gray-foreground");
+  const backdropStyle = useBackdropStyle(overlayClassName);
 
   return (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className={cn("absolute inset-0 bg-black-48", overlayClassName)}
+        className={cn("absolute inset-0", overlayClassName)}
+        style={backdropStyle}
+        closeOnPress={closeOnOverlayPress}
       />
       <DialogPrimitive.Content
         className={cn(overlayPositionMap[side])}
+        pointerEvents="box-none"
         {...props}
       >
         <View
           className={cn(
-            "relative flex-col bg-background shadow-lg overflow-hidden",
+            "relative flex-col bg-surface-elevated shadow-lg overflow-hidden",
             contentSizeMap[side],
             className
           )}
@@ -112,7 +119,7 @@ function SheetContent({
 }) {
   return (
     <ScrollView
-      className={cn("flex-1", containerClassName)}
+      className={cn(containerClassName)}
       contentContainerStyle={{ flexGrow: 1 }}
     >
       <View className={cn("px-6 py-4", className)}>{children}</View>
@@ -154,7 +161,7 @@ function SheetTitle({ className, ...props }: DialogPrimitive.TitleProps) {
 function SheetDescription({ className, ...props }: DialogPrimitive.DescriptionProps) {
   return (
     <DialogPrimitive.Description
-      className={cn("text-md leading-md text-content-paragraph", className)}
+      className={cn("text-md font-regular leading-md text-content-paragraph", className)}
       {...props}
     />
   );

package/src/components/Skeleton.tsx

@@ -74,7 +74,7 @@ function Skeleton({ className, style, children, ...props }: SkeletonProps) {
       <Animated.View style={[StyleSheet.absoluteFill, animatedStyle]}>
         <View
           style={styles.background}
-          className={cn("flex-1 bg-gray-150", classes.background)}
+          className={cn("flex-1 bg-gray-150 dark:bg-gray-600", classes.background)}
         />
       </Animated.View>
       {children}

package/src/components/Tabs.tsx

@@ -3,7 +3,7 @@ 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 { cva } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
@@ -53,12 +53,12 @@ interface TabsListProps extends TabsPrimitive.ListProps {
   children?: ReactNode;
 }
 
-interface TabsTriggerProps
-  extends TabsPrimitive.TriggerProps,
-    VariantProps<typeof tabsTriggerVariants> {
+interface TabsTriggerProps extends TabsPrimitive.TriggerProps {
   className?: string;
   children?: ReactNode;
   icon?: ReactNode;
+  /** @deprecated Ignored: the active tab comes from the `Tabs` value. */
+  active?: boolean | null;
 }
 
 interface TabsContentProps extends TabsPrimitive.ContentProps {
@@ -109,6 +109,7 @@ function TabsTrigger({
   children,
   icon,
   value,
+  active,
   ...props
 }: TabsTriggerProps) {
   const variant = useTabsVariant();

package/src/components/Tag.tsx

@@ -14,51 +14,59 @@ const tagVariants = cva(
   "flex-row items-center justify-center rounded-md px-2 py-1 gap-1.5 max-h-6 overflow-hidden shrink-0",
   {
     variants: {
+      size: {
+        sm: "",
+        md: "px-2.5 py-1.5 gap-2 max-h-8",
+      },
       variant: {
         regular: "bg-primary-background-fill",
         "regular-soft": "bg-primary-background-soft",
-        "regular-basic": "bg-transparent",
+        "regular-basic": "bg-transparent p-0",
         emphasis: "bg-secondary-background-fill",
         "emphasis-soft": "bg-secondary-background-soft",
-        "emphasis-basic": "bg-transparent",
+        "emphasis-basic": "bg-transparent p-0",
         gray: "bg-gray-background-fill",
         "gray-soft": "bg-gray-background-soft",
-        "gray-basic": "bg-transparent",
-        success: "bg-green-background-fill",
-        "success-soft": "bg-green-background-soft",
-        "success-basic": "bg-transparent",
-        error: "bg-red-background-fill",
-        "error-soft": "bg-red-background-soft",
-        "error-basic": "bg-transparent",
-        warning: "bg-yellow-background-fill",
-        "warning-soft": "bg-yellow-background-soft",
-        "warning-basic": "bg-transparent",
+        "gray-basic": "bg-transparent p-0",
+        success: "bg-feedback-success-background-fill",
+        "success-soft": "bg-feedback-success-background-soft",
+        "success-basic": "bg-transparent p-0",
+        error: "bg-feedback-error-background-fill",
+        "error-soft": "bg-feedback-error-background-soft",
+        "error-basic": "bg-transparent p-0",
+        warning: "bg-feedback-warning-background-fill",
+        "warning-soft": "bg-feedback-warning-background-soft",
+        "warning-basic": "bg-transparent p-0",
         cm: "bg-cm-background-fill",
         "cm-soft": "bg-cm-background-soft",
-        "cm-basic": "bg-transparent",
+        "cm-basic": "bg-transparent p-0",
         go: "bg-go-background-fill",
         "go-soft": "bg-go-background-soft",
-        "go-basic": "bg-transparent",
+        "go-basic": "bg-transparent p-0",
         cir: "bg-cir-background-fill",
         "cir-soft": "bg-cir-background-soft",
-        "cir-basic": "bg-transparent",
+        "cir-basic": "bg-transparent p-0",
         ped: "bg-ped-background-fill",
         "ped-soft": "bg-ped-background-soft",
-        "ped-basic": "bg-transparent",
+        "ped-basic": "bg-transparent p-0",
         prev: "bg-prev-background-fill",
         "prev-soft": "bg-prev-background-soft",
-        "prev-basic": "bg-transparent",
+        "prev-basic": "bg-transparent p-0",
         ia: "bg-secondary-background-fill",
         "ia-soft": "bg-secondary-background-soft",
-        "ia-basic": "bg-transparent",
+        "ia-basic": "bg-transparent p-0",
       },
     },
-    defaultVariants: { variant: "regular" },
+    defaultVariants: { size: "sm", variant: "regular" },
   }
 );
 
 const tagTextVariants = cva("text-xs font-semibold", {
   variants: {
+    size: {
+      sm: "",
+      md: "text-sm leading-sm",
+    },
     variant: {
       regular: "text-primary-foreground-onfill",
       "regular-soft": "text-primary-foreground",
@@ -69,15 +77,15 @@ const tagTextVariants = cva("text-xs font-semibold", {
       gray: "text-gray-foreground-onfill",
       "gray-soft": "text-gray-foreground",
       "gray-basic": "text-gray-foreground",
-      success: "text-green-foreground-onfill",
-      "success-soft": "text-green-foreground",
-      "success-basic": "text-green-foreground",
-      error: "text-red-foreground-onfill",
-      "error-soft": "text-red-foreground",
-      "error-basic": "text-red-foreground",
-      warning: "text-yellow-foreground-onfill",
-      "warning-soft": "text-yellow-foreground",
-      "warning-basic": "text-yellow-foreground",
+      success: "text-feedback-success-foreground-onfill",
+      "success-soft": "text-feedback-success-foreground",
+      "success-basic": "text-feedback-success-foreground",
+      error: "text-feedback-error-foreground-onfill",
+      "error-soft": "text-feedback-error-foreground",
+      "error-basic": "text-feedback-error-foreground",
+      warning: "text-feedback-warning-foreground-onfill",
+      "warning-soft": "text-feedback-warning-foreground",
+      "warning-basic": "text-feedback-warning-foreground",
       cm: "text-cm-foreground-onfill",
       "cm-soft": "text-cm-foreground",
       "cm-basic": "text-cm-foreground",
@@ -98,18 +106,31 @@ const tagTextVariants = cva("text-xs font-semibold", {
       "ia-basic": "text-secondary-foreground",
     },
   },
-  defaultVariants: { variant: "regular" },
+  defaultVariants: { size: "sm", variant: "regular" },
 });
 
-function TagIcon({ icon }: { icon?: ReactNode }) {
-  return <View className="w-3.5 h-3.5 items-center justify-center">{icon}</View>;
+type TagSize = NonNullable<VariantProps<typeof tagVariants>["size"]>;
+
+const TAG_ICON_SIZE_CLASS_NAME: Record<TagSize, string> = {
+  sm: "w-3.5 h-3.5",
+  md: "w-5 h-5",
+};
+
+function TagIcon({ icon, size }: { icon?: ReactNode; size: TagSize }) {
+  return (
+    <View className={cn(TAG_ICON_SIZE_CLASS_NAME[size], "items-center justify-center")}>
+      {icon}
+    </View>
+  );
 }
 
-function Tag({ className, variant, icon, children, ...props }: TagProps) {
+function Tag({ className, variant, size, icon, children, ...props }: TagProps) {
   return (
-    <View className={cn(tagVariants({ variant }), className)} {...props}>
-      {icon && <TagIcon icon={icon} />}
-      <Text className={cn(tagTextVariants({ variant }))}>{children}</Text>
+    <View className={cn(tagVariants({ size, variant }), className)} {...props}>
+      {icon && <TagIcon icon={icon} size={size ?? "sm"} />}
+      <Text numberOfLines={1} className={cn(tagTextVariants({ size, variant }))}>
+        {children}
+      </Text>
     </View>
   );
 }

package/src/components/Toast.tsx

@@ -109,7 +109,6 @@ const GRADIENT_STYLES: Record<ToastGradientVariant, GradientStyle> = {
     underlayClassName: "bg-white",
   },
   "gold-gradient": {
-    // Literal hex from Figma replaced by podium tokens on web (#72)
     colorTokens: ["gold", "gold-lighten-6"],
     locations: [0.29, 1],
     angleDeg: 124,
@@ -318,9 +317,10 @@ function ToastClose({
   );
 }
 
+const LinearGradient = loadLinearGradient();
+
 function ToastGradientFill({ variant }: { variant: ToastGradientVariant }) {
   const style = GRADIENT_STYLES[variant];
-  const LinearGradient = loadLinearGradient();
   const borderRadius = useRadiusLg();
   const color0 = useThemeColor(style.colorTokens[0]);
   const color1 = useThemeColor(style.colorTokens[1]);
@@ -392,8 +392,8 @@ function ToastItem({
   const [visible, setVisible] = useState(open);
   const onOpenChangeRef = useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const translateY = useSharedValue(open ? 0 : -80);
-  const opacity = useSharedValue(open ? 1 : 0);
+  const translateY = useSharedValue(-80);
+  const opacity = useSharedValue(0);
   const gradient = isGradientVariant(variant);
 
   const animatedStyle = useAnimatedStyle(() => ({
@@ -433,7 +433,11 @@ function ToastItem({
   return (
     <Animated.View style={animatedStyle}>
       <ToastContext.Provider value={{ variant, onOpenChange }}>
-        <View className={containerClassName} {...props}>
+        <View
+          accessibilityLiveRegion="polite"
+          className={containerClassName}
+          {...props}
+        >
           {gradient ? <ToastGradientFill variant={variant} /> : null}
           {showIcon && resolvedIcon}
           <View className="min-w-0 flex-1 flex-row items-center justify-between gap-4">
@@ -474,7 +478,7 @@ function ToastAction({
   className,
   variant: variantProp,
   size = "sm",
-  altText = "Toast action",
+  altText,
   children,
   loading,
   iconLeft,