@12-apps/ui 6.15.0 → 6.16.0

package/dist/types/tokens/field-edge.d.ts

@@ -0,0 +1,80 @@
+import type { Theme } from '@mui/material/styles/index.js';
+/**
+ * THE EDGE THAT TELLS YOU WHERE A FIELD IS.
+ *
+ * Every outlined control in this package drew its resting border from
+ * `alpha(theme.palette.divider, 0.23)` — or 0.2, or 0.18, or 0.42 for the
+ * underline. On the MUI default theme that expression is harmless, and that is
+ * exactly why it survived: MUI's own light `divider` is `rgba(0, 0, 0, 0.12)`,
+ * and `alpha()` REPLACES the alpha channel rather than multiplying it, so
+ * `alpha(divider, 0.23)` resolves to `rgba(0, 0, 0, 0.23)` — byte for byte the
+ * border MUI's own `OutlinedInput` ships. The line reads like a restatement of
+ * the default because, against the default, it is one.
+ *
+ * Give it a theme whose `divider` is an OPAQUE hex and the same expression
+ * collapses. A themed divider is already a hairline — a pale warm cream, a pale
+ * green-grey — chosen to separate two rows INSIDE a card. Fading that to 23%
+ * over the card it sits on leaves a border the same colour as the card:
+ *
+ * | theme                          | resolved border | ratio |
+ * |--------------------------------|-----------------|-------|
+ * | MUI default (`rgba(0,0,0,.12)`)| `#C4C4C4`       | 1.74:1|
+ * | a warm hairline `#EBD9C7`      | `#FAF6F2`       | 1.08:1|
+ * | a cool hairline `#D7DDD5`      | `#EDF0EC`       | 1.06:1|
+ *
+ * 1.06:1 is not a faint border, it is no border: the field is invisible until
+ * you click into it. Both failing rows are real adopter themes, and neither
+ * adopter did anything wrong — they set `palette.divider`, which is what a theme
+ * is for.
+ *
+ * **So the fault is using `divider` for this at all**, not the alpha on top of
+ * it. Even at FULL strength those hairlines are 1.26:1 and 1.27:1 against their
+ * own paper. A row separator and a control boundary are different jobs with
+ * different floors, and only one of them has a number in the spec.
+ *
+ * ## The floor, and why it is measured rather than picked
+ *
+ * WCAG 2.1 SC 1.4.11 (Non-text Contrast) puts a control's own boundary at
+ * {@link MIN_UI_CONTRAST}. A hex cannot satisfy that on its own, because the
+ * ratio is a fact about a PAIR — the same border is fine on white and gone on a
+ * dark card. So {@link fieldEdge} takes the theme's hairline as a SEED and walks
+ * it away from the surface until it clears, which means:
+ *
+ *  - a theme whose divider already clears keeps its own colour, untouched;
+ *  - one that does not gets the nearest tone of ITS OWN hairline that does, so
+ *    the border still looks like the theme's, just visible;
+ *  - dark mode needs no second table — the walk lightens on a dark surface for
+ *    the same reason it darkens on a light one.
+ *
+ * This is the argument `readableInk` makes for text in `@12-apps/app-shell`,
+ * applied to the boundary rather than the ink. It is not imported from there:
+ * that package depends on THIS one, so the edge would be a cycle.
+ *
+ * ## What this does NOT touch
+ *
+ * Hover and focus, which every control already draws in `primary.main` — a
+ * corrected brand colour that clears the floor by construction. The resting
+ * state was the only one you could not see, and it is the one that matters,
+ * because it is the state a field is in before anyone has found it.
+ */
+/**
+ * WCAG 2.1 SC 1.4.11 — the contrast a control's own boundary owes the surface
+ * behind it.
+ *
+ * 3:1 rather than the 4.5:1 the same spec asks of body text: a border is a
+ * shape, not a glyph, so it stays findable at a lower ratio. It is a FLOOR and
+ * not a target — {@link fieldEdge} stops at the first tone that clears it, so a
+ * theme with a stronger hairline keeps the stronger one.
+ */
+export declare const MIN_UI_CONTRAST = 3;
+/**
+ * The resting boundary for a form control on `surface`.
+ *
+ * `surface` defaults to `background.paper` because that is what a field sits on
+ * in the overwhelming majority of cases — a dialog, a card, a form panel. A
+ * control on a deliberately different ground (a tinted strip, a glass pane over
+ * a photo) should pass the ground it is actually on; the answer is only as good
+ * as the pair it is given.
+ */
+export declare function fieldEdge(theme: Theme, surface?: string): string;
+//# sourceMappingURL=field-edge.d.ts.map

package/dist/types/tokens/field-edge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-edge.d.ts","sourceRoot":"","sources":["../../../src/tokens/field-edge.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,IAAI,CAAC;AAkCjC;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAkBhE"}

package/dist/user-avatar.js

@@ -1,7 +1,7 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-MUFI3ZXS.js";
+} from "./chunk-DQIQKIEA.js";
 import "./chunk-UDQSIRAP.js";
 import "./chunk-QIV73V2X.js";
 import "./chunk-LYNJJV2X.js";
@@ -12,9 +12,9 @@ import "./chunk-D2IASECY.js";
 import "./chunk-VMF3UXM4.js";
 import "./chunk-RI5JZLZL.js";
 import "./chunk-BA4RHQ3B.js";
-import "./chunk-6HLRXICF.js";
-import "./chunk-NYUGX76C.js";
+import "./chunk-IAQFQNBL.js";
 import "./chunk-AUYC5K5K.js";
+import "./chunk-NYUGX76C.js";
 import "./chunk-VRHBJXZ7.js";
 import "./chunk-PZ5AY32C.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.15.0",
+  "version": "6.16.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/form/AddressAutocomplete/AddressTextField.tsx

@@ -6,6 +6,8 @@ import React from 'react';
 
 import type { AddressAutocompleteProps } from './AddressAutocomplete.types';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 // Kept module-local on purpose: the inferred type of a styled() component cannot
 // be named across a module boundary here (TS2742), so the plain component below
 // is what the rest of the folder imports.
@@ -14,7 +16,7 @@ const GlassTextField = styled(TextField)(({ theme }) => ({
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
     backdropFilter: 'blur(10px)',
     WebkitBackdropFilter: 'blur(10px)',
-    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+    border: `1px solid ${fieldEdge(theme)}`,
     transition: theme.transitions.create(['border-color', 'box-shadow', 'background']),
     '&:hover': {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,

package/src/components/form/CategorySelect/CategorySelect.styles.ts

@@ -1,5 +1,7 @@
 import { alpha, type CSSObject, type Theme } from '@mui/material/styles/index.js';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 /**
  * The prototype's METRICS, verbatim.
  *
@@ -51,7 +53,7 @@ export const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSOb
     height: METRICS.triggerHeight,
     padding: '0 10px 0 12px',
     borderRadius: `${METRICS.triggerRadius}px`,
-    border: `1px solid ${open || selected ? brand.edge : theme.palette.divider}`,
+    border: `1px solid ${open || selected ? brand.edge : fieldEdge(theme)}`,
     background: selected ? brand.soft : theme.palette.background.paper,
     color: selected ? brand.ink : theme.palette.text.primary,
     font: 'inherit',

package/src/components/form/CodeEditor/CodeEditor.tsx

@@ -12,6 +12,8 @@ import { useCodeEditor } from './CodeEditor.hooks';
 import type { CodeEditorProps } from './CodeEditor.types';
 import { EditorToolbar } from './CodeEditorToolbar';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 // Styled components
 const EditorContainer = styled(Paper)(({ theme }) => ({
   display: 'flex',
@@ -19,7 +21,7 @@ const EditorContainer = styled(Paper)(({ theme }) => ({
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
   backdropFilter: 'blur(10px)',
   WebkitBackdropFilter: 'blur(10px)',
-  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+  border: `1px solid ${fieldEdge(theme)}`,
   borderRadius: theme.shape.borderRadius * 2,
   overflow: 'hidden' }));
 

package/src/components/form/CreatableSelect/CreatableSelect.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { alpha } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete/index.js';
 import type { AutocompleteRenderInputParams } from '@mui/material/Autocomplete/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
@@ -12,6 +12,8 @@ import { FormControl, FormLabel, FormMessage } from '../Form';
 import type { CreatableSelectOption, CreatableSelectProps } from './CreatableSelect.types';
 import type { SizeValue } from '../../../tokens/scales';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 /** Internal option shape: a real option, or the synthetic "create new" row. */
 interface InternalOption extends CreatableSelectOption {
   /** True for the synthetic row that triggers {@link CreatableSelectProps.onCreate}. */
@@ -35,7 +37,7 @@ const MUI_SIZE = { xs: 'small', sm: 'small', md: 'medium', lg: 'medium', xl: 'me
 const fieldSx = {
   '& .MuiOutlinedInput-root': {
     '& fieldset': {
-      borderColor: (theme: { palette: { divider: string } }) => alpha(theme.palette.divider, 0.23),
+      borderColor: (theme: Theme) => fieldEdge(theme),
     },
     '&:hover fieldset': { borderColor: 'primary.main' },
     '&.Mui-focused fieldset': { borderColor: 'primary.main', borderWidth: 2 },

package/src/components/form/Input/Input.styles.ts

@@ -3,6 +3,8 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { InputProps } from './Input.types';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 type InputVariant = NonNullable<InputProps['variant']>;
 
 // Define pulse animation
@@ -90,7 +92,7 @@ export const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
         backdropFilter: 'blur(20px)',
-        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+        border: `1px solid ${fieldEdge(theme)}`,
         '&:hover': {
           backgroundColor: alpha(theme.palette.background.paper, 0.15),
           borderColor: alpha(theme.palette.primary.main, 0.3),
@@ -104,7 +106,7 @@ export const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject
     case 'underline':
       return {
         '&:before': {
-          borderBottomColor: alpha(theme.palette.divider, 0.42),
+          borderBottomColor: fieldEdge(theme),
         },
         '&:hover:not(.Mui-disabled):before': {
           borderBottomColor: theme.palette.primary.main,
@@ -155,7 +157,7 @@ const gradientStyles = (theme: Theme): CSSObject => ({
 
 export const outlinedStyles = (theme: Theme): CSSObject => ({
   '& fieldset': {
-    borderColor: alpha(theme.palette.divider, 0.23),
+    borderColor: fieldEdge(theme),
   },
   '&:hover fieldset': {
     borderColor: theme.palette.primary.main,

package/src/components/form/InputOTP/InputOTP.styles.ts

@@ -1,6 +1,8 @@
 import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 interface ColorPalette {
   main: string;
   dark?: string;
@@ -82,7 +84,7 @@ export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
       ...(glass && {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
         backdropFilter: 'blur(20px)',
-        '& fieldset': { border: `1px solid ${alpha(theme.palette.divider, 0.2)}` },
+        '& fieldset': { border: `1px solid ${fieldEdge(theme)}` },
       }),
       ...(gradient && {
         '&.Mui-focused fieldset': {

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

@@ -17,6 +17,8 @@ import { usePhoneInput } from './PhoneInput.hooks';
 import type { CountryData,PhoneInputProps } from './PhoneInput.types';
 import type { PhoneInputCopy } from '../../../copy';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 // Country data with expanded support
 
 // Styled components
@@ -25,7 +27,7 @@ const GlassTextField = styled(TextField)(({ theme }) => ({
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
     backdropFilter: 'blur(10px)',
     WebkitBackdropFilter: 'blur(10px)',
-    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+    border: `1px solid ${fieldEdge(theme)}`,
     transition: theme.transitions.create(['border-color', 'box-shadow', 'background']),
     '&:hover': {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,

package/src/components/form/RadioGroup/RadioGroup.styles.ts

@@ -3,6 +3,8 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { glowAnimation, rippleAnimation, scaleAnimation, slideAnimation } from './RadioGroup.animations';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 interface ColorPalette {
   main: string;
   dark?: string;
@@ -119,7 +121,7 @@ const cardBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSS
   return {
     cursor: 'pointer',
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-    border: `2px solid ${selected ? palette.main : alpha(theme.palette.divider, 0.3)}`,
+    border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,
     backgroundColor: selected ? alpha(palette.main, 0.05) : theme.palette.background.paper,
     position: 'relative' as const,
     overflow: 'hidden' as const,
@@ -183,7 +185,7 @@ const buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): C
     borderRadius: theme.spacing(1),
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     fontWeight: 500,
-    border: `2px solid ${selected ? palette.main : alpha(theme.palette.divider, 0.5)}`,
+    border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,
     backgroundColor: selected ? palette.main : 'transparent',
     color: selected ? palette.contrastText || '#fff' : theme.palette.text.primary,
     position: 'relative' as const,

package/src/components/form/RichTextEditor/RichTextEditor.tsx

@@ -8,6 +8,8 @@ import { useRichTextEditor } from './RichTextEditor.hooks';
 import type { RichTextEditorProps, ToolbarConfig } from './RichTextEditor.types';
 import { RichTextEditorToolbar } from './RichTextEditorToolbar';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 const DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<ToolbarConfig, 'customItems'> = {
   bold: true,
   italic: true,
@@ -68,7 +70,7 @@ const editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string,
   '& a': { color: theme.palette.primary.main, textDecoration: 'underline' } });
 
 const shellSx = (theme: Theme, isFocused: boolean, disabled: boolean) => ({
-  border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
+  border: `1px solid ${fieldEdge(theme)}`,
   borderRadius: 1,
   overflow: 'hidden',
   transition: 'border-color 0.2s ease-in-out',

package/src/components/form/Select/Select.tsx

@@ -8,6 +8,8 @@ import React from 'react';
 
 import type { SelectProps } from './Select.types';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 // Define pulse animation
 const pulseAnimation = keyframes`
   0% {
@@ -57,7 +59,7 @@ const pulseStyles = (theme: Theme): CSSObject => ({
 const glassVariant = (theme: Theme): CSSObject => ({
   backgroundColor: alpha(theme.palette.background.paper, 0.1),
   backdropFilter: 'blur(20px)',
-  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  border: `1px solid ${fieldEdge(theme)}`,
   '& fieldset': { border: 'none' },
   '&:hover': {
     backgroundColor: alpha(theme.palette.background.paper, 0.15),
@@ -105,7 +107,7 @@ const gradientVariant = (theme: Theme): CSSObject => ({
 
 /** `default` variant: standard outlined borders with hover/focus/error states. */
 const defaultVariant = (theme: Theme): CSSObject => ({
-  '& fieldset': { borderColor: alpha(theme.palette.divider, 0.23) },
+  '& fieldset': { borderColor: fieldEdge(theme) },
   '&:hover fieldset': { borderColor: theme.palette.primary.main },
   '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: 2 },
   '&.Mui-error fieldset': { borderColor: theme.palette.error.main },

package/src/components/form/Textarea/Textarea.styles.ts

@@ -1,6 +1,8 @@
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 const glowAnimation = keyframes`
   0% {
     box-shadow: 0 0 5px currentColor;
@@ -107,7 +109,7 @@ const glassStyles = glass
   ? {
       backgroundColor: alpha(theme.palette.background.paper, 0.1),
       backdropFilter: 'blur(20px)',
-      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      border: `1px solid ${fieldEdge(theme)}`,
       '&:hover': {
         backgroundColor: alpha(theme.palette.background.paper, 0.15),
         backdropFilter: 'blur(25px)',

package/src/components/form/Textarea/Textarea.tsx

@@ -30,6 +30,8 @@ const TextareaRichEditor = lazy(async () => ({
   default: (await import('./TextareaRichEditor')).TextareaRichEditor }));
 import type { TextareaProps } from './Textarea.types';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 // Interface for styled component props
 interface StyledTextareaProps {
   customVariant?: string;
@@ -71,7 +73,7 @@ const StyledTextarea = styled(TextareaAutosize, {
     width: '100%',
     fontFamily: theme.typography.fontFamily,
     borderRadius: theme.spacing(1),
-    border: `2px solid ${error ? errorColor.main : theme.palette.divider}`,
+    border: `2px solid ${error ? errorColor.main : fieldEdge(theme)}`,
     backgroundColor: theme.palette.background.paper,
     color: theme.palette.text.primary,
     transition: 'all 0.3s ease',
@@ -108,7 +110,7 @@ const StyledLabel = styled(InputLabel, {
     backdropFilter: 'blur(10px)',
     padding: '4px 8px',
     borderRadius: '4px',
-    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    border: `1px solid ${fieldEdge(theme)}`,
     display: 'inline-block' }) }));
 
 // IconWrapper - replaced with inline Box component for better TypeScript compatibility

package/src/components/form/Textarea/TextareaRichEditor.tsx

@@ -19,6 +19,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import { floatAnimation, getColorFromTheme } from './Textarea.styles';
 import type { RichEditorToolbarCopy } from '../../../copy';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   display: 'flex',
   alignItems: 'center',
@@ -104,7 +106,7 @@ const ContentEditableDiv = styled('div')<{
     minHeight: '120px',
     padding: theme.spacing(1.5),
     borderRadius: `0 0 ${theme.spacing(1)} ${theme.spacing(1)}`,
-    border: `2px solid ${error ? errorColor.main : focused ? colorPalette.main : theme.palette.divider}`,
+    border: `2px solid ${error ? errorColor.main : focused ? colorPalette.main : fieldEdge(theme)}`,
     borderTop: 'none',
     backgroundColor: glass
       ? alpha(theme.palette.background.paper, 0.1)

package/src/components/form/Toggle/Toggle.styles.ts

@@ -1,6 +1,8 @@
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.js';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 const glowAnimation = keyframes`
   0% { box-shadow: 0 0 5px currentColor; }
   50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
@@ -74,7 +76,7 @@ export const baseStyles = (
   fontWeight: 500,
   borderRadius: theme.spacing(1),
   transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-  border: `2px solid ${alpha(theme.palette.divider, 0.3)}`,
+  border: `2px solid ${fieldEdge(theme)}`,
   color: theme.palette.text.primary,
   backgroundColor: 'transparent',
   position: 'relative',

package/src/copy/form.ts

@@ -152,3 +152,16 @@ export interface UploadButtonCopy {
   /** The component's own error, announced. Takes the message it wraps. */
   errorAnnouncement(message: string): string;
 }
+
+/**
+ * The social sign-in buttons' three labels (FUT-1263).
+ *
+ * One key per provider rather than a single string, because the buttons are
+ * rendered from a dynamic provider list — a host mapping over `['google',
+ * 'facebook']` indexes this, instead of growing a switch at the call site.
+ */
+export interface SocialLoginCopy {
+  google: string;
+  facebook: string;
+  apple: string;
+}

package/src/en-US.form.ts

@@ -9,6 +9,7 @@ import type {
   PasswordStrengthCopy,
   PhoneInputCopy,
   RichEditorToolbarCopy,
+  SocialLoginCopy,
   UploadButtonCopy,
 } from './copy';
 
@@ -101,3 +102,9 @@ export const EN_US_UPLOAD_BUTTON_COPY: UploadButtonCopy = {
   uploadInProgress: (percent) => `Upload in progress: ${percent}%`,
   errorAnnouncement: (message) => `Error: ${message}`,
 };
+
+export const EN_US_SOCIAL_LOGIN_COPY: SocialLoginCopy = {
+  google: "Continue with Google",
+  facebook: "Continue with Facebook",
+  apple: "Continue with Apple",
+};

package/src/locales.ts

@@ -38,12 +38,13 @@ import type {
   PhoneInputCopy,
   RichEditorToolbarCopy,
   SectionOnboardingCopy,
+  SocialLoginCopy,
   TableFilterCopy,
   TimingDiagramCopy,
   TutorialCopy,
   UploadButtonCopy,
   UserAvatarCopy,
-} from './copy';
+} from "./copy";
 import * as en from './en-US';
 import * as pt from './pt-BR';
 
@@ -76,6 +77,10 @@ export const TUTORIAL_COPY = pack<TutorialCopy>(pt.PT_BR_TUTORIAL_COPY, en.EN_US
 export const CHROME_COPY = pack<ChromeCopy>(pt.PT_BR_CHROME_COPY, en.EN_US_CHROME_COPY);
 
 // form
+export const SOCIAL_LOGIN_COPY = pack<SocialLoginCopy>(
+  pt.PT_BR_SOCIAL_LOGIN_COPY,
+  en.EN_US_SOCIAL_LOGIN_COPY,
+);
 export const ADDRESS_AUTOCOMPLETE_COPY = pack<AddressAutocompleteCopy>(
   pt.PT_BR_ADDRESS_AUTOCOMPLETE_COPY,
   en.EN_US_ADDRESS_AUTOCOMPLETE_COPY,

package/src/pt-BR.form.ts

@@ -9,6 +9,7 @@ import type {
   PasswordStrengthCopy,
   PhoneInputCopy,
   RichEditorToolbarCopy,
+  SocialLoginCopy,
   UploadButtonCopy,
 } from './copy';
 
@@ -94,3 +95,9 @@ export const PT_BR_UPLOAD_BUTTON_COPY: UploadButtonCopy = {
   uploadInProgress: (percent) => `Envio em andamento: ${percent}%`,
   errorAnnouncement: (message) => `Erro: ${message}`,
 };
+
+export const PT_BR_SOCIAL_LOGIN_COPY: SocialLoginCopy = {
+  google: "Continuar com o Google",
+  facebook: "Continuar com o Facebook",
+  apple: "Continuar com a Apple",
+};

package/src/social-login-button/social-login-button.tsx

@@ -8,6 +8,8 @@ import { Card, CardContent } from '../components/layout/Card';
 import { Heading } from '../components/typography/Heading';
 import { Text } from '../components/typography/Text';
 import { Separator } from '../components/layout/Separator';
+import type { SocialLoginCopy } from '../copy/form';
+import { EN_US_SOCIAL_LOGIN_COPY } from '../en-US.form';
 
 export type SocialProvider = 'google' | 'facebook' | 'apple';
 
@@ -51,7 +53,6 @@ const AppleIcon = (): React.ReactElement => (
 );
 
 interface ProviderConfig {
-  label: string;
   Icon: () => React.ReactElement;
   variant: 'solid' | 'outline' | 'ghost';
   color: 'primary' | 'secondary' | 'neutral';
@@ -60,7 +61,6 @@ interface ProviderConfig {
 
 const providerConfig: Record<SocialProvider, ProviderConfig> = {
   google: {
-    label: "Continue with Google",
     Icon: GoogleIcon,
     variant: 'outline',
     color: 'neutral',
@@ -75,7 +75,6 @@ const providerConfig: Record<SocialProvider, ProviderConfig> = {
     },
   },
   facebook: {
-    label: "Continue with Facebook",
     Icon: FacebookIcon,
     variant: 'solid',
     color: 'primary',
@@ -88,7 +87,6 @@ const providerConfig: Record<SocialProvider, ProviderConfig> = {
     },
   },
   apple: {
-    label: "Continue with Apple",
     Icon: AppleIcon,
     variant: 'solid',
     color: 'neutral',
@@ -108,13 +106,47 @@ export interface SocialLoginButtonProps {
   loading?: boolean;
   disabled?: boolean;
   fullWidth?: boolean;
+  /**
+   * The three provider labels (FUT-1263). `SOCIAL_LOGIN_COPY` ships both
+   * languages, so a host passes `SOCIAL_LOGIN_COPY["pt-BR"]` rather than
+   * authoring a word.
+   *
+   * These used to be English string literals inside `providerConfig`, reachable
+   * by nothing: a pt-BR storefront rendered "Continue with Google" on an
+   * otherwise Portuguese sign-in screen and had no way to change it.
+   *
+   * OPTIONAL, unlike every other `copy` in this package, and defaulted to the
+   * en-US pack. That is a deliberate exception so this ships as a MINOR: making
+   * it required would break every existing caller on a routine update. The cost
+   * is the one this package's convention exists to avoid — a host that says
+   * nothing still renders English — so a consumer wanting Portuguese must pass
+   * the pack, and FUT-1263 is not closed until it does.
+   */
+  copy?: SocialLoginCopy;
+  /**
+   * Per-provider test hook. Without one all three buttons render the same
+   * `data-testid`, leaving their visible text as the only selector — which is
+   * exactly the text a host is now expected to translate.
+   */
+  dataTestId?: string;
 }
 
 /**
  * Social login button using UI package Button component
  */
 export const SocialLoginButton = React.forwardRef<HTMLButtonElement, SocialLoginButtonProps>(
-  ({ provider, onClick, loading = false, disabled = false, fullWidth = true }, ref) => {
+  (
+    {
+      provider,
+      onClick,
+      loading = false,
+      disabled = false,
+      fullWidth = true,
+      copy = EN_US_SOCIAL_LOGIN_COPY,
+      dataTestId,
+    },
+    ref,
+  ) => {
     const config = providerConfig[provider];
 
     return (
@@ -127,6 +159,7 @@ export const SocialLoginButton = React.forwardRef<HTMLButtonElement, SocialLogin
         disabled={disabled}
         onClick={onClick}
         icon={<config.Icon />}
+        dataTestId={dataTestId}
         fullWidth={fullWidth}
         sx={{
           minHeight: 48,
@@ -135,7 +168,7 @@ export const SocialLoginButton = React.forwardRef<HTMLButtonElement, SocialLogin
           ...config.sx,
         }}
       >
-        {config.label}
+        {copy[provider]}
       </Button>
     );
   }