@medway-ui/native 1.1.2 → 1.3.0

package/src/components/EmptyState.tsx

@@ -1,15 +1,7 @@
 import { type ReactNode } from "react";
 import { View, type ViewProps } from "react-native";
 
-import {
-  Alert,
-  AlertActions,
-  AlertContainer,
-  AlertContent,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-} from "@/components/Alert";
+import { Text } from "@/components/Text";
 import { cn } from "@/lib/utils";
 
 interface EmptyStateProps extends ViewProps {
@@ -26,29 +18,35 @@ function EmptyState({
   title,
   description,
   action,
-  variant = "regular",
+  variant: _variant = "regular",
   ...props
 }: EmptyStateProps) {
   return (
     <View
       className={cn(
-        "items-center gap-6 rounded-lg border border-gray-stroke-muted bg-surface-card p-8",
+        "w-full items-center gap-6 rounded-xl border border-gray-stroke-muted bg-surface-card p-8 shadow-sm",
         className
       )}
       {...props}
     >
-      <Alert variant={variant} className="border-0 bg-transparent p-0">
-        <AlertContainer>
-          {icon ? <AlertIcon icon={icon} /> : null}
-          <AlertContent>
-            <AlertTitle>{title}</AlertTitle>
-            {description ? (
-              <AlertDescription>{description}</AlertDescription>
-            ) : null}
-          </AlertContent>
-        </AlertContainer>
-        {action ? <AlertActions>{action}</AlertActions> : null}
-      </Alert>
+      {icon ? (
+        <View className="size-16 items-center justify-center rounded-full bg-gray-background-soft">
+          {icon}
+        </View>
+      ) : null}
+
+      <View className="w-full items-center gap-4">
+        <Text className="text-center text-lg font-semibold text-primary-foreground">
+          {title}
+        </Text>
+        {description ? (
+          <Text className="text-center text-sm font-medium text-primary-foreground-muted">
+            {description}
+          </Text>
+        ) : null}
+      </View>
+
+      {action ? <View className="w-full">{action}</View> : null}
     </View>
   );
 }

package/src/components/Feed.tsx

@@ -0,0 +1,96 @@
+import { type ReactNode } from "react";
+import { TextInput, View, type TextInputProps, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
+
+import { InputText, inputVariants } from "@/components/Input";
+import { cn } from "@/lib/utils";
+
+interface FeedProps extends ViewProps {
+  children?: ReactNode;
+}
+
+interface FeedTitleProps extends ViewProps {
+  children?: ReactNode;
+}
+
+interface FeedComposerProps extends Omit<TextInputProps, "value" | "defaultValue"> {
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: (value: string) => void;
+  maxLength?: number;
+  placeholder?: string;
+  iconLeft?: ReactNode;
+}
+
+function Feed({ className, children, ...props }: FeedProps) {
+  return (
+    <View className={cn("gap-3", className)} {...props}>
+      {children}
+    </View>
+  );
+}
+
+function FeedTitle({ className, children, ...props }: FeedTitleProps) {
+  return (
+    <Text
+      className={cn("text-lg font-medium text-primary-foreground", className)}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+
+function FeedComposer({
+  className,
+  value,
+  defaultValue,
+  onChangeText,
+  maxLength = 120,
+  placeholder = "Diga alguma coisa",
+  iconLeft,
+  editable = true,
+  ...props
+}: FeedComposerProps) {
+  const currentLength = (value ?? defaultValue ?? "").length;
+
+  return (
+    <View className={cn("gap-1", className)}>
+      <View className="relative flex-row items-center">
+        {iconLeft ? (
+          <View className="absolute left-4 z-10 size-6">{iconLeft}</View>
+        ) : null}
+        <TextInput
+          multiline
+          textAlignVertical="top"
+          maxLength={maxLength}
+          value={value}
+          defaultValue={defaultValue}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          editable={editable}
+          className={cn(
+            inputVariants({
+              size: "lg",
+              invalid: false,
+              focused: false,
+              disabled: !editable,
+            }),
+            "min-h-12 py-3 font-medium",
+            iconLeft ? "pl-12" : ""
+          )}
+          accessibilityLabel={placeholder}
+          {...props}
+          style={[{ fontFamily: "MontserratMedium" }, props.style]}
+        />
+      </View>
+      <InputText className="text-right text-xs font-medium text-gray-foreground">
+        {currentLength} / {maxLength}
+      </InputText>
+    </View>
+  );
+}
+
+export { Feed, FeedComposer, FeedTitle };
+export type { FeedComposerProps, FeedProps, FeedTitleProps };

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 };