@ciromaciel/dashboard-kit 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ciromaciel/dashboard-kit",
-    "version": "1.3.0",
+    "version": "1.4.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/ColumnBrand.jsx

@@ -0,0 +1,56 @@
+import { Box, Text, UnstyledButton } from '@mantine/core'
+
+import { Wordmark } from './Wordmark'
+
+/**
+ * O topo da coluna: o nome do produto e, embaixo, o que ele cuida.
+ *
+ * VEIO DE SETE CÓPIAS IGUAIS (Blogs, Forms, Links, Newsletter, Pages, Tasks,
+ * Videos) e uma quase igual (People, com cinza e espaçamento próprios). A
+ * linha de baixo virou padrão em 10/10/2026 (Ciro): todo painel diz, em duas
+ * palavras, o que cabe nele — "Artigos · Publicação", "Edições · Assinantes".
+ * Ela orienta quem chega e separa produtos de nome parecido na mesma linha.
+ *
+ * O nome é a volta para `/` (a lista de recursos, ou o Início no painel sem
+ * recurso): o mesmo destino do item "Todos os …" da coluna.
+ *
+ * @param {string}   name     O nome do produto ("Blogs").
+ * @param {string}   tagline  Os dois termos, separados por " · ". Some quando
+ *                            não há: uma linha vazia ocuparia espaço sem dizer nada.
+ * @param {Function} onClick  Ir para `/`.
+ * @param {string}   label    O rótulo de acessibilidade do nome ("Todos os blogs").
+ */
+export function ColumnBrand({ name, tagline, onClick, label }) {
+    return (
+        <Box
+            px={12}
+            pb={8}
+        >
+            <UnstyledButton
+                onClick={onClick}
+                aria-label={label ?? name}
+                w="100%"
+                style={{ display: 'block', textAlign: 'center' }}
+            >
+                <Wordmark
+                    name={name}
+                    size={28}
+                />
+            </UnstyledButton>
+
+            {tagline && (
+                <Text
+                    ta="center"
+                    fz={10}
+                    fw={800}
+                    c="gray.4"
+                    tt="uppercase"
+                    lts="1.5px"
+                    mt={6}
+                >
+                    {tagline}
+                </Text>
+            )}
+        </Box>
+    )
+}

package/src/components/SidebarShell.jsx

@@ -39,7 +39,7 @@ 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. */
+/** O botão de criar na linha da busca: quadrado de 36px, preto; em contorno cinza no limite do plano. */
 function CreateSquare({ icon: Icon, label, isAllowed, onClick }) {
     return (
         <Tooltip
@@ -51,7 +51,7 @@ function CreateSquare({ icon: Icon, label, isAllowed, onClick }) {
                 data-create
                 onClick={onClick}
                 aria-label={label}
-                size={43}
+                size={36}
                 radius={0}
                 variant={isAllowed ? 'filled' : 'default'}
                 color="gray.9"
@@ -59,7 +59,7 @@ function CreateSquare({ icon: Icon, label, isAllowed, onClick }) {
                 style={{ flex: 'none', '--ai-hover': 'var(--mantine-color-gray-7)' }}
             >
                 <Icon
-                    size={18}
+                    size={16}
                     stroke={2}
                     style={isAllowed ? undefined : { color: 'var(--mantine-color-gray-5)' }}
                 />
@@ -137,13 +137,13 @@ 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ó.
+              A busca se alinha com a lista: mesma borda esquerda, ícone
+              centrado na coluna dos ícones dos itens e texto onde começa o
+              rótulo de um item (42px). A altura é a de um campo, 36px, menor
+              que um item (43px): com a altura de um item, busca e criar
+              pesavam mais que a lista que servem (Ciro, 10/10/2026).
 
-              CRIAR MORA NA LINHA DA BUSCA: um quadrado preto de 43px com o
+              CRIAR MORA NA LINHA DA BUSCA: um quadrado preto de 36px 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
@@ -174,7 +174,7 @@ export function SidebarShell({
                         leftSectionWidth={42}
                         leftSection={
                             <IconSearch
-                                size={18}
+                                size={16}
                                 stroke={1.5}
                             />
                         }
@@ -194,7 +194,7 @@ export function SidebarShell({
                                 </ActionIcon>
                             ) : null
                         }
-                        styles={{ input: { height: 43, minHeight: 43, fontSize: 13, background: 'var(--mantine-color-gray-1)' } }}
+                        styles={{ input: { height: 36, minHeight: 36, fontSize: 13, background: 'var(--mantine-color-gray-1)' } }}
                     />
                     {onCreate && <CreateSquare {...criar} />}
                 </Group>

package/src/index.js

@@ -80,6 +80,7 @@ export { NavItem } from './components/NavItem'
 export { GroupLabel } from './components/GroupLabel'
 export { ResourceItem } from './components/ResourceItem'
 export { ActiveResource } from './components/ActiveResource'
+export { ColumnBrand } from './components/ColumnBrand'
 export { ListSkeleton } from './components/ListSkeleton'
 export { DashboardFrame, SIDEBAR_WIDTH } from './components/DashboardFrame'
 export { SidebarShell } from './components/SidebarShell'