@signalflare-ai/ui 0.5.0

package/dist/src/blocks/map-block/map-block.tsx

@@ -0,0 +1,522 @@
+"use client";
+
+/**
+ * MapBlock — a self-contained Leaflet 2.0 map block.
+ *
+ * Pieces:
+ * - Dark CartoDB tile layer by default (swappable via `tileUrl`)
+ * - H3 hex overlay support via `h3Cells` prop and `h3-js`
+ * - Dot markers grouped by category with auto-assigned colors
+ * - Floating legend panel (bottom-left) with click-to-filter
+ * - Optional floating filter bar (top-center) via `filters` slot
+ * - `onMapReady` callback for imperative Leaflet access
+ *
+ * Peer deps: `leaflet@2.0.0-alpha.1`, `h3-js`
+ * Import `leaflet/dist/leaflet.css` once at your app entry.
+ *
+ * @example
+ * ```tsx
+ * <MapBlock
+ *   markers={results.map(r => ({
+ *     lat: r.lat, lng: r.lng,
+ *     category: r.match_type,
+ *     tooltip: r.label,
+ *   }))}
+ *   h3Cells={results.filter(r => r.h3_index).map(r => ({
+ *     index: r.h3_index,
+ *     category: r.match_type,
+ *   }))}
+ *   legend={legendItems}
+ * />
+ * ```
+ */
+
+import { XIcon, FunnelIcon, PlusIcon, MinusIcon } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { Badge } from "../../components/badge";
+import { Button } from "../../components/button";
+import { Loader } from "../../components/loader";
+import { Tooltip } from "../../components/tooltip";
+import { cn } from "../../utils/cn";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface MapMarker {
+  /** Latitude */
+  lat: number;
+  /** Longitude */
+  lng: number;
+  /** Groups the marker for legend filtering and color assignment */
+  category?: string;
+  /** HTML string or plain text shown on hover */
+  tooltip?: string;
+  /** Override the auto-generated dot color */
+  color?: string;
+}
+
+export interface MapH3Cell {
+  /** H3 cell index (e.g. "8a2a1072b59ffff") */
+  index: string;
+  /** Groups the cell for color assignment — should match a marker category */
+  category?: string;
+  /** Override the auto-generated fill color */
+  color?: string;
+}
+
+export interface MapLegendItem {
+  /** Category key — must match `MapMarker.category` / `MapH3Cell.category` */
+  key: string;
+  /** Display label */
+  label: string;
+  /** Dot color override — auto-generated from key if omitted */
+  color?: string;
+  /** Count badge shown next to the label */
+  count?: number;
+  /** Tooltip content shown on hover */
+  description?: string;
+}
+
+export interface MapHandle {
+  /** The raw Leaflet map instance */
+  map: import("leaflet").Map;
+  /** Fit the viewport to all current markers */
+  fitToMarkers: () => void;
+  /** Clear all markers and H3 cells */
+  clearLayers: () => void;
+}
+
+export interface MapProps {
+  /** Initial map center [lat, lng]. @default [38.9, -77.03] (Washington DC) */
+  center?: [number, number];
+  /** Initial zoom level. @default 12 */
+  zoom?: number;
+  /** Leaflet tile URL template. @default CartoDB Dark Matter */
+  tileUrl?: string;
+  /** Extra options forwarded to Leaflet TileLayer */
+  tileOptions?: Record<string, unknown>;
+  /** Markers to plot on the map */
+  markers?: MapMarker[];
+  /** H3 hex cells to render as filled polygons */
+  h3Cells?: MapH3Cell[];
+  /** Legend items. Pass an array to show the legend panel; omit to hide it. */
+  legend?: MapLegendItem[];
+  /** Called whenever the user toggles a legend filter row */
+  onLegendFilter?: (activeKeys: Set<string>) => void;
+  /**
+   * Content rendered in the floating filter bar at the top-center of the map.
+   * Use this slot for search inputs, dropdowns, chip filters, etc.
+   */
+  filters?: ReactNode;
+  /** Called once after the Leaflet map is initialized */
+  onMapReady?: (handle: MapHandle) => void;
+  /** Called when the map viewport finishes moving (debounced 300ms) */
+  onMoveEnd?: (center: { lat: number; lng: number }, zoom: number) => void;
+  /** Called when the user clicks the map canvas */
+  onClick?: (lat: number, lng: number) => void;
+  /** Extra class names on the root wrapper div */
+  className?: string;
+  /** Height of the map container. @default "100%" */
+  height?: string | number;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/**
+ * Deterministic HSL color from a string key.
+ * Same djb2-style hash used in the geocode playground for category coloring.
+ */
+function hashColor(key: string): string {
+  let h = 0;
+  for (let i = 0; i < key.length; i++) {
+    h = Math.trunc(Math.imul(31, h) + (key.codePointAt(i) ?? 0));
+  }
+  return `hsl(${Math.abs(h) % 360},65%,60%)`;
+}
+
+function resolveColor(category?: string, override?: string): string {
+  if (override) return override;
+  return category ? hashColor(category) : "hsl(220,15%,55%)";
+}
+
+// ─── MapBlock ─────────────────────────────────────────────────────────────────
+// Named MapBlock internally to avoid conflict with the JS global Map object.
+// Exported as `Map` via the index.ts alias so `bun sf add Map` works.
+
+export function MapBlock({
+  center = [38.9, -77.03],
+  zoom = 12,
+  tileUrl = "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+  tileOptions,
+  markers = [],
+  h3Cells = [],
+  legend,
+  onLegendFilter,
+  filters,
+  onMapReady,
+  onMoveEnd,
+  onClick,
+  className,
+  height = "100%",
+}: MapProps) {
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<import("leaflet").Map | null>(null);
+  const markerLayerRef = useRef<import("leaflet").LayerGroup | null>(null);
+  const hexLayerRef = useRef<import("leaflet").LayerGroup | null>(null);
+  // category → marker DOM elements, for opacity-only filter (no re-render)
+  const markerElsByCat = useRef<Map<string, HTMLElement[]>>(new Map());
+
+  const [ready, setReady] = useState(false);
+  const [activeFilters, setActiveFilters] = useState<Set<string>>(new Set());
+  const [currentZoom, setCurrentZoom] = useState(zoom);
+
+  // ── Initialize map ────────────────────────────────────────────────────────
+
+  useEffect(() => {
+    if (!canvasRef.current || mapRef.current) return;
+
+    // oxlint-disable-next-line typescript/no-floating-promises
+    (async () => {
+      const L = await import("leaflet");
+      if (!canvasRef.current || mapRef.current) return;
+
+      // Registry block targets leaflet@^1.9 where the class is L.Map.
+      // (The docs sf copy uses leaflet 2.x alpha which renames it to L.LeafletMap.)
+      const map = new (L.Map as unknown as new (
+        ...a: unknown[]
+      ) => import("leaflet").Map)(canvasRef.current, {
+        zoomControl: false,
+        attributionControl: false,
+      }).setView(center, zoom);
+
+      map.on("zoomend", () => setCurrentZoom(map.getZoom()));
+
+      new L.TileLayer(tileUrl, {
+        maxZoom: 19,
+        subdomains: "abcd",
+        ...tileOptions,
+      }).addTo(map);
+
+      markerLayerRef.current = new L.LayerGroup().addTo(map);
+      hexLayerRef.current = new L.LayerGroup().addTo(map);
+      mapRef.current = map;
+      setReady(true);
+
+      // Click
+      if (onClick) {
+        map.on("click", (e: import("leaflet").LeafletMouseEvent) => {
+          onClick(e.latlng.lat, e.latlng.lng);
+        });
+      }
+
+      // MoveEnd (debounced)
+      if (onMoveEnd) {
+        let timer: ReturnType<typeof setTimeout> | null = null;
+        map.on("moveend", () => {
+          if (timer) clearTimeout(timer);
+          timer = setTimeout(() => {
+            onMoveEnd(map.getCenter(), map.getZoom());
+          }, 300);
+        });
+      }
+
+      // onMapReady handle
+      if (onMapReady) {
+        onMapReady({
+          map,
+          fitToMarkers() {
+            const pts = markers.map(
+              (m) => [m.lat, m.lng] as import("leaflet").LatLngTuple
+            );
+            if (!pts.length) return;
+            // oxlint-disable-next-line typescript/no-floating-promises
+            (async () => {
+              const LL = await import("leaflet");
+              map.fitBounds(new LL.LatLngBounds(pts).pad(0.3), {
+                maxZoom: 16,
+              });
+            })();
+          },
+          clearLayers() {
+            markerLayerRef.current?.clearLayers();
+            hexLayerRef.current?.clearLayers();
+            markerElsByCat.current.clear();
+          },
+        });
+      }
+    })();
+
+    return () => {
+      mapRef.current?.remove();
+      mapRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── Plot markers ──────────────────────────────────────────────────────────
+
+  useEffect(() => {
+    const layer = markerLayerRef.current;
+    const map = mapRef.current;
+    if (!layer || !map) return;
+
+    // oxlint-disable-next-line typescript/no-floating-promises
+    (async () => {
+      const L = await import("leaflet");
+      layer.clearLayers();
+      markerElsByCat.current.clear();
+      if (!markers.length) return;
+
+      for (const m of markers) {
+        const color = resolveColor(m.category, m.color);
+        const icon = new L.DivIcon({
+          className: "",
+          html: `<div style="
+            width:12px;height:12px;
+            background:${color};
+            border:2px solid rgba(0,0,0,0.55);
+            border-radius:50%;
+            box-shadow:0 0 8px ${color}55;
+          "></div>`,
+          iconSize: [12, 12],
+          iconAnchor: [6, 6],
+          popupAnchor: [0, -8],
+        });
+
+        const marker = new L.Marker([m.lat, m.lng], { icon }).addTo(layer);
+
+        if (m.tooltip) {
+          marker.bindTooltip(m.tooltip, {
+            direction: "top",
+            offset: [0, -8],
+            className: "sf-map-tooltip",
+          });
+        }
+
+        // Track DOM element by category for filter-dimming
+        if (m.category) {
+          const el = (marker as unknown as { _icon?: HTMLElement })._icon;
+          if (el) {
+            const arr = markerElsByCat.current.get(m.category) ?? [];
+            arr.push(el);
+            markerElsByCat.current.set(m.category, arr);
+          }
+        }
+      }
+
+      // Auto-fit on first plot
+      const pts = markers.map(
+        (m) => [m.lat, m.lng] as import("leaflet").LatLngTuple
+      );
+      map.fitBounds(new L.LatLngBounds(pts).pad(0.3), { maxZoom: 16 });
+    })();
+  }, [markers]);
+
+  // ── Plot H3 cells ─────────────────────────────────────────────────────────
+
+  useEffect(() => {
+    const layer = hexLayerRef.current;
+    if (!layer || !h3Cells.length) return;
+
+    // oxlint-disable-next-line typescript/no-floating-promises
+    (async () => {
+      const [L, { cellToBoundary }] = await Promise.all([
+        import("leaflet"),
+        import("h3-js"),
+      ]);
+      layer.clearLayers();
+      for (const cell of h3Cells) {
+        const color = resolveColor(cell.category, cell.color);
+        const boundary = cellToBoundary(
+          cell.index
+        ) as import("leaflet").LatLngTuple[];
+        new L.Polygon(boundary, {
+          color,
+          fillColor: color,
+          fillOpacity: 0.18,
+          weight: 1.5,
+          opacity: 0.7,
+        }).addTo(layer);
+      }
+    })();
+  }, [h3Cells]);
+
+  // ── Apply legend filter via opacity (no re-render) ────────────────────────
+
+  useEffect(() => {
+    markerElsByCat.current.forEach((els, cat) => {
+      const dimmed = activeFilters.size > 0 && !activeFilters.has(cat);
+      for (const el of els) {
+        el.style.opacity = dimmed ? "0.1" : "1";
+        el.style.transition = "opacity 0.15s ease";
+      }
+    });
+  }, [activeFilters]);
+
+  // ── Legend interactions ───────────────────────────────────────────────────
+
+  const toggleFilter = useCallback(
+    (key: string) => {
+      setActiveFilters((prev) => {
+        const next = new Set(prev);
+        if (next.has(key)) next.delete(key);
+        else next.add(key);
+        onLegendFilter?.(next);
+        return next;
+      });
+    },
+    [onLegendFilter]
+  );
+
+  const clearFilters = useCallback(() => {
+    setActiveFilters(new Set());
+    onLegendFilter?.(new Set());
+  }, [onLegendFilter]);
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  const hasLegend = legend && legend.length > 0;
+  const anyActive = activeFilters.size > 0;
+
+  return (
+    <div
+      className={cn("relative overflow-hidden", className)}
+      style={{ height }}
+    >
+      {/* Leaflet canvas — bg matches CartoDB dark tile void color */}
+      <div
+        ref={canvasRef}
+        className="absolute inset-0"
+        style={{ background: "#0a0a0f" }}
+      />
+
+      {/* Loading state — shown until Leaflet initializes */}
+      {!ready ? (
+        <div className="absolute inset-0 z-[1001] flex items-center justify-center bg-sf-base/80 backdrop-blur-sm">
+          <Loader />
+        </div>
+      ) : null}
+
+      {/* ── Zoom controls — top right ── */}
+      {ready ? (
+        <div
+          className={cn(
+            "absolute top-3 right-3 z-[1000]",
+            "flex flex-col overflow-hidden rounded-lg",
+            "border border-sf-line/50 bg-sf-elevated/92 shadow-lg backdrop-blur-md"
+          )}
+        >
+          <Button
+            variant="ghost"
+            size="sm"
+            aria-label="Zoom in"
+            disabled={currentZoom >= 19}
+            onClick={() => mapRef.current?.zoomIn()}
+          >
+            <PlusIcon className="size-3.5" />
+          </Button>
+          <div className="h-px bg-sf-line/40" />
+          <Button
+            variant="ghost"
+            size="sm"
+            aria-label="Zoom out"
+            disabled={currentZoom <= 1}
+            onClick={() => mapRef.current?.zoomOut()}
+          >
+            <MinusIcon className="size-3.5" />
+          </Button>
+        </div>
+      ) : null}
+
+      {/* ── Floating filter bar — top center ── */}
+      {filters ? (
+        <div
+          className={cn(
+            "absolute top-3 left-1/2 z-[1000] -translate-x-1/2",
+            "flex items-center gap-2 rounded-lg",
+            "border border-sf-line/50 bg-sf-elevated/92 px-3 py-2",
+            "shadow-lg backdrop-blur-md"
+          )}
+        >
+          <FunnelIcon className="size-3.5 shrink-0 text-sf-subtle" />
+          {filters}
+        </div>
+      ) : null}
+
+      {/* ── Legend panel — bottom left ── */}
+      {hasLegend ? (
+        <div
+          className={cn(
+            "absolute bottom-4 left-3 z-[1000] min-w-[140px]",
+            "flex flex-col gap-px rounded-lg",
+            "border border-sf-line/50 bg-sf-elevated/92 px-2.5 py-2",
+            "shadow-lg backdrop-blur-md"
+          )}
+        >
+          {/* Header */}
+          <div className="mb-1.5 flex items-center justify-between gap-3">
+            <span className="select-none text-[10px] uppercase tracking-wider text-sf-subtle/60">
+              Legend
+            </span>
+            {anyActive ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={clearFilters}
+                aria-label="Clear filter"
+              >
+                <XIcon className="size-3" />
+              </Button>
+            ) : null}
+          </div>
+
+          {/* Rows */}
+          {legend.map((item) => {
+            const color = item.color ?? hashColor(item.key);
+            const isActive = activeFilters.has(item.key);
+            const row = (
+              <button
+                key={item.key}
+                type="button"
+                onClick={() => toggleFilter(item.key)}
+                className={cn(
+                  "flex w-full items-center gap-2 rounded px-1 py-0.5 text-left",
+                  "text-xs transition-colors",
+                  isActive
+                    ? "text-sf-default"
+                    : anyActive
+                      ? "text-sf-subtle/40 hover:text-sf-subtle"
+                      : "text-sf-subtle hover:text-sf-default"
+                )}
+              >
+                {/* Color dot */}
+                <span
+                  className="size-2 shrink-0 rounded-full transition-colors"
+                  style={{
+                    background: isActive || !anyActive ? color : "#3a3a50",
+                  }}
+                />
+                {/* Label */}
+                <span className="flex-1 font-mono">{item.label}</span>
+                {/* Count badge */}
+                {item.count !== undefined ? (
+                  <Badge variant="secondary">{item.count}</Badge>
+                ) : null}
+              </button>
+            );
+
+            // Wrap in Tooltip if description provided
+            return item.description ? (
+              <Tooltip key={item.key} content={item.description} side="right">
+                {row}
+              </Tooltip>
+            ) : (
+              row
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/dist/src/blocks/page-header/index.d.ts

@@ -0,0 +1,2 @@
+export { PageHeader, pageHeaderVariants, SF_PAGE_HEADER_VARIANTS, SF_PAGE_HEADER_DEFAULT_VARIANTS, type PageHeaderProps, type SFPageHeaderSpacing, type SFPageHeaderVariantsProps, } from './page-header';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/blocks/page-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/blocks/page-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,kBAAkB,EAClB,uBAAuB,EACvB,+BAA+B,EAC/B,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,yBAAyB,GAC/B,MAAM,eAAe,CAAC"}

package/dist/src/blocks/page-header/page-header.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { TabsItem } from '../../components/tabs';
+export declare const SF_PAGE_HEADER_VARIANTS: {
+    readonly spacing: {
+        readonly compact: {
+            readonly classes: "gap-1";
+            readonly description: "Compact spacing between header elements";
+        };
+        readonly base: {
+            readonly classes: "gap-2";
+            readonly description: "Default spacing between header elements";
+        };
+        readonly relaxed: {
+            readonly classes: "gap-4";
+            readonly description: "Relaxed spacing for more prominent headers";
+        };
+    };
+};
+export declare const SF_PAGE_HEADER_DEFAULT_VARIANTS: {
+    readonly spacing: "base";
+};
+export type SFPageHeaderSpacing = keyof typeof SF_PAGE_HEADER_VARIANTS.spacing;
+export interface SFPageHeaderVariantsProps {
+    spacing?: SFPageHeaderSpacing;
+}
+export declare function pageHeaderVariants({ spacing, }?: SFPageHeaderVariantsProps): string;
+export interface PageHeaderProps extends SFPageHeaderVariantsProps {
+    breadcrumbs: ReactNode;
+    title?: string;
+    description?: string;
+    tabs?: TabsItem[];
+    defaultTab?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare function PageHeader({ breadcrumbs, title, description, tabs, defaultTab, onValueChange, spacing, className, children, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=page-header.d.ts.map

package/dist/src/blocks/page-header/page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../../src/blocks/page-header/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;CAe1B,CAAC;AAEX,eAAO,MAAM,+BAA+B;;CAElC,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,uBAAuB,CAAC,OAAO,CAAC;AAE/E,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAiD,GAClD,GAAE,yBAA8B,UAEhC;AAED,MAAM,WAAW,eAAgB,SAAQ,yBAAyB;IAChE,WAAW,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAU,EACV,aAAa,EACb,OAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,2CAoCjB"}

package/dist/src/blocks/page-header/page-header.tsx

@@ -0,0 +1,96 @@
+import { ReactNode } from "react";
+
+import { Tabs, type TabsItem } from "../../components/tabs";
+import { cn } from "../../utils/cn";
+
+export const SF_PAGE_HEADER_VARIANTS = {
+  spacing: {
+    compact: {
+      classes: "gap-1",
+      description: "Compact spacing between header elements",
+    },
+    base: {
+      classes: "gap-2",
+      description: "Default spacing between header elements",
+    },
+    relaxed: {
+      classes: "gap-4",
+      description: "Relaxed spacing for more prominent headers",
+    },
+  },
+} as const;
+
+export const SF_PAGE_HEADER_DEFAULT_VARIANTS = {
+  spacing: "base",
+} as const;
+
+export type SFPageHeaderSpacing = keyof typeof SF_PAGE_HEADER_VARIANTS.spacing;
+
+export interface SFPageHeaderVariantsProps {
+  spacing?: SFPageHeaderSpacing;
+}
+
+export function pageHeaderVariants({
+  spacing = SF_PAGE_HEADER_DEFAULT_VARIANTS.spacing,
+}: SFPageHeaderVariantsProps = {}) {
+  return cn("flex flex-col", SF_PAGE_HEADER_VARIANTS.spacing[spacing].classes);
+}
+
+export interface PageHeaderProps extends SFPageHeaderVariantsProps {
+  breadcrumbs: ReactNode;
+  title?: string;
+  description?: string;
+  tabs?: TabsItem[];
+  defaultTab?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function PageHeader({
+  breadcrumbs,
+  title,
+  description,
+  tabs,
+  defaultTab,
+  onValueChange,
+  spacing = "base",
+  className,
+  children,
+}: PageHeaderProps) {
+  return (
+    <div className={cn(pageHeaderVariants({ spacing }), className)}>
+      <div className="border-b border-sf-line">{breadcrumbs}</div>
+
+      {(title || description) && (
+        <div className="flex flex-col gap-2 py-3 pl-3">
+          {title && (
+            <h1 className="font-heading text-3xl font-semibold text-sf-default">
+              {title}
+            </h1>
+          )}
+          {description && (
+            <p className="max-w-prose text-base text-sf-subtle">
+              {description}
+            </p>
+          )}
+        </div>
+      )}
+
+      {tabs && (
+        <div className="flex w-full items-center justify-between border-b border-sf-line pt-1 pb-3 pl-3">
+          <Tabs
+            tabs={tabs}
+            selectedValue={defaultTab}
+            onValueChange={(nextValue) => {
+              const stringValue = String(nextValue);
+              onValueChange?.(stringValue);
+            }}
+          />
+
+          <div className="flex items-center gap-2">{children}</div>
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/src/blocks/resource-list/index.d.ts

@@ -0,0 +1,2 @@
+export { ResourceListPage, type ResourceListPageProps } from './resource-list';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/blocks/resource-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/blocks/resource-list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/src/blocks/resource-list/resource-list.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export interface ResourceListPageProps {
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    usage?: ReactNode;
+    additionalContent?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * ResourceListPage - A layout component for resource list pages
+ *
+ * Layouts are page-level components that provide consistent structure
+ * for common page patterns like resource lists, dashboards, and settings.
+ */
+export declare function ResourceListPage({ title, description, icon, usage, additionalContent, children, className, }: ResourceListPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=resource-list.d.ts.map