@mediaradar/design-components 0.4.0 → 0.5.0

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

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

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) => {