@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/components/comparison/comparison.js

@@ -24,6 +24,7 @@ const variantConfig = {
 };
 function Comparison({
   after,
+  as: Heading = "h4",
   before,
   title,
   ...rest
@@ -40,7 +41,7 @@ function Comparison({
   const BeforeIcon = beforeConfig.icon;
   const AfterIcon = afterConfig.icon;
   return /* @__PURE__ */ jsxs("div", { className: "my-6", children: [
-    title ? /* @__PURE__ */ jsx("h4", { className: "font-semibold mb-3", children: title }) : null,
+    title ? /* @__PURE__ */ jsx(Heading, { className: "font-semibold mb-3", children: title }) : null,
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
       /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border", beforeConfig.className), children: [
         /* @__PURE__ */ jsx(
@@ -53,18 +54,18 @@ function Comparison({
             children: before.title
           }
         ),
-        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: before.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: before.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
           /* @__PURE__ */ jsx(
             BeforeIcon,
             {
               className: cn(
-                "h-4 w-4 mt-0.5 flex-shrink-0",
+                "size-4 mt-0.5 flex-shrink-0",
                 beforeConfig.iconClass
               )
             }
           ),
           /* @__PURE__ */ jsx("span", { children: item })
-        ] }, index)) })
+        ] }, item)) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border", afterConfig.className), children: [
         /* @__PURE__ */ jsx(
@@ -77,18 +78,18 @@ function Comparison({
             children: after.title
           }
         ),
-        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: after.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: after.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
           /* @__PURE__ */ jsx(
             AfterIcon,
             {
               className: cn(
-                "h-4 w-4 mt-0.5 flex-shrink-0",
+                "size-4 mt-0.5 flex-shrink-0",
                 afterConfig.iconClass
               )
             }
           ),
           /* @__PURE__ */ jsx("span", { children: item })
-        ] }, index)) })
+        ] }, item)) })
       ] })
     ] })
   ] });
@@ -99,15 +100,15 @@ function BeforeAfter({ after, before, title }) {
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-4 items-start", children: [
       /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-red-500/30 bg-red-500/5 overflow-hidden", children: [
         /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-red-500/10 text-red-700 dark:text-red-300 font-medium text-sm flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(X, { className: "size-4" }),
           "Before"
         ] }),
         /* @__PURE__ */ jsx("div", { className: "p-4 text-sm [&>pre]:my-0", children: before })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(ArrowRight, { className: "h-6 w-6 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(ArrowRight, { className: "size-6 text-muted-foreground" }) }),
       /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-green-500/30 bg-green-500/5 overflow-hidden", children: [
         /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-green-500/10 text-green-700 dark:text-green-300 font-medium text-sm flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(Check, { className: "size-4" }),
           "After"
         ] }),
         /* @__PURE__ */ jsx("div", { className: "p-4 text-sm [&>pre]:my-0", children: after })

package/dist/components/completion-dialog/completion-dialog.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useRef } from "react";
+import { memo, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 function DialogContent({
+  as: Heading = "h2",
   cancelLabel = "Skip",
   cancelShortcut = "S",
   className,
@@ -39,7 +40,7 @@ function DialogContent({
             children: closeIcon ?? /* @__PURE__ */ jsx(
               "svg",
               {
-                className: "h-4 w-4",
+                className: "size-4",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
@@ -57,7 +58,7 @@ function DialogContent({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", id: "completion-dialog-title", children: title }),
+          /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold", id: "completion-dialog-title", children: title }),
           description ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-1.5", children: description }) : null
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2", children: [
@@ -83,6 +84,7 @@ function DialogContent({
   );
 }
 function CompletionDialogImpl({
+  as,
   cancelLabel,
   cancelShortcut = "S",
   className,
@@ -96,8 +98,11 @@ function CompletionDialogImpl({
   onConfirm,
   title
 }) {
-  const handleKeyDown = useCallback(
-    (event) => {
+  const keyDownHandlerRef = useRef(() => {
+    return;
+  });
+  useEffect(() => {
+    keyDownHandlerRef.current = (event) => {
       if (!isOpen) return;
       if (event.key === "Escape") {
         event.preventDefault();
@@ -116,16 +121,18 @@ function CompletionDialogImpl({
         event.stopPropagation();
         onCancel();
       }
-    },
-    [isOpen, onClose, onConfirm, onCancel, confirmShortcut, cancelShortcut]
-  );
+    };
+  }, [cancelShortcut, confirmShortcut, isOpen, onCancel, onClose, onConfirm]);
   useEffect(() => {
     if (!isOpen) return;
-    document.addEventListener("keydown", handleKeyDown, true);
+    const onDocumentKeyDown = (event) => {
+      keyDownHandlerRef.current(event);
+    };
+    document.addEventListener("keydown", onDocumentKeyDown, true);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown, true);
+      document.removeEventListener("keydown", onDocumentKeyDown, true);
     };
-  }, [isOpen, handleKeyDown]);
+  }, [isOpen]);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -149,6 +156,7 @@ function CompletionDialogImpl({
         /* @__PURE__ */ jsx(
           DialogContent,
           {
+            as,
             cancelLabel,
             cancelShortcut,
             className,

package/dist/components/connector-edge/connector-edge.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+import { EdgeLabel } from "../edge-label/edge-label";
+const strokeClasses = {
+  active: "stroke-sky-500",
+  blocked: "stroke-amber-500",
+  idle: "stroke-muted-foreground/60"
+};
+const ConnectorEdge = forwardRef(
+  ({ className, end, label, start, state = "idle", ...props }, ref) => {
+    const width = Math.max(Math.abs(end.x - start.x), 32);
+    const height = Math.max(Math.abs(end.y - start.y), 32);
+    const midX = width / 2;
+    const startX = start.x <= end.x ? 4 : width - 4;
+    const endX = start.x <= end.x ? width - 4 : 4;
+    const startY = start.y <= end.y ? 4 : height - 4;
+    const endY = start.y <= end.y ? height - 4 : 4;
+    const path = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;
+    const style = {
+      height,
+      width
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("relative inline-flex", className),
+        ref,
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "overflow-visible",
+              height,
+              viewBox: `0 0 ${width} ${height}`,
+              width,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: cn("fill-none stroke-[2.5]", strokeClasses[state]),
+                  d: path,
+                  strokeDasharray: state === "blocked" ? "4 4" : void 0,
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          ),
+          label ? /* @__PURE__ */ jsx(
+            EdgeLabel,
+            {
+              className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+              emphasis: state === "active" ? "active" : "subtle",
+              children: label
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ConnectorEdge.displayName = "ConnectorEdge";
+export {
+  ConnectorEdge
+};

package/dist/components/connector-edge/index.js

@@ -0,0 +1,6 @@
+import {
+  ConnectorEdge
+} from "./connector-edge";
+export {
+  ConnectorEdge
+};

package/dist/components/content-intro/content-intro.js

@@ -1,50 +1,57 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect } from "react";
+import { memo, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 const DEFAULT_LABELS = {
   continueLabel: "Continue Tutorial",
   startLabel: "Start Tutorial",
   tableOfContentsLabel: "Table of Contents"
 };
+const EMPTY_CONTENT_INTRO_LABELS = {};
+function ContentIntroBody({ source }) {
+  return source();
+}
 function ContentIntroImpl({
   additionalContent,
   completedSections,
   estimatedTime,
   isLoading = false,
-  labels = {},
+  labels = EMPTY_CONTENT_INTRO_LABELS,
   onGoToSection,
   onStart,
   renderIntroContent,
   sections,
-  title
+  title,
+  titleAs: TitleHeading = "h2",
+  tocLabelAs: TocHeading = "h3"
 }) {
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const hasProgress = completedSections.size > 0;
-  const handleKeyDown = useCallback(
-    (event) => {
+  const onStartRef = useRef(onStart);
+  useEffect(() => {
+    onStartRef.current = onStart;
+  }, [onStart]);
+  useEffect(() => {
+    const onDocumentKeyDown = (event) => {
       if (event.key === "Enter") {
         event.preventDefault();
-        onStart();
+        onStartRef.current();
       }
-    },
-    [onStart]
-  );
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
+    };
+    document.addEventListener("keydown", onDocumentKeyDown);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keydown", onDocumentKeyDown);
     };
-  }, [handleKeyDown]);
+  }, []);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "animate-in fade-in-0 duration-500 pb-24", children: [
       /* @__PURE__ */ jsxs("section", { className: "py-6", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-2xl md:text-3xl font-bold mb-6", children: title }),
-        /* @__PURE__ */ jsx("div", { className: cn("max-w-none", "[&_h2:first-of-type]:hidden"), children: renderIntroContent() })
+        /* @__PURE__ */ jsx(TitleHeading, { className: "text-2xl md:text-3xl font-semibold mb-6", children: title }),
+        /* @__PURE__ */ jsx("div", { className: cn("max-w-none", "[&_h2:first-of-type]:hidden"), children: /* @__PURE__ */ jsx(ContentIntroBody, { source: renderIntroContent }) })
       ] }),
       /* @__PURE__ */ jsxs("section", { className: "mt-8 py-6 border-t border-border", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: mergedLabels.tableOfContentsLabel }),
+        /* @__PURE__ */ jsx(TocHeading, { className: "text-lg font-semibold mb-4", children: mergedLabels.tableOfContentsLabel }),
         /* @__PURE__ */ jsx("ol", { className: "space-y-2", children: sections.map((section, index) => {
           const isCompleted = !isLoading && completedSections.has(section.id);
           return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
@@ -60,7 +67,7 @@ function ContentIntroImpl({
                   "span",
                   {
                     className: cn(
-                      "flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium tabular-nums transition-colors",
+                      "flex-shrink-0 size-6 rounded-full flex items-center justify-center text-xs font-medium tabular-nums transition-colors",
                       isLoading && "animate-pulse bg-muted",
                       !isLoading && isCompleted && "bg-foreground text-background",
                       !isLoading && !isCompleted && "bg-muted"
@@ -68,7 +75,7 @@ function ContentIntroImpl({
                     children: isCompleted ? /* @__PURE__ */ jsx(
                       "svg",
                       {
-                        className: "h-3 w-3",
+                        className: "size-3",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
@@ -97,12 +104,12 @@ function ContentIntroImpl({
                 )
               ]
             }
-          ) }, `${section.id}-${index}`);
+          ) }, section.id);
         }) })
       ] }),
       additionalContent
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/80 backdrop-blur-sm safe-bottom", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/80 backdrop-blur-sm safe-bottom", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground hidden sm:block", children: hasProgress ? `${completedSections.size}/${sections.length} completed` : `${sections.length} sections \xB7 ${estimatedTime}` }),
       /* @__PURE__ */ jsxs(
         Button,
@@ -114,7 +121,7 @@ function ContentIntroImpl({
             /* @__PURE__ */ jsx(
               "svg",
               {
-                className: "h-5 w-5",
+                className: "size-5",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",

package/dist/components/context-lens/context-lens.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Context lens"
+};
+const clamp01 = (value) => {
+  if (value < 0) {
+    return 0;
+  }
+  if (value > 1) {
+    return 1;
+  }
+  return value;
+};
+const safeRadius = (value) => value < 0 ? 0 : value;
+const ContextLens = forwardRef(
+  (props, ref) => {
+    const { className, focus, labels, opacity = 0.55, ...rest } = props;
+    const maskId = useId();
+    if (!focus) {
+      return null;
+    }
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const inner = safeRadius(focus.inner);
+    const outer = safeRadius(Math.max(focus.outer, inner));
+    const fillOpacity = clamp01(opacity);
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute inset-0 z-20 h-full w-full",
+          className
+        ),
+        "data-context-lens": true,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+            "radialGradient",
+            {
+              cx: focus.cx,
+              cy: focus.cy,
+              "data-context-lens-gradient": true,
+              gradientUnits: "userSpaceOnUse",
+              id: maskId,
+              r: outer === 0 ? 1 : outer,
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "black", stopOpacity: 0 }),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: outer === 0 ? "100%" : `${inner / outer * 100}%`,
+                    stopColor: "black",
+                    stopOpacity: 0
+                  }
+                ),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "black", stopOpacity: 1 })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              "data-context-lens-dim": true,
+              fill: "black",
+              fillOpacity,
+              height: "100%",
+              mask: `url(#${maskId}-mask)`,
+              width: "100%",
+              x: 0,
+              y: 0
+            }
+          ),
+          /* @__PURE__ */ jsxs("mask", { id: `${maskId}-mask`, children: [
+            /* @__PURE__ */ jsx("rect", { fill: "white", height: "100%", width: "100%", x: 0, y: 0 }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: focus.cx,
+                cy: focus.cy,
+                fill: `url(#${maskId})`,
+                r: outer
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ContextLens.displayName = "ContextLens";
+export {
+  ContextLens
+};

package/dist/components/context-lens/index.js

@@ -0,0 +1,6 @@
+import {
+  ContextLens
+} from "./context-lens";
+export {
+  ContextLens
+};

package/dist/components/context-menu/context-menu.js

@@ -22,7 +22,7 @@ const ContextMenuSubTrigger = forwardRef(({ children, className, inset, ...props
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4" })
     ]
   }
 ));
@@ -75,7 +75,7 @@ const ContextMenuCheckboxItem = forwardRef(({ checked, children, className, ...p
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
       children
     ]
   }
@@ -91,7 +91,7 @@ const ContextMenuRadioItem = forwardRef(({ children, className, ...props }, ref)
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "size-2 fill-current" }) }) }),
       children
     ]
   }
@@ -113,7 +113,7 @@ ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 const ContextMenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Separator,
   {
-    className: cn("-mx-1 my-1 h-px bg-border", className),
+    className: cn("-m-1 h-px bg-border", className),
     ref,
     ...props
   }

package/dist/components/contribution-graph/contribution-graph.js

@@ -0,0 +1,120 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_CELL_SIZE = 12;
+const DEFAULT_CELL_GAP = 3;
+const DEFAULT_LEVELS = 4;
+const DAYS_PER_WEEK = 7;
+const MS_PER_DAY = 24 * 60 * 60 * 1e3;
+function parseDay(value) {
+  const parsed = Date.parse(value);
+  if (Number.isNaN(parsed)) return null;
+  const date = new Date(parsed);
+  return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+}
+function isoFromUtc(time) {
+  return new Date(time).toISOString().slice(0, 10);
+}
+function bucket(count, max, levels) {
+  if (count <= 0 || max <= 0) return 0;
+  return Math.min(levels, Math.ceil(count / max * levels));
+}
+function countByDay(data) {
+  return data.reduce((map, entry) => {
+    const time = parseDay(entry.date);
+    if (time !== null) map.set(time, (map.get(time) ?? 0) + entry.count);
+    return map;
+  }, /* @__PURE__ */ new Map());
+}
+function buildWeeks(data, levels, weeksLimit) {
+  const counts = countByDay(data);
+  if (counts.size === 0) return [];
+  const times = [...counts.keys()];
+  const minTime = Math.min(...times);
+  const maxTime = Math.max(...times);
+  const start = minTime - new Date(minTime).getUTCDay() * MS_PER_DAY;
+  const end = maxTime + (6 - new Date(maxTime).getUTCDay()) * MS_PER_DAY;
+  const maxCount = Math.max(...counts.values());
+  const weekCount = Math.round((end - start) / (DAYS_PER_WEEK * MS_PER_DAY)) + 1;
+  const weeks = Array.from(
+    { length: weekCount },
+    (_week, weekIndex) => Array.from({ length: DAYS_PER_WEEK }, (_day, dayIndex) => {
+      const time = start + (weekIndex * DAYS_PER_WEEK + dayIndex) * MS_PER_DAY;
+      const count = counts.get(time) ?? 0;
+      return {
+        count,
+        date: isoFromUtc(time),
+        level: bucket(count, maxCount, levels)
+      };
+    })
+  );
+  if (weeksLimit && weeks.length > weeksLimit) {
+    return weeks.slice(weeks.length - weeksLimit);
+  }
+  return weeks;
+}
+function cellOpacity(level, levels) {
+  if (level <= 0) return 0.1;
+  return 0.25 + 0.75 * (level / levels);
+}
+const ContributionGraph = React.forwardRef(
+  ({
+    cellGap = DEFAULT_CELL_GAP,
+    cellSize = DEFAULT_CELL_SIZE,
+    className,
+    color = "currentColor",
+    data,
+    levels = DEFAULT_LEVELS,
+    weeks,
+    ...props
+  }, ref) => {
+    const ringLevels = Math.max(1, levels);
+    const columns = buildWeeks(data, ringLevels, weeks);
+    if (columns.length === 0) return null;
+    const step = cellSize + cellGap;
+    const width = columns.length * step - cellGap;
+    const height = DAYS_PER_WEEK * step - cellGap;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "rounded-2xl border border-border bg-background/40 p-3",
+          className
+        ),
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-label": "Contribution graph",
+            className: "h-full w-full",
+            height,
+            role: "img",
+            viewBox: `0 0 ${width} ${height}`,
+            width,
+            children: columns.map(
+              (column, weekIndex) => column.map((cell, dayIndex) => /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  fill: color,
+                  fillOpacity: cellOpacity(cell.level, ringLevels),
+                  height: cellSize,
+                  rx: 2,
+                  width: cellSize,
+                  x: weekIndex * step,
+                  y: dayIndex * step,
+                  children: /* @__PURE__ */ jsx("title", { children: `${cell.date}: ${cell.count.toLocaleString()}` })
+                },
+                cell.date
+              ))
+            )
+          }
+        )
+      }
+    );
+  }
+);
+ContributionGraph.displayName = "ContributionGraph";
+export {
+  ContributionGraph
+};

package/dist/components/contribution-graph/index.js

@@ -0,0 +1,6 @@
+import {
+  ContributionGraph
+} from "./contribution-graph";
+export {
+  ContributionGraph
+};