@proulr/sdui-components 0.1.86 → 0.1.87

package/src/renderer/ui/compose-pill-input.tsx

@@ -18,7 +18,7 @@ import {
 } from 'react-native';
 import { AppIcon } from './app-icon';
 import { ChromeGlassLayer } from './ChromeGlass';
-import { colors, fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { colors, fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -27,8 +27,12 @@ if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental
 const ACTION_BUTTON_SIZE = 48;
 /** Filled action circle when nested inside the pill (Instagram-style composer). */
 const ACTION_BUTTON_SIZE_INSET = 36;
-const FONT_SIZE = 16;
-const LINE_HEIGHT = 25;
+/** O círculo inset é menor visualmente; o slop devolve os 44pt de alvo de toque. */
+const ACTION_BUTTON_INSET_HIT_SLOP = { top: 4, bottom: 4, left: 4, right: 4 };
+// A medição de altura do composer depende da linha do texto: deriva do token de
+// corpo para não criar uma segunda escala tipográfica no design system.
+const FONT_SIZE = m3Type.body.fontSize;
+const LINE_HEIGHT = m3Type.body.lineHeight;
 const MAX_LINES_DEFAULT = 4;
 const PILL_MIN_HEIGHT = ACTION_BUTTON_SIZE;
 const VERTICAL_PAD = (PILL_MIN_HEIGHT - LINE_HEIGHT) / 2;
@@ -38,6 +42,9 @@ export type ComposePillVariant = 'surface' | 'chrome' | 'overlay';
 export type ComposePillReplyPreview = {
   title: string;
   body: string;
+  /** Rótulo de acessibilidade do botão de dispensa — vem de quem compõe o wire,
+   * o renderer não traduz copy. */
+  dismissLabel: string;
   onDismiss: () => void;
 };
 
@@ -340,7 +347,7 @@ export function ComposePillReplyBar({
         hitSlop={8}
         style={styles.replyBarClose}
         accessibilityRole="button"
-        accessibilityLabel="Cancelar resposta"
+        accessibilityLabel={preview.dismissLabel}
       >
         <AppIcon name="close" size={14} color={m3Colors.onSurfaceVariant} />
       </Pressable>
@@ -361,7 +368,11 @@ export function ComposePillIconButton({
 }) {
   return (
     <Pressable
-      style={[styles.iconButton, disabled && styles.iconButtonDisabled]}
+      style={({ pressed }) => [
+        styles.iconButton,
+        disabled && styles.iconButtonDisabled,
+        pressed && !disabled && styles.iconButtonPressed,
+      ]}
       onPress={onPress}
       disabled={disabled || !onPress}
       hitSlop={6}
@@ -390,15 +401,17 @@ export function ComposePillActionButton({
   const size = inset ? ACTION_BUTTON_SIZE_INSET : ACTION_BUTTON_SIZE;
   return (
     <Pressable
-      style={[
+      style={({ pressed }) => [
         styles.actionButton,
         { width: size, height: size, borderRadius: size / 2 },
         disabled && styles.actionButtonDisabled,
+        pressed && !disabled && styles.actionButtonPressed,
       ]}
       onPress={onPress}
       disabled={disabled || !onPress}
       accessibilityRole="button"
       accessibilityLabel={label}
+      hitSlop={inset ? ACTION_BUTTON_INSET_HIT_SLOP : undefined}
     >
       {children}
     </Pressable>
@@ -571,17 +584,17 @@ const styles = StyleSheet.create({
   },
   replyBarContent: {
     flex: 1,
-    gap: 2,
+    gap: spacing.xs,
     zIndex: 1,
   },
   replyBarName: {
+    ...m3Type.labelSmall,
     color: m3Colors.primary,
-    fontSize: 13,
     fontFamily: fonts.semibold,
   },
   replyBarPreview: {
+    ...m3Type.labelSmall,
     color: m3Colors.onSurfaceVariant,
-    fontSize: 13,
     fontFamily: fonts.regular,
   },
   replyBarClose: {
@@ -632,6 +645,9 @@ const styles = StyleSheet.create({
   iconButtonDisabled: {
     opacity: 0.4,
   },
+  iconButtonPressed: {
+    opacity: 0.85,
+  },
   trailingIcons: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -688,6 +704,9 @@ const styles = StyleSheet.create({
   actionButtonDisabled: {
     opacity: 0.45,
   },
+  actionButtonPressed: {
+    opacity: 0.85,
+  },
 });
 
 export const COMPOSE_PILL_ACTION_BUTTON_SIZE = ACTION_BUTTON_SIZE;

package/src/renderer/ui/compose-recent-media-grid.tsx

@@ -7,7 +7,7 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native';
-import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+import { m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 import { AppIcon } from './app-icon';
 import { AppLoadingSpinner } from './AppLoadingSpinner';
 import { StoryTextGlyph } from './story-glyphs';
@@ -210,9 +210,8 @@ const styles = StyleSheet.create({
     borderColor: m3Colors.outlineVariant,
   },
   selectLabel: {
+    ...m3Type.label,
     color: m3Colors.onSurface,
-    fontFamily: fonts.medium,
-    fontSize: 13,
   },
   loadingWrap: {
     alignItems: 'center',
@@ -255,14 +254,12 @@ const styles = StyleSheet.create({
     backgroundColor: m3Colors.scrim,
   },
   videoBadgeText: {
+    ...m3Type.labelSmall,
     color: m3Colors.onPrimary,
-    fontFamily: fonts.medium,
-    fontSize: 10,
   },
   textCellLabel: {
-    marginTop: spacing.xs,
+    ...m3Type.labelSmall,
     color: m3Colors.onSurfaceVariant,
-    fontFamily: fonts.medium,
-    fontSize: 11,
+    marginTop: spacing.xs,
   },
 });

package/src/renderer/ui/compose-reply-audience-sheet.tsx

@@ -14,12 +14,19 @@ export type ComposeReplyAudienceOption = {
 
 export function ComposeReplyAudienceSheet({
   visible,
+  title,
+  subtitle,
+  closeLabel,
   value,
   options,
   onClose,
   onSelect,
 }: {
   visible: boolean;
+  /** Copy do caller (Rosetta) — o renderer não traduz. */
+  title: string;
+  subtitle: string;
+  closeLabel: string;
   value: ComposeReplyAudienceValue;
   options: ComposeReplyAudienceOption[];
   onClose: () => void;
@@ -28,13 +35,16 @@ export function ComposeReplyAudienceSheet({
   return (
     <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
       <View style={styles.backdrop}>
-        <Pressable style={styles.backdropPress} onPress={onClose} accessibilityLabel="Fechar" />
+        <Pressable
+          style={styles.backdropPress}
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel={closeLabel}
+        />
         <View style={styles.sheet}>
           <View style={styles.handle} />
-          <Text style={styles.title}>Quem pode responder?</Text>
-          <Text style={styles.subtitle}>
-            Escolha quem pode responder a este post. Perfis mencionados sempre poderão responder.
-          </Text>
+          <Text style={styles.title}>{title}</Text>
+          <Text style={styles.subtitle}>{subtitle}</Text>
 
           {options.map((option) => {
             const selected = option.value === value;
@@ -47,7 +57,7 @@ export function ComposeReplyAudienceSheet({
                 }}
                 accessibilityRole="button"
                 accessibilityState={{ selected }}
-                style={({ pressed }) => [styles.option, pressed && { opacity: 0.86 }]}
+                style={({ pressed }) => [styles.option, pressed && styles.optionPressed]}
               >
                 <View style={styles.optionIconWrap}>{option.icon}</View>
                 <View style={styles.optionBody}>
@@ -107,14 +117,15 @@ const styles = StyleSheet.create({
     color: m3Colors.onSurfaceVariant,
     ...m3Type.bodySmall,
     marginBottom: spacing.md,
-    lineHeight: 18,
   },
   option: {
     flexDirection: 'row',
     alignItems: 'center',
+    minHeight: 56,
     paddingVertical: spacing.md,
     gap: spacing.md,
   },
+  optionPressed: { backgroundColor: m3Colors.statePressed },
   optionIconWrap: {
     width: 44,
     height: 44,
@@ -129,8 +140,8 @@ const styles = StyleSheet.create({
   },
   optionLabel: {
     color: m3Colors.onSurface,
+    ...m3Type.titleSmall,
     fontFamily: fonts.semibold,
-    fontSize: 16,
   },
   optionHint: {
     color: m3Colors.onSurfaceVariant,

package/src/renderer/ui/compose-screen-header.tsx

@@ -6,14 +6,17 @@ import { AppLoadingSpinner } from './AppLoadingSpinner';
 
 export function ComposeScreenHeader({
   title,
-  actionLabel = 'Publicar',
+  closeLabel,
+  actionLabel,
   canAction,
   loading,
   onClose,
   onAction,
 }: {
   title?: string;
-  actionLabel?: string;
+  /** Copy vem do caller (wire/Rosetta) — o renderer não traduz nem tem default de produto. */
+  closeLabel: string;
+  actionLabel: string;
   canAction: boolean;
   loading?: boolean;
   onClose: () => void;
@@ -25,10 +28,9 @@ export function ComposeScreenHeader({
     <View style={[styles.header, { paddingTop: insets.top + spacing.xs }]}>
       <Pressable
         onPress={onClose}
-        hitSlop={10}
         accessibilityRole="button"
-        accessibilityLabel="Fechar"
-        style={styles.closeBtn}
+        accessibilityLabel={closeLabel}
+        style={({ pressed }) => [styles.closeBtn, pressed && styles.closeBtnPressed]}
       >
         <AppIcon name="close" color={m3Colors.onSurface} size={18} />
       </Pressable>
@@ -50,7 +52,7 @@ export function ComposeScreenHeader({
           styles.publishPill,
           canAction && styles.publishPillActive,
           (!canAction || loading) && styles.publishPillDisabled,
-          pressed && canAction && { opacity: 0.88 },
+          pressed && canAction && styles.publishPillPressed,
         ]}
       >
         {loading ? (
@@ -75,11 +77,13 @@ const styles = StyleSheet.create({
     backgroundColor: m3Colors.surface,
   },
   closeBtn: {
-    width: 40,
-    height: 40,
+    width: 44,
+    height: 44,
     alignItems: 'center',
     justifyContent: 'center',
+    borderRadius: m3Shape.cornerFull,
   },
+  closeBtnPressed: { backgroundColor: m3Colors.statePressed },
   title: {
     flex: 1,
     color: m3Colors.onSurface,
@@ -91,7 +95,7 @@ const styles = StyleSheet.create({
   },
   publishPill: {
     minWidth: 88,
-    height: 36,
+    height: 44,
     borderRadius: m3Shape.cornerFull,
     alignItems: 'center',
     justifyContent: 'center',
@@ -101,13 +105,14 @@ const styles = StyleSheet.create({
   publishPillActive: {
     backgroundColor: m3Colors.primary,
   },
+  publishPillPressed: { opacity: 0.88 },
   publishPillDisabled: {
     opacity: 0.45,
   },
   publishLabel: {
     color: m3Colors.onSurfaceVariant,
+    ...m3Type.label,
     fontFamily: fonts.semibold,
-    fontSize: 14,
   },
   publishLabelActive: {
     color: m3Colors.onPrimary,

package/src/renderer/ui/compose-text-area.tsx

@@ -1,11 +1,14 @@
 import type { ReactNode } from 'react';
 import { Platform, Pressable, StyleSheet, TextInput, TextInputProps, View } from 'react-native';
-import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 
-export function ComposeTextArea(props: TextInputProps) {
+export function ComposeTextArea({
+  placeholder,
+  ...props
+}: TextInputProps & { placeholder: string }) {
   return (
     <TextInput
-      placeholder="O que está acontecendo?"
+      placeholder={placeholder}
       placeholderTextColor={m3Colors.onSurfaceVariant}
       multiline
       style={[styles.input, Platform.OS === 'web' ? styles.inputWeb : null]}
@@ -17,9 +20,12 @@ export function ComposeTextArea(props: TextInputProps) {
 
 export function ComposeMediaPreviewFrame({
   children,
+  removeLabel,
   onRemove,
 }: {
   children: ReactNode;
+  /** Copy do caller (Rosetta) — o renderer não traduz. */
+  removeLabel: string;
   onRemove: () => void;
 }) {
   return (
@@ -28,8 +34,9 @@ export function ComposeMediaPreviewFrame({
       <Pressable
         onPress={onRemove}
         accessibilityRole="button"
-        accessibilityLabel="Remover mídia"
-        style={styles.previewRemove}
+        accessibilityLabel={removeLabel}
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+        style={({ pressed }) => [styles.previewRemove, pressed && styles.previewRemovePressed]}
       >
         <ComposeRemoveGlyph />
       </Pressable>
@@ -48,10 +55,8 @@ function ComposeRemoveGlyph() {
 
 const styles = StyleSheet.create({
   input: {
+    ...m3Type.body,
     color: m3Colors.onSurface,
-    fontFamily: fonts.regular,
-    fontSize: 20,
-    lineHeight: 28,
     minHeight: 120,
     textAlignVertical: 'top',
     paddingTop: spacing.xs,
@@ -84,6 +89,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  previewRemovePressed: { backgroundColor: m3Colors.statePressed },
   removeGlyph: {
     width: 14,
     height: 14,

package/src/renderer/ui/compose-toolbar-icon.tsx

@@ -2,7 +2,8 @@ import type { ReactNode } from 'react';
 import { Pressable, StyleSheet } from 'react-native';
 import { m3Colors } from '../theme/proulr-theme';
 
-const TOOLBAR_ICON_SIZE = 48;
+/** Alvo de toque do toolbar (48pt); dono único — o toolbar só reexporta. */
+export const COMPOSE_TOOLBAR_ICON_SIZE = 48;
 
 export function ComposeToolbarIcon({
   label,
@@ -23,7 +24,7 @@ export function ComposeToolbarIcon({
       style={({ pressed }) => [
         styles.icon,
         active && styles.iconActive,
-        pressed && { opacity: 0.75 },
+        pressed && styles.iconPressed,
       ]}
     >
       {children}
@@ -33,13 +34,16 @@ export function ComposeToolbarIcon({
 
 const styles = StyleSheet.create({
   icon: {
-    width: TOOLBAR_ICON_SIZE,
-    height: TOOLBAR_ICON_SIZE,
-    borderRadius: TOOLBAR_ICON_SIZE / 2,
+    width: COMPOSE_TOOLBAR_ICON_SIZE,
+    height: COMPOSE_TOOLBAR_ICON_SIZE,
+    borderRadius: COMPOSE_TOOLBAR_ICON_SIZE / 2,
     alignItems: 'center',
     justifyContent: 'center',
   },
   iconActive: {
     backgroundColor: m3Colors.primaryContainer,
   },
+  iconPressed: {
+    opacity: 0.75,
+  },
 });

package/src/renderer/ui/compose-toolbar.tsx

@@ -2,9 +2,6 @@ import type { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { m3Colors, spacing } from '../theme/proulr-theme';
-import { ComposeToolbarIcon } from './compose-toolbar-icon';
-
-const TOOLBAR_ICON_SIZE = 48;
 
 export function ComposeToolbar({
   children,
@@ -28,8 +25,6 @@ export function ComposeToolbar({
   );
 }
 
-export { ComposeToolbarIcon };
-
 const styles = StyleSheet.create({
   toolbar: {
     position: 'absolute',
@@ -53,5 +48,3 @@ const styles = StyleSheet.create({
     bottom: undefined,
   },
 });
-
-export const COMPOSE_TOOLBAR_ICON_SIZE = TOOLBAR_ICON_SIZE;

package/src/renderer/ui/compose-visibility-row.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { Pressable, StyleSheet, Text } from 'react-native';
-import { fonts, m3Colors, spacing } from '../theme/proulr-theme';
+import { m3Colors, m3Type, spacing } from '../theme/proulr-theme';
 import { AppIcon } from './app-icon';
 
 export function ComposeVisibilityRow({
@@ -44,8 +44,7 @@ const styles = StyleSheet.create({
     borderTopColor: m3Colors.outlineVariant,
   },
   label: {
+    ...m3Type.label,
     color: m3Colors.primary,
-    fontFamily: fonts.medium,
-    fontSize: 13,
   },
 });

package/src/renderer/ui/floating-create-menu.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { useCallback, useState } from 'react';
 import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
 import { AppIcon, APP_ICON_SIZE } from './app-icon';
-import { fonts, m3Colors, m3Elevation, spacing } from '../theme/proulr-theme';
+import { m3Colors, m3Elevation, m3Type, spacing } from '../theme/proulr-theme';
 
 export type FloatingCreateMenuAction = {
   id: string;
@@ -139,9 +139,8 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.xs,
   },
   label: {
+    ...m3Type.titleSmall,
     color: m3Colors.onSurface,
-    fontFamily: fonts.semibold,
-    fontSize: 16,
   },
   actionFab: {
     width: ACTION_FAB_SIZE,

package/src/renderer/ui/focus-ring.ts

@@ -0,0 +1,26 @@
+import { useCallback, useState } from 'react';
+import type { ViewStyle } from 'react-native';
+import { m3Colors } from '../theme/proulr-theme';
+
+/**
+ * Anel de foco de teclado (WCAG 2.4.7). `outline*` pinta fora da caixa — não
+ * desloca layout — e `borderColor` cobre as variantes sem borda no nativo.
+ */
+export const FOCUS_RING_STYLE: ViewStyle = {
+  borderColor: m3Colors.focus,
+  outlineColor: m3Colors.focus,
+  outlineStyle: 'solid',
+  outlineWidth: 2,
+  outlineOffset: 2,
+};
+
+export function useFocusRing(): {
+  focused: boolean;
+  onFocus: () => void;
+  onBlur: () => void;
+} {
+  const [focused, setFocused] = useState(false);
+  const onFocus = useCallback(() => setFocused(true), []);
+  const onBlur = useCallback(() => setFocused(false), []);
+  return { focused, onFocus, onBlur };
+}

package/src/renderer/ui/index.ts

@@ -51,7 +51,8 @@ export {
   type ComposePillTextFieldProps,
   type ComposePillVariant,
 } from './compose-pill-input';
-export { ComposeToolbar, ComposeToolbarIcon, COMPOSE_TOOLBAR_ICON_SIZE } from './compose-toolbar';
+export { ComposeToolbar } from './compose-toolbar';
+export { ComposeToolbarIcon, COMPOSE_TOOLBAR_ICON_SIZE } from './compose-toolbar-icon';
 export { ComposeReplyAudienceSheet, type ComposeReplyAudienceOption, type ComposeReplyAudienceValue } from './compose-reply-audience-sheet';
 export { ComposeVisibilityRow } from './compose-visibility-row';
 export { DateField } from './DateField';

package/src/renderer/ui/story-compose-header.tsx

@@ -1,15 +1,20 @@
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { fonts, m3Colors, m3Type, spacing } from '../theme/proulr-theme';
+import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 import { AppIcon } from './app-icon';
 import { StorySettingsGlyph } from './story-glyphs';
 
 export function StoryComposeHeader({
   title,
+  closeLabel,
+  settingsLabel,
   onClose,
   onSettings,
 }: {
   title: string;
+  /** Rótulos accessíveis vêm do chamador (copy via Rosetta) — o renderer não traduz. */
+  closeLabel: string;
+  settingsLabel?: string;
   onClose: () => void;
   onSettings?: () => void;
 }) {
@@ -19,10 +24,9 @@ export function StoryComposeHeader({
     <View style={[styles.header, { paddingTop: insets.top + spacing.xs }]}>
       <Pressable
         onPress={onClose}
-        hitSlop={10}
         accessibilityRole="button"
-        accessibilityLabel="Fechar"
-        style={styles.sideBtn}
+        accessibilityLabel={closeLabel}
+        style={({ pressed }) => [styles.sideBtn, pressed && styles.sideBtnPressed]}
       >
         <AppIcon name="close" color={m3Colors.onSurface} size={18} />
       </Pressable>
@@ -34,10 +38,9 @@ export function StoryComposeHeader({
       {onSettings ? (
         <Pressable
           onPress={onSettings}
-          hitSlop={10}
           accessibilityRole="button"
-          accessibilityLabel="Configurações do story"
-          style={styles.sideBtn}
+          accessibilityLabel={settingsLabel}
+          style={({ pressed }) => [styles.sideBtn, pressed && styles.sideBtnPressed]}
         >
           <StorySettingsGlyph />
         </Pressable>
@@ -57,11 +60,13 @@ const styles = StyleSheet.create({
     backgroundColor: m3Colors.surface,
   },
   sideBtn: {
-    width: 40,
-    height: 40,
+    width: 44,
+    height: 44,
     alignItems: 'center',
     justifyContent: 'center',
+    borderRadius: m3Shape.cornerFull,
   },
+  sideBtnPressed: { backgroundColor: m3Colors.statePressed },
   title: {
     flex: 1,
     color: m3Colors.onSurface,

package/src/renderer/ui/story-create-shortcut-row.tsx

@@ -74,9 +74,9 @@ const styles = StyleSheet.create({
     backgroundColor: m3Colors.secondary,
   },
   badgeText: {
+    ...m3Type.labelSmall,
     color: m3Colors.onSecondary,
     fontFamily: fonts.bold,
-    fontSize: 10,
   },
   iconWrap: {
     marginBottom: spacing.xs,