@ciromaciel/dashboard-kit 1.2.0 → 1.3.0

package/package.json

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

@@ -1,4 +1,4 @@
-import { ActionIcon, Box, ScrollArea, Stack, Text, TextInput } from '@mantine/core'
+import { ActionIcon, Box, Group, ScrollArea, Stack, Text, TextInput, Tooltip } from '@mantine/core'
 import { IconSearch, IconX } from '@tabler/icons-react'
 
 import { GroupLabel } from './GroupLabel'
@@ -39,6 +39,35 @@ import { NavItem } from './NavItem'
  * Nada de quota entra aqui. O painel resolve o gate e passa `createAllowed`
  * booleano — a coluna não sabe o que é um plano.
  */
+/** O botão de criar na linha da busca: quadrado de 43px, preto; em contorno cinza no limite do plano. */
+function CreateSquare({ icon: Icon, label, isAllowed, onClick }) {
+    return (
+        <Tooltip
+            label={label}
+            position="bottom"
+            withArrow={false}
+        >
+            <ActionIcon
+                data-create
+                onClick={onClick}
+                aria-label={label}
+                size={43}
+                radius={0}
+                variant={isAllowed ? 'filled' : 'default'}
+                color="gray.9"
+                // O realce do Mantine puxa o preto para um azul; aqui ele fica no cinza do sistema.
+                style={{ flex: 'none', '--ai-hover': 'var(--mantine-color-gray-7)' }}
+            >
+                <Icon
+                    size={18}
+                    stroke={2}
+                    style={isAllowed ? undefined : { color: 'var(--mantine-color-gray-5)' }}
+                />
+            </ActionIcon>
+        </Tooltip>
+    )
+}
+
 export function SidebarShell({
     // ── fora do recurso ──────────────────────────────────────────────────
     items = [],
@@ -94,6 +123,7 @@ export function SidebarShell({
     const mostrarBusca = searchThreshold !== null && !activeResource && (items.length >= searchThreshold || Boolean(term))
 
     const faixas = partition ? partition(filtrados) : null
+    const criar = { icon: createIcon, label: createAllowed ? createLabel : createBlockedLabel, isAllowed: createAllowed, onClick: createAllowed ? onCreate : onCreateBlocked }
 
     return (
         <Stack
@@ -106,21 +136,45 @@ 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).
+              Recuada e mais baixa, ela fazia três bordas esquerdas numa coluna
+              só.
+
+              CRIAR MORA NA LINHA DA BUSCA: um quadrado preto de 43px com o
+              ícone, colado à direita do campo (escolha do Ciro em 10/10/2026,
+              entre cinco opções). Buscar e criar viram uma faixa só de
+              ferramentas, e a lista começa limpa logo abaixo. O preto aqui não
+              se confunde com o item aberto: aquele é uma faixa larga com texto,
+              este é um quadrado que só um botão tem. O nome da ação vai no
+              rótulo de acessibilidade e na dica ao passar o mouse.
+
+              Criar fica ANTES da lista: com muitos recursos a lista rola, e uma
+              ação no fim de uma área de rolagem é uma ação que se procura. No
+              limite do plano o botão NÃO some — ele leva para os planos, em
+              contorno cinza em vez de preto. Escondê-lo deixaria o limite
+              invisível.
+            */}
             {mostrarBusca && (
-                <Box
-                    px={12}
-                    pb={8}
+                <Group
+                    gap={6}
+                    pb={6}
                     w="100%"
+                    wrap="nowrap"
                 >
                     <TextInput
+                        style={{ flex: 1, minWidth: 0 }}
                         value={term}
                         onChange={e => onTermChange?.(e.currentTarget.value)}
                         onKeyDown={e => e.key === 'Escape' && onTermChange?.('')}
                         placeholder={searchPlaceholder}
                         aria-label={searchPlaceholder}
+                        leftSectionWidth={42}
                         leftSection={
                             <IconSearch
-                                size={14}
+                                size={18}
                                 stroke={1.5}
                             />
                         }
@@ -140,9 +194,10 @@ 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>
+                    {onCreate && <CreateSquare {...criar} />}
+                </Group>
             )}
 
             {activeResource ? (
@@ -153,37 +208,14 @@ export function SidebarShell({
                 />
             ) : (
                 <>
-                    {/*
-                      Criar fica ANTES da lista: com muitos recursos a lista
-                      rola, e uma ação no fim de uma área de rolagem é uma ação
-                      que se procura.
-
-                      No limite do plano o item NÃO some — ele leva para os
-                      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 && (
-                        <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>
+                    {/* Sem busca (o Monitors, painéis sem lista longa), criar volta a ser um item da coluna. */}
+                    {onCreate && !mostrarBusca && (
+                        <NavItem
+                            icon={criar.icon}
+                            label={criar.label}
+                            muted={!createAllowed}
+                            onClick={criar.onClick}
+                        />
                     )}
 
                     {groupLabel && <GroupLabel>{groupLabel}</GroupLabel>}