@12-apps/ui 6.2.0 → 6.3.0

package/src/components/data-display/DataViews/data-views-filter-panel.tsx

@@ -7,6 +7,7 @@ import { TableFilter } from "../../layout/TableFilter";
 
 import { PillControl } from "./data-views-category-pill";
 import { PanelRangeField } from "./data-views-range-pill";
+import { useDataViewsCopy } from "./data-views-copy-context";
 import type {
   FilterFieldConfig,
   RangeFieldConfig,
@@ -84,17 +85,18 @@ function FilterControls<T extends Record<string, unknown>>({
   onChangeRange,
   onClearField,
 }: Omit<GridFilterPanelProps<T>, "onClearAll">): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <>
       <TableFilter.Keyword
         value={search}
         onChange={onSearchChange}
-        label="Buscar em todas as colunas"
-        placeholder="Pressione Enter para filtrar"
+        label={copy.search.allColumnsLabel}
+        placeholder={copy.search.keywordPlaceholder}
         testId={`${testIdPrefix}-search-all`}
       />
       {(fields.length > 0 || rangeFields.length > 0) && (
-        <TableFilter.Section title="Filtros">
+        <TableFilter.Section title={copy.filters.panelTitle}>
           {fields.map((field) => (
             <PillField
               key={field.id}
@@ -124,11 +126,12 @@ function FilterControls<T extends Record<string, unknown>>({
 export function GridFilterPanel<T extends Record<string, unknown>>(
   props: GridFilterPanelProps<T>,
 ): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <TableFilter.Panel
       onClearAll={props.onClearAll}
       clearTestId={`${props.testIdPrefix}-clear-filters`}
-      ariaLabel="Filtros"
+      ariaLabel={copy.filters.panelTitle}
     >
       <FilterControls {...props} />
     </TableFilter.Panel>
@@ -150,11 +153,12 @@ export function FilterDialog<T extends Record<string, unknown>>({
   onClose,
   ...props
 }: FilterDialogProps<T>): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <StackedModal
       open={open}
       onClose={onClose}
-      navigationTitle="Filtros"
+      navigationTitle={copy.filters.panelTitle}
       modalId={`${props.testIdPrefix}-filters`}
       maxWidth="xs"
       dataTestId={`${props.testIdPrefix}-filter-dialog`}

package/src/components/data-display/DataViews/data-views-grid-helpers.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { type GridColumn } from "../DataGrid";
 import { type SortFieldDefinition } from "../../layout/ContentToolbar";
 import { Box } from "../../../mui/Box";
@@ -105,6 +106,7 @@ function renderAutoKebab<T extends Record<string, unknown>>(
   testIdPrefix: string,
   getRowId: (row: T) => string | number,
 ): React.ReactNode {
+  const copy = useDataViewsCopy();
   const items: DropdownMenuItem[] = kebabActions
     .filter((action) => action.isVisible?.(row) ?? true)
     .map((action) => ({
@@ -119,7 +121,7 @@ function renderAutoKebab<T extends Record<string, unknown>>(
       size="sm"
       items={items}
       trigger={
-        <Button variant="text" size="sm" dataTestId={`${testIdPrefix}-actions-${getRowId(row)}`} aria-label="Ações">
+        <Button variant="text" size="sm" dataTestId={`${testIdPrefix}-actions-${getRowId(row)}`} aria-label={copy.grid.rowActions}>
           ⋮
         </Button>
       }
@@ -222,6 +224,7 @@ export function renderBulkActions<T extends Record<string, unknown>>({
   clearSelection,
   testIdPrefix,
 }: RenderBulkArgs<T>): React.ReactNode {
+  const copy = useDataViewsCopy();
   if (selectedRows.length === 0) return undefined;
   if (rowActions) {
     const items = bulkMenuItems(rowActions, selectedRows, clearSelection);
@@ -232,7 +235,7 @@ export function renderBulkActions<T extends Record<string, unknown>>({
         items={items}
         trigger={
           <Button variant="outline" size="sm" dataTestId={`${testIdPrefix}-bulk-actions`}>
-            Ações ({selectedRows.length}) ▾
+            {copy.grid.bulkActions(selectedRows.length)}
           </Button>
         }
       />

package/src/components/data-display/DataViews/data-views-more-fields.tsx

@@ -22,6 +22,7 @@ import type { OverflowField } from "./data-views-overflow";
 import { RangeBounds } from "./data-views-range-pill";
 import { isRangeSet } from "./data-views-range-values";
 import type { RangeValue } from "./data-views-types";
+import { useDataViewsCopy } from "./data-views-copy-context";
 
 /** What each field's control needs, minus the panel's own chrome. */
 export interface MoreFieldProps {
@@ -54,6 +55,7 @@ function OverflowPill<T extends Record<string, unknown>>({
   onClear: () => void;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const options = field.pill?.options ?? [];
   if (options.length > INLINE_OPTION_LIMIT) {
     return (
@@ -63,10 +65,10 @@ function OverflowPill<T extends Record<string, unknown>>({
         selected={new Set(values)}
         onToggle={onToggle}
         onClear={onClear}
-        allLabel="Todas"
+        allLabel={copy.filters.allOption}
         searchable={options.length > 6 ? true : undefined}
-        searchPlaceholder="Buscar…"
-        noResultsLabel="Nenhum resultado"
+        searchPlaceholder={copy.filters.optionSearchPlaceholder}
+        noResultsLabel={copy.filters.optionsEmpty}
         layout="pill"
         data-testid={`${testIdPrefix}-more-${field.id}`}
       />

package/src/components/data-display/DataViews/data-views-more-filters.tsx

@@ -10,6 +10,7 @@ import FilterAltRoundedIcon from "@mui/icons-material/FilterAltRounded";
 import { Popover } from "@mui/material";
 import { useState } from "react";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { Button } from "../../form/Button";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
@@ -58,6 +59,7 @@ function MoreTrigger({
   onOpen: (anchor: HTMLElement) => void;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const applied = appliedCount > 0;
   return (
     <Button
@@ -68,8 +70,8 @@ function MoreTrigger({
       dataTestId={`${testIdPrefix}-more-filters`}
       aria-label={
         applied
-          ? `Mais filtros: ${count} sem espaço na barra, ${appliedCount} aplicado(s)`
-          : `Mais filtros: ${count} sem espaço na barra`
+          ? copy.filters.moreFiltersApplied(count, appliedCount)
+          : copy.filters.moreFilters(count)
       }
     >
       <Box
@@ -109,6 +111,7 @@ function MoreTrigger({
 
 /** The panel's heading: what these are, and why they are in here. */
 function MoreHeading(): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Box
       sx={{
@@ -128,7 +131,7 @@ function MoreHeading(): React.JSX.Element {
       </Text>
       <Text variant="caption" as="span">
         <Box component="span" sx={{ ml: "auto", color: "text.disabled" }}>
-          sem espaço na barra
+          {copy.filters.overflowNote}
         </Box>
       </Text>
     </Box>

package/src/components/data-display/DataViews/data-views-range-pill.tsx

@@ -16,6 +16,7 @@ import ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { Box, Button, Popover, Typography } from '@mui/material';
 import React, { useState } from 'react';
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { TableFilter } from '../../layout/TableFilter';
 import { DayBoundInput } from './data-views-day-input';
 import { NumberBoundInput } from './data-views-number-input';
@@ -89,13 +90,14 @@ export function RangeBounds<T extends Record<string, unknown>>({
   onChange: (range: RangeValue) => void;
   testId: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const inverted = isRangeInverted(value);
   return (
     <Box data-testid={`${testId}-panel`}>
       {/* Above the inputs, not below: the presets are the answer for most
           merchants, and the two date pickers are the escape hatch. */}
       <Box sx={{ '&:not(:empty)': { mb: 1.5 } }}>
-        <RangePresets presets={presetsFor(field)} value={value} onChange={onChange} testId={testId} />
+        <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />
       </Box>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
         <BoundField
@@ -107,7 +109,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
         />
         <BoundField
           field={field}
-          label="Até"
+          label={copy.filters.rangeEnd}
           value={value.max}
           onChange={(max) => onChange({ ...value, max })}
           testId={`${testId}-max`}
@@ -119,7 +121,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
           data-testid={`${testId}-inverted`}
           sx={{ mt: 0.75, fontSize: '0.75rem', color: 'error.main' }}
         >
-          O início precisa ser menor que o fim.
+          {copy.filters.rangeInvalid}
         </Typography>
       )}
       {/* BOTH days are in the result. Saying so is FUT-668's other half: the
@@ -153,6 +155,7 @@ function ClearAffordance({
   onClear: () => void;
   testId: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const clear = (event: React.SyntheticEvent): void => {
     event.stopPropagation();
     onClear();
@@ -162,7 +165,7 @@ function ClearAffordance({
       component="span"
       role="button"
       tabIndex={0}
-      aria-label={`Limpar ${label}`}
+      aria-label={copy.filters.clearRange(label)}
       data-testid={testId}
       onClick={clear}
       onKeyDown={(event: React.KeyboardEvent) => {
@@ -326,6 +329,7 @@ export function PanelRangeField<T extends Record<string, unknown>>({
   onChange: (range: RangeValue) => void;
   testId: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   if (field.kind === "day") {
     return (
       <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
@@ -348,7 +352,7 @@ export function PanelRangeField<T extends Record<string, unknown>>({
       {/* Below the numeric control here, unlike the pill's popover: this one
           renders its own label, and chips above it would separate the label
           from the field it names. */}
-      <RangePresets presets={presetsFor(field)} value={value} onChange={onChange} testId={testId} />
+      <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />
     </Box>
   );
 }

package/src/components/data-display/DataViews/data-views-range-presets.ts

@@ -1,3 +1,4 @@
+import type { DataViewsCopy } from "./data-views-copy";
 import type { RangeFieldConfig, RangePreset, RangeValue } from "./data-views-types";
 
 /**
@@ -41,10 +42,10 @@ function shiftDays(date: Date, days: number): Date {
  * The week starts on SUNDAY, following the Brazilian calendar these grids are
  * read against rather than ISO-8601's Monday.
  */
-export const DAY_RANGE_PRESETS: RangePreset[] = [
+export function dayRangePresets(copy: DataViewsCopy): RangePreset[] {
+  return [
   {
     id: "hoje",
-    label: "Hoje",
     range: () => {
       const today = isoDay(new Date());
       return { min: today, max: today };
@@ -52,7 +53,6 @@ export const DAY_RANGE_PRESETS: RangePreset[] = [
   },
   {
     id: "ontem",
-    label: "Ontem",
     range: () => {
       const yesterday = isoDay(shiftDays(new Date(), -1));
       return { min: yesterday, max: yesterday };
@@ -60,7 +60,6 @@ export const DAY_RANGE_PRESETS: RangePreset[] = [
   },
   {
     id: "semana",
-    label: "Esta semana",
     range: () => {
       const now = new Date();
       const sunday = shiftDays(now, -now.getDay());
@@ -69,7 +68,6 @@ export const DAY_RANGE_PRESETS: RangePreset[] = [
   },
   {
     id: "mes",
-    label: "Este mês",
     range: () => {
       const now = new Date();
       const year = now.getFullYear();
@@ -81,13 +79,13 @@ export const DAY_RANGE_PRESETS: RangePreset[] = [
   },
   {
     id: "ano",
-    label: "Este ano",
     range: () => {
       const year = new Date().getFullYear();
       return { min: `${year}-01-01`, max: `${year}-12-31` };
     },
   },
-];
+  ].map((preset) => ({ ...preset, label: copy.filters.rangePresets[preset.id] ?? preset.id }));
+}
 
 /**
  * The presets a field offers: its own, or the calendar defaults for a day field
@@ -96,9 +94,10 @@ export const DAY_RANGE_PRESETS: RangePreset[] = [
  */
 export function presetsFor<T extends Record<string, unknown>>(
   field: RangeFieldConfig<T>,
+  copy: DataViewsCopy,
 ): RangePreset[] {
   if (field.presets) return field.presets;
-  return field.kind === "day" ? DAY_RANGE_PRESETS : [];
+  return field.kind === "day" ? dayRangePresets(copy) : [];
 }
 
 /** A preset's window, evaluating it if it is time-dependent. */

package/src/components/data-display/DataViews/data-views-scopes.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useRef } from "react";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { Box } from "../../../mui/Box";
 
 /**
@@ -320,6 +321,7 @@ export function DataViewsScopeTabs({
   counts,
   testIdPrefix,
 }: DataViewsScopeTabsProps): React.JSX.Element | null {
+  const copy = useDataViewsCopy();
   const stripRef = useScrollActiveIntoView(value);
   const moveTo = (index: number): void => {
     // Focus FIRST, then select: the roving tabindex follows the selection, so
@@ -337,7 +339,7 @@ export function DataViewsScopeTabs({
   );
 
   return (
-    <Box ref={stripRef} role="tablist" aria-label="Situação" data-testid={`${testIdPrefix}-scopes`} sx={STRIP_SX}>
+    <Box ref={stripRef} role="tablist" aria-label={copy.filters.scopesLabel} data-testid={`${testIdPrefix}-scopes`} sx={STRIP_SX}>
       {scopes.map((scope, index) => (
         <ScopeTab
           key={scope.id}

package/src/components/data-display/DataViews/data-views-search.tsx

@@ -11,6 +11,7 @@ import { IconButton, InputAdornment, TextField } from "@mui/material";
 import { useEffect, useRef, useState } from "react";
 
 import { Box } from "../../../mui/Box";
+import { useDataViewsCopy } from "./data-views-copy-context";
 
 /** How long the box waits after the last keystroke before it queries. */
 const SEARCH_DEBOUNCE_MS = 350;
@@ -60,6 +61,7 @@ export function InlineKeyword({
   /** Take whatever width there is, with no minimum — see {@link boxWidth}. */
   fill?: boolean;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const [draft, setDraft] = useState(value);
   const prev = useRef(value);
   // An external change (a saved view, the URL, "Limpar") wins over the draft.
@@ -92,8 +94,8 @@ export function InlineKeyword({
         event.preventDefault();
         if (draft !== value) onChange(draft);
       }}
-      placeholder="Buscar…"
-      inputProps={{ "aria-label": "Buscar em todas as colunas", "data-testid": testId }}
+      placeholder={copy.search.placeholder}
+      inputProps={{ "aria-label": copy.search.allColumnsLabel, "data-testid": testId }}
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">
@@ -104,7 +106,7 @@ export function InlineKeyword({
           <InputAdornment position="end">
             <IconButton
               size="small"
-              aria-label="Limpar busca"
+              aria-label={copy.search.clear}
               data-testid={testId ? `${testId}-clear` : undefined}
               onClick={() => setDraft("")}
               sx={{ p: 0.25 }}
@@ -137,11 +139,12 @@ export function CollapsedSearch({
   onOpen: () => void;
   testId?: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <IconButton
       size="small"
       onClick={onOpen}
-      aria-label="Buscar"
+      aria-label={copy.search.open}
       aria-expanded={false}
       data-testid={testId ? `${testId}-collapsed` : undefined}
       sx={{

package/src/components/data-display/DataViews/data-views-select-all-strip.tsx

@@ -2,6 +2,7 @@
 
 import { Checkbox } from "@mui/material";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { Button } from "../../form/Button";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
@@ -38,6 +39,7 @@ export function SelectAllStrip<T>({
   onChange: (next: Set<string | number>) => void;
   testIdPrefix: string;
 }): React.JSX.Element | null {
+  const copy = useDataViewsCopy();
   if (rows.length === 0) return null;
   const pageIds = rows.map(getRowId);
   const selectedHere = pageIds.filter((id) => selectedIds.has(id)).length;
@@ -81,7 +83,7 @@ export function SelectAllStrip<T>({
         indeterminate={some}
         onChange={toggle}
         data-testid={`${testIdPrefix}-select-all-box`}
-        inputProps={{ "aria-label": "Selecionar todos nesta página" }}
+        inputProps={{ "aria-label": copy.selection.selectAllOnPage }}
         sx={{ p: 0.5 }}
       />
       <Button
@@ -91,13 +93,13 @@ export function SelectAllStrip<T>({
         onClick={toggle}
         dataTestId={`${testIdPrefix}-select-all-toggle`}
       >
-        {all ? "Limpar seleção" : "Selecionar tudo"}
+        {all ? copy.selection.clearSelection : copy.selection.selectAll}
       </Button>
       <Text variant="caption" as="span">
         {/* "nesta página" is load-bearing: the scope tabs above show
             whole-query totals, so an unqualified count here would read as one. */}
         <Box component="span" sx={{ ml: "auto", color: "text.disabled", whiteSpace: "nowrap" }}>
-          {rows.length} nesta página
+          {copy.selection.onThisPage(rows.length)}
         </Box>
       </Text>
     </Box>

package/src/components/data-display/DataViews/data-views-table-parts.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { Alert } from "../Alert";
 import { SavedViewsMenu } from "../../layout/ContentToolbar";
 
@@ -25,13 +26,14 @@ export function ViewMutationErrorAlert({
   onClose: () => void;
   testIdPrefix: string;
 }): React.JSX.Element | null {
+  const copy = useDataViewsCopy();
   if (!error) {
     return null;
   }
   return (
     <Alert
       variant="danger"
-      title="Não foi possível atualizar a visão"
+      title={copy.nav.updateFailed}
       description={error}
       closable
       onClose={onClose}
@@ -75,8 +77,10 @@ export function ViewsMenuSlot({
   onManageAll,
   testIdPrefix,
 }: ViewsMenuSlotProps): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <SavedViewsMenu<SavedViewSummary>
+      labels={copy.savedViewsMenu}
       views={views}
       activeViewName={activeViewName}
       onApply={applyView}
@@ -125,6 +129,7 @@ export function ViewDialogs<T extends Record<string, unknown>>({
   onDelete,
   testIdPrefix,
 }: ViewDialogsProps<T>): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <>
       {/* Keyed by the view being edited: the form seeds its fields with
@@ -142,7 +147,7 @@ export function ViewDialogs<T extends Record<string, unknown>>({
         onSave={onSave}
         testIdPrefix={`${testIdPrefix}-views`}
       />
-      <ManageViewsDialog
+      <ManageViewsDialog confirmCopy={copy.confirmAction}
         open={manageOpen}
         onClose={onCloseManage}
         views={views}

package/src/components/data-display/DataViews/data-views-view-nav.tsx

@@ -7,7 +7,7 @@
  * Two levels, both of them replacing the panel's BODY (the tabs stay put):
  * the list of views, and one view's actions. It is a drill-down and not a
  * nested menu on purpose — an absolutely positioned popover inside the panel's
- * own scroll container gets clipped by it, which is how "Excluir visão" ends
+ * own scroll container gets clipped by it, which is how copy.nav.deleteView ends
  * up unreachable. One level, no clipping, and it works on touch.
  */
 import ChevronLeftRoundedIcon from "@mui/icons-material/ChevronLeftRounded";
@@ -25,6 +25,7 @@ import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownR
 import RestartAltRoundedIcon from "@mui/icons-material/RestartAltRounded";
 import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { Button } from "../../form/Button";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
@@ -36,7 +37,7 @@ import type { SavedViewSummary } from "./data-views-types";
 export interface ViewNavHandlers {
   views: SavedViewSummary[];
   activeViewId?: string | null;
-  /** `null` selects the built-in "Visão principal". */
+  /** `null` selects the built-in "{copy.nav.mainView}". */
   onSelectView: (id: string | null) => void;
   onEditView: (view: SavedViewSummary) => void;
   onPatchView: (
@@ -74,6 +75,7 @@ export function ViewsList({
   onOpenActions: (view: SavedViewSummary) => void;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const { views, activeViewId, onSelectView } = handlers;
   const onMain = !activeViewId;
   return (
@@ -86,7 +88,7 @@ export function ViewsList({
         sx={{ ...rowSx, color: onMain ? "primary.main" : "text.primary", fontWeight: onMain ? 600 : 400 }}
       >
         <Box component="span" sx={{ flex: 1 }}>
-          Visão principal
+          {copy.nav.mainView}
         </Box>
         {onMain && <CheckRoundedIcon fontSize="small" />}
       </Box>
@@ -108,7 +110,7 @@ export function ViewsList({
               {/* What the row-menu toggles DID, readable without opening it:
                   a view set as default, pinned or shared says so here. */}
               {view.isDefault && (
-                <StarOutlineRoundedIcon fontSize="small" sx={{ color: "warning.main" }} titleAccess="Padrão" />
+                <StarOutlineRoundedIcon fontSize="small" sx={{ color: "warning.main" }} titleAccess={copy.nav.defaultTag} />
               )}
               {view.pinned && (
                 <PushPinOutlinedIcon fontSize="small" sx={{ color: "text.disabled" }} titleAccess="Fixada" />
@@ -121,7 +123,7 @@ export function ViewsList({
             <IconButton
               size="small"
               onClick={() => onOpenActions(view)}
-              aria-label={`Opções de ${view.name}`}
+              aria-label={copy.nav.viewOptions(view.name)}
               data-testid={`${testIdPrefix}-view-${view.id}-menu`}
             >
               <MoreVertRoundedIcon fontSize="small" />
@@ -133,7 +135,7 @@ export function ViewsList({
       {views.length === 0 && (
         <Text variant="caption" as="p">
           <Box component="span" sx={{ display: "block", px: 1.25, py: 1.5, color: "text.secondary", lineHeight: 1.6 }}>
-            Nenhuma visão salva. Ajuste filtros, colunas ou ordenação e salve abaixo.
+            {copy.nav.emptyHint}
           </Box>
         </Text>
       )}
@@ -153,6 +155,7 @@ export function ViewActions({
   onBack: () => void;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const { onEditView, onPatchView, onDeleteView } = handlers;
   const action = (
     key: string,
@@ -195,12 +198,12 @@ export function ViewActions({
         </Box>
       </Box>
       <Box sx={{ my: 0.5, borderTop: 1, borderColor: "divider" }} />
-      {action("edit", EditOutlinedIcon, "Renomear e editar", () => onEditView(view))}
-      {action("default", StarOutlineRoundedIcon2, "Definir como padrão", () => onPatchView(view, { isDefault: !view.isDefault }), { on: view.isDefault })}
-      {action("pin", PushPinOutlinedIcon, "Fixar na barra lateral", () => onPatchView(view, { pinned: !view.pinned }), { on: view.pinned })}
-      {action("share", GroupOutlinedIcon, "Compartilhar com a equipe", () => onPatchView(view, { shared: !view.shared }), { on: view.shared })}
+      {action("edit", EditOutlinedIcon, copy.nav.editView, () => onEditView(view))}
+      {action("default", StarOutlineRoundedIcon2, copy.nav.setDefault, () => onPatchView(view, { isDefault: !view.isDefault }), { on: view.isDefault })}
+      {action("pin", PushPinOutlinedIcon, copy.nav.pinToSidebar, () => onPatchView(view, { pinned: !view.pinned }), { on: view.pinned })}
+      {action("share", GroupOutlinedIcon, copy.nav.shareWithTeam, () => onPatchView(view, { shared: !view.shared }), { on: view.shared })}
       <Box sx={{ my: 0.5, borderTop: 1, borderColor: "divider" }} />
-      {action("delete", DeleteOutlineRoundedIcon, "Excluir visão", () => onDeleteView(view), { danger: true })}
+      {action("delete", DeleteOutlineRoundedIcon, copy.nav.deleteView, () => onDeleteView(view), { danger: true })}
     </Box>
   );
 }
@@ -217,15 +220,16 @@ function ToggleContents({
   interactive: boolean;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <>
       <Box component="span" sx={{ fontWeight: 600 }} data-testid={`${testIdPrefix}-display-view-name`}>
-        {view.activeViewName ?? "Visão principal"}
+        {view.activeViewName ?? "{copy.nav.mainView}"}
       </Box>
       {view.dirty && (
         <Box
           component="span"
-          aria-label="Alterações não salvas"
+          aria-label={copy.nav.unsavedChanges}
           data-testid={`${testIdPrefix}-display-dirty`}
           sx={{ height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" }}
         />
@@ -291,11 +295,12 @@ export function ViewHeader(props: {
   onToggle: () => void;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Box sx={{ display: "flex", alignItems: "center", gap: 1, px: 1.5, py: 1, borderBottom: 1, borderColor: "divider" }}>
       <Text variant="caption" as="span">
         <Box component="span" sx={{ textTransform: "uppercase", letterSpacing: 0.5, color: "text.disabled" }}>
-          Visão
+          {copy.nav.label}
         </Box>
       </Text>
       <ViewToggle {...props} />
@@ -313,6 +318,7 @@ export function ViewFooter({
   onDone: () => void;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Box
       sx={{
@@ -339,7 +345,7 @@ export function ViewFooter({
         Redefinir
       </Button>
       <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-        {/* Only meaningful with a view APPLIED: on Visão principal the single
+        {/* Only meaningful with a view APPLIED: on {copy.nav.mainView} the single
             "Salvar visão" already is "save as new". */}
         {view.onUpdate && (
           <Button
@@ -369,7 +375,7 @@ export function ViewFooter({
           }}
           dataTestId={`${testIdPrefix}-display-save`}
         >
-          {view.onUpdate ? "Atualizar visão" : "Salvar visão"}
+          {view.onUpdate ? copy.nav.update : copy.nav.save}
         </Button>
       </Box>
     </Box>

package/src/components/data-display/DataViews/index.ts

@@ -74,3 +74,23 @@ export type {
   DataViewQuery,
   DataViewServer,
 } from "./data-views-types";
+
+// The words this surface renders, and the provider that puts them in scope.
+// REQUIRED config: `useDataViewsCopy` throws outside a provider rather than
+// falling back to the origin host's Portuguese (FUT-760).
+export { DataViewsCopyProvider, useDataViewsCopy } from "./data-views-copy-context";
+export type {
+  DataViewsCopy,
+  DataViewsBoardCopy,
+  DeleteViewCopy,
+  ManageViewsCopy,
+  SaveViewCopy,
+  DataViewsColumnsCopy,
+  DataViewsDisplayCopy,
+  DataViewsExportCopy,
+  DataViewsGridCopy,
+  DataViewsFiltersCopy,
+  DataViewsSelectionCopy,
+  DataViewsNavCopy,
+  DataViewsSearchCopy,
+} from "./data-views-copy";