@controleonline/ui-default 1.0.263

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

@@ -0,0 +1,610 @@
+import { Platform, StyleSheet } from 'react-native';
+
+const shadow = Platform.select({
+  ios: {
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.14,
+    shadowRadius: 20,
+  },
+  android: { elevation: 6 },
+  web: { boxShadow: '0 14px 36px rgba(15,23,42,0.16)' },
+});
+
+const styles = StyleSheet.create({
+  wrap: {
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 10,
+    backgroundColor: '#FFFFFF',
+    overflow: 'visible',
+    position: 'relative',
+  },
+  toolbar: {
+    minHeight: 36,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 6,
+    backgroundColor: '#FFFFFF',
+    zIndex: 10,
+  },
+  toolbarLeft: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flexShrink: 1,
+    gap: 6,
+    minWidth: 0,
+    justifyContent: 'flex-end',
+  },
+  toolbarActionGroup: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 6,
+    flexShrink: 0,
+    marginLeft: 6,
+  },
+  toolbarCompactLead: {
+    flex: 1,
+    flexBasis: '100%',
+    minWidth: 0,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 6,
+  },
+  toolbarCompactActions: {
+    width: '100%',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 6,
+    flexShrink: 0,
+    marginLeft: 0,
+  },
+  toolbarSearch: {
+    width: 190,
+    maxWidth: 220,
+    flexShrink: 1,
+  },
+  toolbarCompactSearch: {
+    flex: 1,
+    width: 'auto',
+    maxWidth: '100%',
+    minWidth: 104,
+  },
+  toolbarCountPill: {
+    minWidth: 0,
+    maxWidth: 112,
+    height: 28,
+    borderRadius: 999,
+    backgroundColor: '#EFF6FF',
+    paddingHorizontal: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 1,
+  },
+  toolbarCountText: {
+    fontSize: 9,
+    fontWeight: '900',
+  },
+  toolbarButton: {
+    minWidth: 28,
+    height: 28,
+    borderRadius: 14,
+    paddingHorizontal: 7,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4,
+  },
+  toolbarButtonActive: {
+    backgroundColor: '#F8FAFC',
+    borderColor: '#CBD5E1',
+  },
+  toolbarAddButton: {
+    minWidth: 30,
+    width: 30,
+    paddingHorizontal: 0,
+  },
+  toolbarBadgeText: {
+    fontSize: 10,
+    fontWeight: '900',
+  },
+  toolbarActionLabel: {
+    flexShrink: 1,
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 0.2,
+  },
+  columnMenu: {
+    position: 'absolute',
+    right: 8,
+    top: 36,
+    width: 230,
+    maxHeight: 520,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 10,
+    backgroundColor: '#FFFFFF',
+    paddingVertical: 6,
+    zIndex: 50,
+    ...shadow,
+  },
+  columnMenuItem: {
+    minHeight: 32,
+    paddingHorizontal: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  columnMenuText: {
+    flex: 1,
+    color: '#0F172A',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  columnMenuModalCard: {
+    width: 250,
+    maxWidth: 250,
+    maxHeight: '78%',
+  },
+  columnMenuModalBody: {
+    maxHeight: 520,
+  },
+  columnMenuModalList: {
+    paddingVertical: 6,
+  },
+  scroll: {
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+  },
+  content: {
+    flex: 1,
+    width: '100%',
+    minWidth: '100%',
+    minHeight: 0,
+  },
+  headerRow: {
+    minHeight: 34,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#F8FAFC',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+  },
+  filterRow: {
+    minHeight: 40,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+  },
+  row: {
+    minHeight: 44,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    borderBottomWidth: 1,
+    borderBottomColor: '#EEF2F7',
+  },
+  cell: {
+    minWidth: 118,
+    flexBasis: 118,
+    flexGrow: 1,
+    flexShrink: 0,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    justifyContent: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#EEF2F7',
+  },
+  identityCell: {
+    minWidth: 76,
+    flexBasis: 76,
+    flexGrow: 0.62,
+  },
+  moneyCell: {
+    minWidth: 132,
+    flexBasis: 132,
+    flexGrow: 0.9,
+  },
+  headerText: {
+    color: '#64748B',
+    fontSize: 10,
+    fontWeight: '900',
+    letterSpacing: 0.35,
+    textTransform: 'uppercase',
+  },
+  sortableHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  filterCell: {
+    paddingVertical: 4,
+    backgroundColor: '#FFFFFF',
+  },
+  filterInput: {
+    height: 30,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    color: '#0F172A',
+    backgroundColor: '#FFFFFF',
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  cellText: {
+    color: '#0F172A',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  mutedCellText: {
+    color: '#94A3B8',
+  },
+  editableCell: {
+    backgroundColor: '#FFFFFF',
+  },
+  editingCell: {
+    paddingVertical: 4,
+    backgroundColor: '#EFF6FF',
+  },
+  editingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  input: {
+    flex: 1,
+    height: 32,
+    borderWidth: 1,
+    borderColor: '#93C5FD',
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    color: '#0F172A',
+    fontSize: 12,
+    fontWeight: '700',
+    backgroundColor: '#FFFFFF',
+  },
+  savingText: {
+    marginTop: 2,
+    color: '#64748B',
+    fontSize: 9,
+    fontWeight: '800',
+    textTransform: 'uppercase',
+  },
+  actionsCell: {
+    minWidth: 60,
+    width: 60,
+    flexBasis: 60,
+    flexGrow: 0,
+    flexShrink: 0,
+    maxWidth: 72,
+    alignItems: 'center',
+  },
+  iconButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+  },
+  cancelButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+  },
+  cardsScroll: {
+    flex: 1,
+    minHeight: 0,
+  },
+  cardsGrid: {
+    padding: 10,
+    gap: 10,
+    flexGrow: 1,
+  },
+  tableList: {
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+  },
+  tableListContent: {
+    flexGrow: 1,
+    width: '100%',
+  },
+  cardItem: {
+    position: 'relative',
+  },
+  cardActions: {
+    position: 'absolute',
+    right: 10,
+    bottom: 10,
+  },
+  defaultCard: {
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 10,
+    backgroundColor: '#FFFFFF',
+    padding: 12,
+    gap: 8,
+  },
+  defaultCardLine: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  defaultCardLabel: {
+    width: 130,
+    color: '#64748B',
+    fontSize: 10,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  defaultCardValue: {
+    flex: 1,
+    color: '#0F172A',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  cardEditButton: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+  },
+  emptyBox: {
+    padding: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  loadingFooter: {
+    padding: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  loadingOverlay: {
+    ...Platform.select({
+      web: {
+        position: 'absolute',
+        inset: 0,
+      },
+      default: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+      },
+    }),
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 14,
+    padding: 16,
+  },
+  loadingOverlayCard: {
+    minWidth: 220,
+    maxWidth: '100%',
+    paddingHorizontal: 18,
+    paddingVertical: 14,
+    borderRadius: 12,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    ...shadow,
+  },
+  footerBar: {
+    minHeight: 40,
+    paddingHorizontal: 8,
+    paddingVertical: 5,
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 6,
+    zIndex: 12,
+    ...Platform.select({
+      web: {
+        position: 'sticky',
+        bottom: 0,
+      },
+      default: {},
+    }),
+  },
+  footerSummaryList: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  footerSummaryItem: {
+    flex: 1,
+    minWidth: 0,
+    flexBasis: 0,
+    flexShrink: 1,
+    paddingHorizontal: 4,
+  },
+  footerSummaryLabel: {
+    color: '#64748B',
+    fontSize: 9,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  footerSummaryValue: {
+    color: '#0F172A',
+    fontSize: 13,
+    fontWeight: '900',
+  },
+  footerCountPill: {
+    maxWidth: '100%',
+    minWidth: 0,
+    flexShrink: 1,
+    borderRadius: 999,
+    backgroundColor: '#EFF6FF',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+  footerCountText: {
+    fontSize: 11,
+    fontWeight: '900',
+  },
+  emptyText: {
+    color: '#64748B',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  modalOverlay: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+    backgroundColor: 'rgba(15,23,42,0.42)',
+  },
+  modalCard: {
+    width: '100%',
+    maxWidth: 860,
+    maxHeight: '86%',
+    borderRadius: 12,
+    backgroundColor: '#FFFFFF',
+    overflow: 'hidden',
+    ...shadow,
+  },
+  modalHeader: {
+    minHeight: 48,
+    paddingHorizontal: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  modalTitle: {
+    color: '#0F172A',
+    fontSize: 16,
+    fontWeight: '900',
+  },
+  modalCloseButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+  },
+  modalBody: {
+    maxHeight: 520,
+  },
+  formGrid: {
+    padding: 14,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+  },
+  formField: {
+    flexGrow: 1,
+    flexBasis: 220,
+    minWidth: 220,
+  },
+  formLabel: {
+    marginBottom: 4,
+    color: '#64748B',
+    fontSize: 10,
+    fontWeight: '900',
+    letterSpacing: 0.3,
+    textTransform: 'uppercase',
+  },
+  formInput: {
+    height: 34,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    color: '#0F172A',
+    backgroundColor: '#FFFFFF',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  modalActions: {
+    minHeight: 52,
+    paddingHorizontal: 14,
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 8,
+  },
+  secondaryButton: {
+    height: 34,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    paddingHorizontal: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FFFFFF',
+  },
+  secondaryButtonText: {
+    color: '#334155',
+    fontSize: 12,
+    fontWeight: '800',
+  },
+  primaryButton: {
+    height: 34,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#0EA5E9',
+  },
+  primaryButtonText: {
+    color: '#FFFFFF',
+    fontSize: 12,
+    fontWeight: '900',
+  },
+});
+
+export default styles;

package/src/react/index.js

@@ -0,0 +1,10 @@
+// React entrypoint kept after Vue removal.
+import DefaultFile from './components/files/DefaultFile';
+
+const moduleEntry = {
+  DefaultFile,
+};
+
+export {DefaultFile};
+
+export default moduleEntry;