@mediaradar/design-components 0.8.0 → 0.9.0

package/dist/index.cjs

@@ -28,6 +28,7 @@ __export(index_exports, {
   Button: () => Button,
   Card: () => Card,
   CheckBox: () => CheckBox,
+  CheckBoxBox: () => CheckBoxBox,
   ChipContent: () => ChipContent,
   DEFAULT_SEARCH_MATCH: () => DEFAULT_SEARCH_MATCH,
   DataScopeFilter: () => DataScopeFilter,
@@ -463,9 +464,39 @@ function OptionRow({
 
 // src/CheckBox.tsx
 var import_lucide_react4 = require("lucide-react");
+
+// src/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/CheckBox.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId, title }) {
-  const on = checked || indeterminate;
+function boxClass(on, disabled) {
+  return cn(
+    "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
+    on ? "border-transparent bg-brand-primaryAction text-white" : "border-border-interactive bg-input",
+    disabled && "cursor-not-allowed opacity-50"
+  );
+}
+function Glyph({ checked, indeterminate }) {
+  if (indeterminate) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Minus, { size: 13, strokeWidth: 3 });
+  return checked ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Check, { size: 13, strokeWidth: 3 }) : null;
+}
+function CheckBox({
+  checked,
+  indeterminate,
+  onChange,
+  ariaLabel,
+  disabled,
+  stopPropagation = true,
+  testId,
+  title,
+  className
+}) {
+  const on = checked || !!indeterminate;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
@@ -477,25 +508,26 @@ function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testI
       disabled,
       "data-testid": testId,
       onClick: (e) => {
-        e.stopPropagation();
+        if (stopPropagation) e.stopPropagation();
         onChange();
       },
-      className: [
-        "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
+      className: cn(
+        boxClass(on, disabled),
         "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
-        on ? "border-transparent bg-brand-primaryAction text-white" : "border-border-interactive bg-input hover:border-brand-primaryAction",
+        !on && "hover:border-brand-primaryAction",
         // Cancels the unchecked hover-border preview when disabled -- without
         // this, a disabled box still visually previews the "you can click
         // this" affordance on hover even though the click does nothing.
-        // Found empirically reconciling this against insights-studio-
-        // prototype's own (more complete) local CheckBox during its
-        // migration -- that version already had this guard.
-        disabled && "cursor-not-allowed opacity-50 hover:border-border-interactive"
-      ].filter(Boolean).join(" "),
-      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Minus, { size: 13, strokeWidth: 3 }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Check, { size: 13, strokeWidth: 3 }) : null
+        disabled && "hover:border-border-interactive",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Glyph, { checked, indeterminate })
     }
   );
 }
+function CheckBoxBox({ checked, indeterminate, disabled, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: cn(boxClass(checked || !!indeterminate, disabled), className), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Glyph, { checked, indeterminate }) });
+}
 
 // src/DateRangeFilter.tsx
 var import_react3 = require("react");
@@ -2631,15 +2663,6 @@ var import_react13 = require("react");
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
 var import_lucide_react15 = require("lucide-react");
-
-// src/cn.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
-
-// src/Button.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control font-medium transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-hidden focus-visible:ring-0",
@@ -2767,12 +2790,13 @@ function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit })
 
 // src/ChipTrigger.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
-function chipTriggerClass() {
+function chipTriggerClass(variant = "box") {
   return cn(
     "flex h-11 items-center gap-2 rounded-control border bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
-    // Sits on the input fill, with a stroke dark enough to still read as a
-    // control against the warm canvas.
-    "border-border-strong"
+    // Both variants sit on the input fill. `inline` carries the darker stroke
+    // so it still reads as a control against the warm canvas with no boxed
+    // shell behind it.
+    variant === "inline" ? "border-border-strong" : "border-border-default"
   );
 }
 function ChipContent({ caption, value, icon }) {
@@ -3599,6 +3623,7 @@ function Freshness({ level }) {
   Button,
   Card,
   CheckBox,
+  CheckBoxBox,
   ChipContent,
   DEFAULT_SEARCH_MATCH,
   DataScopeFilter,