@ciromaciel/dashboard-kit 1.7.1 → 1.8.0

package/package.json

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

@@ -0,0 +1,78 @@
+import { forwardRef } from 'react'
+import { Text } from '@mantine/core'
+
+/**
+ * The tag — the one status and label mark in every panel (14/10/2026).
+ *
+ * It came from the Blogs list (and before that from Links and Videos), where
+ * it is drawn as a 10px uppercase word in a hairline box. Seven panels carried
+ * a copy and the copies had started to drift (Newsletter's neutral ink was a
+ * step darker, Videos had a teal "ok"), while the Infrastructure panels drew
+ * the same idea with Mantine's Badge in three other ways. This is the one.
+ *
+ *   neutral  hairline gray.3, ink gray.6     Rascunho, Desligado, Entregue, a role
+ *   dark     filled gray.9, ink white        the state that is live: Publicado, Ativo, No ar
+ *   up       hairline + green square         a state MEASURED now: Verificado, Entregando
+ *   no       hairline and ink in red         failure or loss: Falhou
+ *
+ * `icon` puts a 12px glyph before the word — for a state that asks for
+ * attention (Em revisão, Agendado, Retida). Colour is never the only signal:
+ * the word always says the state.
+ *
+ * Every value is a theme variable, so the tag follows light and dark mode: the
+ * dark tone turns into a light fill with dark ink.
+ */
+const TONES = {
+    neutral: { border: 'var(--mantine-color-gray-3)', color: 'var(--mantine-color-gray-6)', background: 'transparent' },
+    dark: { border: 'var(--mantine-color-gray-9)', color: 'var(--mantine-color-white)', background: 'var(--mantine-color-gray-9)' },
+    up: { border: 'var(--mantine-color-gray-3)', color: 'var(--mantine-color-gray-7)', background: 'transparent' },
+    no: { border: 'var(--mantine-color-red-6)', color: 'var(--mantine-color-red-7)', background: 'transparent' },
+}
+// The older names the copies used.
+TONES.ok = TONES.up
+
+// forwardRef so a Tooltip can wrap it (the e-mail log explains a failure on hover).
+export const Tag = forwardRef(function Tag({ tone = 'neutral', icon: Icon, children, style, ...rest }, ref) {
+    const look = TONES[tone] ?? TONES.neutral
+    return (
+        <Text
+            ref={ref}
+            component="span"
+            data-tag={tone}
+            display="inline-flex"
+            fz={10}
+            fw={800}
+            tt="uppercase"
+            lts="1.5px"
+            lh={1.5}
+            px={6}
+            py={2}
+            style={{
+                border: `1px solid ${look.border}`,
+                color: look.color,
+                background: look.background,
+                whiteSpace: 'nowrap',
+                alignItems: 'center',
+                gap: 4,
+                verticalAlign: 'middle',
+                ...style,
+            }}
+            {...rest}
+        >
+            {tone === 'up' || tone === 'ok' ? (
+                <span
+                    aria-hidden="true"
+                    style={{ width: 6, height: 6, background: 'var(--rlg-success)', flex: 'none' }}
+                />
+            ) : null}
+            {Icon ? (
+                <Icon
+                    size={12}
+                    stroke={1.5}
+                    aria-hidden="true"
+                />
+            ) : null}
+            {children}
+        </Text>
+    )
+})

package/src/index.js

@@ -62,6 +62,7 @@ export { DeleteModal, deleteTitleScale } from './components/DeleteModal'
 // one button; the inventory and the backup live in the modal.
 export { DangerZone } from './components/DangerZone'
 export { ZenLabel } from './components/ZenLabel'
+export { Tag } from './components/Tag'
 export { notify } from './components/notify'
 export { NOTIFICATIONS_PROPS, NOTIFY_DESCRIPTION_CSS, notificationTheme } from './components/notify-theme'
 export { panelTheme } from './theme'

package/src/theme.js

@@ -165,14 +165,14 @@ export const panelTheme = createTheme({
         Menu: {
             defaultProps: { shadow: 'none', width: 210, withinPortal: true, radius: 0 },
             styles: theme => ({
-                dropdown: { border: `1px solid ${theme.colors.gray[2]}` },
+                dropdown: { border: `1px solid var(--mantine-color-gray-2)` },
                 item: { fontSize: rem(13), fontWeight: 500 },
                 label: { fontSize: rem(10), fontWeight: 800, textTransform: 'uppercase', letterSpacing: '1.5px' },
             }),
         },
         Popover: {
             defaultProps: { shadow: 'none', radius: 0 },
-            styles: theme => ({ dropdown: { border: `1px solid ${theme.colors.gray[2]}` } }),
+            styles: theme => ({ dropdown: { border: `1px solid var(--mantine-color-gray-2)` } }),
         },
 
         // --- DATA ---
@@ -192,11 +192,11 @@ export const panelTheme = createTheme({
                     fontWeight: 800,
                     textTransform: 'uppercase',
                     letterSpacing: '1.5px',
-                    color: theme.colors.gray[5],
-                    borderBottom: `1px solid ${theme.colors.gray[2]}`,
+                    color: "var(--mantine-color-gray-5)",
+                    borderBottom: `1px solid var(--mantine-color-gray-2)`,
                     whiteSpace: 'nowrap',
                 },
-                td: { borderBottom: `1px solid ${theme.colors.gray[2]}`, fontSize: rem(13), color: theme.colors.gray[7] },
+                td: { borderBottom: `1px solid var(--mantine-color-gray-2)`, fontSize: rem(13), color: "var(--mantine-color-gray-7)" },
             }),
         },
         Badge: {
@@ -272,7 +272,7 @@ export const panelTheme = createTheme({
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: (theme, props) => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-2)` },
             }),
         },
         /**
@@ -290,35 +290,35 @@ export const panelTheme = createTheme({
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: (theme, props) => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-2)` },
             }),
         },
         Textarea: {
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: (theme, props) => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-2)` },
             }),
         },
         Select: {
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: (theme, props) => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-2)` },
             }),
         },
         NumberInput: {
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: theme => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: { border: `1px solid ${theme.colors.gray[2]}` },
+                input: { border: `1px solid var(--mantine-color-gray-2)` },
             }),
         },
         Autocomplete: {
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: theme => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: { border: `1px solid ${theme.colors.gray[2]}` },
+                input: { border: `1px solid var(--mantine-color-gray-2)` },
             }),
         },
         /**
@@ -343,7 +343,7 @@ export const panelTheme = createTheme({
             styles: theme => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
                 input: {
-                    border: `1px solid ${theme.colors.gray[2]}`,
+                    border: `1px solid var(--mantine-color-gray-2)`,
                     minHeight: rem(36),
                     display: 'flex',
                     alignItems: 'center',
@@ -356,7 +356,7 @@ export const panelTheme = createTheme({
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: theme => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: { border: `1px solid ${theme.colors.gray[2]}` },
+                input: { border: `1px solid var(--mantine-color-gray-2)` },
             }),
         },
         SegmentedControl: {
@@ -381,10 +381,10 @@ export const panelTheme = createTheme({
                     fontFamily: 'var(--mantine-font-family-monospace)',
                     fontSize: rem(10),
                     fontWeight: 700,
-                    color: theme.colors.gray[5],
+                    color: "var(--mantine-color-gray-5)",
                     backgroundColor: theme.white,
-                    border: `1px solid ${theme.colors.gray[2]}`,
-                    borderBottomColor: theme.colors.gray[2],
+                    border: `1px solid var(--mantine-color-gray-2)`,
+                    borderBottomColor: "var(--mantine-color-gray-2)",
                     boxShadow: 'none',
                     borderRadius: 0,
                 },