@page-speed/venn-diagram 0.0.6 → 0.0.8

package/README.md

@@ -50,6 +50,11 @@ export function MyDashboard() {
 }
 ```
 
+## Styling
+
+This component uses Tailwind utility classes for its default styling. Make sure
+your Tailwind `content` config includes this package so the classes are
+generated (for example, `./node_modules/@page-speed/venn-diagram/dist/**/*.{js,ts,jsx,tsx}`).
 
 ## API Overview
 

package/dist/cjs/esm/components/VennDiagram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VennDiagram.d.ts","sourceRoot":"","sources":["../../../src/components/VennDiagram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAA0B,MAAM,qBAAqB,CAAC;AA6B/E,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8KlD,CAAC"}
+{"version":3,"file":"VennDiagram.d.ts","sourceRoot":"","sources":["../../../src/components/VennDiagram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAA0B,MAAM,qBAAqB,CAAC;AA4B/E,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4LlD,CAAC"}

package/dist/cjs/esm/components/VennDiagramSVG.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VennDiagramSVG.d.ts","sourceRoot":"","sources":["../../../src/components/VennDiagramSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD,UAAU,mBAAmB;IAC3B,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,aAAa,EAAE,KAAK,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0KxD,CAAC"}
+{"version":3,"file":"VennDiagramSVG.d.ts","sourceRoot":"","sources":["../../../src/components/VennDiagramSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,UAAU,mBAAmB;IAC3B,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,aAAa,EAAE,KAAK,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+KxD,CAAC"}

package/dist/cjs/index.js

@@ -3250,8 +3250,6 @@ const isAccessibleContrast = (foreground, background) => {
   return contrastRatio >= 4.5;
 };
 
-var styles = {"vennContainer":"VennDiagram-module_vennContainer__zE5Q4","svg":"VennDiagram-module_svg__8SEMM","circleGroup":"VennDiagram-module_circleGroup__9MTB2","circle":"VennDiagram-module_circle__sXeUM","selected":"VennDiagram-module_selected__U2SLC","labelGroup":"VennDiagram-module_labelGroup__bbeK2","value":"VennDiagram-module_value__0wKIt","label":"VennDiagram-module_label__fsN9f","legend":"VennDiagram-module_legend__ZOQL5","legendItem":"VennDiagram-module_legendItem__G3upl","legendLabel":"VennDiagram-module_legendLabel__yK6aP","legendValue":"VennDiagram-module_legendValue__cuwMv","error":"VennDiagram-module_error__czgBP","loading":"VennDiagram-module_loading__8lTBq"};
-
 const VennDiagramContext = /*#__PURE__*/require$$0.createContext(null);
 VennDiagramContext.displayName = "VennDiagramContext";
 
@@ -3297,7 +3295,7 @@ const VennDiagramSVG = ({
     viewBox: `0 0 ${width} ${height}`,
     width: width,
     height: height,
-    className: styles.svg,
+    className: "block h-full w-full",
     role: "img",
     "aria-label": "Venn diagram",
     children: [layout.map((circle, idx) => {
@@ -3305,8 +3303,9 @@ const VennDiagramSVG = ({
       const color = colorScheme ? colorScheme[idx] : "#ccc";
       const isHovered = hoveredSets?.includes(set.name);
       const isSelected = selectedSets?.includes(set.name);
+      const effectiveStrokeWidth = isHovered ? Math.max(strokeWidth || 0, 3) : strokeWidth;
       return jsxRuntimeExports.jsx("g", {
-        className: styles.circleGroup,
+        className: "outline-none",
         children: jsxRuntimeExports.jsx("circle", {
           cx: circle.x,
           cy: circle.y,
@@ -3314,12 +3313,8 @@ const VennDiagramSVG = ({
           fill: color,
           fillOpacity: isHovered ? config.hoverOpacity : 0.4,
           stroke: color,
-          strokeWidth: strokeWidth,
-          className: `${styles.circle} ${isSelected ? styles.selected : ""}`,
-          style: {
-            transition: animated ? "all 300ms ease-in-out" : "none",
-            cursor: config.interactive ? "pointer" : "default"
-          },
+          strokeWidth: effectiveStrokeWidth,
+          className: ["outline-none focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2", animated ? "transition-all duration-300 ease-in-out" : "", config.interactive ? "cursor-pointer" : "cursor-default", isSelected ? "drop-shadow-sm" : ""].filter(Boolean).join(" "),
           onMouseEnter: () => handleCircleHover(set.name, true),
           onMouseLeave: () => handleCircleHover(set.name, false),
           onClick: () => handleCircleClick(set.name),
@@ -3342,27 +3337,23 @@ const VennDiagramSVG = ({
       const rawLabel = singleSet?.label ?? setNames[0];
       const renderedLabel = typeof rawLabel === "string" ? config.formatLabel ? config.formatLabel(rawLabel) : rawLabel : rawLabel;
       return jsxRuntimeExports.jsxs("g", {
-        className: styles.labelGroup,
+        className: ["pointer-events-none select-none", animated ? "transition-opacity duration-300 ease-in-out" : ""].filter(Boolean).join(" "),
         style: {
-          opacity: isHovered ? 1 : 0.7,
-          transition: animated ? "opacity 300ms ease-in-out" : "none"
+          opacity: isHovered ? 1 : 0.7
         },
         children: [showValues && jsxRuntimeExports.jsx("text", {
           x: pos.x,
           y: pos.y - 8,
           textAnchor: "middle",
-          className: styles.value,
+          className: "text-base font-semibold",
           fill: config.textFill,
-          fontSize: "16",
-          fontWeight: "600",
           children: config.formatValue ? config.formatValue(value) : value
         }), showLabels && setNames.length === 1 && jsxRuntimeExports.jsx("text", {
           x: pos.x,
           y: pos.y + 20,
           textAnchor: "middle",
-          className: styles.label,
+          className: "text-sm font-medium",
           fill: config.textFill,
-          fontSize: "14",
           children: renderedLabel
         })]
       }, setNames.join(","));
@@ -3436,21 +3427,23 @@ const VennDiagram = ({
     selectedSets,
     setSelectedSets
   }), [data, finalWidth, finalHeight, showLabels, showValues, colorScheme, animated, hoverOpacity, interactive, padding, textFill, strokeWidth, formatValue, formatLabel, hoveredSets, selectedSets, onSetHover]);
+  const rootClassName = ["relative w-full", className].filter(Boolean).join(" ");
   if (error) {
     return jsxRuntimeExports.jsxs("div", {
-      className: styles.error,
+      className: "flex w-full flex-col items-center justify-center gap-2 rounded-lg border border-red-200/70 bg-red-50 px-4 py-6 text-sm text-red-600",
       role: "alert",
       "data-testid": testId ? `${testId}-error` : undefined,
       children: [jsxRuntimeExports.jsx("p", {
         children: "Error rendering Venn diagram:"
       }), jsxRuntimeExports.jsx("code", {
+        className: "w-full rounded-md bg-black/5 px-2 py-1 font-mono text-xs text-red-700",
         children: error.message
       })]
     });
   }
   if (isLoading && layout.length === 0) {
     return jsxRuntimeExports.jsx("div", {
-      className: styles.loading,
+      className: "flex w-full items-center justify-center text-sm text-slate-500",
       role: "status",
       "aria-busy": true,
       "data-testid": testId ? `${testId}-loading` : undefined,
@@ -3462,32 +3455,36 @@ const VennDiagram = ({
   return jsxRuntimeExports.jsx(VennDiagramContext.Provider, {
     value: contextValue,
     children: jsxRuntimeExports.jsxs("div", {
-      ref: containerRef,
-      className: `${styles.vennContainer} ${className || ""}`,
-      style: {
-        width: responsive ? "100%" : finalWidth,
-        height: responsive ? "100%" : finalHeight,
-        ...style
-      },
+      className: rootClassName,
+      style: style,
       "data-testid": testId,
-      children: [renderer === "svg" && jsxRuntimeExports.jsx(VennDiagramSVG, {
-        layout: layout,
-        textPositions: textPositions,
-        width: finalWidth,
-        height: finalHeight,
-        onClick: onClick
+      children: [jsxRuntimeExports.jsx("div", {
+        ref: containerRef,
+        className: "relative h-full w-full min-h-[300px]",
+        style: {
+          width: responsive ? "100%" : finalWidth,
+          height: responsive ? "100%" : finalHeight
+        },
+        "data-venn-container": true,
+        children: renderer === "svg" && jsxRuntimeExports.jsx(VennDiagramSVG, {
+          layout: layout,
+          textPositions: textPositions,
+          width: finalWidth,
+          height: finalHeight,
+          onClick: onClick
+        })
       }), showLegend && jsxRuntimeExports.jsx("div", {
-        className: styles.legend,
+        className: "mt-4 flex flex-col gap-2 venn-legend",
         children: data.sets.map((set, idx) => jsxRuntimeExports.jsxs("div", {
-          className: styles.legendItem,
+          className: "flex items-center justify-between gap-3 rounded-md border border-l-4 border-slate-200/70 bg-white/80 px-3 py-2 text-sm",
           style: {
             borderLeftColor: colorScheme[idx]
           },
           children: [jsxRuntimeExports.jsx("span", {
-            className: styles.legendLabel,
+            className: "text-sm font-medium text-slate-700",
             children: formatLabel && typeof (set.label || set.name) === "string" ? formatLabel(set.label || set.name) : set.label || set.name
           }), jsxRuntimeExports.jsx("span", {
-            className: styles.legendValue,
+            className: "text-sm font-semibold text-slate-600",
             children: formatValue ? formatValue(set.size) : set.size
           })]
         }, set.name))