@ciromaciel/dashboard-kit 1.1.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ciromaciel/dashboard-kit",
-    "version": "1.1.0",
+    "version": "1.2.1",
     "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

@@ -106,10 +106,16 @@ export function SidebarShell({
         >
             {header}
 
+            {/*
+              A busca tem a geometria de um item da coluna: mesma borda
+              esquerda, ícone de 18 na mesma coluna (12px da borda), texto onde
+              começa o rótulo de um item (42px) e a altura de um item (43px), a
+              mesma do criar logo abaixo. Recuada e mais baixa, ela fazia três bordas
+              esquerdas numa coluna só.
+            */}
             {mostrarBusca && (
                 <Box
-                    px={12}
-                    pb={8}
+                    pb={6}
                     w="100%"
                 >
                     <TextInput
@@ -118,9 +124,10 @@ export function SidebarShell({
                         onKeyDown={e => e.key === 'Escape' && onTermChange?.('')}
                         placeholder={searchPlaceholder}
                         aria-label={searchPlaceholder}
+                        leftSectionWidth={42}
                         leftSection={
                             <IconSearch
-                                size={14}
+                                size={18}
                                 stroke={1.5}
                             />
                         }
@@ -140,7 +147,7 @@ export function SidebarShell({
                                 </ActionIcon>
                             ) : null
                         }
-                        styles={{ input: { fontSize: 12, background: 'var(--mantine-color-gray-1)' } }}
+                        styles={{ input: { height: 43, minHeight: 43, fontSize: 13, background: 'var(--mantine-color-gray-1)' } }}
                     />
                 </Box>
             )}
@@ -162,14 +169,29 @@ 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, desenhada por dentro (sombra
+                      inset) para o item manter a altura dos outros.
                     */}
                     {onCreate && (
-                        <NavItem
-                            icon={createIcon}
-                            label={createAllowed ? createLabel : createBlockedLabel}
-                            muted={!createAllowed}
-                            onClick={createAllowed ? onCreate : onCreateBlocked}
-                        />
+                        <Box
+                            w="100%"
+                            mb={4}
+                            data-create
+                            style={{ boxShadow: 'inset 0 0 0 1px 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>}