@ciromaciel/dashboard-kit 1.7.2 → 1.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/Tag.jsx +79 -0
- package/src/index.js +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { forwardRef } from 'react'
|
|
2
|
+
import { Text } from '@mantine/core'
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* The tag — the one status and label mark in every panel (14/10/2026).
|
|
6
|
+
*
|
|
7
|
+
* It came from the Blogs list (and before that from Links and Videos), where
|
|
8
|
+
* it is drawn as a 10px uppercase word in a hairline box. Seven panels carried
|
|
9
|
+
* a copy and the copies had started to drift (Newsletter's neutral ink was a
|
|
10
|
+
* step darker, Videos had a teal "ok"), while the Infrastructure panels drew
|
|
11
|
+
* the same idea with Mantine's Badge in three other ways. This is the one.
|
|
12
|
+
*
|
|
13
|
+
* neutral hairline gray.3, ink gray.6 Rascunho, Desligado, Entregue, a role
|
|
14
|
+
* dark filled gray.9, ink white the state that is live: Publicado, Ativo, No ar
|
|
15
|
+
* up hairline + green square a state MEASURED now: Verificado, Entregando
|
|
16
|
+
* no hairline and ink in red failure or loss: Falhou
|
|
17
|
+
*
|
|
18
|
+
* `icon` puts a 12px glyph before the word — for a state that asks for
|
|
19
|
+
* attention (Em revisão, Agendado, Retida). Colour is never the only signal:
|
|
20
|
+
* the word always says the state.
|
|
21
|
+
*
|
|
22
|
+
* Every value is a theme variable, so the tag follows light and dark mode: the
|
|
23
|
+
* dark tone turns into a light fill with dark ink.
|
|
24
|
+
*/
|
|
25
|
+
const TONES = {
|
|
26
|
+
neutral: { border: 'var(--mantine-color-gray-3)', color: 'var(--mantine-color-gray-6)', background: 'transparent' },
|
|
27
|
+
dark: { border: 'var(--mantine-color-gray-9)', color: 'var(--mantine-color-white)', background: 'var(--mantine-color-gray-9)' },
|
|
28
|
+
up: { border: 'var(--mantine-color-gray-3)', color: 'var(--mantine-color-gray-7)', background: 'transparent' },
|
|
29
|
+
no: { border: 'var(--mantine-color-red-6)', color: 'var(--mantine-color-red-7)', background: 'transparent' },
|
|
30
|
+
}
|
|
31
|
+
// The older names the copies used: `ok` (Videos, People), `default` (People).
|
|
32
|
+
TONES.ok = TONES.up
|
|
33
|
+
TONES.default = TONES.neutral
|
|
34
|
+
|
|
35
|
+
// forwardRef so a Tooltip can wrap it (the e-mail log explains a failure on hover).
|
|
36
|
+
export const Tag = forwardRef(function Tag({ tone = 'neutral', icon: Icon, children, style, ...rest }, ref) {
|
|
37
|
+
const look = TONES[tone] ?? TONES.neutral
|
|
38
|
+
return (
|
|
39
|
+
<Text
|
|
40
|
+
ref={ref}
|
|
41
|
+
component="span"
|
|
42
|
+
data-tag={tone}
|
|
43
|
+
display="inline-flex"
|
|
44
|
+
fz={10}
|
|
45
|
+
fw={800}
|
|
46
|
+
tt="uppercase"
|
|
47
|
+
lts="1.5px"
|
|
48
|
+
lh={1.5}
|
|
49
|
+
px={6}
|
|
50
|
+
py={2}
|
|
51
|
+
style={{
|
|
52
|
+
border: `1px solid ${look.border}`,
|
|
53
|
+
color: look.color,
|
|
54
|
+
background: look.background,
|
|
55
|
+
whiteSpace: 'nowrap',
|
|
56
|
+
alignItems: 'center',
|
|
57
|
+
gap: 4,
|
|
58
|
+
verticalAlign: 'middle',
|
|
59
|
+
...style,
|
|
60
|
+
}}
|
|
61
|
+
{...rest}
|
|
62
|
+
>
|
|
63
|
+
{tone === 'up' || tone === 'ok' ? (
|
|
64
|
+
<span
|
|
65
|
+
aria-hidden="true"
|
|
66
|
+
style={{ width: 6, height: 6, background: 'var(--rlg-success)', flex: 'none' }}
|
|
67
|
+
/>
|
|
68
|
+
) : null}
|
|
69
|
+
{Icon ? (
|
|
70
|
+
<Icon
|
|
71
|
+
size={12}
|
|
72
|
+
stroke={1.5}
|
|
73
|
+
aria-hidden="true"
|
|
74
|
+
/>
|
|
75
|
+
) : null}
|
|
76
|
+
{children}
|
|
77
|
+
</Text>
|
|
78
|
+
)
|
|
79
|
+
})
|
package/src/index.js
CHANGED
|
@@ -62,6 +62,7 @@ export { DeleteModal, deleteTitleScale } from './components/DeleteModal'
|
|
|
62
62
|
// one button; the inventory and the backup live in the modal.
|
|
63
63
|
export { DangerZone } from './components/DangerZone'
|
|
64
64
|
export { ZenLabel } from './components/ZenLabel'
|
|
65
|
+
export { Tag } from './components/Tag'
|
|
65
66
|
export { notify } from './components/notify'
|
|
66
67
|
export { NOTIFICATIONS_PROPS, NOTIFY_DESCRIPTION_CSS, notificationTheme } from './components/notify-theme'
|
|
67
68
|
export { panelTheme } from './theme'
|