@teamimpact/veda-ui-blocks 0.1.0-beta.7

package/dist/index.d.ts

@@ -0,0 +1,314 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { ReactNode, ButtonHTMLAttributes, ReactElement, ImgHTMLAttributes, SVGProps, VideoHTMLAttributes, CanvasHTMLAttributes, ComponentProps } from 'react';
+import { ButtonProps as ButtonProps$1 } from '@trussworks/react-uswds';
+import { StyleSpecification } from 'maplibre-gl';
+import { ViewState } from 'react-map-gl/maplibre';
+
+type BannerProps = {
+    /**
+     * Accessible label for the banner landmark.
+     * @default "An official website of the United States government"
+     */
+    ariaLabel?: string;
+    /**
+     * Text displayed in the collapsed banner header bar.
+     * Defaults to the standard US government copy per USWDS spec.
+     */
+    bannerHeaderText?: string;
+    /**
+     * Text for the expandable toggle button.
+     * @default "Here's how you know"
+     */
+    bannerHeaderActionText?: string;
+    /**
+     * Path to the US flag image asset.
+     * Defaults to /img/us_flag_small.png (USWDS asset served from dist/img via build:assets).
+     */
+    bannerIcon?: ReactNode;
+    /**
+     * Custom content rendered inside the expandable guidance panel.
+     * When provided, replaces the default .gov and HTTPS guidance blocks.
+     * Use this for non-English copy, custom portal context, or alternate layout.
+     */
+    bannerExpandedContent?: ReactNode;
+    /**
+     * Additional CSS class applied to the root banner element.
+     * blocks-banner is always applied; this appends after it.
+     */
+    className?: string;
+};
+/**
+ * Reusable government banner wrapping Trussworks/USWDS Banner primitives.
+ *
+ * Renders the standard "An official website of the United States government"
+ * header bar with an expandable panel explaining .gov and HTTPS trust signals.
+ *
+ * Public class hook: `.blocks-banner` on the root `<section>` element.
+ * Override points for theme-level styles are in src/styles/components/banner.scss.
+ */
+declare function Banner({ ariaLabel, bannerHeaderText, bannerHeaderActionText, bannerIcon, bannerExpandedContent, className, }: BannerProps): react_jsx_runtime.JSX.Element;
+
+type ButtonProps = {
+    /**
+     * USWDS Button variants. Only one of these should be true at a time.
+     * See: https://trussworks.github.io/react-uswds/?path=/docs/components-button--docs
+     */
+    secondary?: boolean;
+    base?: boolean;
+    accentStyle?: "cool" | "warm";
+    outline?: boolean;
+    inverse?: boolean;
+    size?: "big";
+    unstyled?: boolean;
+    children: ReactNode;
+    /**
+     * Button type attribute. Defaults to 'button'.
+     */
+    type?: "button" | "submit" | "reset";
+} & Omit<ButtonProps$1, "children" | "type"> & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * Our custom Button wrapper for react-uswds.
+ * Allows us to control the surface area and extend as needed.
+ */
+declare function Button({ type, secondary, base, accentStyle, outline, inverse, size, unstyled, children, className, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type CardMediaElement = ReactElement<ImgHTMLAttributes<HTMLImageElement>, "img"> | ReactElement<SVGProps<SVGSVGElement>, "svg"> | ReactElement<VideoHTMLAttributes<HTMLVideoElement>, "video"> | ReactElement<CanvasHTMLAttributes<HTMLCanvasElement>, "canvas">;
+
+type CardProps = {
+    /** Optional: label/tag shown above title. */
+    tag?: ReactNode;
+    /** Optional: heading text for the card. */
+    title?: string | ReactNode;
+    /** Optional: subheading text for the card. */
+    subtitle?: string;
+    /** Optional: body text for the card. */
+    description?: string;
+    /** Optional: Call to action for the card. */
+    callToAction?: {
+        label: string;
+        href: string;
+    };
+    /** Optional: Secondary outlined call to action for the card. */
+    callToActionSecondary?: {
+        label: string;
+        href: string;
+    };
+    /** Required: media element rendered as either the card background or
+     * an image within the card.
+     */
+    image: CardMediaElement;
+    /** Optional: position of the image within the card.
+     * "cover" will render the image as a background covering the entire card,
+     * while "left" and "right" will render the image to the left or right of the content, respectively.
+     * Defaults to "cover".
+     */
+    imagePosition?: "left" | "right" | "cover";
+    /** Optional: color mode for the card.
+     * "light" is intended for use on light backgrounds,
+     * "dark" is intended for use on dark backgrounds, and
+     * "brand" applies color styles that are brand specific.
+     */
+    colorMode?: "light" | "dark" | "brand";
+    /** Optional: Whether the card is intended to fill the width of the site with a centered container for content. */
+    isMastHead?: boolean;
+    className?: string;
+    children?: ReactNode;
+};
+declare function Card({ tag, title, description, subtitle, callToAction, callToActionSecondary, image, imagePosition, colorMode, isMastHead, className, children, }: CardProps): react_jsx_runtime.JSX.Element;
+
+type CardCTAProps = ComponentProps<"a"> & {
+    /** Required: heading text for the card. */
+    title: string;
+    /** Required: link URL the card navigates to. */
+    url: string;
+    /** Optional: body copy shown below the title row. */
+    description?: string;
+    /** Optional: accent color used for icon and title underline on hover/focus. */
+    accentColor?: string;
+    /** Semantic heading level for the title. */
+    titleAs?: "h2" | "h3" | "h4" | "h5" | "h6";
+    className?: string;
+};
+declare function CardCTA({ title, url, description, accentColor, titleAs, className, style, ...rest }: CardCTAProps): react_jsx_runtime.JSX.Element;
+
+type CardDetailedProps = {
+    /** Small intro text above the title */
+    intro?: string;
+    /** Main card title (required) */
+    title: string;
+    /** Card description/body */
+    description?: string;
+    /** Array of tags below description */
+    tags?: ReactNode[];
+    /** Content type tag overlayed on image */
+    contentTypeTag?: ReactNode;
+    /** Card image/media (required) */
+    image: CardMediaElement;
+    /** Action button (filled or link+icon) */
+    action?: ReactNode;
+    /** Position of the image relative to card content */
+    imagePosition?: "top" | "bottom" | "cover";
+    /** Show accent bar on top of card */
+    borderAccent?: boolean;
+    /** Semantic heading level for the card title */
+    titleAs?: "h2" | "h3" | "h4";
+    /** Optional className for custom styling */
+    className?: string;
+};
+/**
+ * CardDetailed: Vertical layout, image on top, overlay tag, intro, title, description, tags, action.
+ */
+declare function CardDetailed({ intro, title, description, tags, contentTypeTag, image, action, imagePosition, borderAccent, titleAs, className, }: CardDetailedProps): react_jsx_runtime.JSX.Element;
+
+type CardMiniProps = {
+    /** Required: media element rendered as the card image thumbnail. */
+    image: CardMediaElement;
+    /** Required: heading text for the card. */
+    title: string;
+    /** Required: link URL the card navigates to. */
+    url: string;
+    /** Optional: label rendered below the title. Pass a Tag component. */
+    tag?: ReactNode;
+    /** Semantic heading level for the title. */
+    titleAs?: "h2" | "h3" | "h4" | "h5" | "h6";
+    className?: string;
+};
+declare function CardMini({ image, title, url, tag, titleAs, className }: CardMiniProps): react_jsx_runtime.JSX.Element;
+
+type CardSimpleProps = {
+    /** Required: heading text for the card. */
+    title: string;
+    /** Required: media element rendered as the card background. */
+    image: CardMediaElement;
+    /** Required: link URL the card navigates to. */
+    url: string;
+    /** Optional: label rendered at the top of the card. Pass a Tag component. */
+    tag?: ReactNode;
+    /** Whether to render the gradient overlay on top of the media. */
+    showOverlay?: boolean;
+    /**
+     * `compact` reduces the title font size for half-height slots in a grid.
+     * Defaults to `default`.
+     */
+    size?: "default" | "compact";
+    /** Semantic heading level for title. */
+    titleAs?: "h2" | "h3" | "h4" | "h5" | "h6";
+    className?: string;
+};
+declare function CardSimple({ title, image, url, tag, showOverlay, size, titleAs, className, }: CardSimpleProps): react_jsx_runtime.JSX.Element;
+
+type NavItem$1 = {
+    label: string;
+    href: string;
+    isExternal?: boolean | null;
+};
+type UtilityNavItem = {
+    text?: string;
+} & NavItem$1;
+type ContactItem = {
+    label: string;
+    name: string;
+    email: string;
+};
+type PortalDetails = {
+    logo?: React$1.ReactElement;
+    contacts?: ContactItem[];
+    tagline?: string | null;
+    title: string;
+    updatedDate?: string | null;
+};
+interface FooterProps {
+    portalDetails: PortalDetails;
+    primaryNavItems: NavItem$1[];
+    secondaryNavItems: NavItem$1[];
+    utilityNavItems?: UtilityNavItem[];
+    className?: string;
+}
+declare function Footer({ portalDetails, primaryNavItems, secondaryNavItems, utilityNavItems, className, }: FooterProps): react_jsx_runtime.JSX.Element;
+
+type NavItem = {
+    label: string;
+    href: string;
+    isExternal?: boolean | null;
+};
+type NavDropDownItem = {
+    label: string;
+    subItems: NavItem[];
+};
+
+interface HeaderProps {
+    portalDetails: {
+        logo: React.ReactElement;
+        url?: string;
+        title?: string;
+    };
+    navItems: Array<NavDropDownItem | NavItem>;
+    customNavItem?: NavItem | React.ReactElement;
+    currentPath?: string;
+    className?: string;
+}
+declare function Header(props: HeaderProps): react_jsx_runtime.JSX.Element;
+
+type TagProps = {
+    /**
+     * Visual treatment for the tag.
+     */
+    variant?: "solid" | "outline" | "text";
+    size?: "default" | "big";
+    /**
+     * Custom color used as the fill, outline, or text color depending on the chosen variant.
+     */
+    color?: string;
+    /**
+     * Optional override for the tag text color.
+     */
+    textColor?: string;
+    /**
+     * Icon to display on the left of the label. When provided, the `blocks-tag--icon` modifier is applied automatically.
+     */
+    icon?: ReactNode;
+    /**
+     * Callback for the close button. When provided, a close button is rendered automatically.
+     */
+    onClose?: () => void;
+    children: ReactNode;
+    className?: string;
+};
+/**
+ * Our custom Tag wrapper aligned to package-level SCSS styling.
+ * Public style contract: `.blocks-tag`, modifiers (`--solid`, `--outline`, `--text`, `--big`, `--icon`, `--x-close`),
+ * and elements (`__icon`, `__close-button`, `__close-icon`).
+ */
+declare function Tag({ variant, size, color, textColor, icon, onClose, children, className, }: TagProps): react_jsx_runtime.JSX.Element;
+
+type SingleLayerMapProps = {
+    /** MapLibre base map style URL or style object. Defaults to NASA Blue Marble imagery. */
+    baseMapStyle?: string | StyleSpecification;
+    /** Initial map center (longitude/latitude), zoom level, and optional bearing/pitch. MapLibre applies defaults for any properties not provided. */
+    initialViewState?: Partial<ViewState>;
+    /** Optional child components to render on the map (e.g., layers, markers, controls). */
+    children?: ReactNode;
+};
+/**
+ * SingleLayerMap - A lightweight MapLibre GL JS map component for displaying base maps.
+ *
+ * This component provides a foundational map that can be extended with data layers,
+ * markers, and controls. It uses flex layout to fill available space, so the parent
+ * component must be a flex container with defined height.
+ *
+ * @example
+ * ```tsx
+ * <div style={{ display: "flex", flexDirection: "column", height: "500px" }}>
+ *   <SingleLayerMap
+ *     initialViewState={{
+ *       longitude: -98.5795,
+ *       latitude: 39.8283,
+ *       zoom: 3
+ *     }}
+ *   />
+ * </div>
+ * ```
+ */
+declare const SingleLayerMap: ({ baseMapStyle, initialViewState, children, }: SingleLayerMapProps) => react_jsx_runtime.JSX.Element;
+
+export { Banner, type BannerProps, Button, type ButtonProps, Card, CardCTA, type CardCTAProps, CardDetailed, type CardDetailedProps, CardMini, type CardMiniProps, type CardProps, CardSimple, type CardSimpleProps, Footer, type FooterProps, Header, type HeaderProps, SingleLayerMap, type SingleLayerMapProps, Tag, type TagProps };