@syscore/ui-library 1.1.10 → 1.1.11

package/dist/ui/index.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useState, useEffect, useCallback } from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown, GripVertical, X, PanelLeft, Check, Circle, Dot, ChevronUp, ChevronRight, ChevronLeft, MoreHorizontal, XIcon, ArrowLeft, ArrowRight, Search } from "lucide-react";
+import { ChevronDown, GripVertical, X, PanelLeft, Check, Circle, Dot, ChevronUp, ChevronRight, ChevronLeft, MoreHorizontal, XIcon, ArrowLeft, ArrowRight, Search, Building2 } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
@@ -3525,6 +3525,167 @@ function getPayloadConfigFromPayload(config, payload, key) {
   }
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
+const defaultCertifications = [
+  { name: "Platinum", locations: 1, color: "#A8A7AE", icon: "platinum" },
+  { name: "Gold", locations: 1, color: "#D7C686", icon: "gold" },
+  { name: "Silver", locations: 1, color: "#C0C2C4", icon: "silver" },
+  { name: "Bronze", locations: 1, color: "#D1A778", icon: "bronze" },
+  { name: "Precertified", locations: 1, color: "#44B0BC", icon: "precertified" }
+];
+const defaultRatings = [
+  { name: "Health-Safety", locations: 1, color: "#7FB3DC", percentage: 50, icon: "health" },
+  { name: "Equity", locations: 1, color: "#41937D", percentage: 67, icon: "equity" },
+  { name: "Performance", locations: "Not Pursued", color: "#0B667F", percentage: 2, icon: "performance", inactive: true },
+  { name: "Coworking", locations: "Not Pursued", color: "#AD7DA3", percentage: 2, icon: "coworking", inactive: true }
+];
+const WELLDashboard = React.forwardRef(
+  ({ certifiedPercentage = 60, certifications = defaultCertifications, ratings = defaultRatings, className }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-4", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 rounded-md border border-[#DEDEE5] bg-white/0 p-4 shadow-xs", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-xl font-medium text-[#3D3E46] text-center mb-6", style: { fontFamily: "'DM Sans', sans-serif" }, children: "WELL Certified Locations" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-center items-center gap-10", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative w-60 h-60 shrink-0", children: [
+              /* @__PURE__ */ jsxs("svg", { width: "240", height: "240", viewBox: "0 0 240 240", className: "transform -rotate-90", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "120", cy: "120", r: "120", fill: "#F5F9FB" }),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: "120",
+                    cy: "120",
+                    r: "100",
+                    fill: "none",
+                    stroke: "#327DB9",
+                    strokeWidth: "20",
+                    strokeDasharray: `${certifiedPercentage / 100 * 628} 628`,
+                    strokeLinecap: "round"
+                  }
+                ),
+                certifications.map((cert, index) => {
+                  const totalSegments = certifications.length;
+                  const segmentAngle = certifiedPercentage / 100 * 360 / totalSegments;
+                  const startAngle = index * segmentAngle;
+                  const arcLength = segmentAngle * Math.PI * 100 / 180;
+                  const offset = startAngle * Math.PI * 100 / 180;
+                  return /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: "120",
+                      cy: "120",
+                      r: "100",
+                      fill: "none",
+                      stroke: cert.color,
+                      strokeWidth: "20",
+                      strokeDasharray: `${arcLength} 628`,
+                      strokeDashoffset: -offset,
+                      opacity: "0.7"
+                    },
+                    cert.name
+                  );
+                }),
+                /* @__PURE__ */ jsx("circle", { cx: "120", cy: "120", r: "80", fill: "white", filter: "drop-shadow(0 0 16px rgba(0,0,0,0.04))" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-5xl font-medium text-[#327DB9]", style: { fontFamily: "'DM Sans', sans-serif" }, children: [
+                  certifiedPercentage,
+                  "%"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-[#78777F] mt-1", style: { fontFamily: "'DM Sans', sans-serif" }, children: "Certified" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 min-w-[160px]", children: certifications.map((cert) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-10 h-10 rounded-full shrink-0 flex items-center justify-center",
+                  style: { backgroundColor: cert.color },
+                  children: cert.icon === "precertified" && /* @__PURE__ */ jsx("div", { className: "w-9 h-6 bg-[#44B0BC] rounded-sm flex items-center justify-center text-white text-[10px] font-bold", children: "WELL" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-base font-medium text-[#3D3E46]", style: { fontFamily: "'DM Sans', sans-serif" }, children: cert.name }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(Building2, { size: 16, className: "text-[#327DB9]", strokeWidth: 1.2 }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-[#327DB9]", style: { fontFamily: "'DM Sans', sans-serif" }, children: [
+                    cert.locations,
+                    " Location",
+                    cert.locations !== 1 ? "s" : ""
+                  ] })
+                ] })
+              ] })
+            ] }, cert.name)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 rounded-md border border-[#DEDEE5] bg-white/0 p-4 shadow-xs", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-xl font-medium text-[#3D3E46] text-center mb-6", style: { fontFamily: "'DM Sans', sans-serif" }, children: "WELL Rated Locations" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-center items-center gap-10", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-4 h-60 px-4", children: [
+              ratings.map((rating) => /* @__PURE__ */ jsxs("div", { className: "w-10 h-60 relative", children: [
+                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-t border border-[#DEDEE5] bg-[#F5F9FB]" }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute bottom-0 left-0 right-0 rounded-t transition-all",
+                    style: {
+                      backgroundColor: rating.color,
+                      height: `${rating.percentage}%`
+                    }
+                  }
+                )
+              ] }, rating.name)),
+              /* @__PURE__ */ jsx("div", { className: "w-px h-60 bg-[#DEDEE5]" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 min-w-[160px]", children: ratings.map((rating) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn("flex items-center gap-2", rating.inactive && "opacity-50"),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "w-10 h-10 rounded-full shrink-0 flex items-center justify-center",
+                      style: { backgroundColor: rating.color }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-base font-medium text-[#3D3E46]", style: { fontFamily: "'DM Sans', sans-serif" }, children: rating.name }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx(
+                        Building2,
+                        {
+                          size: 16,
+                          className: rating.inactive ? "text-[#78777F]" : "text-[#327DB9]",
+                          strokeWidth: 1.2
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "text-xs font-medium",
+                            rating.inactive ? "text-[#78777F]" : "text-[#327DB9]"
+                          ),
+                          style: { fontFamily: "'DM Sans', sans-serif" },
+                          children: typeof rating.locations === "number" ? `${rating.locations} Location${rating.locations !== 1 ? "s" : ""}` : rating.locations
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              },
+              rating.name
+            )) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-[10px] leading-3 font-medium text-[#78777F] text-center", style: { fontFamily: "'DM Sans', sans-serif" }, children: [
+        "Achievement metrics reflect all active program achievements, as of ",
+        (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })
+      ] })
+    ] });
+  }
+);
+WELLDashboard.displayName = "WELLDashboard";
 const Toaster = ({ ...props }) => {
   const { theme = "system" } = useTheme();
   return /* @__PURE__ */ jsx(
@@ -3767,6 +3928,7 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  WELLDashboard,
   badgeVariants,
   buttonVariants,
   navigationMenuTriggerStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syscore/ui-library",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "A comprehensive React component library built with Radix UI, Tailwind CSS, and TypeScript",
   "private": false,
   "type": "module",
@@ -25,6 +25,7 @@
   "files": [
     "dist",
     "client/components/ui",
+    "client/*",
     "client/lib",
     "tailwind.preset.ts",
     "client/global.css"