@nswds/app 1.66.4 → 1.68.0

package/dist/index.cjs

@@ -13689,7 +13689,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.65.1"};
+  version: "1.67.0"};
 function Heading({
   className,
   trim = "normal",
@@ -23733,133 +23733,383 @@ function NavigationMenuIndicator({
     }
   );
 }
-function Wrapper({
+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
+    "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",
+    // Hover
+    "hover:-translate-y-0.5"
+  ],
+  default: [
+    // Base
+    "",
+    // Hover
+    ""
+  ],
+  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"
+  ],
+  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]"
+    ],
+    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]"
+    ],
+    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]"
+    ],
+    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]"
+    ]
+  },
+  size: {
+    default: "",
+    sm: "",
+    lg: ""
+  }
+};
+var cardVariants = classVarianceAuthority.cva(styles4.base, {
+  variants: {
+    variant: {
+      highlight: styles4.highlight,
+      default: styles4.default
+    },
+    color: {
+      white: styles4.colors.white,
+      primary: styles4.colors.primary,
+      secondary: styles4.colors.secondary,
+      tertiary: styles4.colors.tertiary
+    },
+    size: {
+      default: styles4.size.default,
+      sm: styles4.size.sm,
+      lg: styles4.size.lg
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    color: "white",
+    size: "default"
+  }
+});
+function NSWCardTitle({
+  children,
+  className,
+  href,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Link,
+    {
+      className: cn(
+        "mb-6 text-3xl font-bold text-grey-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",
+        className
+      ),
+      href,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0" }),
+        children
+      ]
+    }
+  );
+}
+function NSWCardDescription({
   children,
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    "p",
     {
-      className: `max-w-8xl mx-auto space-y-8 px-4 py-6 sm:px-6 lg:px-12 ${className}`,
+      className: cn(
+        "mb-8 text-lg leading-relaxed text-grey-600",
+        "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",
+        className
+      ),
       ...props,
       children
     }
   );
 }
-function PageHeading({
-  heading,
+function NSWCardArrow({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Icons.east,
+    {
+      className: cn(
+        "h-8 w-8",
+        "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",
+        "transition-transform group-hover:translate-x-0.5"
+      )
+    }
+  ) });
+}
+function NSWCardIcon({
   children,
+  backgroundColor = "bg-primary-600",
+  size = "w-16 h-16",
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: `border-b border-grey-300 bg-white ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { children: [
-    heading && /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 1, size: 3, className: "font-semibold", children: heading }),
-    children
-  ] }) });
-}
-var buttonVariants4 = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        icon: "size-9"
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-function Pagination({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "nav",
+    "div",
     {
-      role: "navigation",
-      "aria-label": "pagination",
-      "data-slot": "pagination",
-      className: cn("mx-auto flex w-full justify-center", className),
-      ...props
+      className: cn(size, "mb-6 flex items-center justify-center rounded-full", className),
+      style: { backgroundColor },
+      children
     }
   );
 }
-function PaginationContent({ className, ...props }) {
+function NSWCard({
+  children,
+  topBorder = "var(--color-accent-600)",
+  className,
+  variant,
+  color: color2,
+  size,
+  ...props
+}) {
+  const classes = cn(cardVariants({ variant, color: color2, size }), className);
+  const isHighlight = variant === "highlight";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "ul",
+    "div",
     {
-      "data-slot": "pagination-content",
-      className: cn("flex flex-row items-center gap-1", className),
-      ...props
+      "data-slot": "card",
+      "data-variant": variant,
+      "data-color": color2,
+      "data-size": size,
+      style: isHighlight ? { ["--nsw-card-top-border"]: 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 })
     }
   );
 }
-function PaginationItem({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("li", { "data-slot": "pagination-item", ...props });
-}
-function PaginationLink({ className, isActive, size = "icon", ...props }) {
+function Wrapper({
+  children,
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "a",
+    "div",
     {
-      "aria-current": isActive ? "page" : void 0,
-      "data-slot": "pagination-link",
-      "data-active": isActive,
-      className: cn(
-        buttonVariants4({
-          variant: isActive ? "outline" : "ghost",
-          size
-        }),
-        className
-      ),
-      ...props
+      className: `max-w-8xl mx-auto space-y-8 px-4 py-6 sm:px-6 lg:px-12 ${className}`,
+      ...props,
+      children
     }
   );
 }
-function PaginationPrevious({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    PaginationLink,
+function PageHeading({
+  heading,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: `border-b border-grey-300 bg-white ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { children: [
+    heading && /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 1, size: 3, className: "font-semibold", children: heading }),
+    children
+  ] }) });
+}
+var PaginationVariantContext = React5__namespace.createContext("default");
+var containerStyles = {
+  line: cn("flex items-center justify-between border-t px-4 sm:px-0", "border-grey-200"),
+  default: cn("flex gap-x-2")
+};
+var listStyles = {
+  line: cn("hidden md:-mt-px md:flex"),
+  default: cn("hidden items-baseline gap-x-2 sm:flex")
+};
+function Pagination({
+  variant = "default",
+  className,
+  "aria-label": ariaLabel = "Page navigation",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: clsx12__default.default(containerStyles[variant], className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(PaginationVariantContext.Provider, { value: variant, children }) });
+}
+function PaginationPrevious({ href = null, className, children = "Previous" }) {
+  const variant = React5__namespace.useContext(PaginationVariantContext);
+  if (variant === "line") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mt-px flex w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href: href ?? void 0,
+        "aria-disabled": href === null,
+        className: cn(
+          "group inline-flex items-center border-t-2 pt-4 pr-1 text-sm font-medium",
+          "border-transparent text-grey-800 hover:border-grey-400 hover:text-grey-700",
+          href === null && "pointer-events-none text-grey-300",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icons.west, { "aria-hidden": "true", className: "mr-3 size-5 group-hover:text-grey-700" }),
+          children
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx12__default.default(className, "grow basis-0"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    Button2,
     {
-      "aria-label": "Go to previous page",
-      size: "default",
-      className: cn("gap-1 px-2.5 sm:pl-2.5", className),
-      ...props,
+      ...href === null ? { disabled: true } : { href },
+      variant: "ghost",
+      "aria-label": "Previous page",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icons.west, {}),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:block", children: "Previous" })
+        /* @__PURE__ */ jsxRuntime.jsx(Icons.west, { "aria-hidden": "true" }),
+        children
       ]
     }
-  );
+  ) });
 }
-function PaginationNext({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    PaginationLink,
+function PaginationNext({ href = null, className, children = "Next" }) {
+  const variant = React5__namespace.useContext(PaginationVariantContext);
+  if (variant === "line") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mt-px flex w-0 flex-1 justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href: href ?? void 0,
+        "aria-disabled": href === null,
+        className: cn(
+          "group inline-flex items-center border-t-2 pt-4 pl-1 text-sm font-medium",
+          "border-transparent text-grey-800 hover:border-grey-400 hover:text-grey-700",
+          href === null && "pointer-events-none text-grey-300",
+          className
+        ),
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(Icons.east, { "aria-hidden": "true", className: "ml-3 size-5 group-hover:text-grey-700" })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx12__default.default(className, "flex grow basis-0 justify-end"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    Button2,
     {
-      "aria-label": "Go to next page",
-      size: "default",
-      className: cn("gap-1 px-2.5 sm:pr-2.5", className),
-      ...props,
+      ...href === null ? { disabled: true } : { href },
+      "aria-label": "Next page",
+      variant: "ghost",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:block", children: "Next" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Icons.east, {})
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(Icons.east, { "aria-hidden": "true" })
       ]
     }
+  ) });
+}
+function PaginationList({ className, ...props }) {
+  const variant = React5__namespace.useContext(PaginationVariantContext);
+  if (variant === "line") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx12__default.default(listStyles.line, className), ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx12__default.default(listStyles.default, className), ...props });
+}
+function PaginationPage({
+  href,
+  className,
+  current = false,
+  children
+}) {
+  const variant = React5__namespace.useContext(PaginationVariantContext);
+  if (variant === "line") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href,
+        "aria-current": current ? "page" : void 0,
+        className: cn(
+          "inline-flex items-center border-t-2 px-4 pt-4 text-sm font-medium",
+          current ? "border-accent-600 font-bold text-primary-800" : "border-transparent text-grey-800 hover:border-grey-400 hover:text-grey-600",
+          className
+        ),
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button2,
+    {
+      href,
+      "aria-label": `Page ${children}`,
+      "aria-current": current ? "page" : void 0,
+      variant: current ? "solid" : "ghost",
+      color: current ? "accent" : "light",
+      className: clsx12__default.default(
+        className,
+        "leading-none before:absolute before:-inset-px before:rounded-sm",
+        "min-h-8 min-w-8 sm:px-[calc(--spacing(4))] sm:py-[calc(--spacing(3))]",
+        current && "before:bg-grey-950/5 dark:before:bg-white/10"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "-mx-0.5 leading-none", children })
+    }
   );
 }
-function PaginationEllipsis({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+function PaginationGap({
+  className,
+  children = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2026" }),
+  ...props
+}) {
+  const variant = React5__namespace.useContext(PaginationVariantContext);
+  if (variant === "line") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: clsx12__default.default(
+          "inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-grey-800 select-none",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      "aria-hidden": true,
-      "data-slot": "pagination-ellipsis",
-      className: cn("flex size-9 items-center justify-center", className),
+      "aria-hidden": "true",
       ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icons.more_horiz, { className: "size-4" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "More pages" })
-      ]
+      className: clsx12__default.default(
+        className,
+        "w-9 text-center text-sm/6 font-semibold text-grey-950 select-none dark:text-white"
+      ),
+      children
     }
   );
 }
@@ -26803,6 +27053,11 @@ exports.MenubarTrigger = MenubarTrigger;
 exports.MobileHeader = MobileHeader;
 exports.MobileSearch = MobileSearch;
 exports.MultiLevelPushMenu = MultiLevelPushMenu;
+exports.NSWCard = NSWCard;
+exports.NSWCardArrow = NSWCardArrow;
+exports.NSWCardDescription = NSWCardDescription;
+exports.NSWCardIcon = NSWCardIcon;
+exports.NSWCardTitle = NSWCardTitle;
 exports.Navbar = Navbar;
 exports.NavbarDivider = NavbarDivider;
 exports.NavbarItem = NavbarItem;
@@ -26820,11 +27075,10 @@ exports.NavigationMenuTrigger = NavigationMenuTrigger;
 exports.NavigationMenuViewport = NavigationMenuViewport;
 exports.PageHeading = PageHeading;
 exports.Pagination = Pagination;
-exports.PaginationContent = PaginationContent;
-exports.PaginationEllipsis = PaginationEllipsis;
-exports.PaginationItem = PaginationItem;
-exports.PaginationLink = PaginationLink;
+exports.PaginationGap = PaginationGap;
+exports.PaginationList = PaginationList;
 exports.PaginationNext = PaginationNext;
+exports.PaginationPage = PaginationPage;
 exports.PaginationPrevious = PaginationPrevious;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;