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

package/dist/index.d.ts

@@ -1,5 +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 { 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';
@@ -73,6 +73,7 @@ type ButtonProps = {
 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 +133,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 +194,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 +203,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 +219,7 @@ type ContactItem = {
     email: string;
 };
 type PortalDetails = {
-    logo?: React$1.ReactElement;
+    logo?: LogoMediaElement;
     contacts?: ContactItem[];
     tagline?: string | null;
     title: string;
@@ -281,34 +289,96 @@ type TagProps = {
  */
 declare function Tag({ variant, size, color, textColor, icon, onClose, children, className, }: TagProps): react_jsx_runtime.JSX.Element;
 
-type SingleLayerMapProps = {
+/** 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, Button, type ButtonProps, Card, CardCTA, type CardCTAProps, CardDetailed, type CardDetailedProps, CardMini, type CardMiniProps, type CardProps, CardSimple, type CardSimpleProps, Footer, type FooterProps, Header, type HeaderProps, Legend, type LegendProps, StacCompareMap, type StacCompareMapProps, StacSingleLayerMap, type StacSingleLayerMapProps, Tag, type TagProps };