@mediaradar/design-components 0.13.0 → 0.15.0

package/dist/index.d.cts

@@ -163,6 +163,14 @@ interface BadgeProps {
     tone?: BadgeTone;
     /** Shape and case. `count` for a number, `eyebrow` for a category label. */
     kind?: BadgeKind;
+    /**
+     * Draws a small filled dot before the label, in the tone's own ink. For a
+     * status that is scanned down a column rather than read -- the dot is what
+     * the eye follows, and it carries the colour at a size the text cannot.
+     * Purely decorative: the label is the accessible content, so the dot is
+     * hidden from assistive tech rather than announced as a second thing.
+     */
+    dot?: boolean;
     /** Text, or an icon plus text. Keep it to a few words -- a badge annotates, it does not explain. */
     children: ReactNode;
     className?: string;
@@ -176,8 +184,9 @@ interface BadgeProps {
  * @props
  * tone?: 'neutral' | 'brand' | 'brandSolid' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
  * kind?: 'label' | 'count' | 'eyebrow' (default 'label')
+ * dot?: boolean (default false) -- a filled dot before the label, in the tone's ink
  * children: ReactNode
- * @tokens text-micro, rounded-full, bg-subtle, bg-brand-primarySoft, bg-brand-primaryAction,
+ * @tokens text-micro, rounded-full, bg-current, bg-subtle, bg-brand-primarySoft, bg-brand-primaryAction,
  * bg-status-success/15, bg-status-warning/30, bg-status-danger/15, bg-scrim,
  * text-text-secondary, text-brand-primaryAction, text-text-success,
  * text-text-warning, text-text-danger, text-ai-ontint, text-brand-onprimary,
@@ -213,11 +222,12 @@ interface BadgeProps {
  * <Badge>Financial Services</Badge>
  * <Badge tone="brandSolid" kind="count">{activeFilters}</Badge>
  * <Badge tone="warning">Partial month</Badge>
+ * <Badge tone="success" dot>Completed</Badge>
  * <Badge kind="eyebrow" tone="neutral">Saved view</Badge>
  * <Badge tone="brand"><Check size={11} aria-hidden="true" />Primary</Badge>
  * ```
  */
-declare function Badge({ tone, kind, children, className }: BadgeProps): react.JSX.Element;
+declare function Badge({ tone, kind, dot, children, className }: BadgeProps): react.JSX.Element;
 
 /**
  * @pattern CheckBox
@@ -968,18 +978,29 @@ declare function StackedColumnPlaceholder({ height, width, legendRows, axis, }:
  * escapes both `overflow` clipping inside scrollable panels and the broken
  * `fixed` containing block a transformed ancestor creates.
  * @tokens rounded-control, border-border-default, bg-surface, shadow-overlay,
- * text-text-primary, bg-text-primary, text-surface
+ * text-text-primary, bg-text-primary, text-surface,
+ * duration-(--mr-motion-duration-interactive)
  * @variant surface - Default. Themed surface/border bubble -- matches the
  * Recharts chart tooltips this was originally built for.
  * @variant inverted - Solid dark pill (no border) -- for a tooltip sitting
  * over a nav rail or other icon-only surface, where the themed surface bubble
  * doesn't read as clearly against a busy background.
  * @behavior Shows on hover and on keyboard focus (so it stays reachable
- * without a pointer) after `delay` ms (0 = immediate, the default). Hides
- * immediately on mouseleave/blur, cancelling a pending delayed show if it
- * hasn't fired yet -- except in `interactive` mode, which delays the hide
- * briefly so the pointer can travel from the trigger into the tooltip's own
- * content. Pass `whenTruncated` to only surface it once the trigger's content
+ * without a pointer) after `delay` ms (0 = immediate, the default). Fades in
+ * and out (opacity, `ease-in-out`, over the sys
+ * `--mr-motion-duration-interactive` token -- 200ms today); the bubble stays
+ * mounted through the fade-out and is removed from the DOM once it ends.
+ * Under `prefers-reduced-motion: reduce` there is no fade: it appears and is
+ * removed instantly. The hide starts on mouseleave/blur, cancelling a pending
+ * delayed show if it hasn't fired yet -- except in `interactive` mode, which
+ * delays the hide briefly so the pointer can travel from the trigger into the
+ * tooltip's own content. Re-hovering (or re-focusing) the trigger while the
+ * bubble is still fading out reverses the fade from where it is, without
+ * waiting out `delay` again, since it is already on screen; so does moving
+ * the pointer back into an `interactive` bubble. A non-interactive bubble is
+ * `pointer-events-none` throughout, fade-out included, so it never
+ * intercepts clicks meant for what sits under it. Pass `whenTruncated` to
+ * only surface it once the trigger's content
  * is actually clipped by ellipsis (`scrollWidth > clientWidth`). `placement`
  * 'top'/'bottom' centre (or `align="start"` left-align) on the trigger;
  * 'right' centres vertically beside the anchor and 'bottom-end' hangs below,
@@ -1392,9 +1413,20 @@ declare const buttonVariants: (props?: ({
     size?: "icon" | "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    /** Render the button styling onto the single child element instead of a `<button>` (e.g. a router `<Link>`). */
+    /**
+     * Render the button styling onto the single child element instead of a
+     * `<button>` (e.g. a router `<Link>` or an `<a>`). The child must be exactly
+     * one React element; it keeps its own tag, content and semantics.
+     */
     asChild?: boolean;
-    /** Shows a spinner in place of the leading edge and disables the button. */
+    /**
+     * Shows a spinner in place of the leading edge and disables the button.
+     * With `asChild` there is no spinner (the child owns its content, and a
+     * spinner belongs inside a real `<button>`): `loading` only sets
+     * `aria-busy` and forwards `disabled` to the child, which only has an
+     * effect on elements that support it -- an `<a>` stays clickable, so block
+     * navigation yourself while loading.
+     */
     loading?: boolean;
     /** Button label and/or icon. With `asChild`, the single element that receives the button styling. */
     children?: ReactNode;
@@ -1420,8 +1452,13 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * but Button suppresses it (`focus-visible:outline-hidden focus-visible:ring-0`)
  * and relies on its per-variant hover/brightness treatment instead. `loading`
  * implies `disabled` (and sets `aria-busy`), since a control mid-submit
- * shouldn't accept another click.
- * @a11y Renders a native <button>, so it keeps native keyboard behaviour.
+ * shouldn't accept another click. `asChild` renders only the child element,
+ * through Radix `Slot`, with the button classes, ref and remaining props
+ * merged onto it -- no wrapping `<button>`. With `asChild`, `loading` draws
+ * no spinner; it sets `aria-busy` and forwards `disabled`, which an `<a>`
+ * ignores, so a loading link stays clickable unless the caller blocks it.
+ * @a11y Renders a native <button>, so it keeps native keyboard behaviour
+ * (with `asChild`, the child element's own semantics apply instead).
  * `loading` sets aria-busy, and the spinner is aria-hidden. Icon-only
  * usage needs an aria-label from the caller -- nothing here supplies one.
  * @usage
@@ -1430,6 +1467,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * <Button variant="secondary" size="sm">Cancel</Button>
  * <Button variant="danger">Delete</Button>
  * <Button variant="primary" loading>Saving…</Button>
+ * <Button asChild variant="secondary"><a href="/reports">View reports</a></Button>
  * ```
  */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;

package/dist/index.d.ts

@@ -163,6 +163,14 @@ interface BadgeProps {
     tone?: BadgeTone;
     /** Shape and case. `count` for a number, `eyebrow` for a category label. */
     kind?: BadgeKind;
+    /**
+     * Draws a small filled dot before the label, in the tone's own ink. For a
+     * status that is scanned down a column rather than read -- the dot is what
+     * the eye follows, and it carries the colour at a size the text cannot.
+     * Purely decorative: the label is the accessible content, so the dot is
+     * hidden from assistive tech rather than announced as a second thing.
+     */
+    dot?: boolean;
     /** Text, or an icon plus text. Keep it to a few words -- a badge annotates, it does not explain. */
     children: ReactNode;
     className?: string;
@@ -176,8 +184,9 @@ interface BadgeProps {
  * @props
  * tone?: 'neutral' | 'brand' | 'brandSolid' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
  * kind?: 'label' | 'count' | 'eyebrow' (default 'label')
+ * dot?: boolean (default false) -- a filled dot before the label, in the tone's ink
  * children: ReactNode
- * @tokens text-micro, rounded-full, bg-subtle, bg-brand-primarySoft, bg-brand-primaryAction,
+ * @tokens text-micro, rounded-full, bg-current, bg-subtle, bg-brand-primarySoft, bg-brand-primaryAction,
  * bg-status-success/15, bg-status-warning/30, bg-status-danger/15, bg-scrim,
  * text-text-secondary, text-brand-primaryAction, text-text-success,
  * text-text-warning, text-text-danger, text-ai-ontint, text-brand-onprimary,
@@ -213,11 +222,12 @@ interface BadgeProps {
  * <Badge>Financial Services</Badge>
  * <Badge tone="brandSolid" kind="count">{activeFilters}</Badge>
  * <Badge tone="warning">Partial month</Badge>
+ * <Badge tone="success" dot>Completed</Badge>
  * <Badge kind="eyebrow" tone="neutral">Saved view</Badge>
  * <Badge tone="brand"><Check size={11} aria-hidden="true" />Primary</Badge>
  * ```
  */
-declare function Badge({ tone, kind, children, className }: BadgeProps): react.JSX.Element;
+declare function Badge({ tone, kind, dot, children, className }: BadgeProps): react.JSX.Element;
 
 /**
  * @pattern CheckBox
@@ -968,18 +978,29 @@ declare function StackedColumnPlaceholder({ height, width, legendRows, axis, }:
  * escapes both `overflow` clipping inside scrollable panels and the broken
  * `fixed` containing block a transformed ancestor creates.
  * @tokens rounded-control, border-border-default, bg-surface, shadow-overlay,
- * text-text-primary, bg-text-primary, text-surface
+ * text-text-primary, bg-text-primary, text-surface,
+ * duration-(--mr-motion-duration-interactive)
  * @variant surface - Default. Themed surface/border bubble -- matches the
  * Recharts chart tooltips this was originally built for.
  * @variant inverted - Solid dark pill (no border) -- for a tooltip sitting
  * over a nav rail or other icon-only surface, where the themed surface bubble
  * doesn't read as clearly against a busy background.
  * @behavior Shows on hover and on keyboard focus (so it stays reachable
- * without a pointer) after `delay` ms (0 = immediate, the default). Hides
- * immediately on mouseleave/blur, cancelling a pending delayed show if it
- * hasn't fired yet -- except in `interactive` mode, which delays the hide
- * briefly so the pointer can travel from the trigger into the tooltip's own
- * content. Pass `whenTruncated` to only surface it once the trigger's content
+ * without a pointer) after `delay` ms (0 = immediate, the default). Fades in
+ * and out (opacity, `ease-in-out`, over the sys
+ * `--mr-motion-duration-interactive` token -- 200ms today); the bubble stays
+ * mounted through the fade-out and is removed from the DOM once it ends.
+ * Under `prefers-reduced-motion: reduce` there is no fade: it appears and is
+ * removed instantly. The hide starts on mouseleave/blur, cancelling a pending
+ * delayed show if it hasn't fired yet -- except in `interactive` mode, which
+ * delays the hide briefly so the pointer can travel from the trigger into the
+ * tooltip's own content. Re-hovering (or re-focusing) the trigger while the
+ * bubble is still fading out reverses the fade from where it is, without
+ * waiting out `delay` again, since it is already on screen; so does moving
+ * the pointer back into an `interactive` bubble. A non-interactive bubble is
+ * `pointer-events-none` throughout, fade-out included, so it never
+ * intercepts clicks meant for what sits under it. Pass `whenTruncated` to
+ * only surface it once the trigger's content
  * is actually clipped by ellipsis (`scrollWidth > clientWidth`). `placement`
  * 'top'/'bottom' centre (or `align="start"` left-align) on the trigger;
  * 'right' centres vertically beside the anchor and 'bottom-end' hangs below,
@@ -1392,9 +1413,20 @@ declare const buttonVariants: (props?: ({
     size?: "icon" | "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    /** Render the button styling onto the single child element instead of a `<button>` (e.g. a router `<Link>`). */
+    /**
+     * Render the button styling onto the single child element instead of a
+     * `<button>` (e.g. a router `<Link>` or an `<a>`). The child must be exactly
+     * one React element; it keeps its own tag, content and semantics.
+     */
     asChild?: boolean;
-    /** Shows a spinner in place of the leading edge and disables the button. */
+    /**
+     * Shows a spinner in place of the leading edge and disables the button.
+     * With `asChild` there is no spinner (the child owns its content, and a
+     * spinner belongs inside a real `<button>`): `loading` only sets
+     * `aria-busy` and forwards `disabled` to the child, which only has an
+     * effect on elements that support it -- an `<a>` stays clickable, so block
+     * navigation yourself while loading.
+     */
     loading?: boolean;
     /** Button label and/or icon. With `asChild`, the single element that receives the button styling. */
     children?: ReactNode;
@@ -1420,8 +1452,13 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * but Button suppresses it (`focus-visible:outline-hidden focus-visible:ring-0`)
  * and relies on its per-variant hover/brightness treatment instead. `loading`
  * implies `disabled` (and sets `aria-busy`), since a control mid-submit
- * shouldn't accept another click.
- * @a11y Renders a native <button>, so it keeps native keyboard behaviour.
+ * shouldn't accept another click. `asChild` renders only the child element,
+ * through Radix `Slot`, with the button classes, ref and remaining props
+ * merged onto it -- no wrapping `<button>`. With `asChild`, `loading` draws
+ * no spinner; it sets `aria-busy` and forwards `disabled`, which an `<a>`
+ * ignores, so a loading link stays clickable unless the caller blocks it.
+ * @a11y Renders a native <button>, so it keeps native keyboard behaviour
+ * (with `asChild`, the child element's own semantics apply instead).
  * `loading` sets aria-busy, and the spinner is aria-hidden. Icon-only
  * usage needs an aria-label from the caller -- nothing here supplies one.
  * @usage
@@ -1430,6 +1467,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * <Button variant="secondary" size="sm">Cancel</Button>
  * <Button variant="danger">Delete</Button>
  * <Button variant="primary" loading>Saving…</Button>
+ * <Button asChild variant="secondary"><a href="/reports">View reports</a></Button>
  * ```
  */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;