@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/components/flow-diagram/flow-controls.js

@@ -12,7 +12,7 @@ import {
   X
 } from "lucide-react";
 import { cn } from "../../lib/utils";
-const BUTTON_CLASS = "flex h-8 w-8 items-center justify-center rounded hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
+const BUTTON_CLASS = "flex size-8 items-center justify-center rounded hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
 function ControlButton({
   disabled,
   icon,
@@ -36,14 +36,14 @@ function ControlButton({
 function getCopyIcon(status) {
   switch (status) {
     case "copying":
-      return /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" });
+      return /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" });
     case "success":
-      return /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-500" });
+      return /* @__PURE__ */ jsx(Check, { className: "size-4 text-green-500" });
     case "error":
-      return /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-destructive" });
+      return /* @__PURE__ */ jsx(X, { className: "size-4 text-destructive" });
     case "idle":
     case void 0:
-      return /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" });
+      return /* @__PURE__ */ jsx(Copy, { className: "size-4" });
   }
 }
 function getCopyTitle(status) {
@@ -81,7 +81,7 @@ const FlowControls = memo(function FlowControls2({
         /* @__PURE__ */ jsx(
           ControlButton,
           {
-            icon: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+            icon: /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
             label: "Zoom in",
             onClick: onZoomIn,
             title: "Zoom in"
@@ -90,7 +90,7 @@ const FlowControls = memo(function FlowControls2({
         /* @__PURE__ */ jsx(
           ControlButton,
           {
-            icon: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }),
+            icon: /* @__PURE__ */ jsx(Minus, { className: "size-4" }),
             label: "Zoom out",
             onClick: onZoomOut,
             title: "Zoom out"
@@ -100,7 +100,7 @@ const FlowControls = memo(function FlowControls2({
         /* @__PURE__ */ jsx(
           ControlButton,
           {
-            icon: /* @__PURE__ */ jsx(Move, { className: "h-4 w-4" }),
+            icon: /* @__PURE__ */ jsx(Move, { className: "size-4" }),
             label: "Fit view",
             onClick: onFitView,
             title: "Fit view"
@@ -124,7 +124,7 @@ const FlowControls = memo(function FlowControls2({
           /* @__PURE__ */ jsx(
             ControlButton,
             {
-              icon: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" }),
+              icon: /* @__PURE__ */ jsx(Maximize2, { className: "size-4" }),
               label: "Fullscreen",
               onClick: onFullscreen,
               title: "Toggle fullscreen"

package/dist/components/flow-diagram/flow-error-boundary.js

@@ -34,7 +34,7 @@ class FlowErrorBoundary extends Component {
           ),
           style: { height },
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-destructive" }) }),
+            /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-destructive/10", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "size-6 text-destructive" }) }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
               /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-foreground", children: "Failed to render diagram" }),
               /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: error?.message ?? "An unexpected error occurred while rendering the flow diagram." })
@@ -46,7 +46,7 @@ class FlowErrorBoundary extends Component {
                 onClick: this.handleRetry,
                 type: "button",
                 children: [
-                  /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }),
                   "Try again"
                 ]
               }

package/dist/components/flow-diagram/flow-fullscreen.js

@@ -1,26 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useEffect } from "react";
+import { memo } from "react";
 import { X } from "lucide-react";
 import { createPortal } from "react-dom";
+import { useEscapeKey } from "../../lib/use-escape-key";
 import { cn } from "../../lib/utils";
 const FlowFullscreen = memo(function FlowFullscreen2({
   children,
   isOpen,
   onClose
 }) {
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, onClose]);
+  useEscapeKey(onClose, { enabled: isOpen, target: "document" });
   if (!isOpen) return null;
   if (typeof document === "undefined") return null;
   return createPortal(
@@ -39,11 +29,11 @@ const FlowFullscreen = memo(function FlowFullscreen2({
             "button",
             {
               "aria-label": "Close fullscreen",
-              className: "flex h-8 w-8 items-center justify-center rounded hover:bg-muted transition-colors",
+              className: "flex size-8 items-center justify-center rounded hover:bg-muted transition-colors",
               onClick: onClose,
               title: "Close fullscreen (Esc)",
               type: "button",
-              children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+              children: /* @__PURE__ */ jsx(X, { className: "size-5" })
             }
           ) }),
           /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children })

package/dist/components/flow-diagram/use-flow-diagram.js

@@ -6,6 +6,8 @@ import {
   useReactFlow
 } from "@xyflow/react";
 import { toPng } from "html-to-image";
+import { useBodyScrollLock } from "../../lib/use-body-scroll-lock";
+import { useEscapeKey } from "../../lib/use-escape-key";
 const MIN_ZOOM = 0.1;
 const MAX_ZOOM = 2;
 const ZOOM_STEP = 0.2;
@@ -44,24 +46,11 @@ function useFullscreenState(allowFullscreen) {
   const closeFullscreen = useCallback(() => {
     setIsFullscreen(false);
   }, []);
-  useEffect(() => {
-    if (!isFullscreen) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        closeFullscreen();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isFullscreen, closeFullscreen]);
-  useEffect(() => {
-    document.body.style.overflow = isFullscreen ? "hidden" : "";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [isFullscreen]);
+  useEscapeKey(closeFullscreen, {
+    enabled: isFullscreen,
+    target: "document"
+  });
+  useBodyScrollLock(isFullscreen);
   return { closeFullscreen, isFullscreen, toggleFullscreen };
 }
 const IMAGE_WIDTH = 1024;

package/dist/components/follow-mode/follow-mode.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const PALETTE = {
+  amber: { chip: "bg-amber-500 text-white", ring: "ring-amber-500" },
+  blue: { chip: "bg-blue-500 text-white", ring: "ring-blue-500" },
+  emerald: { chip: "bg-emerald-500 text-white", ring: "ring-emerald-500" },
+  purple: { chip: "bg-purple-500 text-white", ring: "ring-purple-500" },
+  red: { chip: "bg-red-500 text-white", ring: "ring-red-500" },
+  rose: { chip: "bg-rose-500 text-white", ring: "ring-rose-500" }
+};
+const DEFAULT_LABELS = {
+  region: "Follow mode",
+  stop: "Stop"
+};
+const FollowMode = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      color = "blue",
+      labels,
+      name,
+      onStop,
+      ...rest
+    } = props;
+    const palette = PALETTE[color];
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "relative h-full w-full rounded-2xl ring-2 ring-inset",
+          palette.ring,
+          className
+        ),
+        "data-follow-color": color,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "pointer-events-auto absolute left-1/2 top-2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold shadow-sm",
+              "data-follow-chip": true,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5",
+                      palette.chip
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B8" }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "Following ",
+                        name
+                      ] })
+                    ]
+                  }
+                ),
+                onStop ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": resolvedLabels.stop,
+                    className: "inline-flex h-5 items-center rounded-full border border-border bg-background px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    onClick: onStop,
+                    type: "button",
+                    children: resolvedLabels.stop
+                  }
+                ) : null
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+FollowMode.displayName = "FollowMode";
+export {
+  FollowMode
+};

package/dist/components/follow-mode/index.js

@@ -0,0 +1,6 @@
+import {
+  FollowMode
+} from "./follow-mode";
+export {
+  FollowMode
+};

package/dist/components/form/form.js

@@ -0,0 +1,432 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useForm,
+  useFormContext
+} from "react-hook-form";
+import { cn } from "../../lib/utils";
+import { Label } from "../label/label";
+const FormRootContext = React.createContext(
+  void 0
+);
+const FormFieldContext = React.createContext(
+  void 0
+);
+const FormItemContext = React.createContext(
+  void 0
+);
+function useFormRootContext(componentName) {
+  const context = React.useContext(FormRootContext);
+  if (context === void 0) {
+    throw new Error(`${componentName} must be used within Form.`);
+  }
+  return context;
+}
+function useFormItemContext(componentName) {
+  const context = React.useContext(FormItemContext);
+  if (context === void 0) {
+    throw new Error(`${componentName} must be used within FormItem.`);
+  }
+  return context;
+}
+function composeIds(...ids) {
+  const value = ids.filter((id) => id !== void 0 && id.length > 0).join(" ");
+  return value.length > 0 ? value : void 0;
+}
+function resolveItemId(baseId, generatedId, suffix) {
+  if (baseId === void 0) {
+    return `${generatedId}-${suffix}`;
+  }
+  return baseId.endsWith(`-${suffix}`) ? `${baseId}-${generatedId}` : `${baseId}-${suffix}-${generatedId}`;
+}
+function isNamedFormChild(child, name) {
+  if (!React.isValidElement(child)) {
+    return false;
+  }
+  const { type } = child;
+  if (typeof type === "string" || typeof type === "symbol") {
+    return false;
+  }
+  return "displayName" in type && type.displayName === name;
+}
+function hasVisibleContent(children) {
+  return React.Children.toArray(children).some((child) => {
+    if (child === null || child === void 0 || typeof child === "boolean") {
+      return false;
+    }
+    if (typeof child === "string") {
+      return child.length > 0;
+    }
+    if (typeof child === "number") {
+      return true;
+    }
+    if (React.isValidElement(child)) {
+      const nestedChildren = child.props.children;
+      return nestedChildren === void 0 ? true : hasVisibleContent(nestedChildren);
+    }
+    return true;
+  });
+}
+function hasFormChild(children, name) {
+  return React.Children.toArray(children).some((child) => {
+    if (isNamedFormChild(child, name)) {
+      return true;
+    }
+    if (React.isValidElement(child)) {
+      return hasFormChild(child.props.children, name);
+    }
+    return false;
+  });
+}
+function hasRenderedFormChild(children, name) {
+  return React.Children.toArray(children).some((child) => {
+    if (isNamedFormChild(child, name)) {
+      return name === "FormMessage" ? hasVisibleContent(child.props.children) : true;
+    }
+    if (React.isValidElement(child)) {
+      return hasRenderedFormChild(child.props.children, name);
+    }
+    return false;
+  });
+}
+function createManagedSubmitHandler(form, options) {
+  const { onError, onValidSubmit, shouldValidate } = options;
+  if (!shouldValidate) {
+    return void 0;
+  }
+  return form.handleSubmit(
+    async (submittedValues) => {
+      if (onValidSubmit !== void 0) {
+        await onValidSubmit(submittedValues, form);
+      }
+    },
+    async (errors) => {
+      if (onError !== void 0) {
+        await onError(errors, form);
+      }
+    }
+  );
+}
+function createSubmitHandler(nativeSubmit, handleValidatedSubmit) {
+  return async (event) => {
+    nativeSubmit?.(event);
+    if (handleValidatedSubmit && !event.defaultPrevented) {
+      await handleValidatedSubmit(event);
+    }
+  };
+}
+function useFormRootContextValue(value) {
+  const { controlId, descriptionId, disabled, invalid, messageId, required } = value;
+  return React.useMemo(
+    () => ({
+      controlId,
+      descriptionId,
+      disabled,
+      invalid,
+      messageId,
+      required
+    }),
+    [controlId, descriptionId, disabled, invalid, messageId, required]
+  );
+}
+function FormMarkup({
+  children,
+  className,
+  disabled,
+  form,
+  formProps,
+  formRef,
+  handleValidatedSubmit,
+  invalid,
+  onSubmit,
+  rootContextValue
+}) {
+  return /* @__PURE__ */ jsx(FormRootContext.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      className: cn("space-y-2", className),
+      "data-disabled": disabled || form.formState.isSubmitting ? "true" : void 0,
+      "data-invalid": invalid ? "true" : void 0,
+      "data-submitting": form.formState.isSubmitting ? "true" : void 0,
+      onSubmit: onSubmit === void 0 && handleValidatedSubmit === void 0 ? void 0 : createSubmitHandler(onSubmit, handleValidatedSubmit),
+      ref: formRef,
+      ...formProps,
+      children: typeof children === "function" ? children(form) : children
+    }
+  ) }) });
+}
+function FormInner({
+  children,
+  className,
+  controlId,
+  defaultValues,
+  descriptionId,
+  disabled = false,
+  form: providedForm,
+  invalid = false,
+  messageId,
+  onError,
+  onSubmit,
+  onValidSubmit,
+  required = false,
+  resolver,
+  schema,
+  values,
+  ...props
+}, ref) {
+  const internalForm = useForm({
+    defaultValues,
+    resolver: schema === void 0 ? resolver : zodResolver(schema),
+    values
+  });
+  const form = providedForm ?? internalForm;
+  const isManagedForm = providedForm !== void 0 || resolver !== void 0 || schema !== void 0;
+  const rootContextValue = useFormRootContextValue({
+    controlId,
+    descriptionId,
+    disabled,
+    invalid,
+    messageId,
+    required
+  });
+  const handleValidatedSubmit = createManagedSubmitHandler(form, {
+    onError,
+    onValidSubmit,
+    shouldValidate: isManagedForm || onValidSubmit !== void 0 || onError !== void 0
+  });
+  return /* @__PURE__ */ jsx(
+    FormMarkup,
+    {
+      className,
+      disabled,
+      form,
+      formProps: props,
+      formRef: ref,
+      handleValidatedSubmit,
+      invalid,
+      onSubmit,
+      rootContextValue,
+      children
+    }
+  );
+}
+const FormBase = React.forwardRef(FormInner);
+FormBase.displayName = "Form";
+const Form = FormBase;
+function FormField({ ...props }) {
+  const fieldContextValue = React.useMemo(
+    () => ({ name: props.name }),
+    [props.name]
+  );
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: fieldContextValue, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+}
+function useFormField() {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = useFormItemContext("useFormField");
+  const { formState, getFieldState } = useFormContext();
+  if (fieldContext === void 0) {
+    return {
+      disabled: itemContext.disabled,
+      error: void 0,
+      formDescriptionId: itemContext.descriptionId,
+      formItemId: itemContext.controlId,
+      formMessageId: itemContext.messageId,
+      hasDescription: itemContext.hasDescription,
+      hasMessage: itemContext.hasMessage,
+      hasMessageSlot: itemContext.hasMessageSlot,
+      id: itemContext.id,
+      invalid: itemContext.invalid,
+      isDirty: false,
+      isTouched: false,
+      isValidating: false,
+      name: "",
+      required: itemContext.required
+    };
+  }
+  const fieldState = getFieldState(fieldContext.name, formState);
+  return {
+    disabled: itemContext.disabled,
+    error: fieldState.error,
+    formDescriptionId: itemContext.descriptionId,
+    formItemId: itemContext.controlId,
+    formMessageId: itemContext.messageId,
+    hasDescription: itemContext.hasDescription,
+    hasMessage: itemContext.hasMessage,
+    hasMessageSlot: itemContext.hasMessageSlot,
+    id: itemContext.id,
+    invalid: itemContext.invalid || fieldState.invalid,
+    isDirty: fieldState.isDirty,
+    isTouched: fieldState.isTouched,
+    isValidating: fieldState.isValidating,
+    name: fieldContext.name,
+    required: itemContext.required
+  };
+}
+const FormItem = React.forwardRef(
+  ({
+    children,
+    className,
+    disabled: itemDisabled,
+    invalid: itemInvalid,
+    required: itemRequired,
+    ...props
+  }, ref) => {
+    const {
+      controlId: controlIdBase,
+      descriptionId: descriptionIdBase,
+      disabled,
+      invalid,
+      messageId: messageIdBase,
+      required
+    } = useFormRootContext("FormItem");
+    const generatedId = React.useId();
+    const hasDescription = hasRenderedFormChild(children, "FormDescription");
+    const hasMessage = hasRenderedFormChild(children, "FormMessage");
+    const hasMessageSlot = hasFormChild(children, "FormMessage");
+    const effectiveDisabled = itemDisabled ?? disabled;
+    const effectiveInvalid = itemInvalid ?? invalid;
+    const effectiveRequired = itemRequired ?? required;
+    const value = React.useMemo(
+      () => ({
+        controlId: resolveItemId(controlIdBase, generatedId, "control"),
+        descriptionId: resolveItemId(
+          descriptionIdBase,
+          generatedId,
+          "description"
+        ),
+        disabled: effectiveDisabled,
+        hasDescription,
+        hasMessage,
+        hasMessageSlot,
+        id: generatedId,
+        invalid: effectiveInvalid,
+        messageId: resolveItemId(messageIdBase, generatedId, "message"),
+        required: effectiveRequired
+      }),
+      [
+        controlIdBase,
+        descriptionIdBase,
+        effectiveDisabled,
+        effectiveInvalid,
+        effectiveRequired,
+        generatedId,
+        hasDescription,
+        hasMessage,
+        hasMessageSlot,
+        messageIdBase
+      ]
+    );
+    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), ref, ...props, children }) });
+  }
+);
+FormItem.displayName = "FormItem";
+const FormLabel = React.forwardRef(({ className, htmlFor, ...props }, ref) => {
+  const { formItemId, invalid } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      className: cn(invalid && "text-destructive", className),
+      "data-invalid": invalid ? "true" : void 0,
+      htmlFor: htmlFor ?? formItemId,
+      ref,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+const FormControl = React.forwardRef(
+  ({ disabled: controlDisabled, id: _id, required: controlRequired, ...props }, ref) => {
+    const {
+      disabled,
+      error,
+      formDescriptionId,
+      formItemId,
+      formMessageId,
+      hasDescription,
+      hasMessage,
+      hasMessageSlot,
+      invalid,
+      required
+    } = useFormField();
+    const { formState } = useFormContext();
+    const hasErrorMessage = hasVisibleContent(error?.message);
+    const describedBy = composeIds(
+      props["aria-describedby"],
+      hasDescription ? formDescriptionId : void 0,
+      error === void 0 ? hasMessage && invalid ? formMessageId : void 0 : hasMessageSlot && hasErrorMessage ? formMessageId : void 0
+    );
+    const effectiveDisabled = controlDisabled ?? (disabled || formState.isSubmitting);
+    const effectiveRequired = controlRequired ?? required;
+    const nativeConstraintProps = {
+      disabled: effectiveDisabled || void 0,
+      required: effectiveRequired || void 0
+    };
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ...props,
+        ...nativeConstraintProps,
+        "aria-describedby": describedBy,
+        "aria-disabled": props["aria-disabled"] ?? (effectiveDisabled || void 0),
+        "aria-invalid": props["aria-invalid"] ?? (invalid || void 0),
+        "aria-required": props["aria-required"] ?? (effectiveRequired || void 0),
+        "data-disabled": effectiveDisabled ? "true" : void 0,
+        "data-invalid": invalid ? "true" : void 0,
+        id: formItemId,
+        ref
+      }
+    );
+  }
+);
+FormControl.displayName = "FormControl";
+const FormDescription = React.forwardRef(({ className, id: _id, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...props,
+      className: cn("text-sm text-muted-foreground", className),
+      id: formDescriptionId,
+      ref
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+const FormMessage = React.forwardRef(({ children, className, id: _id, ...props }, ref) => {
+  const { error, formMessageId, invalid } = useFormField();
+  const body = error?.message ?? children;
+  if (!hasVisibleContent(body)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...props,
+      className: cn(
+        "text-sm font-medium",
+        invalid || error !== void 0 ? "text-destructive" : "text-foreground",
+        className
+      ),
+      id: formMessageId,
+      ref,
+      role: invalid || error !== void 0 ? "alert" : void 0,
+      children: body
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+};