@nswds/app 1.67.0 → 1.69.0

package/dist/index.cjs

@@ -13689,7 +13689,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.66.1"};
+  version: "1.68.0"};
 function Heading({
   className,
   trim = "normal",
@@ -23735,65 +23735,58 @@ function NavigationMenuIndicator({
 }
 var styles4 = {
   base: [
-    // Base
-    "group relative mx-auto max-w-md overflow-hidden rounded-md",
-    "bg-(--nsw-card-bg) border border-(--nsw-card-border) text-(--nsw-card-text)",
-    // Focus
+    "group relative mx-auto flex items-stretch w-full max-w-md flex-col overflow-hidden rounded-md hover:cursor-pointer",
+    "bg-(--nsw-card-bg) text-(--nsw-card-text)",
     "focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-primary-600",
-    // Add transition
-    "transition-colors duration-100 ease-out motion-reduce:transition-none"
-  ],
-  default: [
-    // Base
-    "",
-    // Hover
-    ""
+    "transition-colors duration-150 ease-out motion-reduce:transition-none",
+    "[--nsw-card-top-border-base:var(--color-accent-600)]",
+    "[--nsw-card-top-border-hover:var(--nsw-card-top-border-base)]"
   ],
+  default: [""],
   highlight: [
-    "border-none",
-    // Highlight
-    "after:absolute after:inset-x-0 after:top-0 after:h-1 after:content-['']",
-    "after:pointer-events-none after:z-10 after:rounded-t-md after:bg-[var(--nsw-card-top-border)]",
-    // Hover
-    "hover:bg-primary-800 hover:after:bg-primary-800"
+    "",
+    'data-[has-image=false]:after:content-[""]',
+    "data-[has-image=false]:after:absolute data-[has-image=false]:after:inset-x-0 data-[has-image=false]:after:top-0 data-[has-image=false]:after:h-1",
+    "data-[has-image=false]:after:pointer-events-none data-[has-image=false]:after:z-10 data-[has-image=false]:after:rounded-t-md",
+    "data-[has-image=false]:after:bg-[var(--nsw-card-top-border-base)]",
+    "data-[has-image=false]:hover:after:bg-[var(--nsw-card-top-border-hover)]"
   ],
+  headline: ["", ""],
   colors: {
     white: [
-      // Base
-      "[--nsw-card-bg:white] [--nsw-card-border:var(--color-grey-200)] [--nsw-card-text:grey-800]",
-      // Hover
-      "hover:[--nsw-card-bg:var(--color-primary-800)] hover:[--nsw-card-border:var(--color-primary-800)] hover:[--nsw-card-text:white]"
+      "[--nsw-card-bg:white] [--nsw-card-border:var(--color-grey-200)] [--nsw-card-text:grey-800] [--nsw-card-image-border:var(--color-grey-200)]",
+      "hover:[--nsw-card-bg:var(--color-primary-800)] hover:[--nsw-card-border:var(--color-primary-800)] hover:[--nsw-card-text:white]",
+      // 🔧 top-border color pair for highlight (base + hover)
+      "[--nsw-card-top-border-base:var(--color-grey-200)]",
+      "[--nsw-card-top-border-hover:var(--color-primary-800)]"
     ],
     primary: [
-      // Base
       "[--nsw-card-bg:var(--color-primary-800)] [--nsw-card-border:var(--color-primary-800)] [--nsw-card-text:white]",
-      // Hover
-      "hover:[--nsw-card-bg:white] hover:[--nsw-card-border:var(--color-grey-200)] hover:[--nsw-card-text:grey-800]"
+      "hover:[--nsw-card-bg:white] hover:[--nsw-card-border:var(--color-grey-200)] hover:[--nsw-card-text:grey-800]",
+      "[--nsw-card-top-border-base:var(--color-primary-800)]",
+      "[--nsw-card-top-border-hover:var(--color-grey-200)]"
     ],
     secondary: [
-      // Base
       "[--nsw-card-bg:var(--color-primary-200)] [--nsw-card-border:var(--color-primary-200)] [--nsw-card-text:var(--color-primary-800)]",
-      // Hover
-      "hover:[--nsw-card-bg:var(--color-primary-800)] hover:[--nsw-card-border:var(--color-primary-800)] hover:[--nsw-card-text:white]"
+      "hover:[--nsw-card-bg:var(--color-primary-800)] hover:[--nsw-card-border:var(--color-primary-800)] hover:[--nsw-card-text:white]",
+      "[--nsw-card-top-border-base:var(--color-primary-200)]",
+      "[--nsw-card-top-border-hover:var(--color-primary-800)]"
     ],
     tertiary: [
-      // Base
-      "[--nsw-card-bg:var(--color-primary-600)] [--nsw-card-border:var(--color-primary-600)] [--nsw-card-text:var(--color-primary-600)]",
-      // Hover
-      "hover:[--nsw-card-bg:var(--color-primary-800)] hover:[--nsw-card-border:var(--color-primary-800)] hover:[--nsw-card-text:white]"
+      "[--nsw-card-bg:var(--color-primary-600)] [--nsw-card-border:var(--color-primary-600)] [--nsw-card-text:white]",
+      "hover:[--nsw-card-bg:var(--color-primary-800)] hover:[--nsw-card-border:var(--color-primary-800)] hover:[--nsw-card-text:white]",
+      "[--nsw-card-top-border-base:var(--color-primary-600)]",
+      "[--nsw-card-top-border-hover:var(--color-primary-800)]"
     ]
   },
-  size: {
-    default: "",
-    sm: "",
-    lg: ""
-  }
+  size: { default: "", sm: "", lg: "" }
 };
 var cardVariants = classVarianceAuthority.cva(styles4.base, {
   variants: {
     variant: {
       highlight: styles4.highlight,
-      default: styles4.default
+      default: styles4.default,
+      headline: styles4.headline
     },
     color: {
       white: styles4.colors.white,
@@ -23823,7 +23816,8 @@ function NSWCardTitle({
     Link,
     {
       className: cn(
-        "mb-6 text-3xl font-bold text-grey-800",
+        "text-xl font-bold text-grey-800",
+        "group-data-[variant=headline]:text-2xl",
         "group-hover:text-white",
         "group-data-[color=primary]:text-white",
         "group-hover:group-data-[color=primary]:text-grey-800",
@@ -23841,6 +23835,7 @@ function NSWCardTitle({
     }
   );
 }
+NSWCardTitle.displayName = "NSWCardTitle";
 function NSWCardDescription({
   children,
   className,
@@ -23850,7 +23845,7 @@ function NSWCardDescription({
     "p",
     {
       className: cn(
-        "mb-8 text-lg leading-relaxed text-grey-600",
+        "mt-4 text-base leading-relaxed text-grey-600",
         "group-hover:text-white",
         "group-data-[color=primary]:text-white",
         "group-hover:group-data-[color=primary]:text-grey-800",
@@ -23864,22 +23859,74 @@ function NSWCardDescription({
     }
   );
 }
-function NSWCardArrow({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+NSWCardDescription.displayName = "NSWCardDescription";
+function NSWCardArrow({ color: color2, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-auto pt-12", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
     Icons.east,
     {
       className: cn(
-        "h-8 w-8",
+        "size-8 text-primary-800",
         "group-hover:text-white",
         "group-data-[color=primary]:text-white",
         "group-hover:group-data-[color=primary]:text-grey-800",
         "group-data-[color=secondary]:text-primary-800",
         "group-hover:group-data-[color=secondary]:text-white",
-        "group-data-[color=tertiary]:text-white"
+        "group-data-[color=tertiary]:text-white",
+        "transition-transform group-hover:translate-x-0.5",
+        color2
       )
     }
   ) });
 }
+NSWCardArrow.displayName = "NSWCardArrow";
+function NSWCardImg({
+  imgSrc,
+  imgAlt,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-full shadow-(--nsw-card-image-border)", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Image2__default.default,
+      {
+        alt: imgAlt,
+        src: imgSrc,
+        className: "aspect-video w-full rounded-md rounded-b-none object-cover sm:aspect-2/1 lg:aspect-3/2",
+        width: 400,
+        height: 300
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 rounded-md rounded-b-none dark:inset-ring-white/10",
+          "shadow-[inset_0_1px_0_var(--nsw-card-image-border),inset_1px_0_0_var(--nsw-card-image-border),inset_-1px_0_0_var(--nsw-card-image-border)]",
+          "group-data-[variant=highlight]:border-b-4",
+          "group-data-[variant=highlight]:border-b-[var(--nsw-card-top-border-base)]",
+          "group-data-[variant=highlight]:group-hover:border-b-[var(--nsw-card-top-border-hover)]"
+        )
+      }
+    )
+  ] });
+}
+NSWCardImg.displayName = "NSWCardImg";
+function NSWCardIcon({
+  children,
+  backgroundColor = "bg-primary-600",
+  size = "size-12",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(size, "mb-6 flex items-center justify-center rounded-full", className),
+      style: { backgroundColor },
+      children
+    }
+  );
+}
+NSWCardIcon.displayName = "NSWCardIcon";
 function NSWCard({
   children,
   topBorder = "var(--color-accent-600)",
@@ -23891,6 +23938,15 @@ function NSWCard({
 }) {
   const classes = cn(cardVariants({ variant, color: color2, size }), className);
   const isHighlight = variant === "highlight";
+  const isCardImg = (child) => React5__namespace.isValidElement(child) && (child.type === NSWCardImg || typeof child.type === "function" && child.type.displayName === "NSWCardImg");
+  const all = React5__namespace.Children.toArray(children);
+  const imageChildren = all.filter(isCardImg).map(
+    (child) => React5__namespace.isValidElement(child) ? React5__namespace.cloneElement(child, {
+      className: cn(child.props?.className)
+    }) : child
+  );
+  const bodyChildren = all.filter((c) => !isCardImg(c));
+  const hasImage = imageChildren.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -23898,13 +23954,39 @@ function NSWCard({
       "data-variant": variant,
       "data-color": color2,
       "data-size": size,
-      style: isHighlight ? { ["--nsw-card-top-border"]: topBorder } : void 0,
+      "data-has-image": hasImage ? "true" : "false",
+      style: isHighlight && topBorder ? { ["--nsw-card-top-border-base"]: topBorder } : void 0,
       className: classes,
       ...props,
-      children: variant === "highlight" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-md border border-grey-200", "hover:border-primary-800"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8", children }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8", children })
+      children: variant === "highlight" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        hasImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: imageChildren }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "h-full rounded-md border border-(--nsw-card-border)",
+              hasImage && "border-t-none rounded-t-none"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full flex-col p-8", children: bodyChildren })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        hasImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: imageChildren }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-full flex-col rounded-md border border-(--nsw-card-border) p-8",
+              hasImage && "border-t-none rounded-t-none"
+            ),
+            children: bodyChildren
+          }
+        )
+      ] })
     }
   );
 }
+NSWCard.displayName = "NSWCard";
 function Wrapper({
   children,
   className,
@@ -27038,6 +27120,8 @@ exports.MultiLevelPushMenu = MultiLevelPushMenu;
 exports.NSWCard = NSWCard;
 exports.NSWCardArrow = NSWCardArrow;
 exports.NSWCardDescription = NSWCardDescription;
+exports.NSWCardIcon = NSWCardIcon;
+exports.NSWCardImg = NSWCardImg;
 exports.NSWCardTitle = NSWCardTitle;
 exports.Navbar = Navbar;
 exports.NavbarDivider = NavbarDivider;