@mediaradar/design-components 0.4.0 → 0.5.1

package/dist/index.d.cts

@@ -159,6 +159,7 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * ```tsx
  * <CheckBox checked={selected} ariaLabel="Select row" onChange={toggle} />
  * <CheckBox checked={allSelected} indeterminate={someSelected} ariaLabel="Select all" onChange={toggleAll} />
+ * <CheckBox checked={false} disabled ariaLabel="Select row" title="Max 5 rows -- remove one first" onChange={toggle} />
  * ```
  */
 interface CheckBoxProps {
@@ -175,8 +176,14 @@ interface CheckBoxProps {
     disabled?: boolean;
     /** Forwarded as `data-testid`, for Playwright/test selectors. */
     testId?: string;
+    /**
+     * Native tooltip -- e.g. explaining why a disabled box is disabled. Forwarded
+     * directly to the underlying `<button>`, same as a plain HTML `title` would
+     * be on any other disabled control.
+     */
+    title?: string;
 }
-declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId }: CheckBoxProps): react.JSX.Element;
+declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId, title }: CheckBoxProps): react.JSX.Element;
 
 /**
  * @pattern DateRangeFilter
@@ -252,6 +259,11 @@ declare function DateRangeFilter({ caption, defaultValue, value: controlledValue
  * border-border-interactive, focus-visible:outline-border-focus,
  * hover:text-text-primary, placeholder:text-text-tertiary, rounded-card,
  * rounded-full, shadow-overlay, text-brand-primaryAction, text-text-secondary
+ * @variant default - Default. Plain keyword input, no match-type control.
+ * @variant filterable - Adds an attached match-type dropdown sharing one
+ * bordered control, mirroring the legacy Creative Intel search + match-type
+ * modal (Any Word/Exact Match/Contextual/Ad Code), including the Or/And
+ * sub-choice nested under Any Word.
  * @dependencies lucide-react
  * @behavior The match-type dropdown ('filterable' variant) closes on Escape
  * and outside click. Each mode row is a real `radio` role, with a nested

package/dist/index.d.ts

@@ -159,6 +159,7 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * ```tsx
  * <CheckBox checked={selected} ariaLabel="Select row" onChange={toggle} />
  * <CheckBox checked={allSelected} indeterminate={someSelected} ariaLabel="Select all" onChange={toggleAll} />
+ * <CheckBox checked={false} disabled ariaLabel="Select row" title="Max 5 rows -- remove one first" onChange={toggle} />
  * ```
  */
 interface CheckBoxProps {
@@ -175,8 +176,14 @@ interface CheckBoxProps {
     disabled?: boolean;
     /** Forwarded as `data-testid`, for Playwright/test selectors. */
     testId?: string;
+    /**
+     * Native tooltip -- e.g. explaining why a disabled box is disabled. Forwarded
+     * directly to the underlying `<button>`, same as a plain HTML `title` would
+     * be on any other disabled control.
+     */
+    title?: string;
 }
-declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId }: CheckBoxProps): react.JSX.Element;
+declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId, title }: CheckBoxProps): react.JSX.Element;
 
 /**
  * @pattern DateRangeFilter
@@ -252,6 +259,11 @@ declare function DateRangeFilter({ caption, defaultValue, value: controlledValue
  * border-border-interactive, focus-visible:outline-border-focus,
  * hover:text-text-primary, placeholder:text-text-tertiary, rounded-card,
  * rounded-full, shadow-overlay, text-brand-primaryAction, text-text-secondary
+ * @variant default - Default. Plain keyword input, no match-type control.
+ * @variant filterable - Adds an attached match-type dropdown sharing one
+ * bordered control, mirroring the legacy Creative Intel search + match-type
+ * modal (Any Word/Exact Match/Contextual/Ad Code), including the Or/And
+ * sub-choice nested under Any Word.
  * @dependencies lucide-react
  * @behavior The match-type dropdown ('filterable' variant) closes on Escape
  * and outside click. Each mode row is a real `radio` role, with a nested

package/dist/index.js

@@ -391,7 +391,7 @@ function OptionRow({
 // src/CheckBox.tsx
 import { Check as Check2, Minus } from "lucide-react";
 import { jsx as jsx4 } from "react/jsx-runtime";
-function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId }) {
+function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId, title }) {
   const on = checked || indeterminate;
   return /* @__PURE__ */ jsx4(
     "button",
@@ -400,6 +400,7 @@ function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testI
       role: "checkbox",
       "aria-checked": indeterminate ? "mixed" : checked,
       "aria-label": ariaLabel,
+      title,
       disabled,
       "data-testid": testId,
       onClick: (e) => {
@@ -410,7 +411,13 @@ function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testI
         "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
         "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",
-        disabled && "cursor-not-allowed opacity-50"
+        // 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__ */ jsx4(Minus, { size: 13, strokeWidth: 3 }) : checked ? /* @__PURE__ */ jsx4(Check2, { size: 13, strokeWidth: 3 }) : null
     }