@contractspec/lib.ui-kit-web 1.56.1 → 1.58.0

package/dist/browser/ui/map/index.js

@@ -0,0 +1,210 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/map/MapBase.tsx
+import * as React from "react";
+import Map, {
+  NavigationControl,
+  ScaleControl
+} from "react-map-gl/maplibre";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+"use client";
+var DEFAULT_STYLE = "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
+function MapBase(props) {
+  const {
+    initialViewState = { longitude: 2.3522, latitude: 48.8566, zoom: 5 },
+    styleUrl = DEFAULT_STYLE,
+    style,
+    showControls = true,
+    showCssLink = true,
+    onMapRef,
+    children
+  } = props;
+  const mapRef = React.useRef(null);
+  React.useEffect(() => {
+    onMapRef?.(mapRef.current);
+  }, [mapRef.current]);
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      ...style || {}
+    },
+    children: [
+      showCssLink && /* @__PURE__ */ jsxDEV("link", {
+        href: "https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css",
+        rel: "stylesheet"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Map, {
+        ref: mapRef,
+        mapLib: import("maplibre-gl"),
+        initialViewState,
+        style: { width: "100%", height: "100%" },
+        mapStyle: styleUrl,
+        maplibreLogo: false,
+        children: [
+          showControls && /* @__PURE__ */ jsxDEV(Fragment, {
+            children: [
+              /* @__PURE__ */ jsxDEV(ScaleControl, {
+                position: "bottom-left"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(NavigationControl, {
+                position: "bottom-left"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          children
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// ui/map/MapGeoJsonOverlay.tsx
+import { Layer, Source } from "react-map-gl/maplibre";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function MapGeoJsonOverlay(props) {
+  const {
+    id = "geojson-overlay",
+    data,
+    fillColor = "#2563eb",
+    fillOpacity = 0.25,
+    lineColor = "#1e40af",
+    lineWidth = 1.5,
+    lineOpacity = 0.8
+  } = props;
+  const fillLayer = {
+    id: `${id}-fill`,
+    type: "fill",
+    paint: {
+      "fill-color": fillColor,
+      "fill-opacity": fillOpacity
+    }
+  };
+  const outlineLayer = {
+    id: `${id}-outline`,
+    type: "line",
+    paint: {
+      "line-color": lineColor,
+      "line-width": lineWidth,
+      "line-opacity": lineOpacity
+    }
+  };
+  return /* @__PURE__ */ jsxDEV2(Source, {
+    id,
+    type: "geojson",
+    data,
+    children: [
+      /* @__PURE__ */ jsxDEV2(Layer, {
+        ...fillLayer
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2(Layer, {
+        ...outlineLayer
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// ui/map/MapHeatmapH3.tsx
+import { Layer as Layer2, Source as Source2 } from "react-map-gl/maplibre";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function buildChoroplethPaint(stops, _maxCount) {
+  const scaleStops = (stops || []).map(([c, col]) => [c, col]);
+  return {
+    "fill-color": [
+      "interpolate",
+      ["linear"],
+      ["get", "count"],
+      ...scaleStops.flat()
+    ],
+    "fill-opacity": 0.6
+  };
+}
+function MapHeatmapH3(props) {
+  const {
+    id = "h3-heatmap",
+    data,
+    colorStops = [
+      [0, "#22c55e"],
+      [5, "#eab308"],
+      [10, "#ef4444"]
+    ],
+    maxCount
+  } = props;
+  const fillLayer = {
+    id: `${id}-fill`,
+    type: "fill",
+    paint: buildChoroplethPaint(colorStops, maxCount)
+  };
+  const lineLayer = {
+    id: `${id}-outline`,
+    type: "line",
+    paint: {
+      "line-color": "#ffffff",
+      "line-width": 0.25,
+      "line-opacity": 0.25
+    }
+  };
+  return /* @__PURE__ */ jsxDEV3(Source2, {
+    id,
+    type: "geojson",
+    data,
+    children: [
+      /* @__PURE__ */ jsxDEV3(Layer2, {
+        ...fillLayer
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3(Layer2, {
+        ...lineLayer
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// ui/map/MapMarkers.tsx
+import { Marker } from "react-map-gl/maplibre";
+import { jsxDEV as jsxDEV4, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+"use client";
+function MapMarkers({ points }) {
+  return /* @__PURE__ */ jsxDEV4(Fragment2, {
+    children: points.map((p) => /* @__PURE__ */ jsxDEV4(Marker, {
+      longitude: p.lng,
+      latitude: p.lat,
+      anchor: "bottom",
+      children: /* @__PURE__ */ jsxDEV4("button", {
+        role: p.onClick ? "button" : undefined,
+        tabIndex: p.onClick ? 0 : -1,
+        "aria-label": p.ariaLabel || "marker",
+        onClick: p.onClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            p.onClick?.();
+          }
+        },
+        style: {
+          width: p.size ?? 14,
+          height: p.size ?? 14,
+          background: p.color ?? "#2563eb",
+          border: "2px solid white",
+          borderRadius: 9999,
+          boxShadow: "0 1px 3px rgba(0,0,0,0.35)",
+          cursor: p.onClick ? "pointer" : "default"
+        }
+      }, undefined, false, undefined, this)
+    }, p.id, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+export {
+  MapMarkers,
+  MapHeatmapH3,
+  MapGeoJsonOverlay,
+  MapBase
+};

package/dist/browser/ui/marketing/FeatureGrid.js

@@ -0,0 +1,50 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ui/marketing/FeatureGrid.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+function FeatureGrid({
+  items,
+  columns = 3,
+  className
+}) {
+  const gridCols = columns === 4 ? "md:grid-cols-4" : columns === 2 ? "md:grid-cols-2" : "md:grid-cols-3";
+  return /* @__PURE__ */ jsxDEV("section", {
+    className: cn("mx-auto max-w-6xl py-12", className),
+    children: /* @__PURE__ */ jsxDEV("div", {
+      className: cn("grid grid-cols-1 gap-6", gridCols),
+      children: items.map((it, idx) => /* @__PURE__ */ jsxDEV("div", {
+        className: "rounded-lg border p-6",
+        children: [
+          it.icon && /* @__PURE__ */ jsxDEV("div", {
+            className: "text-primary mb-3",
+            children: it.icon
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("h3", {
+            className: "text-lg font-semibold",
+            children: it.title
+          }, undefined, false, undefined, this),
+          it.description && /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground mt-2 text-base",
+            children: it.description
+          }, undefined, false, undefined, this)
+        ]
+      }, idx, true, undefined, this))
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  FeatureGrid
+};

package/dist/browser/ui/marketing/Hero.js

@@ -0,0 +1,116 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-9 px-4 py-2 has-[>svg]:px-3",
+      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      icon: "size-9"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  if (asChild) {
+    return /* @__PURE__ */ jsxDEV(Slot, {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("button", {
+    ref,
+    "data-slot": "button",
+    className: cn(buttonVariants({ variant, size, className })),
+    ...props
+  }, undefined, false, undefined, this);
+});
+Button.displayName = "Button";
+// ui/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn2(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ui/marketing/Hero.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function Hero({
+  title,
+  subtitle,
+  primaryCta,
+  secondaryCta,
+  className
+}) {
+  return /* @__PURE__ */ jsxDEV2("section", {
+    className: cn2("mx-auto max-w-4xl py-16 text-center", className),
+    children: [
+      /* @__PURE__ */ jsxDEV2("h1", {
+        className: "text-4xl font-bold tracking-tight md:text-5xl",
+        children: title
+      }, undefined, false, undefined, this),
+      subtitle && /* @__PURE__ */ jsxDEV2("p", {
+        className: "text-muted-foreground mt-4 text-lg md:text-xl",
+        children: subtitle
+      }, undefined, false, undefined, this),
+      (primaryCta || secondaryCta) && /* @__PURE__ */ jsxDEV2("div", {
+        className: "mt-8 flex items-center justify-center gap-3",
+        children: [
+          primaryCta && (primaryCta.href ? /* @__PURE__ */ jsxDEV2(Button, {
+            asChild: true,
+            size: "lg",
+            children: /* @__PURE__ */ jsxDEV2("a", {
+              href: primaryCta.href,
+              children: primaryCta.label
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2(Button, {
+            size: "lg",
+            onClick: primaryCta.onClick,
+            children: primaryCta.label
+          }, undefined, false, undefined, this)),
+          secondaryCta && (secondaryCta.href ? /* @__PURE__ */ jsxDEV2(Button, {
+            variant: "outline",
+            asChild: true,
+            size: "lg",
+            children: /* @__PURE__ */ jsxDEV2("a", {
+              href: secondaryCta.href,
+              children: secondaryCta.label
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2(Button, {
+            variant: "outline",
+            size: "lg",
+            onClick: secondaryCta.onClick,
+            children: secondaryCta.label
+          }, undefined, false, undefined, this))
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  Hero
+};

package/dist/browser/ui/marketing/PricingTable.js

@@ -0,0 +1,127 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-9 px-4 py-2 has-[>svg]:px-3",
+      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      icon: "size-9"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  if (asChild) {
+    return /* @__PURE__ */ jsxDEV(Slot, {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("button", {
+    ref,
+    "data-slot": "button",
+    className: cn(buttonVariants({ variant, size, className })),
+    ...props
+  }, undefined, false, undefined, this);
+});
+Button.displayName = "Button";
+// ui/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn2(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ui/marketing/PricingTable.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function PricingTable({
+  tiers,
+  className
+}) {
+  return /* @__PURE__ */ jsxDEV2("section", {
+    className: cn2("mx-auto max-w-6xl py-12", className),
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "grid grid-cols-1 gap-6 md:grid-cols-3",
+        children: tiers.map((t, idx) => /* @__PURE__ */ jsxDEV2("div", {
+          className: cn2("flex flex-col rounded-lg border p-6", t.highlighted && "border-primary shadow-lg"),
+          children: [
+            /* @__PURE__ */ jsxDEV2("div", {
+              className: "text-muted-foreground mb-2 text-base font-medium",
+              children: t.name
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2("div", {
+              className: "text-3xl font-semibold",
+              children: t.price
+            }, undefined, false, undefined, this),
+            t.tagline && /* @__PURE__ */ jsxDEV2("div", {
+              className: "text-muted-foreground mt-1 text-base",
+              children: t.tagline
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2("ul", {
+              className: "mt-4 space-y-2 text-base",
+              children: t.features.map((f, i) => /* @__PURE__ */ jsxDEV2("li", {
+                className: "flex items-start gap-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "bg-primary mt-1 h-1.5 w-1.5 rounded-full"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    children: f
+                  }, undefined, false, undefined, this)
+                ]
+              }, i, true, undefined, this))
+            }, undefined, false, undefined, this),
+            t.cta && /* @__PURE__ */ jsxDEV2("div", {
+              className: "mt-6",
+              children: t.cta.href ? /* @__PURE__ */ jsxDEV2(Button, {
+                asChild: true,
+                className: "w-full",
+                children: /* @__PURE__ */ jsxDEV2("a", {
+                  href: t.cta.href,
+                  children: t.cta.label
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2(Button, {
+                className: "w-full",
+                onClick: t.cta.onClick,
+                children: t.cta.label
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, idx, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("p", {
+        className: "text-muted-foreground mt-6 text-center text-base",
+        children: "Usage-based tiers inspired by generous free allowances and per-unit pricing."
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  PricingTable
+};