@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

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

@@ -21,77 +21,76 @@ function buildCoordinates(data, dimensions) {
     return { x, y };
   });
 }
-const LineChart = React.forwardRef(
-  ({
-    className,
-    color = "currentColor",
-    data,
-    gradientId = "line-chart-gradient",
-    height = DEFAULT_HEIGHT,
-    strokeWidth = DEFAULT_STROKE_WIDTH,
-    width = DEFAULT_WIDTH,
-    ...props
-  }, reference) => {
-    const canvasData = React.useMemo(
-      () => buildCoordinates(data, { height, strokeWidth, width }),
-      [data, width, height, strokeWidth]
-    );
-    if (canvasData.length === 0) {
-      return null;
-    }
-    const linePath = canvasData.map((point, index) => `${index === 0 ? "M" : "L"}${point.x},${point.y}`).join(" ");
-    const areaPath = canvasData.length === 0 ? "" : `M${canvasData[0]?.x ?? 0},${height} ${linePath} L${canvasData.at(-1)?.x ?? 0},${height}Z`;
-    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": "Line 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.45" }),
-                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
-              ] }) }),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: areaPath,
-                  fill: `url(#${gradientId})`,
-                  stroke: "none",
-                  vectorEffect: "non-scaling-stroke"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: linePath,
-                  fill: "none",
-                  stroke: color,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth,
-                  vectorEffect: "non-scaling-stroke"
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
+const LineChart = ({
+  className,
+  color = "currentColor",
+  data,
+  gradientId = "line-chart-gradient",
+  height = DEFAULT_HEIGHT,
+  ref: reference,
+  strokeWidth = DEFAULT_STROKE_WIDTH,
+  width = DEFAULT_WIDTH,
+  ...props
+}) => {
+  const canvasData = React.useMemo(
+    () => buildCoordinates(data, { height, strokeWidth, width }),
+    [data, width, height, strokeWidth]
+  );
+  if (canvasData.length === 0) {
+    return null;
   }
-);
+  const linePath = canvasData.map((point, index) => `${index === 0 ? "M" : "L"}${point.x},${point.y}`).join(" ");
+  const areaPath = canvasData.length === 0 ? "" : `M${canvasData[0]?.x ?? 0},${height} ${linePath} L${canvasData.at(-1)?.x ?? 0},${height}Z`;
+  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": "Line 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.45" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: areaPath,
+                fill: `url(#${gradientId})`,
+                stroke: "none",
+                vectorEffect: "non-scaling-stroke"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: linePath,
+                fill: "none",
+                stroke: color,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth,
+                vectorEffect: "non-scaling-stroke"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
 LineChart.displayName = "LineChart";
 export {
   LineChart

package/dist/components/chat-dock-section/chat-dock-section.js

@@ -1,54 +1,52 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { ArrowUpRight, MessageSquareText } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
-const ChatDockSection = forwardRef(
-  ({
-    className,
-    composerPlaceholder = "Ask about runs, errors, or pending work\u2026",
-    contextLabel,
-    messages,
-    title = "Assistant",
-    ...props
-  }, ref) => /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: cn(
-        "flex flex-col gap-4 rounded-2xl border border-border/70 bg-background/75 p-4 shadow-[0_10px_35px_oklch(var(--foreground)/0.06)] backdrop-blur-xl",
-        className
-      ),
-      ref,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
-              /* @__PURE__ */ jsx(MessageSquareText, { className: "size-4 text-primary" }),
-              title
-            ] }),
-            contextLabel ? /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-[0.24em] text-muted-foreground", children: contextLabel }) : null
+const ChatDockSection = ({
+  className,
+  composerPlaceholder = "Ask about runs, errors, or pending work\u2026",
+  contextLabel,
+  messages,
+  ref,
+  title = "Assistant",
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "section",
+  {
+    className: cn(
+      "flex flex-col gap-4 rounded-2xl border border-border/70 bg-background/75 p-4 shadow-[0_10px_35px_oklch(var(--foreground)/0.06)] backdrop-blur-xl",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+            /* @__PURE__ */ jsx(MessageSquareText, { className: "size-4 text-primary" }),
+            title
           ] }),
-          /* @__PURE__ */ jsxs(Button, { size: "sm", type: "button", variant: "ghost", children: [
-            "Open thread",
-            /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" })
-          ] })
+          contextLabel ? /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-[0.24em] text-muted-foreground", children: contextLabel }) : null
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: messages.map((message) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "rounded-xl border border-border/60 bg-background/85 px-3 py-2",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground", children: message.speaker }),
-              /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm leading-6 text-foreground", children: message.body })
-            ]
-          },
-          message.id
-        )) }),
-        /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-dashed border-border/80 bg-background/70 p-3 text-sm text-muted-foreground", children: composerPlaceholder })
-      ]
-    }
-  )
+        /* @__PURE__ */ jsxs(Button, { size: "sm", type: "button", variant: "ghost", children: [
+          "Open thread",
+          /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: messages.map((message) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "rounded-xl border border-border/60 bg-background/85 px-3 py-2",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground", children: message.speaker }),
+            /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm leading-6 text-foreground", children: message.body })
+          ]
+        },
+        message.id
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-dashed border-border/80 bg-background/70 p-3 text-sm text-muted-foreground", children: composerPlaceholder })
+    ]
+  }
 );
 ChatDockSection.displayName = "ChatDockSection";
 export {

package/dist/components/checkbox/checkbox.js

@@ -1,10 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
 import { cn } from "../../lib/utils";
-const Checkbox = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const Checkbox = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     className: cn(
@@ -21,7 +24,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, reference) => /* @__
       }
     )
   }
-));
+);
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export {
   Checkbox

package/dist/components/checkbox-group/checkbox-group.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Checkbox } from "../checkbox/checkbox";
+import { Label } from "../label/label";
+const CheckboxGroupContext = React.createContext(null);
+function useCheckboxGroupContext() {
+  const context = React.use(CheckboxGroupContext);
+  if (!context) {
+    throw new Error("CheckboxGroupItem must be used within a CheckboxGroup");
+  }
+  return context;
+}
+function useCheckboxGroupValue(value, defaultValue, onValueChange) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const values = value ?? internalValue;
+  const toggle = React.useCallback(
+    (item) => {
+      const nextValues = values.includes(item) ? values.filter((entry) => entry !== item) : [...values, item];
+      if (value === void 0) {
+        setInternalValue(nextValues);
+      }
+      onValueChange?.(nextValues);
+    },
+    [onValueChange, value, values]
+  );
+  return { toggle, values };
+}
+const CheckboxGroup = ({
+  children,
+  className,
+  defaultValue = [],
+  disabled = false,
+  name,
+  onValueChange,
+  orientation = "vertical",
+  ref,
+  value
+}) => {
+  const { toggle, values } = useCheckboxGroupValue(
+    value,
+    defaultValue,
+    onValueChange
+  );
+  const context = React.useMemo(
+    () => ({ disabled, name, toggle, values }),
+    [disabled, name, toggle, values]
+  );
+  return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex gap-3",
+        orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+        className
+      ),
+      ref,
+      role: "group",
+      children
+    }
+  ) });
+};
+CheckboxGroup.displayName = "CheckboxGroup";
+const CheckboxGroupItem = ({
+  children,
+  className,
+  disabled = false,
+  id,
+  ref,
+  value
+}) => {
+  const generatedId = React.useId();
+  const itemId = id ?? generatedId;
+  const group = useCheckboxGroupContext();
+  const checked = group.values.includes(value);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), ref, children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked,
+        disabled: disabled || group.disabled,
+        id: itemId,
+        name: group.name,
+        onCheckedChange: () => {
+          group.toggle(value);
+        },
+        value
+      }
+    ),
+    children ? /* @__PURE__ */ jsx(Label, { htmlFor: itemId, children }) : null
+  ] });
+};
+CheckboxGroupItem.displayName = "CheckboxGroupItem";
+export {
+  CheckboxGroup,
+  CheckboxGroupItem
+};

package/dist/components/checkbox-group/index.js

@@ -0,0 +1,8 @@
+import {
+  CheckboxGroup,
+  CheckboxGroupItem
+} from "./checkbox-group";
+export {
+  CheckboxGroup,
+  CheckboxGroupItem
+};

package/dist/components/choropleth-map/choropleth-map.js

@@ -2,9 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState
@@ -24,7 +23,7 @@ function resolveMissingColor() {
 }
 const ChoroplethContext = createContext(null);
 function useChoroplethContext() {
-  const ctx = useContext(ChoroplethContext);
+  const ctx = use(ChoroplethContext);
   if (!ctx) {
     throw new Error("ChoroplethMap subcomponent used outside its root.");
   }
@@ -142,7 +141,12 @@ function RegionPath({
     }
   );
 }
-const ChoroplethTooltip = forwardRef(({ children, className, ...rest }, ref) => {
+const ChoroplethTooltip = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => {
   const { hover, regionByid } = useChoroplethContext();
   if (!hover) return null;
   const region = regionByid.get(hover.id);
@@ -167,9 +171,14 @@ const ChoroplethTooltip = forwardRef(({ children, className, ...rest }, ref) =>
       ] })
     }
   );
-});
+};
 ChoroplethTooltip.displayName = "ChoroplethTooltip";
-const ChoroplethLegend = forwardRef(({ className, title, ...rest }, ref) => {
+const ChoroplethLegend = ({
+  className,
+  ref,
+  title,
+  ...rest
+}) => {
   const { legend } = useChoroplethContext();
   if (!legend) return null;
   const stops = legend.scale.join(", ");
@@ -200,7 +209,7 @@ const ChoroplethLegend = forwardRef(({ className, title, ...rest }, ref) => {
       ]
     }
   );
-});
+};
 ChoroplethLegend.displayName = "ChoroplethLegend";
 function DataSummary({ data, regions, titleId }) {
   return /* @__PURE__ */ jsxs("div", { "aria-labelledby": titleId, className: "sr-only", role: "region", children: [
@@ -294,82 +303,81 @@ function RegionsLayer({
     region.id
   )) });
 }
-const ChoroplethMap = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      colorScale = DEFAULT_SCALE,
-      data,
-      domain: domainProperty,
-      labels,
-      missingColor = resolveMissingColor(),
-      onSelectRegion,
-      regions,
-      ...rest
-    } = props;
-    const titleId = useId();
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels]
-    );
-    const domain = useMemo(
-      () => domainProperty ?? computeDomain(Object.values(data)),
-      [data, domainProperty]
-    );
-    const ctx = useChoroplethState({
-      colorScale,
-      data,
-      domain,
-      missingColor,
-      regions
-    });
-    const buckets = useMemo(() => bucketChildren(children), [children]);
-    const [selectedId, setSelectedId] = useState();
-    const handleSelect = useCallback(
-      (region) => {
-        setSelectedId(region.id);
-        onSelectRegion?.(region);
-      },
-      [onSelectRegion]
-    );
-    return /* @__PURE__ */ jsx(ChoroplethContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
-      "section",
-      {
-        "aria-label": resolvedLabels.region,
-        className: cn(
-          "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
-          className
+const ChoroplethMap = (props) => {
+  const {
+    children,
+    className,
+    colorScale = DEFAULT_SCALE,
+    data,
+    domain: domainProperty,
+    labels,
+    missingColor = resolveMissingColor(),
+    onSelectRegion,
+    ref,
+    regions,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const domain = useMemo(
+    () => domainProperty ?? computeDomain(Object.values(data)),
+    [data, domainProperty]
+  );
+  const ctx = useChoroplethState({
+    colorScale,
+    data,
+    domain,
+    missingColor,
+    regions
+  });
+  const buckets = useMemo(() => bucketChildren(children), [children]);
+  const [selectedId, setSelectedId] = useState();
+  const handleSelect = useCallback(
+    (region) => {
+      setSelectedId(region.id);
+      onSelectRegion?.(region);
+    },
+    [onSelectRegion]
+  );
+  return /* @__PURE__ */ jsx(ChoroplethContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "block h-full w-full",
+            preserveAspectRatio: "xMidYMid meet",
+            viewBox: `0 0 ${VIEWBOX_WIDTH.toString()} ${VIEWBOX_HEIGHT.toString()}`,
+            children: /* @__PURE__ */ jsx(
+              RegionsLayer,
+              {
+                onSelect: handleSelect,
+                regions,
+                selectedId,
+                setHoverFn: ctx.setHover
+              }
+            )
+          }
         ),
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              "aria-hidden": "true",
-              className: "block h-full w-full",
-              preserveAspectRatio: "xMidYMid meet",
-              viewBox: `0 0 ${VIEWBOX_WIDTH.toString()} ${VIEWBOX_HEIGHT.toString()}`,
-              children: /* @__PURE__ */ jsx(
-                RegionsLayer,
-                {
-                  onSelect: handleSelect,
-                  regions,
-                  selectedId,
-                  setHoverFn: ctx.setHover
-                }
-              )
-            }
-          ),
-          buckets.tooltip,
-          buckets.legend,
-          /* @__PURE__ */ jsx(DataSummary, { data, regions, titleId })
-        ]
-      }
-    ) });
-  }
-);
+        buckets.tooltip,
+        buckets.legend,
+        /* @__PURE__ */ jsx(DataSummary, { data, regions, titleId })
+      ]
+    }
+  ) });
+};
 ChoroplethMap.displayName = "ChoroplethMap";
 export {
   ChoroplethLegend,