@medway-ui/native 1.9.2 → 1.10.1

package/src/components/LoadingOverlay.tsx

@@ -1,6 +1,6 @@
 import { useEffect, type ReactNode } from "react";
 import { Modal, View, type ModalProps, type ViewProps } from "react-native";
-import Svg, { Circle } from "react-native-svg";
+import Svg, { Circle, Path } from "react-native-svg";
 import Animated, {
   cancelAnimation,
   Easing,
@@ -16,20 +16,20 @@ import { useThemeColor, type ThemeColorToken } from "@/hooks/useThemeColor";
 import { cn } from "@/lib/utils";
 
 interface LoadingOverlaySpinnerProps {
-  /** Icon rendered at the center of the ring, e.g. `<ThemedIcon icon={Brain} />`. */
+  /** Icon rendered at the center of the ring. Defaults to the Medway "m"; pass `null` to show only the ring. */
   icon?: ReactNode;
   /** Ring diameter in px. Defaults to 72. */
   size?: number;
-  /** Ring stroke width in px. Defaults to 2. */
+  /** Ring stroke width in px. Defaults to 2.16. */
   trackWidth?: number;
-  /** Theme token for the spinning arc. Defaults to `gray-stroke-muted`. */
+  /** Theme token for the spinning arc. Defaults to `gray-stroke`. */
   colorToken?: ThemeColorToken;
   /** Explicit arc color. Takes precedence over `colorToken`. */
   color?: string;
-  /** Theme token for the track behind the arc. The track is hidden when omitted. */
-  trackColorToken?: ThemeColorToken;
-  /** Pulses the center icon opacity. Defaults to true. */
+  /** Pulses the center icon opacity from 20% to 100% every 400ms. Defaults to true. */
   pulse?: boolean;
+  /** @deprecated No effect: the ring has no track, as in Figma. Removed in the next major. */
+  trackColorToken?: ThemeColorToken;
 }
 
 interface LoadingOverlayCardProps
@@ -60,39 +60,31 @@ interface LoadingOverlayProps extends LoadingOverlayCardProps {
   modalProps?: Omit<ModalProps, "visible" | "onRequestClose" | "children">;
 }
 
-/** Rendered only when a track token is set, so the default case skips the color lookup. */
-function SpinnerTrack({
-  size,
-  radius,
-  strokeWidth,
-  colorToken,
-}: {
-  size: number;
-  radius: number;
-  strokeWidth: number;
-  colorToken: ThemeColorToken;
-}) {
-  const color = useThemeColor(colorToken);
+const SPIN_DURATION_MS = 1600;
+const PULSE_TIMING = { duration: 400, easing: Easing.linear };
+const PULSE_MIN_OPACITY = 0.2;
+const LOGO_SHORT_GLYPH_VIEWBOX = "0 10.4159 59.65 41.85";
+const LOGO_SHORT_GLYPH_PATH =
+  "M42.33 10.8959C37.32 10.8959 32.8 12.8259 29.64 15.8959C26.55 12.5459 21.96 10.4159 16.83 10.4159C8.54 10.4159 1.65 15.9859 0.25 23.3059C0.09 24.1959 0 25.1159 0 26.0459V50.4759C0 51.4659 0.8 52.2659 1.79 52.2659H9.76C10.75 52.2659 11.55 51.4659 11.55 50.4759V28.8559C11.55 25.8359 13.98 22.8859 16.97 22.4959C19.03 22.2259 20.91 22.9659 22.22 24.2759C23.35 25.4059 24.05 26.9659 24.05 28.6959V50.4759C24.05 51.4659 24.85 52.2659 25.84 52.2659H33.81C34.8 52.2659 35.6 51.4659 35.6 50.4759V28.8559C35.6 25.8359 38.03 22.8859 41.02 22.4959C43.08 22.2259 44.96 22.9659 46.27 24.2759C47.4 25.4059 48.1 26.9659 48.1 28.6959V50.4759C48.1 51.4659 48.9 52.2659 49.89 52.2659H57.86C58.85 52.2659 59.65 51.4659 59.65 50.4759V26.5259C59.65 25.0959 59.44 23.7159 59.04 22.3959C57.03 15.7659 50.31 10.8959 42.33 10.8959Z";
+
+function LoadingOverlayMark() {
+  const color = useThemeColor("secondary-stroke-emphasis");
 
   return (
-    <Circle
-      cx={size / 2}
-      cy={size / 2}
-      r={radius}
-      stroke={color}
-      strokeWidth={strokeWidth}
-      fill="none"
-    />
+    <Svg width={20} height={14} viewBox={LOGO_SHORT_GLYPH_VIEWBOX}>
+      <Path d={LOGO_SHORT_GLYPH_PATH} fill={color} />
+    </Svg>
   );
 }
 
+const DEFAULT_ICON = <LoadingOverlayMark />;
+
 function LoadingOverlaySpinner({
-  icon,
+  icon = DEFAULT_ICON,
   size = 72,
-  trackWidth = 2,
-  colorToken = "gray-stroke-muted",
+  trackWidth = 2.16,
+  colorToken = "gray-stroke",
   color,
-  trackColorToken,
   pulse = true,
 }: LoadingOverlaySpinnerProps) {
   const themeColor = useThemeColor(colorToken);
@@ -104,7 +96,7 @@ function LoadingOverlaySpinner({
 
   useEffect(() => {
     rotation.value = withRepeat(
-      withTiming(360, { duration: 1000, easing: Easing.linear }),
+      withTiming(360, { duration: SPIN_DURATION_MS, easing: Easing.linear }),
       -1,
       false
     );
@@ -117,11 +109,11 @@ function LoadingOverlaySpinner({
       opacity.value = 1;
       return;
     }
-    opacity.value = 0.4;
+    opacity.value = PULSE_MIN_OPACITY;
     opacity.value = withRepeat(
       withSequence(
-        withTiming(1, { duration: 400 }),
-        withTiming(0.4, { duration: 400 })
+        withTiming(1, PULSE_TIMING),
+        withTiming(PULSE_MIN_OPACITY, PULSE_TIMING)
       ),
       -1,
       false
@@ -147,14 +139,6 @@ function LoadingOverlaySpinner({
     >
       <Animated.View style={[{ position: "absolute" }, ringStyle]}>
         <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-          {trackColorToken ? (
-            <SpinnerTrack
-              size={size}
-              radius={radius}
-              strokeWidth={trackWidth}
-              colorToken={trackColorToken}
-            />
-          ) : null}
           <Circle
             cx={size / 2}
             cy={size / 2}
@@ -189,8 +173,8 @@ function LoadingOverlayCard({
   trackWidth,
   colorToken,
   color,
-  trackColorToken,
   pulse,
+  trackColorToken: _trackColorToken,
   text = "Carregando...",
   description,
   children,
@@ -203,7 +187,7 @@ function LoadingOverlayCard({
   return (
     <View
       className={cn(
-        "w-full min-h-[230px] items-center justify-center gap-6 rounded-xl bg-surface-card p-10",
+        "w-full min-h-[230px] items-center justify-center gap-6 rounded-lg bg-surface-card p-10",
         className
       )}
       {...props}
@@ -218,7 +202,7 @@ function LoadingOverlayCard({
         }
         accessibilityState={{ busy: true }}
         accessibilityLiveRegion="polite"
-        className="w-full items-center gap-6"
+        className="w-full items-center gap-4"
       >
         <LoadingOverlaySpinner
           icon={icon}
@@ -226,7 +210,6 @@ function LoadingOverlayCard({
           trackWidth={trackWidth}
           colorToken={colorToken}
           color={color}
-          trackColorToken={trackColorToken}
           pulse={pulse}
         />
 
@@ -235,7 +218,7 @@ function LoadingOverlayCard({
             {text ? (
               <Text
                 className={cn(
-                  "text-center text-sm font-semibold text-content-title",
+                  "text-center text-xs font-semibold leading-xs text-content-title",
                   textClassName
                 )}
               >
@@ -245,7 +228,7 @@ function LoadingOverlayCard({
             {description ? (
               <Text
                 className={cn(
-                  "text-center text-sm font-medium text-content-paragraph",
+                  "text-center text-xs font-medium leading-xs text-content-paragraph",
                   descriptionClassName
                 )}
               >

package/src/components/MemberRow.tsx

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 import { type ReactNode } from "react";
 import { View, type ViewProps } from "react-native";
 
@@ -11,7 +11,7 @@ import { cn } from "@/lib/utils";
 const rankIndicatorVariants = cva("size-[22px] rounded-full", {
   variants: {
     rank: {
-      1: "bg-yellow-background-fill",
+      1: "bg-feedback-warning-background-fill",
       2: "bg-gray-background-fill",
       3: "bg-bronze-background-fill",
     },
@@ -102,7 +102,7 @@ function MemberRow({
         {...props}
       >
         <View className="min-w-0 flex-1 flex-row items-center gap-4">
-          <RadioGroupItem value={value} size="md" />
+          <RadioGroupItem value={value} size="md" accessibilityLabel={name} />
           <View className="min-w-0 flex-1 flex-row items-center gap-2">
             <Avatar size="sm" alt={avatarAlt ?? name}>
               {avatarSrc ? <AvatarImage src={avatarSrc} /> : null}

package/src/components/PageHeader.tsx

@@ -32,7 +32,10 @@ function PageHeader({
         <View className="flex-row items-start gap-3">
           {icon}
           <View className="flex-1 gap-1">
-            <Text className="text-title-xs font-semibold text-primary-foreground">
+            <Text
+              accessibilityRole="header"
+              className="text-title-xs font-semibold text-primary-foreground"
+            >
               {title}
             </Text>
             {description ? (

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