@controleonline/ui-common 1.2.70

package/src/react/components/CategoryForm.styles.js

@@ -0,0 +1,334 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  form: {
+    paddingBottom: 8,
+  },
+  field: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#94A3B8',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 8,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 14,
+    paddingVertical: 13,
+    borderRadius: 10,
+    fontSize: 15,
+    color: '#0F172A',
+  },
+  colorButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    borderRadius: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 13,
+    gap: 10,
+  },
+  colorSwatch: {
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.12)',
+  },
+  colorButtonText: {
+    flex: 1,
+    fontSize: 15,
+    color: '#0F172A',
+    fontFamily: 'monospace',
+  },
+  colorGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    padding: 16,
+    gap: 10,
+    justifyContent: 'center',
+  },
+  colorCell: {
+    padding: 2,
+  },
+  colorCircle: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.08)',
+  },
+  colorCircleWhite: {
+    borderColor: '#E2E8F0',
+    borderWidth: 2,
+  },
+  colorCircleSelected: {
+    borderWidth: 3,
+    borderColor: '#3B82F6',
+  },
+  hexInputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 24,
+    borderTopWidth: 1,
+    borderTopColor: '#F1F5F9',
+  },
+  hexInput: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    color: '#0F172A',
+    fontFamily: 'monospace',
+  },
+  hexApplyBtn: {
+    backgroundColor: '#3B82F6',
+    borderRadius: 10,
+    paddingHorizontal: 18,
+    paddingVertical: 11,
+  },
+  hexApplyText: {
+    color: '#fff',
+    fontWeight: '700',
+    fontSize: 15,
+  },
+  iconButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    borderRadius: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 13,
+    gap: 10,
+  },
+  iconButtonText: {
+    flex: 1,
+    fontSize: 15,
+    color: '#0F172A',
+  },
+  emptyPickerText: {
+    color: '#CBD5E1',
+  },
+  iconSearchWrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 16,
+    marginBottom: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: '#F8FAFC',
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+  },
+  searchIcon: {
+    marginRight: 8,
+  },
+  iconSearchInput: {
+    flex: 1,
+    fontSize: 15,
+    color: '#0F172A',
+    padding: 0,
+  },
+  iconNoneRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9',
+    marginBottom: 4,
+  },
+  iconNoneCircle: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: '#F1F5F9',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  iconNoneText: {
+    flex: 1,
+    fontSize: 14,
+    color: '#64748B',
+  },
+  iconGrid: {
+    paddingHorizontal: 12,
+    paddingBottom: 24,
+  },
+  iconList: {
+    maxHeight: 340,
+  },
+  iconCell: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 12,
+    marginHorizontal: 2,
+    borderRadius: 10,
+    backgroundColor: '#F8FAFC',
+    marginBottom: 6,
+  },
+  iconCellSelected: {
+    backgroundColor: '#EFF6FF',
+    borderWidth: 1,
+    borderColor: '#BFDBFE',
+  },
+  iconCellLabel: {
+    fontSize: 9,
+    color: '#64748B',
+    marginTop: 4,
+    textAlign: 'center',
+  },
+  iconCellLabelSelected: {
+    color: '#3B82F6',
+  },
+  parentColorDot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.1)',
+  },
+  parentSearchList: {
+    maxHeight: 380,
+  },
+  parentRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F8FAFC',
+  },
+  parentLeadingIcon: {
+    marginRight: 10,
+  },
+  parentColorDotSpacing: {
+    marginRight: 10,
+  },
+  parentIconSpacing: {
+    marginRight: 6,
+  },
+  parentRowText: {
+    flex: 1,
+    fontSize: 15,
+    color: '#0F172A',
+  },
+  parentRowTextMuted: {
+    color: '#94A3B8',
+  },
+  parentRowTextSelected: {
+    color: '#3B82F6',
+    fontWeight: '700',
+  },
+  parentSelectedIcon: {
+    marginLeft: 'auto',
+  },
+  parentEmpty: {
+    paddingVertical: 32,
+    alignItems: 'center',
+  },
+  parentEmptyText: {
+    fontSize: 14,
+    color: '#94A3B8',
+  },
+  channelWrap: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  channelChip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 20,
+    borderWidth: 1.5,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+  },
+  channelChipActive: {
+    backgroundColor: '#0F172A',
+    borderColor: '#0F172A',
+  },
+  channelChipText: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#475569',
+  },
+  channelChipTextActive: {
+    color: '#fff',
+  },
+  channelIcon: {
+    marginRight: 5,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+  modalSheet: {
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    maxHeight: '80%',
+    paddingBottom: 0,
+  },
+  modalHandle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#E2E8F0',
+    alignSelf: 'center',
+    marginTop: 10,
+    marginBottom: 4,
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9',
+  },
+  modalTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#0F172A',
+  },
+  modalClose: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: '#F8FAFC',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default styles;
+
+export const inlineStyle_240_75 = {
+  marginRight: 8,
+};
+

package/src/react/components/ConfirmModal.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Modal, View, Text, TouchableOpacity } from 'react-native';
+import styles from './ConfirmModal.styles';
+
+export const ConfirmModal = ({ visible, title, message, onConfirm, onCancel }) => {
+  return (
+    <Modal visible={visible} transparent animationType="fade">
+      <View style={styles.overlay}>
+        <View style={styles.card}>
+          <Text style={styles.title}>{title}</Text>
+          <Text style={styles.message}>{message}</Text>
+          <View style={styles.actions}>
+            <TouchableOpacity onPress={onCancel} style={styles.cancelButton}>
+              <Text>{global.t?.t('confirmModal', 'button', 'cancel')}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity onPress={onConfirm} style={styles.confirmButton}>
+              <Text style={styles.confirmButtonText}>{global.t?.t('confirmModal', 'button', 'confirm')}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};

package/src/react/components/ConfirmModal.styles.js

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  card: {
+    backgroundColor: '#fff',
+    padding: 20,
+    borderRadius: 10,
+    width: '80%',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 10,
+  },
+  message: {
+    fontSize: 14,
+    marginBottom: 20,
+  },
+  actions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 10,
+  },
+  cancelButton: {
+    padding: 10,
+  },
+  confirmButton: {
+    padding: 10,
+    backgroundColor: '#007AFF',
+    borderRadius: 5,
+  },
+  confirmButtonText: {
+    color: '#fff',
+  },
+});
+
+export default styles;

package/src/react/components/ContextHelpButton.js

@@ -0,0 +1,69 @@
+import React, {useMemo, useState} from 'react';
+import {Modal, Text, TouchableOpacity, View} from 'react-native';
+import {MaterialCommunityIcons} from '@expo/vector-icons';
+import styles from './ContextHelpButton.styles';
+
+const normalizeLines = value => {
+  if (Array.isArray(value)) {
+    return value.map(item => String(item ?? '').trim()).filter(Boolean);
+  }
+
+  return String(value ?? '')
+    .split(/\n+/)
+    .map(line => line.trim())
+    .filter(Boolean);
+};
+
+const ContextHelpButton = ({
+  title = '',
+  message = '',
+  iconName = 'help-circle-outline',
+  iconColor = '#0EA5E9',
+  iconSize = 16,
+  accessibilityLabel = '',
+}) => {
+  const [visible, setVisible] = useState(false);
+  const lines = useMemo(() => normalizeLines(message), [message]);
+  const label = String(title || accessibilityLabel || 'Ajuda').trim();
+
+  return (
+    <>
+      <TouchableOpacity
+        onPress={() => setVisible(true)}
+        style={styles.trigger}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+      >
+        <MaterialCommunityIcons name={iconName} size={iconSize} color={iconColor} />
+      </TouchableOpacity>
+
+      <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
+        <View style={styles.overlay}>
+          <View style={styles.card}>
+            <View style={styles.header}>
+              <Text style={styles.title}>{label}</Text>
+              <TouchableOpacity
+                onPress={() => setVisible(false)}
+                style={styles.closeButton}
+                accessibilityRole="button"
+                accessibilityLabel="Fechar"
+              >
+                <MaterialCommunityIcons name="close" size={16} color="#0F172A" />
+              </TouchableOpacity>
+            </View>
+
+            <View style={styles.body}>
+              {lines.map((line, index) => (
+                <Text key={`${label}-${index}-${line}`} style={styles.message}>
+                  {line}
+                </Text>
+              ))}
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+};
+
+export default ContextHelpButton;

package/src/react/components/ContextHelpButton.styles.js

@@ -0,0 +1,62 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  trigger: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    borderWidth: 1,
+    borderColor: '#0EA5E9',
+    backgroundColor: '#EFF8FF',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(15, 23, 42, 0.45)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 360,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: '#BFDBFE',
+    backgroundColor: '#FFFFFF',
+    padding: 14,
+    gap: 12,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  title: {
+    flex: 1,
+    color: '#0F172A',
+    fontSize: 14,
+    fontWeight: '900',
+  },
+  closeButton: {
+    width: 26,
+    height: 26,
+    borderRadius: 13,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#F8FAFC',
+  },
+  body: {
+    gap: 8,
+  },
+  message: {
+    color: '#334155',
+    fontSize: 12,
+    fontWeight: '700',
+    lineHeight: 16,
+  },
+})
+
+export default styles