@medway-ui/native 1.0.4 → 1.1.1

package/src/components/Alert.tsx

@@ -7,6 +7,7 @@ import {
 import { View, Text, Pressable, type ViewProps, type PressableProps } from "react-native";
 import { cva, type VariantProps } from "class-variance-authority";
 import { CloseMd } from "@medway-ui/icons/native";
+import { useThemeColor } from "@/hooks/useThemeColor";
 import { cn } from "@/lib/utils";
 
 type AlertVariant = "regular" | "emphasis" | "success" | "warning" | "error";
@@ -80,6 +81,7 @@ function useAlertContext() {
 
 function Alert({ className, variant = "regular", onClose, children, ...props }: AlertProps) {
   const ctx = useMemo(() => ({ variant, onClose }), [variant, onClose]);
+  const closeIconColor = useThemeColor("gray-foreground");
 
   return (
     <AlertContext.Provider value={ctx}>
@@ -95,7 +97,7 @@ function Alert({ className, variant = "regular", onClose, children, ...props }:
             accessibilityLabel="Close alert"
             className="absolute right-4 top-2"
           >
-            <CloseMd size={16} className="text-gray-foreground" />
+            {closeIconColor && <CloseMd width={16} height={16} color={closeIconColor} />}
           </Pressable>
         )}
       </View>

package/src/components/AlertDialog.tsx

@@ -1,8 +1,9 @@
 import { createContext, useContext, useMemo, type ReactNode } from "react";
 import { View, Text, type ViewProps } from "react-native";
 import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
-import { CloseMd } from "@medway-ui/icons/native";
 import { cva } from "class-variance-authority";
+import { CloseMd } from "@medway-ui/icons/native";
+import { useThemeColor } from "@/hooks/useThemeColor";
 import { cn } from "@/lib/utils";
 import { Button, type ButtonProps } from "@/components/Button";
 import { Tag, type TagProps } from "@/components/Tag";
@@ -136,26 +137,31 @@ function AlertDialogContent({
   showCloseButton = false,
   ...props
 }: AlertDialogContentProps) {
+  const closeIconColor = useThemeColor("gray-foreground");
+
   return (
     <AlertDialogPrimitive.Portal>
       <AlertDialogPrimitive.Overlay
-        className={cn("absolute inset-0 items-center justify-center bg-black/50", overlayClassName)}
+        className={cn("absolute inset-0 bg-black/50", overlayClassName)}
+      />
+      <AlertDialogPrimitive.Content
+        className="absolute inset-0 items-center justify-center px-4"
+        {...props}
       >
-        <AlertDialogPrimitive.Content
+        <View
           className={cn(
-            "relative flex-col w-full max-w-[calc(100%-2rem)] rounded-xl bg-background shadow-lg overflow-hidden",
+            "relative flex-col w-full rounded-xl bg-background shadow-lg overflow-hidden",
             className
           )}
-          {...props}
         >
           {children}
           {showCloseButton && (
             <AlertDialogPrimitive.Cancel className="absolute right-3 top-3 rounded-pill p-1.5 active:bg-gray-background-soft">
-              <CloseMd size={16} className="text-gray-foreground" />
+              {closeIconColor && <CloseMd width={16} height={16} color={closeIconColor} />}
             </AlertDialogPrimitive.Cancel>
           )}
-        </AlertDialogPrimitive.Content>
-      </AlertDialogPrimitive.Overlay>
+        </View>
+      </AlertDialogPrimitive.Content>
     </AlertDialogPrimitive.Portal>
   );
 }
@@ -225,29 +231,67 @@ function AlertDialogFooter({ className, ...props }: ViewProps) {
   );
 }
 
-function AlertDialogAction({ className, variant, size = "lg", children, ...props }: AlertDialogActionProps) {
+function AlertDialogAction({
+  className,
+  variant,
+  size = "lg",
+  children,
+  disabled,
+  onPress,
+  ...props
+}: AlertDialogActionProps) {
   const ctx = useContext(AlertDialogContext);
+  const primitiveCtx = AlertDialogPrimitive.useRootContext();
   const resolvedVariant = variant ?? actionVariantMap[ctx?.variant ?? DEFAULT_VARIANT];
 
   return (
-    <AlertDialogPrimitive.Action
-      className={cn("flex-1", className)}
-      {...props}
-    >
-      <Button variant={resolvedVariant} size={size} className="w-full">
+    <View className={cn("flex-1", className)}>
+      <Button
+        variant={resolvedVariant}
+        size={size}
+        className="w-full"
+        disabled={disabled}
+        onPress={(event) => {
+          if (disabled) return;
+          primitiveCtx.onOpenChange(false);
+          onPress?.(event);
+        }}
+        {...props}
+      >
         {children as ReactNode}
       </Button>
-    </AlertDialogPrimitive.Action>
+    </View>
   );
 }
 
-function AlertDialogCancel({ className, variant = "regular-soft", size = "lg", children, ...props }: AlertDialogCancelProps) {
+function AlertDialogCancel({
+  className,
+  variant = "regular-soft",
+  size = "lg",
+  children,
+  disabled,
+  onPress,
+  ...props
+}: AlertDialogCancelProps) {
+  const primitiveCtx = AlertDialogPrimitive.useRootContext();
+
   return (
-    <AlertDialogPrimitive.Cancel className={cn("flex-1", className)} {...props}>
-      <Button variant={variant} size={size} className="w-full">
+    <View className={cn("flex-1", className)}>
+      <Button
+        variant={variant}
+        size={size}
+        className="w-full"
+        disabled={disabled}
+        onPress={(event) => {
+          if (disabled) return;
+          primitiveCtx.onOpenChange(false);
+          onPress?.(event);
+        }}
+        {...props}
+      >
         {children as ReactNode}
       </Button>
-    </AlertDialogPrimitive.Cancel>
+    </View>
   );
 }
 

package/src/components/Avatar.tsx

@@ -0,0 +1,130 @@
+import { type ReactNode } from "react";
+import { View, Text, type ViewProps } from "react-native";
+import * as AvatarPrimitive from "@rn-primitives/avatar";
+import { cva, type VariantProps } from "class-variance-authority";
+import { User } from "@medway-ui/icons/native";
+
+import { Badge as BadgeComponent } from "@/components/Badge";
+import { useThemeColor } from "@/hooks/useThemeColor";
+import { cn } from "@/lib/utils";
+
+const badgeSizeMap: Record<
+  "sm" | "md" | "lg" | "xl",
+  "sm" | "md" | "lg" | "xl"
+> = {
+  sm: "sm",
+  md: "md",
+  lg: "md",
+  xl: "lg",
+};
+
+const avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        sm: "size-8",
+        md: "size-10",
+        lg: "size-12",
+        xl: "size-14",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+interface AvatarProps
+  extends ViewProps,
+    VariantProps<typeof avatarVariants> {
+  alt?: string;
+  fallback?: ReactNode;
+  badge?: number | string;
+  children?: ReactNode;
+}
+
+interface AvatarImageProps extends Omit<AvatarPrimitive.ImageProps, "source"> {
+  src?: string;
+  source?: AvatarPrimitive.ImageProps["source"];
+  className?: string;
+}
+
+interface AvatarFallbackProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+function Avatar({
+  className,
+  size,
+  badge,
+  children,
+  alt,
+  fallback,
+  ...props
+}: AvatarProps) {
+  const content =
+    children ?? <AvatarFallback>{fallback}</AvatarFallback>;
+
+  return (
+    <View className="relative">
+      {badge ? (
+        <BadgeComponent
+          size={badgeSizeMap[size || "md"]}
+          className="absolute -right-2 -top-1 z-10"
+        >
+          {String(badge)}
+        </BadgeComponent>
+      ) : null}
+      <AvatarPrimitive.Root
+        alt={alt ?? ""}
+        className={cn(avatarVariants({ size, className }))}
+        {...props}
+      >
+        {content}
+      </AvatarPrimitive.Root>
+    </View>
+  );
+}
+
+function AvatarImage({ className, src, source, ...props }: AvatarImageProps) {
+  const resolvedSource = source ?? (src ? { uri: src } : undefined);
+
+  return (
+    <AvatarPrimitive.Image
+      source={resolvedSource}
+      className={cn("size-full object-cover", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({ className, children, ...props }: AvatarFallbackProps) {
+  const iconColor = useThemeColor("primary-foreground");
+
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-gray-background-soft",
+        className
+      )}
+      {...props}
+    >
+      {children ? (
+        typeof children === "string" ? (
+          <Text className="text-sm font-semibold text-primary-foreground">
+            {children}
+          </Text>
+        ) : (
+          children
+        )
+      ) : iconColor ? (
+        <User width={20} height={20} color={iconColor} />
+      ) : null}
+    </AvatarPrimitive.Fallback>
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback, avatarVariants };
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps };

package/src/components/CardNews.tsx

@@ -0,0 +1,412 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Calendar } from "@medway-ui/icons/native";
+import {
+  createContext,
+  useContext,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  Image,
+  Text,
+  View,
+  useWindowDimensions,
+  type ImageProps,
+  type ViewProps,
+} from "react-native";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/Avatar";
+import { Button, type ButtonProps } from "@/components/Button";
+import { FallbackImage } from "@/components/FallbackImage";
+import { Skeleton } from "@/components/Skeleton";
+import { useThemeColor } from "@/hooks/useThemeColor";
+import { cn } from "@/lib/utils";
+
+interface CardNewsResourcesProps extends ViewProps {
+  label: string;
+  children?: ReactNode;
+}
+
+interface CardNewsContextValue {
+  orientation: "vertical" | "horizontal";
+}
+
+const CardNewsContext = createContext<CardNewsContextValue>({
+  orientation: "vertical",
+});
+
+const HORIZONTAL_IMAGE_MIN_WIDTH = 1280;
+
+interface CardNewsDateProps extends ViewProps {
+  icon?: ReactNode;
+  children?: ReactNode;
+}
+
+interface CardNewsImageProps extends ViewProps {
+  src?: string;
+  alt?: string;
+  imageProps?: ImageProps;
+  children?: ReactNode;
+}
+
+interface CardNewsAuthorProps extends Omit<ViewProps, "role"> {
+  src?: string;
+  alt?: string;
+  name?: string;
+  role?: string;
+  children?: ReactNode;
+}
+
+interface CardNewsProps
+  extends ViewProps,
+    VariantProps<typeof cardNewsVariants> {
+  isRead?: boolean;
+  children?: ReactNode;
+}
+
+const cardNewsVariants = cva("flex border", {
+  variants: {
+    variant: {
+      default:
+        "rounded-lg border-secondary-stroke bg-secondary-background-soft-muted p-6",
+      read: "rounded-lg border-gray-stroke-muted bg-surface-card p-6",
+      compact: "rounded-xl border-gray-stroke-muted bg-surface-card p-4",
+    },
+    orientation: {
+      vertical: "flex-col gap-6",
+      horizontal: "flex-row gap-10",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    orientation: "vertical",
+  },
+});
+
+function CardNews({
+  className,
+  isRead,
+  variant,
+  orientation = "vertical",
+  ...props
+}: CardNewsProps) {
+  const resolvedVariant = isRead ? "read" : (variant ?? "default");
+
+  return (
+    <CardNewsContext.Provider
+      value={{ orientation: orientation ?? "vertical" }}
+    >
+      <View
+        className={cn(
+          cardNewsVariants({ variant: resolvedVariant, orientation }),
+          className
+        )}
+        {...props}
+      />
+    </CardNewsContext.Provider>
+  );
+}
+
+function CardNewsBody({ className, style, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn("flex min-w-0 flex-1 flex-col gap-6", className)}
+      style={[{ minWidth: 0 }, style]}
+      {...props}
+    />
+  );
+}
+
+function CardNewsHeader({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn(
+        "flex w-full flex-row flex-wrap items-start justify-between gap-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardNewsTags({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn("flex min-w-0 flex-1 flex-row flex-wrap items-center gap-x-4 gap-y-3", className)}
+      {...props}
+    />
+  );
+}
+
+function CardNewsDate({
+  className,
+  icon,
+  children,
+  ...props
+}: CardNewsDateProps) {
+  const iconColor = useThemeColor("primary-foreground");
+  const resolvedIcon =
+    icon ??
+    (iconColor ? (
+      <Calendar width={16} height={16} color={iconColor} />
+    ) : null);
+
+  return (
+    <View
+      className={cn("shrink-0 flex-row items-center gap-1.5", className)}
+      {...props}
+    >
+      {resolvedIcon}
+      {children ? (
+        <Text className="text-xs font-semibold leading-xs text-primary-foreground">
+          {children}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+function CardNewsImage({
+  className,
+  src,
+  alt = "",
+  imageProps,
+  children,
+  ...props
+}: CardNewsImageProps) {
+  const { orientation } = useContext(CardNewsContext);
+  const { width } = useWindowDimensions();
+  const [hasError, setHasError] = useState(false);
+  const showImage = !!src && !hasError;
+  const showHorizontalImage =
+    orientation !== "horizontal" || width >= HORIZONTAL_IMAGE_MIN_WIDTH;
+
+  if (!showHorizontalImage) {
+    return null;
+  }
+
+  return (
+    <View
+      className={cn(
+        "relative overflow-hidden bg-gray-background-soft",
+        orientation === "vertical"
+          ? "h-[300px] w-full rounded-lg"
+          : "w-[482px] rounded-xl",
+        className
+      )}
+      {...props}
+    >
+      {showImage ? (
+        <Image
+          source={{ uri: src }}
+          accessibilityLabel={alt}
+          className="absolute inset-0 size-full"
+          resizeMode="cover"
+          {...imageProps}
+          onError={(event) => {
+            imageProps?.onError?.(event);
+            setHasError(true);
+          }}
+        />
+      ) : (
+        children ?? <FallbackImage className="absolute inset-0" />
+      )}
+    </View>
+  );
+}
+
+function CardNewsContent({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn("flex w-full flex-col gap-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardNewsTitle({
+  className,
+  children,
+  ...props
+}: ViewProps & { children?: ReactNode }) {
+  return (
+    <Text
+      numberOfLines={2}
+      className={cn(
+        "-mb-2 text-title-xs font-semibold leading-title-xs text-primary-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+
+function CardNewsDescription({
+  className,
+  children,
+  ...props
+}: ViewProps & { children?: ReactNode }) {
+  return (
+    <Text
+      numberOfLines={3}
+      className={cn("text-md leading-md text-primary-foreground", className)}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+
+function CardNewsResources({
+  className,
+  label,
+  children,
+  ...props
+}: CardNewsResourcesProps) {
+  return (
+    <View className={cn("flex flex-col gap-2", className)} {...props}>
+      <Text className="text-sm font-semibold leading-sm text-primary-foreground-muted">
+        {label}
+      </Text>
+      <View className="flex-row flex-wrap gap-2">{children}</View>
+    </View>
+  );
+}
+
+function CardNewsResourceItem({
+  className,
+  children,
+  iconLeft,
+  ...props
+}: ButtonProps) {
+  return (
+    <Button
+      variant="outlined"
+      size="sm"
+      className={cn("bg-surface-card", className)}
+      iconLeft={iconLeft}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}
+
+function getInitials(name: string): string {
+  return name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((word) => word[0] ?? "")
+    .join("")
+    .toUpperCase();
+}
+
+function CardNewsAuthor({
+  className,
+  src,
+  alt,
+  name,
+  role,
+  children,
+  ...props
+}: CardNewsAuthorProps) {
+  return (
+    <View
+      className={cn("flex-row items-center gap-2", className)}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <Avatar size="md" alt={alt ?? name ?? ""}>
+            {src ? <AvatarImage src={src} /> : null}
+            <AvatarFallback>
+              {name ? getInitials(name) : undefined}
+            </AvatarFallback>
+          </Avatar>
+          <View className="flex flex-col gap-0.5">
+            {role ? (
+              <Text className="text-xs font-medium leading-xs text-secondary-foreground">
+                {role}
+              </Text>
+            ) : null}
+            {name ? (
+              <Text className="text-sm font-semibold leading-sm text-primary-foreground">
+                {name}
+              </Text>
+            ) : null}
+          </View>
+        </>
+      )}
+    </View>
+  );
+}
+
+function CardNewsFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn(
+        "flex w-full flex-row flex-wrap items-center gap-6 gap-y-3",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardNewsSkeleton({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn(
+        "gap-6 rounded-lg border border-gray-stroke-muted bg-surface-card p-6",
+        className
+      )}
+      {...props}
+    >
+      <View className="flex-row items-start justify-between gap-4">
+        <View className="flex-1 flex-row flex-wrap gap-2">
+          <Skeleton className="h-7 w-[88px] rounded-full" />
+          <Skeleton className="h-7 w-[72px] rounded-full" />
+        </View>
+        <Skeleton className="h-4 w-[72px]" />
+      </View>
+      <Skeleton className="h-[150px] w-full rounded-lg" />
+      <View className="gap-2">
+        <Skeleton className="h-7 w-24 rounded-full" />
+        <Skeleton className="h-5 w-full" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-[85%]" />
+      </View>
+      <View className="gap-4">
+        <Skeleton className="h-12 w-full rounded-lg" />
+        <Skeleton className="h-12 w-full rounded-lg" />
+      </View>
+    </View>
+  );
+}
+
+export {
+  CardNews,
+  CardNewsAuthor,
+  CardNewsBody,
+  CardNewsContent,
+  CardNewsDate,
+  CardNewsDescription,
+  CardNewsFooter,
+  CardNewsHeader,
+  CardNewsImage,
+  CardNewsResourceItem,
+  CardNewsResources,
+  CardNewsSkeleton,
+  CardNewsTags,
+  CardNewsTitle,
+};
+export type {
+  CardNewsAuthorProps,
+  CardNewsDateProps,
+  CardNewsImageProps,
+  CardNewsProps,
+  CardNewsResourcesProps,
+};