@controleonline/ui-default 1.0.266 → 1.0.267

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-default",
-  "version": "1.0.266",
+  "version": "1.0.267",
   "author": "ControleOnline",
   "description": "ControleOnline Default Quasar UI Component",
   "license": "MIT",

package/src/react/components/inputs/DefaultInput.js

@@ -1,19 +1,21 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
-import {
+import {
+  buildReadPresentationStyles,
   getColumnKey,
   isDateLikeColumn,
   isEditableColumn,
-  normalizeText,
-  resolveCellText,
-  resolveEditValue,
+  normalizeText,
+  resolveCellPresentation,
+  resolveCellText,
+  resolveEditValue,
 } from './defaultInputUtils';
 import DefaultDateInput from './DefaultDateInput';
 import DefaultSelect from './DefaultSelect';
-import styles from './DefaultInput.styles';
-
-const DefaultInput = ({
+import styles from './DefaultInput.styles';
+
+const DefaultInput = ({
   accentColor = '#2563EB',
   autoFocus = true,
   autoSave = true,
@@ -48,8 +50,19 @@ const DefaultInput = ({
     [column, row, value],
   );
   const [draftValue, setDraftValue] = useState(editValue);
-  const resolvedLabel =
-    displayValue ?? resolveCellText({ column, columns, row, storeName, value });
+  const resolvedLabel =
+    displayValue ?? resolveCellText({ column, columns, row, storeName, value });
+  const readPresentation = useMemo(
+    () => resolveCellPresentation({ column, columns, row, storeName, value }),
+    [column, columns, row, storeName, value],
+  );
+  const readPresentationStyles = useMemo(
+    () => buildReadPresentationStyles({
+      ...readPresentation,
+      label: resolvedLabel,
+    }),
+    [readPresentation, resolvedLabel],
+  );
 
   useEffect(() => {
     setDraftValue(editValue);
@@ -128,31 +141,56 @@ const DefaultInput = ({
     if (!autoSave) onChangeValue?.(nextValue);
   };
 
-  if (!editing && !isForm) {
-    return (
-      <View style={[styles.wrap, containerStyle]}>
-        {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
-        <TouchableOpacity
+  if (!editing && !isForm) {
+    return (
+      <View style={[styles.wrap, containerStyle]}>
+        {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+        <TouchableOpacity
           style={styles.readButton}
           activeOpacity={canEdit ? 0.78 : 1}
-          disabled={!canEdit}
-          onPress={() => onStartEditing?.()}
-        >
-          <Text
-            style={[
-              styles.readText,
-              resolvedLabel === '-' ? styles.mutedText : null,
-              readTextStyle,
-            ]}
-            numberOfLines={numberOfLines}
-          >
-            {column?.prefix || ''}
-            {resolvedLabel || '-'}
-            {column?.sufix || column?.suffix || ''}
-          </Text>
-          {saving ? (
-            <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
-          ) : canEdit ? (
+          disabled={!canEdit}
+          onPress={() => onStartEditing?.()}
+        >
+          <View
+            style={[
+              styles.readValueWrap,
+              readPresentationStyles.hasDecoration ? styles.readBadge : null,
+              readPresentationStyles.badgeStyle,
+            ]}
+          >
+            {readPresentation.image ? (
+              <Image
+                source={readPresentation.image}
+                style={styles.readImage}
+                resizeMode="contain"
+              />
+            ) : null}
+            {readPresentationStyles.hasDecoration && readPresentation.icon && readPresentationStyles.color ? (
+              <Icon
+                style={styles.readBadgeIcon}
+                name={readPresentation.icon}
+                size={12}
+                color={readPresentationStyles.color}
+              />
+            ) : null}
+            <Text
+              style={[
+                styles.readText,
+                readPresentationStyles.hasDecoration ? styles.readBadgeText : null,
+                resolvedLabel === '-' ? styles.mutedText : null,
+                readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
+                readTextStyle,
+              ]}
+              numberOfLines={numberOfLines}
+            >
+              {column?.prefix || ''}
+              {resolvedLabel || '-'}
+              {column?.sufix || column?.suffix || ''}
+            </Text>
+          </View>
+          {saving ? (
+            <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
+          ) : canEdit ? (
             <Icon style={styles.editIcon} name="edit-2" size={13} color="#64748B" />
           ) : null}
         </TouchableOpacity>

package/src/react/components/inputs/DefaultInput.styles.js

@@ -13,6 +13,38 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 6,
   },
+  readValueWrap: {
+    flex: 1,
+    minWidth: 0,
+    maxWidth: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+  },
+  readBadge: {
+    flex: 0,
+    alignSelf: 'flex-start',
+    minHeight: 22,
+    maxWidth: '100%',
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingHorizontal: 7,
+    paddingVertical: 2,
+  },
+  readBadgeText: {
+    flex: 0,
+    flexShrink: 1,
+    fontSize: 11,
+    fontWeight: '800',
+  },
+  readBadgeIcon: {
+    flexShrink: 0,
+  },
+  readImage: {
+    width: 16,
+    height: 16,
+    flexShrink: 0,
+  },
   readButtonForm: {
     minHeight: 34,
     borderWidth: 1,
@@ -25,8 +57,8 @@ const styles = StyleSheet.create({
     flex: 1,
     minWidth: 0,
     color: '#0F172A',
-    fontSize: 12,
-    fontWeight: '700',
+    fontSize: 13,
+    fontWeight: '600',
   },
   mutedText: {
     color: '#94A3B8',
@@ -62,8 +94,8 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     paddingHorizontal: 8,
     color: '#0F172A',
-    fontSize: 12,
-    fontWeight: '700',
+    fontSize: 13,
+    fontWeight: '600',
     backgroundColor: '#FFFFFF',
   },
   formInput: {

package/src/react/components/inputs/DefaultSelect.js

@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
-  Modal,
-  ScrollView,
+  Modal,
+  Image,
+  ScrollView,
   Text,
   TextInput,
   TouchableOpacity,
@@ -10,12 +11,14 @@ import {
 import Icon from 'react-native-vector-icons/Feather';
 import { getAllStores, useStore } from '@store';
 import {
+  buildReadPresentationStyles,
   buildOptionsFromColumn,
   getColumnKey,
   isEditableColumn,
   mapOptions,
   normalizeOptionKey,
   normalizeText,
+  resolveCellPresentation,
   resolveCellText,
   resolveEditValue,
   resolveStoreNameFromList,
@@ -140,11 +143,22 @@ const DefaultSelect = ({
     ];
   }, [column, getOptionsForColumn, loadedItems, storeName]);
   const selected = options.find(option => option.key === selectedKey);
-  const resolvedLabel =
-    displayValue ??
-    selected?.label ??
-    resolveCellText({ column, columns, row, storeName, value });
-  const canEdit = isEditableColumn(column) && typeof onStartEditing === 'function';
+  const resolvedLabel =
+    displayValue ??
+    selected?.label ??
+    resolveCellText({ column, columns, row, storeName, value });
+  const readPresentation = useMemo(
+    () => resolveCellPresentation({ column, columns, row, storeName, value }),
+    [column, columns, row, storeName, value],
+  );
+  const readPresentationStyles = useMemo(
+    () => buildReadPresentationStyles({
+      ...readPresentation,
+      label: resolvedLabel,
+    }),
+    [readPresentation, resolvedLabel],
+  );
+  const canEdit = isEditableColumn(column) && typeof onStartEditing === 'function';
   const isForm = variant === 'form';
   const filteredOptions = useMemo(() => {
     const query = normalizeText(searchText).toLowerCase();
@@ -281,20 +295,45 @@ const DefaultSelect = ({
         activeOpacity={canEdit || isForm ? 0.78 : 1}
         disabled={!canEdit && !isForm}
         onPress={open}
-      >
-        <Text
-          style={[
-            inputStyles.readText,
-            resolvedLabel === '-' ? inputStyles.mutedText : null,
-            readTextStyle,
-          ]}
-          numberOfLines={numberOfLines}
-        >
-          {resolvedLabel || '-'}
-        </Text>
-        {saving ? (
-          <Text style={[inputStyles.savingText, { color: accentColor }]}>Salvando</Text>
-        ) : canEdit || isForm ? (
+      >
+        <View
+          style={[
+            inputStyles.readValueWrap,
+            readPresentationStyles.hasDecoration ? inputStyles.readBadge : null,
+            readPresentationStyles.badgeStyle,
+          ]}
+        >
+          {readPresentation.image ? (
+            <Image
+              source={readPresentation.image}
+              style={inputStyles.readImage}
+              resizeMode="contain"
+            />
+          ) : null}
+          {readPresentationStyles.hasDecoration && readPresentation.icon && readPresentationStyles.color ? (
+            <Icon
+              style={inputStyles.readBadgeIcon}
+              name={readPresentation.icon}
+              size={12}
+              color={readPresentationStyles.color}
+            />
+          ) : null}
+          <Text
+            style={[
+              inputStyles.readText,
+              readPresentationStyles.hasDecoration ? inputStyles.readBadgeText : null,
+              resolvedLabel === '-' ? inputStyles.mutedText : null,
+              readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
+              readTextStyle,
+            ]}
+            numberOfLines={numberOfLines}
+          >
+            {resolvedLabel || '-'}
+          </Text>
+        </View>
+        {saving ? (
+          <Text style={[inputStyles.savingText, { color: accentColor }]}>Salvando</Text>
+        ) : canEdit || isForm ? (
           <Icon style={inputStyles.editIcon} name="chevron-down" size={14} color="#64748B" />
         ) : null}
       </TouchableOpacity>
@@ -322,24 +361,33 @@ const DefaultSelect = ({
 
             <ScrollView keyboardShouldPersistTaps="handled">
               {filteredOptions.length > 0 ? (
-                filteredOptions.map(option => {
-                  const isSelected = option.key === selectedKey;
-                  return (
-                    <TouchableOpacity
-                      key={`${option.key}_${option.label}`}
+                filteredOptions.map(option => {
+                  const isSelected = option.key === selectedKey;
+                  return (
+                    <TouchableOpacity
+                      key={`${option.key}_${option.label}`}
                       style={styles.optionRow}
                       activeOpacity={0.78}
                       onPress={() => selectOption(option)}
                     >
-                      <Icon
-                        name={isSelected ? 'check-circle' : 'circle'}
-                        size={15}
-                        color={isSelected ? accentColor : '#CBD5E1'}
-                      />
-                      <Text style={styles.optionText}>
-                        {option.label}
-                      </Text>
-                    </TouchableOpacity>
+                      {option.image ? (
+                        <Image
+                          source={option.image}
+                          style={inputStyles.readImage}
+                          resizeMode="contain"
+                        />
+                      ) : null}
+                      {isSelected || (option.icon && option.color) ? (
+                        <Icon
+                          name={isSelected ? 'check-circle' : option.icon}
+                          size={15}
+                          color={isSelected ? accentColor : option.color}
+                        />
+                      ) : null}
+                      <Text style={[styles.optionText, option.color ? { color: option.color } : null]}>
+                        {option.label}
+                      </Text>
+                    </TouchableOpacity>
                   );
                 })
               ) : (

package/src/react/components/inputs/defaultInputUtils.js

@@ -128,7 +128,7 @@ export const resolveOptionLabel = (column, option, storeName = '') => {
 export const resolveStoreNameFromList = list =>
   typeof list === 'string' ? normalizeText(list).split('/')[0] || '' : '';
 
-const filterItemsByListRequestParams = (items = [], column = null) => {
+const filterItemsByListRequestParams = (items = [], column = null) => {
   const requestParams =
     column?.listRequestParams &&
     typeof column.listRequestParams === 'object' &&
@@ -148,14 +148,17 @@ const filterItemsByListRequestParams = (items = [], column = null) => {
 
       return normalizeText(item?.[key]) === normalizeText(expectedValue);
     }),
-  );
-};
-
-export const mapOptions = (column, items = [], storeName = '') => {
-  const seenKeys = new Set();
-  const options = [];
-
-  (Array.isArray(items) ? items : []).forEach(item => {
+  );
+};
+
+const normalizeObject = value =>
+  value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+
+export const mapOptions = (column, items = [], storeName = '') => {
+  const seenKeys = new Set();
+  const options = [];
+
+  (Array.isArray(items) ? items : []).forEach(item => {
     const formatted =
       typeof column?.formatList === 'function'
         ? column.formatList(item, null, column)
@@ -166,12 +169,31 @@ export const mapOptions = (column, items = [], storeName = '') => {
     if (dedupeKey && seenKeys.has(dedupeKey)) return;
     if (dedupeKey) seenKeys.add(dedupeKey);
 
-    options.push({
-      key,
-      label: resolveOptionLabel(column, item, storeName) || '-',
-      raw: item,
-    });
-  });
+    const formattedMeta = normalizeObject(formatted);
+    const itemMeta = normalizeObject(item);
+    const color = formattedMeta.color ?? itemMeta.color;
+    const icon =
+      formattedMeta.icon ??
+      formattedMeta.iconName ??
+      itemMeta.icon ??
+      itemMeta.iconName;
+    const image =
+      formattedMeta.image ??
+      formattedMeta.logo ??
+      formattedMeta.source ??
+      itemMeta.image ??
+      itemMeta.logo ??
+      itemMeta.source;
+
+    options.push({
+      ...(color ? { color } : {}),
+      ...(icon ? { icon } : {}),
+      ...(image ? { image } : {}),
+      key,
+      label: resolveOptionLabel(column, item, storeName) || '-',
+      raw: item,
+    });
+  });
 
   return options;
 };
@@ -197,23 +219,148 @@ export const buildOptionsFromColumn = (column, getOptionsForColumn = null, store
   );
 };
 
-export const resolveCellText = ({ column, columns = [], row, storeName, value }) => {
-  const fieldName = getColumnKey(column);
-  const rawValue = value ?? row?.[fieldName];
-  const formattedValue = formatStoreColumnValue({
+export const resolveCellText = ({ column, columns = [], row, storeName, value }) => {
+  const fieldName = getColumnKey(column);
+  const rawValue = value ?? row?.[fieldName];
+  const formattedValue = formatStoreColumnValue({
     columns: columns.length ? columns : [column],
     fieldName,
     row,
     storeName,
     value: rawValue,
   });
-
-  return normalizeText(formattedValue) || '-';
-};
-
-export const resolveEditValue = (column, row, value) => {
-  const rawValue = value ?? row?.[getColumnKey(column)];
-  if (column?.list) {
+
+  return normalizeText(formattedValue) || '-';
+};
+
+const resolveFormattedListMeta = (column, rawValue, row) => {
+  if (typeof column?.formatList !== 'function') {
+    return {};
+  }
+
+  const formatted = column.formatList(rawValue, row, column);
+  return normalizeObject(formatted);
+};
+
+const resolveStyleMeta = (column, row) => {
+  if (typeof column?.style !== 'function') {
+    return normalizeObject(column?.style);
+  }
+
+  return normalizeObject(column.style(row));
+};
+
+export const resolveCellPresentation = ({
+  column,
+  columns = [],
+  row = {},
+  storeName = '',
+  value,
+} = {}) => {
+  const fieldName = getColumnKey(column);
+  const rawValue = value ?? row?.[fieldName];
+  const rawMeta = normalizeObject(rawValue);
+  const formattedMeta = resolveFormattedListMeta(column, rawValue, row);
+  const styleMeta = resolveStyleMeta(column, row);
+  const label = resolveCellText({
+    column,
+    columns,
+    row,
+    storeName,
+    value,
+  });
+
+  return {
+    backgroundColor:
+      formattedMeta.backgroundColor ??
+      formattedMeta.bgColor ??
+      rawMeta.backgroundColor ??
+      rawMeta.bgColor ??
+      styleMeta.backgroundColor ??
+      styleMeta.bgColor,
+    borderColor:
+      formattedMeta.borderColor ??
+      rawMeta.borderColor ??
+      styleMeta.borderColor,
+    color:
+      formattedMeta.color ??
+      rawMeta.color ??
+      rawMeta.statusColor ??
+      rawMeta.categoryColor ??
+      styleMeta.color,
+    icon:
+      formattedMeta.icon ??
+      formattedMeta.iconName ??
+      rawMeta.icon ??
+      rawMeta.iconName ??
+      styleMeta.icon ??
+      styleMeta.iconName,
+    image:
+      formattedMeta.image ??
+      formattedMeta.logo ??
+      formattedMeta.source ??
+      rawMeta.image ??
+      rawMeta.logo ??
+      rawMeta.source ??
+      styleMeta.image ??
+      styleMeta.logo ??
+      styleMeta.source,
+    label,
+  };
+};
+
+const resolveAlphaColor = (color, opacity = 0.12) => {
+  const normalized = normalizeText(color);
+  const hex = normalized.match(/^#?([a-f\d]{6})$/i)?.[1];
+
+  if (!hex) return normalized || undefined;
+
+  const red = parseInt(hex.slice(0, 2), 16);
+  const green = parseInt(hex.slice(2, 4), 16);
+  const blue = parseInt(hex.slice(4, 6), 16);
+
+  return `rgba(${red}, ${green}, ${blue}, ${opacity})`;
+};
+
+export const buildReadPresentationStyles = presentation => {
+  const color = normalizeText(presentation?.color);
+  const icon = normalizeText(presentation?.icon);
+  const hasDecoration = Boolean(
+    color ||
+    normalizeText(presentation?.backgroundColor) ||
+    normalizeText(presentation?.borderColor) ||
+    (icon && color),
+  );
+
+  if (!hasDecoration || presentation?.label === '-') {
+    return {
+      badgeStyle: null,
+      color: null,
+      hasDecoration: false,
+    };
+  }
+
+  const backgroundColor =
+    presentation.backgroundColor ||
+    (color ? resolveAlphaColor(color, 0.1) : undefined);
+  const borderColor =
+    presentation.borderColor ||
+    presentation.backgroundColor ||
+    (color ? resolveAlphaColor(color, 0.32) : undefined);
+
+  return {
+    badgeStyle: {
+      backgroundColor,
+      borderColor,
+    },
+    color: color || undefined,
+    hasDecoration: true,
+  };
+};
+
+export const resolveEditValue = (column, row, value) => {
+  const rawValue = value ?? row?.[getColumnKey(column)];
+  if (column?.list) {
     return normalizeOptionKey(
       typeof column?.formatList === 'function'
         ? column.formatList(rawValue, row, column)

package/src/react/components/table/DefaultTable.js

@@ -96,10 +96,11 @@ const DefaultTable = ({
   const isFocused = useIsFocused();
   const configsSignatureRef = useRef('');
   const { showError } = useMessage() || {};
-  const { themeColors } = useDefaultTableTheme(accentColor);
+  const { tableBorderColors, themeColors } = useDefaultTableTheme(accentColor);
+  const tablePanelBorderColor = tableBorderColors.containerBorderColor;
   const floatingAddBackgroundColor =
-    themeColors.buttonBackground || themeColors.primary || accentColor || '#2563EB';
-  const floatingAddIconColor = themeColors.buttonText || '#FFFFFF';
+    themeColors.buttonBackground || themeColors.primary || accentColor;
+  const floatingAddIconColor = themeColors.buttonText;
   const tablePreferenceScope = useMemo(
     () =>
       resolveDefaultTablePreferenceScope({
@@ -400,7 +401,8 @@ const DefaultTable = ({
       style={[
         styles.wrap,
         {
-          borderColor: themeColors.panelBorder,
+          borderWidth: tablePanelBorderColor ? 1 : 0,
+          borderColor: tablePanelBorderColor,
           backgroundColor: themeColors.panelBackground,
         },
       ]}

package/src/react/components/table/DefaultTable.styles.js

@@ -16,15 +16,14 @@ const styles = StyleSheet.create({
     flex: 1,
     width: '100%',
     minHeight: 0,
-    borderWidth: 1,
-    borderRadius: 10,
-    overflow: 'visible',
+    borderRadius: 8,
+    overflow: 'hidden',
     position: 'relative',
   },
   toolbar: {
-    minHeight: 36,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
+    minHeight: 52,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
     borderBottomWidth: 1,
     flexDirection: 'row',
     flexWrap: 'nowrap',
@@ -51,7 +50,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'nowrap',
     alignItems: 'center',
-    gap: 6,
+    gap: 8,
     flexShrink: 0,
     marginLeft: 'auto',
   },
@@ -76,8 +75,8 @@ const styles = StyleSheet.create({
     marginLeft: 0,
   },
   toolbarSearch: {
-    width: 190,
-    maxWidth: 220,
+    width: 260,
+    maxWidth: 360,
     flexShrink: 1,
   },
   toolbarSearchButton: {
@@ -111,10 +110,10 @@ const styles = StyleSheet.create({
     fontWeight: '900',
   },
   toolbarButton: {
-    minWidth: 28,
-    height: 28,
-    borderRadius: 14,
-    paddingHorizontal: 7,
+    minWidth: 36,
+    height: 36,
+    borderRadius: 8,
+    paddingHorizontal: 10,
     borderWidth: 1,
     flexDirection: 'row',
     alignItems: 'center',
@@ -124,8 +123,8 @@ const styles = StyleSheet.create({
   toolbarButtonActive: {
   },
   toolbarAddButton: {
-    minWidth: 30,
-    width: 30,
+    minWidth: 36,
+    width: 36,
     paddingHorizontal: 0,
   },
   floatingAddButton: {
@@ -283,8 +282,8 @@ const styles = StyleSheet.create({
     minWidth: '100%',
     minHeight: 0,
   },
-  headerRow: {
-    minHeight: 34,
+  headerRow: {
+    minHeight: 40,
     width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
@@ -292,8 +291,8 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: '#E2E8F0',
   },
-  filterRow: {
-    minHeight: 40,
+  filterRow: {
+    minHeight: 46,
     width: '100%',
     flexDirection: 'row',
     alignItems: 'stretch',
@@ -301,25 +300,24 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: '#E2E8F0',
   },
-  row: {
-    minHeight: 44,
+  row: {
+    minHeight: 48,
     width: '100%',
     flexDirection: 'row',
     alignItems: 'stretch',
     borderBottomWidth: 1,
     borderBottomColor: '#EEF2F7',
   },
-  cell: {
-    minWidth: 118,
-    flexBasis: 118,
+  cell: {
+    minWidth: 118,
+    flexBasis: 118,
     flexGrow: 1,
     flexShrink: 0,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    justifyContent: 'center',
-    borderRightWidth: 1,
-    borderRightColor: '#EEF2F7',
-  },
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    justifyContent: 'center',
+    borderRightWidth: 0,
+  },
   identityCell: {
     minWidth: 76,
     flexBasis: 76,
@@ -377,13 +375,12 @@ const styles = StyleSheet.create({
     flexBasis: 132,
     flexGrow: 0.9,
   },
-  headerText: {
-    color: '#64748B',
-    fontSize: 10,
-    fontWeight: '900',
-    letterSpacing: 0.35,
-    textTransform: 'uppercase',
-  },
+  headerText: {
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 0,
+    textTransform: 'uppercase',
+  },
   sortableHeader: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -404,11 +401,10 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: '700',
   },
-  cellText: {
-    color: '#0F172A',
-    fontSize: 12,
-    fontWeight: '700',
-  },
+  cellText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
   mutedCellText: {
     color: '#94A3B8',
   },
@@ -491,23 +487,30 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     width: '100%',
   },
-  cardItem: {
-    position: 'relative',
-  },
+  cardItem: {
+    position: 'relative',
+  },
+  cardItemWithActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  cardContent: {
+    flex: 1,
+    minWidth: 0,
+  },
   cardActions: {
-    position: 'absolute',
-    right: 10,
-    bottom: 10,
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'flex-end',
     gap: 6,
+    flexShrink: 0,
   },
   cardActionGroup: {
-    position: 'absolute',
-    right: 8,
-    top: 8,
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'flex-end',
+    alignSelf: 'flex-end',
     gap: 6,
   },
   defaultCard: {

package/src/react/components/table/DefaultTableCards.js

@@ -81,15 +81,24 @@ const DefaultTableCards = ({ storeName }) => {
 
     if (typeof configs.renderCard === 'function') {
       return (
-        <View key={row?.['@id'] || row?.id} style={[styles.cardItem, rowStyleValue]}>
-          {configs.renderCard({
-            item: row,
-            openEdit: () => configs.onEditRow?.(row),
-            openRow: hasRowPress ? () => configs.onRowPress(row) : null,
-            renderField,
-            renderValue,
-            row,
-          })}
+        <View
+          key={row?.['@id'] || row?.id}
+          style={[
+            styles.cardItem,
+            hasRowActions ? styles.cardItemWithActions : null,
+            rowStyleValue,
+          ]}
+        >
+          <View style={styles.cardContent}>
+            {configs.renderCard({
+              item: row,
+              openEdit: () => configs.onEditRow?.(row),
+              openRow: hasRowPress ? () => configs.onRowPress(row) : null,
+              renderField,
+              renderValue,
+              row,
+            })}
+          </View>
           {hasRowActions ? (
             <View style={styles.cardActions}>
               {customRowActions}

package/src/react/components/table/DefaultTableFooter.js

@@ -124,7 +124,16 @@ const DefaultTableFooter = ({ storeName }) => {
   }
 
   return (
-    <View style={[styles.footerBar, { backgroundColor: tableFooterBackgroundColor, borderTopColor: tableFooterBorderColor }]}>
+    <View
+      style={[
+        styles.footerBar,
+        {
+          backgroundColor: tableFooterBackgroundColor,
+          borderTopColor: tableFooterBorderColor,
+          borderTopWidth: tableFooterBorderColor ? 1 : 0,
+        },
+      ]}
+    >
       {summaryEntries.length > 0 ? (
         <View style={styles.footerSummaryList}>
           {summaryEntries.map(entry => (

package/src/react/components/table/DefaultTableRows.js

@@ -23,7 +23,7 @@ import useDefaultTableTheme from './useDefaultTableTheme';
 const DefaultTableRows = ({ storeName }) => {
   const store = useStore(storeName);
   const configs = store?.getters?.configs || {};
-  const { palette, resolvedAccentColor, themeTokens } = useDefaultTableTheme();
+  const { palette, resolvedAccentColor, tableBorderColors, themeTokens } = useDefaultTableTheme();
   const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
   const visibleColumns = store?.getters?.visibleColumns || {};
   const tableColumns = columns.filter(
@@ -38,7 +38,8 @@ const DefaultTableRows = ({ storeName }) => {
   const emptyStateLabel = isLoading
     ? global.t?.t(storeName, 'label', 'loading')
     : global.t?.t(storeName, 'label', 'empty');
-  const tableBorderColor = palette.border;
+  const tableBorderColor = tableBorderColors.rowBorderColor;
+  const tableHeaderBorderColor = tableBorderColors.headerBorderColor || tableBorderColor;
   const tableEvenColor = themeTokens.listItemEvenRow || themeTokens['bg-even-light'] || palette.background;
   const tableHeaderColor = themeTokens['bg-headers-light'] || resolvedAccentColor;
   const tableMutedColor = palette.textSecondary;
@@ -128,8 +129,12 @@ const DefaultTableRows = ({ storeName }) => {
       <RowComponent
         key={getRowKey(row)}
         style={[
-          styles.row,
-          { backgroundColor: rowBackgroundColor, borderBottomColor: tableBorderColor },
+          styles.row,
+          {
+            backgroundColor: rowBackgroundColor,
+            borderBottomColor: tableBorderColor,
+            borderBottomWidth: tableBorderColor ? 1 : 0,
+          },
           rowStyleValue,
         ]}
         {...rowPressProps}
@@ -209,7 +214,16 @@ const DefaultTableRows = ({ storeName }) => {
         contentContainerStyle={styles.horizontalScrollContent}
       >
         <View style={styles.content}>
-          <View style={[styles.headerRow, { backgroundColor: tableHeaderColor, borderBottomColor: tableBorderColor }]}>
+          <View
+            style={[
+              styles.headerRow,
+              {
+                backgroundColor: tableHeaderColor,
+                borderBottomColor: tableHeaderBorderColor,
+                borderBottomWidth: tableHeaderBorderColor ? 1 : 0,
+              },
+            ]}
+          >
             {tableColumns.map(column => {
               const fieldName = getColumnKey(column);
               const label = formatStoreColumnLabel({
@@ -267,7 +281,16 @@ const DefaultTableRows = ({ storeName }) => {
             ) : null}
           </View>
           {hasColumnFilters ? (
-            <View style={[styles.filterRow, { backgroundColor: tableHeaderColor, borderBottomColor: tableBorderColor }]}>
+            <View
+              style={[
+                styles.filterRow,
+                {
+                  backgroundColor: tableHeaderColor,
+                  borderBottomColor: tableHeaderBorderColor,
+                  borderBottomWidth: tableHeaderBorderColor ? 1 : 0,
+                },
+              ]}
+            >
               {tableColumns.map(column => {
                 const fieldName = getColumnKey(column);
 

package/src/react/components/table/DefaultTableToolbar.js

@@ -20,13 +20,15 @@ const DefaultTableToolbar = ({ storeName }) => {
   const showTotalItemsInCompactToolbar = configs.showTotalItemsInCompactToolbar === true;
   const showTotalItemsInFooter = configs.showTotalItemsInFooter !== false;
   const toolbarActions = Array.isArray(configs.toolbarActions) ? configs.toolbarActions : [];
-  const { toolbarColors } = useDefaultTableTheme();
+  const { tableBorderColors, toolbarColors } = useDefaultTableTheme();
   const {
     backgroundColor: toolbarBackgroundColor,
     borderColor: toolbarBorderColor,
     countBackgroundColor: toolbarCountBackgroundColor,
     countTextColor: toolbarCountTextColor,
   } = toolbarColors;
+  const resolvedToolbarBorderColor =
+    tableBorderColors.toolbarBorderColor || toolbarBorderColor;
   const storeTotalItems = store?.getters?.totalItems;
   const resolvedTotalItems = storeTotalItems;
   const totalItemsNumber = Number(resolvedTotalItems);
@@ -63,7 +65,11 @@ const DefaultTableToolbar = ({ storeName }) => {
       style={[
         styles.toolbar,
         shouldRenderCompactToolbarTotalItems ? styles.toolbarWithCompactTotal : null,
-        { borderBottomColor: toolbarBorderColor, backgroundColor: toolbarBackgroundColor },
+        {
+          borderBottomColor: resolvedToolbarBorderColor,
+          borderBottomWidth: resolvedToolbarBorderColor ? 1 : 0,
+          backgroundColor: toolbarBackgroundColor,
+        },
       ]}
     >
       {shouldRenderCompactToolbarTotalItems ? (

package/src/react/components/table/useDefaultTableTheme.js

@@ -1,20 +1,69 @@
-import { useMemo } from 'react';
-import { useStore } from '@store';
-
-const useDefaultTableTheme = (accentColor = null) => {
-  const themeStore = useStore('theme');
-  const themeColors = themeStore.getters.colors;
-  const themeTokens = useMemo(
-    () => ({ ...themeColors }),
-    [themeColors],
+import { useMemo } from 'react';
+import { useStore } from '@store';
+
+const firstThemeToken = (themeColors, keys) =>
+  keys.map(key => themeColors?.[key]).find(Boolean);
+
+const useDefaultTableTheme = (accentColor = null) => {
+  const themeStore = useStore('theme');
+  const rawThemeColors = themeStore?.getters?.colors || {};
+  const themeColors = useMemo(
+    () => ({ ...rawThemeColors }),
+    [rawThemeColors],
+  );
+  const themeTokens = useMemo(
+    () => ({ ...themeColors }),
+    [themeColors],
   );
-  const palette = themeColors;
-  const resolvedAccentColor = accentColor ?? themeColors.primary;
-
-  return {
-    palette,
-    resolvedAccentColor,
-    themeColors,
+  const palette = themeColors;
+  const resolvedAccentColor = accentColor ?? themeColors.primary;
+  const tableBorderColors = {
+    containerBorderColor: firstThemeToken(themeColors, [
+      'tableContainerBorder',
+      'tableBorder',
+      'tableHeaderBorder',
+      'tableToolbarBorder',
+      'cardBorder',
+      'listItemBorder',
+      'dividerBorder',
+      'dividerBackground',
+      'inputBorder',
+      'panelBorder',
+      'border',
+    ]),
+    headerBorderColor: firstThemeToken(themeColors, [
+      'tableHeaderBorder',
+      'tableToolbarBorder',
+      'tableBorder',
+      'dividerBorder',
+      'dividerBackground',
+      'listItemBorder',
+      'border',
+    ]),
+    rowBorderColor: firstThemeToken(themeColors, [
+      'tableRowBorder',
+      'listItemBorder',
+      'dividerBorder',
+      'dividerBackground',
+      'tableBorder',
+      'border',
+    ]),
+    toolbarBorderColor: firstThemeToken(themeColors, [
+      'tableToolbarBorder',
+      'tableHeaderBorder',
+      'toolbarBorder',
+      'tableBorder',
+      'dividerBorder',
+      'dividerBackground',
+      'border',
+    ]),
+  };
+
+  return {
+    palette,
+    resolvedAccentColor,
+    tableBorderColors,
+    themeColors,
     themeTokens,
     checkboxBorderColor: themeColors.checkboxBorder,
     checkboxSelectedMarkColor: themeColors.checkboxSelectedMark,

package/src/tests/react/inputs/defaultInputUtils.test.js

@@ -6,14 +6,18 @@ jest.mock('@store', () => ({
 
 jest.mock('@controleonline/ui-common/src/utils/formatter.js', () => ({}));
 
-jest.mock('@controleonline/ui-common/src/react/utils/storeColumns', () => ({
-  formatStoreColumnValue: ({value}) => value,
-}));
-
-const {mapOptions} = require('../../../react/components/inputs/defaultInputUtils');
+jest.mock('@controleonline/ui-common/src/react/utils/storeColumns', () => ({
+  formatStoreColumnValue: ({value}) => value?.status || value?.category || value,
+}));
+
+const {
+  buildReadPresentationStyles,
+  mapOptions,
+  resolveCellPresentation,
+} = require('../../../react/components/inputs/defaultInputUtils');
 
 describe('defaultInputUtils', () => {
-  it('deduplicates list options by normalized key', () => {
+  it('deduplicates list options by normalized key', () => {
     const column = {
       formatList(item) {
         return {
@@ -40,6 +44,73 @@ describe('defaultInputUtils', () => {
         label: 'Cielo',
         raw: {id: 4579, wallet: 'Cielo'},
       },
-    ]);
-  });
-});
+    ]);
+  });
+
+  it('preserves option color and icon metadata from formatList', () => {
+    const column = {
+      formatList(item) {
+        return {
+          color: item.color,
+          icon: item.icon,
+          value: item.id,
+          label: item.status,
+        };
+      },
+    };
+
+    const options = mapOptions(column, [
+      {id: 1, status: 'Em rota', color: '#2563EB', icon: 'truck'},
+    ]);
+
+    expect(options).toEqual([
+      {
+        color: '#2563EB',
+        icon: 'truck',
+        key: '1',
+        label: 'Em rota',
+        raw: {id: 1, status: 'Em rota', color: '#2563EB', icon: 'truck'},
+      },
+    ]);
+  });
+
+  it('resolves table cell presentation from row value and column style', () => {
+    const presentation = resolveCellPresentation({
+      column: {
+        name: 'status',
+        style: row => ({color: row.status.color}),
+      },
+      row: {
+        status: {
+          status: 'Aprovado',
+          color: '#16A34A',
+          icon: 'check-circle',
+        },
+      },
+      storeName: 'orders',
+    });
+
+    expect(presentation).toEqual({
+      backgroundColor: undefined,
+      borderColor: undefined,
+      color: '#16A34A',
+      icon: 'check-circle',
+      image: undefined,
+      label: 'Aprovado',
+    });
+  });
+
+  it('builds subtle badge colors from resource colors', () => {
+    expect(buildReadPresentationStyles({
+      color: '#16A34A',
+      label: 'Aprovado',
+    })).toEqual({
+      badgeStyle: {
+        backgroundColor: 'rgba(22, 163, 74, 0.1)',
+        borderColor: 'rgba(22, 163, 74, 0.32)',
+      },
+      color: '#16A34A',
+      hasDecoration: true,
+    });
+  });
+});