@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/carousel/carousel.js

@@ -2,9 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -16,7 +15,7 @@ import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
 const CarouselContext = createContext(null);
 function useCarousel() {
-  const context = useContext(CarouselContext);
+  const context = use(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -100,63 +99,66 @@ function useCarouselLogic({
     scrollPrevious
   };
 }
-const Carousel = forwardRef(
-  ({
-    children,
-    className,
-    opts,
-    orientation = "horizontal",
-    plugins,
-    setApi,
-    ...props
-  }, ref) => {
-    const {
+const Carousel = ({
+  children,
+  className,
+  opts,
+  orientation = "horizontal",
+  plugins,
+  ref,
+  setApi,
+  ...props
+}) => {
+  const {
+    api,
+    canScrollNext,
+    canScrollPrevious,
+    carouselRef,
+    handleKeyDown,
+    scrollNext,
+    scrollPrevious
+  } = useCarouselLogic({ options: opts, orientation, plugins, setApi });
+  const contextValue = useMemo(
+    () => ({
+      api,
+      canScrollNext,
+      canScrollPrev: canScrollPrevious,
+      carouselRef,
+      opts,
+      orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+      scrollNext,
+      scrollPrev: scrollPrevious
+    }),
+    [
       api,
       canScrollNext,
       canScrollPrevious,
       carouselRef,
-      handleKeyDown,
+      opts,
+      orientation,
       scrollNext,
       scrollPrevious
-    } = useCarouselLogic({ options: opts, orientation, plugins, setApi });
-    const contextValue = useMemo(
-      () => ({
-        api,
-        canScrollNext,
-        canScrollPrev: canScrollPrevious,
-        carouselRef,
-        opts,
-        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollNext,
-        scrollPrev: scrollPrevious
-      }),
-      [
-        api,
-        canScrollNext,
-        canScrollPrevious,
-        carouselRef,
-        opts,
-        orientation,
-        scrollNext,
-        scrollPrevious
-      ]
-    );
-    return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        "aria-roledescription": "carousel",
-        className: cn("relative", className),
-        onKeyDownCapture: handleKeyDown,
-        ref,
-        role: "region",
-        ...props,
-        children
-      }
-    ) });
-  }
-);
+    ]
+  );
+  return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-roledescription": "carousel",
+      className: cn("relative", className),
+      onKeyDownCapture: handleKeyDown,
+      ref,
+      role: "region",
+      ...props,
+      children
+    }
+  ) });
+};
 Carousel.displayName = "Carousel";
-const CarouselContent = forwardRef(({ className, ...props }, ref) => {
+const CarouselContent = ({
+  className,
+  ref,
+  ...props
+}) => {
   const { carouselRef, orientation } = useCarousel();
   return /* @__PURE__ */ jsx("div", { className: "overflow-hidden", ref: carouselRef, children: /* @__PURE__ */ jsx(
     "div",
@@ -170,9 +172,13 @@ const CarouselContent = forwardRef(({ className, ...props }, ref) => {
       ...props
     }
   ) });
-});
+};
 CarouselContent.displayName = "CarouselContent";
-const CarouselItem = forwardRef(({ className, ...props }, ref) => {
+const CarouselItem = ({
+  className,
+  ref,
+  ...props
+}) => {
   const { orientation } = useCarousel();
   return /* @__PURE__ */ jsx(
     "div",
@@ -188,9 +194,15 @@ const CarouselItem = forwardRef(({ className, ...props }, ref) => {
       ...props
     }
   );
-});
+};
 CarouselItem.displayName = "CarouselItem";
-const CarouselPrevious = forwardRef(({ className, size = "icon", variant = "outline", ...props }, ref) => {
+const CarouselPrevious = ({
+  className,
+  ref,
+  size = "icon",
+  variant = "outline",
+  ...props
+}) => {
   const { canScrollPrev, orientation, scrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxs(
     Button,
@@ -212,9 +224,15 @@ const CarouselPrevious = forwardRef(({ className, size = "icon", variant = "outl
       ]
     }
   );
-});
+};
 CarouselPrevious.displayName = "CarouselPrevious";
-const CarouselNext = forwardRef(({ className, size = "icon", variant = "outline", ...props }, ref) => {
+const CarouselNext = ({
+  className,
+  ref,
+  size = "icon",
+  variant = "outline",
+  ...props
+}) => {
   const { canScrollNext, orientation, scrollNext } = useCarousel();
   return /* @__PURE__ */ jsxs(
     Button,
@@ -236,7 +254,7 @@ const CarouselNext = forwardRef(({ className, size = "icon", variant = "outline"
       ]
     }
   );
-});
+};
 CarouselNext.displayName = "CarouselNext";
 export {
   Carousel,

package/dist/components/chain-of-thought/chain-of-thought.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Check, LoaderCircle, X } from "lucide-react";
+import { cn } from "../../lib/utils";
+const markerVariants = cva(
+  "flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium",
+  {
+    defaultVariants: {
+      status: "pending"
+    },
+    variants: {
+      status: {
+        active: "border-primary bg-primary/10 text-primary",
+        complete: "border-transparent bg-primary text-primary-foreground",
+        error: "border-transparent bg-destructive text-destructive-foreground",
+        pending: "border-border bg-muted text-muted-foreground"
+      }
+    }
+  }
+);
+function StepMarkerIcon({
+  index,
+  status
+}) {
+  if (status === "complete") {
+    return /* @__PURE__ */ jsx(Check, { className: "size-3.5" });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsx(X, { className: "size-3.5" });
+  }
+  if (status === "active") {
+    return /* @__PURE__ */ jsx(LoaderCircle, { className: "size-3.5 animate-spin" });
+  }
+  return /* @__PURE__ */ jsx("span", { children: index + 1 });
+}
+function ChainOfThoughtItem({
+  index,
+  isLast,
+  step
+}) {
+  const status = step.status ?? "pending";
+  return /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx("span", { className: markerVariants({ status }), children: /* @__PURE__ */ jsx(StepMarkerIcon, { index, status }) }),
+      isLast ? null : /* @__PURE__ */ jsx("span", { className: "my-1 w-px flex-1 bg-border" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("pb-4", isLast && "pb-0"), children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "text-sm font-medium",
+            status === "pending" ? "text-muted-foreground" : "text-foreground"
+          ),
+          children: step.title
+        }
+      ),
+      step.description ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: step.description }) : null
+    ] })
+  ] });
+}
+const ChainOfThought = ({
+  className,
+  ref,
+  steps
+}) => /* @__PURE__ */ jsx("ol", { className: cn("flex flex-col", className), ref, children: steps.map((step, index) => /* @__PURE__ */ jsx(
+  ChainOfThoughtItem,
+  {
+    index,
+    isLast: index === steps.length - 1,
+    step
+  },
+  `${index}-${step.title}`
+)) });
+ChainOfThought.displayName = "ChainOfThought";
+export {
+  ChainOfThought
+};

package/dist/components/chain-of-thought/index.js

@@ -0,0 +1,6 @@
+import {
+  ChainOfThought
+} from "./chain-of-thought";
+export {
+  ChainOfThought
+};

package/dist/components/chart/area-chart.js

@@ -27,73 +27,72 @@ function getPathCoordinates(data, dimensions) {
   const area = points.length === 0 ? "" : `M${points[0]?.x ?? 0},${dimensions.height} ${line} L${points.at(-1)?.x ?? 0},${dimensions.height}Z`;
   return { area, line };
 }
-const AreaChart = React.forwardRef(
-  ({
-    className,
-    color = "currentColor",
-    data,
-    gradientId = "area-chart-gradient",
-    height = DEFAULT_HEIGHT,
-    strokeWidth = DEFAULT_STROKE_WIDTH,
-    width = DEFAULT_WIDTH,
-    ...props
-  }, reference) => {
-    const { area, line } = React.useMemo(
-      () => getPathCoordinates(data, { height, strokeWidth, width }),
-      [data, width, height, strokeWidth]
-    );
-    if (!line) return null;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "rounded-2xl border border-border bg-background/40 p-3",
-          className
-        ),
-        ref: reference,
-        ...props,
-        children: /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            "aria-label": "Area chart",
-            className: "h-full w-full",
-            height,
-            role: "img",
-            viewBox: `0 0 ${width} ${height}`,
-            width,
-            children: [
-              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.5" }),
-                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
-              ] }) }),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: area,
-                  fill: `url(#${gradientId})`,
-                  stroke: "none",
-                  vectorEffect: "non-scaling-stroke"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: line,
-                  fill: "none",
-                  stroke: color,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth,
-                  vectorEffect: "non-scaling-stroke"
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-);
+const AreaChart = ({
+  className,
+  color = "currentColor",
+  data,
+  gradientId = "area-chart-gradient",
+  height = DEFAULT_HEIGHT,
+  ref: reference,
+  strokeWidth = DEFAULT_STROKE_WIDTH,
+  width = DEFAULT_WIDTH,
+  ...props
+}) => {
+  const { area, line } = React.useMemo(
+    () => getPathCoordinates(data, { height, strokeWidth, width }),
+    [data, width, height, strokeWidth]
+  );
+  if (!line) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-border bg-background/40 p-3",
+        className
+      ),
+      ref: reference,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          "aria-label": "Area chart",
+          className: "h-full w-full",
+          height,
+          role: "img",
+          viewBox: `0 0 ${width} ${height}`,
+          width,
+          children: [
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.5" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: area,
+                fill: `url(#${gradientId})`,
+                stroke: "none",
+                vectorEffect: "non-scaling-stroke"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: line,
+                fill: "none",
+                stroke: color,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth,
+                vectorEffect: "non-scaling-stroke"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
 AreaChart.displayName = "AreaChart";
 export {
   AreaChart

package/dist/components/chart/bar-chart.js

@@ -1,79 +1,77 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { cn } from "../../lib/utils";
 const DEFAULT_WIDTH = 320;
 const DEFAULT_HEIGHT = 140;
 const DEFAULT_GAP = 12;
-const BarChart = React.forwardRef(
-  ({
-    className,
-    color = "currentColor",
-    data,
-    gap = DEFAULT_GAP,
-    gradientId = "bar-chart-gradient",
-    height = DEFAULT_HEIGHT,
-    width = DEFAULT_WIDTH,
-    ...props
-  }, reference) => {
-    if (data.length === 0) {
-      return null;
-    }
-    const values = data.map((point) => point.value);
-    const maxValue = Math.max(...values, 0);
-    const normalizedMax = maxValue || 1;
-    const totalGap = gap * Math.max(data.length - 1, 0);
-    const barWidth = Math.max((width - totalGap) / data.length, 6);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "rounded-lg border border-border bg-background/40 p-3",
-          className
-        ),
-        ref: reference,
-        ...props,
-        children: /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            "aria-label": "Bar chart",
-            className: "h-full w-full",
-            height,
-            role: "img",
-            viewBox: `0 0 ${width} ${height}`,
-            width,
-            children: [
-              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.9" }),
-                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.4" })
-              ] }) }),
-              data.map((point, index) => {
-                const barHeight = point.value / normalizedMax * (height - 12);
-                const x = index * (barWidth + gap);
-                const y = height - barHeight;
-                return /* @__PURE__ */ jsx(
-                  "rect",
-                  {
-                    fill: `url(#${gradientId})`,
-                    height: barHeight,
-                    rx: 4,
-                    width: barWidth,
-                    x,
-                    y,
-                    children: /* @__PURE__ */ jsxs("title", { children: [
-                      point.label ? `${point.label}: ` : "",
-                      point.value.toLocaleString()
-                    ] })
-                  },
-                  `${point.label ?? index}-${point.value}`
-                );
-              })
-            ]
-          }
-        )
-      }
-    );
+const BarChart = ({
+  className,
+  color = "currentColor",
+  data,
+  gap = DEFAULT_GAP,
+  gradientId = "bar-chart-gradient",
+  height = DEFAULT_HEIGHT,
+  ref: reference,
+  width = DEFAULT_WIDTH,
+  ...props
+}) => {
+  if (data.length === 0) {
+    return null;
   }
-);
+  const values = data.map((point) => point.value);
+  const maxValue = Math.max(...values, 0);
+  const normalizedMax = maxValue || 1;
+  const totalGap = gap * Math.max(data.length - 1, 0);
+  const barWidth = Math.max((width - totalGap) / data.length, 6);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-border bg-background/40 p-3",
+        className
+      ),
+      ref: reference,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          "aria-label": "Bar chart",
+          className: "h-full w-full",
+          height,
+          role: "img",
+          viewBox: `0 0 ${width} ${height}`,
+          width,
+          children: [
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.9" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.4" })
+            ] }) }),
+            data.map((point, index) => {
+              const barHeight = point.value / normalizedMax * (height - 12);
+              const x = index * (barWidth + gap);
+              const y = height - barHeight;
+              return /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  fill: `url(#${gradientId})`,
+                  height: barHeight,
+                  rx: 4,
+                  width: barWidth,
+                  x,
+                  y,
+                  children: /* @__PURE__ */ jsxs("title", { children: [
+                    point.label ? `${point.label}: ` : "",
+                    point.value.toLocaleString()
+                  ] })
+                },
+                `${point.label ?? index}-${point.value}`
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+};
 BarChart.displayName = "BarChart";
 export {
   BarChart