@proulr/sdui-components 0.1.85 → 0.1.87

package/src/renderer/ui/Label.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { StyleSheet, Text } from 'react-native';
-import { colors, fonts, spacing } from '../theme/proulr-theme';
+import { colors, fonts, m3Type, spacing } from '../theme/proulr-theme';
 
 export function Label({ children }: { children: ReactNode }) {
   return <Text style={styles.label}>{children}</Text>;
@@ -8,10 +8,9 @@ export function Label({ children }: { children: ReactNode }) {
 
 const styles = StyleSheet.create({
   label: {
+    ...m3Type.labelSmall,
     color: colors.textSecondary,
-    fontSize: 12,
     fontFamily: fonts.bold,
-    letterSpacing: 0.8,
     marginTop: spacing.sm,
     marginBottom: spacing.sm,
   },

package/src/renderer/ui/ListItem.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { AppIcon } from './app-icon';
-import { colors, fonts, m3Colors, spacing } from '../theme/proulr-theme';
+import { colors, m3Colors, m3Type, spacing } from '../theme/proulr-theme';
+import { FOCUS_RING_STYLE, useFocusRing } from './focus-ring';
 
 export function ListItem({
   avatar,
@@ -11,6 +12,7 @@ export function ListItem({
   onPress,
   showDivider,
   showChevron,
+  accessibilityLabel,
 }: {
   avatar?: ReactNode;
   title: string;
@@ -19,8 +21,10 @@ export function ListItem({
   onPress?: () => void;
   showDivider?: boolean;
   showChevron?: boolean;
+  accessibilityLabel?: string;
 }) {
   const navChevron = onPress && showChevron !== false && !trailing;
+  const focus = useFocusRing();
 
   const inner = (
     <>
@@ -42,7 +46,19 @@ export function ListItem({
 
   if (onPress) {
     return (
-      <Pressable style={[styles.listItem, showDivider && styles.listItemDivider]} onPress={onPress}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? title}
+        onFocus={focus.onFocus}
+        onBlur={focus.onBlur}
+        style={({ pressed }) => [
+          styles.listItem,
+          showDivider && styles.listItemDivider,
+          pressed && styles.listItemPressed,
+          focus.focused && styles.listItemFocused,
+        ]}
+        onPress={onPress}
+      >
         {inner}
       </Pressable>
     );
@@ -56,6 +72,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: spacing.md,
     paddingVertical: spacing.md,
+    minHeight: 44,
+  },
+  listItemPressed: {
+    backgroundColor: m3Colors.statePressed,
+  },
+  listItemFocused: {
+    ...FOCUS_RING_STYLE,
+    backgroundColor: m3Colors.stateHovered,
   },
   listItemDivider: {
     borderBottomWidth: StyleSheet.hairlineWidth,
@@ -63,7 +87,7 @@ const styles = StyleSheet.create({
   },
   listAvatar: {},
   listContent: { flex: 1 },
-  listTitle: { color: colors.textPrimary, fontSize: 15, fontFamily: fonts.semibold },
-  listSubtitle: { color: colors.textSecondary, fontSize: 13, marginTop: 2 },
+  listTitle: { ...m3Type.titleSmall, color: colors.textPrimary },
+  listSubtitle: { ...m3Type.bodySmall, color: colors.textSecondary, marginTop: 2 },
   listTrailing: { alignItems: 'flex-end' },
 });

package/src/renderer/ui/RangeSlider.tsx

@@ -168,9 +168,8 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   label: {
+    ...m3Type.label,
     color: m3Colors.onSurface,
-    fontFamily: m3Type.label.fontFamily,
-    fontSize: m3Type.label.fontSize,
   },
   trackArea: {
     height: THUMB_SIZE,

package/src/renderer/ui/SectionHeader.tsx

@@ -1,5 +1,5 @@
 import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { colors, fonts, spacing } from '../theme/proulr-theme';
+import { colors, fonts, m3Type, spacing } from '../theme/proulr-theme';
 
 export function SectionHeader({
   title,
@@ -31,13 +31,12 @@ const styles = StyleSheet.create({
     marginTop: spacing.xl,
   },
   sectionHeader: {
+    ...m3Type.titleSmall,
     color: colors.textSecondary,
-    fontSize: 14,
-    fontFamily: fonts.semibold,
   },
   sectionAction: {
+    ...m3Type.label,
     color: colors.accentText,
-    fontSize: 13,
     fontFamily: fonts.semibold,
   },
 });

package/src/renderer/ui/SelectRow.tsx

@@ -2,7 +2,40 @@ import { useState } from 'react';
 import { Modal, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { AppButton } from './AppButton';
 import { AppIcon } from './app-icon';
-import { colors, fonts, radius, spacing } from '../theme/proulr-theme';
+import { FOCUS_RING_STYLE, useFocusRing } from './focus-ring';
+import { colors, fonts, m3Colors, m3Type, radius, spacing } from '../theme/proulr-theme';
+
+function OptionRow({
+  option,
+  selected,
+  onSelect,
+}: {
+  option: string;
+  selected: boolean;
+  onSelect: (v: string) => void;
+}) {
+  const focus = useFocusRing();
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.optionRow,
+        pressed && styles.optionRowPressed,
+        focus.focused && FOCUS_RING_STYLE,
+      ]}
+      accessibilityRole="button"
+      accessibilityLabel={option}
+      accessibilityState={{ selected }}
+      onFocus={focus.onFocus}
+      onBlur={focus.onBlur}
+      onPress={() => onSelect(option)}
+    >
+      <Text style={{ color: selected ? colors.accentText : colors.white, ...m3Type.body }}>
+        {option}
+      </Text>
+      {selected ? <AppIcon name="check" size={16} color={colors.accent} /> : null}
+    </Pressable>
+  );
+}
 
 function OptionModal({
   title,
@@ -10,6 +43,8 @@ function OptionModal({
   options,
   selected,
   multi,
+  placeholder,
+  confirmLabel,
   onClose,
   onSelect,
 }: {
@@ -18,28 +53,33 @@ function OptionModal({
   options: string[];
   selected: string[];
   multi?: boolean;
+  placeholder: string;
+  confirmLabel: string;
   onClose: () => void;
   onSelect: (v: string) => void;
 }) {
   return (
     <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
-      <Pressable style={styles.modalBackdrop} onPress={onClose}>
+      <Pressable
+        style={styles.modalBackdrop}
+        onPress={onClose}
+        accessibilityLabel={placeholder}
+      >
         <Pressable style={styles.modalSheet}>
           <Text style={styles.modalTitle}>{title}</Text>
           <ScrollView style={{ maxHeight: 360 }}>
-            {options.map((opt) => {
-              const isSel = selected.includes(opt);
-              return (
-                <Pressable key={opt} style={styles.optionRow} onPress={() => onSelect(opt)}>
-                  <Text style={{ color: isSel ? colors.accentText : colors.white, fontSize: 16 }}>{opt}</Text>
-                  {isSel ? <AppIcon name="check" size={16} color={colors.accent} /> : null}
-                </Pressable>
-              );
-            })}
+            {options.map((opt) => (
+              <OptionRow
+                key={opt}
+                option={opt}
+                selected={selected.includes(opt)}
+                onSelect={onSelect}
+              />
+            ))}
           </ScrollView>
           {multi ? (
             <View style={{ marginTop: spacing.md }}>
-              <AppButton label="Pronto" onPress={onClose} />
+              <AppButton label={confirmLabel} onPress={onClose} />
             </View>
           ) : null}
         </Pressable>
@@ -52,20 +92,38 @@ export function SelectRow({
   label,
   value,
   options,
+  placeholder,
+  confirmLabel = '',
   onChange,
 }: {
   label: string;
   value?: string | null;
   options: string[];
+  /** Copy vinda do wire/app (Rosetta) — o renderer não traduz. */
+  placeholder: string;
+  confirmLabel?: string;
   onChange: (v: string) => void;
 }) {
   const [open, setOpen] = useState(false);
+  const focus = useFocusRing();
   return (
     <>
-      <Pressable style={styles.selectRow} onPress={() => setOpen(true)}>
+      <Pressable
+        style={({ pressed }) => [
+          styles.selectRow,
+          pressed && styles.selectRowPressed,
+          focus.focused && FOCUS_RING_STYLE,
+        ]}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityHint={placeholder}
+        onFocus={focus.onFocus}
+        onBlur={focus.onBlur}
+        onPress={() => setOpen(true)}
+      >
         <Text style={styles.selectLabel}>{label}</Text>
-        <Text style={styles.selectValue} numberOfLines={1}>
-          {value || 'Selecionar'}
+        <Text style={[styles.selectValue, !value && styles.selectValueEmpty]} numberOfLines={1}>
+          {value || placeholder}
         </Text>
         <AppIcon name="chevron-right" size={18} color={colors.textSecondary} />
       </Pressable>
@@ -74,6 +132,8 @@ export function SelectRow({
         visible={open}
         options={options}
         selected={value ? [value] : []}
+        placeholder={placeholder}
+        confirmLabel={confirmLabel}
         onClose={() => setOpen(false)}
         onSelect={(v) => {
           onChange(v);
@@ -88,20 +148,37 @@ export function MultiSelectRow({
   label,
   values,
   options,
+  placeholder,
+  confirmLabel,
   onChange,
 }: {
   label: string;
   values: string[];
   options: string[];
+  placeholder: string;
+  confirmLabel: string;
   onChange: (v: string[]) => void;
 }) {
   const [open, setOpen] = useState(false);
+  const focus = useFocusRing();
   return (
     <>
-      <Pressable style={styles.selectRow} onPress={() => setOpen(true)}>
+      <Pressable
+        style={({ pressed }) => [
+          styles.selectRow,
+          pressed && styles.selectRowPressed,
+          focus.focused && FOCUS_RING_STYLE,
+        ]}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityHint={placeholder}
+        onFocus={focus.onFocus}
+        onBlur={focus.onBlur}
+        onPress={() => setOpen(true)}
+      >
         <Text style={styles.selectLabel}>{label}</Text>
-        <Text style={styles.selectValue} numberOfLines={1}>
-          {values.length ? values.join(', ') : 'Selecionar'}
+        <Text style={[styles.selectValue, !values.length && styles.selectValueEmpty]} numberOfLines={1}>
+          {values.length ? values.join(', ') : placeholder}
         </Text>
         <AppIcon name="chevron-right" size={18} color={colors.textSecondary} />
       </Pressable>
@@ -111,6 +188,8 @@ export function MultiSelectRow({
         options={options}
         selected={values}
         multi
+        placeholder={placeholder}
+        confirmLabel={confirmLabel}
         onClose={() => setOpen(false)}
         onSelect={(v) => {
           const set = new Set(values);
@@ -128,13 +207,18 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: spacing.sm,
+    minHeight: 48,
     paddingHorizontal: spacing.sm,
     paddingVertical: 15,
     borderRadius: radius.lg,
     backgroundColor: colors.surface2,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineInteractive,
   },
-  selectLabel: { flex: 1, color: colors.white, fontSize: 15, fontFamily: fonts.medium },
-  selectValue: { color: colors.textSecondary, fontSize: 14, maxWidth: 160 },
+  selectRowPressed: { backgroundColor: m3Colors.surfaceContainerHighest },
+  selectLabel: { flex: 1, color: colors.white, ...m3Type.body, fontFamily: fonts.medium },
+  selectValue: { ...m3Type.bodySmall, color: colors.textSecondary, maxWidth: 160 },
+  selectValueEmpty: { color: colors.textMuted },
   modalBackdrop: { flex: 1, backgroundColor: colors.overlay, justifyContent: 'flex-end' },
   modalSheet: {
     backgroundColor: colors.surface,
@@ -144,13 +228,20 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     borderColor: colors.border,
   },
-  modalTitle: { color: colors.white, fontSize: 18, fontFamily: fonts.bold, marginBottom: spacing.md },
+  modalTitle: {
+    color: colors.white,
+    marginBottom: spacing.md,
+    ...m3Type.title,
+    fontFamily: fonts.bold,
+  },
   optionRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
+    minHeight: 48,
     paddingVertical: 14,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: colors.border,
+    borderBottomColor: m3Colors.divider,
   },
+  optionRowPressed: { backgroundColor: m3Colors.surfaceContainerHigh },
 });

package/src/renderer/ui/StatRow.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { colors, fonts, radius, spacing } from '../theme/proulr-theme';
+import { colors, fonts, m3Type, radius, spacing } from '../theme/proulr-theme';
 
 export function StatRow({ stats }: { stats: { value: string; label: string; highlight?: boolean }[] }) {
   return (
@@ -28,6 +28,6 @@ const styles = StyleSheet.create({
   },
   statItem: { flex: 1, alignItems: 'center' },
   statDivider: { width: 1, height: 36, backgroundColor: colors.border },
-  statValue: { color: colors.white, fontSize: 18, fontFamily: fonts.bold },
-  statLabel: { color: colors.textSecondary, fontSize: 12, marginTop: 2, fontFamily: fonts.medium },
+  statValue: { ...m3Type.body, color: colors.white, fontFamily: fonts.bold },
+  statLabel: { ...m3Type.labelSmall, color: colors.textSecondary, marginTop: 2 },
 });

package/src/renderer/ui/TextField.tsx

@@ -10,7 +10,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import { AppIcon, type AppIconName } from './app-icon';
-import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 
 const webInputLock =
   Platform.OS === 'web'
@@ -33,7 +33,7 @@ export function TextField(
       style={[
         styles.field,
         multiline && styles.fieldMultiline,
-        focused && { borderColor: m3Colors.primary, borderWidth: 2 },
+        focused && { borderColor: m3Colors.focus },
         containerStyle,
       ]}
     >
@@ -53,9 +53,12 @@ export function PasswordField(
   props: TextInputProps & {
     containerStyle?: StyleProp<ViewStyle>;
     inputRef?: React.Ref<TextInput>;
+    /** Copy de acessibilidade vem do app/BFF (Rosetta) — o renderer não traduz. */
+    hideLabel: string;
+    showLabel: string;
   },
 ) {
-  const { containerStyle, inputRef, ...rest } = props;
+  const { containerStyle, inputRef, hideLabel, showLabel, ...rest } = props;
   const [visible, setVisible] = useState(false);
 
   return (
@@ -70,8 +73,8 @@ export function PasswordField(
       <Pressable
         onPress={() => setVisible((v) => !v)}
         hitSlop={8}
-        style={styles.passwordToggle}
-        accessibilityLabel={visible ? 'Ocultar senha' : 'Mostrar senha'}
+        style={({ pressed }) => [styles.passwordToggle, pressed && styles.passwordTogglePressed]}
+        accessibilityLabel={visible ? hideLabel : showLabel}
         accessibilityRole="button"
       >
         <AppIcon
@@ -90,7 +93,7 @@ const styles = StyleSheet.create({
     borderRadius: m3Shape.cornerExtraSmall,
     backgroundColor: 'transparent',
     borderWidth: 1,
-    borderColor: m3Colors.outline,
+    borderColor: m3Colors.outlineInteractive,
     paddingHorizontal: spacing.sm,
     justifyContent: 'center',
   },
@@ -99,19 +102,20 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     paddingVertical: spacing.md,
   },
-  fieldInput: { color: m3Colors.onSurface, fontSize: 16, fontFamily: fonts.regular },
+  fieldInput: { ...m3Type.body, color: m3Colors.onSurface },
   fieldInputMultiline: {
-    fontSize: 18,
-    lineHeight: 26,
+    ...m3Type.body,
     minHeight: 96,
     width: '100%',
   },
   passwordField: { flexDirection: 'row', alignItems: 'center', paddingRight: spacing.sm },
   passwordInput: { flex: 1 },
   passwordToggle: {
-    width: 40,
-    height: 40,
+    width: 44,
+    height: 44,
     alignItems: 'center',
     justifyContent: 'center',
+    borderRadius: m3Shape.cornerSmall,
   },
+  passwordTogglePressed: { backgroundColor: m3Colors.surfaceContainerHigh },
 });

package/src/renderer/ui/ToggleRow.tsx

@@ -1,5 +1,6 @@
-import { StyleSheet, Switch, Text, View } from 'react-native';
-import { fonts, m3Colors, spacing } from '../theme/proulr-theme';
+import { Pressable, StyleSheet, Switch, Text, View } from 'react-native';
+import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+import { FOCUS_RING_STYLE, useFocusRing } from './focus-ring';
 
 export function ToggleRow({
   label,
@@ -7,27 +8,49 @@ export function ToggleRow({
   value,
   onChange,
   disabled,
+  testID,
 }: {
   label: string;
   hint?: string;
   value: boolean;
   onChange: (value: boolean) => void;
   disabled?: boolean;
+  testID?: string;
 }) {
+  const focus = useFocusRing();
   return (
-    <View style={styles.row}>
+    <Pressable
+      testID={testID}
+      accessibilityRole="switch"
+      accessibilityLabel={label}
+      accessibilityState={{ checked: value, disabled: Boolean(disabled) }}
+      accessibilityHint={hint}
+      disabled={disabled}
+      onPress={() => onChange(!value)}
+      onFocus={focus.onFocus}
+      onBlur={focus.onBlur}
+      style={({ pressed }) => [
+        styles.row,
+        pressed && !disabled && styles.rowPressed,
+        focus.focused && !disabled && FOCUS_RING_STYLE,
+      ]}
+    >
       <View style={styles.copy}>
-        <Text style={styles.label}>{label}</Text>
+        <Text style={[styles.label, disabled && styles.labelDisabled]}>{label}</Text>
         {hint ? <Text style={styles.hint}>{hint}</Text> : null}
       </View>
       <Switch
         value={value}
         onValueChange={onChange}
         disabled={disabled}
-        trackColor={{ false: m3Colors.surfaceContainerHighest, true: m3Colors.primary }}
-        thumbColor={m3Colors.onPrimary}
+        accessibilityElementsHidden
+        trackColor={{
+          false: m3Colors.surfaceContainerHighest,
+          true: disabled ? m3Colors.disabledContainer : m3Colors.primary,
+        }}
+        thumbColor={value ? m3Colors.onPrimary : m3Colors.onSurfaceVariant}
       />
-    </View>
+    </Pressable>
   );
 }
 
@@ -36,21 +59,25 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: spacing.md,
-    paddingVertical: spacing.xs,
+    minHeight: 48,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.sm,
+    borderRadius: m3Shape.cornerMedium,
   },
+  rowPressed: { backgroundColor: m3Colors.surfaceContainerHigh },
   copy: {
     flex: 1,
     gap: spacing.xs,
   },
   label: {
     color: m3Colors.onSurface,
-    fontSize: 15,
+    ...m3Type.body,
     fontFamily: fonts.semibold,
   },
+  labelDisabled: { color: m3Colors.onDisabled },
   hint: {
     color: m3Colors.onSurfaceVariant,
-    fontSize: 12,
-    lineHeight: 17,
+    ...m3Type.labelSmall,
     fontFamily: fonts.regular,
   },
 });

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

@@ -1,6 +1,6 @@
 import { Pressable, StyleSheet, Text } from 'react-native';
 import { AppIcon } from './app-icon';
-import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 
 export function ComposeAudiencePill({
   label,
@@ -36,8 +36,7 @@ const styles = StyleSheet.create({
     backgroundColor: m3Colors.primaryContainer,
   },
   label: {
+    ...m3Type.label,
     color: m3Colors.onPrimaryContainer,
-    fontFamily: fonts.medium,
-    fontSize: 13,
   },
 });

package/src/renderer/ui/compose-media-carousel.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { AppIcon } from './app-icon';
-import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 
 export type ComposeMediaCarouselItem = {
   id: string;
@@ -11,14 +11,25 @@ export type ComposeMediaCarouselItem = {
 
 const TILE_SIZE = 168;
 
+/** Coluna do compositor: 40 de avatar + 8 de gap — o rail de mídia alinha com o texto. */
+const COMPOSER_TEXT_GUTTER = 48;
+
+/** O badge visual é pequeno para não cobrir a miniatura; o alvo de toque cresce com o slop. */
+const REMOVE_HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
+
 export function ComposeMediaCarousel({
   items,
   limit,
+  videoLabel,
+  removeLabel,
   onRemove,
   renderVideo,
 }: {
   items: ComposeMediaCarouselItem[];
   limit: number;
+  /** Copy vem do caller (Rosetta) — o renderer não traduz. */
+  videoLabel: string;
+  removeLabel: string;
   onRemove: (id: string) => void;
   renderVideo?: (uri: string) => ReactNode;
 }) {
@@ -38,7 +49,7 @@ export function ComposeMediaCarousel({
                 renderVideo(item.uri)
               ) : (
                 <View style={styles.videoFallback}>
-                  <Text style={styles.videoFallbackText}>Vídeo</Text>
+                  <Text style={styles.videoFallbackText}>{videoLabel}</Text>
                 </View>
               )
             ) : (
@@ -47,8 +58,9 @@ export function ComposeMediaCarousel({
             <Pressable
               onPress={() => onRemove(item.id)}
               accessibilityRole="button"
-              accessibilityLabel="Remover mídia"
-              style={styles.removeBtn}
+              accessibilityLabel={removeLabel}
+              hitSlop={REMOVE_HIT_SLOP}
+              style={({ pressed }) => [styles.removeBtn, pressed && styles.removeBtnPressed]}
             >
               <AppIcon name="close" size={14} color={m3Colors.onPrimary} />
             </Pressable>
@@ -65,7 +77,7 @@ export function ComposeMediaCarousel({
 const styles = StyleSheet.create({
   wrap: {
     marginTop: spacing.md,
-    marginLeft: 48,
+    marginLeft: COMPOSER_TEXT_GUTTER,
   },
   scrollContent: {
     gap: spacing.sm,
@@ -89,8 +101,8 @@ const styles = StyleSheet.create({
   },
   videoFallbackText: {
     color: m3Colors.onSurfaceVariant,
+    ...m3Type.bodySmall,
     fontFamily: fonts.medium,
-    fontSize: 13,
   },
   removeBtn: {
     position: 'absolute',
@@ -103,10 +115,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  removeBtnPressed: { backgroundColor: m3Colors.statePressed },
   counter: {
     marginTop: spacing.xs,
     color: m3Colors.onSurfaceVariant,
+    ...m3Type.labelSmall,
     fontFamily: fonts.medium,
-    fontSize: 12,
   },
 });

package/src/renderer/ui/compose-media-shortcut.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 
 const MEDIA_TILE_SIZE = 88;
 
@@ -48,9 +48,8 @@ const styles = StyleSheet.create({
     position: 'relative',
   },
   hintText: {
+    ...m3Type.labelSmall,
     color: m3Colors.onPrimary,
-    fontFamily: fonts.medium,
-    fontSize: 11,
   },
   hintTail: {
     position: 'absolute',