@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

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

@@ -0,0 +1,14 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  inputGroupAddonVariants,
+  InputGroupInput,
+  inputGroupVariants
+} from "./input-group";
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  inputGroupAddonVariants,
+  inputGroupVariants
+};

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

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const inputGroupVariants = cva(
+  "flex w-full items-center overflow-hidden rounded-md border border-input bg-background text-sm ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50"
+);
+const inputGroupAddonVariants = cva(
+  "flex shrink-0 items-center text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      align: "leading"
+    },
+    variants: {
+      align: {
+        leading: "pl-3",
+        trailing: "pr-3"
+      }
+    }
+  }
+);
+const InputGroup = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(inputGroupVariants(), className),
+    "data-slot": "input-group",
+    ref,
+    role: "group",
+    ...props
+  }
+);
+InputGroup.displayName = "InputGroup";
+const InputGroupAddon = ({
+  align,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(inputGroupAddonVariants({ align }), className),
+    "data-slot": "input-group-addon",
+    ref,
+    ...props
+  }
+);
+InputGroupAddon.displayName = "InputGroupAddon";
+const InputGroupInput = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    className: cn(
+      "h-10 w-full flex-1 bg-transparent px-3 py-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed",
+      className
+    ),
+    ref,
+    ...props
+  }
+);
+InputGroupInput.displayName = "InputGroupInput";
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  inputGroupAddonVariants,
+  inputGroupVariants
+};

package/dist/components/input-otp/input-otp.js

@@ -1,10 +1,15 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext } from "react";
+import { use } from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Dot } from "lucide-react";
 import { cn } from "../../lib/utils";
-const InputOTP = forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+const InputOTP = ({
+  className,
+  containerClassName,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   OTPInput,
   {
     className: cn("disabled:cursor-not-allowed", className),
@@ -15,12 +20,21 @@ const InputOTP = forwardRef(({ className, containerClassName, ...props }, ref) =
     ref,
     ...props
   }
-));
+);
 InputOTP.displayName = "InputOTP";
-const InputOTPGroup = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center", className), ref, ...props }));
+const InputOTPGroup = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center", className), ref, ...props });
 InputOTPGroup.displayName = "InputOTPGroup";
-const InputOTPSlot = forwardRef(({ className, index, ...props }, ref) => {
-  const inputOTPContext = useContext(OTPInputContext);
+const InputOTPSlot = ({
+  className,
+  index,
+  ref,
+  ...props
+}) => {
+  const inputOTPContext = use(OTPInputContext);
   const slot = inputOTPContext.slots[index];
   if (!slot) {
     return null;
@@ -42,9 +56,12 @@ const InputOTPSlot = forwardRef(({ className, index, ...props }, ref) => {
       ]
     }
   );
-});
+};
 InputOTPSlot.displayName = "InputOTPSlot";
-const InputOTPSeparator = forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Dot, {}) }));
+const InputOTPSeparator = ({
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Dot, {}) });
 InputOTPSeparator.displayName = "InputOTPSeparator";
 export {
   InputOTP,

package/dist/components/interactive-timeline/interactive-timeline.js

@@ -2,9 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useRef,
@@ -69,7 +68,7 @@ const DEFAULT_LABELS = {
 };
 const TimelineContext = createContext(null);
 function useTimelineContext() {
-  const ctx = useContext(TimelineContext);
+  const ctx = use(TimelineContext);
   if (!ctx) {
     throw new Error("InteractiveTimeline subcomponent used outside its root.");
   }
@@ -424,7 +423,12 @@ function ScrollArea({
     }
   );
 }
-const InteractiveTimelineToolbar = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+const InteractiveTimelineToolbar = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -436,9 +440,13 @@ const InteractiveTimelineToolbar = forwardRef(({ children, className, ...rest },
     ...rest,
     children
   }
-));
+);
 InteractiveTimelineToolbar.displayName = "InteractiveTimelineToolbar";
-const InteractiveTimelineZoomIn = forwardRef(({ className, ...rest }, ref) => {
+const InteractiveTimelineZoomIn = ({
+  className,
+  ref,
+  ...rest
+}) => {
   const { labels, zoomIn } = useTimelineContext();
   return /* @__PURE__ */ jsx(
     "button",
@@ -455,9 +463,13 @@ const InteractiveTimelineZoomIn = forwardRef(({ className, ...rest }, ref) => {
       children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "+" })
     }
   );
-});
+};
 InteractiveTimelineZoomIn.displayName = "InteractiveTimelineZoomIn";
-const InteractiveTimelineZoomOut = forwardRef(({ className, ...rest }, ref) => {
+const InteractiveTimelineZoomOut = ({
+  className,
+  ref,
+  ...rest
+}) => {
   const { labels, zoomOut } = useTimelineContext();
   return /* @__PURE__ */ jsx(
     "button",
@@ -474,9 +486,14 @@ const InteractiveTimelineZoomOut = forwardRef(({ className, ...rest }, ref) => {
       children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2212" })
     }
   );
-});
+};
 InteractiveTimelineZoomOut.displayName = "InteractiveTimelineZoomOut";
-const InteractiveTimelineToday = forwardRef(({ children, className, ...rest }, ref) => {
+const InteractiveTimelineToday = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => {
   const { centerToday, labels } = useTimelineContext();
   return /* @__PURE__ */ jsx(
     "button",
@@ -493,9 +510,14 @@ const InteractiveTimelineToday = forwardRef(({ children, className, ...rest }, r
       children: children ?? "Today"
     }
   );
-});
+};
 InteractiveTimelineToday.displayName = "InteractiveTimelineToday";
-const InteractiveTimelineFilter = forwardRef(({ categories, className, ...rest }, ref) => {
+const InteractiveTimelineFilter = ({
+  categories,
+  className,
+  ref,
+  ...rest
+}) => {
   const { toggleCategory, visibleCategories } = useTimelineContext();
   return /* @__PURE__ */ jsx(
     "div",
@@ -527,7 +549,7 @@ const InteractiveTimelineFilter = forwardRef(({ categories, className, ...rest }
       })
     }
   );
-});
+};
 InteractiveTimelineFilter.displayName = "InteractiveTimelineFilter";
 const FALLBACK_TRACK = {
   color: "neutral",
@@ -644,7 +666,7 @@ function useTimelineFilter(categories, events) {
   }, [categories.length, events, hidden]);
   return { filteredEvents, toggleCategory, visibleCategories };
 }
-const InteractiveTimeline = forwardRef((props, ref) => {
+const InteractiveTimeline = (props) => {
   const {
     categories = [],
     children,
@@ -653,6 +675,7 @@ const InteractiveTimeline = forwardRef((props, ref) => {
     events = [],
     labels,
     onEventClick = noop,
+    ref,
     startDate,
     tracks: trackProperty,
     ...rest
@@ -712,7 +735,7 @@ const InteractiveTimeline = forwardRef((props, ref) => {
       ]
     }
   ) });
-});
+};
 InteractiveTimeline.displayName = "InteractiveTimeline";
 export {
   InteractiveTimeline,

package/dist/components/item/index.js

@@ -0,0 +1,18 @@
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+  itemVariants
+} from "./item";
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+  itemVariants
+};

package/dist/components/item/item.js

@@ -0,0 +1,118 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const itemVariants = cva("flex items-center gap-3 rounded-md text-sm", {
+  defaultVariants: {
+    size: "default",
+    variant: "default"
+  },
+  variants: {
+    size: {
+      default: "p-3",
+      sm: "p-2"
+    },
+    variant: {
+      default: "",
+      muted: "bg-muted/50",
+      outline: "border border-border"
+    }
+  }
+});
+const Item = ({
+  className,
+  ref,
+  size,
+  variant,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(itemVariants({ size, variant }), className),
+    "data-slot": "item",
+    ref,
+    ...props
+  }
+);
+Item.displayName = "Item";
+const ItemMedia = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex shrink-0 items-center justify-center [&_svg]:size-5",
+      className
+    ),
+    "data-slot": "item-media",
+    ref,
+    ...props
+  }
+);
+ItemMedia.displayName = "ItemMedia";
+const ItemContent = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex min-w-0 flex-1 flex-col gap-0.5", className),
+    "data-slot": "item-content",
+    ref,
+    ...props
+  }
+);
+ItemContent.displayName = "ItemContent";
+const ItemTitle = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("font-medium leading-none", className),
+    "data-slot": "item-title",
+    ref,
+    ...props
+  }
+);
+ItemTitle.displayName = "ItemTitle";
+const ItemDescription = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn("text-sm text-muted-foreground", className),
+    "data-slot": "item-description",
+    ref,
+    ...props
+  }
+);
+ItemDescription.displayName = "ItemDescription";
+const ItemActions = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex shrink-0 items-center gap-2", className),
+    "data-slot": "item-actions",
+    ref,
+    ...props
+  }
+);
+ItemActions.displayName = "ItemActions";
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+  itemVariants
+};

package/dist/components/jarvis-dock/jarvis-dock.js

@@ -1,8 +1,5 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const TONE_CLASS = {
   danger: "text-red-600 dark:text-red-400",
@@ -53,45 +50,46 @@ const ActionButton = (props) => {
     }
   );
 };
-const JarvisDock = forwardRef(
-  (props, ref) => {
-    const { actions, className, labels, onOpenPalette, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const handlePalette = () => {
-      onOpenPalette?.();
-    };
-    return /* @__PURE__ */ jsxs(
-      "nav",
-      {
-        "aria-label": resolvedLabels.region,
-        className: cn(
-          "inline-flex items-center gap-1 rounded-2xl border bg-background/90 p-1.5 shadow-md backdrop-blur",
-          className
-        ),
-        "data-jarvis-dock": true,
-        ref,
-        ...rest,
-        children: [
-          actions.map((action) => /* @__PURE__ */ jsx(ActionButton, { action }, action.id)),
-          onOpenPalette ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mx-1 h-8 w-px bg-border" }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                "aria-label": resolvedLabels.paletteTrigger,
-                className: "flex size-12 items-center justify-center rounded-md border border-transparent text-base text-muted-foreground transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                "data-jarvis-palette-trigger": true,
-                onClick: handlePalette,
-                type: "button",
-                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2318" })
-              }
-            )
-          ] }) : null
-        ]
-      }
-    );
-  }
-);
+const JarvisDock = ({
+  ref,
+  ...props
+}) => {
+  const { actions, className, labels, onOpenPalette, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const handlePalette = () => {
+    onOpenPalette?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "inline-flex items-center gap-1 rounded-2xl border bg-background/90 p-1.5 shadow-md backdrop-blur",
+        className
+      ),
+      "data-jarvis-dock": true,
+      ref,
+      ...rest,
+      children: [
+        actions.map((action) => /* @__PURE__ */ jsx(ActionButton, { action }, action.id)),
+        onOpenPalette ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mx-1 h-8 w-px bg-border" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": resolvedLabels.paletteTrigger,
+              className: "flex size-12 items-center justify-center rounded-md border border-transparent text-base text-muted-foreground transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "data-jarvis-palette-trigger": true,
+              onClick: handlePalette,
+              type: "button",
+              children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2318" })
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+};
 JarvisDock.displayName = "JarvisDock";
 export {
   JarvisDock

package/dist/components/kbd/kbd.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import {
-  forwardRef,
   useSyncExternalStore
 } from "react";
 import { cva } from "class-variance-authority";
@@ -72,52 +71,42 @@ function formatToken(token, mac) {
   if (special !== void 0) return special;
   return token.length === 1 ? token.toUpperCase() : token;
 }
-const Kbd = forwardRef(
-  ({ children, className, shortcut, size, ...rest }, ref) => {
-    const isMac = useIsMac();
-    if (children !== void 0) {
-      return /* @__PURE__ */ jsx(
-        "kbd",
-        {
-          className: cn(kbdVariants({ size }), className),
-          ref,
-          ...rest,
-          children
-        }
-      );
-    }
-    if (shortcut) {
-      const tokens = shortcut.split(SHORTCUT_SEPARATOR).filter(Boolean);
-      const ariaLabel = tokens.map((token) => formatToken(token, isMac)).join(" + ");
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-label": ariaLabel,
-          className: "inline-flex items-center gap-1",
-          role: "img",
-          children: tokens.map((token, index) => /* @__PURE__ */ jsx(
-            "kbd",
-            {
-              className: cn(kbdVariants({ size }), className),
-              ref: index === 0 ? ref : void 0,
-              ...index === 0 ? rest : {},
-              children: formatToken(token, isMac)
-            },
-            `${token}-${index.toString()}`
-          ))
-        }
-      );
-    }
+const Kbd = ({
+  children,
+  className,
+  ref,
+  shortcut,
+  size,
+  ...rest
+}) => {
+  const isMac = useIsMac();
+  if (children !== void 0) {
+    return /* @__PURE__ */ jsx("kbd", { className: cn(kbdVariants({ size }), className), ref, ...rest, children });
+  }
+  if (shortcut) {
+    const tokens = shortcut.split(SHORTCUT_SEPARATOR).filter(Boolean);
+    const ariaLabel = tokens.map((token) => formatToken(token, isMac)).join(" + ");
     return /* @__PURE__ */ jsx(
-      "kbd",
+      "span",
       {
-        className: cn(kbdVariants({ size }), className),
-        ref,
-        ...rest
+        "aria-label": ariaLabel,
+        className: "inline-flex items-center gap-1",
+        role: "img",
+        children: tokens.map((token, index) => /* @__PURE__ */ jsx(
+          "kbd",
+          {
+            className: cn(kbdVariants({ size }), className),
+            ref: index === 0 ? ref : void 0,
+            ...index === 0 ? rest : {},
+            children: formatToken(token, isMac)
+          },
+          `${token}-${index.toString()}`
+        ))
       }
     );
   }
-);
+  return /* @__PURE__ */ jsx("kbd", { className: cn(kbdVariants({ size }), className), ref, ...rest });
+};
 Kbd.displayName = "Kbd";
 export {
   Kbd,

package/dist/components/keyboard-shortcuts-help/keyboard-shortcuts-help.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef } from "react";
+import { useBodyScrollLock } from "../../lib/use-body-scroll-lock";
+import { useEscapeKey } from "../../lib/use-escape-key";
 import { cn } from "../../lib/utils";
 function KeyboardShortcutsHelpImpl({
   as: Heading = "h2",
@@ -14,25 +16,12 @@ function KeyboardShortcutsHelpImpl({
 }) {
   const closeButtonRef = useRef(null);
   useEffect(() => {
-    if (!isOpen) return;
-    closeButtonRef.current?.focus();
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, onClose]);
-  useEffect(() => {
-    document.body.style.overflow = isOpen ? "hidden" : "";
-    return () => {
-      document.body.style.overflow = "";
-    };
+    if (isOpen) {
+      closeButtonRef.current?.focus();
+    }
   }, [isOpen]);
+  useEscapeKey(onClose, { enabled: isOpen, preventDefault: true });
+  useBodyScrollLock(isOpen);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxs(
     "div",