@greatapps/common 1.1.676 → 1.1.677

package/src/components/navigation/subcomponents/PlanCard.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Button, Progress } from '../../../index';
+import { useTranslations } from 'next-intl';
 
 export interface PlanCardProps {
   planName: string;
@@ -10,6 +11,7 @@ export interface PlanCardProps {
 }
 
 export function PlanCard({ planName, trialLabel, progressValue, onKnowPlans }: PlanCardProps) {
+  const translate = useTranslations();
   return (
     <div className="flex flex-col rounded-md p-4 gap-4 bg-gray-50">
       <div className="flex flex-col gap-1">
@@ -22,7 +24,7 @@ export function PlanCard({ planName, trialLabel, progressValue, onKnowPlans }: P
         className="paragraph-small-semibold text-gray-950"
         onClick={onKnowPlans}
       >
-        Conheça os planos
+        {translate('common.navigation.planCard.knowPlans')}
       </Button>
     </div>
   );

package/src/components/navigation/subcomponents/ProjectSelector.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useRef, useEffect, useMemo, RefObject } from 'react';
+import { useTranslations } from 'next-intl';
 import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
 import { useAppNavigationContext } from '../AppNavigationContext';
 import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
@@ -30,6 +31,7 @@ export function ProjectSelector({
   onSelectProject,
   onManageProjects,
 }: ProjectSelectorProps) {
+  const translate = useTranslations();
   const isMainWhitelabel = useIsDefaultWhitelabel();
   const { breakpoint } = useAppNavigationContext();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -124,10 +126,10 @@ export function ProjectSelector({
       {activeSection === 'projects' && (
         <div className="flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400">
           <div className="flex items-center justify-between">
-            <span className="paragraph-small-semibold">Projetos</span>
+            <span className="paragraph-small-semibold">{translate('common.navigation.projectSelector.title')}</span>
           </div>
           <Command className="gap-2" shouldFilter={false}>
-            <CommandInput placeholder="Busque aqui" value={search} onValueChange={setSearch} />
+            <CommandInput placeholder={translate('common.navigation.projectSelector.searchPlaceholder')} value={search} onValueChange={setSearch} />
             <CommandList
               className="custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]"
               onScroll={(event) => {
@@ -141,7 +143,7 @@ export function ProjectSelector({
                 }
               }}
             >
-              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+              <CommandEmpty>{translate('common.navigation.projectSelector.noResults')}</CommandEmpty>
               {showListSkeleton ? (
                 <>
                   <ProjectItemSkeleton />

package/src/components/pages/NotFoundPage.tsx

@@ -2,6 +2,7 @@
 
 import Image from "next/image";
 import { useEffect } from "react";
+import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useWhitelabel, useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
 import { Button } from "../ui/buttons/Button";
@@ -18,6 +19,7 @@ function GreatAppsLogo() {
 }
 
 export function NotFoundPage() {
+  const translate = useTranslations();
   const router = useRouter();
 
   useEffect(() => {
@@ -47,11 +49,11 @@ export function NotFoundPage() {
         </div>
 
         <h1 className="max-w-[554px] px-6 font-[family-name:var(--font-outfit)] text-[32px] leading-[36px] font-semibold text-zinc-950 sm:px-0 sm:text-[56px] sm:leading-[56px]">
-          Página não foi encontrada!
+          {translate('common.notFound.title')}
         </h1>
 
         <p className="max-w-[496px] px-6 paragraph-medium-medium text-zinc-950 sm:px-0">
-          A página que você está procurando não existe. Verifique se digitou corretamente o link que está procurando.
+          {translate('common.notFound.description')}
         </p>
 
         <Button
@@ -65,7 +67,7 @@ export function NotFoundPage() {
             }
           }}
         >
-          Voltar para o início
+          {translate('common.notFound.backToHome')}
         </Button>
       </div>
     </div>

package/src/components/pages/notifications/Notifications.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { IconBell, IconCheck, IconLoader2 } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
 import { Button } from "../../ui/buttons/Button";
 import {
   Tabs,
@@ -34,6 +35,7 @@ function NotificationsList({
   hasNextPage: boolean;
   fetchNextPage: () => void;
 }) {
+  const translate = useTranslations();
   const notifications = pages?.pages.flatMap((p) => p.data) ?? [];
 
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
@@ -50,7 +52,7 @@ function NotificationsList({
     return (
       <div className="rounded-lg border border-zinc-200 bg-white">
         <div className="flex flex-col items-center justify-center py-16 gap-2">
-          <span className="paragraph-medium-regular text-zinc-500">Nenhuma notificação encontrada.</span>
+          <span className="paragraph-medium-regular text-zinc-500">{translate('common.notifications.page.empty')}</span>
         </div>
       </div>
     );
@@ -80,7 +82,7 @@ function NotificationsList({
             actions={
               detailsUrl ? (
                 <Button asChild variant="secondary" className="h-8! px-3! paragraph-small-semibold">
-                  <Link href={detailsUrl}>Detalhes</Link>
+                  <Link href={detailsUrl}>{translate('common.notifications.page.details')}</Link>
                 </Button>
               ) : undefined
             }
@@ -97,6 +99,7 @@ function NotificationsList({
 }
 
 export function NotificationPageContent() {
+  const translate = useTranslations();
   const unreadNotifications = useInfiniteMessages({
     readed: false,
     type: "notification",
@@ -116,12 +119,12 @@ export function NotificationPageContent() {
     markAllAsRead(undefined, {
       onSuccess: () => {
         toast.custom((t) => (
-          <Toast variant="success" message="Todas as notificações foram marcadas como lidas" toastId={t} />
+          <Toast variant="success" message={translate('common.notifications.page.markAllSuccess')} toastId={t} />
         ));
       },
       onError: () => {
         toast.custom((t) => (
-          <Toast variant="error" message="Erro ao marcar notificações como lidas" toastId={t} />
+          <Toast variant="error" message={translate('common.notifications.page.markAllError')} toastId={t} />
         ));
       },
     });
@@ -132,10 +135,10 @@ export function NotificationPageContent() {
       <div className="flex items-center justify-between gap-4">
         <div className="flex flex-col gap-2">
           <h1 className="title-large-semibold text-gray-950">
-            Notificações
+            {translate('common.notifications.page.title')}
           </h1>
           <p className="paragraph-small-regular text-gray-600 hidden lg:block">
-            Tenha controle total sobre páginas, experiências e conversões.
+            {translate('common.notifications.page.subtitle')}
           </p>
         </div>
         <Button
@@ -145,8 +148,8 @@ export function NotificationPageContent() {
           disabled={isMarkingAll || totalUnread === 0}
         >
           {isMarkingAll ? <IconLoader2 size={20} className="animate-spin" /> : <IconCheck size={20} />}
-          <span className="lg:block hidden">Marcar todos como lidos</span>
-          <span className="lg:hidden">Marcar como lidos</span>
+          <span className="lg:block hidden">{translate('common.notifications.page.markAllReadDesktop')}</span>
+          <span className="lg:hidden">{translate('common.notifications.page.markAllReadMobile')}</span>
         </Button>
       </div>
       <Tabs
@@ -155,11 +158,11 @@ export function NotificationPageContent() {
       >
         <TabsList className="h-auto pb-0 bg-transparent">
           <TabsTrigger className="gap-2" value="all">
-            Todas as notificações{" "}
+            {translate('common.notifications.page.tabAll')}{" "}
             <span className="text-gray-500">({totalAll})</span>
           </TabsTrigger>
           <TabsTrigger className="gap-2" value="unreads" disabled={totalUnread === 0}>
-            Não lidas{" "}
+            {translate('common.notifications.page.tabUnread')}{" "}
             <span className="text-gray-500">({totalUnread})</span>
           </TabsTrigger>
         </TabsList>

package/src/components/ui/buttons/CopyButton.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { IconCheck, IconCopy } from '@tabler/icons-react';
 import { toast } from "sonner";
 import { Toast } from "../feedback/Toast";
@@ -19,18 +20,22 @@ export function CopyButton({
   textToCopy,
   size = 14,
   className,
-  tooltipText = "Copiar link",
-  successMessage = "Link copiado",
+  tooltipText,
+  successMessage,
 }: CopyButtonProps) {
+  const translate = useTranslations();
+  const resolvedTooltipText = tooltipText ?? translate('common.forms.copyButton.tooltipDefault');
+  const resolvedSuccessMessage = successMessage ?? translate('common.forms.copyButton.successDefault');
+
   const { isCopied, copy } = useCopyToClipboard({
     onSuccess: () => {
       toast.custom((t) => (
-        <Toast variant="success" message={successMessage} toastId={t} />
+        <Toast variant="success" message={resolvedSuccessMessage} toastId={t} />
       ));
     },
     onError: () => {
       toast.custom((t) => (
-        <Toast variant="error" message="Não foi possível copiar o link" toastId={t} />
+        <Toast variant="error" message={translate('common.forms.copyButton.errorMessage')} toastId={t} />
       ));
     },
   });
@@ -48,7 +53,7 @@ export function CopyButton({
           {isCopied ? <IconCheck size={size} /> : <IconCopy size={size} />}
         </span>
       </TooltipTrigger>
-      <TooltipContent>{isCopied ? "Copiado!" : tooltipText}</TooltipContent>
+      <TooltipContent>{isCopied ? translate('common.actions.copied') : resolvedTooltipText}</TooltipContent>
     </Tooltip>
   );
 }

package/src/components/ui/data-display/CardItem.tsx

@@ -10,6 +10,7 @@ import { CardBrandIcon } from './CardBrandIcons';
 import { useSetDefaultCard } from '../../../modules/cards/hooks/set-default-card.hook';
 import { useHandleDeleteCard } from '../../../modules/cards/hooks/handle-delete-card.hook';
 import type { Card } from '../../../modules/cards/types';
+import { useTranslations } from 'next-intl';
 
 type CardItemProps = {
   card: Card;
@@ -32,6 +33,7 @@ export function CardItem({
   onAfterDelete,
   onAfterSetDefault,
 }: CardItemProps) {
+  const translate = useTranslations();
   const [popoverOpen, setPopoverOpen] = useState(false);
 
   const setDefaultCardMutation = useSetDefaultCard();
@@ -44,7 +46,7 @@ export function CardItem({
         toast.custom((t) => (
           <Toast
             variant="success"
-            message="Cartão definido como padrão"
+            message={translate('common.cards.item.setDefaultSuccess')}
             toastId={t}
           />
         ));
@@ -54,7 +56,7 @@ export function CardItem({
         toast.custom((t) => (
           <Toast
             variant="error"
-            message="Erro ao definir cartão padrão"
+            message={translate('common.cards.item.setDefaultError')}
             toastId={t}
           />
         ));
@@ -86,7 +88,7 @@ export function CardItem({
       </div>
       {card.is_default && (
         <span className="paragraph-xsmall-semibold text-zinc-600 bg-zinc-100 px-2 py-0.5 rounded-lg whitespace-nowrap">
-          Padrão
+          {translate('common.cards.item.defaultBadge')}
         </span>
       )}
       <CardBrandIcon brand={card.brand} />
@@ -108,7 +110,7 @@ export function CardItem({
             {menuHasSetDefault && (
               <NavBarItem
                 icon={<IconStar size={18} className="text-zinc-400" />}
-                label="Tornar padrão"
+                label={translate('common.cards.item.makeDefault')}
                 onClick={() => {
                   setPopoverOpen(false);
                   handleSetDefault();
@@ -118,7 +120,7 @@ export function CardItem({
             {menuHasDelete && (
               <NavBarItem
                 icon={<IconTrash size={18} className="text-zinc-400" />}
-                label="Excluir"
+                label={translate('common.actions.delete')}
                 onClick={() => {
                   setPopoverOpen(false);
                   handleDeleteCard(card);

package/src/components/ui/data-display/PaymentInfoCard.tsx

@@ -9,6 +9,7 @@ import { useCards } from '../../../modules/cards/hooks/cards.hook';
 import { useModalManager } from '../../../store/useModalManager';
 import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 import type { Card } from '../../../modules/cards/types';
+import { useTranslations } from 'next-intl';
 
 type PaymentInfoCardProps = {
   email?: string;
@@ -29,6 +30,7 @@ export function PaymentInfoCard({
   hideDelete,
   hideSetDefault,
 }: PaymentInfoCardProps) {
+  const translate = useTranslations();
   const isMobile = useIsMobile();
   const { openModal } = useModalManager();
   const isDefaultWl = useIsDefaultWhitelabel();
@@ -83,19 +85,19 @@ export function PaymentInfoCard({
       <div className="border border-zinc-200 rounded-lg overflow-hidden">
         {email && (
           <div className="flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3">
-            <span className="paragraph-small-medium text-zinc-500 w-[100px]">E-mail</span>
+            <span className="paragraph-small-medium text-zinc-500 w-[100px]">{translate('common.cards.paymentInfo.email')}</span>
             <span className="paragraph-small-medium text-zinc-950 flex-1">{email}</span>
           </div>
         )}
         <div className="flex items-center h-[60px] px-4 gap-3">
-          <span className="paragraph-small-medium text-zinc-500 w-[100px]">Pagamento</span>
+          <span className="paragraph-small-medium text-zinc-500 w-[100px]">{translate('common.cards.paymentInfo.payment')}</span>
           <button
             type="button"
             onClick={handleOpenAddCardModal}
             className="flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit"
           >
             <IconPlus className="size-[18px]" />
-            <span className="px-1.5">Adicionar cartão</span>
+            <span className="px-1.5">{translate('common.cards.paymentInfo.addCard')}</span>
           </button>
         </div>
       </div>
@@ -107,7 +109,7 @@ export function PaymentInfoCard({
       <div className="border border-zinc-200 rounded-lg overflow-hidden">
         {email && (
           <div className="flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3">
-            <span className="paragraph-small-medium text-zinc-500 w-[100px]">E-mail</span>
+            <span className="paragraph-small-medium text-zinc-500 w-[100px]">{translate('common.cards.paymentInfo.email')}</span>
             <span className="paragraph-small-medium text-zinc-950 flex-1">{email}</span>
           </div>
         )}
@@ -118,7 +120,7 @@ export function PaymentInfoCard({
         >
           {!isExpanded ? (
             <>
-              <span className="paragraph-small-medium text-zinc-500 w-[100px]">Pagamento</span>
+              <span className="paragraph-small-medium text-zinc-500 w-[100px]">{translate('common.cards.paymentInfo.payment')}</span>
               <div className="flex flex-col gap-0.5 flex-1 min-w-0">
                 <span className="paragraph-small-semibold text-zinc-950 truncate">
                   {selectedCard?.name}
@@ -135,7 +137,7 @@ export function PaymentInfoCard({
           ) : (
             <>
               <span className="paragraph-small-semibold text-zinc-950 flex-1">
-                Selecione a forma de pagamento
+                {translate('common.cards.paymentInfo.selectPaymentMethod')}
               </span>
               <div className="size-8 flex items-center justify-center rounded-lg">
                 <IconChevronDown className="size-[18px] text-zinc-500 rotate-180" />
@@ -170,7 +172,7 @@ export function PaymentInfoCard({
                   : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50'
               }`}
             >
-              Gerenciar cartões
+              {translate('common.cards.paymentInfo.manageCards')}
             </button>
           )}
         </div>
@@ -183,7 +185,7 @@ export function PaymentInfoCard({
       >
         <IconPlus className="size-[18px]" />
         <span className="px-1.5">
-          {isExpanded ? 'Adicionar cartão' : 'Nova forma de pagamento'}
+          {isExpanded ? translate('common.cards.paymentInfo.addCard') : translate('common.cards.paymentInfo.newPaymentMethod')}
         </span>
       </button>
     </div>

package/src/components/ui/feedback/CircularProgress.tsx

@@ -34,6 +34,10 @@ export default function CircularProgress({
       aria-valuenow={current}
       aria-valuemin={0}
       aria-valuemax={total}
+      // i18n-TODO: aria-label hardcoded — CircularProgress has no 'use client' directive and
+      // receives no translate prop, so useTranslations() cannot be called here without
+      // converting it to a client component. Key to use: common.forms.progressAriaLabel ('Progresso').
+      // Either add 'use client' + useTranslations(), or accept a translate prop from the caller.
       aria-label="Progresso"
     >
       <svg width={size} height={size} className="absolute">

package/src/components/ui/feedback/DefaultCircularProgress.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import {
   calculateRadius,
   calculateCircumference,
@@ -21,6 +22,7 @@ export default function DefaultCircularProgress({
   size = 62,
   strokeWidth = 3,
 }: CircularProgressProps) {
+  const translate = useTranslations();
   const isDefaultWl = useIsDefaultWhitelabel();
   const radius = calculateRadius(size, strokeWidth);
   const circumference = calculateCircumference(radius);
@@ -35,7 +37,7 @@ export default function DefaultCircularProgress({
       aria-valuenow={current}
       aria-valuemin={0}
       aria-valuemax={total}
-      aria-label="Progresso de exportação"
+      aria-label={translate('common.forms.circularProgress.ariaLabel')}
     >
       <svg width={size} height={size} className="absolute">
         <circle

package/src/components/ui/form/ComboboxField.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useMemo } from 'react';
+import { useTranslations } from 'next-intl';
 import { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';
 import { cn } from '../../../infra/utils/clsx';
@@ -28,9 +29,9 @@ interface ComboboxFieldProps {
 export function ComboboxField({
   options,
   label,
-  placeholder = 'Selecione uma opção',
-  searchPlaceholder = 'Buscar...',
-  emptyMessage = 'Nenhuma opção encontrada.',
+  placeholder,
+  searchPlaceholder,
+  emptyMessage,
   value,
   onChange,
   disabled = false,
@@ -38,6 +39,10 @@ export function ComboboxField({
   className,
   containerClassName,
 }: ComboboxFieldProps) {
+  const translate = useTranslations();
+  const resolvedPlaceholder = placeholder ?? translate('common.forms.combobox.placeholder');
+  const resolvedSearchPlaceholder = searchPlaceholder ?? translate('common.forms.combobox.searchPlaceholder');
+  const resolvedEmptyMessage = emptyMessage ?? translate('common.forms.combobox.emptyMessage');
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState('');
 
@@ -90,7 +95,7 @@ export function ComboboxField({
             <span className={cn('truncate text-left', !selectedOption && 'text-gray-400')}>
               {selectedOption
                 ? (selectedOption.displayValue ?? selectedOption.label)
-                : placeholder}
+                : resolvedPlaceholder}
             </span>
             {icon ?? (
               <IconChevronDown
@@ -114,7 +119,7 @@ export function ComboboxField({
             <IconSearch className="size-4 shrink-0 opacity-50 text-gray-500" />
             <input
               autoFocus
-              placeholder={searchPlaceholder}
+              placeholder={resolvedSearchPlaceholder}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               className="flex h-full w-full bg-transparent text-sm outline-none placeholder:text-gray-400 paragraph-small-medium text-gray-950"
@@ -123,7 +128,7 @@ export function ComboboxField({
 
           <div className="overflow-y-auto max-h-[280px] p-1">
             {filteredOptions.length === 0 ? (
-              <p className="py-6 text-center paragraph-small-medium text-gray-500">{emptyMessage}</p>
+              <p className="py-6 text-center paragraph-small-medium text-gray-500">{resolvedEmptyMessage}</p>
             ) : (
               filteredOptions.map((option) => {
                 const isSelected = value === option.value;

package/src/components/ui/form/DatePicker.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, forwardRef, useEffect } from "react";
+import { useTranslations } from "next-intl";
 import { format } from "date-fns";
 import { Calendar } from "./Calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
@@ -23,9 +24,11 @@ interface DatePickerProps {
 
 export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
   (
-    { value, onChange, placeholder = "Selecione a data", className, disabled },
+    { value, onChange, placeholder, className, disabled },
     ref,
   ) => {
+    const translate = useTranslations();
+    const resolvedPlaceholder = placeholder ?? translate('common.forms.datePicker.placeholder');
     const [open, setOpen] = useState(false);
     const [date, setDate] = useState<Date | undefined>(() => {
       return value ? isoParaDataLocal(value) : undefined;
@@ -51,7 +54,7 @@ export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
       }
     };
 
-    const displayText = date ? format(date, "dd/MM/yyyy") : placeholder;
+    const displayText = date ? format(date, "dd/MM/yyyy") : resolvedPlaceholder;
 
     return (
       <Popover open={open} onOpenChange={setOpen}>

package/src/components/ui/form/DateRangePicker.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, forwardRef, useEffect } from "react";
+import { useTranslations } from "next-intl";
 import { format } from "date-fns";
 import { IconCalendar } from '@tabler/icons-react';
 import { DateRange } from "react-day-picker";
@@ -24,7 +25,9 @@ interface DateRangePickerProps {
 }
 
 export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProps>(
-  ({ value, onChange, placeholder = "Selecione o período", className, disabled }, ref) => {
+  ({ value, onChange, placeholder, className, disabled }, ref) => {
+    const translate = useTranslations();
+    const resolvedPlaceholder = placeholder ?? translate('common.forms.dateRangePicker.placeholder');
     const [open, setOpen] = useState(false);
     const [range, setRange] = useState<DateRange | undefined>(() => {
       if (value?.from && value?.to) {
@@ -62,7 +65,7 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
 
     const displayText = range?.from && range?.to
       ? `${format(range.from, "dd/MM/yyyy")} - ${format(range.to, "dd/MM/yyyy")}`
-      : placeholder;
+      : resolvedPlaceholder;
 
     return (
       <Popover open={open} onOpenChange={setOpen}>

package/src/components/ui/form/PhoneInput.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
+import { useTranslations } from 'next-intl';
 import { AsYouType, CountryCode } from 'libphonenumber-js';
 import { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';
 import { IconChevronDown, IconSearch } from '@tabler/icons-react';
@@ -41,6 +42,7 @@ export default function PhoneInput({
   classnameContainer,
   className,
 }: PhoneInputProps) {
+  const translate = useTranslations();
   const parsed = parsePhoneValue(value ?? '');
   const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);
   const [phoneNumber, setPhoneNumber] = useState(parsed.number);
@@ -115,7 +117,7 @@ export default function PhoneInput({
       {label && (
         <div className="flex items-center gap-1 paragraph-xsmall-semibold">
           <span className="text-zinc-600">{label}</span>
-          {optional && <span className="text-zinc-500">(Opcional)</span>}
+          {optional && <span className="text-zinc-500">{translate('common.forms.phoneInput.optional')}</span>}
           {required && <span className="text-red-600">*</span>}
         </div>
       )}
@@ -148,7 +150,7 @@ export default function PhoneInput({
               <input
                 type="text"
                 className="flex-1 text-sm outline-none placeholder:text-zinc-400"
-                placeholder="Buscar país..."
+                placeholder={translate('common.forms.phoneInput.searchPlaceholder')}
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 autoFocus
@@ -175,7 +177,7 @@ export default function PhoneInput({
                 </button>
               ))}
               {filtered.length === 0 && (
-                <p className="text-sm text-zinc-500 p-3 text-center">Nenhum país encontrado</p>
+                <p className="text-sm text-zinc-500 p-3 text-center">{translate('common.forms.phoneInput.emptyMessage')}</p>
               )}
             </div>
           </PopoverContent>

package/src/components/ui/form/SelectField.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import {
   Select,
   SelectContent,
@@ -41,7 +42,7 @@ export function SelectField({
   hintMessage,
   error = false,
   errorMessage,
-  placeholder = 'Selecione uma opção',
+  placeholder,
   options,
   value,
   defaultValue,
@@ -51,6 +52,8 @@ export function SelectField({
   className,
   containerClassName,
 }: SelectFieldProps) {
+  const translate = useTranslations();
+  const resolvedPlaceholder = placeholder ?? translate('common.forms.select.placeholder');
   const handleValueChange = (selectedValue: string) => {
     if (!onChange) return;
     const selectedOption = options.find((option) => String(option.value) === selectedValue);
@@ -67,7 +70,7 @@ export function SelectField({
       {label && (
         <div className="flex items-center gap-1 paragraph-xsmall-semibold">
           <span className="text-gray-600">{label}</span>
-          {optional && <span className="text-gray-500">(Opcional)</span>}
+          {optional && <span className="text-gray-500">{translate('common.forms.select.optional')}</span>}
           {required && <span className="text-red-600">*</span>}
         </div>
       )}
@@ -89,7 +92,7 @@ export function SelectField({
           )}
           icon={icon}
         >
-          <SelectValue placeholder={placeholder}>
+          <SelectValue placeholder={resolvedPlaceholder}>
             {value !== undefined &&
               (() => {
                 const selectedOption = options.find((opt) => String(opt.value) === String(value));