@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/mini-map-panel/mini-map-panel.js

@@ -1,73 +1,78 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
-const MiniMapPanel = forwardRef(
-  ({ className, markers = [], title = "Overview", viewport, world, ...props }, ref) => {
-    const viewportWidth = Math.max(
-      viewport.width / viewport.zoom / world.width * 100,
-      8
-    );
-    const viewportHeight = Math.max(
-      viewport.height / viewport.zoom / world.height * 100,
-      8
-    );
-    const viewportLeft = Math.min(
-      Math.max(viewport.x / world.width * 100, 0),
-      100 - viewportWidth
-    );
-    const viewportTop = Math.min(
-      Math.max(viewport.y / world.height * 100, 0),
-      100 - viewportHeight
-    );
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "w-52 rounded-sm border border-border bg-background p-3 font-mono",
-          className
-        ),
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground", children: title }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-muted-foreground", children: [
-              "Zoom ",
-              Math.round(viewport.zoom * 100),
-              "%"
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/3] overflow-hidden rounded-sm border border-border bg-background", children: [
-            markers.map((marker) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "absolute size-1.5 -translate-x-1/2 -translate-y-1/2 bg-foreground",
-                style: {
-                  left: `${marker.x / world.width * 100}%`,
-                  top: `${marker.y / world.height * 100}%`
-                },
-                title: marker.label
+const MiniMapPanel = ({
+  className,
+  markers = [],
+  ref,
+  title = "Overview",
+  viewport,
+  world,
+  ...props
+}) => {
+  const viewportWidth = Math.max(
+    viewport.width / viewport.zoom / world.width * 100,
+    8
+  );
+  const viewportHeight = Math.max(
+    viewport.height / viewport.zoom / world.height * 100,
+    8
+  );
+  const viewportLeft = Math.min(
+    Math.max(viewport.x / world.width * 100, 0),
+    100 - viewportWidth
+  );
+  const viewportTop = Math.min(
+    Math.max(viewport.y / world.height * 100, 0),
+    100 - viewportHeight
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-52 rounded-sm border border-border bg-background p-3 font-mono",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground", children: title }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-muted-foreground", children: [
+            "Zoom ",
+            Math.round(viewport.zoom * 100),
+            "%"
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/3] overflow-hidden rounded-sm border border-border bg-background", children: [
+          markers.map((marker) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute size-1.5 -translate-x-1/2 -translate-y-1/2 bg-foreground",
+              style: {
+                left: `${marker.x / world.width * 100}%`,
+                top: `${marker.y / world.height * 100}%`
               },
-              marker.id
-            )),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "absolute border border-foreground/80 bg-transparent",
-                style: {
-                  height: `${viewportHeight}%`,
-                  left: `${viewportLeft}%`,
-                  top: `${viewportTop}%`,
-                  width: `${viewportWidth}%`
-                }
+              title: marker.label
+            },
+            marker.id
+          )),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute border border-foreground/80 bg-transparent",
+              style: {
+                height: `${viewportHeight}%`,
+                left: `${viewportLeft}%`,
+                top: `${viewportTop}%`,
+                width: `${viewportWidth}%`
               }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-);
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 MiniMapPanel.displayName = "MiniMapPanel";
 export {
   MiniMapPanel

package/dist/components/model-comparison/model-comparison.js

@@ -2,9 +2,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useRef,
@@ -68,68 +67,72 @@ function ComparisonHeader({
     )
   ] });
 }
-const ModelComparison = forwardRef(
-  (props, ref) => {
-    const {
-      blindDefault = false,
-      children,
-      className,
-      hideBlindToggle = false,
-      labels,
-      prompt,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels]
-    );
-    const [blind, setBlind] = useState(blindDefault);
-    const columnIndexRef = useRef(/* @__PURE__ */ new Map());
-    const registerColumn = useCallback((id) => {
-      const existing = columnIndexRef.current.get(id);
-      if (existing !== void 0) return existing;
-      const next = columnIndexRef.current.size;
-      columnIndexRef.current.set(id, next);
-      return next;
-    }, []);
-    const contextValue = useMemo(
-      () => ({ blind, labels: resolvedLabels, registerColumn }),
-      [blind, registerColumn, resolvedLabels]
-    );
-    const handleToggleBlind = useCallback(() => {
-      setBlind((value) => !value);
-    }, []);
-    return /* @__PURE__ */ jsx(ModelComparisonContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
-      "section",
-      {
-        className: cn(
-          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
-          className
+const ModelComparison = ({
+  ref,
+  ...props
+}) => {
+  const {
+    blindDefault = false,
+    children,
+    className,
+    hideBlindToggle = false,
+    labels,
+    prompt,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const [blind, setBlind] = useState(blindDefault);
+  const columnIndexRef = useRef(/* @__PURE__ */ new Map());
+  const registerColumn = useCallback((id) => {
+    const existing = columnIndexRef.current.get(id);
+    if (existing !== void 0) return existing;
+    const next = columnIndexRef.current.size;
+    columnIndexRef.current.set(id, next);
+    return next;
+  }, []);
+  const contextValue = useMemo(
+    () => ({ blind, labels: resolvedLabels, registerColumn }),
+    [blind, registerColumn, resolvedLabels]
+  );
+  const handleToggleBlind = useCallback(() => {
+    setBlind((value) => !value);
+  }, []);
+  return /* @__PURE__ */ jsx(ModelComparisonContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          ComparisonHeader,
+          {
+            blind,
+            hideBlindToggle,
+            labels: resolvedLabels,
+            onToggleBlind: handleToggleBlind,
+            prompt
+          }
         ),
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            ComparisonHeader,
-            {
-              blind,
-              hideBlindToggle,
-              labels: resolvedLabels,
-              onToggleBlind: handleToggleBlind,
-              prompt
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3", children })
-        ]
-      }
-    ) });
-  }
-);
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3", children })
+      ]
+    }
+  ) });
+};
 ModelComparison.displayName = "ModelComparison";
-const ModelComparisonColumn = forwardRef((props, ref) => {
+const ModelComparisonColumn = ({
+  ref,
+  ...props
+}) => {
   const { badge, children, className, label, model, ...rest } = props;
   const id = useId();
-  const { blind, registerColumn } = useContext(ModelComparisonContext);
+  const { blind, registerColumn } = use(ModelComparisonContext);
   const columnIndex = registerColumn(id);
   const displayLabel = blind ? blindLabelForIndex(columnIndex) : label ?? model;
   return /* @__PURE__ */ jsxs(
@@ -153,11 +156,14 @@ const ModelComparisonColumn = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 ModelComparisonColumn.displayName = "ModelComparisonColumn";
-const ModelComparisonMeta = forwardRef((props, ref) => {
+const ModelComparisonMeta = ({
+  ref,
+  ...props
+}) => {
   const { className, cost, latency, tokens, ...rest } = props;
-  const { labels } = useContext(ModelComparisonContext);
+  const { labels } = use(ModelComparisonContext);
   const items = [];
   if (tokens !== void 0 && tokens !== null) {
     items.push({
@@ -187,11 +193,14 @@ const ModelComparisonMeta = forwardRef((props, ref) => {
       ] }, item.caption))
     }
   );
-});
+};
 ModelComparisonMeta.displayName = "ModelComparisonMeta";
-const ModelComparisonVote = forwardRef((props, ref) => {
+const ModelComparisonVote = ({
+  ref,
+  ...props
+}) => {
   const { buttonLabels, className, onVote, ...rest } = props;
-  const { labels: contextLabels } = useContext(ModelComparisonContext);
+  const { labels: contextLabels } = use(ModelComparisonContext);
   const handleLeft = useCallback(() => {
     onVote?.("left");
   }, [onVote]);
@@ -220,7 +229,7 @@ const ModelComparisonVote = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 ModelComparisonVote.displayName = "ModelComparisonVote";
 export {
   ModelComparison,

package/dist/components/multi-select/multi-select.js

@@ -143,115 +143,113 @@ function useMultiSelectState({
     setSelectedValues
   };
 }
-const MultiSelectTrigger = React.forwardRef(
-  ({
-    className,
-    contentId,
-    disabled = false,
-    onKeyDown,
-    open,
-    placeholder = "Select options",
-    selectedOptions,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxs(
-    Button,
-    {
-      "aria-controls": contentId,
-      "aria-expanded": open,
-      "aria-haspopup": "listbox",
-      className: cn(
-        "min-h-10 w-full justify-between px-3 py-2 text-sm font-normal",
-        selectedOptions.length === 0 && "text-muted-foreground",
-        className
-      ),
-      disabled,
-      onKeyDown,
-      ref,
-      role: "combobox",
-      type: "button",
-      variant: "outline",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 text-left", children: /* @__PURE__ */ jsx(
-          TriggerContent,
-          {
-            placeholder,
-            selectedOptions
-          }
-        ) }),
-        /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 size-4 shrink-0 opacity-50" })
-      ]
-    }
-  )
-);
-MultiSelectTrigger.displayName = "MultiSelectTrigger";
-const MultiSelect = React.forwardRef(
-  ({
-    defaultValue = [],
-    emptyText = "No options found.",
+const MultiSelectTrigger = ({
+  className,
+  contentId,
+  disabled = false,
+  onKeyDown,
+  open,
+  placeholder = "Select options",
+  ref,
+  selectedOptions,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  Button,
+  {
+    "aria-controls": contentId,
+    "aria-expanded": open,
+    "aria-haspopup": "listbox",
+    className: cn(
+      "min-h-10 w-full justify-between px-3 py-2 text-sm font-normal",
+      selectedOptions.length === 0 && "text-muted-foreground",
+      className
+    ),
+    disabled,
     onKeyDown,
-    onOpenChange,
-    onValueChange,
-    options,
-    searchable = false,
-    searchPlaceholder = "Search options...",
-    value,
-    ...props
-  }, ref) => {
-    const contentId = React.useId();
-    const { handleOpenChange, open, selectedValues, setSelectedValues } = useMultiSelectState({ defaultValue, onOpenChange, onValueChange, value });
-    const selectedOptions = React.useMemo(
-      () => options.filter((option) => selectedValues.includes(option.value)),
-      [options, selectedValues]
-    );
-    const handleSelect = React.useCallback(
-      (nextValue) => {
-        const nextSelectedValues = selectedValues.includes(nextValue) ? selectedValues.filter((valueItem) => valueItem !== nextValue) : [...selectedValues, nextValue];
-        setSelectedValues(nextSelectedValues);
-      },
-      [selectedValues, setSelectedValues]
-    );
-    const handleTriggerKeyDown = React.useCallback(
-      (event) => {
-        onKeyDown?.(event);
-        if (event.defaultPrevented || props.disabled) {
-          return;
-        }
-        if (shouldOpenFromKey(event.key)) {
-          event.preventDefault();
-          handleOpenChange(true);
-        }
-      },
-      [handleOpenChange, onKeyDown, props.disabled]
-    );
-    return /* @__PURE__ */ jsxs(Popover, { onOpenChange: handleOpenChange, open, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        MultiSelectTrigger,
+    ref,
+    role: "combobox",
+    type: "button",
+    variant: "outline",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 text-left", children: /* @__PURE__ */ jsx(
+        TriggerContent,
         {
-          ...props,
-          contentId,
-          onKeyDown: handleTriggerKeyDown,
-          open,
-          ref,
+          placeholder,
           selectedOptions
         }
       ) }),
-      /* @__PURE__ */ jsx(
-        MultiSelectContent,
-        {
-          contentId,
-          disabled: props.disabled || false,
-          emptyText,
-          onSelect: handleSelect,
-          options,
-          searchable,
-          searchPlaceholder,
-          selectedValues
-        }
-      )
-    ] });
+      /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 size-4 shrink-0 opacity-50" })
+    ]
   }
 );
+MultiSelectTrigger.displayName = "MultiSelectTrigger";
+const MultiSelect = ({
+  defaultValue = [],
+  emptyText = "No options found.",
+  onKeyDown,
+  onOpenChange,
+  onValueChange,
+  options,
+  ref,
+  searchable = false,
+  searchPlaceholder = "Search options...",
+  value,
+  ...props
+}) => {
+  const contentId = React.useId();
+  const { handleOpenChange, open, selectedValues, setSelectedValues } = useMultiSelectState({ defaultValue, onOpenChange, onValueChange, value });
+  const selectedOptions = React.useMemo(
+    () => options.filter((option) => selectedValues.includes(option.value)),
+    [options, selectedValues]
+  );
+  const handleSelect = React.useCallback(
+    (nextValue) => {
+      const nextSelectedValues = selectedValues.includes(nextValue) ? selectedValues.filter((valueItem) => valueItem !== nextValue) : [...selectedValues, nextValue];
+      setSelectedValues(nextSelectedValues);
+    },
+    [selectedValues, setSelectedValues]
+  );
+  const handleTriggerKeyDown = React.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || props.disabled) {
+        return;
+      }
+      if (shouldOpenFromKey(event.key)) {
+        event.preventDefault();
+        handleOpenChange(true);
+      }
+    },
+    [handleOpenChange, onKeyDown, props.disabled]
+  );
+  return /* @__PURE__ */ jsxs(Popover, { onOpenChange: handleOpenChange, open, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      MultiSelectTrigger,
+      {
+        ...props,
+        contentId,
+        onKeyDown: handleTriggerKeyDown,
+        open,
+        ref,
+        selectedOptions
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      MultiSelectContent,
+      {
+        contentId,
+        disabled: props.disabled || false,
+        emptyText,
+        onSelect: handleSelect,
+        options,
+        searchable,
+        searchPlaceholder,
+        selectedValues
+      }
+    )
+  ] });
+};
 MultiSelect.displayName = "MultiSelect";
 export {
   MultiSelect

package/dist/components/multi-select-lasso/multi-select-lasso.js

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const DEFAULT_LABELS = {
   plural: "items",
@@ -16,7 +13,10 @@ const normalizeRect = (rect) => {
   const height = Math.abs(rect.height);
   return { height, width, x, y };
 };
-const MultiSelectLasso = forwardRef((props, ref) => {
+const MultiSelectLasso = ({
+  ref,
+  ...props
+}) => {
   const { className, count, hint, labels, rect, ...rest } = props;
   if (!rect) {
     return null;
@@ -69,7 +69,7 @@ const MultiSelectLasso = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 MultiSelectLasso.displayName = "MultiSelectLasso";
 export {
   MultiSelectLasso

package/dist/components/native-select/index.js

@@ -0,0 +1,4 @@
+import { NativeSelect } from "./native-select";
+export {
+  NativeSelect
+};

package/dist/components/native-select/native-select.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+const NativeSelect = ({
+  children,
+  className,
+  ref,
+  rootClassName,
+  ...props
+}) => /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", rootClassName), children: [
+  /* @__PURE__ */ jsx(
+    "select",
+    {
+      ...props,
+      className: cn(
+        "h-10 w-full appearance-none rounded-md border border-input bg-background py-2 pl-3 pr-8 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      children
+    }
+  ),
+  /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 opacity-50" })
+] });
+NativeSelect.displayName = "NativeSelect";
+export {
+  NativeSelect
+};