@medway-ui/native 1.9.2 → 1.10.1

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,