@ciromaciel/dashboard-kit 1.6.0 → 1.7.0

package/package.json

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

@@ -0,0 +1,56 @@
+import { ActionIcon, Tooltip, useMantineColorScheme } from '@mantine/core'
+import { useMounted } from '@mantine/hooks'
+import { IconDeviceDesktop, IconMoon, IconSun } from '@tabler/icons-react'
+
+/**
+ * The theme button — one icon that cycles Automático → Claro → Escuro
+ * (decided 14/10/2026).
+ *
+ * Automático follows the device and is the default for anyone who never chose.
+ * A single button hides its state in the icon, so the state is said in words
+ * twice: the tooltip and the accessible name both read "Tema: Claro. Mudar
+ * para Escuro." — what it is now, and what one click does.
+ *
+ * The icon waits for the mount. Mantine reads the stored choice from
+ * localStorage on the client only; a prerendered page would otherwise paint the
+ * server's icon and swap it on hydration.
+ *
+ * The same component lives in the components-kit for the sites; the two must
+ * move together.
+ */
+const NEXT = { auto: 'light', light: 'dark', dark: 'auto' }
+const NAME = { auto: 'Automático', light: 'Claro', dark: 'Escuro' }
+const ICON = { auto: IconDeviceDesktop, light: IconSun, dark: IconMoon }
+
+export function ColorSchemeToggle({ size = 36, ...props }) {
+    const { colorScheme, setColorScheme } = useMantineColorScheme()
+    const isMounted = useMounted()
+    const current = isMounted ? colorScheme : 'auto'
+    const Icon = ICON[current]
+    const label = `Tema: ${NAME[current]}. Mudar para ${NAME[NEXT[current]]}.`
+
+    return (
+        <Tooltip
+            label={label}
+            position="top"
+            withArrow={false}
+        >
+            <ActionIcon
+                data-color-scheme-toggle
+                variant="subtle"
+                color="gray.9"
+                size={size}
+                radius={0}
+                aria-label={label}
+                onClick={() => setColorScheme(NEXT[current])}
+                {...props}
+            >
+                <Icon
+                    size={18}
+                    stroke={1.5}
+                    aria-hidden
+                />
+            </ActionIcon>
+        </Tooltip>
+    )
+}

package/src/components/SidebarShell.jsx

@@ -1,9 +1,10 @@
 import { ActionIcon, Box, Group, ScrollArea, Stack, Text, TextInput, Tooltip } from '@mantine/core'
-import { IconSearch, IconX } from '@tabler/icons-react'
+import { IconPlus, IconSearch, IconX } from '@tabler/icons-react'
 
 import { GroupLabel } from './GroupLabel'
 import { ListSkeleton } from './ListSkeleton'
 import { NavItem } from './NavItem'
+import { ColorSchemeToggle } from './ColorSchemeToggle'
 
 /**
  * A coluna lateral de um painel, por CONFIGURAÇÃO em vez de por cópia.
@@ -39,8 +40,13 @@ 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 36px, preto; em contorno cinza no limite do plano. */
-function CreateSquare({ icon: Icon, label, isAllowed, onClick }) {
+/**
+ * O botão de criar na linha da busca: quadrado de 36px, preto, colado à busca;
+ * em contorno cinza quando o plano chegou ao limite. É a forma única do "+" em
+ * todo painel — exportado como `CreateButton` para as colunas que ainda não
+ * são o SidebarShell. Nunca um item de lista "+ Novo …" abaixo da busca.
+ */
+export function CreateButton({ icon: Icon = IconPlus, label, isAllowed = true, onClick }) {
     return (
         <Tooltip
             label={label}
@@ -196,7 +202,7 @@ export function SidebarShell({
                         }
                         styles={{ input: { height: 36, minHeight: 36, fontSize: 13, background: 'var(--mantine-color-gray-1)' } }}
                     />
-                    {onCreate && <CreateSquare {...criar} />}
+                    {onCreate && <CreateButton {...criar} />}
                 </Group>
             )}
 
@@ -301,15 +307,21 @@ export function SidebarShell({
               menu dele, junto de Conta e Assinatura. Na coluna, competiriam com
               a lista — que é o assunto da coluna.
             */}
-            {footer && (
-                <Box
-                    pt={16}
-                    w="100%"
-                    style={{ borderTop: 'var(--rlg-border)' }}
-                >
-                    {footer}
-                </Box>
-            )}
+            {/*
+              O botão de tema mora ao lado do cartão: é preferência da pessoa,
+              como Conta, e não compete com a lista. Sem cartão, ele fica só.
+            */}
+            <Group
+                pt={16}
+                w="100%"
+                gap={8}
+                wrap="nowrap"
+                align="center"
+                style={{ borderTop: 'var(--rlg-border)' }}
+            >
+                {footer && <Box style={{ flex: 1, minWidth: 0 }}>{footer}</Box>}
+                <ColorSchemeToggle style={footer ? undefined : { marginLeft: 'auto' }} />
+            </Group>
 
             {children}
         </Stack>

package/src/components/Terminal.jsx

@@ -17,13 +17,18 @@ import { IconCopy, IconCheck } from '@tabler/icons-react'
  * usa em FeaturesGrid layout="split"), para que painel e site mostrem código
  * com a mesma cara. Os valores vieram de lá, não foram escolhidos aqui.
  *
- * O fundo é gray.9 — a única superfície escura do sistema. Ela se justifica
+ * O fundo é #11181C — a única superfície escura do sistema. Ela se justifica
  * porque código é conteúdo citado, não interface: o contraste invertido marca
  * "isto é a máquina falando", e é o mesmo tratamento de qualquer terminal que
  * o desenvolvedor já tem aberto ao lado.
+ *
+ * É LITERAL, não `var(--mantine-color-gray-9)`, de propósito: o terminal é
+ * escuro nos dois temas. No modo escuro o gray.9 vira claro, e o texto branco
+ * daqui ficaria branco sobre branco. A borda é `--rlg-shell-edge`, que no
+ * escuro clareia para o terminal não se fundir com a página.
  */
 const DARK = {
-    shell: 'var(--mantine-color-gray-9)',
+    shell: '#11181C',
     bar: 'rgba(255, 255, 255, 0.06)',
     /*
      * O token vem de `tokens.css` do kit, com fallback ao literal que as
@@ -51,7 +56,7 @@ export function Terminal({ children, label, copy = true, actions, style }) {
     return (
         <Box
             style={{
-                border: '1px solid var(--mantine-color-gray-9)',
+                border: '1px solid var(--rlg-shell-edge, #11181C)',
                 background: DARK.shell,
                 overflow: 'hidden',
                 ...style,
@@ -168,7 +173,7 @@ export function TerminalOutput({ children, label = 'output', tone = 'default' })
     return (
         <Box
             style={{
-                border: '1px solid var(--mantine-color-gray-9)',
+                border: '1px solid var(--rlg-shell-edge, #11181C)',
                 borderTop: 'none',
                 background: DARK.shell,
                 overflow: 'hidden',

package/src/index.js

@@ -84,7 +84,8 @@ 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'
+export { SidebarShell, CreateButton } from './components/SidebarShell'
+export { ColorSchemeToggle } from './components/ColorSchemeToggle'
 export { AUTH_LABELS, AUTH_TEXTS } from './auth-labels'
 export { CardSkeleton } from './components/CardSkeleton'
 export { MoreResults } from './components/MoreResults'

package/src/theme.js

@@ -98,6 +98,11 @@ export const panelTheme = createTheme({
          * disc, bar); green.7 is the ink for text on white (5.0:1). Like red,
          * it never appears without the word or the glyph beside it.
          */
+        /* A rampa que o Mantine usa para as próprias superfícies no escuro
+           (corpo, campo, botão default, texto apagado). São os mesmos valores
+           do bloco escuro do CSS: dark.7 é a base, dark.6 a superfície
+           elevada, dark.4 a borda, dark.0–3 as tintas. */
+        dark: ['#D3D8DE', '#B6BEC8', '#98A1AC', '#7D8794', '#2F3840', '#2A333B', '#1A2127', '#0B0F12', '#080B0D', '#050708'],
         green: ['#F0FDF4', '#DCFCE7', '#BBF7D0', '#86EFAC', '#4ADE80', '#22C55E', '#16A34A', '#15803D', '#166534', '#14532D'],
 
         red: ['#FFF5F5', '#FFE3E3', '#FFC9C9', '#FFA8A8', '#FF8787', '#FF6B6B', '#E03131', '#C92A2A', '#B02525', '#962020'],

package/src/tokens.css

@@ -90,7 +90,18 @@
  * runtime, after this sheet.
  */
 @media (prefers-contrast: more) {
-    :root:root {
+    :root:root:root[data-mantine-color-scheme='dark'] {
+        /* No escuro o deslocamento é para o claro: o filete aparece, o label
+           e a legenda sobem um degrau. */
+        --mantine-color-gray-2: #3a444d;
+        --mantine-color-gray-3: #4b5563;
+        --mantine-color-gray-4: #b6bec8;
+        --mantine-color-gray-5: #d3d8de;
+        --mantine-color-gray-6: #e5e7eb;
+    }
+
+    :root:root[data-mantine-color-scheme='light'],
+    :root:root:not([data-mantine-color-scheme]) {
         --mantine-color-gray-2: #9ca3af;
         --mantine-color-gray-3: #9ca3af;
         --mantine-color-gray-4: #4b5563;
@@ -122,3 +133,96 @@
 :root:root[data-mantine-color-scheme='light'] {
     --mantine-color-text: var(--mantine-color-gray-6);
 }
+
+/* ===========================================================================
+ * MODO ESCURO (14/10/2026) — a rampa por elevação.
+ *
+ * A regra da Apple: a base recua e cada camada que sobe clareia — página,
+ * cartão e modal, menu aberto. Não é a rampa invertida (a proposta antiga
+ * espelhava gray.0 ↔ gray.9, e o modal herdava a cor exata da página).
+ *
+ * Os NOMES não mudam: gray.0 continua sendo "base", gray.9 continua sendo
+ * "título". Muda o valor que cada papel recebe, e todo `c="gray.6"` e
+ * `var(--mantine-color-gray-2)` já escrito acompanha sozinho. O Mantine monta
+ * `--mantine-color-gray-filled` e afins como `var(--mantine-color-gray-9)`,
+ * então o botão preenchido também vira.
+ *
+ * "white" vira a superfície elevada (#1A2127), e isso resolve duas coisas
+ * de uma vez: o Paper `bg="white"` sobe um degrau acima da página, e o texto
+ * que o autoContrast pôs em "white" sobre um preenchimento gray.9 — agora
+ * claro — fica escuro e legível.
+ *
+ * O que NÃO acompanha é o hexadecimal escrito à mão. Superfícies que são
+ * escuras nos dois temas (terminal, bloco de código, player) escrevem as
+ * suas cores literais de propósito; todo o resto usa o token.
+ *
+ * Mesmo bloco no global.css do components-kit e no tokens.css do
+ * dashboard-kit — os dois andam juntos.
+ * =========================================================================== */
+:root:root[data-mantine-color-scheme='dark'] {
+    color-scheme: dark;
+
+    --mantine-color-gray-0: #0b0f12; /* base da página */
+    --mantine-color-gray-1: #12181d; /* palco alternado, hover */
+    --mantine-color-gray-2: #222a31; /* filete */
+    --mantine-color-gray-3: #2f3840; /* borda forte, desabilitado */
+    --mantine-color-gray-4: #7d8794; /* label caixa alta — 5,3:1 */
+    --mantine-color-gray-5: #98a1ac; /* legenda — 7,4:1 */
+    --mantine-color-gray-6: #b6bec8; /* corpo — 10,3:1 */
+    --mantine-color-gray-7: #d3d8de; /* dado — 13,4:1 */
+    --mantine-color-gray-8: #e5e7eb;
+    --mantine-color-gray-9: #f3f4f6; /* título, botão — 17,5:1 */
+
+    --mantine-color-white: #1a2127; /* superfície elevada; tinta sobre preenchimento claro */
+    --mantine-color-body: #0b0f12;
+    --mantine-color-text: var(--mantine-color-gray-6);
+    --mantine-color-dimmed: var(--mantine-color-gray-5);
+    --mantine-color-placeholder: var(--mantine-color-gray-4);
+    --mantine-color-default: #1a2127;
+    --mantine-color-default-hover: #232b32;
+    --mantine-color-default-color: var(--mantine-color-gray-9);
+    --mantine-color-default-border: var(--mantine-color-gray-3);
+
+    /* Vermelho e verde clareiam: sobre a base escura, o red.6 (#E03131) e o
+       green.6 (#16A34A) do claro ficam abaixo de 4,5:1 como texto. */
+    --mantine-color-red-0: #2a1416;
+    --mantine-color-red-1: #3a1a1d;
+    --mantine-color-red-2: #5a2427;
+    --mantine-color-red-6: #ff6b6b;
+    --mantine-color-red-7: #ff8787;
+    --mantine-color-red-filled: #ff6b6b;
+    --mantine-color-red-filled-hover: #ff8787;
+    --mantine-color-green-6: #22c55e;
+    --mantine-color-green-7: #4ade80;
+
+    --rlg-elevated: #1a2127;   /* modal, gaveta */
+    --rlg-elevated-2: #232b32; /* menu, popover, lista suspensa, notificação */
+    --rlg-shell-edge: #2f3840; /* borda do terminal, escuro nos dois temas */
+}
+
+/* As camadas que sobem. No claro todas são brancas e a borda separa; no
+   escuro cada uma clareia um degrau. */
+:root[data-mantine-color-scheme='dark'] .mantine-Modal-content,
+:root[data-mantine-color-scheme='dark'] .mantine-Modal-header,
+:root[data-mantine-color-scheme='dark'] .mantine-Drawer-content,
+:root[data-mantine-color-scheme='dark'] .mantine-Drawer-header {
+    background-color: var(--rlg-elevated);
+}
+:root[data-mantine-color-scheme='dark'] .mantine-Popover-dropdown,
+:root[data-mantine-color-scheme='dark'] .mantine-Menu-dropdown,
+:root[data-mantine-color-scheme='dark'] .mantine-Combobox-dropdown,
+:root[data-mantine-color-scheme='dark'] .mantine-HoverCard-dropdown,
+:root[data-mantine-color-scheme='dark'] .mantine-Notification-root {
+    background-color: var(--rlg-elevated-2);
+}
+
+/* Imagens. A ilustração da casa é monocromática por regra (traço na rampa
+   cinza), então no escuro ela inverte: o traço preto vira claro e o fundo
+   branco some na página. Foto e captura só baixam o brilho, como a Apple
+   pede para imagem de fundo branco. `data-keep-colors` desliga as duas. */
+:root[data-mantine-color-scheme='dark'] img[src$='.svg']:not([data-keep-colors]) {
+    filter: invert(1) hue-rotate(180deg);
+}
+:root[data-mantine-color-scheme='dark'] img:not([src$='.svg']):not([data-keep-colors]) {
+    filter: brightness(0.88);
+}