@ciromaciel/dashboard-kit 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ciromaciel/dashboard-kit",
-    "version": "1.2.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>
             )}
@@ -168,14 +175,15 @@ export function SidebarShell({
                       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.
+                      dos contadores ao lado dos itens, desenhada por dentro (sombra
+                      inset) para o item manter a altura dos outros.
                     */}
                     {onCreate && (
                         <Box
                             w="100%"
                             mb={4}
                             data-create
-                            style={{ border: '1px solid var(--mantine-color-gray-3)' }}
+                            style={{ boxShadow: 'inset 0 0 0 1px var(--mantine-color-gray-3)' }}
                         >
                             <NavItem
                                 icon={createIcon}