@mediaradar/design-components 0.12.0 → 0.14.0

package/dist/index.cjs

@@ -482,6 +482,12 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var TONE = {
   neutral: "bg-subtle text-text-secondary",
   brand: "bg-brand-primarySoft text-brand-primaryAction",
+  // Solid, not a tint. A filter count's whole job is to be noticed -- it is
+  // what tells you the view you are looking at is filtered at all -- so it
+  // carries the full brand fill rather than the soft wash `brand` uses for a
+  // label like "Primary". Missed in the first pass, which collapsed both into
+  // one tone; the swap onto real call sites is what surfaced it.
+  brandSolid: "bg-brand-primaryAction text-brand-onprimary",
   success: "bg-status-success/15 text-text-success",
   // Heavier tint than success and danger on purpose. Equal opacity does not
   // give equal presence: the warning amber (#b8843a) sits far closer to the
@@ -511,17 +517,22 @@ var TONE_STYLE = {
   }
 };
 var KIND = {
-  label: "px-2 py-0.5",
+  // Twice the vertical room the first version had. At py-0.5 the pill hugged
+  // its text and read as a tight little tag; at py-1 it reads as a deliberate
+  // object. Taken from the status pills the product had already arrived at by
+  // hand, which were noticeably more comfortable than anything else -- the
+  // breathing room was what made them so, not their extra pixel of type.
+  label: "px-2.5 py-1",
   // Square-ish and centred, with a floor width so a 1-digit and a 3-digit
   // count are the same shape, and lining figures so the width does not shift
   // as the number changes.
   count: "h-[18px] min-w-[18px] justify-center px-1.5 tabular-nums",
   // The only kind that shouts. Caps need the letterspacing -- caps set tight
   // are harder to read than the sentence case they replaced.
-  eyebrow: "px-2 py-0.5 uppercase tracking-wider"
+  eyebrow: "px-2.5 py-1 uppercase tracking-wider"
 };
-function Badge({ tone = "neutral", kind = "label", children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+function Badge({ tone = "neutral", kind = "label", dot = false, children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "span",
     {
       style: TONE_STYLE[tone],
@@ -535,7 +546,10 @@ function Badge({ tone = "neutral", kind = "label", children, className }) {
         KIND[kind],
         className
       ),
-      children
+      children: [
+        dot && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "size-1.5 shrink-0 rounded-full bg-current" }),
+        children
+      ]
     }
   );
 }