@tensor_1/react 2.52.0 → 2.53.0

package/dist/components/Card.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
+import { UixRenderLink } from '../link.js';
 
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
@@ -30,9 +31,14 @@ interface CardLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 't
     headerAction?: ReactNode;
     footer?: ReactNode;
     children?: ReactNode;
+    /**
+     * Renders the card's anchor with your router's link (HAR-2576), so it keeps client navigation
+     * and prefetch: the same `UixRenderLink` adapter as `ButtonLink`. Default: `<a>`.
+     */
+    renderLink?: UixRenderLink;
 }
 /** A whole-card anchor with visible hover and keyboard focus affordances. */
-declare function CardLink({ title, subtitle, headerAction, footer, children, className, ...props }: CardLinkProps): react.JSX.Element;
+declare function CardLink({ title, subtitle, headerAction, footer, children, className, href, renderLink, ...props }: CardLinkProps): react.JSX.Element;
 interface InsetProps extends HTMLAttributes<HTMLDivElement> {
     /** `md` (default) pads with `--uix-space-4`; `sm` with `--uix-space-3`, for a dense card. */
     padding?: 'sm' | 'md';

package/dist/components/Card.js

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
+import { renderUixLink } from "../link.js";
 import { InfoTip } from "./InfoTip.js";
 import { hasHelp, helpLabelFor } from "../info-tip-model.js";
 function Card({ title, titleAs: TitleTag = "div", titleId, subtitle, help, helpLabel, headerAction, footer, children, className, ...props }) {
@@ -20,9 +21,10 @@ function Card({ title, titleAs: TitleTag = "div", titleId, subtitle, help, helpL
     footer != null && /* @__PURE__ */ jsx("div", { className: "uix-card__footer", children: footer })
   ] });
 }
-function CardLink({ title, subtitle, headerAction, footer, children, className, ...props }) {
+function CardLink({ title, subtitle, headerAction, footer, children, className, href, renderLink, ...props }) {
   const hasHeader = title != null || subtitle != null || headerAction != null;
-  return /* @__PURE__ */ jsxs("a", { className: cx("uix-card", "uix-card--interactive", className), ...props, children: [
+  const classes = cx("uix-card", "uix-card--interactive", className);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     hasHeader && /* @__PURE__ */ jsxs("div", { className: "uix-card__header", children: [
       /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
         title != null && /* @__PURE__ */ jsx("div", { className: "uix-card__title", children: title }),
@@ -33,6 +35,10 @@ function CardLink({ title, subtitle, headerAction, footer, children, className,
     children != null && /* @__PURE__ */ jsx("div", { className: "uix-card__body", children }),
     footer != null && /* @__PURE__ */ jsx("div", { className: "uix-card__footer", children: footer })
   ] });
+  if (renderLink && href !== void 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderUixLink(renderLink, { ...props, href, className: classes, children: body }) });
+  }
+  return /* @__PURE__ */ jsx("a", { className: classes, href, ...props, children: body });
 }
 function Inset({ padding = "md", tone = "sunken", children, className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cx("uix-inset", padding === "sm" && "uix-inset--sm", tone === "surface" && "uix-inset--surface", className), ...props, children });

package/dist/index.cjs

@@ -7195,9 +7195,10 @@ function Card({ title, titleAs: TitleTag = "div", titleId, subtitle, help, helpL
     footer != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-card__footer", children: footer })
   ] });
 }
-function CardLink({ title, subtitle, headerAction, footer, children, className, ...props }) {
+function CardLink({ title, subtitle, headerAction, footer, children, className, href, renderLink, ...props }) {
   const hasHeader = title != null || subtitle != null || headerAction != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("a", { className: cx("uix-card", "uix-card--interactive", className), ...props, children: [
+  const classes = cx("uix-card", "uix-card--interactive", className);
+  const body = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
     hasHeader && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "uix-card__header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { flex: 1 }, children: [
         title != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-card__title", children: title }),
@@ -7208,6 +7209,10 @@ function CardLink({ title, subtitle, headerAction, footer, children, className,
     children != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-card__body", children }),
     footer != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-card__footer", children: footer })
   ] });
+  if (renderLink && href !== void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: renderUixLink(renderLink, { ...props, href, className: classes, children: body }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("a", { className: classes, href, ...props, children: body });
 }
 function Inset({ padding = "md", tone = "sunken", children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("uix-inset", padding === "sm" && "uix-inset--sm", tone === "surface" && "uix-inset--surface", className), ...props, children });

package/dist/index.d.cts

@@ -635,7 +635,7 @@ declare function settleDrop(el: HTMLElement | null | undefined): void;
 /**
  * What a `renderLink` callback receives (HAR-1348). Spread it onto your router's link
  * so it keeps client navigation and prefetch: `renderLink={(p) => <NextLink {...p} />}`.
- * Every UIx component that can render a link (`ButtonLink`, `Stat href`, `Pagination
+ * Every UIx component that can render a link (`ButtonLink`, `CardLink`, `Stat href`, `Pagination
  * hrefFor`, `DetailPage`) takes the same callback, so one adapter serves them all.
  */
 interface UixLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -6075,9 +6075,14 @@ interface CardLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 't
     headerAction?: ReactNode;
     footer?: ReactNode;
     children?: ReactNode;
+    /**
+     * Renders the card's anchor with your router's link (HAR-2576), so it keeps client navigation
+     * and prefetch: the same `UixRenderLink` adapter as `ButtonLink`. Default: `<a>`.
+     */
+    renderLink?: UixRenderLink;
 }
 /** A whole-card anchor with visible hover and keyboard focus affordances. */
-declare function CardLink({ title, subtitle, headerAction, footer, children, className, ...props }: CardLinkProps): react.JSX.Element;
+declare function CardLink({ title, subtitle, headerAction, footer, children, className, href, renderLink, ...props }: CardLinkProps): react.JSX.Element;
 interface InsetProps extends HTMLAttributes<HTMLDivElement> {
     /** `md` (default) pads with `--uix-space-4`; `sm` with `--uix-space-3`, for a dense card. */
     padding?: 'sm' | 'md';

package/dist/link.d.ts

@@ -3,7 +3,7 @@ import { AnchorHTMLAttributes, ReactNode } from 'react';
 /**
  * What a `renderLink` callback receives (HAR-1348). Spread it onto your router's link
  * so it keeps client navigation and prefetch: `renderLink={(p) => <NextLink {...p} />}`.
- * Every UIx component that can render a link (`ButtonLink`, `Stat href`, `Pagination
+ * Every UIx component that can render a link (`ButtonLink`, `CardLink`, `Stat href`, `Pagination
  * hrefFor`, `DetailPage`) takes the same callback, so one adapter serves them all.
  */
 interface UixLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/react",
-  "version": "2.52.0",
+  "version": "2.53.0",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",