@ciromaciel/dashboard-kit 1.0.4 → 1.1.0

package/README.md

@@ -41,7 +41,8 @@ function Projects({ rows, loading }) {
 | `SectionCard` · `Field` · `FieldStacked` · `CardActions` | The section card |
 | `PageHeader` | Title and breadcrumb |
 | `HoldToConfirmButton` · `HoldToConfirmIcon` | The reversible destructive confirm |
-| `DeleteModal` · `deleteTitleScale` | The top of the escalation: reversible → hold → this |
+| `DeleteModal` · `deleteTitleScale` | The top of the escalation: reversible → hold → this. `before` holds the way out (backup) |
+| `DangerZone` | The door to `DeleteModal` at the end of a settings page |
 | `AuthLoader` · `AuthScreen` · `AUTH_LABELS` · `AUTH_TEXTS` | The moment the dashboard does not know who you are |
 | `Wordmark` | The mark, in two roles (`variant="mark"` / `"label"`). The name comes by prop |
 | `ZenLabel` · `notify` · `NOTIFICATIONS_PROPS` · `NOTIFY_DESCRIPTION_CSS` · `notificationTheme` | Label and notice |

package/package.json

@@ -1,9 +1,9 @@
 {
     "name": "@ciromaciel/dashboard-kit",
-    "version": "1.0.4",
+    "version": "1.1.0",
     "license": "MIT",
     "type": "module",
-    "description": "The components every dashboard shares: table, empty state, loading state, destructive confirm and wordmark.",
+    "description": "The components every dashboard shares: table, empty state, loading state, destructive confirm, danger zone and wordmark.",
     "main": "src/index.js",
     "files": [
         "src",

package/src/components/DangerZone.css

@@ -0,0 +1,25 @@
+/*
+ * The row reflows by width: label · description · action on a wide card, one
+ * column on a phone. A media query cannot live in inline style, and a
+ * `useMediaQuery` would render the wrong layout on the first frame.
+ */
+.rlg-danger-zone {
+    border: 1px solid var(--mantine-color-red-2);
+    background: var(--mantine-color-body, #fff);
+}
+
+.rlg-danger-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 10px;
+    align-items: center;
+    padding: 16px;
+}
+
+@media (min-width: 48em) {
+    .rlg-danger-row {
+        grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto;
+        gap: 8px 24px;
+        padding: 16px 20px;
+    }
+}

package/src/components/DangerZone.jsx

@@ -0,0 +1,106 @@
+import { Box, Button, Group, Stack, Text } from '@mantine/core'
+import { IconAlertTriangle, IconTrash } from '@tabler/icons-react'
+
+import './DangerZone.css'
+
+/**
+ * The danger zone — the door to an irreversible action on a settings page.
+ *
+ * An audit found six versions across seven panels: "Danger Zone" in English,
+ * "Zona de perigo", "Zona de risco" with a gray eyebrow, red borders from red.2
+ * to red.6, filled, light and outline buttons, and one panel with no zone at
+ * all — the delete hidden inside a collapsed "advanced" card. None of it
+ * encoded a difference in the product.
+ *
+ * The door says what happens in one sentence and nothing else. The inventory
+ * and the backup exit belong to `DeleteModal`, which measures on open; showing
+ * them here too would put the same list in two places and fetch it on every
+ * visit to a page people open to rename things.
+ *
+ * @param {object}   props
+ * @param {string}   props.title        The action, verb first: "Excluir projeto".
+ * @param {string}   props.description  What is lost, in one sentence.
+ * @param {Function} props.onAction     Opens the confirmation. Never deletes directly.
+ * @param {string}   props.actionLabel  Defaults to `${title}…` — the ellipsis says a step follows.
+ * @param {string}   props.hint
+ * @param {boolean}  props.disabled
+ * @param {boolean}  props.loading
+ * @param {string}   props.eyebrow      Same word as DeleteModal's.
+ */
+export function DangerZone({ title, description, onAction, actionLabel = `${title}…`, hint = 'Irreversível', disabled = false, loading = false, eyebrow = 'Zona de risco' }) {
+    return (
+        <Box
+            className="rlg-danger-zone"
+            component="section"
+            aria-label={eyebrow}
+        >
+            <Group
+                gap={6}
+                wrap="nowrap"
+                px={{ base: 16, sm: 20 }}
+                pt={14}
+            >
+                <IconAlertTriangle
+                    size={13}
+                    stroke={2.5}
+                    style={{ color: 'var(--mantine-color-red-6)', flex: 'none' }}
+                />
+                <Text
+                    fz={10}
+                    fw={800}
+                    c="red.6"
+                    tt="uppercase"
+                    lts="1.5px"
+                >
+                    {eyebrow}
+                </Text>
+            </Group>
+
+            <Box className="rlg-danger-row">
+                <Stack gap={2}>
+                    <Text
+                        fz={13}
+                        fw={800}
+                        c="gray.9"
+                    >
+                        {title}
+                    </Text>
+                    {hint ? (
+                        <Text
+                            fz={12}
+                            c="gray.5"
+                            lh={1.4}
+                        >
+                            {hint}
+                        </Text>
+                    ) : null}
+                </Stack>
+
+                <Text
+                    fz={13}
+                    c="gray.6"
+                    lh={1.5}
+                >
+                    {description}
+                </Text>
+
+                <Button
+                    className="rlg-danger"
+                    color="red.7"
+                    variant="outline"
+                    leftSection={
+                        <IconTrash
+                            size={14}
+                            stroke={1.5}
+                        />
+                    }
+                    onClick={onAction}
+                    disabled={disabled}
+                    loading={loading}
+                >
+                    {actionLabel}
+                </Button>
+            </Box>
+        </Box>
+    )
+}

package/src/components/DeleteModal.jsx

@@ -88,6 +88,7 @@ export function deleteTitleScale(value) {
  * @param {boolean}  props.loading
  * @param {boolean}  props.caseSensitive   See `matches` below.
  * @param {string}   props.eyebrow
+ * @param {ReactNode} props.before         The way out before confirming — a backup, an export.
  */
 export function DeleteModal({
     opened,
@@ -102,6 +103,7 @@ export function DeleteModal({
     loading = false,
     caseSensitive = false,
     eyebrow = 'Zona de risco',
+    before = null,
 }) {
     const [typed, setTyped] = useState('')
 
@@ -232,6 +234,12 @@ export function DeleteModal({
                     </Box>
                 ) : null}
 
+                {/*
+                 * The exit comes BEFORE the field: offering the backup after
+                 * the confirmation is offering it too late.
+                 */}
+                {before ? <Box mt={24}>{before}</Box> : null}
+
                 {/*
                  * No rule before the confirmation — the footer's is the only
                  * one. Two hairlines inside 520px cut the modal into three
@@ -319,6 +327,7 @@ export function DeleteModal({
                     gap={8}
                 >
                     <Button
+                        className="rlg-danger"
                         color="red.7"
                         onClick={confirm}
                         disabled={!canDelete}

package/src/components/HoldToConfirm.jsx

@@ -105,6 +105,7 @@ export function HoldToConfirmIcon({ icon, label, onConfirm, disabled, color = 'r
                     />
                 )}
                 <ActionIcon
+                    className="rlg-danger"
                     color={active ? color : 'gray'}
                     aria-label={label}
                     disabled={disabled}
@@ -128,6 +129,7 @@ export function HoldToConfirmButton({ children, holdingLabel, onConfirm, disable
 
     return (
         <Button
+            className="rlg-danger"
             color="red.6"
             disabled={disabled}
             loading={loading}

package/src/index.js

@@ -56,6 +56,11 @@ export { HoldToConfirmIcon, HoldToConfirmButton } from './components/HoldToConfi
 // of them across the seven panels and no two alike, so the shape lives here
 // now. `design-system/10-modal-de-exclusao.md` says why.
 export { DeleteModal, deleteTitleScale } from './components/DeleteModal'
+
+// ── The danger zone ──────────────────────────────────────────────────────
+// The door to the modal above, at the end of a settings page. One sentence and
+// one button; the inventory and the backup live in the modal.
+export { DangerZone } from './components/DangerZone'
 export { ZenLabel } from './components/ZenLabel'
 export { notify } from './components/notify'
 export { NOTIFICATIONS_PROPS, NOTIFY_DESCRIPTION_CSS, notificationTheme } from './components/notify-theme'

package/src/tokens.css

@@ -45,3 +45,14 @@
      */
     --rlg-status-up: #16a34a;
 }
+
+/*
+ * The focus ring of a destructive control is red.
+ *
+ * Mantine draws every ring in the primary colour — gray.9 in all seven themes —
+ * so a red outline button showed a black ring the moment focus returned to it
+ * after closing its modal. `.rlg-danger` marks the kit's destructive controls.
+ */
+.rlg-danger:focus-visible {
+    outline-color: var(--mantine-color-red-7);
+}