@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/scope-selector/scope-selector.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Check, ChevronRight, Search } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge/badge";
@@ -287,49 +287,48 @@ function useScopeSelectorState({
     setQuery
   };
 }
-const ScopeSelector = forwardRef(
-  ({
-    className,
+const ScopeSelector = ({
+  className,
+  defaultValue,
+  disabled,
+  emptyMessage = "No scopes available.",
+  nodes,
+  onValueChange,
+  placeholder = "Select scope",
+  ref,
+  searchPlaceholder = "Search scopes...",
+  value
+}) => {
+  const state = useScopeSelectorState({
     defaultValue,
-    disabled,
-    emptyMessage = "No scopes available.",
     nodes,
     onValueChange,
-    placeholder = "Select scope",
-    searchPlaceholder = "Search scopes...",
     value
-  }, ref) => {
-    const state = useScopeSelectorState({
-      defaultValue,
-      nodes,
-      onValueChange,
-      value
-    });
-    return /* @__PURE__ */ jsxs(Popover, { onOpenChange: state.handleOpenChange, open: state.open, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          className: cn("w-full justify-between", className),
-          disabled,
-          ref,
-          variant: "outline",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate text-left", children: state.selectedPathLabel ?? placeholder }),
-            /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 rotate-90 text-muted-foreground" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        ScopeSelectorPopoverBody,
-        {
-          emptyMessage,
-          searchPlaceholder,
-          state
-        }
-      )
-    ] });
-  }
-);
+  });
+  return /* @__PURE__ */ jsxs(Popover, { onOpenChange: state.handleOpenChange, open: state.open, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: cn("w-full justify-between", className),
+        disabled,
+        ref,
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-left", children: state.selectedPathLabel ?? placeholder }),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 rotate-90 text-muted-foreground" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      ScopeSelectorPopoverBody,
+      {
+        emptyMessage,
+        searchPlaceholder,
+        state
+      }
+    )
+  ] });
+};
 ScopeSelector.displayName = "ScopeSelector";
 export {
   ScopeSelector

package/dist/components/scramble-text/index.js

@@ -0,0 +1,4 @@
+import { ScrambleText } from "./scramble-text";
+export {
+  ScrambleText
+};

package/dist/components/scramble-text/scramble-text.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => {
+      setReduced(query.matches);
+    };
+    onChange();
+    query.addEventListener("change", onChange);
+    return () => {
+      query.removeEventListener("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+function scramble(text, revealed, pool) {
+  const characters = text.match(/[\s\S]/gu) ?? [];
+  return characters.map((character, index) => {
+    if (index < revealed || character === " ") {
+      return character;
+    }
+    return pool.charAt(Math.floor(Math.random() * pool.length));
+  }).join("");
+}
+const defaultPool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+const ScrambleText = ({
+  className,
+  duration = 1200,
+  ref,
+  scrambleCharacters = defaultPool,
+  text,
+  ...props
+}) => {
+  const reduced = usePrefersReducedMotion();
+  const [display, setDisplay] = React.useState(text);
+  React.useEffect(() => {
+    if (reduced) {
+      setDisplay(text);
+      return;
+    }
+    const steps = Math.max(text.length, 1);
+    const tick = duration / steps;
+    let revealed = 0;
+    const timer = setInterval(() => {
+      revealed += 1;
+      setDisplay(scramble(text, revealed, scrambleCharacters));
+      if (revealed >= text.length) {
+        clearInterval(timer);
+      }
+    }, tick);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [duration, reduced, scrambleCharacters, text]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": text,
+      className: cn("font-mono", className),
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: display })
+    }
+  );
+};
+ScrambleText.displayName = "ScrambleText";
+export {
+  ScrambleText
+};

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

@@ -1,9 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils";
-const ScrollArea = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+const ScrollArea = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     className: cn("relative overflow-hidden", className),
@@ -15,9 +19,14 @@ const ScrollArea = forwardRef(({ children, className, ...props }, ref) => /* @__
       /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
     ]
   }
-));
+);
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-const ScrollBar = forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+const ScrollBar = ({
+  className,
+  orientation = "vertical",
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     className: cn(
@@ -31,7 +40,7 @@ const ScrollBar = forwardRef(({ className, orientation = "vertical", ...props },
     ...props,
     children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
   }
-));
+);
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 export {
   ScrollArea,

package/dist/components/scroll-progress/index.js

@@ -0,0 +1,4 @@
+import { ScrollProgress } from "./scroll-progress";
+export {
+  ScrollProgress
+};

package/dist/components/scroll-progress/scroll-progress.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function computeProgress() {
+  const element = document.documentElement;
+  const scrollable = element.scrollHeight - element.clientHeight;
+  if (scrollable <= 0) {
+    return 0;
+  }
+  return element.scrollTop / scrollable * 100;
+}
+const ScrollProgress = ({
+  className,
+  ref,
+  style,
+  ...props
+}) => {
+  const [progress, setProgress] = React.useState(0);
+  React.useEffect(() => {
+    const onScroll = () => {
+      setProgress(computeProgress());
+    };
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": Math.round(progress),
+      className: cn(
+        "fixed inset-x-0 top-0 z-50 h-1 origin-left bg-primary",
+        className
+      ),
+      ref,
+      role: "progressbar",
+      style: { width: `${progress}%`, ...style },
+      ...props
+    }
+  );
+};
+ScrollProgress.displayName = "ScrollProgress";
+export {
+  ScrollProgress
+};

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Suspense, useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useEffectEvent, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useDebounce } from "../../lib/use-debounce";
 import { Button } from "../button/button";
@@ -42,6 +42,9 @@ function SearchBarInner({
   const typingTimeoutReference = useRef(void 0);
   const lastSetSearchParameterReference = useRef("");
   const lastDebouncedQueryReference = useRef("");
+  const emitSearch = useEffectEvent((nextQuery) => {
+    onSearch?.(nextQuery);
+  });
   useEffect(() => {
     const searchParameter = searchParameters.get("search") ?? "";
     if (searchParameter === lastSetSearchParameterReference.current) {
@@ -68,7 +71,7 @@ function SearchBarInner({
     }
     lastDebouncedQueryReference.current = trimmedQuery;
     if (onSearch) {
-      onSearch(trimmedQuery);
+      emitSearch(trimmedQuery);
       return;
     }
     const currentUrlParameter = searchParameters.get("search") ?? "";

package/dist/components/search-field/index.js

@@ -0,0 +1,4 @@
+import { SearchField } from "./search-field";
+export {
+  SearchField
+};

package/dist/components/search-field/search-field.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Search, X } from "lucide-react";
+import { cn } from "../../lib/utils";
+function useSearchValue(value, defaultValue, onValueChange) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const currentValue = value ?? internalValue;
+  const setValue = (nextValue) => {
+    if (value === void 0) {
+      setInternalValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+  };
+  return [currentValue, setValue];
+}
+const SearchField = ({
+  className,
+  defaultValue = "",
+  onValueChange,
+  placeholder = "Search...",
+  ref,
+  value,
+  ...props
+}) => {
+  const [currentValue, setValue] = useSearchValue(
+    value,
+    defaultValue,
+    onValueChange
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...props,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-9 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&::-webkit-search-cancel-button]:appearance-none",
+          className
+        ),
+        onChange: (event) => {
+          setValue(event.target.value);
+        },
+        placeholder,
+        ref,
+        type: "search",
+        value: currentValue
+      }
+    ),
+    currentValue ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": "Clear search",
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        onClick: () => {
+          setValue("");
+        },
+        type: "button",
+        children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+      }
+    ) : null
+  ] });
+};
+SearchField.displayName = "SearchField";
+export {
+  SearchField
+};

package/dist/components/segmented-control/segmented-control.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -34,7 +33,12 @@ const segmentedControlItemVariants = cva(
     }
   }
 );
-const SegmentedControl = React.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+const SegmentedControl = ({
+  className,
+  ref,
+  size,
+  ...props
+}) => /* @__PURE__ */ jsx(
   ToggleGroupPrimitive.Root,
   {
     className: cn(segmentedControlVariants({ size }), className),
@@ -42,16 +46,21 @@ const SegmentedControl = React.forwardRef(({ className, size, ...props }, ref) =
     type: "single",
     ...props
   }
-));
+);
 SegmentedControl.displayName = "SegmentedControl";
-const SegmentedControlItem = React.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+const SegmentedControlItem = ({
+  className,
+  ref,
+  size,
+  ...props
+}) => /* @__PURE__ */ jsx(
   ToggleGroupPrimitive.Item,
   {
     className: cn(segmentedControlItemVariants({ size }), className),
     ref,
     ...props
   }
-));
+);
 SegmentedControlItem.displayName = "SegmentedControlItem";
 export {
   SegmentedControl,

package/dist/components/select/select.js

@@ -1,13 +1,17 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "../../lib/utils";
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+const SelectTrigger = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     className: cn(
@@ -21,9 +25,13 @@ const SelectTrigger = forwardRef(({ children, className, ...props }, ref) => /*
       /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" }) })
     ]
   }
-));
+);
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-const SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const SelectScrollUpButton = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     className: cn(
@@ -34,9 +42,13 @@ const SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => /* @__
     ...props,
     children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
   }
-));
+);
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-const SelectScrollDownButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const SelectScrollDownButton = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     className: cn(
@@ -47,9 +59,15 @@ const SelectScrollDownButton = forwardRef(({ className, ...props }, ref) => /* @
     ...props,
     children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
   }
-));
+);
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = forwardRef(({ children, className, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+const SelectContent = ({
+  children,
+  className,
+  position = "popper",
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     className: cn(
@@ -75,18 +93,27 @@ const SelectContent = forwardRef(({ children, className, position = "popper", ..
       /* @__PURE__ */ jsx(SelectScrollDownButton, {})
     ]
   }
-) }));
+) });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-const SelectLabel = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const SelectLabel = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
     ref,
     ...props
   }
-));
+);
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+const SelectItem = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     className: cn(
@@ -100,16 +127,20 @@ const SelectItem = forwardRef(({ children, className, ...props }, ref) => /* @__
       /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
     ]
   }
-));
+);
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-const SelectSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const SelectSeparator = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     className: cn("-m-1 h-px bg-muted", className),
     ref,
     ...props
   }
-));
+);
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 export {
   Select,

package/dist/components/selection-halo/selection-halo.js

@@ -1,71 +1,62 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const DEFAULT_LABELS = {
   region: "Selection"
 };
-const SelectionHalo = forwardRef(
-  (props, ref) => {
-    const {
-      bounds,
-      className,
-      label,
-      labels,
-      pulsing = false,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-label": resolvedLabels.region,
-        className: cn(
-          "pointer-events-none absolute z-20 rounded-md ring-2 ring-primary",
-          pulsing ? "animate-pulse" : "",
-          className
-        ),
-        "data-pulsing": pulsing ? "true" : void 0,
-        "data-selection-halo": true,
-        ref,
-        style: {
-          height: `${bounds.height.toString()}px`,
-          left: `${bounds.x.toString()}px`,
-          top: `${bounds.y.toString()}px`,
-          width: `${bounds.width.toString()}px`
-        },
-        ...rest,
-        children: [
-          ["nw", "ne", "se", "sw"].map((corner) => /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: cn(
-                "absolute size-2 rounded-sm border-2 border-primary bg-background",
-                corner === "nw" && "-left-1 -top-1",
-                corner === "ne" && "-right-1 -top-1",
-                corner === "se" && "-bottom-1 -right-1",
-                corner === "sw" && "-bottom-1 -left-1"
-              ),
-              "data-handle-corner": corner
-            },
-            corner
-          )),
-          label ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "absolute -top-6 left-0 inline-flex items-center rounded-md bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground shadow-sm",
-              "data-selection-label": true,
-              children: label
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
+const SelectionHalo = ({
+  ref,
+  ...props
+}) => {
+  const { bounds, className, label, labels, pulsing = false, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "pointer-events-none absolute z-20 rounded-md ring-2 ring-primary",
+        pulsing ? "animate-pulse" : "",
+        className
+      ),
+      "data-pulsing": pulsing ? "true" : void 0,
+      "data-selection-halo": true,
+      ref,
+      style: {
+        height: `${bounds.height.toString()}px`,
+        left: `${bounds.x.toString()}px`,
+        top: `${bounds.y.toString()}px`,
+        width: `${bounds.width.toString()}px`
+      },
+      ...rest,
+      children: [
+        ["nw", "ne", "se", "sw"].map((corner) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute size-2 rounded-sm border-2 border-primary bg-background",
+              corner === "nw" && "-left-1 -top-1",
+              corner === "ne" && "-right-1 -top-1",
+              corner === "se" && "-bottom-1 -right-1",
+              corner === "sw" && "-bottom-1 -left-1"
+            ),
+            "data-handle-corner": corner
+          },
+          corner
+        )),
+        label ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute -top-6 left-0 inline-flex items-center rounded-md bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground shadow-sm",
+            "data-selection-label": true,
+            children: label
+          }
+        ) : null
+      ]
+    }
+  );
+};
 SelectionHalo.displayName = "SelectionHalo";
 export {
   SelectionHalo