@proulr/sdui-components 0.1.5 → 0.1.7

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
   "exports": {
     "./bdc": "./src/bdc/index.ts",
     "./bdc/jsx-runtime": "./src/bdc/jsx-runtime.ts",
-    "./renderer": "./src/renderer/index.ts"
+    "./renderer": "./src/renderer/index.ts",
+    "./ui": "./src/renderer/ui/index.ts",
+    "./primitives": "./src/renderer/ui/primitives.ts",
+    "./theme": "./src/renderer/theme/proulr-theme.ts"
   },
   "files": [
     "src"
@@ -16,6 +19,7 @@
     "url": "git+https://github.com/saviorbp/proulr-sdui-components.git"
   },
   "scripts": {
+    "prepare": "husky",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run typecheck",
     "lint": "eslint .",
@@ -57,10 +61,16 @@
     "eslint": "^9.0.0",
     "eslint-config-expo": "~56.0.4",
     "expo-linear-gradient": "~56.0.4",
+    "globals": "^16.0.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
     "react": "19.2.3",
     "react-native": "0.85.3",
     "react-native-google-mobile-ads": "^16.3.4",
     "react-native-safe-area-context": "~5.7.0",
     "typescript": "~6.0.3"
+  },
+  "engines": {
+    "node": ">=22"
   }
 }

package/src/renderer/theme/proulr-theme.ts

@@ -31,6 +31,8 @@ export const m3Colors = {
   inverseOnSurface: '#000000',
   scrim: 'rgba(0,0,0,0.78)',
   online: '#34FF88',
+  chromePillBackground: 'rgba(28, 28, 30, 0.82)',
+  chromePillBorder: 'rgba(255, 255, 255, 0.06)',
 } as const;
 
 export const m3Shape = {
@@ -77,6 +79,8 @@ export const colors = {
   dangerSoft: 'rgba(255,68,68,0.22)',
   overlay: 'rgba(0,0,0,0.78)',
   surfaceGlass: 'rgba(255,255,255,0.06)',
+  chromePillBackground: 'rgba(28, 28, 30, 0.82)',
+  chromePillBorder: 'rgba(255, 255, 255, 0.06)',
   primary: m3Colors.primary,
   onSurface: m3Colors.onSurface,
   onSurfaceVariant: m3Colors.onSurfaceVariant,

package/src/renderer/ui/AppChromeIconButton.tsx

@@ -0,0 +1,62 @@
+import { Pressable, StyleSheet } from 'react-native';
+import { AppIcon, type AppIconName, APP_ICON_SIZE } from './app-icon';
+import { m3Colors, spacing } from '../theme/proulr-theme';
+
+type AppChromeIconButtonProps = {
+  label: string;
+  icon: AppIconName;
+  onPress?: () => void;
+  disabled?: boolean;
+  color?: string;
+  size?: number;
+  /** Header chrome pill — circular bordered target. */
+  variant?: 'header' | 'plain';
+};
+
+export function AppChromeIconButton({
+  label,
+  icon,
+  onPress,
+  disabled,
+  color = m3Colors.primary,
+  size = APP_ICON_SIZE.chromeHeader,
+  variant = 'header',
+}: AppChromeIconButtonProps) {
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled || !onPress}
+      hitSlop={8}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      style={[
+        variant === 'header' ? styles.headerBtn : styles.plainBtn,
+        disabled && styles.disabled,
+      ]}
+    >
+      <AppIcon name={icon} color={color} size={size} />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerBtn: {
+    width: 45,
+    height: 45,
+    borderRadius: 22.5,
+    borderWidth: 2,
+    borderColor: 'rgba(255,255,255,0.22)',
+    margin: spacing.xs,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  plainBtn: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});

package/src/renderer/ui/Chip.tsx

@@ -0,0 +1,60 @@
+import { Pressable, StyleSheet, Text } from 'react-native';
+import { colors, fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+
+export function Chip({
+  label,
+  active,
+  onPress,
+  variant = 'default',
+}: {
+  label: string;
+  active?: boolean;
+  onPress?: () => void;
+  variant?: 'default' | 'onHeader';
+}) {
+  const isHeader = variant === 'onHeader';
+
+  const containerStyle = active
+    ? isHeader
+      ? { backgroundColor: m3Colors.onPrimary, borderColor: m3Colors.onPrimary }
+      : { backgroundColor: m3Colors.secondaryContainer, borderColor: m3Colors.outline }
+    : isHeader
+      ? { backgroundColor: colors.surfaceGlass, borderColor: 'rgba(255,255,255,0.28)' }
+      : { backgroundColor: m3Colors.surfaceContainerHigh, borderColor: m3Colors.outline };
+
+  const textColor = active
+    ? isHeader
+      ? colors.headerStart
+      : m3Colors.onSecondaryContainer
+    : isHeader
+      ? colors.textOnAccent
+      : m3Colors.onSurfaceVariant;
+
+  return (
+    <Pressable onPress={onPress} style={[styles.chip, isHeader && styles.chipOnHeader, containerStyle]}>
+      <Text
+        style={{
+          color: textColor,
+          fontSize: isHeader ? 12 : 13,
+          fontFamily: fonts.semibold,
+        }}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.sm,
+    borderRadius: m3Shape.cornerSmall,
+    borderWidth: 1,
+  },
+  chipOnHeader: {
+    borderRadius: m3Shape.cornerFull,
+    paddingHorizontal: spacing.sm + 2,
+    paddingVertical: spacing.xs,
+  },
+});

package/src/renderer/ui/HintText.tsx

@@ -0,0 +1,22 @@
+import { StyleSheet, Text, type TextProps } from 'react-native';
+import { fonts, m3Colors, spacing } from '../theme/proulr-theme';
+
+type HintTextProps = TextProps & {
+  spaced?: boolean;
+};
+
+export function HintText({ spaced, style, ...props }: HintTextProps) {
+  return <Text style={[styles.hint, spaced && styles.spaced, style]} {...props} />;
+}
+
+const styles = StyleSheet.create({
+  hint: {
+    color: m3Colors.onSurfaceVariant,
+    fontSize: 12,
+    lineHeight: 17,
+    fontFamily: fonts.regular,
+  },
+  spaced: {
+    marginTop: spacing.sm,
+  },
+});

package/src/renderer/ui/InfoBanner.tsx

@@ -1,27 +1,33 @@
-import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { AppIcon, type AppIconName, APP_ICON_SIZE } from './app-icon';
 import { colors, fonts, radius, spacing } from '../theme/proulr-theme';
 
 export function InfoBanner({
   message,
   icon = 'ℹ',
+  appIcon,
   onDismiss,
 }: {
   message: string;
   icon?: string;
+  appIcon?: AppIconName;
   onDismiss?: () => void;
 }) {
   return (
     <View style={styles.infoBanner}>
       <View style={styles.infoIconWrap}>
-        <Text style={styles.infoIcon}>{icon}</Text>
+        {appIcon ? (
+          <AppIcon name={appIcon} size={APP_ICON_SIZE.banner} color={colors.accentText} />
+        ) : (
+          <Text style={styles.infoIcon}>{icon}</Text>
+        )}
       </View>
       <Text style={styles.infoText}>{message}</Text>
-      {onDismiss && (
+      {onDismiss ? (
         <Pressable onPress={onDismiss} hitSlop={8}>
-          <Text style={styles.infoDismiss}>✕</Text>
+          <AppIcon name="close" size={14} color={colors.textMuted} />
         </Pressable>
-      )}
+      ) : null}
     </View>
   );
 }
@@ -47,5 +53,4 @@ const styles = StyleSheet.create({
   },
   infoIcon: { fontSize: 16, color: colors.accentText },
   infoText: { flex: 1, color: colors.textSecondary, fontSize: 13, lineHeight: 18, fontFamily: fonts.medium },
-  infoDismiss: { color: colors.textMuted, fontSize: 16 },
 });

package/src/renderer/ui/Label.tsx

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

package/src/renderer/ui/ListItem.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { colors, fonts, m3Colors, spacing } from '../theme/proulr-theme';
+
+export function ListItem({
+  avatar,
+  title,
+  subtitle,
+  trailing,
+  onPress,
+  showDivider,
+  showChevron,
+}: {
+  avatar?: ReactNode;
+  title: string;
+  subtitle?: string;
+  trailing?: ReactNode;
+  onPress?: () => void;
+  showDivider?: boolean;
+  showChevron?: boolean;
+}) {
+  const navChevron = onPress && showChevron !== false && !trailing;
+
+  const inner = (
+    <>
+      {avatar ? <View style={styles.listAvatar}>{avatar}</View> : null}
+      <View style={styles.listContent}>
+        <Text style={styles.listTitle} numberOfLines={1}>
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text style={styles.listSubtitle} numberOfLines={1}>
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+      {navChevron ? <Text style={styles.chevron}>{'\u203a'}</Text> : null}
+      {trailing ? <View style={styles.listTrailing}>{trailing}</View> : null}
+    </>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable style={[styles.listItem, showDivider && styles.listItemDivider]} onPress={onPress}>
+        {inner}
+      </Pressable>
+    );
+  }
+  return <View style={[styles.listItem, showDivider && styles.listItemDivider]}>{inner}</View>;
+}
+
+const styles = StyleSheet.create({
+  listItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingVertical: spacing.md,
+  },
+  listItemDivider: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.border,
+  },
+  listAvatar: {},
+  listContent: { flex: 1 },
+  listTitle: { color: colors.textPrimary, fontSize: 15, fontFamily: fonts.semibold },
+  listSubtitle: { color: colors.textSecondary, fontSize: 13, marginTop: 2 },
+  listTrailing: { alignItems: 'flex-end' },
+  chevron: { color: m3Colors.onSurfaceVariant, fontSize: 22 },
+});

package/src/renderer/ui/ProgressBar.tsx

@@ -0,0 +1,21 @@
+import { StyleSheet, View } from 'react-native';
+import { colors, radius } from '../theme/proulr-theme';
+
+export function ProgressBar({ progress, color = colors.accent }: { progress: number; color?: string }) {
+  const pct = Math.min(1, Math.max(0, progress));
+  return (
+    <View style={styles.progressTrack}>
+      <View style={[styles.progressFill, { width: `${pct * 100}%`, backgroundColor: color }]} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  progressTrack: {
+    height: 8,
+    borderRadius: radius.pill,
+    backgroundColor: colors.surface2,
+    overflow: 'hidden',
+  },
+  progressFill: { height: '100%', borderRadius: radius.pill },
+});

package/src/renderer/ui/SectionHeader.tsx

@@ -0,0 +1,43 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { colors, fonts, spacing } from '../theme/proulr-theme';
+
+export function SectionHeader({
+  title,
+  action,
+  onAction,
+}: {
+  title: string;
+  action?: string;
+  onAction?: () => void;
+}) {
+  return (
+    <View style={styles.sectionHeaderRow}>
+      <Text style={styles.sectionHeader}>{title}</Text>
+      {action && onAction ? (
+        <Pressable onPress={onAction} hitSlop={8}>
+          <Text style={styles.sectionAction}>{action}</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  sectionHeaderRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: spacing.sm,
+    marginTop: spacing.xl,
+  },
+  sectionHeader: {
+    color: colors.textSecondary,
+    fontSize: 14,
+    fontFamily: fonts.semibold,
+  },
+  sectionAction: {
+    color: colors.accentText,
+    fontSize: 13,
+    fontFamily: fonts.semibold,
+  },
+});

package/src/renderer/ui/SelectRow.tsx

@@ -0,0 +1,156 @@
+import { useState } from 'react';
+import { Modal, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { AppButton } from './AppButton';
+import { colors, fonts, radius, spacing } from '../theme/proulr-theme';
+
+function OptionModal({
+  title,
+  visible,
+  options,
+  selected,
+  multi,
+  onClose,
+  onSelect,
+}: {
+  title: string;
+  visible: boolean;
+  options: string[];
+  selected: string[];
+  multi?: boolean;
+  onClose: () => void;
+  onSelect: (v: string) => void;
+}) {
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <Pressable style={styles.modalBackdrop} onPress={onClose}>
+        <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 ? <Text style={{ color: colors.accent, fontSize: 16 }}>{'\u2713'}</Text> : null}
+                </Pressable>
+              );
+            })}
+          </ScrollView>
+          {multi ? (
+            <View style={{ marginTop: spacing.md }}>
+              <AppButton label="Pronto" onPress={onClose} />
+            </View>
+          ) : null}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+export function SelectRow({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value?: string | null;
+  options: string[];
+  onChange: (v: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Pressable style={styles.selectRow} onPress={() => setOpen(true)}>
+        <Text style={styles.selectLabel}>{label}</Text>
+        <Text style={styles.selectValue} numberOfLines={1}>
+          {value || 'Selecionar'}
+        </Text>
+        <Text style={styles.chevron}>{'\u203a'}</Text>
+      </Pressable>
+      <OptionModal
+        title={label}
+        visible={open}
+        options={options}
+        selected={value ? [value] : []}
+        onClose={() => setOpen(false)}
+        onSelect={(v) => {
+          onChange(v);
+          setOpen(false);
+        }}
+      />
+    </>
+  );
+}
+
+export function MultiSelectRow({
+  label,
+  values,
+  options,
+  onChange,
+}: {
+  label: string;
+  values: string[];
+  options: string[];
+  onChange: (v: string[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Pressable style={styles.selectRow} onPress={() => setOpen(true)}>
+        <Text style={styles.selectLabel}>{label}</Text>
+        <Text style={styles.selectValue} numberOfLines={1}>
+          {values.length ? values.join(', ') : 'Selecionar'}
+        </Text>
+        <Text style={styles.chevron}>{'\u203a'}</Text>
+      </Pressable>
+      <OptionModal
+        title={label}
+        visible={open}
+        options={options}
+        selected={values}
+        multi
+        onClose={() => setOpen(false)}
+        onSelect={(v) => {
+          const set = new Set(values);
+          if (set.has(v)) set.delete(v);
+          else set.add(v);
+          onChange(Array.from(set));
+        }}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  selectRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: 15,
+    borderRadius: radius.lg,
+    backgroundColor: colors.surface2,
+  },
+  selectLabel: { flex: 1, color: colors.white, fontSize: 15, fontFamily: fonts.medium },
+  selectValue: { color: colors.textSecondary, fontSize: 14, maxWidth: 160 },
+  chevron: { color: colors.textSecondary, fontSize: 18 },
+  modalBackdrop: { flex: 1, backgroundColor: colors.overlay, justifyContent: 'flex-end' },
+  modalSheet: {
+    backgroundColor: colors.surface,
+    borderTopLeftRadius: radius.xl,
+    borderTopRightRadius: radius.xl,
+    padding: spacing.xl,
+    borderTopWidth: 1,
+    borderColor: colors.border,
+  },
+  modalTitle: { color: colors.white, fontSize: 18, fontFamily: fonts.bold, marginBottom: spacing.md },
+  optionRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.border,
+  },
+});

package/src/renderer/ui/StatRow.tsx

@@ -0,0 +1,33 @@
+import { Fragment } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { colors, fonts, radius, spacing } from '../theme/proulr-theme';
+
+export function StatRow({ stats }: { stats: { value: string; label: string; highlight?: boolean }[] }) {
+  return (
+    <View style={styles.statRow}>
+      {stats.map((s, i) => (
+        <Fragment key={s.label}>
+          {i > 0 ? <View style={styles.statDivider} /> : null}
+          <View style={styles.statItem}>
+            <Text style={[styles.statValue, s.highlight && { color: colors.accentText }]}>{s.value}</Text>
+            <Text style={styles.statLabel}>{s.label}</Text>
+          </View>
+        </Fragment>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  statRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.surface2,
+    borderRadius: radius.lg,
+    paddingVertical: spacing.sm,
+  },
+  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 },
+});

package/src/renderer/ui/TextField.tsx

@@ -1,10 +1,19 @@
 import React, { useState } from 'react';
-import { Pressable, StyleSheet, Text, TextInput, TextInputProps, View, ViewStyle } from 'react-native';
+import {
+  Pressable,
+  StyleSheet,
+  StyleProp,
+  TextInput,
+  TextInputProps,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { AppIcon, type AppIconName } from './app-icon';
 import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
 
 export function TextField(
   props: TextInputProps & {
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;
     focused?: boolean;
     inputRef?: React.Ref<TextInput>;
   },
@@ -30,7 +39,7 @@ export function TextField(
 
 export function PasswordField(
   props: TextInputProps & {
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;
     inputRef?: React.Ref<TextInput>;
   },
 ) {
@@ -51,8 +60,13 @@ export function PasswordField(
         hitSlop={8}
         style={styles.passwordToggle}
         accessibilityLabel={visible ? 'Ocultar senha' : 'Mostrar senha'}
+        accessibilityRole="button"
       >
-        <Text style={styles.passwordToggleIcon}>{visible ? '🙈' : '👁'}</Text>
+        <AppIcon
+          name={(visible ? 'visibility-off' : 'visibility') as AppIconName}
+          size={20}
+          color={m3Colors.onSurfaceVariant}
+        />
       </Pressable>
     </View>
   );
@@ -77,5 +91,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  passwordToggleIcon: { fontSize: 18 },
 });

package/src/renderer/ui/ToggleRow.tsx

@@ -0,0 +1,56 @@
+import { StyleSheet, Switch, Text, View } from 'react-native';
+import { fonts, m3Colors, spacing } from '../theme/proulr-theme';
+
+export function ToggleRow({
+  label,
+  hint,
+  value,
+  onChange,
+  disabled,
+}: {
+  label: string;
+  hint?: string;
+  value: boolean;
+  onChange: (value: boolean) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <View style={styles.row}>
+      <View style={styles.copy}>
+        <Text style={styles.label}>{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}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingVertical: spacing.xs,
+  },
+  copy: {
+    flex: 1,
+    gap: spacing.xs,
+  },
+  label: {
+    color: m3Colors.onSurface,
+    fontSize: 15,
+    fontFamily: fonts.semibold,
+  },
+  hint: {
+    color: m3Colors.onSurfaceVariant,
+    fontSize: 12,
+    lineHeight: 17,
+    fontFamily: fonts.regular,
+  },
+});

package/src/renderer/ui/app-glyphs.tsx

@@ -168,21 +168,26 @@ export function AppChromeMicGlyph({ color = m3Colors.onPrimary, size = 24 }: App
 }
 
 export function AppChromeSendGlyph({ color = m3Colors.onPrimary, size = 24 }: AppChromeGlyphProps) {
+  const wingSpan = size * 0.17;
+  const bodyLength = size * 0.5;
+
   return (
     <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: 0,
-          height: 0,
-          borderTopWidth: size * 0.24,
-          borderBottomWidth: size * 0.24,
-          borderLeftWidth: size * 0.38,
-          borderTopColor: 'transparent',
-          borderBottomColor: 'transparent',
-          borderLeftColor: color,
-          marginLeft: size * 0.1,
-        }}
-      />
+      <View style={{ transform: [{ rotate: '-42deg' }] }}>
+        <View
+          style={{
+            width: 0,
+            height: 0,
+            borderTopWidth: wingSpan,
+            borderBottomWidth: wingSpan,
+            borderLeftWidth: bodyLength,
+            borderTopColor: 'transparent',
+            borderBottomColor: 'transparent',
+            borderLeftColor: color,
+            marginLeft: size * 0.04,
+          }}
+        />
+      </View>
     </View>
   );
 }

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

@@ -0,0 +1,557 @@
+import React, { useCallback, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import {
+  NativeSyntheticEvent,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  TextInputContentSizeChangeEventData,
+  View,
+  type StyleProp,
+  type TextInputProps,
+  type ViewStyle,
+} from 'react-native';
+import { AppIcon } from './app-icon';
+import { colors, fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+
+const ACTION_BUTTON_SIZE = 48;
+const FONT_SIZE = 16;
+const LINE_HEIGHT = 25;
+const MAX_LINES_DEFAULT = 4;
+const PILL_MIN_HEIGHT = ACTION_BUTTON_SIZE;
+const VERTICAL_PAD = (PILL_MIN_HEIGHT - LINE_HEIGHT) / 2;
+
+export type ComposePillVariant = 'surface' | 'chrome' | 'overlay';
+
+export type ComposePillReplyPreview = {
+  title: string;
+  body: string;
+  onDismiss: () => void;
+};
+
+export type ComposePillLineLayout = {
+  lineCount: number;
+  isMultiline: boolean;
+  pillHeight: number;
+  inputMaxHeight: number;
+};
+
+export type ComposePillLineLayoutState = ComposePillLineLayout & {
+  handleContentSizeChange: (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void;
+  resetLineCount: () => void;
+  setLineCount: (count: number) => void;
+};
+
+type ComposePillLayoutOptions = {
+  maxLines?: number;
+};
+
+function singleLineMaxContentHeight(): number {
+  return LINE_HEIGHT * 2;
+}
+
+function maxPillHeight(maxLines: number): number {
+  return LINE_HEIGHT * maxLines + VERTICAL_PAD * 2;
+}
+
+export function countComposePillLines(
+  text: string,
+  contentHeight: number,
+  maxLines: number = MAX_LINES_DEFAULT,
+): number {
+  if (!text) return 1;
+
+  const explicitLines = text.split('\n').length;
+  if (explicitLines > 1) {
+    return Math.min(maxLines, explicitLines);
+  }
+
+  if (contentHeight <= singleLineMaxContentHeight()) {
+    return 1;
+  }
+
+  const wrappedLines = Math.round(contentHeight / LINE_HEIGHT);
+  return Math.min(maxLines, Math.max(1, wrappedLines));
+}
+
+export function pillHeightForLineCount(lineCount: number, maxLines: number = MAX_LINES_DEFAULT): number {
+  if (lineCount <= 1) return PILL_MIN_HEIGHT;
+  const textBlockHeight = lineCount * LINE_HEIGHT;
+  return Math.min(maxPillHeight(maxLines), textBlockHeight);
+}
+
+export function useComposePillLineLayout(
+  value: string,
+  { maxLines = MAX_LINES_DEFAULT }: ComposePillLayoutOptions = {},
+): ComposePillLineLayoutState {
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const [lineCount, setLineCount] = useState(1);
+
+  const updateLineLayout = useCallback(
+    (text: string, contentHeight: number) => {
+      const nextLineCount = text ? countComposePillLines(text, contentHeight, maxLines) : 1;
+      setLineCount(nextLineCount);
+    },
+    [maxLines],
+  );
+
+  const handleContentSizeChange = useCallback(
+    (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+      const text = valueRef.current;
+      if (!text) {
+        setLineCount(1);
+        return;
+      }
+      updateLineLayout(text, event.nativeEvent.contentSize.height);
+    },
+    [updateLineLayout],
+  );
+
+  const resetLineCount = useCallback(() => {
+    setLineCount(1);
+  }, []);
+
+  const isMultiline = lineCount > 1;
+  const pillHeight = pillHeightForLineCount(lineCount, maxLines);
+  const inputMaxHeight = maxPillHeight(maxLines) - VERTICAL_PAD * 2;
+
+  return {
+    lineCount,
+    isMultiline,
+    pillHeight,
+    inputMaxHeight,
+    handleContentSizeChange,
+    resetLineCount,
+    setLineCount,
+  };
+}
+
+type ComposePillTextInputRef = React.Ref<TextInput>;
+
+export type ComposePillTextFieldProps = Omit<TextInputProps, 'multiline' | 'style'> & {
+  value: string;
+  onChangeText: (text: string) => void;
+  variant?: ComposePillVariant;
+  maxLines?: number;
+  inputRef?: ComposePillTextInputRef;
+  layout?: ComposePillLineLayoutState;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function ComposePillTextField({
+  value,
+  onChangeText,
+  variant = 'surface',
+  maxLines = MAX_LINES_DEFAULT,
+  inputRef,
+  layout,
+  placeholder,
+  placeholderTextColor,
+  onFocus,
+  onBlur,
+  editable,
+  style,
+  ...rest
+}: ComposePillTextFieldProps) {
+  const internalLayout = useComposePillLineLayout(value, { maxLines });
+  const {
+    lineCount,
+    isMultiline,
+    inputMaxHeight,
+    handleContentSizeChange,
+    setLineCount,
+  } = layout ?? internalLayout;
+
+  const handleChange = useCallback(
+    (text: string) => {
+      onChangeText(text);
+      if (!text) {
+        setLineCount(1);
+      }
+    },
+    [onChangeText, setLineCount],
+  );
+
+  const variantColors = composePillVariantColors(variant);
+
+  return (
+    <TextInput
+      ref={inputRef}
+      value={value}
+      onChangeText={handleChange}
+      onContentSizeChange={handleContentSizeChange}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      placeholder={placeholder}
+      placeholderTextColor={placeholderTextColor ?? variantColors.placeholder}
+      multiline
+      scrollEnabled={lineCount >= maxLines}
+      blurOnSubmit={false}
+      returnKeyType="default"
+      editable={editable}
+      style={[
+        styles.input,
+        {
+          color: variantColors.text,
+          maxHeight: inputMaxHeight,
+          textAlignVertical: isMultiline ? 'top' : 'center',
+        },
+        style,
+      ]}
+      {...(Platform.OS === 'android' ? { includeFontPadding: false } : {})}
+      {...(Platform.OS === 'web'
+        ? ({
+            outlineStyle: 'none',
+            resize: 'none',
+            overflow: 'hidden',
+          } as object)
+        : {})}
+      {...rest}
+    />
+  );
+}
+
+export type ComposePillInputProps = {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  maxLines?: number;
+  variant?: ComposePillVariant;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  inputRef?: ComposePillTextInputRef;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  endAction?: ReactNode;
+  replyPreview?: ComposePillReplyPreview | null;
+  style?: StyleProp<ViewStyle>;
+  transparentWrap?: boolean;
+  /** Bare row without pill chrome — text field only grows inline (ex.: comentários). */
+  bare?: boolean;
+  rowAlignItems?: 'center' | 'flex-end';
+};
+
+function composePillVariantColors(variant: ComposePillVariant) {
+  if (variant === 'overlay') {
+    return {
+      text: colors.white,
+      placeholder: 'rgba(255,255,255,0.55)',
+      pillBackground: 'rgba(28,28,30,0.72)',
+      pillBorder: 'rgba(255,255,255,0.08)',
+      replyBackground: 'rgba(28,28,30,0.72)',
+    };
+  }
+
+  if (variant === 'chrome') {
+    return {
+      text: m3Colors.onSurface,
+      placeholder: m3Colors.onSurfaceVariant,
+      pillBackground: colors.chromePillBackground,
+      pillBorder: colors.chromePillBorder,
+      replyBackground: colors.chromePillBackground,
+    };
+  }
+
+  return {
+    text: m3Colors.onSurface,
+    placeholder: m3Colors.onSurfaceVariant,
+    pillBackground: m3Colors.surfaceContainerHigh,
+    pillBorder: 'transparent',
+    replyBackground: m3Colors.surfaceContainerHigh,
+  };
+}
+
+export function ComposePillReplyBar({
+  preview,
+  variant = 'surface',
+}: {
+  preview: ComposePillReplyPreview;
+  variant?: ComposePillVariant;
+}) {
+  const variantColors = composePillVariantColors(variant);
+
+  return (
+    <View style={[styles.replyBar, { backgroundColor: variantColors.replyBackground }]}>
+      <View style={styles.replyBarAccent} />
+      <View style={styles.replyBarContent}>
+        <Text style={styles.replyBarName} numberOfLines={1}>
+          {preview.title}
+        </Text>
+        <Text style={styles.replyBarPreview} numberOfLines={1}>
+          {preview.body}
+        </Text>
+      </View>
+      <Pressable
+        onPress={preview.onDismiss}
+        hitSlop={8}
+        style={styles.replyBarClose}
+        accessibilityRole="button"
+        accessibilityLabel="Cancelar resposta"
+      >
+        <AppIcon name="close" size={14} color={m3Colors.onSurfaceVariant} />
+      </Pressable>
+    </View>
+  );
+}
+
+export function ComposePillIconButton({
+  label,
+  children,
+  onPress,
+  disabled,
+}: {
+  label: string;
+  children: ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <Pressable
+      style={[styles.iconButton, disabled && styles.iconButtonDisabled]}
+      onPress={onPress}
+      disabled={disabled || !onPress}
+      hitSlop={6}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+export function ComposePillActionButton({
+  label,
+  children,
+  onPress,
+  disabled,
+}: {
+  label: string;
+  children: ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <Pressable
+      style={[styles.actionButton, disabled && styles.actionButtonDisabled]}
+      onPress={onPress}
+      disabled={disabled || !onPress}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+export function ComposePillInput({
+  value,
+  onChangeText,
+  placeholder = 'Mensagem',
+  disabled,
+  maxLines = MAX_LINES_DEFAULT,
+  variant = 'surface',
+  onFocus,
+  onBlur,
+  inputRef,
+  leading,
+  trailing,
+  endAction,
+  replyPreview,
+  style,
+  transparentWrap = false,
+  bare = false,
+  rowAlignItems = bare ? 'center' : 'flex-end',
+}: ComposePillInputProps) {
+  const layout = useComposePillLineLayout(value, { maxLines });
+  const { isMultiline, pillHeight, resetLineCount } = layout;
+  const variantColors = composePillVariantColors(variant);
+
+  const handleChange = useCallback(
+    (text: string) => {
+      onChangeText(text);
+      if (!text) {
+        resetLineCount();
+      }
+    },
+    [onChangeText, resetLineCount],
+  );
+
+  const textField = (
+    <ComposePillTextField
+      value={value}
+      onChangeText={handleChange}
+      variant={variant}
+      maxLines={maxLines}
+      inputRef={inputRef}
+      layout={layout}
+      placeholder={placeholder}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      editable={!disabled}
+      style={bare ? styles.bareInput : undefined}
+    />
+  );
+
+  return (
+    <View
+      style={[
+        styles.wrap,
+        transparentWrap && styles.wrapTransparent,
+        variant === 'surface' && !transparentWrap && styles.wrapSurface,
+        style,
+      ]}
+    >
+      {replyPreview ? <ComposePillReplyBar preview={replyPreview} variant={variant} /> : null}
+
+      <View style={[styles.composerRow, { alignItems: rowAlignItems }]}>
+        {bare ? (
+          <>
+            {leading}
+            {textField}
+            {trailing}
+          </>
+        ) : (
+          <View
+            style={[
+              styles.inputPill,
+              isMultiline ? styles.inputPillExpanded : styles.inputPillSingle,
+              {
+                minHeight: pillHeight,
+                alignItems: isMultiline ? 'flex-end' : 'center',
+                backgroundColor: variantColors.pillBackground,
+                borderColor: variantColors.pillBorder,
+                borderWidth: variant === 'overlay' || variant === 'chrome' ? 1 : 0,
+              },
+            ]}
+          >
+            {leading}
+            {textField}
+            {trailing ? (
+              <View style={[styles.trailingIcons, isMultiline && styles.trailingIconsExpanded]}>
+                {trailing}
+              </View>
+            ) : null}
+          </View>
+        )}
+
+        {endAction}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    backgroundColor: 'transparent',
+  },
+  wrapTransparent: {
+    backgroundColor: 'transparent',
+  },
+  wrapSurface: {
+    backgroundColor: m3Colors.surface,
+  },
+  replyBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: spacing.sm,
+    marginTop: spacing.sm,
+    marginBottom: spacing.xs,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+    borderRadius: m3Shape.cornerMedium,
+    gap: spacing.sm,
+  },
+  replyBarAccent: {
+    width: 4,
+    alignSelf: 'stretch',
+    borderRadius: m3Shape.cornerExtraSmall,
+    backgroundColor: m3Colors.primary,
+  },
+  replyBarContent: {
+    flex: 1,
+    gap: 2,
+  },
+  replyBarName: {
+    color: m3Colors.primary,
+    fontSize: 13,
+    fontFamily: fonts.semibold,
+  },
+  replyBarPreview: {
+    color: m3Colors.onSurfaceVariant,
+    fontSize: 13,
+    fontFamily: fonts.regular,
+  },
+  replyBarClose: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  composerRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: spacing.sm,
+    paddingHorizontal: spacing.sm,
+    paddingTop: spacing.sm,
+  },
+  inputPill: {
+    flex: 1,
+    flexDirection: 'row',
+    paddingLeft: spacing.xs,
+    paddingRight: spacing.xs,
+    overflow: 'hidden',
+  },
+  inputPillSingle: {
+    borderRadius: m3Shape.cornerFull,
+  },
+  inputPillExpanded: {
+    borderRadius: m3Shape.cornerLarge,
+  },
+  iconButton: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconButtonDisabled: {
+    opacity: 0.4,
+  },
+  trailingIcons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  trailingIconsExpanded: {
+    paddingBottom: spacing.xs,
+  },
+  input: {
+    flex: 1,
+    fontSize: FONT_SIZE,
+    lineHeight: LINE_HEIGHT,
+    fontFamily: fonts.regular,
+    paddingHorizontal: spacing.xs,
+    paddingTop: VERTICAL_PAD,
+    paddingBottom: VERTICAL_PAD,
+  },
+  bareInput: {
+    minHeight: 40,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+  },
+  actionButton: {
+    width: ACTION_BUTTON_SIZE,
+    height: ACTION_BUTTON_SIZE,
+    borderRadius: ACTION_BUTTON_SIZE / 2,
+    backgroundColor: m3Colors.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  actionButtonDisabled: {
+    opacity: 0.45,
+  },
+});
+
+export const COMPOSE_PILL_ACTION_BUTTON_SIZE = ACTION_BUTTON_SIZE;

package/src/renderer/ui/index.ts

@@ -1,7 +1,9 @@
 export { AppButton } from './AppButton';
+export { AppChromeIconButton } from './AppChromeIconButton';
 export { AppLoadingSpinner } from './AppLoadingSpinner';
 export { AuthStepShell } from './AuthStepShell';
 export { Card } from './Card';
+export { Chip } from './Chip';
 export { ComposeAudiencePill } from './compose-audience-pill';
 export {
   ComposeCameraGlyph,
@@ -71,12 +73,37 @@ export { ComposeMediaShortcut, COMPOSE_MEDIA_TILE_SIZE } from './compose-media-s
 export { ComposeRecentMediaGrid, type ComposeRecentMediaItem } from './compose-recent-media-grid';
 export { ComposeScreenHeader } from './compose-screen-header';
 export { ComposeTextArea, ComposeMediaPreviewFrame } from './compose-text-area';
+export {
+  ComposePillActionButton,
+  ComposePillIconButton,
+  ComposePillInput,
+  ComposePillReplyBar,
+  ComposePillTextField,
+  COMPOSE_PILL_ACTION_BUTTON_SIZE,
+  countComposePillLines,
+  pillHeightForLineCount,
+  useComposePillLineLayout,
+  type ComposePillInputProps,
+  type ComposePillLineLayout,
+  type ComposePillLineLayoutState,
+  type ComposePillReplyPreview,
+  type ComposePillTextFieldProps,
+  type ComposePillVariant,
+} from './compose-pill-input';
 export { ComposeToolbar, ComposeToolbarIcon, COMPOSE_TOOLBAR_ICON_SIZE } from './compose-toolbar';
 export { ComposeReplyAudienceSheet, type ComposeReplyAudienceOption, type ComposeReplyAudienceValue } from './compose-reply-audience-sheet';
 export { ComposeVisibilityRow } from './compose-visibility-row';
 export { DateField } from './DateField';
+export { HintText } from './HintText';
 export { FloatingCreateMenu, type FloatingCreateMenuAction } from './floating-create-menu';
 export { InfoBanner } from './InfoBanner';
+export { Label } from './Label';
+export { ListItem } from './ListItem';
+export { ProgressBar } from './ProgressBar';
+export { SectionHeader } from './SectionHeader';
+export { SelectRow, MultiSelectRow } from './SelectRow';
+export { StatRow } from './StatRow';
+export { ToggleRow } from './ToggleRow';
 export { PasswordField, TextField } from './TextField';
 export {
   StoryCollageGlyph,

package/src/renderer/ui/primitives.ts

@@ -0,0 +1,16 @@
+/** Barrel leve — só primitivos de formulário/lista (sem glyphs/compose/story). */
+export { AppButton } from './AppButton';
+export { AppLoadingSpinner } from './AppLoadingSpinner';
+export { Card } from './Card';
+export { Chip } from './Chip';
+export { DateField } from './DateField';
+export { HintText } from './HintText';
+export { InfoBanner } from './InfoBanner';
+export { Label } from './Label';
+export { ListItem } from './ListItem';
+export { ProgressBar } from './ProgressBar';
+export { SectionHeader } from './SectionHeader';
+export { SelectRow, MultiSelectRow } from './SelectRow';
+export { StatRow } from './StatRow';
+export { TextField, PasswordField } from './TextField';
+export { ToggleRow } from './ToggleRow';