@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/navbar/index.js

@@ -0,0 +1,227 @@
+"use client";
+import { Dialog } from '@base-ui-components/react/dialog';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { cnBase } from 'tailwind-variants';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/organisms/navbar/navbar.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var NavbarContext = React.createContext({
+  isMobileMenuOpen: false,
+  setIsMobileMenuOpen: () => {
+  }
+});
+var Navbar = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
+    const navRef = React.useRef(null);
+    React.useEffect(() => {
+      const updateHeight = () => {
+        if (navRef.current) {
+          const height = navRef.current.offsetHeight;
+          document.documentElement.style.setProperty(
+            "--navbar-height",
+            `${height}px`
+          );
+        }
+      };
+      updateHeight();
+      window.addEventListener("resize", updateHeight);
+      return () => window.removeEventListener("resize", updateHeight);
+    }, []);
+    const mergedRef = React.useCallback(
+      (node) => {
+        navRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    return /* @__PURE__ */ jsx(NavbarContext.Provider, { value: { isMobileMenuOpen, setIsMobileMenuOpen }, children: /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref: mergedRef,
+        className: cn("relative z-50 w-full bg-gray-50", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex w-full items-center justify-between",
+              // Mobile
+              "px-spatial-component-navbar-padding-x-mobile py-spatial-component-navbar-padding-y-mobile",
+              // Tablet
+              "md:px-spatial-component-navbar-padding-x-tablet md:py-spatial-component-navbar-padding-y-tablet",
+              // Desktop
+              "xl:px-spatial-component-navbar-padding-x-desktop xl:py-spatial-component-navbar-padding-y-desktop"
+            ),
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+Navbar.displayName = "Navbar";
+var NavbarBrand = React.forwardRef(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Comp, { ref, className: cn("shrink-0", className), ...props });
+  }
+);
+NavbarBrand.displayName = "NavbarBrand";
+var NavbarLinks = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "hidden items-center gap-spatial-component-navbar-gap-links md:flex",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+NavbarLinks.displayName = "NavbarLinks";
+var NavbarLink = React.forwardRef(
+  ({ className, asChild = false, active, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "typography-body-small font-medium text-gray-900 transition-colors hover:text-gray-700",
+          active && "text-gray-1100",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+NavbarLink.displayName = "NavbarLink";
+var NavbarActions = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center gap-spatial-component-navbar-gap-actions",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+NavbarActions.displayName = "NavbarActions";
+var NavbarMobileMenu = React.forwardRef(({ className, children, ...props }, ref) => {
+  const { isMobileMenuOpen, setIsMobileMenuOpen } = React.useContext(NavbarContext);
+  return /* @__PURE__ */ jsx(Dialog.Root, { open: isMobileMenuOpen, onOpenChange: setIsMobileMenuOpen, children: /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(
+    Dialog.Popup,
+    {
+      ref,
+      className: cn(
+        "fixed inset-0 z-50 bg-gray-50 md:hidden",
+        // Position below navbar
+        "pt-[calc(var(--navbar-height,60px)+1px)]",
+        // Smooth transition
+        "transition-opacity duration-200",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { className: "sr-only", children: "Navigation menu" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex flex-col",
+              // Padding matching navbar
+              "px-spatial-component-navbar-padding-x-mobile py-spatial-component-navbar-padding-y-tablet",
+              // Gap between links
+              "gap-spatial-component-navbar-gap-mobile-menu"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  ) }) });
+});
+NavbarMobileMenu.displayName = "NavbarMobileMenu";
+var NavbarMobileMenuButton = React.forwardRef(({ className, asChild = false, children, ...props }, ref) => {
+  const { isMobileMenuOpen, setIsMobileMenuOpen } = React.useContext(NavbarContext);
+  const handleClick = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+  if (asChild) {
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref,
+        "aria-label": "Toggle navigation menu",
+        "aria-expanded": isMobileMenuOpen,
+        "aria-controls": "navbar-mobile-menu",
+        onClick: handleClick,
+        className,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-label": "Toggle navigation menu",
+      "aria-expanded": isMobileMenuOpen,
+      "aria-controls": "navbar-mobile-menu",
+      onClick: handleClick,
+      className: cn("transition-colors", className),
+      ...props,
+      children
+    }
+  );
+});
+NavbarMobileMenuButton.displayName = "NavbarMobileMenuButton";
+var NavbarMobileMenuLink = React.forwardRef(({ className, asChild = false, active, onClick, ...props }, ref) => {
+  const { setIsMobileMenuOpen } = React.useContext(NavbarContext);
+  const Comp = asChild ? Slot : "a";
+  const handleClick = (event) => {
+    setIsMobileMenuOpen(false);
+    onClick?.(event);
+  };
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn(
+        "typography-body-medium font-medium text-gray-900 transition-colors hover:text-gray-700",
+        "py-spatial-component-navbar-padding-y-mobile",
+        active && "text-gray-1100",
+        className
+      ),
+      onClick: handleClick,
+      ...props
+    }
+  );
+});
+NavbarMobileMenuLink.displayName = "NavbarMobileMenuLink";
+
+export { Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarMobileMenu, NavbarMobileMenuButton, NavbarMobileMenuLink };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/navbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/organisms/navbar/navbar.tsx"],"names":["twMerge"],"mappings":"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","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnBase as twMerge } from \"tailwind-variants\";\n\nexport { twMerge };\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Dialog } from \"@base-ui-components/react/dialog\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n// Context for mobile menu state\nconst NavbarContext = React.createContext<{\n\tisMobileMenuOpen: boolean;\n\tsetIsMobileMenuOpen: (open: boolean) => void;\n}>({\n\tisMobileMenuOpen: false,\n\tsetIsMobileMenuOpen: () => {},\n});\n\nexport interface NavbarProps extends React.HTMLAttributes<HTMLElement> {}\n\n/**\n * Main navigation bar container.\n * Provides responsive layout for brand, links, and actions.\n */\nconst Navbar = React.forwardRef<HTMLElement, NavbarProps>(\n\t({ className, children, ...props }, ref) => {\n\t\tconst [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);\n\t\tconst navRef = React.useRef<HTMLElement>(null);\n\n\t\t// Set navbar height CSS variable for mobile menu positioning\n\t\tReact.useEffect(() => {\n\t\t\tconst updateHeight = () => {\n\t\t\t\tif (navRef.current) {\n\t\t\t\t\tconst height = navRef.current.offsetHeight;\n\t\t\t\t\tdocument.documentElement.style.setProperty(\n\t\t\t\t\t\t\"--navbar-height\",\n\t\t\t\t\t\t`${height}px`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tupdateHeight();\n\t\t\twindow.addEventListener(\"resize\", updateHeight);\n\t\t\treturn () => window.removeEventListener(\"resize\", updateHeight);\n\t\t}, []);\n\n\t\t// Merge refs\n\t\tconst mergedRef = React.useCallback(\n\t\t\t(node: HTMLElement | null) => {\n\t\t\t\t(navRef as React.MutableRefObject<HTMLElement | null>).current = node;\n\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\tref(node);\n\t\t\t\t} else if (ref) {\n\t\t\t\t\tref.current = node;\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ref],\n\t\t);\n\n\t\treturn (\n\t\t\t<NavbarContext.Provider value={{ isMobileMenuOpen, setIsMobileMenuOpen }}>\n\t\t\t\t<nav\n\t\t\t\t\tref={mergedRef}\n\t\t\t\t\tclassName={cn(\"relative z-50 w-full bg-gray-50\", className)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex w-full items-center justify-between\",\n\t\t\t\t\t\t\t// Mobile\n\t\t\t\t\t\t\t\"px-spatial-component-navbar-padding-x-mobile py-spatial-component-navbar-padding-y-mobile\",\n\t\t\t\t\t\t\t// Tablet\n\t\t\t\t\t\t\t\"md:px-spatial-component-navbar-padding-x-tablet md:py-spatial-component-navbar-padding-y-tablet\",\n\t\t\t\t\t\t\t// Desktop\n\t\t\t\t\t\t\t\"xl:px-spatial-component-navbar-padding-x-desktop xl:py-spatial-component-navbar-padding-y-desktop\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</nav>\n\t\t\t</NavbarContext.Provider>\n\t\t);\n\t},\n);\nNavbar.displayName = \"Navbar\";\n\nexport interface NavbarBrandProps extends React.HTMLAttributes<HTMLDivElement> {\n\tasChild?: boolean;\n}\n\n/**\n * Brand/logo area of the navbar.\n * Use asChild to render as a link.\n */\nconst NavbarBrand = React.forwardRef<HTMLDivElement, NavbarBrandProps>(\n\t({ className, asChild = false, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"div\";\n\t\treturn <Comp ref={ref} className={cn(\"shrink-0\", className)} {...props} />;\n\t},\n);\nNavbarBrand.displayName = \"NavbarBrand\";\n\nexport interface NavbarLinksProps\n\textends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Container for navigation links.\n * Centers links on desktop, hidden on mobile (use NavbarMobileMenu instead).\n */\nconst NavbarLinks = React.forwardRef<HTMLDivElement, NavbarLinksProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"hidden items-center gap-spatial-component-navbar-gap-links md:flex\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nNavbarLinks.displayName = \"NavbarLinks\";\n\nexport interface NavbarLinkProps\n\textends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n\tasChild?: boolean;\n\tactive?: boolean;\n}\n\n/**\n * Individual navigation link.\n * Use asChild to render with a router Link component.\n */\nconst NavbarLink = React.forwardRef<HTMLAnchorElement, NavbarLinkProps>(\n\t({ className, asChild = false, active, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"a\";\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"typography-body-small font-medium text-gray-900 transition-colors hover:text-gray-700\",\n\t\t\t\t\tactive && \"text-gray-1100\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nNavbarLink.displayName = \"NavbarLink\";\n\nexport interface NavbarActionsProps\n\textends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Container for navbar action items (search, menu button, etc).\n */\nconst NavbarActions = React.forwardRef<HTMLDivElement, NavbarActionsProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex items-center gap-spatial-component-navbar-gap-actions\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nNavbarActions.displayName = \"NavbarActions\";\n\nexport interface NavbarMobileMenuProps\n\textends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Mobile menu container that displays navigation links on mobile devices.\n * Hidden on desktop (md and above). Should be used with NavbarMobileMenuButton.\n * Built on Base UI Dialog for accessibility (focus trap, escape key, click-outside).\n */\nconst NavbarMobileMenu = React.forwardRef<\n\tHTMLDivElement,\n\tNavbarMobileMenuProps\n>(({ className, children, ...props }, ref) => {\n\tconst { isMobileMenuOpen, setIsMobileMenuOpen } =\n\t\tReact.useContext(NavbarContext);\n\n\treturn (\n\t\t<Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>\n\t\t\t<Dialog.Portal>\n\t\t\t\t<Dialog.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"fixed inset-0 z-50 bg-gray-50 md:hidden\",\n\t\t\t\t\t\t// Position below navbar\n\t\t\t\t\t\t\"pt-[calc(var(--navbar-height,60px)+1px)]\",\n\t\t\t\t\t\t// Smooth transition\n\t\t\t\t\t\t\"transition-opacity duration-200\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<Dialog.Title className=\"sr-only\">Navigation menu</Dialog.Title>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex flex-col\",\n\t\t\t\t\t\t\t// Padding matching navbar\n\t\t\t\t\t\t\t\"px-spatial-component-navbar-padding-x-mobile py-spatial-component-navbar-padding-y-tablet\",\n\t\t\t\t\t\t\t// Gap between links\n\t\t\t\t\t\t\t\"gap-spatial-component-navbar-gap-mobile-menu\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</Dialog.Popup>\n\t\t\t</Dialog.Portal>\n\t\t</Dialog.Root>\n\t);\n});\nNavbarMobileMenu.displayName = \"NavbarMobileMenu\";\n\nexport interface NavbarMobileMenuButtonProps\n\textends React.ButtonHTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean;\n}\n\n/**\n * Button to toggle the mobile menu.\n * Should be placed in NavbarActions on mobile.\n * Use asChild to render as a custom button component (e.g., IconButton).\n */\nconst NavbarMobileMenuButton = React.forwardRef<\n\tHTMLButtonElement,\n\tNavbarMobileMenuButtonProps\n>(({ className, asChild = false, children, ...props }, ref) => {\n\tconst { isMobileMenuOpen, setIsMobileMenuOpen } =\n\t\tReact.useContext(NavbarContext);\n\n\tconst handleClick = () => {\n\t\tsetIsMobileMenuOpen(!isMobileMenuOpen);\n\t};\n\n\tif (asChild) {\n\t\treturn (\n\t\t\t<Slot\n\t\t\t\tref={ref}\n\t\t\t\taria-label=\"Toggle navigation menu\"\n\t\t\t\taria-expanded={isMobileMenuOpen}\n\t\t\t\taria-controls=\"navbar-mobile-menu\"\n\t\t\t\tonClick={handleClick}\n\t\t\t\tclassName={className}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Slot>\n\t\t);\n\t}\n\n\treturn (\n\t\t<button\n\t\t\tref={ref}\n\t\t\ttype=\"button\"\n\t\t\taria-label=\"Toggle navigation menu\"\n\t\t\taria-expanded={isMobileMenuOpen}\n\t\t\taria-controls=\"navbar-mobile-menu\"\n\t\t\tonClick={handleClick}\n\t\t\tclassName={cn(\"transition-colors\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n});\nNavbarMobileMenuButton.displayName = \"NavbarMobileMenuButton\";\n\nexport interface NavbarMobileMenuLinkProps\n\textends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n\tasChild?: boolean;\n\tactive?: boolean;\n}\n\n/**\n * Navigation link for the mobile menu.\n * Automatically closes the mobile menu when clicked.\n * Use asChild to render with a router Link component.\n */\nconst NavbarMobileMenuLink = React.forwardRef<\n\tHTMLAnchorElement,\n\tNavbarMobileMenuLinkProps\n>(({ className, asChild = false, active, onClick, ...props }, ref) => {\n\tconst { setIsMobileMenuOpen } = React.useContext(NavbarContext);\n\tconst Comp = asChild ? Slot : \"a\";\n\n\tconst handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n\t\tsetIsMobileMenuOpen(false);\n\t\tonClick?.(event);\n\t};\n\n\treturn (\n\t\t<Comp\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"typography-body-medium font-medium text-gray-900 transition-colors hover:text-gray-700\",\n\t\t\t\t\"py-spatial-component-navbar-padding-y-mobile\",\n\t\t\t\tactive && \"text-gray-1100\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={handleClick}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nNavbarMobileMenuLink.displayName = \"NavbarMobileMenuLink\";\n\nexport {\n\tNavbar,\n\tNavbarBrand,\n\tNavbarLinks,\n\tNavbarLink,\n\tNavbarActions,\n\tNavbarMobileMenu,\n\tNavbarMobileMenuButton,\n\tNavbarMobileMenuLink,\n};\n"]}

package/dist/ndstudio-footer/index.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+interface NdstudioFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The URL to link to
+     * @default "https://ndstudio.gov"
+     */
+    href?: string;
+}
+/**
+ * NdstudioFooter component displays a "Designed and Engineered in DC by National Design Studio" footer link.
+ *
+ * This component is designed to be used as a footer within other components like Tout,
+ * but can also be used standalone.
+ *
+ * @example
+ * ```tsx
+ * // Used within a Tout component via footer slot
+ * <Tout
+ *   headline="Feature Headline"
+ *   primaryAction={<Button>Primary</Button>}
+ *   backgroundMedia={<img src="/bg.jpg" alt="" />}
+ *   footer={<NdstudioFooter />}
+ * />
+ *
+ * // Standalone usage
+ * <NdstudioFooter className="my-custom-class" />
+ * ```
+ */
+declare const NdstudioFooter: React.ForwardRefExoticComponent<NdstudioFooterProps & React.RefAttributes<HTMLDivElement>>;
+
+export { NdstudioFooter, type NdstudioFooterProps };

package/dist/ndstudio-footer/index.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { cnBase } from 'tailwind-variants';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/atoms/ndstudio-footer/ndstudio-footer.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var NdstudioFooter = React.forwardRef(
+  ({ className, href = "https://ndstudio.gov", ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("text-center", className), ...props, children: /* @__PURE__ */ jsxs("p", { className: "typography-label-large uppercase text-ivory-alpha-75", children: [
+      "Designed and Engineered in DC by",
+      " ",
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "hover:underline",
+          children: [
+            "National Design Studio",
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens in new tab)" })
+          ]
+        }
+      )
+    ] }) });
+  }
+);
+NdstudioFooter.displayName = "NdstudioFooter";
+
+export { NdstudioFooter };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/ndstudio-footer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/atoms/ndstudio-footer/ndstudio-footer.tsx"],"names":["twMerge"],"mappings":";;;;;;AAKO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAOA,MAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACyBA,IAAM,cAAA,GAAuB,KAAA,CAAA,UAAA;AAAA,EAC5B,CAAC,EAAE,SAAA,EAAW,IAAA,GAAO,wBAAwB,GAAG,KAAA,IAAS,GAAA,KAAQ;AAChE,IAAA,uBACC,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA,EAAI,GAAG,KAAA,EAC3D,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAE,WAAU,sDAAA,EAAuD,QAAA,EAAA;AAAA,MAAA,kCAAA;AAAA,MAClC,GAAA;AAAA,sBACjC,IAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACA,IAAA;AAAA,UACA,MAAA,EAAO,QAAA;AAAA,UACP,GAAA,EAAI,qBAAA;AAAA,UACJ,SAAA,EAAU,iBAAA;AAAA,UACV,QAAA,EAAA;AAAA,YAAA,wBAAA;AAAA,4BAEA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA,qBAAA,EAAmB;AAAA;AAAA;AAAA;AAC9C,KAAA,EACD,CAAA,EACD,CAAA;AAAA,EAEF;AACD;AACA,cAAA,CAAe,WAAA,GAAc,gBAAA","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnBase as twMerge } from \"tailwind-variants\";\n\nexport { twMerge };\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface NdstudioFooterProps\n\textends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * The URL to link to\n\t * @default \"https://ndstudio.gov\"\n\t */\n\thref?: string;\n}\n\n/**\n * NdstudioFooter component displays a \"Designed and Engineered in DC by National Design Studio\" footer link.\n *\n * This component is designed to be used as a footer within other components like Tout,\n * but can also be used standalone.\n *\n * @example\n * ```tsx\n * // Used within a Tout component via footer slot\n * <Tout\n *   headline=\"Feature Headline\"\n *   primaryAction={<Button>Primary</Button>}\n *   backgroundMedia={<img src=\"/bg.jpg\" alt=\"\" />}\n *   footer={<NdstudioFooter />}\n * />\n *\n * // Standalone usage\n * <NdstudioFooter className=\"my-custom-class\" />\n * ```\n */\nconst NdstudioFooter = React.forwardRef<HTMLDivElement, NdstudioFooterProps>(\n\t({ className, href = \"https://ndstudio.gov\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(\"text-center\", className)} {...props}>\n\t\t\t\t<p className=\"typography-label-large uppercase text-ivory-alpha-75\">\n\t\t\t\t\tDesigned and Engineered in DC by{\" \"}\n\t\t\t\t\t<a\n\t\t\t\t\t\thref={href}\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\tclassName=\"hover:underline\"\n\t\t\t\t\t>\n\t\t\t\t\t\tNational Design Studio\n\t\t\t\t\t\t<span className=\"sr-only\"> (opens in new tab)</span>\n\t\t\t\t\t</a>\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t);\n\t},\n);\nNdstudioFooter.displayName = \"NdstudioFooter\";\n\nexport { NdstudioFooter };\n"]}

package/dist/pager-control/index.d.ts

@@ -0,0 +1,173 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as React from 'react';
+
+declare const pagerControlVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, "flex items-center", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, "flex items-center", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const dotBaseVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, undefined, "cursor-pointer rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, undefined, "cursor-pointer rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface PagerControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof pagerControlVariants>, VariantProps<typeof dotBaseVariants> {
+    /**
+     * Total number of pages/items
+     */
+    count: number;
+    /**
+     * Current active page index (0-based)
+     */
+    activeIndex?: number;
+    /**
+     * Duration in milliseconds for each page before auto-advancing
+     * Set to 0 to disable auto-advance
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Whether the pager should auto-advance
+     * @default true
+     */
+    autoPlay?: boolean;
+    /**
+     * Callback when the active page changes
+     */
+    onChange?: (index: number) => void;
+    /**
+     * Whether to pause auto-advance on hover
+     * @default true
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Whether to loop back to the first page after the last
+     * @default true
+     */
+    loop?: boolean;
+}
+/**
+ * PagerControl component for indicating progress through a series of pages/slides.
+ *
+ * Features smooth width transitions when switching between dots and an animated
+ * progress fill on the active dot that shows time remaining before auto-advancing
+ * (similar to Apple's carousel indicators).
+ *
+ * Variants:
+ * - charcoal: Dark dots (for light backgrounds)
+ * - ivory: Light dots (for dark backgrounds)
+ *
+ * Sizes:
+ * - sm: Small dots (6px height)
+ * - default: Medium dots (10px height)
+ * - lg: Large dots (16px height)
+ */
+declare const PagerControl: React.ForwardRefExoticComponent<PagerControlProps & React.RefAttributes<HTMLDivElement>>;
+
+export { PagerControl, type PagerControlProps, pagerControlVariants };