@ciromaciel/dashboard-kit 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ciromaciel/dashboard-kit",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "license": "MIT",
     "type": "module",
     "description": "The components every dashboard shares: table, empty state, loading state, destructive confirm, danger zone and wordmark.",

package/src/components/SidebarShell.jsx

@@ -162,14 +162,28 @@ export function SidebarShell({
                       planos. Escondê-lo deixaria o limite invisível, e a pessoa
                       procuraria o botão em vez de descobrir que precisa de
                       upgrade.
+
+                      O CONTORNO É O QUE O SEPARA DA NAVEGAÇÃO. Na coluna, sem
+                      moldura é um lugar para ir, preenchido de preto é onde você
+                      está, e com contorno é algo que você cria. Preto sólido
+                      diria "você está aqui"; cor gastaria a única exceção do
+                      sistema, o vermelho de perda. A borda é a mesma linha fina
+                      dos contadores ao lado dos itens.
                     */}
                     {onCreate && (
-                        <NavItem
-                            icon={createIcon}
-                            label={createAllowed ? createLabel : createBlockedLabel}
-                            muted={!createAllowed}
-                            onClick={createAllowed ? onCreate : onCreateBlocked}
-                        />
+                        <Box
+                            w="100%"
+                            mb={4}
+                            data-create
+                            style={{ border: '1px solid var(--mantine-color-gray-3)' }}
+                        >
+                            <NavItem
+                                icon={createIcon}
+                                label={<span style={{ fontWeight: 700 }}>{createAllowed ? createLabel : createBlockedLabel}</span>}
+                                muted={!createAllowed}
+                                onClick={createAllowed ? onCreate : onCreateBlocked}
+                            />
+                        </Box>
                     )}
 
                     {groupLabel && <GroupLabel>{groupLabel}</GroupLabel>}