@proulr/sdui-components 0.1.6 → 0.1.8

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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"

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/floating-create-menu.tsx

@@ -50,10 +50,10 @@ export function FloatingCreateMenu({
           pressed && { opacity: 0.9 },
         ]}
       >
-        <Text style={[styles.mainFabGlyph, open && styles.mainFabGlyphOpen]}>{open ? '\u2715' : '+'}</Text>
+        <Text style={[styles.mainFabGlyph]}>{open ? '\u2715' : '\u002B'}</Text>
       </Pressable>
 
-      <Modal visible={open} transparent animationType="fade" onRequestClose={close}>
+      <Modal visible={open} animationType="fade" onRequestClose={close}>
         <View style={styles.overlay}>
           <Pressable style={styles.backdrop} onPress={close} accessibilityLabel="Fechar menu" />
 
@@ -115,18 +115,12 @@ const styles = StyleSheet.create({
     color: m3Colors.onSecondary,
     fontSize: 30,
     fontFamily: fonts.bold,
-    marginTop: -2,
-  },
-  mainFabGlyphOpen: {
-    color: m3Colors.onSurface,
-    fontSize: 22,
   },
   overlay: {
     flex: 1,
   },
   backdrop: {
     ...StyleSheet.absoluteFill,
-    backgroundColor: m3Colors.scrim,
   },
   stack: {
     position: 'absolute',

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,
@@ -92,8 +94,16 @@ export { ComposeToolbar, ComposeToolbarIcon, COMPOSE_TOOLBAR_ICON_SIZE } from '.
 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';