@metropolle/design-system 1.0.0-beta.2025.10.1.1541.d0d0b36 → 1.0.0-beta.2025.10.2.18.1677567

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/css/components.css +194 -0
  2. package/dist/react/components/react/DataTable/DataTable.d.ts +4 -0
  3. package/dist/react/components/react/DataTable/DataTable.d.ts.map +1 -0
  4. package/dist/react/components/react/DataTable/TableHeader.d.ts +4 -0
  5. package/dist/react/components/react/DataTable/TableHeader.d.ts.map +1 -0
  6. package/dist/react/components/react/DataTable/TableRow.d.ts +4 -0
  7. package/dist/react/components/react/DataTable/TableRow.d.ts.map +1 -0
  8. package/dist/react/components/react/DataTable/examples.d.ts +28 -0
  9. package/dist/react/components/react/DataTable/examples.d.ts.map +1 -0
  10. package/dist/react/components/react/DataTable/index.d.ts +7 -0
  11. package/dist/react/components/react/DataTable/index.d.ts.map +1 -0
  12. package/dist/react/components/react/DataTable/migration-example.d.ts +46 -0
  13. package/dist/react/components/react/DataTable/migration-example.d.ts.map +1 -0
  14. package/dist/react/components/react/DataTable/renderers.d.ts +24 -0
  15. package/dist/react/components/react/DataTable/renderers.d.ts.map +1 -0
  16. package/dist/react/components/react/DataTable/types.d.ts +57 -0
  17. package/dist/react/components/react/DataTable/types.d.ts.map +1 -0
  18. package/dist/react/components/react/index.d.ts +2 -0
  19. package/dist/react/components/react/index.d.ts.map +1 -1
  20. package/dist/react/index.d.ts +2 -0
  21. package/dist/react/index.esm.js +605 -2
  22. package/dist/react/index.esm.js.map +1 -1
  23. package/dist/react/index.js +615 -0
  24. package/dist/react/index.js.map +1 -1
  25. package/package.json +1 -1
@@ -1583,6 +1583,609 @@ function ThemeToggle({ size = 'md', className = '', disabled = false, onChange,
1583
1583
  return (jsxRuntimeExports.jsx("button", { onClick: toggleTheme, className: buttonClasses, disabled: disabled, type: "button", "aria-pressed": isDark, "aria-label": `Switch to ${isDark ? 'light' : 'dark'} mode`, title: `Switch to ${isDark ? 'light' : 'dark'} mode`, "data-theme": isDark ? 'dark' : 'light', style: buttonStyle }));
1584
1584
  }
1585
1585
 
1586
+ const TableHeader = ({ columns, gridTemplate, onSort, sortColumn, sortDirection }) => {
1587
+ return (jsxRuntimeExports.jsx("div", { role: "rowgroup", style: {
1588
+ display: 'grid',
1589
+ gridTemplateColumns: gridTemplate,
1590
+ gap: '16px',
1591
+ padding: '16px 20px',
1592
+ borderBottom: '1px solid var(--border-color)',
1593
+ backgroundColor: 'rgba(255, 255, 255, 0.05)'
1594
+ }, children: columns.map((column) => (jsxRuntimeExports.jsxs("div", { role: "columnheader", style: {
1595
+ color: 'var(--text-primary)',
1596
+ fontWeight: '500',
1597
+ fontSize: '14px',
1598
+ display: 'flex',
1599
+ alignItems: 'center',
1600
+ justifyContent: column.align === 'center' ? 'center' :
1601
+ column.align === 'right' ? 'flex-end' : 'flex-start',
1602
+ cursor: column.sortable && onSort ? 'pointer' : 'default',
1603
+ gap: '4px',
1604
+ transition: 'color 0.2s ease'
1605
+ }, onClick: () => column.sortable && onSort && onSort(column.key), onMouseEnter: (e) => {
1606
+ if (column.sortable && onSort) {
1607
+ e.currentTarget.style.color = '#ffffff';
1608
+ }
1609
+ }, onMouseLeave: (e) => {
1610
+ e.currentTarget.style.color = 'var(--text-primary)';
1611
+ }, children: [column.label, column.sortable && onSort && (jsxRuntimeExports.jsx("span", { style: {
1612
+ fontSize: '12px',
1613
+ opacity: sortColumn === column.key ? 1 : 0.5
1614
+ }, children: sortColumn === column.key ?
1615
+ (sortDirection === 'asc' ? '↑' : '↓') : '↕' }))] }, column.key))) }));
1616
+ };
1617
+
1618
+ const TableRow = ({ item, index, columns, actions = [], gridTemplate, isLast, variant, onActionClick }) => {
1619
+ return (jsxRuntimeExports.jsxs("div", { role: "row", style: {
1620
+ display: 'grid',
1621
+ gridTemplateColumns: gridTemplate,
1622
+ gap: '16px',
1623
+ padding: variant === 'compact' ? '12px 20px' : '16px 20px',
1624
+ borderBottom: isLast ? 'none' : '1px solid var(--border-color)',
1625
+ backgroundColor: 'transparent',
1626
+ transition: 'background-color 0.2s ease'
1627
+ }, onMouseEnter: (e) => {
1628
+ e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
1629
+ }, onMouseLeave: (e) => {
1630
+ e.currentTarget.style.backgroundColor = 'transparent';
1631
+ }, children: [columns.map((column) => (jsxRuntimeExports.jsx("div", { role: "cell", style: {
1632
+ display: 'flex',
1633
+ flexDirection: 'column',
1634
+ gap: '4px',
1635
+ justifyContent: 'center',
1636
+ alignItems: column.align === 'center' ? 'center' :
1637
+ column.align === 'right' ? 'flex-end' : 'flex-start'
1638
+ }, children: column.render ?
1639
+ column.render(item[column.key], item, index) :
1640
+ jsxRuntimeExports.jsx("div", { style: {
1641
+ color: 'var(--text-primary)',
1642
+ fontSize: '14px'
1643
+ }, children: item[column.key] }) }, column.key))), actions.length > 0 && (jsxRuntimeExports.jsx("div", { role: "cell", style: {
1644
+ display: 'flex',
1645
+ gap: '8px',
1646
+ justifyContent: 'center',
1647
+ alignItems: 'center'
1648
+ }, children: actions.map((action) => {
1649
+ const isDisabled = action.disabled?.(item) || false;
1650
+ const isLoading = action.loading?.(item) || false;
1651
+ return (jsxRuntimeExports.jsxs("button", { onClick: () => !isDisabled && !isLoading && onActionClick(action, item), disabled: isDisabled || isLoading, style: {
1652
+ background: 'none',
1653
+ border: action.variant === 'danger' ? '1px solid rgba(239, 68, 68, 0.3)' :
1654
+ '1px solid var(--border-color)',
1655
+ borderRadius: '6px',
1656
+ padding: '6px 12px',
1657
+ color: action.variant === 'danger' ? '#f87171' : 'var(--text-primary)',
1658
+ fontSize: '12px',
1659
+ cursor: isDisabled || isLoading ? 'not-allowed' : 'pointer',
1660
+ display: 'flex',
1661
+ alignItems: 'center',
1662
+ gap: '4px',
1663
+ transition: 'all 0.2s ease',
1664
+ opacity: isDisabled || isLoading ? 0.5 : 1,
1665
+ whiteSpace: 'nowrap'
1666
+ }, onMouseEnter: (e) => {
1667
+ if (!isDisabled && !isLoading) {
1668
+ if (action.variant === 'danger') {
1669
+ e.currentTarget.style.backgroundColor = 'rgba(239, 68, 68, 0.1)';
1670
+ e.currentTarget.style.borderColor = 'rgba(239, 68, 68, 0.5)';
1671
+ }
1672
+ else {
1673
+ e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
1674
+ e.currentTarget.style.borderColor = 'var(--text-primary)';
1675
+ }
1676
+ }
1677
+ }, onMouseLeave: (e) => {
1678
+ if (!isDisabled && !isLoading) {
1679
+ e.currentTarget.style.backgroundColor = 'transparent';
1680
+ e.currentTarget.style.borderColor = action.variant === 'danger' ?
1681
+ 'rgba(239, 68, 68, 0.3)' : 'var(--border-color)';
1682
+ }
1683
+ }, children: [action.icon && action.icon, action.label] }, action.key));
1684
+ }) }))] }));
1685
+ };
1686
+
1687
+ const DataTable = ({ data, columns, loading = false, searchTerm = '', actions = [], variant = 'default', responsive = 'stack', onSort, emptyMessage = 'Nenhum item encontrado', loadingMessage = 'Carregando...', className, style, maxHeight = '600px', showSearchCount = true, rowHover = true, striped = false }) => {
1688
+ const [sortColumn, setSortColumn] = require$$0.useState('');
1689
+ const [sortDirection, setSortDirection] = require$$0.useState('asc');
1690
+ // Filter data based on search term
1691
+ const filteredData = require$$0.useMemo(() => {
1692
+ if (!searchTerm)
1693
+ return data;
1694
+ return data.filter(item => {
1695
+ return columns.some(column => {
1696
+ const value = item[column.key];
1697
+ if (value === null || value === undefined)
1698
+ return false;
1699
+ return String(value).toLowerCase().includes(searchTerm.toLowerCase());
1700
+ });
1701
+ });
1702
+ }, [data, searchTerm, columns]);
1703
+ // Generate grid template based on columns and actions
1704
+ const gridTemplate = require$$0.useMemo(() => {
1705
+ const columnWidths = columns.map(col => col.width || '1fr').join(' ');
1706
+ const actionsWidth = actions.length > 0 ? ' 120px' : '';
1707
+ return columnWidths + actionsWidth;
1708
+ }, [columns, actions]);
1709
+ // Handle sort
1710
+ const handleSort = (columnKey) => {
1711
+ let direction = 'asc';
1712
+ if (sortColumn === columnKey && sortDirection === 'asc') {
1713
+ direction = 'desc';
1714
+ }
1715
+ setSortColumn(columnKey);
1716
+ setSortDirection(direction);
1717
+ if (onSort) {
1718
+ onSort(columnKey, direction);
1719
+ }
1720
+ };
1721
+ // Handle action click
1722
+ const handleActionClick = (action, item) => {
1723
+ action.onClick(item);
1724
+ };
1725
+ // Loading state
1726
+ if (loading) {
1727
+ return (jsxRuntimeExports.jsx("div", { className: className, style: {
1728
+ position: 'relative',
1729
+ borderRadius: '24px',
1730
+ backdropFilter: 'blur(24px)',
1731
+ backgroundColor: 'rgba(255, 255, 255, 0.1)',
1732
+ border: '1px solid rgba(255, 255, 255, 0.3)',
1733
+ boxShadow: '0 12px 40px rgba(0, 0, 0, 0.15)',
1734
+ padding: '32px',
1735
+ ...style
1736
+ }, children: jsxRuntimeExports.jsxs("div", { style: {
1737
+ display: 'flex',
1738
+ alignItems: 'center',
1739
+ justifyContent: 'center',
1740
+ gap: '12px'
1741
+ }, children: [jsxRuntimeExports.jsx("div", { style: {
1742
+ width: '32px',
1743
+ height: '32px',
1744
+ border: '2px solid transparent',
1745
+ borderTop: '2px solid white',
1746
+ borderRadius: '50%',
1747
+ animation: 'spin 1s linear infinite'
1748
+ } }), jsxRuntimeExports.jsx("span", { style: { color: 'var(--text-primary)' }, children: loadingMessage })] }) }));
1749
+ }
1750
+ // Empty state
1751
+ if (filteredData.length === 0) {
1752
+ return (jsxRuntimeExports.jsx("div", { className: className, style: {
1753
+ position: 'relative',
1754
+ borderRadius: '24px',
1755
+ backdropFilter: 'blur(24px)',
1756
+ backgroundColor: 'rgba(255, 255, 255, 0.1)',
1757
+ border: '1px solid rgba(255, 255, 255, 0.3)',
1758
+ boxShadow: '0 12px 40px rgba(0, 0, 0, 0.15)',
1759
+ padding: '40px',
1760
+ textAlign: 'center',
1761
+ ...style
1762
+ }, children: jsxRuntimeExports.jsx("div", { style: {
1763
+ color: 'var(--text-secondary)',
1764
+ fontSize: '16px'
1765
+ }, children: emptyMessage }) }));
1766
+ }
1767
+ return (jsxRuntimeExports.jsxs("div", { className: className, style: {
1768
+ position: 'relative',
1769
+ borderRadius: '24px',
1770
+ backdropFilter: 'blur(24px)',
1771
+ backgroundColor: 'rgba(255, 255, 255, 0.1)',
1772
+ border: '1px solid rgba(255, 255, 255, 0.3)',
1773
+ boxShadow: '0 12px 40px rgba(0, 0, 0, 0.15)',
1774
+ overflow: 'hidden',
1775
+ ...style
1776
+ }, role: "table", "aria-label": "Tabela de dados", children: [showSearchCount && searchTerm && (jsxRuntimeExports.jsxs("div", { style: {
1777
+ padding: '16px',
1778
+ color: 'var(--text-secondary)',
1779
+ fontSize: '14px',
1780
+ borderBottom: '1px solid var(--border-color)'
1781
+ }, children: ["Mostrando", ' ', jsxRuntimeExports.jsx("span", { style: { fontWeight: '500', color: 'var(--text-primary)' }, children: filteredData.length }), ' ', "de", ' ', jsxRuntimeExports.jsx("span", { style: { fontWeight: '500', color: 'var(--text-primary)' }, children: data.length }), ' ', "itens"] })), jsxRuntimeExports.jsx(TableHeader, { columns: columns, gridTemplate: gridTemplate, onSort: onSort ? handleSort : undefined, sortColumn: sortColumn, sortDirection: sortDirection }), jsxRuntimeExports.jsx("div", { role: "rowgroup", style: {
1782
+ maxHeight,
1783
+ overflowY: 'auto'
1784
+ }, children: filteredData.map((item, index) => (jsxRuntimeExports.jsx(TableRow, { item: item, index: index, columns: columns, actions: actions, gridTemplate: gridTemplate, isLast: index === filteredData.length - 1, variant: variant, onActionClick: handleActionClick }, item.id || index))) })] }));
1785
+ };
1786
+
1787
+ const CellRenderers = {
1788
+ // ID cell - monospace background
1789
+ id: (value) => (jsxRuntimeExports.jsx("div", { className: "data-table-code", style: {
1790
+ color: 'var(--text-secondary)',
1791
+ fontSize: '12px',
1792
+ backgroundColor: 'rgba(255, 255, 255, 0.05)',
1793
+ padding: '2px 8px',
1794
+ borderRadius: '4px',
1795
+ textAlign: 'center',
1796
+ fontFamily: 'monospace'
1797
+ }, children: value })),
1798
+ // Name cell - primary text with background
1799
+ name: (value) => (jsxRuntimeExports.jsx("div", { className: "data-table-code", style: {
1800
+ color: 'var(--text-primary)',
1801
+ fontSize: '14px',
1802
+ backgroundColor: 'rgba(255, 255, 255, 0.1)',
1803
+ padding: '4px 12px',
1804
+ borderRadius: '8px',
1805
+ fontFamily: 'monospace'
1806
+ }, children: value })),
1807
+ // Parameter value - masked if secure
1808
+ parameterValue: (value, item) => {
1809
+ const displayValue = item.type === 'SecureString' ? '••••••••' :
1810
+ (value?.length > 50 ? `${value.substring(0, 50)}...` : value);
1811
+ return (jsxRuntimeExports.jsx("div", { className: "data-table-code", style: {
1812
+ color: 'var(--text-primary)',
1813
+ fontSize: '14px',
1814
+ backgroundColor: 'rgba(255, 255, 255, 0.1)',
1815
+ borderRadius: '8px',
1816
+ maxWidth: '300px',
1817
+ wordBreak: 'break-all',
1818
+ padding: '4px 12px',
1819
+ fontFamily: 'monospace'
1820
+ }, children: displayValue }));
1821
+ },
1822
+ // Badge renderer for types/statuses
1823
+ badge: (value, variant = 'primary') => (jsxRuntimeExports.jsx("span", { className: `data-table-badge ${variant}`, children: value })),
1824
+ // Parameter type badge
1825
+ parameterType: (value) => {
1826
+ const variant = value === 'SecureString' ? 'danger' :
1827
+ value === 'StringList' ? 'success' : 'primary';
1828
+ return CellRenderers.badge(value, variant);
1829
+ },
1830
+ // Environment badge
1831
+ environment: (value, item) => {
1832
+ const env = item.name?.includes('/prod/') ? 'PROD' : 'DEV';
1833
+ const variant = env === 'PROD' ? 'info' : 'warning';
1834
+ return CellRenderers.badge(env, variant);
1835
+ },
1836
+ // Action type badge for audit logs
1837
+ actionType: (value) => {
1838
+ const variant = value === 'CREATE' ? 'success' :
1839
+ value === 'UPDATE' ? 'primary' : 'danger';
1840
+ return CellRenderers.badge(value, variant);
1841
+ },
1842
+ // Date formatter
1843
+ date: (value) => (jsxRuntimeExports.jsx("div", { style: {
1844
+ color: 'var(--text-primary)',
1845
+ fontSize: '14px'
1846
+ }, children: value ? new Date(value).toLocaleString('pt-BR') : '-' })),
1847
+ // Description/secondary text
1848
+ description: (value) => (jsxRuntimeExports.jsx("div", { style: {
1849
+ color: 'var(--text-secondary)',
1850
+ fontSize: '12px',
1851
+ maxWidth: '300px',
1852
+ overflow: 'hidden',
1853
+ textOverflow: 'ellipsis',
1854
+ whiteSpace: 'nowrap'
1855
+ }, children: value })),
1856
+ // JSON preview for audit changes
1857
+ jsonPreview: (value) => {
1858
+ const jsonString = JSON.stringify(value);
1859
+ const preview = jsonString.length > 30 ? jsonString.substring(0, 30) + '...' : jsonString;
1860
+ return (jsxRuntimeExports.jsx("div", { style: {
1861
+ color: 'var(--text-secondary)',
1862
+ fontSize: '12px',
1863
+ fontFamily: 'monospace',
1864
+ maxWidth: '150px',
1865
+ overflow: 'hidden',
1866
+ textOverflow: 'ellipsis',
1867
+ whiteSpace: 'nowrap'
1868
+ }, children: preview }));
1869
+ },
1870
+ // Combined cell with main value and description
1871
+ combined: (mainValue, description) => (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [CellRenderers.name(mainValue), description && CellRenderers.description(description)] })),
1872
+ // Combined with badges
1873
+ combinedWithBadges: (mainValue, badges) => (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [CellRenderers.name(mainValue), jsxRuntimeExports.jsx("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: badges.map((badge, index) => (jsxRuntimeExports.jsx("span", { className: `data-table-badge ${badge.variant || 'primary'}`, children: badge.value }, index))) })] }))
1874
+ };
1875
+ // Common action icons
1876
+ const ActionIcons = {
1877
+ edit: (jsxRuntimeExports.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { d: "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" }) })),
1878
+ delete: (jsxRuntimeExports.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { d: "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" }) })),
1879
+ view: (jsxRuntimeExports.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { d: "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" }) })),
1880
+ loading: (jsxRuntimeExports.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", className: "data-table-spinner", children: jsxRuntimeExports.jsx("path", { d: "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" }) }))
1881
+ };
1882
+
1883
+ // Configuração para ParametersTable (Settings)
1884
+ const parametersTableConfig = {
1885
+ columns: [
1886
+ {
1887
+ key: 'name',
1888
+ label: 'Parâmetro',
1889
+ width: '1fr',
1890
+ render: (value, item) => CellRenderers.combinedWithBadges(value, [
1891
+ { value: item.type, variant: item.type === 'SecureString' ? 'danger' :
1892
+ item.type === 'StringList' ? 'success' : 'primary' },
1893
+ { value: item.name.includes('/prod/') ? 'PROD' : 'DEV',
1894
+ variant: item.name.includes('/prod/') ? 'info' : 'warning' }
1895
+ ])
1896
+ },
1897
+ {
1898
+ key: 'value',
1899
+ label: 'Valor',
1900
+ width: '2fr',
1901
+ render: (value, item) => (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [CellRenderers.parameterValue(value, item), CellRenderers.description(item.description)] }))
1902
+ }
1903
+ ],
1904
+ actions: [
1905
+ {
1906
+ key: 'edit',
1907
+ label: '✏️',
1908
+ variant: 'secondary',
1909
+ onClick: (item) => console.log('Edit', item),
1910
+ disabled: (item) => false
1911
+ },
1912
+ {
1913
+ key: 'delete',
1914
+ label: '🗑️',
1915
+ variant: 'danger',
1916
+ onClick: (item) => console.log('Delete', item),
1917
+ disabled: (item) => false,
1918
+ loading: (item) => item.deleting || false
1919
+ }
1920
+ ]
1921
+ };
1922
+ // Configuração para GeographyTable - Regions
1923
+ const regionsTableConfig = {
1924
+ columns: [
1925
+ {
1926
+ key: 'region_id',
1927
+ label: 'ID',
1928
+ width: '80px',
1929
+ render: CellRenderers.id
1930
+ },
1931
+ {
1932
+ key: 'name',
1933
+ label: 'Nome',
1934
+ width: '1fr',
1935
+ render: CellRenderers.name
1936
+ },
1937
+ {
1938
+ key: 'code',
1939
+ label: 'Código',
1940
+ width: '120px',
1941
+ render: CellRenderers.name
1942
+ },
1943
+ {
1944
+ key: 'created_at',
1945
+ label: 'Criado em',
1946
+ width: '140px',
1947
+ render: CellRenderers.date
1948
+ },
1949
+ {
1950
+ key: 'created_by',
1951
+ label: 'Criado por',
1952
+ width: '140px',
1953
+ render: (value) => CellRenderers.name(value)
1954
+ }
1955
+ ],
1956
+ actions: [
1957
+ {
1958
+ key: 'edit',
1959
+ label: '✏️',
1960
+ variant: 'secondary',
1961
+ onClick: (item) => console.log('Edit region', item)
1962
+ },
1963
+ {
1964
+ key: 'delete',
1965
+ label: '🗑️',
1966
+ variant: 'danger',
1967
+ onClick: (item) => console.log('Delete region', item),
1968
+ loading: (item) => item.deleting || false
1969
+ }
1970
+ ]
1971
+ };
1972
+ // Configuração para GeographyTable - Countries
1973
+ const countriesTableConfig = {
1974
+ columns: [
1975
+ {
1976
+ key: 'country_id',
1977
+ label: 'ID',
1978
+ width: '80px',
1979
+ render: CellRenderers.id
1980
+ },
1981
+ {
1982
+ key: 'name',
1983
+ label: 'Nome',
1984
+ width: '1fr',
1985
+ render: CellRenderers.name
1986
+ },
1987
+ {
1988
+ key: 'iso2',
1989
+ label: 'Código',
1990
+ width: '120px',
1991
+ render: (value, item) => CellRenderers.combinedWithBadges(value, [
1992
+ { value: item.iso3, variant: 'primary' }
1993
+ ])
1994
+ },
1995
+ {
1996
+ key: 'capital',
1997
+ label: 'Capital',
1998
+ width: '140px',
1999
+ render: CellRenderers.name
2000
+ },
2001
+ {
2002
+ key: 'region',
2003
+ label: 'Região',
2004
+ width: '120px',
2005
+ render: (value) => CellRenderers.badge(value, 'info')
2006
+ }
2007
+ ],
2008
+ actions: [
2009
+ {
2010
+ key: 'edit',
2011
+ label: '✏️',
2012
+ variant: 'secondary',
2013
+ onClick: (item) => console.log('Edit country', item)
2014
+ },
2015
+ {
2016
+ key: 'delete',
2017
+ label: '🗑️',
2018
+ variant: 'danger',
2019
+ onClick: (item) => console.log('Delete country', item)
2020
+ }
2021
+ ]
2022
+ };
2023
+ // Configuração para Audit Log
2024
+ const auditLogTableConfig = {
2025
+ columns: [
2026
+ {
2027
+ key: 'timestamp',
2028
+ label: 'Data/Hora',
2029
+ width: '140px',
2030
+ render: CellRenderers.date
2031
+ },
2032
+ {
2033
+ key: 'user_email',
2034
+ label: 'Usuário',
2035
+ width: '180px',
2036
+ render: CellRenderers.name
2037
+ },
2038
+ {
2039
+ key: 'action',
2040
+ label: 'Ação',
2041
+ width: '100px',
2042
+ render: CellRenderers.actionType
2043
+ },
2044
+ {
2045
+ key: 'entity_type',
2046
+ label: 'Tipo',
2047
+ width: '120px',
2048
+ render: (value) => CellRenderers.badge(value, 'primary')
2049
+ },
2050
+ {
2051
+ key: 'entity_id',
2052
+ label: 'ID',
2053
+ width: '120px',
2054
+ render: CellRenderers.description
2055
+ },
2056
+ {
2057
+ key: 'changes',
2058
+ label: 'Alterações',
2059
+ width: '1fr',
2060
+ render: (value, item) => (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [CellRenderers.jsonPreview(value), jsxRuntimeExports.jsxs("button", { onClick: () => console.log('View details', item), style: {
2061
+ background: 'none',
2062
+ border: '1px solid var(--border-color)',
2063
+ borderRadius: '4px',
2064
+ padding: '4px 8px',
2065
+ color: 'var(--text-primary)',
2066
+ fontSize: '12px',
2067
+ cursor: 'pointer',
2068
+ display: 'flex',
2069
+ alignItems: 'center',
2070
+ gap: '4px',
2071
+ transition: 'all 0.2s ease',
2072
+ whiteSpace: 'nowrap'
2073
+ }, children: [ActionIcons.view, "Ver Detalhes"] })] }))
2074
+ }
2075
+ ]
2076
+ };
2077
+ // Configuração para States
2078
+ const statesTableConfig = {
2079
+ columns: [
2080
+ {
2081
+ key: 'state_id',
2082
+ label: 'ID',
2083
+ width: '80px',
2084
+ render: CellRenderers.id
2085
+ },
2086
+ {
2087
+ key: 'name',
2088
+ label: 'Nome',
2089
+ width: '1fr',
2090
+ render: CellRenderers.name
2091
+ },
2092
+ {
2093
+ key: 'code',
2094
+ label: 'Código',
2095
+ width: '120px',
2096
+ render: CellRenderers.name
2097
+ },
2098
+ {
2099
+ key: 'country_name',
2100
+ label: 'País',
2101
+ width: '140px',
2102
+ render: (value) => CellRenderers.badge(value, 'info')
2103
+ }
2104
+ ],
2105
+ actions: [
2106
+ {
2107
+ key: 'edit',
2108
+ label: '✏️',
2109
+ variant: 'secondary',
2110
+ onClick: (item) => console.log('Edit state', item)
2111
+ },
2112
+ {
2113
+ key: 'delete',
2114
+ label: '🗑️',
2115
+ variant: 'danger',
2116
+ onClick: (item) => console.log('Delete state', item)
2117
+ }
2118
+ ]
2119
+ };
2120
+ // Configuração para Cities
2121
+ const citiesTableConfig = {
2122
+ columns: [
2123
+ {
2124
+ key: 'city_id',
2125
+ label: 'ID',
2126
+ width: '80px',
2127
+ render: CellRenderers.id
2128
+ },
2129
+ {
2130
+ key: 'name',
2131
+ label: 'Nome',
2132
+ width: '1fr',
2133
+ render: CellRenderers.name
2134
+ },
2135
+ {
2136
+ key: 'population',
2137
+ label: 'População',
2138
+ width: '120px',
2139
+ render: (value) => (jsxRuntimeExports.jsx("div", { style: { color: 'var(--text-primary)', fontSize: '14px' }, children: value ? value.toLocaleString('pt-BR') : '-' }))
2140
+ },
2141
+ {
2142
+ key: 'state_name',
2143
+ label: 'Estado',
2144
+ width: '140px',
2145
+ render: (value) => CellRenderers.badge(value, 'success')
2146
+ },
2147
+ {
2148
+ key: 'country_name',
2149
+ label: 'País',
2150
+ width: '120px',
2151
+ render: (value) => CellRenderers.badge(value, 'info')
2152
+ }
2153
+ ],
2154
+ actions: [
2155
+ {
2156
+ key: 'edit',
2157
+ label: '✏️',
2158
+ variant: 'secondary',
2159
+ onClick: (item) => console.log('Edit city', item)
2160
+ },
2161
+ {
2162
+ key: 'delete',
2163
+ label: '🗑️',
2164
+ variant: 'danger',
2165
+ onClick: (item) => console.log('Delete city', item)
2166
+ }
2167
+ ]
2168
+ };
2169
+ // Função helper para aplicar configuração baseada no tipo
2170
+ const getTableConfig = (type) => {
2171
+ switch (type) {
2172
+ case 'parameters':
2173
+ return parametersTableConfig;
2174
+ case 'regions':
2175
+ return regionsTableConfig;
2176
+ case 'countries':
2177
+ return countriesTableConfig;
2178
+ case 'states':
2179
+ return statesTableConfig;
2180
+ case 'cities':
2181
+ return citiesTableConfig;
2182
+ case 'audit':
2183
+ return auditLogTableConfig;
2184
+ default:
2185
+ return parametersTableConfig;
2186
+ }
2187
+ };
2188
+
1586
2189
  function Modal({ open, onClose, closeOnOverlay = true, children, className, style }) {
1587
2190
  const [mounted, setMounted] = require$$0.useState(false);
1588
2191
  const [visible, setVisible] = require$$0.useState(false);
@@ -1710,16 +2313,28 @@ function ConfirmDialog({ open, onClose, title, description, confirmText = 'Confi
1710
2313
  return (jsxRuntimeExports.jsx(Modal, { open: open, onClose: onClose, closeOnOverlay: !disableOverlayClose, children: jsxRuntimeExports.jsxs("div", { className: "mds-modal-card", style: { maxWidth: 480, width: '100%' }, children: [jsxRuntimeExports.jsx(ModalHeader, { title: title, icon: icon ?? toneIcon[tone], onClose: onClose, align: "center" }), description && (jsxRuntimeExports.jsx("div", { style: { padding: '0 24px 16px 24px' }, children: description })), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: 12, justifyContent: 'flex-end', borderTop: '1px solid var(--border-color)', padding: '16px 24px', marginTop: 8 }, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: onClose, className: "mds-button mds-button--secondary", children: cancelText }), jsxRuntimeExports.jsx("button", { type: "button", onClick: onConfirm, disabled: loading, className: "mds-button mds-button--primary", children: loading ? 'Processando...' : confirmText })] })] }) }));
1711
2314
  }
1712
2315
 
2316
+ exports.ActionIcons = ActionIcons;
1713
2317
  exports.BrandLogo = BrandLogo;
1714
2318
  exports.Button = Button;
2319
+ exports.CellRenderers = CellRenderers;
1715
2320
  exports.ConfirmDialog = ConfirmDialog;
2321
+ exports.DataTable = DataTable;
1716
2322
  exports.GlassCard = GlassCard;
1717
2323
  exports.Modal = Modal;
1718
2324
  exports.ModalBody = ModalBody;
1719
2325
  exports.ModalFooter = ModalFooter;
1720
2326
  exports.ModalHeader = ModalHeader;
1721
2327
  exports.Select = Select;
2328
+ exports.TableHeader = TableHeader;
2329
+ exports.TableRow = TableRow;
1722
2330
  exports.ThemeToggle = ThemeToggle;
1723
2331
  exports.Typography = Typography;
2332
+ exports.auditLogTableConfig = auditLogTableConfig;
2333
+ exports.citiesTableConfig = citiesTableConfig;
1724
2334
  exports.cn = cn;
2335
+ exports.countriesTableConfig = countriesTableConfig;
2336
+ exports.getTableConfig = getTableConfig;
2337
+ exports.parametersTableConfig = parametersTableConfig;
2338
+ exports.regionsTableConfig = regionsTableConfig;
2339
+ exports.statesTableConfig = statesTableConfig;
1725
2340
  //# sourceMappingURL=index.js.map