@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

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

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { cn } from "../../lib/utils";
@@ -10,7 +9,13 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-const ContextMenuSubTrigger = forwardRef(({ children, className, inset, ...props }, ref) => /* @__PURE__ */ jsxs(
+const ContextMenuSubTrigger = ({
+  children,
+  className,
+  inset,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.SubTrigger,
   {
     className: cn(
@@ -25,9 +30,13 @@ const ContextMenuSubTrigger = forwardRef(({ children, className, inset, ...props
       /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4" })
     ]
   }
-));
+);
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-const ContextMenuSubContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const ContextMenuSubContent = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.SubContent,
   {
     className: cn(
@@ -37,9 +46,13 @@ const ContextMenuSubContent = forwardRef(({ className, ...props }, ref) => /* @_
     ref,
     ...props
   }
-));
+);
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-const ContextMenuContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+const ContextMenuContent = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Content,
   {
     className: cn(
@@ -49,9 +62,14 @@ const ContextMenuContent = forwardRef(({ className, ...props }, ref) => /* @__PU
     ref,
     ...props
   }
-) }));
+) });
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-const ContextMenuItem = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+const ContextMenuItem = ({
+  className,
+  inset,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Item,
   {
     className: cn(
@@ -62,9 +80,15 @@ const ContextMenuItem = forwardRef(({ className, inset, ...props }, ref) => /* @
     ref,
     ...props
   }
-));
+);
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-const ContextMenuCheckboxItem = forwardRef(({ checked, children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+const ContextMenuCheckboxItem = ({
+  checked,
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.CheckboxItem,
   {
     checked,
@@ -79,9 +103,14 @@ const ContextMenuCheckboxItem = forwardRef(({ checked, children, className, ...p
       children
     ]
   }
-));
+);
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-const ContextMenuRadioItem = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+const ContextMenuRadioItem = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.RadioItem,
   {
     className: cn(
@@ -95,9 +124,14 @@ const ContextMenuRadioItem = forwardRef(({ children, className, ...props }, ref)
       children
     ]
   }
-));
+);
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-const ContextMenuLabel = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+const ContextMenuLabel = ({
+  className,
+  inset,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Label,
   {
     className: cn(
@@ -108,16 +142,20 @@ const ContextMenuLabel = forwardRef(({ className, inset, ...props }, ref) => /*
     ref,
     ...props
   }
-));
+);
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-const ContextMenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const ContextMenuSeparator = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Separator,
   {
     className: cn("-m-1 h-px bg-border", className),
     ref,
     ...props
   }
-));
+);
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 const ContextMenuShortcut = ({
   className,

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

@@ -0,0 +1,118 @@
+import { jsx } from "react/jsx-runtime";
+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 = ({
+  cellGap = DEFAULT_CELL_GAP,
+  cellSize = DEFAULT_CELL_SIZE,
+  className,
+  color = "currentColor",
+  data,
+  levels = DEFAULT_LEVELS,
+  ref,
+  weeks,
+  ...props
+}) => {
+  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
+};

package/dist/components/conversation-thread/conversation-thread.js

@@ -2,9 +2,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -15,7 +14,7 @@ import { cn } from "../../lib/utils";
 import { ThinkingBlock } from "../thinking-block/thinking-block";
 const ConversationThreadContext = createContext(null);
 function useConversationThreadContext() {
-  const ctx = useContext(ConversationThreadContext);
+  const ctx = use(ConversationThreadContext);
   if (!ctx) {
     throw new Error(
       "ConversationThread compound components must be used within <ConversationThread>"
@@ -147,61 +146,64 @@ function useConversationScroll(messages, isStreaming) {
     scrollToBottom
   };
 }
-const ConversationThread = forwardRef(
-  ({
-    children,
-    className,
-    isStreaming = false,
-    messages,
-    onFeedback,
-    onRetry,
-    onSend
-  }, reference) => {
-    const {
+const ConversationThread = ({
+  children,
+  className,
+  isStreaming = false,
+  messages,
+  onFeedback,
+  onRetry,
+  onSend,
+  ref: reference
+}) => {
+  const {
+    handleScroll,
+    isAtBottom,
+    messagesEndRef,
+    scrollContainerRef,
+    scrollToBottom
+  } = useConversationScroll(messages, isStreaming);
+  const contextValue = useMemo(
+    () => ({
       handleScroll,
       isAtBottom,
+      isStreaming,
+      messages,
       messagesEndRef,
+      onFeedback,
+      onRetry,
+      onSend,
       scrollContainerRef,
       scrollToBottom
-    } = useConversationScroll(messages, isStreaming);
-    const contextValue = useMemo(
-      () => ({
-        handleScroll,
-        isAtBottom,
-        isStreaming,
-        messages,
-        messagesEndRef,
-        onFeedback,
-        onRetry,
-        onSend,
-        scrollContainerRef,
-        scrollToBottom
-      }),
-      [
-        handleScroll,
-        isAtBottom,
-        isStreaming,
-        messages,
-        messagesEndRef,
-        onFeedback,
-        onRetry,
-        onSend,
-        scrollContainerRef,
-        scrollToBottom
-      ]
-    );
-    return /* @__PURE__ */ jsx(ConversationThreadContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn("flex h-full flex-col overflow-hidden", className),
-        ref: reference,
-        children
-      }
-    ) });
-  }
-);
+    }),
+    [
+      handleScroll,
+      isAtBottom,
+      isStreaming,
+      messages,
+      messagesEndRef,
+      onFeedback,
+      onRetry,
+      onSend,
+      scrollContainerRef,
+      scrollToBottom
+    ]
+  );
+  return /* @__PURE__ */ jsx(ConversationThreadContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex h-full flex-col overflow-hidden", className),
+      ref: reference,
+      children
+    }
+  ) });
+};
 ConversationThread.displayName = "ConversationThread";
-const ConversationHeader = forwardRef(({ children, className }, reference) => {
+const ConversationHeader = ({
+  children,
+  className,
+  ref: reference
+}) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -210,9 +212,13 @@ const ConversationHeader = forwardRef(({ children, className }, reference) => {
       children
     }
   );
-});
+};
 ConversationHeader.displayName = "ConversationHeader";
-const ConversationTitle = forwardRef(({ children, className }, reference) => {
+const ConversationTitle = ({
+  children,
+  className,
+  ref: reference
+}) => {
   return /* @__PURE__ */ jsx(
     "h2",
     {
@@ -221,9 +227,13 @@ const ConversationTitle = forwardRef(({ children, className }, reference) => {
       children
     }
   );
-});
+};
 ConversationTitle.displayName = "ConversationTitle";
-const ConversationMessages = forwardRef(({ children, className }, reference) => {
+const ConversationMessages = ({
+  children,
+  className,
+  ref: reference
+}) => {
   const { handleScroll, messages, messagesEndRef, scrollContainerRef } = useConversationThreadContext();
   return /* @__PURE__ */ jsxs("div", { className: cn("relative min-h-0 flex-1", className), ref: reference, children: [
     /* @__PURE__ */ jsx(
@@ -243,9 +253,13 @@ const ConversationMessages = forwardRef(({ children, className }, reference) =>
     ),
     children
   ] });
-});
+};
 ConversationMessages.displayName = "ConversationMessages";
-const ConversationEmpty = forwardRef(({ children, className }, reference) => {
+const ConversationEmpty = ({
+  children,
+  className,
+  ref: reference
+}) => {
   const { messages } = useConversationThreadContext();
   if (messages.length > 0) return null;
   return /* @__PURE__ */ jsx(
@@ -259,9 +273,13 @@ const ConversationEmpty = forwardRef(({ children, className }, reference) => {
       children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto flex flex-col items-center gap-4", children })
     }
   );
-});
+};
 ConversationEmpty.displayName = "ConversationEmpty";
-const ConversationSuggestions = forwardRef(({ className, suggestions = [] }, reference) => {
+const ConversationSuggestions = ({
+  className,
+  ref: reference,
+  suggestions = []
+}) => {
   const { onSend } = useConversationThreadContext();
   return /* @__PURE__ */ jsx(
     "div",
@@ -280,9 +298,12 @@ const ConversationSuggestions = forwardRef(({ className, suggestions = [] }, ref
       ))
     }
   );
-});
+};
 ConversationSuggestions.displayName = "ConversationSuggestions";
-const ConversationScrollButton = forwardRef(({ className }, reference) => {
+const ConversationScrollButton = ({
+  className,
+  ref: reference
+}) => {
   const { isAtBottom, scrollToBottom } = useConversationThreadContext();
   if (isAtBottom) return null;
   return /* @__PURE__ */ jsx(
@@ -299,9 +320,12 @@ const ConversationScrollButton = forwardRef(({ className }, reference) => {
       children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" })
     }
   );
-});
+};
 ConversationScrollButton.displayName = "ConversationScrollButton";
-const ConversationLoading = forwardRef(({ className }, reference) => {
+const ConversationLoading = ({
+  className,
+  ref: reference
+}) => {
   const { isStreaming, messages } = useConversationThreadContext();
   const lastMessage = messages.at(-1);
   if (!isStreaming || lastMessage?.role !== "assistant") return null;
@@ -334,7 +358,7 @@ const ConversationLoading = forwardRef(({ className }, reference) => {
       ]
     }
   );
-});
+};
 ConversationLoading.displayName = "ConversationLoading";
 export {
   ConversationEmpty,