@ciromaciel/auth-react 1.6.0 → 1.7.1

package/README.md

@@ -160,6 +160,16 @@ organization and on which plan, then one list of actions with "Sair" last.
   thing.
 - `items` are your app's own rows, passed as data (`{ id, label, icon, onClick }`), shown in their
   own group after billing. The component takes no JSX, so every app's card keeps the same shape.
+  A row may add `description` (one line saying what it does) and `tone: 'danger'` (red, for what
+  cannot be undone); `itemsLabel` titles the group:
+
+  ```jsx
+  itemsLabel="Seus dados"
+  items={[
+      { id: 'export', label: 'Exportar', description: 'Uma cópia de tudo, em JSON', icon: IconDownload, onClick: exportAll },
+      { id: 'erase', label: 'Apagar tudo', description: 'Sem volta', tone: 'danger', icon: IconTrash, onClick: eraseAll },
+  ]}
+  ```
 - `plan` and `organization` draw the context strip; leave them out and it is not drawn.
   `limit: null` hides the usage bar.
 - The strip informs; "Assinatura" is the way to billing. The strip adds a "Fazer upgrade"

package/dist/index.esm.js

@@ -4480,6 +4480,8 @@ const UPGRADE_THRESHOLD = 0.8;
  * @property {string} [id] - Stable key
  * @property {string} label - The row's text
  * @property {Function} [icon] - A Tabler icon component
+ * @property {string} [description] - One line under the label, saying what the action does
+ * @property {'danger'} [tone] - For what cannot be undone: red label and icon
  * @property {Function} onClick
  *
  * @typedef {Object} UserInformationPlan
@@ -4506,6 +4508,7 @@ const UPGRADE_THRESHOLD = 0.8;
  * @param {Function} [props.onAccountClick]
  * @param {Function} [props.onBillingClick]
  * @param {UserInformationItem[]} [props.items] - The panel's own rows, shown in their own group
+ * @param {string} [props.itemsLabel] - A title for that group ("Seus dados"); without it, none
  * @param {UserInformationPlan} [props.plan] - The plan strip; omitted, the strip is not drawn
  * @param {UserInformationOrganization} [props.organization] - Where the person is acting
  * @param {boolean} [props.branded=true] - The footer: "Protegido por Auth" and the terms link
@@ -4521,6 +4524,7 @@ function UserInformation({
   onAccountClick,
   onBillingClick,
   items = [],
+  itemsLabel,
   plan,
   organization,
   branded = true,
@@ -4618,6 +4622,7 @@ function UserInformation({
         hasDivider: !organization?.name && !plan
       }), panelRows.length > 0 && /*#__PURE__*/jsx(RowGroup, {
         rows: panelRows,
+        label: itemsLabel,
         hasDivider: true
       }), signOut && /*#__PURE__*/jsx(RowGroup, {
         rows: [{
@@ -4667,6 +4672,9 @@ function UserInformation({
   });
 }
 
+// "12.400 de 60.000 páginas", not "12400 de 60000": the History counts pages in the thousands.
+const formatCount = value => Number(value).toLocaleString('pt-BR');
+
 /** The organization, the role and the plan's usage, on the alternate surface. */
 function ContextStrip({
   organization,
@@ -4766,7 +4774,7 @@ function ContextStrip({
           fz: 12,
           fw: isFull ? 700 : 500,
           c: isFull ? 'red.8' : 'gray.6',
-          children: `${plan.used} de ${plan.limit}${plan.unit ? ` ${plan.unit}` : ''}${isFull && !limitNoticeOnTop ? ' · limite atingido' : ''}`
+          children: `${formatCount(plan.used)} de ${formatCount(plan.limit)}${plan.unit ? ` ${plan.unit}` : ''}${isFull && !limitNoticeOnTop ? ' · limite atingido' : ''}`
         }), showsInvite && /*#__PURE__*/jsx(UnstyledButton, {
           onClick: plan.onClick,
           fz: 11,
@@ -4789,24 +4797,59 @@ function ContextStrip({
 }
 function RowGroup({
   rows,
+  label,
   hasDivider
 }) {
-  return /*#__PURE__*/jsx(Stack, {
+  return /*#__PURE__*/jsxs(Stack, {
     gap: 0,
     p: 6,
+    role: label ? 'group' : undefined,
+    "aria-label": label || undefined,
     style: hasDivider ? {
       borderTop: '1px solid var(--mantine-color-gray-2)'
     } : undefined,
-    children: rows.map(row => /*#__PURE__*/jsx(Row, {
+    children: [label && /*#__PURE__*/jsx(Text, {
+      "aria-hidden": true,
+      fz: 11,
+      fw: 800,
+      tt: "uppercase",
+      lts: "1.5px",
+      c: "gray.4",
+      px: 10,
+      pt: 6,
+      pb: 2,
+      children: label
+    }), rows.map(row => /*#__PURE__*/jsx(Row, {
       ...row
-    }, row.id || row.label))
+    }, row.id || row.label))]
   });
 }
+
+/*
+ * A panel's row may carry a line saying what it does and, for what cannot be
+ * undone, the danger tone — still as data, so every card keeps one shape. The
+ * History needed both: "Apagar tudo" looked exactly like "Exportar".
+ */
+const ROW_TONES = {
+  default: {
+    text: 'gray.9',
+    icon: 'var(--mantine-color-gray-5)',
+    hover: 'var(--mantine-color-gray-1)'
+  },
+  danger: {
+    text: 'red.8',
+    icon: 'var(--mantine-color-red-8)',
+    hover: 'var(--mantine-color-red-0)'
+  }
+};
 function Row({
   label,
+  description,
+  tone,
   icon: Icon,
   onClick
 }) {
+  const look = ROW_TONES[tone] || ROW_TONES.default;
   return /*#__PURE__*/jsxs(UnstyledButton, {
     role: "menuitem",
     onClick: onClick,
@@ -4815,7 +4858,7 @@ function Row({
     w: "100%",
     style: {
       display: 'flex',
-      alignItems: 'center',
+      alignItems: description ? 'flex-start' : 'center',
       gap: 10,
       borderRadius: 0
     }
@@ -4823,23 +4866,35 @@ function Row({
      * Hover and keyboard focus share the same surface: a row reached
      * with the arrows must look exactly like the one under the mouse.
      */,
-    onMouseEnter: event => event.currentTarget.style.background = 'var(--mantine-color-gray-1)',
+    onMouseEnter: event => event.currentTarget.style.background = look.hover,
     onMouseLeave: event => event.currentTarget.style.background = 'transparent',
-    onFocus: event => event.currentTarget.style.background = 'var(--mantine-color-gray-1)',
+    onFocus: event => event.currentTarget.style.background = look.hover,
     onBlur: event => event.currentTarget.style.background = 'transparent',
     children: [Icon && /*#__PURE__*/jsx(Icon, {
       size: 16,
       stroke: 1.5,
       style: {
         flex: 'none',
-        color: 'var(--mantine-color-gray-5)'
+        color: look.icon,
+        marginTop: description ? 1 : 0
       }
-    }), /*#__PURE__*/jsx(Text, {
-      fz: 12,
-      fw: 500,
-      c: "gray.9",
-      truncate: "end",
-      children: label
+    }), /*#__PURE__*/jsxs(Box, {
+      style: {
+        minWidth: 0
+      },
+      children: [/*#__PURE__*/jsx(Text, {
+        fz: 12,
+        fw: 500,
+        c: look.text,
+        truncate: "end",
+        children: label
+      }), description && /*#__PURE__*/jsx(Text, {
+        fz: 12,
+        fw: 500,
+        c: "gray.5",
+        lh: 1.4,
+        children: description
+      })]
     })]
   });
 }