@ciromaciel/dashboard-kit 1.3.1 → 1.5.0

package/package.json

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

@@ -52,7 +52,7 @@ export function ActiveResource({ title, subtitle, tone = 'muted', mono = false }
 
             {subtitle && (
                 <Text
-                    fz={9}
+                    fz={10}
                     fw={800}
                     c={tone === 'alert' ? 'red.6' : 'gray.4'}
                     tt="uppercase"

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/DataTable.jsx

@@ -25,7 +25,7 @@ import { templateFor, ROW_PADDING, HEAD_PADDING } from './table-grid'
  * never injects the table's structure — it only says what each cell shows.
  */
 
-const HEAD = { fz: 10, fw: 800, c: 'gray.5', tt: 'uppercase', ls: '1.5px', lh: 1.4 }
+const HEAD = { fz: 10, fw: 800, c: 'gray.5', tt: 'uppercase', lts: '1.5px', lh: 1.4 }
 
 export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected, quietSelection, getRowLabel, toolbar, footer, emptyState, loading, skeleton }) {
     const clickable = typeof onRowClick === 'function'

package/src/components/DeleteModal.jsx

@@ -162,7 +162,7 @@ export function DeleteModal({
                         fw={800}
                         c="red.6"
                         tt="uppercase"
-                        ls="1.5px"
+                        lts="1.5px"
                     >
                         {eyebrow}
                     </Text>
@@ -182,7 +182,7 @@ export function DeleteModal({
                     fz={scale.fz}
                     lh={1.15}
                     mt={12}
-                    ls="-0.04em"
+                    lts="-0.04em"
                     c="gray.9"
                     /*
                      * `break-all` only where the title IS the identifier. On the

package/src/components/EmptyState.jsx

@@ -23,7 +23,7 @@ export function EmptyState({ title, description, actionLabel, onAction }) {
                 fw={800}
                 c="gray.4"
                 tt="uppercase"
-                ls="1.5px"
+                lts="1.5px"
                 ta="center"
             >
                 {title}

package/src/components/HoldToConfirm.jsx

@@ -138,8 +138,13 @@ export function HoldToConfirmButton({ children, holdingLabel, onConfirm, disable
             {...props}
         >
             {active ? (
+                /* The countdown inherits the button's colour. It was gray.6,
+                   which on the filled red.6 variant measured about 1.3:1 —
+                   the number that says how long is left was unreadable.
+                   Explicit `inherit`, because the panel themes give Text a
+                   default colour that would otherwise win. */
                 <Text
-                    c="gray.6"
+                    c="inherit"
                     span
                     inherit
                 >

package/src/components/Metric.jsx

@@ -110,7 +110,7 @@ export function Metric({ label, value, unit, note, hint, delta, deltaSuffix = '%
                         fw={900}
                         c="gray.9"
                         lh={1}
-                        ls="-0.04em"
+                        lts="-0.04em"
                         style={{ overflowWrap: 'anywhere' }}
                     >
                         {value ?? '—'}
@@ -134,7 +134,7 @@ export function Metric({ label, value, unit, note, hint, delta, deltaSuffix = '%
                 fw={800}
                 c="gray.4"
                 tt="uppercase"
-                ls="1.5px"
+                lts="1.5px"
                 lh={1.4}
                 mt={12}
             >

package/src/components/MoreResults.jsx

@@ -77,7 +77,7 @@ export function MoreResults({ loading, hasMore, onLoadMore, shown, total, noun =
                     fw={800}
                     c="gray.4"
                     tt="uppercase"
-                    ls="1.5px"
+                    lts="1.5px"
                 >
                     {total} {total === 1 ? noun : plural} · fim da lista
                 </Text>
@@ -103,7 +103,7 @@ export function MoreResults({ loading, hasMore, onLoadMore, shown, total, noun =
                             fw={800}
                             c="gray.4"
                             tt="uppercase"
-                            ls="1.5px"
+                            lts="1.5px"
                             /* `aria-live` because a scroll-triggered load has no
                                focus: without this, a screen reader would not know
                                the list had grown. */
@@ -127,7 +127,7 @@ export function MoreResults({ loading, hasMore, onLoadMore, shown, total, noun =
                     fw={800}
                     c="gray.4"
                     tt="uppercase"
-                    ls="1.5px"
+                    lts="1.5px"
                 >
                     {shown} de {total}
                 </Text>

package/src/components/PageHeader.jsx

@@ -64,7 +64,7 @@ export function PageHeader({ crumb, title, subtitle, actions, order = 1, mb = 32
                         fw={800}
                         c="gray.4"
                         tt="uppercase"
-                        ls="1.5px"
+                        lts="1.5px"
                         lh={1.4}
                     >
                         {trilha}
@@ -91,7 +91,7 @@ export function PageHeader({ crumb, title, subtitle, actions, order = 1, mb = 32
                      */
                     fw={900}
                     lh={1}
-                    ls="-0.04em"
+                    lts="-0.04em"
                     c="gray.9"
                     style={{ overflowWrap: 'anywhere' }}
                 >

package/src/components/ResourceItem.jsx

@@ -75,7 +75,7 @@ export function ResourceItem({ icon: Icon, title, subtitle, tone = 'muted', mono
 
                 {subtitle && (
                     <Text
-                        fz={9}
+                        fz={10}
                         fw={800}
                         c={tone === 'alert' ? 'red.6' : 'gray.4'}
                         tt="uppercase"

package/src/components/SectionCard.jsx

@@ -56,7 +56,7 @@ export function SectionCard({ eyebrow, title, lead, action, children }) {
                             c="gray.4"
                             tt="uppercase"
                             mb={6}
-                            ls="1.5px"
+                            lts="1.5px"
                         >
                             {eyebrow}
                         </Text>
@@ -66,7 +66,7 @@ export function SectionCard({ eyebrow, title, lead, action, children }) {
                         fz={18}
                         fw={800}
                         lh={1.2}
-                        ls="-0.02em"
+                        lts="-0.02em"
                         c="gray.9"
                     >
                         {title}

package/src/components/SupportModal.jsx

@@ -111,7 +111,7 @@ export function HealthRow({ health, host }) {
                 />
                 <Text
                     fz={12}
-                    fw={600}
+                    fw={500}
                     c="gray.9"
                     lineClamp={1}
                 >
@@ -198,7 +198,7 @@ export function SupportModal({
                     fz={{ base: 26, sm: 36 }}
                     lh={1.05}
                     mt={12}
-                    ls="-0.04em"
+                    lts="-0.04em"
                     c="gray.9"
                 >
                     {title}{' '}

package/src/components/TableToolbar.jsx

@@ -124,7 +124,7 @@ export function TableToolbar({ value = '', onChange, placeholder = 'Buscar…',
                     fw={800}
                     c="gray.4"
                     tt="uppercase"
-                    ls="1.5px"
+                    lts="1.5px"
                     style={{ flexShrink: 0 }}
                     visibleFrom="sm"
                 >

package/src/components/Wordmark.jsx

@@ -40,7 +40,7 @@ export function Wordmark({ name, variant = 'mark', size, ...props }) {
             fz={size ?? (isLabel ? 11 : 28)}
             fw={isLabel ? 800 : 900}
             tt={isLabel ? 'uppercase' : undefined}
-            ls={isLabel ? '1.5px' : '-0.04em'}
+            lts={isLabel ? '1.5px' : '-0.04em'}
             lh={isLabel ? 1.4 : 1}
             c={isLabel ? 'gray.4' : 'gray.9'}
             ta="center"

package/src/components/ZenLabel.jsx

@@ -19,7 +19,7 @@ export function ZenLabel({ children, ...props }) {
             fz={11}
             fw={800}
             tt="uppercase"
-            ls="1.5px"
+            lts="1.5px"
             c="gray.4"
             lh={1.4}
             {...props}

package/src/components/notify.js

@@ -43,20 +43,31 @@ const icon = Component => createElement(Component, { size: 18, stroke: 2, color:
  * rule — `--mantine-color-black`, a pure black the system's ramp does not
  * contain (gray.9 is #11181C precisely to avoid it).
  */
-const show = (color, glyph, title, message) =>
+const show = (color, glyph, title, message, options) =>
     notifications.show({
         ...(message === undefined ? { message: title } : { title, message }),
         color,
         icon: glyph,
+        ...options,
     })
 
+/**
+ * An error stays until it is dismissed.
+ *
+ * Apple's rule is to prefer explicit dismissal over views that vanish on a
+ * timer, and WCAG 2.2.1 says the same: an error read in five seconds is an
+ * error missed by whoever looked away. Success and info still leave on their
+ * own — they ask for nothing.
+ */
+const STICKY = { autoClose: false }
+
 export const notify = {
     success(title, message) {
         show('teal', icon(IconCheck), title, message)
     },
 
     error(title, message) {
-        show('red', icon(IconAlertCircle), title, message)
+        show('red', icon(IconAlertCircle), title, message, STICKY)
     },
 
     info(title, message) {

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'

package/src/tokens.css

@@ -56,3 +56,61 @@
 .rlg-danger:focus-visible {
     outline-color: var(--mantine-color-red-7);
 }
+
+/*
+ * The rules below are the same floor the components-kit ships in its global
+ * stylesheet. The panels don't load that sheet, so they are repeated here — the
+ * two files must move together.
+ */
+
+/*
+ * One focus ring everywhere: gray.9, 2px, 2px away, square like the element it
+ * surrounds. `.rlg-danger` above keeps the shape and changes only the colour.
+ */
+:focus-visible {
+    outline: 2px solid var(--mantine-color-gray-9);
+    outline-offset: 2px;
+}
+
+/*
+ * 44px under a finger. A panel is dense on purpose — 36px search, 36px create
+ * button, `sm` buttons — and that is right for a mouse. A thumb needs Apple's
+ * 44px (WCAG 2.5.5), so only coarse pointers get the floor.
+ */
+@media (pointer: coarse) {
+    .mantine-Button-root,
+    .mantine-ActionIcon-root,
+    .mantine-CloseButton-root {
+        min-height: 44px;
+        min-width: 44px;
+    }
+}
+
+/*
+ * Increased contrast moves the ramp one step darker where it is weakest: the
+ * gray.4 label (2.6:1) becomes gray.6, gray.5 becomes gray.7, and the gray.2
+ * hairline becomes gray.4. `:root:root` beats the `:root` Mantine injects at
+ * runtime, after this sheet.
+ */
+@media (prefers-contrast: more) {
+    :root:root {
+        --mantine-color-gray-2: #9ca3af;
+        --mantine-color-gray-3: #9ca3af;
+        --mantine-color-gray-4: #4b5563;
+        --mantine-color-gray-5: #374151;
+        --mantine-color-gray-6: #374151;
+    }
+}
+
+/*
+ * Reduced motion: the sidebar appears instead of sliding in. Background and
+ * colour fades on rows and menu items stay — a fade is what Apple asks motion
+ * to become, not something to remove.
+ */
+@media (prefers-reduced-motion: reduce) {
+    .mantine-AppShell-navbar,
+    .mantine-AppShell-main,
+    .mantine-AppShell-header {
+        transition: none !important;
+    }
+}