@mediaradar/design-components 0.18.7 → 0.19.0

package/dist/index.cjs

@@ -48,11 +48,13 @@ __export(index_exports, {
   NameListModal: () => NameListModal,
   NoResultsEmptyState: () => NoResultsEmptyState,
   PRIMARY_ACTION_CLASS: () => PRIMARY_ACTION_CLASS,
+  PageHeader: () => PageHeader,
   Pager: () => Pager,
   PieChartPlaceholder: () => PieChartPlaceholder,
   PublisherBreakdownList: () => PublisherBreakdownList,
   QUIET_ACTION_CLASS: () => QUIET_ACTION_CLASS,
   SearchBar: () => SearchBar,
+  SectionHeading: () => SectionHeading,
   SectionRail: () => SectionRail,
   SelectAllVisible: () => SelectAllVisible,
   SelectFilter: () => SelectFilter,
@@ -783,6 +785,7 @@ function DateRangeFilter({
   value: controlledValue,
   range: controlledRange,
   align = "left",
+  placement = "below",
   onChange,
   onRangeChange,
   showDates = false,
@@ -867,6 +870,13 @@ function DateRangeFilter({
     onRangeChange?.(s, e);
     setOpen(false);
   };
+  const popRef = (0, import_react3.useRef)(null);
+  const [flipBelow, setFlipBelow] = (0, import_react3.useState)(false);
+  (0, import_react3.useLayoutEffect)(() => {
+    if (!open || placement !== "above" || !ref.current || !popRef.current) return;
+    setFlipBelow(ref.current.getBoundingClientRect().top < popRef.current.offsetHeight + 16);
+  }, [open, placement]);
+  const above = placement === "above" && !flipBelow;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "button",
@@ -890,7 +900,8 @@ function DateRangeFilter({
       "div",
       {
         "data-testid": testIdPrefix && `${testIdPrefix}-popover`,
-        className: `absolute top-[calc(100%+8px)] z-30 flex overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay ${align === "right" ? "right-0" : "left-0"}`,
+        ref: popRef,
+        className: `absolute z-30 flex overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay ${placement === "right" ? "bottom-0 left-full ml-2" : `${above ? "bottom-full mb-2" : "top-[calc(100%+8px)]"} ${align === "right" ? "right-0" : "left-0"}`}`,
         role: "dialog",
         "aria-label": "Select date range",
         children: [
@@ -3909,6 +3920,7 @@ var SIZES2 = {
   sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
   md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
 };
+var OFF_TRACK = "color-mix(in srgb, var(--mr-color-border-interactive) 70%, var(--mr-color-text-secondary))";
 function Toggle({ checked, onChange, label, size = "md", disabled, className, testIdPrefix }) {
   const s = SIZES2[size];
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -3921,10 +3933,11 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
       disabled,
       "data-testid": testIdPrefix && `${testIdPrefix}-toggle`,
       onClick: () => onChange(!checked),
+      style: checked ? void 0 : { backgroundColor: OFF_TRACK },
       className: cn(
         "relative inline-flex shrink-0 items-center rounded-full transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
         s.track,
-        checked ? "bg-brand-primaryAction" : "bg-border-interactive",
+        checked && "bg-brand-primaryAction",
         disabled && "cursor-not-allowed opacity-50",
         className
       ),
@@ -3979,6 +3992,30 @@ function Freshness({ level }) {
     }
   );
 }
+
+// src/SectionHeading.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function SectionHeading({ title, description, actions, as: Tag2 = "h2", id, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex flex-wrap items-end justify-between gap-x-4 gap-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Tag2, { id, className: "text-base font-semibold text-text-primary", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mt-0.5 text-dense text-text-secondary", children: description })
+    ] }),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+  ] });
+}
+
+// src/PageHeader.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function PageHeader({ title, description, actions, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("header", { className: cn("flex flex-wrap items-center justify-between gap-x-6 gap-y-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h1", { className: "text-xl font-semibold tracking-tight text-text-primary", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "mt-0.5 max-w-2xl text-sm text-text-secondary", children: description })
+    ] }),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AISpark,
@@ -4008,11 +4045,13 @@ function Freshness({ level }) {
   NameListModal,
   NoResultsEmptyState,
   PRIMARY_ACTION_CLASS,
+  PageHeader,
   Pager,
   PieChartPlaceholder,
   PublisherBreakdownList,
   QUIET_ACTION_CLASS,
   SearchBar,
+  SectionHeading,
   SectionRail,
   SelectAllVisible,
   SelectFilter,