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

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 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 { ReactNode, ReactElement, ImgHTMLAttributes, SVGProps, VideoHTMLAttributes, CanvasHTMLAttributes, ComponentProps, ElementType, ComponentPropsWithRef } from 'react';
 import { StyleSpecification } from 'maplibre-gl';
 import { ViewState } from 'react-map-gl/maplibre';
 
@@ -48,31 +47,8 @@ type BannerProps = {
  */
 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 LogoMediaElement = ReactElement<ImgHTMLAttributes<HTMLImageElement>, "img"> | ReactElement<SVGProps<SVGSVGElement>, "svg">;
 
 type CardProps = {
     /** Optional: label/tag shown above title. */
@@ -132,33 +108,42 @@ type CardCTAProps = ComponentProps<"a"> & {
 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 */
+    /** Optional: intro text above the title */
     intro?: string;
-    /** Main card title (required) */
-    title: string;
-    /** Card description/body */
+    /** Optional: heading text for the card */
+    title?: string | ReactNode;
+    /** Optional: body text for the card. */
     description?: string;
-    /** Array of tags below description */
+    /** Optional: label/tag shown over image */
+    tagPrimary?: ReactNode;
+    /** Optional: Array of tags below description */
     tags?: ReactNode[];
-    /** Content type tag overlayed on image */
-    contentTypeTag?: ReactNode;
-    /** Card image/media (required) */
+    /** 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;
-    /** 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: position of the image within the card.
+     * Images have fixed aspect ratios with content that vary with position.
+     * Defaults to "top".
+     */
+    imagePosition?: "left" | "right" | "top" | "bottom";
     /** 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;
+declare function CardDetailed({ intro, title, description, tags, callToAction, callToActionSecondary, tagPrimary, image, imagePosition, className, }: CardDetailedProps): react_jsx_runtime.JSX.Element;
 
 type CardMiniProps = {
     /** Required: media element rendered as the card image thumbnail. */
@@ -184,8 +169,6 @@ type CardSimpleProps = {
     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`.
@@ -195,7 +178,7 @@ type CardSimpleProps = {
     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;
+declare function CardSimple({ title, image, url, tag, size, titleAs, className, }: CardSimpleProps): react_jsx_runtime.JSX.Element;
 
 type NavItem$1 = {
     label: string;
@@ -211,7 +194,7 @@ type ContactItem = {
     email: string;
 };
 type PortalDetails = {
-    logo?: React$1.ReactElement;
+    logo?: LogoMediaElement;
     contacts?: ContactItem[];
     tagline?: string | null;
     title: string;
@@ -249,6 +232,47 @@ interface HeaderProps {
 }
 declare function Header(props: HeaderProps): react_jsx_runtime.JSX.Element;
 
+declare const LINK_VARIANTS: readonly ["text", "button", "button-outline", "arrow"];
+declare const LINK_SIZES: readonly ["md", "lg"];
+type LinkVariant = (typeof LINK_VARIANTS)[number];
+type LinkSize = (typeof LINK_SIZES)[number];
+
+type LinkProps<T extends ElementType = "a"> = {
+    /**
+     * Optional visual treatment. Defaults to text.
+     */
+    variant?: LinkVariant;
+    /**
+     * Optional size. Defaults to md.
+     */
+    size?: LinkSize;
+    /**
+     * Optional parameter to define Link as external to site.
+     * Adds visual indication and native link properties target and rel.
+     */
+    isExternal?: boolean;
+    /** The element or component to render as (e.g. "a", "button", RouterLink) */
+    as?: T;
+    children: Exclude<ReactNode, null | undefined>;
+} & Omit<ComponentPropsWithRef<T>, "as">;
+/**
+ * Polymorphic Link — renders as any element or component via the `as` prop.
+ *
+ * @example
+ * // Native anchor (default)
+ * <Link href="https://example.com">Visit</Link>
+ *
+ * // React Router / TanStack Router
+ * <Link as={RouterLink} to="/about">About</Link>
+ *
+ * // Next.js
+ * <Link as={NextLink} href="/dashboard">Dashboard</Link>
+ *
+ * // Button
+ * <Link as="button" onClick={handleClick}>Click me</Link>
+ */
+declare function Link<T extends ElementType = "a">({ variant, size, isExternal, className, as, children, ...rest }: LinkProps<T>): react_jsx_runtime.JSX.Element;
+
 type TagProps = {
     /**
      * Visual treatment for the tag.
@@ -256,11 +280,19 @@ type TagProps = {
     variant?: "solid" | "outline" | "text";
     size?: "default" | "big";
     /**
-     * Custom color used as the fill, outline, or text color depending on the chosen variant.
+     * Custom color used as the fill (solid variant), outline and text (outline variant), or text only (text variant) color depending on the chosen variant.
      */
     color?: string;
     /**
-     * Optional override for the tag text color.
+     * Optional override for the tag border color independent of variant.
+     */
+    borderColor?: string;
+    /**
+     * Optional override for the tag bg color independent of variant.
+     */
+    bgColor?: string;
+    /**
+     * Optional override for the tag text color independent of variant.
      */
     textColor?: string;
     /**
@@ -279,36 +311,105 @@ type TagProps = {
  * 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;
+declare function Tag({ variant, size, color, bgColor, borderColor, textColor, icon, onClose, children, className, }: TagProps): react_jsx_runtime.JSX.Element;
 
-type SingleLayerMapProps = {
+interface GeoConfigProviderProps {
+    stacApiUrl?: string;
+    titilerBaseUrl?: string;
+    children: ReactNode;
+}
+declare function GeoConfigProvider({ stacApiUrl, titilerBaseUrl, children, }: GeoConfigProviderProps): react_jsx_runtime.JSX.Element;
+
+/** Temporal filter for STAC queries. ISO 8601 date strings */
+type DateRange = {
+    from: string;
+    to: string;
+};
+type TileMatrixSet = "WebMercatorQuad" | "GDALWebMercatorQuad" | "WorldCRS84Quad";
+type StacRasterLayerConfig = {
+    type: "raster";
+    collectionId: string;
+    dateRange: DateRange;
+    tileMatrixSet?: TileMatrixSet;
+};
+interface GradientLegendProps {
+    type: "gradient";
+    colorStops: string[];
+    title?: string;
+    description?: string;
+    provider?: string;
+    spatialExtent?: string;
+    timeDensity?: string;
+    unit?: string;
+    min: number;
+    max: number;
+}
+type LegendProps = GradientLegendProps & {
+    initialExpanded?: boolean;
+};
+
+declare function Legend({ initialExpanded, ...props }: LegendProps): react_jsx_runtime.JSX.Element;
+
+type StacCompareMapProps = {
+    /** MapLibre base map style URL or style object. */
+    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>;
+    /** Layer config for the left panel. */
+    leftLayerConfig: StacRasterLayerConfig;
+    /** Layer config for the right panel. */
+    rightLayerConfig: StacRasterLayerConfig;
+    /** Additional CSS class applied to the root container element. */
+    className?: string;
+};
+/**
+ * Smart swipe-slider map for comparing two STAC datasets side-by-side.
+ *
+ * When both panels show the same collection, a single legend appears on the right.
+ * When collections differ, each panel shows its own legend on its respective side.
+ *
+ * Requires a `StacApiProvider` ancestor. Uses flex layout to fill available space,
+ * so the parent must be a flex container with defined height.
+ *
+ * @example
+ * ```tsx
+ * <StacApiProvider apiUrl="https://stac.example.com">
+ *   <div style={{ display: "flex", flexDirection: "column", height: "500px" }}>
+ *     <StacCompareMap
+ *       leftLayerConfig={{ type: "raster", collectionId: "my-collection", dateRange: { from: "2021-01-01", to: "2021-01-31" } }}
+ *       rightLayerConfig={{ type: "raster", collectionId: "my-collection", dateRange: { from: "2021-06-01", to: "2021-06-30" } }}
+ *     />
+ *   </div>
+ * </StacApiProvider>
+ * ```
+ */
+declare function StacCompareMap({ baseMapStyle, initialViewState, leftLayerConfig, rightLayerConfig, className, }: StacCompareMapProps): react_jsx_runtime.JSX.Element;
+
+type StacSingleLayerMapProps = {
     /** 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;
+    /** STAC collection and date range to fetch and display as a raster tile layer. */
+    layerConfig: StacRasterLayerConfig;
 };
 /**
- * SingleLayerMap - A lightweight MapLibre GL JS map component for displaying base maps.
+ * Smart map container that fetches STAC collection tiles and renders them with a legend overlay.
  *
- * 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.
+ * Requires a `StacApiProvider` ancestor. Uses flex layout to fill available space,
+ * so the parent 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>
+ * <StacApiProvider apiUrl="https://stac.example.com">
+ *   <div style={{ display: "flex", flexDirection: "column", height: "500px" }}>
+ *     <StacSingleLayerMap
+ *       layerConfig={{ type: "raster", collectionId: "my-collection", dateRange: { from: "2021-01-01", to: "2021-01-31" } }}
+ *     />
+ *   </div>
+ * </StacApiProvider>
  * ```
  */
-declare const SingleLayerMap: ({ baseMapStyle, initialViewState, children, }: SingleLayerMapProps) => react_jsx_runtime.JSX.Element;
+declare function StacSingleLayerMap({ baseMapStyle, initialViewState, layerConfig, }: StacSingleLayerMapProps): 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 };
+export { Banner, type BannerProps, Card, CardCTA, type CardCTAProps, CardDetailed, type CardDetailedProps, CardMini, type CardMiniProps, type CardProps, CardSimple, type CardSimpleProps, Footer, type FooterProps, GeoConfigProvider, type GeoConfigProviderProps, Header, type HeaderProps, Legend, type LegendProps, Link, type LinkProps, StacCompareMap, type StacCompareMapProps, StacSingleLayerMap, type StacSingleLayerMapProps, Tag, type TagProps };