@medway-ui/native 1.1.2 → 1.2.0

package/src/components/FeedNotice.tsx

@@ -0,0 +1,112 @@
+import { type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
+
+import {
+  bodySmMediumStyle,
+  bodySmSemiboldStyle,
+  bodyXsMediumStyle,
+} from "@/lib/typography";
+import { cn } from "@/lib/utils";
+
+type FeedNoticeSecondaryMessage = {
+  prefix: string;
+  highlight: string;
+};
+
+interface FeedNoticeProps extends ViewProps {
+  icon?: ReactNode;
+  message: string;
+  secondaryMessage?: FeedNoticeSecondaryMessage;
+  date: string;
+  time: string;
+}
+
+function FeedNoticeMessage({
+  message,
+  secondaryMessage,
+}: {
+  message: string;
+  secondaryMessage?: FeedNoticeSecondaryMessage;
+}) {
+  if (!secondaryMessage) {
+    return (
+      <Text
+        className="text-center text-sm font-medium leading-sm text-gray-foreground"
+        style={bodySmMediumStyle}
+      >
+        {message}
+      </Text>
+    );
+  }
+
+  return (
+    <View className="items-center">
+      <Text
+        className="text-center text-sm font-medium leading-sm text-gray-foreground"
+        style={bodySmMediumStyle}
+      >
+        {message}
+      </Text>
+      <Text
+        className="text-center text-sm font-medium leading-sm text-gray-foreground"
+        style={bodySmMediumStyle}
+      >
+        {secondaryMessage.prefix}
+        <Text
+          className="text-sm font-semibold leading-sm text-gray-foreground"
+          style={bodySmSemiboldStyle}
+        >
+          {secondaryMessage.highlight}
+        </Text>
+      </Text>
+    </View>
+  );
+}
+
+function FeedNotice({
+  className,
+  icon,
+  message,
+  secondaryMessage,
+  date,
+  time,
+  ...props
+}: FeedNoticeProps) {
+  return (
+    <View
+      className={cn(
+        "items-center gap-1 rounded-lg bg-gray-background-soft px-6 py-2",
+        className
+      )}
+      {...props}
+    >
+      {icon ? <View className="size-5">{icon}</View> : null}
+      <FeedNoticeMessage message={message} secondaryMessage={secondaryMessage} />
+      <View className="flex-row items-center gap-1">
+        <Text
+          className="text-xs font-medium leading-xs text-gray-foreground-muted"
+          style={bodyXsMediumStyle}
+        >
+          {date}
+        </Text>
+        <Text
+          className="text-xs font-medium leading-xs text-gray-foreground-muted"
+          style={bodyXsMediumStyle}
+        >
+          •
+        </Text>
+        <Text
+          className="text-xs font-medium leading-xs text-gray-foreground-muted"
+          style={bodyXsMediumStyle}
+        >
+          {time}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+export { FeedNotice };
+export type { FeedNoticeProps, FeedNoticeSecondaryMessage };

package/src/components/Input.tsx

@@ -10,11 +10,9 @@ import {
 import {
   View,
   TextInput,
-  Text,
   Pressable,
   type TextInputProps,
   type ViewProps,
-  type TextProps,
 } from "react-native";
 import Animated, {
   useSharedValue,
@@ -32,7 +30,9 @@ import {
   Show,
   TriangleWarning,
 } from "@medway-ui/icons/native";
+import { Text, type TextComponentProps } from "@/components/Text";
 import { useThemeColor } from "@/hooks/useThemeColor";
+import { fontFamilyMedium } from "@/lib/typography";
 import { cn } from "@/lib/utils";
 
 export type InputType = "text" | "email" | "numeric" | "password";
@@ -78,7 +78,7 @@ export interface InputLabelProps {
   disabled?: boolean;
 }
 
-export interface InputTextProps extends TextProps {
+export interface InputTextProps extends TextComponentProps {
   invalid?: boolean;
 }
 
@@ -147,6 +147,7 @@ function FloatingLabel({ children, floated = false, disabled = false }: InputLab
           left: 16,
           top: "50%",
           zIndex: 10,
+          fontFamily: fontFamilyMedium,
         },
       ]}
       className={cn(
@@ -167,7 +168,7 @@ function InputText({ invalid = false, className, ...props }: InputTextProps) {
   return (
     <Text
       className={cn(
-        "text-xs -mt-1",
+        "text-xs font-medium -mt-1",
         invalid ? "text-feedback-error-foreground" : "text-gray-foreground",
         className
       )}
@@ -238,13 +239,14 @@ function InputPassword({ className, size = "lg", invalid = false, label, ...prop
           secureTextEntry={!visible}
           className={cn(
             inputVariants({ size, invalid, focused, disabled: props.editable === false }),
-            "pl-12 pr-12",
+            "pl-12 pr-12 font-medium",
             className
           )}
           onFocus={() => setFocused(true)}
           onBlur={() => setFocused(false)}
           accessibilityLabel={label}
           {...props}
+          style={[{ fontFamily: fontFamilyMedium }, props.style]}
         />
       </View>
       <InputEndIcon>
@@ -325,11 +327,12 @@ function InputNumeric({
           className={cn(
             inputVariants({ size, invalid, focused, disabled: !editable }),
             iconLeft ? "pl-12" : "",
-            "pr-12",
+            "pr-12 font-medium",
             className
           )}
           accessibilityLabel={label}
           {...props}
+          style={[{ fontFamily: fontFamilyMedium }, props.style]}
         />
       </View>
       <InputEndIcon>
@@ -454,10 +457,12 @@ function Input({
             inputVariants({ size, invalid, focused, disabled: !editable }),
             resolvedIconLeft ? "pl-12" : "",
             resolvedIconRight ? "pr-12" : "",
+            "font-medium",
             className
           )}
           accessibilityLabel={label}
           {...props}
+          style={[{ fontFamily: fontFamilyMedium }, props.style]}
         />
       </View>
       {resolvedIconRight && (

package/src/components/InvitePopover.tsx

@@ -0,0 +1,240 @@
+import { type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
+import * as PopoverPrimitive from "@rn-primitives/popover";
+import { CloseMd } from "@medway-ui/icons/native";
+
+import { Button } from "@/components/Button";
+import { Input } from "@/components/Input";
+import { Separator } from "@/components/Separator";
+import { cn } from "@/lib/utils";
+
+interface InvitePopoverProps extends PopoverPrimitive.RootProps {
+  children?: ReactNode;
+}
+
+interface InvitePopoverTriggerProps extends PopoverPrimitive.TriggerProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+interface InvitePopoverContentProps extends PopoverPrimitive.ContentProps {
+  className?: string;
+  children?: ReactNode;
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+}
+
+interface InvitePopoverEmailRowProps extends ViewProps {
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: (value: string) => void;
+  onAddPress?: () => void;
+  addIcon?: ReactNode;
+  placeholder?: string;
+  label?: string;
+}
+
+interface InvitePopoverActionProps extends ViewProps {
+  children?: ReactNode;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  onPress?: () => void;
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+function InvitePopover({ children, ...props }: InvitePopoverProps) {
+  return <PopoverPrimitive.Root {...props}>{children}</PopoverPrimitive.Root>;
+}
+
+function InvitePopoverTrigger({
+  className,
+  children,
+  ...props
+}: InvitePopoverTriggerProps) {
+  return (
+    <PopoverPrimitive.Trigger className={cn(className)} {...props}>
+      {children}
+    </PopoverPrimitive.Trigger>
+  );
+}
+
+function InvitePopoverContent({
+  className,
+  align = "end",
+  sideOffset = 8,
+  children,
+  ...props
+}: InvitePopoverContentProps) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Overlay className="absolute inset-0" />
+      <PopoverPrimitive.Content
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-[min(370px,100vw-2rem)] border-0 bg-transparent p-0 shadow-none",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function InvitePopoverClose({ className, ...props }: PopoverPrimitive.CloseProps) {
+  return (
+    <PopoverPrimitive.Close
+      className={cn(
+        "mb-4 size-12 items-center justify-center self-end rounded-pill bg-primary-background-fill active:bg-primary-background-fill-emphasis",
+        className
+      )}
+      accessibilityLabel="Fechar"
+      {...props}
+    >
+      <View className="size-6">
+        <CloseMd width={24} height={24} color="#FFFFFF" strokeWidth={2.2} />
+      </View>
+    </PopoverPrimitive.Close>
+  );
+}
+
+function InvitePopoverCard({ className, children, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn(
+        "gap-6 rounded-lg border border-gray-stroke-muted bg-gray-foreground-onfill p-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+
+function InvitePopoverTitle({ className, children, ...props }: ViewProps) {
+  return (
+    <Text
+      className={cn("text-title-xs font-semibold text-primary-foreground", className)}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+
+function InvitePopoverEmailRow({
+  className,
+  value,
+  defaultValue,
+  onChangeText,
+  onAddPress,
+  addIcon,
+  placeholder = "usuario@mail.com",
+  label = "Digite um e-mail",
+  ...props
+}: InvitePopoverEmailRowProps) {
+  return (
+    <View className={cn("gap-2", className)} {...props}>
+      <Text className="pb-2 text-sm font-medium text-gray-foreground">{label}</Text>
+      <View className="flex-row items-end gap-4">
+        <View className="min-w-0 flex-1">
+          <Input
+            type="email"
+            size="lg"
+            value={value}
+            defaultValue={defaultValue}
+            onChangeText={onChangeText}
+            placeholder={placeholder}
+            keyboardType="email-address"
+            autoCapitalize="none"
+            autoCorrect={false}
+          />
+        </View>
+        {onAddPress ? (
+          <Button
+            variant="regular-soft"
+            size="lg"
+            className="size-12 min-h-12 min-w-12 max-w-12 p-0"
+            iconLeft={addIcon}
+            onPress={onAddPress}
+            accessibilityLabel="Adicionar e-mail"
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+function InvitePopoverSendButton({
+  className,
+  children = "Enviar",
+  iconRight,
+  ...props
+}: InvitePopoverActionProps) {
+  return (
+    <Button
+      variant="regular"
+      size="lg"
+      className={cn("w-full", className)}
+      iconRight={iconRight}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}
+
+function InvitePopoverDivider({ className, ...props }: ViewProps) {
+  return (
+    <View className={cn("flex-row items-center gap-4 py-6", className)} {...props}>
+      <Separator className="flex-1" />
+      <Text className="text-xs font-semibold text-primary-foreground">ou</Text>
+      <Separator className="flex-1" />
+    </View>
+  );
+}
+
+function InvitePopoverShareButton({
+  className,
+  children = "Compartilhar link",
+  iconLeft,
+  ...props
+}: InvitePopoverActionProps) {
+  return (
+    <Button
+      variant="regular"
+      size="lg"
+      className={cn("w-full", className)}
+      iconLeft={iconLeft}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export {
+  InvitePopover,
+  InvitePopoverCard,
+  InvitePopoverClose,
+  InvitePopoverContent,
+  InvitePopoverDivider,
+  InvitePopoverEmailRow,
+  InvitePopoverSendButton,
+  InvitePopoverShareButton,
+  InvitePopoverTitle,
+  InvitePopoverTrigger,
+};
+export type {
+  InvitePopoverActionProps,
+  InvitePopoverContentProps,
+  InvitePopoverEmailRowProps,
+  InvitePopoverProps,
+  InvitePopoverTriggerProps,
+};

package/src/components/Label.tsx

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
-import { Pressable, Text, type PressableProps } from "react-native";
+import { Pressable, type PressableProps } from "react-native";
+
+import { Text } from "@/components/Text";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 

package/src/components/LeaderboardCard.tsx

@@ -0,0 +1,70 @@
+import { type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
+
+import { cn } from "@/lib/utils";
+
+interface LeaderboardCardProps extends ViewProps {
+  children?: ReactNode;
+}
+
+interface LeaderboardCardHeaderProps extends ViewProps {
+  icon?: ReactNode;
+  title: string;
+  badge?: ReactNode;
+}
+
+function LeaderboardCard({ className, children, ...props }: LeaderboardCardProps) {
+  return (
+    <View
+      className={cn(
+        "gap-8 rounded-lg border border-gray-stroke-muted bg-surface-card p-6",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+
+function LeaderboardCardHeader({
+  className,
+  icon,
+  title,
+  badge,
+  ...props
+}: LeaderboardCardHeaderProps) {
+  return (
+    <View
+      className={cn("flex-row items-center gap-3", className)}
+      {...props}
+    >
+      {icon ? (
+        <View className="size-8 items-center justify-center rounded-full bg-gray-background-soft p-2">
+          {icon}
+        </View>
+      ) : null}
+      <View className="min-w-0 flex-1 flex-row items-center justify-between gap-2">
+        <Text className="text-lg font-semibold text-primary-foreground">
+          {title}
+        </Text>
+        {typeof badge === "string" ? (
+          <Text className="text-xs font-semibold text-primary-foreground">
+            {badge}
+          </Text>
+        ) : (
+          badge
+        )}
+      </View>
+    </View>
+  );
+}
+
+function LeaderboardCardList({ className, ...props }: ViewProps) {
+  return <View className={cn("gap-2", className)} {...props} />;
+}
+
+export { LeaderboardCard, LeaderboardCardHeader, LeaderboardCardList };
+export type { LeaderboardCardHeaderProps, LeaderboardCardProps };

package/src/components/MemberRow.tsx

@@ -0,0 +1,157 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/Avatar";
+import { RadioGroupItem } from "@/components/RadioGroup";
+import { cn } from "@/lib/utils";
+
+const rankIndicatorVariants = cva("size-[22px] rounded-full", {
+  variants: {
+    rank: {
+      1: "bg-yellow-background-fill",
+      2: "bg-gray-background-fill",
+      3: "bg-warning-background-fill",
+    },
+  },
+  defaultVariants: {
+    rank: 1,
+  },
+});
+
+const memberRowVariants = cva("w-full flex-row items-center p-2", {
+  variants: {
+    variant: {
+      ranked: "",
+      selectable: "px-4 py-4",
+    },
+    highlighted: {
+      true: "rounded-md bg-secondary-background-soft",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    variant: "ranked",
+    highlighted: false,
+  },
+});
+
+interface MemberRowRankedProps extends ViewProps {
+  variant?: "ranked";
+  rank: 1 | 2 | 3;
+  rankLabel: string;
+  name: string;
+  subtitle?: string;
+  avatarSrc?: string;
+  avatarAlt?: string;
+  avatarFallback?: string;
+  highlighted?: boolean;
+  leading?: ReactNode;
+  value?: never;
+}
+
+interface MemberRowSelectableProps extends ViewProps {
+  variant: "selectable";
+  value: string;
+  name: string;
+  avatarSrc?: string;
+  avatarAlt?: string;
+  avatarFallback?: string;
+  highlighted?: boolean;
+  rank?: never;
+  rankLabel?: never;
+  subtitle?: never;
+  leading?: never;
+}
+
+type MemberRowProps = MemberRowRankedProps | MemberRowSelectableProps;
+
+function getInitials(name: string): string {
+  return name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((word) => word[0] ?? "")
+    .join("")
+    .toUpperCase();
+}
+
+function MemberRow({
+  className,
+  variant = "ranked",
+  rank = 1,
+  rankLabel,
+  name,
+  subtitle,
+  avatarSrc,
+  avatarAlt,
+  avatarFallback,
+  value,
+  highlighted = false,
+  leading,
+  ...props
+}: MemberRowProps) {
+  const initials = avatarFallback ?? getInitials(name);
+
+  if (variant === "selectable") {
+    const selectionValue = (props as MemberRowSelectableProps).value;
+
+    return (
+      <View
+        className={cn(memberRowVariants({ variant, highlighted }), className)}
+        {...props}
+      >
+        <View className="min-w-0 flex-1 flex-row items-center gap-4">
+          <RadioGroupItem value={selectionValue} size="md" />
+          <View className="min-w-0 flex-1 flex-row items-center gap-2">
+            <Avatar size="sm" alt={avatarAlt ?? name}>
+              {avatarSrc ? <AvatarImage src={avatarSrc} /> : null}
+              <AvatarFallback>{initials}</AvatarFallback>
+            </Avatar>
+            <Text className="text-md font-semibold text-primary-foreground">
+              {name}
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      className={cn(memberRowVariants({ variant, highlighted }), className)}
+      {...props}
+    >
+      <View className="min-w-0 flex-1 flex-row items-center gap-2">
+        {leading}
+        <View className={cn(rankIndicatorVariants({ rank }))} />
+        <View className="flex-row items-center gap-2">
+          {rankLabel ? (
+            <Text className="w-7 text-md font-semibold text-primary-foreground">
+              {rankLabel}
+            </Text>
+          ) : null}
+          <Avatar size="sm" alt={avatarAlt ?? name}>
+            {avatarSrc ? <AvatarImage src={avatarSrc} /> : null}
+            <AvatarFallback>{initials}</AvatarFallback>
+          </Avatar>
+          <View>
+            <Text className="text-md font-semibold text-primary-foreground">
+              {name}
+            </Text>
+            {subtitle ? (
+              <Text className="text-xs font-medium text-primary-foreground">
+                {subtitle}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export { MemberRow, memberRowVariants, rankIndicatorVariants };
+export type { MemberRowProps };

package/src/components/PageHeader.tsx

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
-import { Text, View, type ViewProps } from "react-native";
+import { View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
 
 import { cn } from "@/lib/utils";